vite-plugin-blocklet 0.8.4 → 0.8.6

package/dist/index.cjs

@@ -34,11 +34,11 @@ const blockletPrefix = process.env.BLOCKLET_DEV_MOUNT_POINT || '/';
  *
  * @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.
+ * @param {'middleware'|'client'|'server'} options.hmrMode - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 function createHmrPlugin(options = {}) {
-  const { version = vite.version } = options;
+  const { version = vite.version, hmrMode = process.env.VITE_HMR_MODE || 'client' } = options || {};
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
@@ -55,9 +55,11 @@ function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        if (['client', 'middleware'].includes(hmrMode)) {
+          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        }
 
-        if (process.env.VITE_HMR_MODE === 'middleware') {
+        if (hmrMode === 'middleware') {
           // 根据页面的协议自动判断端口
           replacedCode = replacedCode.replace(
             /__HMR_PORT__/g,
@@ -456,9 +458,12 @@ const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NO
  * @param {Object} [options={}] - The options object.
  * @param {string} [options.host='127.0.0.1'] - The host for the server.
  * @param {string} [options.protocol='ws'] - The protocol for the server.
- * @param {number} [options.port] - The port for the server.
+ * @param {number} [options.port] - The port for the ws server.
+ * @param {number} [options.clientPort] - The clientPort for the ws server.
  * @param {string} [options.configFile=''] - The path to the config file.
  * @param {string} [options.appType='spa'] - The type of the application.
+ * @param {import('node:http').Server} [options.server] - The http server instance
+ * @param {object} [options.importMetaHot] - vite import.meta.hot
  * @return {Promise<Object>} A promise that resolves to the Vite server object.
  */
 async function setupClient(app, options = {}) {
@@ -468,30 +473,61 @@ async function setupClient(app, options = {}) {
         config: 'c',
       },
     });
-    const { port: inputPort, configFile = '', appType = 'spa' } = options;
+    const { host, protocol = 'ws', 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);
+    const clientPort = options?.clientPort || port;
+    const enableWsMiddleware = !host;
+    if (enableWsMiddleware) {
+      process.env.VITE_HMR_MODE = 'middleware';
+      // 创建 hmr proxy
+      const wsProxy = httpProxyMiddleware.createProxyMiddleware({
+        target: `ws://127.0.0.1:${port}`,
+        ws: true,
+      });
+      app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
+    } else {
+      process.env.VITE_HMR_MODE = 'server';
+    }
 
     // 以中间件模式创建 Vite 服务器
     const vite$1 = await vite.createServer({
       configFile: params.config || configFile || undefined,
       server: {
         middlewareMode: true,
-        hmr: {
-          port,
-          path: '/__vite_hmr__',
-        },
+        hmr: enableWsMiddleware
+          ? {
+              port,
+              path: '/__vite_hmr__',
+            }
+          : {
+              host,
+              port,
+              clientPort,
+              protocol,
+            },
       },
       appType,
     });
     // 将 vite 的 connect 实例作中间件使用
     app.use(vite$1.middlewares);
+    // 用于 vite-node 进行服务重载时，先关闭原有服务的端口监听
+    if (options?.server && options?.importMetaHot && options.importMetaHot?.on && options.importMetaHot?.dispose) {
+      async function killServer() {
+        await options.server.close((err) => {
+          console.log('vite-plugin-blocklet: Server closed succeed');
+          console.error('vite-plugin-blocklet: Failed to close server', err);
+        });
+      }
+      options.importMetaHot.on('vite:beforeFullReload', async () => {
+        console.log('vite-plugin-blocklet: Full reload');
+        await killServer();
+      });
+
+      options.importMetaHot.dispose(async () => {
+        console.log('vite-plugin-blocklet: Dispose');
+        await killServer();
+      });
+    }
     return vite$1;
   }
 }

package/libs/client.js

@@ -15,9 +15,12 @@ const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NO
  * @param {Object} [options={}] - The options object.
  * @param {string} [options.host='127.0.0.1'] - The host for the server.
  * @param {string} [options.protocol='ws'] - The protocol for the server.
- * @param {number} [options.port] - The port for the server.
+ * @param {number} [options.port] - The port for the ws server.
+ * @param {number} [options.clientPort] - The clientPort for the ws server.
  * @param {string} [options.configFile=''] - The path to the config file.
  * @param {string} [options.appType='spa'] - The type of the application.
+ * @param {import('node:http').Server} [options.server] - The http server instance
+ * @param {object} [options.importMetaHot] - vite import.meta.hot
  * @return {Promise<Object>} A promise that resolves to the Vite server object.
  */
 export default async function setupClient(app, options = {}) {
@@ -27,30 +30,61 @@ export default async function setupClient(app, options = {}) {
         config: 'c',
       },
     });
-    const { port: inputPort, configFile = '', appType = 'spa' } = options;
+    const { host, protocol = 'ws', 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);
+    const clientPort = options?.clientPort || port;
+    const enableWsMiddleware = !host;
+    if (enableWsMiddleware) {
+      process.env.VITE_HMR_MODE = 'middleware';
+      // 创建 hmr proxy
+      const wsProxy = createProxyMiddleware({
+        target: `ws://127.0.0.1:${port}`,
+        ws: true,
+      });
+      app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
+    } else {
+      process.env.VITE_HMR_MODE = 'server';
+    }
 
     // 以中间件模式创建 Vite 服务器
     const vite = await createServer({
       configFile: params.config || configFile || undefined,
       server: {
         middlewareMode: true,
-        hmr: {
-          port,
-          path: '/__vite_hmr__',
-        },
+        hmr: enableWsMiddleware
+          ? {
+              port,
+              path: '/__vite_hmr__',
+            }
+          : {
+              host,
+              port,
+              clientPort,
+              protocol,
+            },
       },
       appType,
     });
     // 将 vite 的 connect 实例作中间件使用
     app.use(vite.middlewares);
+    // 用于 vite-node 进行服务重载时，先关闭原有服务的端口监听
+    if (options?.server && options?.importMetaHot && options.importMetaHot?.on && options.importMetaHot?.dispose) {
+      async function killServer() {
+        await options.server.close((err) => {
+          console.log('vite-plugin-blocklet: Server closed succeed');
+          console.error('vite-plugin-blocklet: Failed to close server', err);
+        });
+      }
+      options.importMetaHot.on('vite:beforeFullReload', async () => {
+        console.log('vite-plugin-blocklet: Full reload');
+        await killServer();
+      });
+
+      options.importMetaHot.dispose(async () => {
+        console.log('vite-plugin-blocklet: Dispose');
+        await killServer();
+      });
+    }
     return vite;
   }
 }

package/libs/hmr.js

@@ -7,11 +7,11 @@ import { blockletPrefix, isInBlocklet } from './utils.js';
  *
  * @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.
+ * @param {'middleware'|'client'|'server'} options.hmrMode - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 export default function createHmrPlugin(options = {}) {
-  const { version = viteVersion } = options;
+  const { version = viteVersion, hmrMode = process.env.VITE_HMR_MODE || 'client' } = options || {};
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
@@ -28,9 +28,11 @@ export default function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        if (['client', 'middleware'].includes(hmrMode)) {
+          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        }
 
-        if (process.env.VITE_HMR_MODE === 'middleware') {
+        if (hmrMode === 'middleware') {
           // 根据页面的协议自动判断端口
           replacedCode = replacedCode.replace(
             /__HMR_PORT__/g,

package/package.json

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