vite-plugin-blocklet 0.8.6 → 0.8.8

package/dist/index.cjs

@@ -3,12 +3,12 @@
 var vitePluginNodePolyfills = require('vite-plugin-node-polyfills');
 var vite = require('vite');
 var semver = require('semver');
+var node_fs = require('node:fs');
+var YAML = require('yaml');
 var Mcrypto = require('@ocap/mcrypto');
 var util = require('@ocap/util');
 var did = require('@arcblock/did');
-var fs = require('node:fs');
-var path = require('node:path');
-var YAML = require('yaml');
+var ufo = require('ufo');
 var isMobile = require('ismobilejs');
 var getPort = require('get-port');
 var mri = require('mri');
@@ -25,6 +25,13 @@ function toBlockletDid(name) {
   return did.fromPublicKey(pk, { role: types.RoleType.ROLE_ANY });
 }
 
+async function getBlockletYAML() {
+  const blockletYamlPath = './blocklet.yml';
+  const content = await node_fs.promises.readFile(blockletYamlPath, 'utf8');
+  const blockletYaml = YAML.parse(content);
+  return blockletYaml || {};
+}
+
 const isInBlocklet = !!process.env.BLOCKLET_PORT;
 const blockletPort = process.env.BLOCKLET_PORT;
 const blockletPrefix = process.env.BLOCKLET_DEV_MOUNT_POINT || '/';
