Merge pull request #1595 from merico-dev/fix-bundle-externalization

fix(dashboard): improve module externalization logic in vite.config.ts
merico-dev · Dec 30, 2024 · c1836c4 · c1836c4
2 parents f984e70 + 588917c
commit c1836c4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 29 deletions.
diff --git a/dashboard/src/components/widgets/inline-function-input/index.tsx b/dashboard/src/components/widgets/inline-function-input/index.tsx
@@ -6,7 +6,7 @@ import { FunctionEditor, MonacoEditorRestriction } from '../function-editor';
 import { useTranslation } from 'react-i18next';
 import { OnMount } from '@monaco-editor/react';
 // @ts-expect-error type of this lib
-import { constrainedEditor } from 'constrained-editor-plugin/dist/esm/constrainedEditor.js';
+import { constrainedEditor } from 'constrained-editor-plugin';
 type Props = {
   value: TFunctionString;
   onChange: (v: TFunctionString) => void;

diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
@@ -7,6 +7,7 @@ import { defineConfig } from 'vitest/config';
 import { dependencies, peerDependencies } from './package.json';
 import { writeVersionFile } from './rollup-plugin-write-version-file';
 import * as path from 'path';
+import { escapeRegExp } from 'lodash';
 
 const GLOBAL_MODULE_IDS = {
   'crypto-js': 'CryptoJS',
@@ -21,32 +22,31 @@ const EXTERNAL_PATHS = [
   'echarts-for-react/lib/core',
   '/node_modules/echarts',
   '/node_modules/dayjs',
-  /^dayjs\/plugin/,
-  /^dayjs$/,
-  // babel transforms module id of emotion, we need to exclude all of them
-  /^@emotion/,
 ];
 
-function shouldExternalize(id: string) {
-  // check id against external paths
-  for (const path of EXTERNAL_PATHS) {
-    if (typeof path === 'string') {
-      if (id.includes(path)) {
-        return true;
-      }
-    } else if (path.test(id)) {
-      return true;
-    }
+class ModuleExternalizer {
+  makeModuleIdMatcher(id: string) {
+    return new RegExp(`^${escapeRegExp(id)}`);
+  }
+  dependencies = Object.keys(dependencies)
+    .concat(Object.keys(peerDependencies))
+    .concat([
+      // babel transforms module id of emotion, we need to exclude all of them
+      '@emotion',
+    ])
+    .map((it) => this.makeModuleIdMatcher(it));
+  extraPaths = ['/node_modules/echarts', '/node_modules/dayjs'].map((it) => new RegExp(escapeRegExp(it)));
+  matchers = this.dependencies.concat(this.extraPaths);
+
+  shouldExternalize(id: string) {
+    return this.matchers.some((matcher) => matcher.test(id));
   }
-  return false;
 }
 
-const DEPENDENCIES = new Set(Object.keys(dependencies).concat(Object.keys(peerDependencies)));
+const moduleExternalizer = new ModuleExternalizer();
+
 const externals = (id: string) => {
-  if (shouldExternalize(id)) {
-    return true;
-  }
-  return DEPENDENCIES.has(id);
+  return moduleExternalizer.shouldExternalize(id);
 };
 
 export default defineConfig({
@@ -84,10 +84,6 @@ export default defineConfig({
       react: 'react',
       'react/jsx-runtime.js': 'react/jsx-runtime.js',
       'reactflow/dist/style.css': 'reactflow/dist/style.css',
-      'constrained-editor-plugin/dist/esm/constrainedEditor.js': resolve(
-        __dirname,
-        '../node_modules/constrained-editor-plugin/dist/esm/constrainedEditor.js',
-      ),
     },
   },
   build: {

diff --git a/website/vite.config.ts b/website/vite.config.ts
@@ -45,10 +45,6 @@ export default ({ mode }) => {
         '@devtable/settings-form': workspace('settings-form', 'src'),
         'dayjs/locale': path.resolve(__dirname, '../node_modules/dayjs/locale'),
         'dayjs/plugin': path.resolve(__dirname, '../node_modules/dayjs/plugin'),
-        'constrained-editor-plugin/dist/esm/constrainedEditor.js': path.resolve(
-          __dirname,
-          '../node_modules/constrained-editor-plugin/dist/esm/constrainedEditor.js',
-        ),
       },
     },
     optimizeDeps: {