vite-plugin-blocklet 0.8.2 → 0.8.3

package/dist/index.cjs

@@ -14,6 +14,7 @@ var getPort = require('get-port');
 var mri = require('mri');
 var httpProxyMiddleware = require('http-proxy-middleware');
 
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 const { types } = Mcrypto;
 
 function toBlockletDid(name) {
@@ -26,12 +27,15 @@ function toBlockletDid(name) {
 }
 
 const isInBlocklet = !!process.env.BLOCKLET_PORT;
+const blockletPort = process.env.BLOCKLET_PORT;
+const blockletPrefix = process.env.BLOCKLET_DEV_MOUNT_POINT || '/';
 
 /**
  * Creates a HMR plugin with the given options.
  *
  * @param {Object} options - The options for the HMR plugin.
  * @param {string} options.version - The version of the vite version.
+ * @param {'middleware'|'client'} options.hmrMode - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 function createHmrPlugin(options = {}) {
@@ -39,7 +43,7 @@ function createHmrPlugin(options = {}) {
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
-    async transform(code, id) {
+    transform(code, id) {
       if (isInBlocklet && id.endsWith('/vite/dist/client/client.mjs')) {
         const pureVersion = semver.major(version);
         let replacedCode = code;
@@ -52,29 +56,35 @@ function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        // 根据页面的协议自动判断端口
-        replacedCode = replacedCode.replace(
-          /__HMR_PORT__/g,
-          'location.port || (location.protocol === "https:" ? 443 : 80);',
-        );
-
-        // 在页面加载时,触发一次 upgrade
-        replacedCode = replacedCode.replace(
-          'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
-          'async function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {\nawait waitForSuccessfulPing(protocol, hostAndPath);\n',
-        );
-        replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
-        replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
-
-        if ([4, 5].includes(pureVersion)) {
-          // 改变刷新页面的判断
+        replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+
+        if (process.env.VITE_HMR_MODE === 'middleware') {
+          // 根据页面的协议自动判断端口
+          replacedCode = replacedCode.replace(
+            /__HMR_PORT__/g,
+            'location.port || (location.protocol === "https:" ? 443 : 80);',
+          );
+
+          // 在页面加载时,触发一次 upgrade
           replacedCode = replacedCode.replace(
-            'const ping =',
-            "const ping = async () => {\ntry {\nawait fetch(`${pingHostProtocol}://${hostAndPath}`, {\nmode: 'no-cors',\nheaders: {\nAccept: 'text/x-vite-ping'\n}\n}).then(res => {\nif ([404, 502].includes(res.status)) {\nthrow new Error('waiting for server to restart...');\n}\n});\nreturn true;\n} catch {}\nreturn false;\n}\nconst pingBak =",
+            'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
+            'async function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {\nawait waitForSuccessfulPing(protocol, hostAndPath);\n',
           );
+          replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
+          replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
+
+          if ([4, 5].includes(pureVersion)) {
+            // 改变刷新页面的判断
+            replacedCode = replacedCode.replace(
+              'const ping =',
+              "const ping = async () => {\ntry {\nawait fetch(`${pingHostProtocol}://${hostAndPath}`, {\nmode: 'no-cors',\nheaders: {\nAccept: 'text/x-vite-ping'\n}\n}).then(res => {\nif ([404, 502].includes(res.status)) {\nthrow new Error('waiting for server to restart...');\n}\n});\nreturn true;\n} catch {}\nreturn false;\n}\nconst pingBak =",
+            );
+          }
         }
+
         return replacedCode;
       }
+      return code;
     },
   };
 }
@@ -85,10 +95,9 @@ function createConfigPlugin$1() {
     configureServer(server) {
       if (isInBlocklet) {
         server.middlewares.use((req, res, next) => {
-          const prefix = req.headers['x-path-prefix'] || '/';
           // blocklet server 会把设置的 base 从请求 url 中移除，所以需要再加回 base
-          if (!req.url.startsWith(prefix)) {
-            req.url = path.join(prefix || '/', req.url);
+          if (!req.url.startsWith(blockletPrefix)) {
+            req.url = path.join(blockletPrefix || '/', req.url);
           }
           return next();
         });
@@ -97,21 +106,9 @@ function createConfigPlugin$1() {
     config(config, { command }) {
       if (command === 'serve') {
         const targetConfig = {};
-        if (!config.base) {
-          let base = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
-
-          if (base) {
-            if (!base.startsWith('/')) {
-              base = `/${base}`;
-            }
-            if (!base.endsWith('/')) {
-              base = `${base}/`;
-            }
-          }
-          targetConfig.base = base;
-        }
+        targetConfig.base = path.join('/', config.base || blockletPrefix, '/');
         if (!(config.server && config.server.port)) {
-          const port = process.env.BLOCKLET_PORT || 3000;
+          const port = blockletPort || 3000;
           targetConfig.server = {
             port,
           };
@@ -404,6 +401,53 @@ function createConfigPlugin(options) {
   };
 }
 
+/**
+ * Creates a config plugin for Vite development server.
+ *
+ * @param {object} options - The options for the plugin.
+ * @param {string} options.entryPath - The entry path of the Express app.
+ * @return {object} The Vite config plugin.
+ */
+function createExpressPlugin({ entryPath }) {
+  // 此处需要解构 import.meta 对象，才能拿到 vite.config 的地址，否则拿到的地址会是 express.js 文件的地址
+  const { dirname } = { ...({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)) }) };
+  const fullPath = path.join(dirname, entryPath);
+  const folderPath = path.dirname(fullPath);
+  return {
+    name: 'blocklet:express',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        process.env.VITE = 'true';
+        try {
+          const { app } = await server.ssrLoadModule(entryPath);
+          app(req, res, next);
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    },
+    handleHotUpdate({ server, modules, timestamp }) {
+      const validatedModules = [];
+      const invalidatedModules = [];
+
+      for (const mod of modules) {
+        if (mod.file.includes(folderPath)) {
+          invalidatedModules.push(mod);
+        } else {
+          validatedModules.push(mod);
+        }
+      }
+      // 手动使模块失效
+      const mods = new Set();
+      for (const mod of invalidatedModules) {
+        server.moduleGraph.invalidateModule(mod, mods, timestamp, true);
+      }
+      return validatedModules;
+    },
+  };
+}
+
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
@@ -433,7 +477,8 @@ async function setupClient(app, options = {}) {
       target: `ws://127.0.0.1:${port}`,
       ws: true,
     });
