feat: Simplify n8n/chat build process (no-changelog) (#9952)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/@n8n/chat/README.md

@@ -31,9 +31,9 @@ Open the **Webhook** node and replace `YOUR_PRODUCTION_WEBHOOK_URL` with your pr
 Add the following code to your HTML page.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
 <script type="module">
-	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js';
+	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
 
 	createChat({
 		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'

packages/@n8n/chat/build.config.js

@@ -1,21 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-	entries: [
-		{
-			builder: 'mkdist',
-			format: 'esm',
-			input: './src',
-			outDir: './tmp/lib',
-		},
-		{
-			builder: 'mkdist',
-			format: 'cjs',
-			input: './src',
-			outDir: './tmp/cjs',
-		},
-	],
-	clean: true,
-	declaration: true,
-	failOnWarn: false,
-});

packages/@n8n/chat/package.json

@@ -3,13 +3,9 @@
   "version": "0.19.0",
   "scripts": {
     "dev": "pnpm run storybook",
-    "build": "pnpm build:vite && pnpm run build:individual && npm run build:prepare",
-    "build:full": "pnpm build:vite && pnpm build:vite:full && pnpm run build:individual && npm run build:prepare",
+    "build": "pnpm build:vite && pnpm build:bundle",
     "build:vite": "vite build",
-    "build:vite:full": "INCLUDE_VUE=true vite build",
-    "build:individual": "unbuild",
-    "build:prepare": "node scripts/postbuild.js",
-    "build:pack": "node scripts/pack.js",
+    "build:bundle": "INCLUDE_VUE=true vite build",
     "preview": "vite preview",
     "test:dev": "vitest",
     "test": "vitest run --coverage",
@@ -21,17 +17,18 @@
     "build:storybook": "storybook build",
     "release": "pnpm run build:full && cd dist && pnpm publish"
   },
-  "main": "./chat.umd.js",
-  "module": "./chat.es.js",
-  "types": "./types/index.d.ts",
+  "main": "./dist/chat.umd.js",
+  "module": "./dist/chat.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./index.js"
+      "import": "./dist/chat.es.js",
+      "require": "./dist/chat.umd.js",
+      "types": "./dist/index.d.ts"
     },
     "./style.css": {
-      "import": "./style.css",
-      "require": "./style.css"
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     },
     "./*": {
       "import": "./*",
@@ -49,11 +46,14 @@
     "@iconify-json/mdi": "^1.1.54",
     "@n8n/storybook": "workspace:*",
     "@types/markdown-it": "^12.2.3",
-    "shelljs": "^0.8.5",
-    "unbuild": "^2.0.0",
     "unplugin-icons": "^0.17.0",
-    "vite-plugin-dts": "^3.7.3"
+    "vite-plugin-dts": "^3.9.1"
   },
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/n8n-io/n8n.git"

packages/@n8n/chat/scripts/pack.js

@@ -1,11 +0,0 @@
-const path = require('path');
-const shelljs = require('shelljs');
-
-const rootDirPath = path.resolve(__dirname, '..');
-const distDirPath = path.resolve(rootDirPath, 'dist');
-
-shelljs.cd(rootDirPath);
-shelljs.exec('npm run build');
-
-shelljs.cd(distDirPath);
-shelljs.exec('npm pack');

packages/@n8n/chat/scripts/postbuild.js

@@ -1,36 +0,0 @@
-const path = require('path');
-const shelljs = require('shelljs');
-const glob = require('fast-glob');
-
-const rootDirPath = path.resolve(__dirname, '..');
-const n8nRootDirPath = path.resolve(rootDirPath, '..', '..', '..');
-const distDirPath = path.resolve(rootDirPath, 'dist');
-const srcDirPath = path.resolve(rootDirPath, 'src');
-const libDirPath = path.resolve(rootDirPath, 'tmp', 'lib');
-const cjsDirPath = path.resolve(rootDirPath, 'tmp', 'cjs');
-
-const packageJsonFilePath = path.resolve(rootDirPath, 'package.json');
-const readmeFilePath = path.resolve(rootDirPath, 'README.md');
-const licenseFilePath = path.resolve(n8nRootDirPath, 'LICENSE.md');
-
-shelljs.cp(packageJsonFilePath, distDirPath);
-shelljs.cp(readmeFilePath, distDirPath);
-shelljs.cp(licenseFilePath, distDirPath);
-
-shelljs.mv(path.resolve(distDirPath, 'src'), path.resolve(distDirPath, 'types'));
-
-function moveFiles(files, from, to) {
-	files.forEach((file) => {
-		const toFile = file.replace(from, to);
-		shelljs.mkdir('-p', path.dirname(toFile));
-		shelljs.mv(file, toFile);
-	});
-}
-
-const cjsFiles = glob.sync(path.resolve(cjsDirPath, '**', '*'));
-moveFiles(cjsFiles, 'tmp/cjs', 'dist');
-shelljs.rm('-rf', cjsDirPath);
-
-const libFiles = glob.sync(path.resolve(libDirPath, '**/*'));
-moveFiles(libFiles, 'tmp/lib', 'dist');
-shelljs.rm('-rf', libDirPath);

packages/@n8n/chat/src/style.scss

@@ -0,0 +1,5 @@
+.n8n-chat {
+	@import 'highlight.js/styles/github';
+}
+
+@import 'css';

packages/@n8n/chat/tsconfig.json

@@ -1,8 +1,9 @@
 {
 	"extends": "../../../tsconfig.json",
 	"compilerOptions": {
-		"rootDir": ".",
+		"rootDir": "src",
 		"outDir": "dist",
+		"baseUrl": "src",
 		"target": "esnext",
 		"module": "esnext",
 		"allowJs": true,
@@ -10,15 +11,13 @@
 		"incremental": false,
 		"allowSyntheticDefaultImports": true,
 		"resolveJsonModule": true,
-		"baseUrl": ".",
-		"types": ["vitest/globals", "unplugin-icons/types/vue"],
+		"types": ["vitest/globals"],
 		"paths": {
-			"@/*": ["src/*"],
-			"@n8n/chat/*": ["src/*"]
+			"@n8n/chat/*": ["./*"]
 		},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
 		"useUnknownInCatchVariables": false
 	},
-	"include": ["src/**/*.ts", "src/**/*.vue", "**/*.d.ts"]
+	"include": ["**/*.ts", "**/*.vue"]
 }

packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/templates.ts

@@ -48,7 +48,7 @@ export function createPage({
 			<meta name="viewport" content="width=device-width, initial-scale=1">
 			<title>Chat</title>
 			<link href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" rel="stylesheet" />
-			<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" rel="stylesheet" />
+			<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
 			<style>
 				html,
 				body,
@@ -60,7 +60,7 @@ export function createPage({
 		</head>
 		<body>
 			<script type="module">
-				import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat@latest/chat.bundle.es.js';
+				import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
 
 				(async function () {
 					const authentication = '${sanitizedAuthentication}';

packages/editor-ui/src/components/ChatEmbedModal.vue

@@ -93,9 +93,9 @@ ${importCode} { createChat } from '@n8n/chat';`,
 }));
 
 const cdnCode = computed(
-	() => `<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" rel="stylesheet" />
+	() => `<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
 <script type="module">
-${importCode} { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js';
+${importCode} { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
 
 ${commonCode.value.createChat}
 </${'script'}>`,