vite-plugin-blocklet 0.8.7 → 0.8.9

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 || '/';
@@ -57,7 +64,10 @@ function createHmrPlugin(options = {}) {
 
         // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
         if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
-          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+          replacedCode = replacedCode.replace(
+            /__HMR_BASE__/g,
+            `"${blockletPrefix === '/' ? '' : blockletPrefix}"+__HMR_BASE__`,
+          );
         }
 
         // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持
@@ -104,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 = {
@@ -126,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);
             }
@@ -153,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;
@@ -166,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,
@@ -257,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; }
@@ -292,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>`;
 }
 
 /**
@@ -310,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,
@@ -485,7 +508,7 @@ async function setupClient(app, options = {}) {
     const enableWsMiddleware = !host;
     if (enableWsMiddleware) {
       // 创建 hmr proxy
-      const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
+      const hmrWsPath = ufo.joinURL(blockletPrefix, '/__vite_hmr__');
       const wsProxy = httpProxyMiddleware.createProxyMiddleware({
         target: `ws://127.0.0.1:${port}`,
         ws: true,

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';
@@ -36,7 +36,7 @@ export default async function setupClient(app, options = {}) {
     const enableWsMiddleware = !host;
     if (enableWsMiddleware) {
       // 创建 hmr proxy
-      const hmrWsPath = path.join(blockletPrefix, '/__vite_hmr__');
+      const hmrWsPath = joinURL(blockletPrefix, '/__vite_hmr__');
       const wsProxy = createProxyMiddleware({
         target: `ws://127.0.0.1:${port}`,
         ws: true,

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

@@ -30,7 +30,10 @@ export default function createHmrPlugin(options = {}) {
 
         // 兼容不带服务端的情况、vite 以中间件形式挂载到服务端代码的情况
         if (['client', 'middleware', 'wsUpgrade'].includes(hmrMode)) {
-          replacedCode = replacedCode.replace(/__HMR_BASE__/g, `"${blockletPrefix}"+__HMR_BASE__`);
+          replacedCode = replacedCode.replace(
+            /__HMR_BASE__/g,
+            `"${blockletPrefix === '/' ? '' : blockletPrefix}"+__HMR_BASE__`,
+          );
         }
 
         // 兼容 vite 以中间件形式挂载到服务端代码的情况，无论 ws 是中间件挂载还是 ws 直接监听 upgrade 事件都支持

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.7",
+  "version": "0.8.9",
   "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"
   },