vite-plugin-blocklet 0.8.6 → 0.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +28 -8
  2. package/index.js +1 -1
  3. package/libs/client.js +16 -2
  4. package/libs/hmr.js +11 -5
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -34,7 +34,7 @@ const blockletPrefix = process.env.BLOCKLET_DEV_MOUNT_POINT || '/';
34
34
  *
35
35
  * @param {Object} options - The options for the HMR plugin.
36
36
  * @param {string} options.version - The version of the vite version.
37
- * @param {'middleware'|'client'|'server'} options.hmrMode - The version of the vite version.
37
+ * @param {'middleware'|'client'|'server'|'wsUpgrade'} [options.hmrMode = 'client'] - The version of the vite version.
38
38
  * @return {Object} The HMR plugin object.
39
39
  */
40
40
  function createHmrPlugin(options = {}) {
@@ -55,17 +55,21 @@ function createHmrPlugin(options = {}) {
55
55
  return replacedCode;
56
56
  }
57
57
 
58
- if (['client', 'middleware'].includes(hmrMode)) {
58
+ // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
59
+ if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
59
60
  replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
60
61
  }
61
62
 
62
- if (hmrMode === 'middleware') {
63
+ // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持
64
+ if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
63
65
  // 根据页面的协议自动判断端口
64
66
  replacedCode = replacedCode.replace(
65
67
  /__HMR_PORT__/g,
66
68
  'location.port || (location.protocol === "https:" ? 443 : 80);',
67
69
  );
68
-
70
+ }
71
+ // 当 ws 是以中间件的形式挂载到服务端代码时，需要手动在页面触发一次 upgrade 事件
72
+ if (hmrMode === 'middleware') {
69
73
  // 在页面加载时,触发一次 upgrade
70
74
  replacedCode = replacedCode.replace(
71
75
  'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
@@ -73,7 +77,9 @@ function createHmrPlugin(options = {}) {
73
77
  );
74
78
  replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
75
79
  replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
76
-
80
+ }
81
+ // 当 ws 是通过服务端的 proxy 来实现时，需要更改页面自动刷新的判断逻辑
82
+ if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
77
83
  if ([4, 5].includes(pureVersion)) {
78
84
  // 改变刷新页面的判断
79
85
  replacedCode = replacedCode.replace(
@@ -478,13 +484,27 @@ async function setupClient(app, options = {}) {
478
484
  const clientPort = options?.clientPort || port;
479
485
  const enableWsMiddleware = !host;
480
486
  if (enableWsMiddleware) {
481
- process.env.VITE_HMR_MODE = 'middleware';
482
487
  // 创建 hmr proxy
488
+ const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
483
489
  const wsProxy = httpProxyMiddleware.createProxyMiddleware({
484
490
  target: `ws://127.0.0.1:${port}`,
485
491
  ws: true,
486
492
  });
487
- app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
493
+ try {
494
+ if (options?.server) {
495
+ options.server.on('upgrade', (req, socket, head) => {
496
+ if ((req.originalUrl || req.url).includes(hmrWsPath)) {
497
+ wsProxy.upgrade(req, socket, head);
498
+ }
499
+ });
500
+ process.env.VITE_HMR_MODE = 'wsUpgrade';
501
+ } else {
502
+ throw new Error('Missing options.server, fallback to use middleware mode.');
503
+ }
504
+ } catch {
505
+ process.env.VITE_HMR_MODE = 'middleware';
506
+ app.use(hmrWsPath, wsProxy);
507
+ }
488
508
  } else {
489
509
  process.env.VITE_HMR_MODE = 'server';
490
510
  }
@@ -549,7 +569,7 @@ async function setupClient(app, options = {}) {
549
569
  * @property {string} [loadingImage]
550
570
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
551
571
  * @property {string} [debugScript]
552
- * @property {'middleware'|'client'} [hmrMode='middleware']
572
+ * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
553
573
  */
554
574
 
555
575
  /**
package/index.js CHANGED
@@ -24,7 +24,7 @@ import setupClient from './libs/client.js';
24
24
  * @property {string} [loadingImage]
25
25
  * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
26
26
  * @property {string} [debugScript]
27
- * @property {'middleware'|'client'} [hmrMode='middleware']
27
+ * @property {'middleware'|'client'|'server'|'wsUpgrade'} [hmrMode='middleware'] - 当未传入任何 option 参数时，会自动变为 middleware 模式
28
28
  */
29
29
 
30
30
  /**
package/libs/client.js CHANGED
@@ -35,13 +35,27 @@ export default async function setupClient(app, options = {}) {
35
35
  const clientPort = options?.clientPort || port;
36
36
  const enableWsMiddleware = !host;
37
37
  if (enableWsMiddleware) {
38
- process.env.VITE_HMR_MODE = 'middleware';
39
38
  // 创建 hmr proxy
39
+ const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
40
40
  const wsProxy = createProxyMiddleware({
41
41
  target: `ws://127.0.0.1:${port}`,
42
42
  ws: true,
43
43
  });
44
- app.use(path.join(blockletPrefix, '/__vite_hmr__'), wsProxy);
44
+ try {
45
+ if (options?.server) {
46
+ options.server.on('upgrade', (req, socket, head) => {
47
+ if ((req.originalUrl || req.url).includes(hmrWsPath)) {
48
+ wsProxy.upgrade(req, socket, head);
49
+ }
50
+ });
51
+ process.env.VITE_HMR_MODE = 'wsUpgrade';
52
+ } else {
53
+ throw new Error('Missing options.server, fallback to use middleware mode.');
54
+ }
55
+ } catch {
56
+ process.env.VITE_HMR_MODE = 'middleware';
57
+ app.use(hmrWsPath, wsProxy);
58
+ }
45
59
  } else {
46
60
  process.env.VITE_HMR_MODE = 'server';
47
61
  }
package/libs/hmr.js CHANGED
@@ -7,7 +7,7 @@ import { blockletPrefix, isInBlocklet } from './utils.js';
7
7
  *
8
8
  * @param {Object} options - The options for the HMR plugin.
9
9
  * @param {string} options.version - The version of the vite version.
10
- * @param {'middleware'|'client'|'server'} options.hmrMode - The version of the vite version.
10
+ * @param {'middleware'|'client'|'server'|'wsUpgrade'} [options.hmrMode = 'client'] - The version of the vite version.
11
11
  * @return {Object} The HMR plugin object.
12
12
  */
13
13
  export default function createHmrPlugin(options = {}) {
@@ -28,17 +28,21 @@ export default function createHmrPlugin(options = {}) {
28
28
  return replacedCode;
29
29
  }
30
30
 
31
- if (['client', 'middleware'].includes(hmrMode)) {
31
+ // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
32
+ if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
32
33
  replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
33
34
  }
34
35
 
35
- if (hmrMode === 'middleware') {
36
+ // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持
37
+ if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
36
38
  // 根据页面的协议自动判断端口
37
39
  replacedCode = replacedCode.replace(
38
40
  /__HMR_PORT__/g,
39
41
  'location.port || (location.protocol === "https:" ? 443 : 80);',
40
42
  );
41
-
43
+ }
44
+ // 当 ws 是以中间件的形式挂载到服务端代码时，需要手动在页面触发一次 upgrade 事件
45
+ if (hmrMode === 'middleware') {
42
46
  // 在页面加载时,触发一次 upgrade
43
47
  replacedCode = replacedCode.replace(
44
48
  'function setupWebSocket(protocol, hostAndPath, onCloseWithoutOpen) {',
@@ -46,7 +50,9 @@ export default function createHmrPlugin(options = {}) {
46
50
  );
47
51
  replacedCode = replacedCode.replace('fallback = () => {', 'fallback = async () => {');
48
52
  replacedCode = replacedCode.replace(/socket = setupWebSocket\(/g, 'socket = await setupWebSocket(');
49
-
53
+ }
54
+ // 当 ws 是通过服务端的 proxy 来实现时，需要更改页面自动刷新的判断逻辑
55
+ if (['middleware', 'wsUpgrade'].includes(hmrMode)) {
50
56
  if ([4, 5].includes(pureVersion)) {
51
57
  // 改变刷新页面的判断
52
58
  replacedCode = replacedCode.replace(
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vite-plugin-blocklet",
3
3
  "type": "module",
4
- "version": "0.8.6",
4
+ "version": "0.8.7",
5
5
  "description": "",
6
6
  "main": "index.js",
7
7
  "files": [