vite-plugin-blocklet 0.7.4 → 0.7.6

package/dist/index.cjs

@@ -8,11 +8,13 @@ var semver = require('semver');
 var Mcrypto = require('@ocap/mcrypto');
 var util = require('@ocap/util');
 var did = require('@arcblock/did');
-var fs = require('fs');
-var path = require('path');
+var fs = require('node:fs');
+var path = require('node:path');
 var YAML = require('yaml');
+var isMobile = require('ismobilejs');
 var getPort = require('get-port');
 var mri = require('mri');
+var dotenv = require('dotenv');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,8 +23,10 @@ var Mcrypto__default = /*#__PURE__*/_interopDefaultLegacy(Mcrypto);
 var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 var path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 var YAML__default = /*#__PURE__*/_interopDefaultLegacy(YAML);
+var isMobile__default = /*#__PURE__*/_interopDefaultLegacy(isMobile);
 var getPort__default = /*#__PURE__*/_interopDefaultLegacy(getPort);
 var mri__default = /*#__PURE__*/_interopDefaultLegacy(mri);
+var dotenv__default = /*#__PURE__*/_interopDefaultLegacy(dotenv);
 
 const { types } = Mcrypto__default["default"];
 
@@ -37,6 +41,13 @@ function toBlockletDid(name) {
 
 const isInBlocklet = !!process.env.BLOCKLET_PORT;
 
+/**
+ * Creates a HMR plugin with the given options.
+ *
+ * @param {Object} options - The options for the HMR plugin.
+ * @param {string} options.version - The version of the vite version.
+ * @return {Object} The HMR plugin object.
+ */
 function createHmrPlugin(options = {}) {
   const { version = vite.version } = options;
   return {
@@ -59,7 +70,7 @@ function createHmrPlugin(options = {}) {
   };
 }
 
-function createConfigPlugin() {
+function createConfigPlugin$1() {
   return {
     name: 'blocklet:config',
     configureServer(server) {
@@ -171,22 +182,12 @@ function createMetaPlugin() {
 }
 
 /**
- * @typedef {{
- *  color: string;
- *  image: string;
- * }} GenerateOptions
- */
-/**
- * @typedef {{
- *  loadingElementId?: string;
- *  loadingColor?: string;
- *  loadingImage?: string;
- * }} LoadingPluginOptions
- */
-
-/**
+ * Generates an HTML string containing a spinner with optional color and image.
  *
- * @param {GenerateOptions} options
+ * @param {Object} options - The options for generating the HTML.
+ * @param {string} options.color - The color of the spinner. Defaults to "#333".
+ * @param {string} options.image - The URL of the image to display alongside the spinner.
+ * @return {string} The generated HTML string.
  */
 function generateHtml({ color, image }) {
   return `<style>
@@ -288,14 +289,18 @@ function generateHtml({ color, image }) {
 }
 
 /**
+ * Creates a loading plugin for Vite.
  *
- * @param {LoadingPluginOptions} options
- * @returns
+ * @param {Object} options - The options for the loading plugin.
+ * @param {string} [options.loadingElementId='app'] - The ID of the loading element.
+ * @param {string} [options.loadingColor='#8abaf0'] - The color of the loading animation.
+ * @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=resize&w=80',
+  loadingImage = '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80',
 } = {}) {
   const injectHtml = generateHtml({
     color: loadingColor,
@@ -311,9 +316,100 @@ function createLoadingPlugin({
   };
 }
 
+/**
+ * Creates a config plugin for Vite development server.
+ *
+ * @param {object} options - The options for the plugin.
+ * @param {'all'|'mobile'|'desktop'} [options.debugPlatform='mobile'] - The platforms to enable debug mode for.
+ * @param {string} [options.debugScript] - The initialization code for the debug script.
+ * @return {object} The Vite config plugin.
+ */
+function createConfigPlugin(options) {
+  return {
+    name: 'blocklet:debug', // plugin name
+    /**
+     * Configure server
+     * @param {import('vite').ViteDevServer} server vite server
+     */
+    configureServer(server) {
+      if (isInBlocklet) {
+        server.middlewares.use((req, res, next) => {
+          /**
+           * Enabled debug mode by platform
+           * @type {boolean}
+           */
+          let enabled = false;
+          const debugPlatform = options.debugPlatform || 'mobile';
+          if (debugPlatform.includes('all')) {
+            enabled = true;
+          }
+          const isMobileFn = isMobile__default["default"].default ? isMobile__default["default"].default : isMobile__default["default"];
+          if (isMobileFn(req.headers['user-agent']).any) {
+            if (debugPlatform.includes('mobile')) {
+              enabled = true;
+            }
+          } else {
+            if (debugPlatform.includes('desktop')) {
+              enabled = true;
+            }
+          }
+          if (enabled) {
+            try {
+              const url = new URL(req.url, 'http://localhost');
+              if (url.pathname === '/') {
+                url.searchParams.set('debug', '');
+                req.originalUrl = url.pathname + url.search;
+              }
+            } catch {}
+          }
+          return next();
+        });
+      }
+    },
+    /**
+     * Transform index html
+     * @param {string} html original html content
+     * @param {import('vite').IndexHtmlTransformContext} ctx vite context
+     * @returns {import('vite').IndexHtmlTransformResult}
+     */
+    transformIndexHtml(html, ctx) {
+      const debugScript =
+        options.debugScript || "import('https://esm.run/vconsole').then(({ default: vConsole }) => new vConsole())";
+      try {
+        const url = new URL(ctx.originalUrl, 'http://localhost');
+        if (url.searchParams.has('debug')) {
+          return {
+            html,
+            tags: [
+              {
+                tag: 'script',
+                children: debugScript,
+                injectTo: 'body',
+              },
+            ],
+          };
+        }
+      } catch {}
+      return html;
+    },
+  };
+}
+
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
+/**
+ * Sets up the client for the application.
+ *
+ * @param {Object} app - The application object.
+ * @param {Object} [options={}] - The options object.
+ * @param {string} [options.host='127.0.0.1'] - The host for the server.
+ * @param {string} [options.protocol='ws'] - The protocol for the server.
+ * @param {number} [options.port] - The port for the server.
+ * @param {string} [options.configFile=''] - The path to the config file.
+ * @param {string} [options.appType='spa'] - The type of the application.
+ * @return {Promise<Object>} A promise that resolves to the Vite server object.
+ */
 async function setupClient(app, options = {}) {
   if (!isProduction) {
     const params = mri__default["default"](argv, {
@@ -322,7 +418,33 @@ async function setupClient(app, options = {}) {
       },
     });
     const { host = '127.0.0.1', protocol = 'ws', port: inputPort, configFile = '', appType = 'spa' } = options;
-    const port = await getPort__default["default"]({ port: inputPort });
+    let skipWritePort = true;
+    let envAppendContent = '';
+    let envObject = '';
+    const envFilePath = path__default["default"].join(process.cwd(), '.env.development.local');
+    let port;
+
+    if (!fs__default["default"].existsSync(envFilePath)) {
+      skipWritePort = false;
+      port = await getPort__default["default"]({ port: inputPort });
+      envAppendContent = `BLOCKLET_VITE_PORT=${port}`;
+    } else {
+      port = await getPort__default["default"]({ port: inputPort });
+      const envContent = await fs__default["default"].promises.readFile(envFilePath, 'utf-8');
+      envObject = dotenv__default["default"].parse(envContent);
+
+      if (!envObject.BLOCKLET_VITE_PORT) {
+        skipWritePort = false;
+        envAppendContent = `${envContent}\nBLOCKLET_VITE_PORT=${port}`;
+      } else {
+        port = process.env.BLOCKLET_VITE_PORT;
+      }
+    }
+    if (!skipWritePort && envAppendContent) {
+      // TODO @zhanghan 常见的 env file 处理暂不支持保留 comment，所以不能通过解析后的对象来写入文件
+      // @see https://github.com/bevry/envfile/pull/213
+      await fs__default["default"].promises.writeFile(envFilePath, envAppendContent);
+    }
     // 以中间件模式创建 Vite 服务器
     const vite$1 = await vite.createServer({
       configFile: params.config || configFile || undefined,
@@ -343,23 +465,28 @@ async function setupClient(app, options = {}) {
 }
 
 /**
- * @typedef {{
- *  disableNodePolyfills?: boolean;
- *  disableConfig?: boolean;
- *  disableMeta?: boolean;
- *  disableHmr?: boolean;
- *  disableLoading?: boolean;
+ * Plugin options.
+ *
+ * @typedef {Object} PluginOptions
+ * @property {boolean} [disableNodePolyfills=false] - Disable node polyfills.
+ * @property {boolean} [disableConfig=false] - Disable config plugin.
+ * @property {boolean} [disableMeta=false] - Disable meta plugin.
+ * @property {boolean} [disableHmr=false] - Disable hmr plugin.
+ * @property {boolean} [disableLoading=false] - Disable loading plugin.
+ * @property {boolean} [disableDebug=false] - Disable debug plugin.
  *
- *  loadingElementId?: string;
- *  loadingColor?: string;
- *  loadingImage?: string;
- * }} PluginOptions
+ * @property {string} [loadingElementId]
+ * @property {string} [loadingColor]
+ * @property {string} [loadingImage]
+ * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
+ * @property {string} [debugScript]
  */
 
 /**
+ * Create blocklet plugins.
  *
  * @param {PluginOptions} options
- * @returns
+ * @returns {import('vite').Plugin[]}
  */
 function createBlockletPlugin(options = {}) {
   const {
@@ -370,14 +497,18 @@ function createBlockletPlugin(options = {}) {
     disableMeta = false,
     disableHmr = false,
     disableLoading = false,
+    disableDebug = false,
     ...restOptions
   } = options;
+
+  /** @type {import('vite').Plugin[]} */
   const plugins = [];
+
   if (!disableMeta) {
     plugins.push(createMetaPlugin());
   }
   if (!disableConfig) {
-    plugins.push(createConfigPlugin());
+    plugins.push(createConfigPlugin$1());
   }
   if (!disableHmr) {
     plugins.push(createHmrPlugin(restOptions));
@@ -388,6 +519,9 @@ function createBlockletPlugin(options = {}) {
   if (!disableLoading) {
     plugins.push(createLoadingPlugin(restOptions));
   }
+  if (!disableDebug) {
+    plugins.push(createConfigPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -396,7 +530,8 @@ Object.defineProperty(exports, 'nodePolyfills', {
   enumerable: true,
   get: function () { return vitePluginNodePolyfills.nodePolyfills; }
 });
-exports.createBlockletConfig = createConfigPlugin;
+exports.createBlockletConfig = createConfigPlugin$1;
+exports.createBlockletDebug = createConfigPlugin;
 exports.createBlockletHmr = createHmrPlugin;
 exports.createBlockletLoading = createLoadingPlugin;
 exports.createBlockletMeta = createMetaPlugin;

package/index.js

@@ -3,26 +3,32 @@ import createHmrPlugin from './libs/hmr.js';
 import createConfigPlugin from './libs/config.js';
 import createMetaPlugin from './libs/meta.js';
 import createLoadingPlugin from './libs/loading.js';
+import createDebugPlugin from './libs/debug.js';
 import setupClient from './libs/client.js';
 
 /**
- * @typedef {{
- *  disableNodePolyfills?: boolean;
- *  disableConfig?: boolean;
- *  disableMeta?: boolean;
- *  disableHmr?: boolean;
- *  disableLoading?: boolean;
+ * Plugin options.
  *
- *  loadingElementId?: string;
- *  loadingColor?: string;
- *  loadingImage?: string;
- * }} PluginOptions
+ * @typedef {Object} PluginOptions
+ * @property {boolean} [disableNodePolyfills=false] - Disable node polyfills.
+ * @property {boolean} [disableConfig=false] - Disable config plugin.
+ * @property {boolean} [disableMeta=false] - Disable meta plugin.
+ * @property {boolean} [disableHmr=false] - Disable hmr plugin.
+ * @property {boolean} [disableLoading=false] - Disable loading plugin.
+ * @property {boolean} [disableDebug=false] - Disable debug plugin.
+ *
+ * @property {string} [loadingElementId]
+ * @property {string} [loadingColor]
+ * @property {string} [loadingImage]
+ * @property {'all'|'mobile'|'desktop'} [debugPlatform='mobile']
+ * @property {string} [debugScript]
  */
 
 /**
+ * Create blocklet plugins.
  *
  * @param {PluginOptions} options
- * @returns
+ * @returns {import('vite').Plugin[]}
  */
 export function createBlockletPlugin(options = {}) {
   const {
@@ -33,9 +39,13 @@ export function createBlockletPlugin(options = {}) {
     disableMeta = false,
     disableHmr = false,
     disableLoading = false,
+    disableDebug = false,
     ...restOptions
   } = options;
+
+  /** @type {import('vite').Plugin[]} */
   const plugins = [];
+
   if (!disableMeta) {
     plugins.push(createMetaPlugin(restOptions));
   }
@@ -51,6 +61,9 @@ export function createBlockletPlugin(options = {}) {
   if (!disableLoading) {
     plugins.push(createLoadingPlugin(restOptions));
   }
+  if (!disableDebug) {
+    plugins.push(createDebugPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -61,5 +74,6 @@ export {
   createConfigPlugin as createBlockletConfig,
   createMetaPlugin as createBlockletMeta,
   createLoadingPlugin as createBlockletLoading,
+  createDebugPlugin as createBlockletDebug,
   nodePolyfills,
 };

package/libs/client.js

@@ -1,10 +1,25 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import getPort from 'get-port';
 import { createServer } from 'vite';
 import mri from 'mri';
+import dotenv from 'dotenv';
 
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
+/**
+ * Sets up the client for the application.
+ *
+ * @param {Object} app - The application object.
+ * @param {Object} [options={}] - The options object.
+ * @param {string} [options.host='127.0.0.1'] - The host for the server.
+ * @param {string} [options.protocol='ws'] - The protocol for the server.
+ * @param {number} [options.port] - The port for the server.
+ * @param {string} [options.configFile=''] - The path to the config file.
+ * @param {string} [options.appType='spa'] - The type of the application.
+ * @return {Promise<Object>} A promise that resolves to the Vite server object.
+ */
 export default async function setupClient(app, options = {}) {
   if (!isProduction) {
     const params = mri(argv, {
@@ -13,7 +28,33 @@ export default async function setupClient(app, options = {}) {
       },
     });
     const { host = '127.0.0.1', protocol = 'ws', port: inputPort, configFile = '', appType = 'spa' } = options;
-    const port = await getPort({ port: inputPort });
+    let skipWritePort = true;
+    let envAppendContent = '';
+    let envObject = '';
+    const envFilePath = path.join(process.cwd(), '.env.development.local');
+    let port;
+
+    if (!fs.existsSync(envFilePath)) {
+      skipWritePort = false;
+      port = await getPort({ port: inputPort });
+      envAppendContent = `BLOCKLET_VITE_PORT=${port}`;
+    } else {
+      port = await getPort({ port: inputPort });
+      const envContent = await fs.promises.readFile(envFilePath, 'utf-8');
+      envObject = dotenv.parse(envContent);
+
+      if (!envObject.BLOCKLET_VITE_PORT) {
+        skipWritePort = false;
+        envAppendContent = `${envContent}\nBLOCKLET_VITE_PORT=${port}`;
+      } else {
+        port = process.env.BLOCKLET_VITE_PORT;
+      }
+    }
+    if (!skipWritePort && envAppendContent) {
+      // TODO @zhanghan 常见的 env file 处理暂不支持保留 comment，所以不能通过解析后的对象来写入文件
+      // @see https://github.com/bevry/envfile/pull/213
+      await fs.promises.writeFile(envFilePath, envAppendContent);
+    }
     // 以中间件模式创建 Vite 服务器
     const vite = await createServer({
       configFile: params.config || configFile || undefined,

package/libs/config.js

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import fs from 'node:fs';
+import path from 'node:path';
 import YAML from 'yaml';
 import { toBlockletDid, isInBlocklet } from './utils.js';
 

package/libs/debug.js

@@ -0,0 +1,81 @@
+import isMobile from 'ismobilejs';
+import { isInBlocklet } from './utils.js';
+
+/**
+ * Creates a config plugin for Vite development server.
+ *
+ * @param {object} options - The options for the plugin.
+ * @param {'all'|'mobile'|'desktop'} [options.debugPlatform='mobile'] - The platforms to enable debug mode for.
+ * @param {string} [options.debugScript] - The initialization code for the debug script.
+ * @return {object} The Vite config plugin.
+ */
+export default function createConfigPlugin(options) {
+  return {
+    name: 'blocklet:debug', // plugin name
+    /**
+     * Configure server
+     * @param {import('vite').ViteDevServer} server vite server
+     */
+    configureServer(server) {
+      if (isInBlocklet) {
+        server.middlewares.use((req, res, next) => {
+          /**
+           * Enabled debug mode by platform
+           * @type {boolean}
+           */
+          let enabled = false;
+          const debugPlatform = options.debugPlatform || 'mobile';
+          if (debugPlatform.includes('all')) {
+            enabled = true;
+          }
+          const isMobileFn = isMobile.default ? isMobile.default : isMobile;
+          if (isMobileFn(req.headers['user-agent']).any) {
+            if (debugPlatform.includes('mobile')) {
+              enabled = true;
+            }
+          } else {
+            if (debugPlatform.includes('desktop')) {
+              enabled = true;
+            }
+          }
+          if (enabled) {
+            try {
+              const url = new URL(req.url, 'http://localhost');
+              if (url.pathname === '/') {
+                url.searchParams.set('debug', '');
+                req.originalUrl = url.pathname + url.search;
+              }
+            } catch {}
+          }
+          return next();
+        });
+      }
+    },
+    /**
+     * Transform index html
+     * @param {string} html original html content
+     * @param {import('vite').IndexHtmlTransformContext} ctx vite context
+     * @returns {import('vite').IndexHtmlTransformResult}
+     */
+    transformIndexHtml(html, ctx) {
+      const debugScript =
+        options.debugScript || "import('https://esm.run/vconsole').then(({ default: vConsole }) => new vConsole())";
+      try {
+        const url = new URL(ctx.originalUrl, 'http://localhost');
+        if (url.searchParams.has('debug')) {
+          return {
+            html,
+            tags: [
+              {
+                tag: 'script',
+                children: debugScript,
+                injectTo: 'body',
+              },
+            ],
+          };
+        }
+      } catch {}
+      return html;
+    },
+  };
+}

package/libs/hmr.js

@@ -2,6 +2,13 @@ import { version as viteVersion } from 'vite';
 import semver from 'semver';
 import { isInBlocklet } from './utils.js';
 
+/**
+ * Creates a HMR plugin with the given options.
+ *
+ * @param {Object} options - The options for the HMR plugin.
+ * @param {string} options.version - The version of the vite version.
+ * @return {Object} The HMR plugin object.
+ */
 export default function createHmrPlugin(options = {}) {
   const { version = viteVersion } = options;
   return {

package/libs/loading.js

@@ -1,20 +1,10 @@
 /**
- * @typedef {{
- *  color: string;
- *  image: string;
- * }} GenerateOptions
- */
-/**
- * @typedef {{
- *  loadingElementId?: string;
- *  loadingColor?: string;
- *  loadingImage?: string;
- * }} LoadingPluginOptions
- */
-
-/**
+ * Generates an HTML string containing a spinner with optional color and image.
  *
- * @param {GenerateOptions} options
+ * @param {Object} options - The options for generating the HTML.
+ * @param {string} options.color - The color of the spinner. Defaults to "#333".
+ * @param {string} options.image - The URL of the image to display alongside the spinner.
+ * @return {string} The generated HTML string.
  */
 function generateHtml({ color, image }) {
   return `<style>
@@ -116,14 +106,18 @@ function generateHtml({ color, image }) {
 }
 
 /**
+ * Creates a loading plugin for Vite.
  *
- * @param {LoadingPluginOptions} options
- * @returns
+ * @param {Object} options - The options for the loading plugin.
+ * @param {string} [options.loadingElementId='app'] - The ID of the loading element.
+ * @param {string} [options.loadingColor='#8abaf0'] - The color of the loading animation.
+ * @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=resize&w=80',
+  loadingImage = '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&w=80',
 } = {}) {
   const injectHtml = generateHtml({
     color: loadingColor,

package/libs/meta.js

@@ -1,4 +1,4 @@
-import fs from 'fs';
+import fs from 'node:fs';
 import YAML from 'yaml';
 
 export default function createMetaPlugin() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "",
   "main": "index.js",
   "files": [
@@ -30,7 +30,9 @@
     "@arcblock/did": "^1.18.108",
     "@ocap/mcrypto": "^1.18.108",
     "@ocap/util": "^1.18.108",
+    "dotenv": "^16.4.5",
     "get-port": "^5.1.1",
+    "ismobilejs": "^1.1.1",
     "mri": "^1.2.0",
     "semver": "^7.5.4",
     "vite-plugin-node-polyfills": "^0.17.0",