fix(vite-plugin-blocklet): polish vite hmr ws proxy (#336)

blocklet · Jul 10, 2024 · 8c0c028 · 8c0c028
1 parent a597f92
commit 8c0c028
Show file tree

Hide file tree

Showing 24 changed files with 52 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.8.7 (2024-7-10)
+
+- fix(vite-plugin-blocklet): polish vite hmr ws proxy
+
 ## 0.8.6 (2024-7-10)
 
 - chore(deps): update deps

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-blocklet",
   "private": true,
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "",
   "keywords": [],
   "author": "",

diff --git a/packages/create-app/package.json b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",

diff --git a/packages/create-app/templates/react-dapp-ts/package.json b/packages/create-app/templates/react-dapp-ts/package.json
@@ -79,7 +79,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.2",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/react-dapp/package.json b/packages/create-app/templates/react-dapp/package.json
@@ -69,7 +69,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/react-gun-dapp/package.json b/packages/create-app/templates/react-gun-dapp/package.json
@@ -69,7 +69,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/react-static/package.json b/packages/create-app/templates/react-static/package.json
@@ -51,7 +51,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/solidjs-dapp/package.json b/packages/create-app/templates/solidjs-dapp/package.json
@@ -34,7 +34,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-solid": "^2.10.2",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/solidjs-static/package.json b/packages/create-app/templates/solidjs-static/package.json
@@ -30,7 +30,7 @@
     "simple-git-hooks": "^2.11.1",
     "solid-js": "^1.8.18",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-solid": "^2.10.2",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/svelte-dapp/package.json b/packages/create-app/templates/svelte-dapp/package.json
@@ -43,7 +43,7 @@
     "simple-git-hooks": "^2.11.1",
     "svelte": "^4.2.18",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "zx": "^8.1.4"
   },
   "lint-staged": {

diff --git a/packages/create-app/templates/svelte-static/package.json b/packages/create-app/templates/svelte-static/package.json
@@ -24,7 +24,7 @@
     "simple-git-hooks": "^2.11.1",
     "svelte": "^4.2.18",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "zx": "^8.1.4"
   },
   "lint-staged": {

diff --git a/packages/create-app/templates/todo-list-example/package.json b/packages/create-app/templates/todo-list-example/package.json
@@ -91,7 +91,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.2",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vite-plugin-svgr": "^4.2.0",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/vue-dapp/package.json b/packages/create-app/templates/vue-dapp/package.json
@@ -47,7 +47,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vue": "^3.4.31",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/vue-static/package.json b/packages/create-app/templates/vue-static/package.json
@@ -28,7 +28,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vue": "^3.4.31",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/vue2-dapp/package.json b/packages/create-app/templates/vue2-dapp/package.json
@@ -46,7 +46,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vue": "^2.7.16",
     "zx": "^8.1.4"
   },

diff --git a/packages/create-app/templates/vue2-static/package.json b/packages/create-app/templates/vue2-static/package.json
@@ -28,7 +28,7 @@
     "rimraf": "^5.0.7",
     "simple-git-hooks": "^2.11.1",
     "vite": "^5.3.3",
-    "vite-plugin-blocklet": "^0.8.6",
+    "vite-plugin-blocklet": "^0.8.7",
     "vue": "^2.7.16",
     "zx": "^8.1.4"
   },

diff --git a/plugins/vite-plugin-blocklet/index.js b/plugins/vite-plugin-blocklet/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 模式
  */
 
 /**

diff --git a/plugins/vite-plugin-blocklet/libs/client.js b/plugins/vite-plugin-blocklet/libs/client.js
@@ -35,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';
     }

diff --git a/plugins/vite-plugin-blocklet/libs/hmr.js b/plugins/vite-plugin-blocklet/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,25 +28,31 @@ 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) {',
             '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(');
-
+        }
+        // 当 ws 是通过服务端的 proxy 来实现时，需要更改页面自动刷新的判断逻辑
+        if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
           if ([4, 5].includes(pureVersion)) {
             // 改变刷新页面的判断
             replacedCode = replacedCode.replace(

diff --git a/plugins/vite-plugin-blocklet/package.json b/plugins/vite-plugin-blocklet/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "",
   "main": "index.js",
   "files": [

diff --git a/plugins/vite-plugin-wss-hmr/package.json b/plugins/vite-plugin-wss-hmr/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-wss-hmr",
   "type": "module",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "",
   "main": "index.js",
   "exports": {

diff --git a/version b/version
@@ -1 +1 @@
-0.8.6
+0.8.7
diff --git a/website/docs/blocklet.yml b/website/docs/blocklet.yml
@@ -13,7 +13,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/create-blocklet.git
 specVersion: 1.2.8
-version: 0.8.6
+version: 0.8.7
 logo: logo.png
 files:
   - logo.png

diff --git a/website/pages/blocklet.yml b/website/pages/blocklet.yml
@@ -13,7 +13,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/create-blocklet.git
 specVersion: 1.2.8
-version: 0.8.6
+version: 0.8.7
 logo: logo.png
 files:
   - logo.png