@@ -34,7 +41,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 +62,24 @@ function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        if (['client', 'middleware'].includes(hmrMode)) {
-          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
+        if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
+          replacedCode = replacedCode.replace(
+            /__HMR_BASE__/g,
+            `"${blockletPrefix === '/' ? '' : 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 +87,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(
@@ -98,16 +114,16 @@ function createConfigPlugin$1() {
         server.middlewares.use((req, res, next) => {
           // blocklet server 会把设置的 base 从请求 url 中移除，所以需要再加回 base
           if (!req.url.startsWith(blockletPrefix)) {
-            req.url = path.join(blockletPrefix || '/', req.url);
+            req.url = ufo.joinURL(blockletPrefix || '/', req.url);
           }
           return next();
         });
       }
     },
-    config(config, { command }) {
+    async config(config, { command }) {
       if (command === 'serve') {
         const targetConfig = {};
-        targetConfig.base = path.join('/', config.base || blockletPrefix, '/');
+        targetConfig.base = ufo.withTrailingSlash(ufo.joinURL('/', config.base || blockletPrefix));
         if (!(config.server && config.server.port)) {
           const port = blockletPort || 3000;
           targetConfig.server = {
@@ -120,9 +136,7 @@ function createConfigPlugin$1() {
       if (command === 'build') {
         if (!config.base) {
           try {
-            const blockletYamlPath = './blocklet.yml';
-            const blockletYaml = YAML.parse(fs.readFileSync(blockletYamlPath, 'utf8'));
-            let { name, did } = blockletYaml;
+            let { name, did } = await getBlockletYAML();
             if (!did && name) {
               did = toBlockletDid(name);
             }
@@ -147,7 +161,7 @@ function createConfigPlugin$1() {
 function createMetaPlugin() {
   return {
     name: 'blocklet:meta',
-    transformIndexHtml(html, ctx) {
+    async transformIndexHtml(html, ctx) {
       const tags = [];
       if (ctx?.chunk?.isEntry) {
         let script;
@@ -160,12 +174,10 @@ function createMetaPlugin() {
           html = html.replace('</body>', `${script}</body>`);
         }
       }
-      // 如果 index.html 中没有设置 title，则自动注入 blocklet.yml 中的 title
-      if (!/<title>(.*?)<\/title>/.test(html)) {
-        const blockletYamlPath = './blocklet.yml';
-        const blockletYaml = YAML.parse(fs.readFileSync(blockletYamlPath, 'utf8'));
-        const { title } = blockletYaml;
+      const { title } = await getBlockletYAML();
 
+      // 如果 index.html 中没有设置 title，则自动注入 blocklet.yml 中的 title
+      if (title && !/<title>(.*?)<\/title>/.test(html)) {
         tags.push({
           tag: 'title',
           children: title,
@@ -251,6 +263,10 @@ function generateHtml({ color, image }) {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
+  #loadingImage {
+    margin-bottom: 16px;
+    object-fit: contain;
+  }
 
   @-webkit-keyframes fadeIn {
     0% { opacity: 0; }
@@ -286,13 +302,23 @@ function generateHtml({ color, image }) {
   }
   </style>
   <div class="spinner-wrapper">
-    <img src="${image}" width="70" height="70" style="margin-bottom: 16px" />
+    <img id="loadingImage" width="70" height="70" />
     <div class="spinner">
       <div class="bounce1"></div>
       <div class="bounce2"></div>
       <div class="bounce3"></div>
     </div>
-  </div>`;
+  </div>
+  <script>
+    (() => {
+      const loadingImage = document.getElementById('loadingImage');
+      if (window?.blocklet?.appLogo) {
+        loadingImage.src = window.blocklet.appLogo;
+      } else {
+        loadingImage.src = "${image}";
+      }
+    })();
+  </script>`;
 }
 
 /**
@@ -304,11 +330,14 @@ function generateHtml({ color, image }) {
  * @param {string} [options.loadingImage='/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80'] - The URL of the loading image.
  * @return {Object} - The Vite plugin object.
  */
-function createLoadingPlugin({
-  loadingElementId = 'app',
-  loadingColor = '#8abaf0',
-  loadingImage = '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80',
-} = {}) {
+function createLoadingPlugin({ loadingElementId = 'app', loadingColor = '#8abaf0', loadingImage } = {}) {
+  if (!loadingImage) {
+    loadingImage = ufo.withQuery('/.well-known/service/blocklet/logo', {
+      imageFilter: 'convert',
+      f: 'png',
+      w: 80,
+    });
+  }
   const injectHtml = generateHtml({
     color: loadingColor,
     image: loadingImage,
@@ -478,13 +507,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 = ufo.joinURL(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';
     }
@@ -549,7 +592,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

@@ -1,4 +1,4 @@
-import path from 'node:path';
+import { joinURL } from 'ufo';
 import getPort from 'get-port';
 import { createServer } from 'vite';
 import mri from 'mri';
@@ -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 = joinURL(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';
     }

package/libs/config.js

@@ -1,7 +1,5 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import YAML from 'yaml';
-import { toBlockletDid, isInBlocklet, blockletPort, blockletPrefix } from './utils.js';
+import { joinURL, withTrailingSlash } from 'ufo';
+import { toBlockletDid, isInBlocklet, blockletPort, blockletPrefix, getBlockletYAML } from './utils.js';
 
 export default function createConfigPlugin() {
   return {
@@ -11,16 +9,16 @@ export default function createConfigPlugin() {
         server.middlewares.use((req, res, next) => {
           // blocklet server 会把设置的 base 从请求 url 中移除，所以需要再加回 base
           if (!req.url.startsWith(blockletPrefix)) {
-            req.url = path.join(blockletPrefix || '/', req.url);
+            req.url = joinURL(blockletPrefix || '/', req.url);
           }
           return next();
         });
       }
     },
-    config(config, { command }) {
+    async config(config, { command }) {
       if (command === 'serve') {
         const targetConfig = {};
-        targetConfig.base = path.join('/', config.base || blockletPrefix, '/');
+        targetConfig.base = withTrailingSlash(joinURL('/', config.base || blockletPrefix));
         if (!(config.server && config.server.port)) {
           const port = blockletPort || 3000;
           targetConfig.server = {
@@ -33,9 +31,7 @@ export default function createConfigPlugin() {
       if (command === 'build') {
         if (!config.base) {
           try {
-            const blockletYamlPath = './blocklet.yml';
-            const blockletYaml = YAML.parse(fs.readFileSync(blockletYamlPath, 'utf8'));
-            let { name, did } = blockletYaml;
+            let { name, did } = await getBlockletYAML();
             if (!did && name) {
               did = toBlockletDid(name);
             }

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,24 @@ export default function createHmrPlugin(options = {}) {
           return replacedCode;
         }
 
-        if (['client', 'middleware'].includes(hmrMode)) {
-          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+        // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
+        if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
+          replacedCode = replacedCode.replace(
+            /__HMR_BASE__/g,
+            `"${blockletPrefix === '/' ? '' : 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 +53,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/libs/loading.js

@@ -1,3 +1,5 @@
+import { withQuery } from 'ufo';
+
 /**
  * Generates an HTML string containing a spinner with optional color and image.
  *
@@ -61,6 +63,10 @@ function generateHtml({ color, image }) {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
+  #loadingImage {
+    margin-bottom: 16px;
+    object-fit: contain;
+  }
 
   @-webkit-keyframes fadeIn {
     0% { opacity: 0; }
@@ -96,13 +102,23 @@ function generateHtml({ color, image }) {
   }
   </style>
   <div class="spinner-wrapper">
-    <img src="${image}" width="70" height="70" style="margin-bottom: 16px" />
+    <img id="loadingImage" width="70" height="70" />
     <div class="spinner">
       <div class="bounce1"></div>
       <div class="bounce2"></div>
       <div class="bounce3"></div>
     </div>
-  </div>`;
+  </div>
+  <script>
+    (() => {
+      const loadingImage = document.getElementById('loadingImage');
+      if (window?.blocklet?.appLogo) {
+        loadingImage.src = window.blocklet.appLogo;
+      } else {
+        loadingImage.src = "${image}";
+      }
+    })();
+  </script>`;
 }
 
 /**
@@ -114,11 +130,14 @@ function generateHtml({ color, image }) {
  * @param {string} [options.loadingImage='/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80'] - The URL of the loading image.
  * @return {Object} - The Vite plugin object.
  */
-export default function createLoadingPlugin({
-  loadingElementId = 'app',
-  loadingColor = '#8abaf0',
-  loadingImage = '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80',
-} = {}) {
+export default function createLoadingPlugin({ loadingElementId = 'app', loadingColor = '#8abaf0', loadingImage } = {}) {
+  if (!loadingImage) {
+    loadingImage = withQuery('/.well-known/service/blocklet/logo', {
+      imageFilter: 'convert',
+      f: 'png',
+      w: 80,
+    });
+  }
   const injectHtml = generateHtml({
     color: loadingColor,
     image: loadingImage,

package/libs/meta.js

@@ -1,10 +1,9 @@
-import fs from 'node:fs';
-import YAML from 'yaml';
+import { getBlockletYAML } from './utils.js';
 
 export default function createMetaPlugin() {
   return {
     name: 'blocklet:meta',
-    transformIndexHtml(html, ctx) {
+    async transformIndexHtml(html, ctx) {
       const tags = [];
       if (ctx?.chunk?.isEntry) {
         let script;
@@ -17,12 +16,10 @@ export default function createMetaPlugin() {
           html = html.replace('</body>', `${script}</body>`);
         }
       }
-      // 如果 index.html 中没有设置 title，则自动注入 blocklet.yml 中的 title
-      if (!/<title>(.*?)<\/title>/.test(html)) {
-        const blockletYamlPath = './blocklet.yml';
-        const blockletYaml = YAML.parse(fs.readFileSync(blockletYamlPath, 'utf8'));
-        const { title } = blockletYaml;
+      const { title } = await getBlockletYAML();
 
+      // 如果 index.html 中没有设置 title，则自动注入 blocklet.yml 中的 title
+      if (title && !/<title>(.*?)<\/title>/.test(html)) {
         tags.push({
           tag: 'title',
           children: title,

package/libs/utils.js

@@ -1,3 +1,5 @@
+import { promises as fs } from 'node:fs';
+import YAML from 'yaml';
 import Mcrypto from '@ocap/mcrypto';
 import { toHex } from '@ocap/util';
 import { fromPublicKey, isValid } from '@arcblock/did';
@@ -13,6 +15,13 @@ export function toBlockletDid(name) {
   return fromPublicKey(pk, { role: types.RoleType.ROLE_ANY });
 }
 
+export async function getBlockletYAML() {
+  const blockletYamlPath = './blocklet.yml';
+  const content = await fs.readFile(blockletYamlPath, 'utf8');
+  const blockletYaml = YAML.parse(content);
+  return blockletYaml || {};
+}
+
 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.6",
+  "version": "0.8.8",
   "description": "",
   "main": "index.js",
   "files": [
@@ -35,6 +35,7 @@
     "ismobilejs": "^1.1.1",
     "mri": "^1.2.0",
     "semver": "^7.6.2",
+    "ufo": "^1.5.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "yaml": "^2.4.5"
   },