vite-plugin-blocklet 0.8.5 → 0.8.7

package/dist/index.cjs

@@ -34,7 +34,7 @@ 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'|'server'} options.hmrMode - The version of the vite version.
+ * @param {'middleware'|'client'|'server'|'wsUpgrade'} [options.hmrMode = 'client'] - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 function createHmrPlugin(options = {}) {
@@ -55,17 +55,21 @@ function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        if (['client', 'middleware'].includes(hmrMode)) {
+        // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
+        if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
           replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
         }
 
-        if (hmrMode === 'middleware') {
+        // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持
+        if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
           // 根据页面的协议自动判断端口
           replacedCode = replacedCode.replace(
             /__HMR_PORT__/g,
             'location.port || (location.protocol === "https:" ? 443 : 80);',
           );
-
+        }
+        // 当 ws 是以中间件的形式挂载到服务端代码时，需要手动在页面触发一次 upgrade 事件
+        if (hmrMode === 'middleware') {
           // 在页面加载时,触发一次 upgrade
           replacedCode = replacedCode.replace(
             'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
@@ -73,7 +77,9 @@ function createHmrPlugin(options = {}) {
           );
           replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
           replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
-
+        }
+        // 当 ws 是通过服务端的 proxy 来实现时，需要更改页面自动刷新的判断逻辑
+        if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
           if ([4, 5].includes(pureVersion)) {
             // 改变刷新页面的判断
             replacedCode = replacedCode.replace(
@@ -462,6 +468,8 @@ const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NO
  * @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 = {}) {
@@ -476,13 +484,27 @@ async function setupClient(app, options = {}) {
     const clientPort = options?.clientPort || port;
     const enableWsMiddleware = !host;
     if (enableWsMiddleware) {
-      process.env.VITE_HMR_MODE = 'middleware';
       // 创建 hmr proxy
+      const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
       const wsProxy = httpProxyMiddleware.createProxyMiddleware({
         target: `ws://127.0.0.1:${port}`,
         ws: true,
       });
-      app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
+      try {
+        if (options?.server) {
+          options.server.on('upgrade', (req, socket, head) => {
+            if ((req.originalUrl || req.url).includes(hmrWsPath)) {
+              wsProxy.upgrade(req, socket, head);
+            }
+          });
+          process.env.VITE_HMR_MODE = 'wsUpgrade';
+        } else {
+          throw new Error('Missing options.server, fallback to use middleware mode.');
+        }
+      } catch {
+        process.env.VITE_HMR_MODE = 'middleware';
+        app.use(hmrWsPath, wsProxy);
+      }
     } else {
       process.env.VITE_HMR_MODE = 'server';
     }
@@ -508,6 +530,24 @@ async function setupClient(app, options = {}) {
     });
     // 将 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;
   }
 }
@@ -529,7 +569,7 @@ async function setupClient(app, options = {}) {
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
- * @property {'middleware'|'client'} [hmrMode='middleware']
+ * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
  */
 
 /**

package/index.js

@@ -24,7 +24,7 @@ import setupClient from './libs/client.js';
  * @property {string} [loadingImage]
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
  * @property {string} [debugScript]
- * @property {'middleware'|'client'} [hmrMode='middleware']
+ * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
  */
 
 /**

package/libs/client.js

@@ -19,6 +19,8 @@ const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NO
  * @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 = {}) {
@@ -33,13 +35,27 @@ export default async function setupClient(app, options = {}) {
     const clientPort = options?.clientPort || port;
     const enableWsMiddleware = !host;
     if (enableWsMiddleware) {
-      process.env.VITE_HMR_MODE = 'middleware';
       // 创建 hmr proxy
+      const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
       const wsProxy = createProxyMiddleware({
         target: `ws://127.0.0.1:${port}`,
         ws: true,
       });
-      app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
+      try {
+        if (options?.server) {
+          options.server.on('upgrade', (req, socket, head) => {
+            if ((req.originalUrl || req.url).includes(hmrWsPath)) {
+              wsProxy.upgrade(req, socket, head);
+            }
+          });
+          process.env.VITE_HMR_MODE = 'wsUpgrade';
+        } else {
+          throw new Error('Missing options.server, fallback to use middleware mode.');
+        }
+      } catch {
+        process.env.VITE_HMR_MODE = 'middleware';
+        app.use(hmrWsPath, wsProxy);
+      }
     } else {
       process.env.VITE_HMR_MODE = 'server';
     }
@@ -65,6 +81,24 @@ export default async function setupClient(app, options = {}) {
     });
     // 将 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,7 +7,7 @@ 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'|'server'} options.hmrMode - The version of the vite version.
+ * @param {'middleware'|'client'|'server'|'wsUpgrade'} [options.hmrMode = 'client'] - The version of the vite version.
  * @return {Object} The HMR plugin object.
  */
 export default function createHmrPlugin(options = {}) {
@@ -28,17 +28,21 @@ export default function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        if (['client', 'middleware'].includes(hmrMode)) {
+        // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
+        if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
           replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
         }
 
-        if (hmrMode === 'middleware') {
+        // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持
+        if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
           // 根据页面的协议自动判断端口
           replacedCode = replacedCode.replace(
             /__HMR_PORT__/g,
             'location.port || (location.protocol === "https:" ? 443 : 80);',
           );
-
+        }
+        // 当 ws 是以中间件的形式挂载到服务端代码时，需要手动在页面触发一次 upgrade 事件
+        if (hmrMode === 'middleware') {
           // 在页面加载时,触发一次 upgrade
           replacedCode = replacedCode.replace(
             'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
@@ -46,7 +50,9 @@ export default function createHmrPlugin(options = {}) {
           );
           replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
           replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
-
+        }
+        // 当 ws 是通过服务端的 proxy 来实现时，需要更改页面自动刷新的判断逻辑
+        if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
           if ([4, 5].includes(pureVersion)) {
             // 改变刷新页面的判断
             replacedCode = replacedCode.replace(

package/package.json

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