vite-plugin-blocklet 0.8.17 → 0.9.1

package/dist/index.cjs

@@ -10,6 +10,10 @@ var util = require('@ocap/util');
 var did = require('@arcblock/did');
 var ufo = require('ufo');
 var isMobile = require('ismobilejs');
+var path = require('node:path');
+var mlly = require('mlly');
+var externalGlobals = require('rollup-plugin-external-globals');
+var pMap = require('p-map');
 var getPort = require('get-port');
 var mri = require('mri');
 var httpProxyMiddleware = require('http-proxy-middleware');
@@ -477,6 +481,147 @@ function createExpressPlugin({ entryPath, ignorePath = [] }) {
   };
 }
 
+const DEFINE_KEY = '__UNDER_BLOCKLET_EMBED_BUNDLE__';
+const PROXY_SUFFIX = 'blocklet-embed-proxy';
+const ENTRY_FILE = 'index.mjs';
+const defaultExternals = [
+  // default externals
+  'react',
+  '@arcblock/ux/lib/Locale/context',
+  '@arcblock/did-connect/lib/Session',
+];
+
+/**
+ * @param {object} options - The options for the plugin.
+ * @param {object} [options.embeds={}] - The embeds to be built.
+ * @param {array} [options.embedExternals=['react', '@arcblock/ux/lib/Locale/context', '@arcblock/did-connect/lib/Session']] - The external modules to be used in the embeds.
+ * @param {array} [options.embedPlugins=[]] - The plugins to be used in the embeds.
+ * @param {number} [options.embedBuildConcurrency=0] - The plugins to be used in the embeds.
+ * @return {array} The Vite config plugin.
+ */
+function createEmbedPlugin(options) {
+  const cache = {
+    config: {},
+  };
+
+  const inputEmbeds = options?.embeds || [];
+  const embedBuildConcurrency = options?.embedBuildConcurrency || 0;
+  let embedList = inputEmbeds;
+  if (!Array.isArray(inputEmbeds)) {
+    embedList = Object.keys(inputEmbeds).map((key) => {
+      return {
+        output: key,
+        entry: inputEmbeds[key],
+      };
+    });
+  }
+
+  if (inputEmbeds.length === 0) {
+    return [];
+  }
+
+  return [
+    {
+      name: 'blocklet:embed:serve',
+      apply: 'serve',
+      enforce: 'pre',
+      async resolveId(id, importer, options) {
+        const queryObject = ufo.getQuery(id);
+        if (queryObject[PROXY_SUFFIX] !== undefined) {
+          return id;
+        }
+        const entryId = ufo.parseURL(id).pathname;
+        const embedInput = embedList.find((x) => ufo.joinURL(ufo.withLeadingSlash(x.output), ENTRY_FILE) === entryId);
+        if (embedInput?.entry) {
+          const resolution = await this.resolve(embedInput.entry, importer, options);
+          return ufo.withQuery(resolution.id, { [PROXY_SUFFIX]: '' });
+        }
+        return null;
+      },
+      async load(id) {
+        const queryObject = ufo.getQuery(id);
+        if (queryObject[PROXY_SUFFIX] !== undefined) {
+          const entryId = ufo.parseURL(id).pathname;
+          const fileContent = await node_fs.promises.readFile(entryId, { encoding: 'utf-8' });
+          const names = mlly.findExportNames(fileContent);
+          let code = `import ${JSON.stringify(entryId)};`;
+          code += `export * from ${JSON.stringify(entryId)};`;
+          if (names.includes('default')) {
+            code += `export { default } from ${JSON.stringify(entryId)};`;
+          }
+          return code;
+        }
+        return null;
+      },
+    },
+    {
+      name: 'blocklet:embed:build',
+      apply: 'build',
+      enforce: 'post',
+      config(config) {
+        cache.config = config;
+      },
+      async closeBundle() {
+        if (cache.config?.define?.[DEFINE_KEY]) {
+          return;
+        }
+
+        const external = options?.embedExternals ? options.embedExternals : defaultExternals;
+        const externalMaps = external.reduce((acc, cur) => {
+          acc[cur] = `window[Symbol.for('embedModules')]['${cur}']`;
+          return acc;
+        }, {});
+
+        const promiseList = pMap(
+          embedList,
+          async (embedItem) => {
+            const entryItem = embedItem.entry;
+            const outputItem = ufo.withoutLeadingSlash(embedItem.output);
+            // eslint-disable-next-line no-await-in-loop
+            await vite.build({
+              ...cache.config,
+              configFile: false,
+              publicDir: false,
+              define: {
+                ...cache.config?.define,
+                'process.env': {
+                  NODE_ENV: 'production',
+                  ...(cache.config?.define?.['process.env'] || {}),
+                },
+                [DEFINE_KEY]: true,
+              },
+              plugins: [
+                ...(cache.config?.plugins || []),
+                ...(options?.embedPlugins || []),
+                externalGlobals(externalMaps),
+              ],
+              build: {
+                lib: {
+                  entry: entryItem,
+                  formats: ['es'],
+                  fileName: path.parse(ENTRY_FILE).name,
+                },
+                rollupOptions: {
+                  external,
+                  output: {
+                    dir: ufo.joinURL(cache.config?.build?.outDir || 'dist', outputItem),
+                  },
+                },
+              },
+            });
+          },
+          {
+            concurrency: embedBuildConcurrency || 1,
+          },
+        );
+        if (embedBuildConcurrency === 0) {
+          await promiseList;
+        }
+      },
+    },
+  ];
+}
+
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
@@ -585,6 +730,7 @@ async function setupClient(app, options = {}) {
  * @property {boolean} [disableHmr=false] - Disable hmr plugin.
  * @property {boolean} [disableLoading=false] - Disable loading plugin.
  * @property {boolean} [disableDebug=false] - Disable debug plugin.
+ * @property {boolean} [disableEmbed=false] - Disable embed plugin.
  * @property {import('vite-plugin-node-polyfills').PolyfillOptions} [nodePolyfillsOptions]
  *
  * @property {string} [loadingElementId]
@@ -592,6 +738,10 @@ async function setupClient(app, options = {}) {
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
+ * @param {object} [embeds={}] - The embeds to be built.
+ * @param {array} [embedExternals=['react', '@arcblock/ux/lib/Locale/context', '@arcblock/did-connect/lib/Session']] - The external modules to be used in the embeds.
+ * @param {array} [embedPlugins=[]] - The plugins to be used in the embeds.
+ * @param {number} [embedBuildConcurrency=0] - The plugins to be used in the embeds.
  * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
  */
 
@@ -611,6 +761,7 @@ function createBlockletPlugin(options = {}) {
     disableHmr = false,
     disableLoading = false,
     disableDebug = false,
+    disableEmbed = false,
     nodePolyfillsOptions,
     ...restOptions
   } = options;
@@ -636,6 +787,9 @@ function createBlockletPlugin(options = {}) {
   if (!disableDebug) {
     plugins.push(createConfigPlugin(restOptions));
   }
+  if (!disableEmbed) {
+    plugins.push(createEmbedPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -646,6 +800,7 @@ Object.defineProperty(exports, "nodePolyfills", {
 });
 exports.createBlockletConfig = createConfigPlugin$1;
 exports.createBlockletDebug = createConfigPlugin;
+exports.createBlockletEmbed = createEmbedPlugin;
 exports.createBlockletExpress = createExpressPlugin;
 exports.createBlockletHmr = createHmrPlugin;
 exports.createBlockletLoading = createLoadingPlugin;

package/index.js

@@ -5,6 +5,7 @@ import createMetaPlugin from './libs/meta.js';
 import createLoadingPlugin from './libs/loading.js';
 import createDebugPlugin from './libs/debug.js';
 import createExpressPlugin from './libs/express.js';
+import createEmbedPlugin from './libs/embed.js';
 import setupClient from './libs/client.js';
 
 /**
@@ -17,6 +18,7 @@ import setupClient from './libs/client.js';
  * @property {boolean} [disableHmr=false] - Disable hmr plugin.
  * @property {boolean} [disableLoading=false] - Disable loading plugin.
  * @property {boolean} [disableDebug=false] - Disable debug plugin.
+ * @property {boolean} [disableEmbed=false] - Disable embed plugin.
  * @property {import('vite-plugin-node-polyfills').PolyfillOptions} [nodePolyfillsOptions]
  *
  * @property {string} [loadingElementId]
@@ -24,6 +26,10 @@ import setupClient from './libs/client.js';
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
+ * @param {object} [embeds={}] - The embeds to be built.
+ * @param {array} [embedExternals=['react', '@arcblock/ux/lib/Locale/context', '@arcblock/did-connect/lib/Session']] - The external modules to be used in the embeds.
+ * @param {array} [embedPlugins=[]] - The plugins to be used in the embeds.
+ * @param {number} [embedBuildConcurrency=0] - The plugins to be used in the embeds.
  * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
  */
 
@@ -43,6 +49,7 @@ export function createBlockletPlugin(options = {}) {
     disableHmr = false,
     disableLoading = false,
     disableDebug = false,
+    disableEmbed = false,
     nodePolyfillsOptions,
     ...restOptions
   } = options;
@@ -68,6 +75,9 @@ export function createBlockletPlugin(options = {}) {
   if (!disableDebug) {
     plugins.push(createDebugPlugin(restOptions));
   }
+  if (!disableEmbed) {
+    plugins.push(createEmbedPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -80,5 +90,6 @@ export {
   createLoadingPlugin as createBlockletLoading,
   createDebugPlugin as createBlockletDebug,
   createExpressPlugin as createBlockletExpress,
+  createEmbedPlugin as createBlockletEmbed,
   nodePolyfills,
 };

package/libs/embed.js

@@ -0,0 +1,148 @@
+import path from 'node:path';
+import { promises as fs } from 'node:fs';
+import { findExportNames } from 'mlly';
+import externalGlobals from 'rollup-plugin-external-globals';
+import { joinURL, withLeadingSlash, withoutLeadingSlash, getQuery, withQuery, parseURL } from 'ufo';
+import { build } from 'vite';
+import pMap from 'p-map';
+
+const DEFINE_KEY = '__UNDER_BLOCKLET_EMBED_BUNDLE__';
+const PROXY_SUFFIX = 'blocklet-embed-proxy';
+const ENTRY_FILE = 'index.mjs';
+const defaultExternals = [
+  // default externals
+  'react',
+  '@arcblock/ux/lib/Locale/context',
+  '@arcblock/did-connect/lib/Session',
+];
+
+/**
+ * @param {object} options - The options for the plugin.
+ * @param {object} [options.embeds={}] - The embeds to be built.
+ * @param {array} [options.embedExternals=['react', '@arcblock/ux/lib/Locale/context', '@arcblock/did-connect/lib/Session']] - The external modules to be used in the embeds.
+ * @param {array} [options.embedPlugins=[]] - The plugins to be used in the embeds.
+ * @param {number} [options.embedBuildConcurrency=0] - The plugins to be used in the embeds.
+ * @return {array} The Vite config plugin.
+ */
+export default function createEmbedPlugin(options) {
+  const cache = {
+    config: {},
+  };
+
+  const inputEmbeds = options?.embeds || [];
+  const embedBuildConcurrency = options?.embedBuildConcurrency || 0;
+  let embedList = inputEmbeds;
+  if (!Array.isArray(inputEmbeds)) {
+    embedList = Object.keys(inputEmbeds).map((key) => {
+      return {
+        output: key,
+        entry: inputEmbeds[key],
+      };
+    });
+  }
+
+  if (inputEmbeds.length === 0) {
+    return [];
+  }
+
+  return [
+    {
+      name: 'blocklet:embed:serve',
+      apply: 'serve',
+      enforce: 'pre',
+      async resolveId(id, importer, options) {
+        const queryObject = getQuery(id);
+        if (queryObject[PROXY_SUFFIX] !== undefined) {
+          return id;
+        }
+        const entryId = parseURL(id).pathname;
+        const embedInput = embedList.find((x) => joinURL(withLeadingSlash(x.output), ENTRY_FILE) === entryId);
+        if (embedInput?.entry) {
+          const resolution = await this.resolve(embedInput.entry, importer, options);
+          return withQuery(resolution.id, { [PROXY_SUFFIX]: '' });
+        }
+        return null;
+      },
+      async load(id) {
+        const queryObject = getQuery(id);
+        if (queryObject[PROXY_SUFFIX] !== undefined) {
+          const entryId = parseURL(id).pathname;
+          const fileContent = await fs.readFile(entryId, { encoding: 'utf-8' });
+          const names = findExportNames(fileContent);
+          let code = `import ${JSON.stringify(entryId)};`;
+          code += `export * from ${JSON.stringify(entryId)};`;
+          if (names.includes('default')) {
+            code += `export { default } from ${JSON.stringify(entryId)};`;
+          }
+          return code;
+        }
+        return null;
+      },
+    },
+    {
+      name: 'blocklet:embed:build',
+      apply: 'build',
+      enforce: 'post',
+      config(config) {
+        cache.config = config;
+      },
+      async closeBundle() {
+        if (cache.config?.define?.[DEFINE_KEY]) {
+          return;
+        }
+
+        const external = options?.embedExternals ? options.embedExternals : defaultExternals;
+        const externalMaps = external.reduce((acc, cur) => {
+          acc[cur] = `window[Symbol.for('embedModules')]['${cur}']`;
+          return acc;
+        }, {});
+
+        const promiseList = pMap(
+          embedList,
+          async (embedItem) => {
+            const entryItem = embedItem.entry;
+            const outputItem = withoutLeadingSlash(embedItem.output);
+            // eslint-disable-next-line no-await-in-loop
+            await build({
+              ...cache.config,
+              configFile: false,
+              publicDir: false,
+              define: {
+                ...cache.config?.define,
+                'process.env': {
+                  NODE_ENV: 'production',
+                  ...(cache.config?.define?.['process.env'] || {}),
+                },
+                [DEFINE_KEY]: true,
+              },
+              plugins: [
+                ...(cache.config?.plugins || []),
+                ...(options?.embedPlugins || []),
+                externalGlobals(externalMaps),
+              ],
+              build: {
+                lib: {
+                  entry: entryItem,
+                  formats: ['es'],
+                  fileName: path.parse(ENTRY_FILE).name,
+                },
+                rollupOptions: {
+                  external,
+                  output: {
+                    dir: joinURL(cache.config?.build?.outDir || 'dist', outputItem),
+                  },
+                },
+              },
+            });
+          },
+          {
+            concurrency: embedBuildConcurrency || 1,
+          },
+        );
+        if (embedBuildConcurrency === 0) {
+          await promiseList;
+        }
+      },
+    },
+  ];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.8.17",
+  "version": "0.9.1",
   "description": "",
   "main": "index.js",
   "files": [
@@ -24,7 +24,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "rollup": "^4.18.0"
+    "rollup": "^4.20.0"
   },
   "dependencies": {
     "@arcblock/did": "^1.18.128",
@@ -33,11 +33,14 @@
     "get-port": "^5.1.1",
     "http-proxy-middleware": "^3.0.0",
     "ismobilejs": "^1.1.1",
+    "mlly": "^1.7.1",
     "mri": "^1.2.0",
-    "semver": "^7.6.2",
-    "ufo": "^1.5.3",
+    "p-map": "^4.0.0",
+    "rollup-plugin-external-globals": "^0.12.0",
+    "semver": "^7.6.3",
+    "ufo": "^1.5.4",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "yaml": "^2.4.5"
+    "yaml": "^2.5.0"
   },
   "peerDependencies": {
     "vite": ">=5"