vite-plugin-blocklet 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -12,8 +12,9 @@ var YAML = require('yaml');
 var isMobile = require('ismobilejs');
 var getPort = require('get-port');
 var mri = require('mri');
-var dotenv = require('dotenv');
+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;
@@ -51,7 +55,36 @@ function createHmrPlugin(options = {}) {
           );
           return replacedCode;
         }
+
+        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(
+            '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;
     },
   };
 }
@@ -62,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();
         });
@@ -74,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,
           };
@@ -381,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';
 
@@ -403,43 +470,24 @@ async function setupClient(app, options = {}) {
         config: 'c',
       },
     });
-    const { host = '127.0.0.1', protocol = 'ws', port: inputPort, configFile = '', appType = 'spa' } = options;
-    let skipWritePort = true;
-    let envAppendContent = '';
-    let envObject = '';
-    const envFilePath = path.join(process.cwd(), '.env.development.local');
-    let port;
-
-    if (!fs.existsSync(envFilePath)) {
-      skipWritePort = false;
-      port = await getPort({ port: inputPort });
-      envAppendContent = `BLOCKLET_VITE_PORT=${port}`;
-    } else {
-      port = await getPort({ port: inputPort });
-      const envContent = await fs.promises.readFile(envFilePath, 'utf-8');
-      envObject = dotenv.parse(envContent);
-
-      if (!envObject.BLOCKLET_VITE_PORT) {
-        skipWritePort = false;
-        envAppendContent = `${envContent}\nBLOCKLET_VITE_PORT=${port}`;
-      } else {
-        port = process.env.BLOCKLET_VITE_PORT;
-      }
-    }
-    if (!skipWritePort && envAppendContent) {
-      // TODO @zhanghan 常见的 env file 处理暂不支持保留 comment，所以不能通过解析后的对象来写入文件
-      // @see https://github.com/bevry/envfile/pull/213
-      await fs.promises.writeFile(envFilePath, envAppendContent);
-    }
+    const { port: inputPort, configFile = '', appType = 'spa' } = options;
+    const port = await getPort({ port: inputPort });
+    // 创建 hmr proxy
+    const wsProxy = httpProxyMiddleware.createProxyMiddleware({
+      target: `ws://127.0.0.1:${port}`,
+      ws: true,
+    });
+    process.env.VITE_HMR_MODE = 'middleware';
+    app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
+
     // 以中间件模式创建 Vite 服务器
     const vite$1 = await vite.createServer({
       configFile: params.config || configFile || undefined,
       server: {
         middlewareMode: true,
         hmr: {
-          host,
           port,
-          protocol,
+          path: '/__vite_hmr__',
         },
       },
       appType,
@@ -460,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']
  */
 
 /**
@@ -484,6 +534,7 @@ function createBlockletPlugin(options = {}) {
     disableHmr = false,
     disableLoading = false,
     disableDebug = false,
+    nodePolyfillsOptions,
     ...restOptions
   } = options;
 
@@ -500,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));
@@ -518,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,9 +1,9 @@
-import fs from 'node:fs';
 import path from 'node:path';
 import getPort from 'get-port';
 import { createServer } from 'vite';
 import mri from 'mri';
-import dotenv from 'dotenv';
+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';
@@ -27,43 +27,24 @@ export default async function setupClient(app, options = {}) {
         config: 'c',
       },
     });
-    const { host = '127.0.0.1', protocol = 'ws', port: inputPort, configFile = '', appType = 'spa' } = options;
-    let skipWritePort = true;
-    let envAppendContent = '';
-    let envObject = '';
-    const envFilePath = path.join(process.cwd(), '.env.development.local');
-    let port;
-
-    if (!fs.existsSync(envFilePath)) {
-      skipWritePort = false;
-      port = await getPort({ port: inputPort });
-      envAppendContent = `BLOCKLET_VITE_PORT=${port}`;
-    } else {
-      port = await getPort({ port: inputPort });
-      const envContent = await fs.promises.readFile(envFilePath, 'utf-8');
-      envObject = dotenv.parse(envContent);
+    const { port: inputPort, configFile = '', appType = 'spa' } = options;
+    const port = await getPort({ port: inputPort });
+    // 创建 hmr proxy
+    const wsProxy = createProxyMiddleware({
+      target: `ws://127.0.0.1:${port}`,
+      ws: true,
+    });
+    process.env.VITE_HMR_MODE = 'middleware';
+    app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
 
-      if (!envObject.BLOCKLET_VITE_PORT) {
-        skipWritePort = false;
-        envAppendContent = `${envContent}\nBLOCKLET_VITE_PORT=${port}`;
-      } else {
-        port = process.env.BLOCKLET_VITE_PORT;
-      }
-    }
-    if (!skipWritePort && envAppendContent) {
-      // TODO @zhanghan 常见的 env file 处理暂不支持保留 comment，所以不能通过解析后的对象来写入文件
-      // @see https://github.com/bevry/envfile/pull/213
-      await fs.promises.writeFile(envFilePath, envAppendContent);
-    }
     // 以中间件模式创建 Vite 服务器
     const vite = await createServer({
       configFile: params.config || configFile || undefined,
       server: {
         middlewareMode: true,
         hmr: {
-          host,
           port,
-          protocol,
+          path: '/__vite_hmr__',
         },
       },
       appType,

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;
@@ -26,7 +27,36 @@ export default function createHmrPlugin(options = {}) {
           );
           return replacedCode;
         }
+
+        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(
+            '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.1",
+  "version": "0.8.3",
   "description": "",
   "main": "index.js",
   "files": [
@@ -27,11 +27,11 @@
     "rollup": "^4.18.0"
   },
   "dependencies": {
-    "@arcblock/did": "^1.18.124",
-    "@ocap/mcrypto": "^1.18.124",
-    "@ocap/util": "^1.18.124",
-    "dotenv": "^16.4.5",
+    "@arcblock/did": "^1.18.126",
+    "@ocap/mcrypto": "^1.18.126",
+    "@ocap/util": "^1.18.126",
     "get-port": "^5.1.1",
+    "http-proxy-middleware": "^3.0.0",
     "ismobilejs": "^1.1.1",
     "mri": "^1.2.0",
     "semver": "^7.6.2",