feat: Add support for importing external ES Modules

packages/vite-plugin-monkey/src/node/option.ts

@@ -116,6 +116,14 @@ export const resolvedOption = (
     Object.entries(externalGlobals2).forEach((s) => externalGlobals.push(s));
   }
 
+  const userExternalModules = build?.externalModules ?? {};
+  const externalModules: [string, string | Mod2UrlFn][] = [];
+  if (userExternalModules instanceof Array) {
+    userExternalModules.forEach((s) => externalModules.push(s));
+  } else {
+    Object.entries(userExternalModules).forEach((s) => externalModules.push(s));
+  }
+
   const { grant = [], $extra = [] } = pluginOption.userscript ?? {};
   let {
     name = {},
@@ -300,9 +308,11 @@ export const resolvedOption = (
       fileName,
       metaFileName: metaFileFc ? () => metaFileFc(fileName) : undefined,
       autoGrant: build.autoGrant ?? true,
-      externalGlobals: externalGlobals,
+      externalGlobals,
+      externalModules,
       externalResource: externalResource2,
     },
+    importsList: {},
     collectRequireUrls: [],
     collectResource: {},
     globalsPkg2VarName: {},

packages/vite-plugin-monkey/src/node/plugins/externalGlobals.ts

@@ -53,7 +53,10 @@ export const externalGlobalsPlugin = (
         build: {
           rollupOptions: {
             external(source, _importer, _isResolved) {
-              return source in globalsPkg2VarName;
+              return (
+                source in finalOption.globalsPkg2VarName ||
+                source in finalOption.importsList
+              );
             },
             // output: {
             //   globals: globalsPkg2VarName,

packages/vite-plugin-monkey/src/node/plugins/externalModules.ts

@@ -0,0 +1,42 @@
+import type { Plugin } from 'vite';
+import type { FinalMonkeyOption } from '../types';
+import { getModuleRealInfo } from '../_util';
+
+export const externalModulesPlugin = (
+  finalOption: FinalMonkeyOption,
+): Plugin => {
+  const { importsList } = finalOption;
+  return {
+    name: 'monkey:externalModules',
+    enforce: 'pre',
+    apply: 'build',
+    async config() {
+      for (const [moduleName, varName2LibUrl] of finalOption.build
+        .externalModules) {
+        const { name, version } = await getModuleRealInfo(moduleName);
+
+        if (typeof varName2LibUrl == 'string') {
+          importsList[moduleName] = varName2LibUrl;
+        } else if (typeof varName2LibUrl == 'function') {
+          importsList[moduleName] = await varName2LibUrl(
+            version,
+            name,
+            moduleName,
+          );
+        }
+      }
+      return {
+        build: {
+          rollupOptions: {
+            external(source, _importer, _isResolved) {
+              return (
+                source in finalOption.globalsPkg2VarName ||
+                source in finalOption.importsList
+              );
+            },
+          },
+        },
+      };
+    },
+  };
+};

packages/vite-plugin-monkey/src/node/plugins/finalBundle.ts

@@ -61,6 +61,55 @@ export const finalBundlePlugin = (finalOption: FinalMonkeyOption): Plugin => {
 
       const tlaIdentifier = lazyValue(() => findSafeTlaIdentifier(rawBundle));
 
+      const transformImports = (code: string) => {
+        const modulesList = finalOption.importsList;
+        const modules = Object.keys(modulesList);
+        const modulesRegex = new RegExp(`^(${modules.join('|')})(/|$)`);
+
+        if (!modules.length) return code;
+
+        // https://stackoverflow.com/questions/52086611/regex-for-matching-js-import-statements
+        const importRegex =
+          /import(\s*(?:[^\n;{}]+\s*,?)?(?:\s*\{(?:\s*[^\s"'{}]+\s*,?)+\})?\s*)from\s*(['"])([^'"\n]+)(?:['"])/g;
+        const result = code.replace(
+          importRegex,
+          (match, imports: string, _quote, pkg: string) => {
+            if (modulesRegex.test(pkg)) {
+              const namedImports = [...imports.matchAll(/\{([^}]*)\}/g)]
+                .flatMap((m) => m[1].trim().split(','))
+                .map((s) => s.trim().replace(/\sas\s/, ':'))
+                .filter((s) => s);
+              const nonNamedImports = imports
+                .replace(/\{[^{}]*\}/g, '')
+                .trim()
+                .split(',')
+                .map((s) => s.trim())
+                .filter((s) => s);
+
+              const url = modulesList[pkg];
+              let res = '';
+
+              if (namedImports.length > 0) {
+                res += `const {${namedImports.join(',')}} = await import("${url}");`;
+              }
+
+              for (const currentImport of nonNamedImports) {
+                if (currentImport.match(/\sas\s/)) {
+                  res += `const ${currentImport.split(/\sas\s/)[1].trim()} = await import("${url}");`;
+                } else {
+                  res += `const ${currentImport} = await import("${url}").then((m) => m.default);`;
+                }
+              }
+
+              return res;
+            }
+            return match;
+          },
+        );
+
+        return result;
+      };
+
       const buildResult = (await build({
         logLevel: 'error',
         configFile: false,
@@ -95,6 +144,7 @@ export const finalBundlePlugin = (finalOption: FinalMonkeyOption): Plugin => {
                 ) ?? [];
               if (chunk && chunk.type == 'chunk' && k) {
                 usedModules.add(k);
+                chunk.code = transformImports(chunk.code);
                 if (!hasDynamicImport) {
                   const ch = transformTlaToIdentifier(
                     this,
@@ -125,7 +175,10 @@ export const finalBundlePlugin = (finalOption: FinalMonkeyOption): Plugin => {
           target: 'esnext',
           rollupOptions: {
             external(source) {
-              return source in finalOption.globalsPkg2VarName;
+              return (
+                source in finalOption.globalsPkg2VarName ||
+                source in finalOption.importsList
+              );
             },
             output: {
               globals: finalOption.globalsPkg2VarName,

packages/vite-plugin-monkey/src/node/plugins/index.ts

@@ -8,6 +8,7 @@ import { externalResourcePlugin } from './externalResource';
 import { finalBundlePlugin } from './finalBundle';
 import { perviewPlugin } from './perview';
 import { redirectClientPlugin } from './redirectClient';
+import { externalModulesPlugin } from './externalModules';
 
 const monkeyPluginList = [
   // only serve
@@ -21,6 +22,7 @@ const monkeyPluginList = [
   externalLoaderPlugin,
   externalResourcePlugin,
   externalGlobalsPlugin,
+  externalModulesPlugin,
 
   // only build, final build
   finalBundlePlugin,

packages/vite-plugin-monkey/src/node/types.ts

@@ -58,6 +58,10 @@ export type ExternalGlobals =
   | Record<string, IArray<string | Mod2UrlFn>>
   | [string, IArray<string | Mod2UrlFn>][];
 
+export type ExternalModules =
+  | Record<string, string | Mod2UrlFn>
+  | [string, string | Mod2UrlFn][];
+
 export type ExternalResource = Record<
   string,
   | string
@@ -103,6 +107,7 @@ export interface FinalMonkeyOption {
     metaFileName?: () => string;
     autoGrant: boolean;
     externalGlobals: [string, IArray<string | Mod2UrlFn>][];
+    externalModules: [string, string | Mod2UrlFn][];
     externalResource: Record<
       string,
       {
@@ -114,6 +119,7 @@ export interface FinalMonkeyOption {
     >;
   };
   collectRequireUrls: string[];
+  importsList: Record<string, string>;
   collectResource: Record<string, string>;
   globalsPkg2VarName: Record<string, string>;
   requirePkgList: { moduleName: string; url: string }[];
@@ -243,6 +249,13 @@ export interface MonkeyOption {
      */
     externalGlobals?: ExternalGlobals;
 
+    /**
+     * same as `externalGlobals`, but the imports will be treated as modules
+     *
+     * @see https://github.com/lisonge/vite-plugin-monkey/issues/180
+     */
+    externalModules?: ExternalModules;
+
     /**
      * according to final code bundle, auto inject GM_* or GM.* to userscript comment grant
      *