fix(editor): upgrade and make testing consistent in editor-ui and design-system (#4434)

* 📦 Update `package-lock.json` * 📦 Make versions consistent in design-system * 📦 Make lib versions consistent in editor-ui * 🔧 Make vite configs consistent * fix(design-system): updating vue2-bring-avatars alias Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
2022-10-25 13:46:25 +02:00
parent 07adc2d2dc
commit adef6d7083
5 changed files with 123 additions and 843 deletions
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -40,7 +40,7 @@
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/vue": "^6.5.10",
    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/vue": "^5.8.2",
+    "@testing-library/vue": "^5.8.3",
    "@types/markdown-it": "^12.2.3",
    "@types/sanitize-html": "^2.6.2",
    "c8": "7.11.0",
@@ -62,7 +62,7 @@
    "trim": ">=0.0.3",
    "typescript": "~4.8.0",
    "vite": "2.9.5",
-    "vite-plugin-vue2": "1.9.3",
+    "@vitejs/plugin-vue2": "^1.1.2",
    "vitest": "0.9.3",
    "vue": "~2.7.10",
    "vue-class-component": "^7.2.3",
--- a/packages/design-system/vite.config.ts
+++ b/packages/design-system/vite.config.ts
@@ -1,42 +1,45 @@
-import { createVuePlugin } from 'vite-plugin-vue2';
+import vue from '@vitejs/plugin-vue2';
 import { resolve } from 'path';
+import { defineConfig, mergeConfig } from 'vite';
+import { defineConfig as defineVitestConfig } from 'vitest/config';

-export default {
-	plugins: [
-		createVuePlugin(),
-	],
-	resolve: {
-		alias: {
-			'@': resolve(__dirname, 'src'),
-			'vue2-boring-avatars': resolve(__dirname, '..', '..', 'node_modules', 'vue2-boring-avatars', 'dist', 'vue-2-boring-avatars.umd.js'),
-			// 'vue2-boring-avatars': 'vue2-boring-avatars/dist/vue-2-boring-avatars.umd.js',
+export default mergeConfig(
+	defineConfig({
+		plugins: [
+			vue(),
+		],
+		resolve: {
+			alias: {
+				'@': resolve(__dirname, 'src'),
+				'vue2-boring-avatars': require.resolve('vue2-boring-avatars'),
+			},
 		},
-	},
-	build: {
-		lib: {
-			entry: resolve(__dirname, 'src', 'main.js'),
-			name: 'N8nDesignSystem',
-			fileName: (format) => `n8n-design-system.${format}.js`,
-		},
-		rollupOptions: {
-			// make sure to externalize deps that shouldn't be bundled
-			// into your library
-			external: ['vue'],
-			output: {
-				exports: 'named',
-				// Provide global variables to use in the UMD build
-				// for externalized deps
-				globals: {
-					vue: 'Vue',
+		build: {
+			lib: {
+				entry: resolve(__dirname, 'src', 'main.js'),
+				name: 'N8nDesignSystem',
+				fileName: (format) => `n8n-design-system.${format}.js`,
+			},
+			rollupOptions: {
+				// make sure to externalize deps that shouldn't be bundled
+				// into your library
+				external: ['vue'],
+				output: {
+					exports: 'named',
+					// Provide global variables to use in the UMD build
+					// for externalized deps
+					globals: {
+						vue: 'Vue',
+					},
 				},
 			},
 		},
-	},
-	test: {
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: [
-			'./src/__tests__/setup.ts',
-		],
-	},
-};
+	}),
+	defineVitestConfig({
+		test: {
+			globals: true,
+			environment: 'jsdom',
+			setupFiles: ['./src/__tests__/setup.ts'],
+		},
+	}),
+);
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -82,7 +82,7 @@
    "@intlify/vue-i18n-loader": "^1.1.0",
    "@n8n_io/eslint-config": "",
    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/vue": "^6.6.1",
+    "@testing-library/vue": "^5.8.3",
    "@types/dateformat": "^3.0.0",
    "@types/esprima": "^4.0.3",
    "@types/express": "^4.17.6",
@@ -109,9 +109,10 @@
    "string-template-parser": "^1.2.6",
    "tslint": "^6.1.2",
    "typescript": "~4.8.0",
-    "vite": "2.9",
+    "vite": "2.9.5",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-monaco-editor": "^1.0.10",
-    "vue-tsc": "^0.34.15"
+    "vue-tsc": "^0.34.15",
+    "vitest": "0.9.3"
  }
 }
--- a/packages/editor-ui/vite.config.ts
+++ b/packages/editor-ui/vite.config.ts
@@ -3,7 +3,8 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import legacy from '@vitejs/plugin-legacy';
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 import path, { resolve } from 'path';
-import {defineConfig, PluginOption} from "vite";
+import {defineConfig, mergeConfig, PluginOption} from "vite";
+import { defineConfig as defineVitestConfig } from 'vitest/config';
 import packageJSON from './package.json';

 const vendorChunks = ['vue', 'vue-router', 'vuex'];
@@ -35,73 +36,75 @@ const lodashAliases = ['orderBy', 'camelCase', 'cloneDeep', 'isEqual'].map(name
 	replacement: require.resolve(`lodash-es/${name}`),
 }))

-export default defineConfig({
-	plugins: [
-		legacy({
-			targets: ['defaults', 'not IE 11'],
-		}),
-		vue(),
-		...createHtmlPlugin({
-			inject: {
-				data: {
-					BASE_PATH: publicPath,
+export default mergeConfig(
+	defineConfig({
+		plugins: [
+			legacy({
+				targets: ['defaults', 'not IE 11'],
+			}),
+			vue(),
+			...createHtmlPlugin({
+				inject: {
+					data: {
+						BASE_PATH: publicPath,
+					},
 				},
-			},
-		}) as PluginOption[],
-		monacoEditorPlugin({
-			publicPath: 'assets/monaco-editor',
-			customDistPath: (root: string, buildOutDir: string, base: string) => `${root}/${buildOutDir}/assets/monaco-editor`,
-		}) as PluginOption,
-	],
-	resolve: {
-		alias: [
-			{ find: '@', replacement: resolve(__dirname, 'src') },
-			{ find: 'stream', replacement: '' },
-			{
-				find: /^n8n-design-system\//,
-				replacement: resolve(__dirname, '..', 'design-system', 'src') + '/',
-			},
-			...lodashAliases,
-			{
-				find: /^lodash.(.+)$/,
-				replacement: 'lodash-es/$1',
-			},
-			{
-				find: 'vue2-boring-avatars',
-				replacement: require.resolve('vue2-boring-avatars'),
-			},
-			{
-				find: /element-ui\/(packages|lib)\/button$/,
-				replacement: path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.ts'),
-			},
+			}) as PluginOption[],
+			monacoEditorPlugin({
+				publicPath: 'assets/monaco-editor',
+				customDistPath: (root: string, buildOutDir: string, base: string) => `${root}/${buildOutDir}/assets/monaco-editor`,
+			}) as PluginOption,
 		],
-	},
-	base: publicPath,
-	envPrefix: 'VUE_APP',
-	css: {
-		preprocessorOptions: {
-			scss: {
-				additionalData: '\n@use "@/n8n-theme-variables.scss" as *;\n',
-			},
+		resolve: {
+			alias: [
+				{ find: '@', replacement: resolve(__dirname, 'src') },
+				{ find: 'stream', replacement: '' },
+				{
+					find: /^n8n-design-system\//,
+					replacement: resolve(__dirname, '..', 'design-system', 'src') + '/',
+				},
+				...lodashAliases,
+				{
+					find: /^lodash.(.+)$/,
+					replacement: 'lodash-es/$1',
+				},
+				{
+					find: 'vue2-boring-avatars',
+					replacement: require.resolve('vue2-boring-avatars'),
+				},
+				{
+					find: /element-ui\/(packages|lib)\/button$/,
+					replacement: path.resolve(__dirname, '..', 'design-system/src/components/N8nButton/overrides/ElButton.ts'),
+				},
+			],
 		},
-	},
-	build: {
-		assetsInlineLimit: 0,
-		sourcemap: false,
-		rollupOptions: {
-			output: {
-				manualChunks: {
-					vendor: vendorChunks,
-					...renderChunks(),
+		base: publicPath,
+		envPrefix: 'VUE_APP',
+		css: {
+			preprocessorOptions: {
+				scss: {
+					additionalData: '\n@use "@/n8n-theme-variables.scss" as *;\n',
 				},
 			},
 		},
-	},
-	test: {
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: [
-			'./src/__tests__/setup.ts',
-		],
-	},
-});
+		build: {
+			assetsInlineLimit: 0,
+			sourcemap: false,
+			rollupOptions: {
+				output: {
+					manualChunks: {
+						vendor: vendorChunks,
+						...renderChunks(),
+					},
+				},
+			},
+		},
+	}),
+	defineVitestConfig({
+		test: {
+			globals: true,
+			environment: 'jsdom',
+			setupFiles: ['./src/__tests__/setup.ts'],
+		},
+	}),
+);