-    app.use('/__vite_hmr__', wsProxy);
+    process.env.VITE_HMR_MODE = 'middleware';
+    app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
 
     // 以中间件模式创建 Vite 服务器
     const vite$1 = await vite.createServer({
@@ -442,7 +487,6 @@ async function setupClient(app, options = {}) {
         middlewareMode: true,
         hmr: {
           port,
-          clientPort: 80,
           path: '/__vite_hmr__',
         },
       },
@@ -464,12 +508,14 @@ 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 {import('vite-plugin-node-polyfills').PolyfillOptions} [nodePolyfillsOptions]
  *
  * @property {string} [loadingElementId]
  * @property {string} [loadingColor]
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
+ * @property {'middleware'|'client'} [hmrMode='middleware']
  */
 
 /**
@@ -488,6 +534,7 @@ function createBlockletPlugin(options = {}) {
     disableHmr = false,
     disableLoading = false,
     disableDebug = false,
+    nodePolyfillsOptions,
     ...restOptions
   } = options;
 
@@ -504,7 +551,7 @@ function createBlockletPlugin(options = {}) {
     plugins.push(createHmrPlugin(restOptions));
   }
   if (!disableNodePolyfills) {
-    plugins.push(vitePluginNodePolyfills.nodePolyfills({ protocolImports: true }));
+    plugins.push(vitePluginNodePolyfills.nodePolyfills(nodePolyfillsOptions));
   }
   if (!disableLoading) {
     plugins.push(createLoadingPlugin(restOptions));
@@ -522,6 +569,7 @@ Object.defineProperty(exports, "nodePolyfills", {
 });
 exports.createBlockletConfig = createConfigPlugin$1;
 exports.createBlockletDebug = createConfigPlugin;
+exports.createBlockletExpress = createExpressPlugin;
 exports.createBlockletHmr = createHmrPlugin;
 exports.createBlockletLoading = createLoadingPlugin;
 exports.createBlockletMeta = createMetaPlugin;

package/index.js

@@ -4,6 +4,7 @@ import createConfigPlugin from './libs/config.js';
 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 setupClient from './libs/client.js';
 
 /**
@@ -16,12 +17,14 @@ 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 {import('vite-plugin-node-polyfills').PolyfillOptions} [nodePolyfillsOptions]
  *
  * @property {string} [loadingElementId]
  * @property {string} [loadingColor]
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
+ * @property {'middleware'|'client'} [hmrMode='middleware']
  */
 
 /**
@@ -40,6 +43,7 @@ export function createBlockletPlugin(options = {}) {
     disableHmr = false,
     disableLoading = false,
     disableDebug = false,
+    nodePolyfillsOptions,
     ...restOptions
   } = options;
 
@@ -56,7 +60,7 @@ export function createBlockletPlugin(options = {}) {
     plugins.push(createHmrPlugin(restOptions));
   }
   if (!disableNodePolyfills) {
-    plugins.push(nodePolyfills({ protocolImports: true }));
+    plugins.push(nodePolyfills(nodePolyfillsOptions));
   }
   if (!disableLoading) {
     plugins.push(createLoadingPlugin(restOptions));
@@ -75,5 +79,6 @@ export {
   createMetaPlugin as createBlockletMeta,
   createLoadingPlugin as createBlockletLoading,
   createDebugPlugin as createBlockletDebug,
+  createExpressPlugin as createBlockletExpress,
   nodePolyfills,
 };

package/libs/client.js

@@ -1,7 +1,9 @@
+import path from 'node:path';
 import getPort from 'get-port';
 import { createServer } from 'vite';
 import mri from 'mri';
 import { createProxyMiddleware } from 'http-proxy-middleware';
+import { blockletPrefix } from './utils';
 
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
@@ -32,7 +34,8 @@ export default async function setupClient(app, options = {}) {
       target: `ws://127.0.0.1:${port}`,
       ws: true,
     });
-    app.use('/__vite_hmr__', wsProxy);
+    process.env.VITE_HMR_MODE = 'middleware';
+    app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
 
     // 以中间件模式创建 Vite 服务器
     const vite = await createServer({
@@ -41,7 +44,6 @@ export default async function setupClient(app, options = {}) {
         middlewareMode: true,
         hmr: {
           port,
-          clientPort: 80,
           path: '/__vite_hmr__',
         },
       },

package/libs/config.js

@@ -1,7 +1,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import YAML from 'yaml';
-import { toBlockletDid, isInBlocklet } from './utils.js';
+import { toBlockletDid, isInBlocklet, blockletPort, blockletPrefix } from './utils.js';
 
 export default function createConfigPlugin() {
   return {
@@ -9,10 +9,9 @@ export default function createConfigPlugin() {
     configureServer(server) {
       if (isInBlocklet) {
         server.middlewares.use((req, res, next) => {
-          const prefix = req.headers['x-path-prefix'] || '/';
           // blocklet server 会把设置的 base 从请求 url 中移除，所以需要再加回 base
-          if (!req.url.startsWith(prefix)) {
-            req.url = path.join(prefix || '/', req.url);
+          if (!req.url.startsWith(blockletPrefix)) {
+            req.url = path.join(blockletPrefix || '/', req.url);
           }
           return next();
         });
@@ -21,21 +20,9 @@ export default function createConfigPlugin() {
     config(config, { command }) {
       if (command === 'serve') {
         const targetConfig = {};
-        if (!config.base) {
-          let base = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
-
-          if (base) {
-            if (!base.startsWith('/')) {
-              base = `/${base}`;
-            }
-            if (!base.endsWith('/')) {
-              base = `${base}/`;
-            }
-          }
-          targetConfig.base = base;
-        }
+        targetConfig.base = path.join('/', config.base || blockletPrefix, '/');
         if (!(config.server && config.server.port)) {
-          const port = process.env.BLOCKLET_PORT || 3000;
+          const port = blockletPort || 3000;
           targetConfig.server = {
             port,
           };

package/libs/express.js

@@ -0,0 +1,47 @@
+import path from 'node:path';
+/**
+ * Creates a config plugin for Vite development server.
+ *
+ * @param {object} options - The options for the plugin.
+ * @param {string} options.entryPath - The entry path of the Express app.
+ * @return {object} The Vite config plugin.
+ */
+export default function createExpressPlugin({ entryPath }) {
+  // 此处需要解构 import.meta 对象，才能拿到 vite.config 的地址，否则拿到的地址会是 express.js 文件的地址
+  const { dirname } = { ...import.meta };
+  const fullPath = path.join(dirname, entryPath);
+  const folderPath = path.dirname(fullPath);
+  return {
+    name: 'blocklet:express',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        process.env.VITE = 'true';
+        try {
+          const { app } = await server.ssrLoadModule(entryPath);
+          app(req, res, next);
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    },
+    handleHotUpdate({ server, modules, timestamp }) {
+      const validatedModules = [];
+      const invalidatedModules = [];
+
+      for (const mod of modules) {
+        if (mod.file.includes(folderPath)) {
+          invalidatedModules.push(mod);
+        } else {
+          validatedModules.push(mod);
+        }
+      }
+      // 手动使模块失效
+      const mods = new Set();
+      for (const mod of invalidatedModules) {
+        server.moduleGraph.invalidateModule(mod, mods, timestamp, true);
+      }
+      return validatedModules;
+    },
+  };
+}

package/libs/hmr.js

@@ -1,12 +1,13 @@
 import { version as viteVersion } from 'vite';
 import semver from 'semver';
-import { isInBlocklet } from './utils.js';
+import { blockletPrefix, isInBlocklet } from './utils.js';
 
 /**
  * Creates a HMR plugin with the given options.
  *
  * @param {Object} options - The options for the HMR plugin.
  * @param {string} options.version - The version of the vite version.
+ * @param {'middleware'|'client'} options.hmrMode - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 export default function createHmrPlugin(options = {}) {
@@ -14,7 +15,7 @@ export default function createHmrPlugin(options = {}) {
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
-    async transform(code, id) {
+    transform(code, id) {
       if (isInBlocklet && id.endsWith('/vite/dist/client/client.mjs')) {
         const pureVersion = semver.major(version);
         let replacedCode = code;
@@ -27,29 +28,35 @@ export default function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        // 根据页面的协议自动判断端口
-        replacedCode = replacedCode.replace(
-          /__HMR_PORT__/g,
-          'location.port || (location.protocol === "https:" ? 443 : 80);',
-        );
+        replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
 
-        // 在页面加载时,触发一次 upgrade
-        replacedCode = replacedCode.replace(
-          'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
-          'async function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {\nawait waitForSuccessfulPing(protocol, hostAndPath);\n',
-        );
-        replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
-        replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
+        if (process.env.VITE_HMR_MODE === 'middleware') {
+          // 根据页面的协议自动判断端口
+          replacedCode = replacedCode.replace(
+            /__HMR_PORT__/g,
+            'location.port || (location.protocol === "https:" ? 443 : 80);',
+          );
 
-        if ([4, 5].includes(pureVersion)) {
-          // 改变刷新页面的判断
+          // 在页面加载时,触发一次 upgrade
           replacedCode = replacedCode.replace(
-            'const ping =',
-            "const ping = async () => {\ntry {\nawait fetch(`${pingHostProtocol}://${hostAndPath}`, {\nmode: 'no-cors',\nheaders: {\nAccept: 'text/x-vite-ping'\n}\n}).then(res => {\nif ([404, 502].includes(res.status)) {\nthrow new Error('waiting for server to restart...');\n}\n});\nreturn true;\n} catch {}\nreturn false;\n}\nconst pingBak =",
+            'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
+            'async function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {\nawait waitForSuccessfulPing(protocol, hostAndPath);\n',
           );
+          replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
+          replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
+
+          if ([4, 5].includes(pureVersion)) {
+            // 改变刷新页面的判断
+            replacedCode = replacedCode.replace(
+              'const ping =',
+              "const ping = async () => {\ntry {\nawait fetch(`${pingHostProtocol}://${hostAndPath}`, {\nmode: 'no-cors',\nheaders: {\nAccept: 'text/x-vite-ping'\n}\n}).then(res => {\nif ([404, 502].includes(res.status)) {\nthrow new Error('waiting for server to restart...');\n}\n});\nreturn true;\n} catch {}\nreturn false;\n}\nconst pingBak =",
+            );
+          }
         }
+
         return replacedCode;
       }
+      return code;
     },
   };
 }

package/libs/utils.js

@@ -13,6 +13,6 @@ export function toBlockletDid(name) {
   return fromPublicKey(pk, { role: types.RoleType.ROLE_ANY });
 }
 
-const isInBlocklet = !!process.env.BLOCKLET_PORT;
-
-export { isInBlocklet };
+export const isInBlocklet = !!process.env.BLOCKLET_PORT;
+export const blockletPort = process.env.BLOCKLET_PORT;
+export const blockletPrefix = process.env.BLOCKLET_DEV_MOUNT_POINT || '/';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "",
   "main": "index.js",
   "files": [