vite-plugin-blocklet 0.4.81 → 0.5.0

package/dist/index.cjs

@@ -2,19 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vite = require('vite');
+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 YAML = require('yaml');
+var getPort = require('get-port');
+var httpProxyMiddleware = require('http-proxy-middleware');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var semver__default = /*#__PURE__*/_interopDefaultLegacy(semver);
 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 getPort__default = /*#__PURE__*/_interopDefaultLegacy(getPort);
 
 const { types } = Mcrypto__default["default"];
 
@@ -25,20 +31,25 @@ function toBlockletDid(name) {
 
 const isInBlocklet = !!process.env.BLOCKLET_PORT;
 
-function createHmrPlugin({ version }) {
+function createHmrPlugin({ version = vite.version } = {}) {
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
-    transform(code, id) {
-      if (isInBlocklet && version === 2) {
-        if (id.endsWith('/vite/dist/client/client.mjs')) {
-          let replacedCode = code;
+    async transform(code, id) {
+      if (isInBlocklet && id.endsWith('/vite/dist/client/client.mjs')) {
+        const pureVersion = semver__default["default"].major(version);
+        let replacedCode = code;
+        if (pureVersion === 2) {
           replacedCode = replacedCode.replace("const base = __BASE__ || '/';\n", '');
           replacedCode = replacedCode.replace(
             'const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;',
             "const base = __BASE__ || '/';\nlet tmpPort = __HMR_PORT__;\nif (window.blocklet) {\ntmpPort = new URL(window.location.href).port + base;\n}\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}${tmpPort ? `:${tmpPort}` : ''}`;"
           );
           return replacedCode;
+        } else if (pureVersion === 3) {
+          let replacedCode = code;
+          replacedCode = replacedCode.replace('__HMR_PORT__', 'undefined');
+          return replacedCode;
         }
       }
     },
@@ -115,22 +126,60 @@ function createMetaPlugin() {
   return {
     name: 'blocklet:meta',
     transformIndexHtml(html) {
+      const tags = [];
+      // 如果 index.html 中没有设置 title，则自动注入 blocklet.yml 中的 title
+      if (!/<title>(.*?)<\/title>/.test(html)) {
+        const blockletYamlPath = './blocklet.yml';
+        const blockletYaml = YAML__default["default"].parse(fs__default["default"].readFileSync(blockletYamlPath, 'utf8'));
+        const { title } = blockletYaml;
+
+        tags.push({
+          tag: 'title',
+          children: title,
+        });
+      }
+      // 默认注入 __blocklet__.js 文件
+      tags.push({
+        // injectTo: 'head',
+        tag: 'script',
+        attrs: {
+          src: '__blocklet__.js',
+        },
+      });
+
       return {
         html,
-        tags: [
-          {
-            // injectTo: 'head',
-            tag: 'script',
-            attrs: {
-              src: '__blocklet__.js',
-            },
-          },
-        ],
+        tags,
       };
     },
   };
 }
 
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+async function setupClient(app, server, options = {}) {
+  if (!isProduction) {
+    const randomport = await getPort__default["default"]();
+    const { host = 'localhost', protocol = 'ws', port = randomport } = options;
+    const hmrPath = `/_vite_websocket_${port}`;
+    // 以中间件模式创建 Vite 服务器
+    const vite$1 = await vite.createServer({
+      server: {
+        middlewareMode: true,
+        hmr: {
+          port,
+          path: hmrPath,
+        },
+      },
+    });
+    // 将 vite 的 connect 实例作中间件使用
+    const wsProxy = httpProxyMiddleware.createProxyMiddleware(`${protocol}://${host}:${port}`);
+    app.use(hmrPath, wsProxy);
+    server.on('upgrade', wsProxy.upgrade);
+    app.use(vite$1.middlewares);
+  }
+}
+
 function createBlockletPlugin(options = {}) {
   const { disableConfig = false, disableMeta = false, disableHmr = false } = options;
   const plugins = [];
@@ -147,11 +196,8 @@ function createBlockletPlugin(options = {}) {
   return plugins;
 }
 
-const createBlockletHmr = createHmrPlugin;
-const createBlockletConfig = createConfigPlugin;
-const createBlockletMeta = createMetaPlugin;
-
-exports.createBlockletConfig = createBlockletConfig;
-exports.createBlockletHmr = createBlockletHmr;
-exports.createBlockletMeta = createBlockletMeta;
+exports.createBlockletConfig = createConfigPlugin;
+exports.createBlockletHmr = createHmrPlugin;
+exports.createBlockletMeta = createMetaPlugin;
 exports.createBlockletPlugin = createBlockletPlugin;
+exports.setupClient = setupClient;

package/index.js

@@ -1,6 +1,7 @@
 import createHmrPlugin from './libs/hmr.js';
 import createConfigPlugin from './libs/config.js';
 import createMetaPlugin from './libs/meta.js';
+import setupClient from './libs/client';
 
 export function createBlockletPlugin(options = {}) {
   const { disableConfig = false, disableMeta = false, disableHmr = false } = options;
@@ -18,6 +19,9 @@ export function createBlockletPlugin(options = {}) {
   return plugins;
 }
 
-export const createBlockletHmr = createHmrPlugin;
-export const createBlockletConfig = createConfigPlugin;
-export const createBlockletMeta = createMetaPlugin;
+export {
+  setupClient,
+  createHmrPlugin as createBlockletHmr,
+  createConfigPlugin as createBlockletConfig,
+  createMetaPlugin as createBlockletMeta,
+};

package/libs/client.js

@@ -0,0 +1,28 @@
+import getPort from 'get-port';
+import { createServer } from 'vite';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+export default async function setupClient(app, server, options = {}) {
+  if (!isProduction) {
+    const randomport = await getPort();
+    const { host = 'localhost', protocol = 'ws', port = randomport } = options;
+    const hmrPath = `/_vite_websocket_${port}`;
+    // 以中间件模式创建 Vite 服务器
+    const vite = await createServer({
+      server: {
+        middlewareMode: true,
+        hmr: {
+          port,
+          path: hmrPath,
+        },
+      },
+    });
+    // 将 vite 的 connect 实例作中间件使用
+    const wsProxy = createProxyMiddleware(`${protocol}://${host}:${port}`);
+    app.use(hmrPath, wsProxy);
+    server.on('upgrade', wsProxy.upgrade);
+    app.use(vite.middlewares);
+  }
+}

package/libs/hmr.js

@@ -1,19 +1,26 @@
+import { version as viteVersion } from 'vite';
+import semver from 'semver';
 import { isInBlocklet } from './utils.js';
 
-export default function createHmrPlugin({ version }) {
+export default function createHmrPlugin({ version = viteVersion } = {}) {
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
-    transform(code, id) {
-      if (isInBlocklet && version === 2) {
-        if (id.endsWith('/vite/dist/client/client.mjs')) {
-          let replacedCode = code;
+    async transform(code, id) {
+      if (isInBlocklet && id.endsWith('/vite/dist/client/client.mjs')) {
+        const pureVersion = semver.major(version);
+        let replacedCode = code;
+        if (pureVersion === 2) {
           replacedCode = replacedCode.replace("const base = __BASE__ || '/';\n", '');
           replacedCode = replacedCode.replace(
             'const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`;',
             "const base = __BASE__ || '/';\nlet tmpPort = __HMR_PORT__;\nif (window.blocklet) {\ntmpPort = new URL(window.location.href).port + base;\n}\nconst socketHost = `${__HMR_HOSTNAME__ || location.hostname}${tmpPort ? `:${tmpPort}` : ''}`;"
           );
           return replacedCode;
+        } else if (pureVersion === 3) {
+          let replacedCode = code;
+          replacedCode = replacedCode.replace('__HMR_PORT__', 'undefined');
+          return replacedCode;
         }
       }
     },

package/libs/meta.js

@@ -1,18 +1,34 @@
+import fs from 'fs';
+import YAML from 'yaml';
+
 export default function createMetaPlugin() {
   return {
     name: 'blocklet:meta',
     transformIndexHtml(html) {
+      const tags = [];
+      // 如果 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;
+
+        tags.push({
+          tag: 'title',
+          children: title,
+        });
+      }
+      // 默认注入 __blocklet__.js 文件
+      tags.push({
+        // injectTo: 'head',
+        tag: 'script',
+        attrs: {
+          src: '__blocklet__.js',
+        },
+      });
+
       return {
         html,
-        tags: [
-          {
-            // injectTo: 'head',
-            tag: 'script',
-            attrs: {
-              src: '__blocklet__.js',
-            },
-          },
-        ],
+        tags,
       };
     },
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.4.81",
+  "version": "0.5.0",
   "description": "",
   "main": "index.js",
   "files": [
@@ -27,9 +27,15 @@
     "rollup": "^2.79.1"
   },
   "dependencies": {
-    "@arcblock/did": "^1.17.23",
-    "@ocap/mcrypto": "^1.17.23",
-    "@ocap/util": "^1.17.23",
+    "@arcblock/did": "^1.18.6",
+    "@ocap/mcrypto": "^1.18.6",
+    "@ocap/util": "^1.18.6",
+    "get-port": "^5.1.1",
+    "http-proxy-middleware": "^2.0.6",
+    "semver": "^7.3.8",
     "yaml": "^2.1.3"
+  },
+  "peerDependencies": {
+    "vite": ">=2<4"
   }
 }