npm - @tomjs/vite-plugin-hbuilderx - Versions diffs - 1.0.0 - Mend

@tomjs/vite-plugin-hbuilderx 1.0.0

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 (25) hide show

package/CHANGELOG.md +5 -0
package/LICENSE +21 -0
package/README.md +351 -0
package/dist/client.iife.js +42 -0
package/dist/index.d.ts +82 -0
package/dist/index.js +336 -0
package/dist/webview.d.ts +14 -0
package/dist/webview.js +18 -0
package/env-hbuilderx.d.ts +36 -0
package/env.d.ts +24 -0
package/eslint.config.mjs +6 -0
package/package.json +64 -0
package/src/constants.ts +4 -0
package/src/index.ts +420 -0
package/src/logger.ts +9 -0
package/src/types.ts +81 -0
package/src/utils.ts +36 -0
package/src/webview/client.ts +47 -0
package/src/webview/global.d.ts +4 -0
package/src/webview/template.html +90 -0
package/src/webview/webview.ts +25 -0
package/src/webview/window.d.ts +9 -0
package/tsconfig.json +15 -0
package/tsconfig.web.json +9 -0
package/tsdown.config.ts +38 -0

package/dist/index.js ADDED Viewed

@@ -0,0 +1,336 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import fs from "node:fs";
+import { cwd } from "node:process";
+import { readFileSync, readJsonSync } from "@tomjs/node";
+import { execa } from "execa";
+import merge from "lodash.merge";
+import { parse } from "node-html-parser";
+import colors from "picocolors";
+import { build } from "tsdown";
+import Logger from "@tomjs/logger";
+//#region ../../node_modules/.pnpm/tsdown@0.18.4_publint@0.3.16_synckit@0.11.11_typescript@5.9.3_vue-tsc@3.2.1_typescript@5.9.3_/node_modules/tsdown/esm-shims.js
+const getFilename = () => fileURLToPath(import.meta.url);
+const getDirname = () => path.dirname(getFilename());
+const __dirname = /* @__PURE__ */ getDirname();
+//#endregion
+//#region src/constants.ts
+const PLUGIN_NAME = "tomjs:hbuilderx";
+const ORG_NAME = "@tomjs";
+const VIRTUAL_MODULE_ID = "virtual:hbuilderx";
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
+//#endregion
+//#region src/logger.ts
+function createLogger() {
+	return new Logger({
+		prefix: `[${PLUGIN_NAME}]`,
+		time: true
+	});
+}
+//#endregion
+//#region src/utils.ts
+/**
+* @see https://github.com/vitejs/vite/blob/v4.0.1/packages/vite/src/node/constants.ts#L137-L147
+*/
+function resolveHostname(hostname) {
+	const loopbackHosts = new Set([
+		"localhost",
+		"127.0.0.1",
+		"::1",
+		"0000:0000:0000:0000:0000:0000:0000:0001"
+	]);
+	const wildcardHosts = new Set([
+		"0.0.0.0",
+		"::",
+		"0000:0000:0000:0000:0000:0000:0000:0000"
+	]);
+	return loopbackHosts.has(hostname) || wildcardHosts.has(hostname) ? "localhost" : hostname;
+}
+function resolveServerUrl(server) {
+	const addressInfo = server.httpServer.address();
+	const isAddressInfo = (x) => x?.address;
+	if (isAddressInfo(addressInfo)) {
+		const { address, port } = addressInfo;
+		const hostname = resolveHostname(address);
+		const options = server.config.server;
+		const protocol = options.https ? "https" : "http";
+		const devBase = server.config.base;
+		const path$1 = typeof options.open === "string" ? options.open : devBase;
+		return path$1.startsWith("http") ? path$1 : `${protocol}://${hostname}:${port}${path$1}`;
+	}
+}
+//#endregion
+//#region src/index.ts
+const isDev = process.env.NODE_ENV === "development";
+const logger = createLogger();
+function getPkg() {
+	const pkgFile = path.resolve(process.cwd(), "package.json");
+	if (!fs.existsSync(pkgFile)) throw new Error("项目中未找到 package.json 文件");
+	const pkg = readJsonSync(pkgFile);
+	if (!pkg.main) throw new Error("package.json 文件未配置 main 入口文件");
+	return pkg;
+}
+function preMergeOptions(options) {
+	const pkg = getPkg();
+	const opts = merge({
+		webview: true,
+		recommended: true,
+		extension: {
+			entry: "extension/index.ts",
+			outDir: "dist-extension",
+			target: ["es2019", "node16"],
+			format: "cjs",
+			shims: true,
+			clean: true,
+			dts: false,
+			treeshake: !isDev,
+			publint: false,
+			config: false,
+			fixedExtension: false,
+			external: ["hbuilderx"]
+		}
+	}, options);
+	const opt = opts.extension || {};
+	if (isDev) opt.sourcemap = opt.sourcemap ?? true;
+	else {
+		opt.minify ??= true;
+		opt.clean ??= true;
+	}
+	if (typeof opt.external !== "function") {
+		opt.external = ["hbuilderx"].concat(opt.external ?? []);
+		opt.external = [...new Set(opt.external)];
+	} else {
+		const fn = opt.external;
+		opt.external = function(id, parentId, isResolved) {
+			if (id === "hbuilderx") return true;
+			return fn(id, parentId, isResolved);
+		};
+	}
+	if (!isDev && !opt.skipNodeModulesBundle && !opt.noExternal) opt.noExternal = Object.keys(pkg.dependencies || {}).concat(Object.keys(pkg.peerDependencies || {}));
+	opts.extension = opt;
+	return opts;
+}
+function genProdWebviewCode(cache) {
+	function handleHtmlCode(html) {
+		const root = parse(html);
+		const head = root.querySelector("head");
+		if (!head) root?.insertAdjacentHTML("beforeend", "<head></head>");
+		head.insertAdjacentHTML("afterbegin", "<style>:root{--root-background-color:#fffae8;background-color:var(--root-background-color)}</style>");
+		const tags = {
+			script: "src",
+			link: "href"
+		};
+		Object.keys(tags).forEach((tag) => {
+			root.querySelectorAll(tag).forEach((element) => {
+				const attr = element.getAttribute(tags[tag]);
+				if (attr) element.setAttribute(tags[tag], `{{baseUri}}${attr}`);
+			});
+		});
+		return root.removeWhitespace().toString();
+	}
+	return `import path from 'path';
+import { workspace } from 'hbuilderx';
+${`const htmlCode = {
+    ${Object.keys(cache).map((s) => `'${s}': \`${handleHtmlCode(cache[s])}\`,`).join("\n")}
+  };`}
+export function getWebviewHtml(options){
+ const { context, inputName, injectCode } = options || {};
+  const baseUri = path.join(context.extensionPath, process.env.VITE_WEBVIEW_DIST || 'dist');
+  let html = htmlCode[inputName || 'index'] || '';
+  if (injectCode) {
+    html = html.replace('<head>', '<head>'+ injectCode);
+  }
+  return html.replaceAll('{{baseUri}}', baseUri);
+}
+export default getWebviewHtml;
+  `;
+}
+function useHBuilderxPlugin(options) {
+	const opts = preMergeOptions(options);
+	const handleConfig = (config) => {
+		let outDir = config?.build?.outDir || "dist";
+		opts.extension ??= {};
+		if (opts.recommended) {
+			opts.extension.outDir = path.resolve(outDir, "extension");
+			outDir = path.resolve(outDir, "webview");
+		}
+		const assetsDir = config?.build?.assetsDir || "assets";
+		const output = {
+			chunkFileNames: `${assetsDir}/[name].js`,
+			entryFileNames: `${assetsDir}/[name].js`,
+			assetFileNames: `${assetsDir}/[name].[ext]`
+		};
+		let rollupOutput = config?.build?.rollupOptions?.output ?? {};
+		if (Array.isArray(rollupOutput)) rollupOutput.map((s) => Object.assign(s, output));
+		else rollupOutput = Object.assign({}, rollupOutput, output);
+		return { build: {
+			outDir,
+			sourcemap: isDev ? true : config?.build?.sourcemap,
+			rollupOptions: { output: rollupOutput }
+		} };
+	};
+	let devWebviewClientCode;
+	let devWebviewVirtualCode;
+	let resolvedConfig;
+	const prodHtmlCache = {};
+	function isVue() {
+		return !!resolvedConfig.plugins.find((s) => ["vite:vue", "vite:vue2"].includes(s.name));
+	}
+	function isReact() {
+		return !!resolvedConfig.plugins.find((s) => ["vite:react-refresh", "vite:react-swc"].includes(s.name));
+	}
+	function getDevtoolsPort() {
+		const devtools = opts.devtools;
+		if (!devtools) return;
+		let port;
+		if (typeof devtools === "number") port = devtools;
+		else if (devtools === true) {
+			if (isVue()) port = 8098;
+			else if (isReact()) port = 8097;
+		}
+		return port;
+	}
+	return [{
+		name: "@tomjs:hbuilderx",
+		apply: "serve",
+		config(config) {
+			return handleConfig(config);
+		},
+		configResolved(config) {
+			resolvedConfig = config;
+			if (opts.webview) {
+				devWebviewClientCode = readFileSync(path.join(__dirname, "client.iife.js"));
+				let refreshKey = "";
+				if (opts.webview === true) refreshKey = "F6";
+				else if (typeof opts.webview === "object" && opts.webview.refreshKey) refreshKey = opts.webview.refreshKey;
+				if (refreshKey) devWebviewClientCode = `window.TOMJS_REFRESH_KEY="${refreshKey}";${devWebviewClientCode}`;
+				devWebviewVirtualCode = readFileSync(path.join(__dirname, "webview.js"));
+			}
+		},
+		configureServer(server) {
+			if (!server || !server.httpServer) return;
+			server.httpServer?.once("listening", async () => {
+				const env = {
+					NODE_ENV: server.config.mode || "development",
+					VITE_DEV_SERVER_URL: resolveServerUrl(server)
+				};
+				logger.info("extension build start");
+				let buildCount = 0;
+				const webview = opts?.webview;
+				const { onSuccess: _onSuccess, ignoreWatch, logLevel, watchFiles, ...tsdownOptions } = opts.extension || {};
+				await build(merge(tsdownOptions, {
+					watch: watchFiles ?? (opts.recommended ? ["extension"] : true),
+					ignoreWatch: [
+						".history",
+						".temp",
+						".tmp",
+						".cache",
+						"dist"
+					].concat(Array.isArray(ignoreWatch) ? ignoreWatch : []),
+					env,
+					logLevel: logLevel ?? "silent",
+					plugins: !webview ? [] : [{
+						name: `${ORG_NAME}:hbuilderx:inject`,
+						resolveId(id) {
+							if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;
+						},
+						load(id) {
+							if (id === RESOLVED_VIRTUAL_MODULE_ID) return devWebviewVirtualCode;
+						}
+					}],
+					async onSuccess(config, signal) {
+						if (_onSuccess) {
+							if (typeof _onSuccess === "string") await execa(_onSuccess);
+							else if (typeof _onSuccess === "function") await _onSuccess(config, signal);
+						}
+						if (buildCount++ > 1) logger.info("extension rebuild success");
+						else logger.info("extension build success");
+					}
+				}));
+			});
+			if (opts.devtools) {
+				const _printUrls = server.printUrls;
+				server.printUrls = () => {
+					_printUrls();
+					const { green, bold, blue } = colors;
+					if (isVue() || isReact()) {
+						const port = getDevtoolsPort();
+						if (port) {
+							const devtoolsUrl = `http://localhost:${port}`;
+							console.log(`  ${green("➜")}  ${bold(isVue() ? "Vue DevTools" : "React DevTools")}: 已开启独立应用支持，地址 ${blue(`${devtoolsUrl}`)}`);
+						}
+					} else console.log(`  ${green("➜")}  仅支持 ${green("react-devtools")} 和 ${green("vue-devtools")}`);
+				};
+			}
+		},
+		transformIndexHtml(html) {
+			if (!opts.webview) return html;
+			if (opts.devtools) {
+				const port = getDevtoolsPort();
+				if (port) html = html.replace(/<head>/i, `<head><script src="http://localhost:${port}"><\/script>`);
+			}
+			return html.replace(/<head>/i, `<head><script>${devWebviewClientCode}<\/script>`);
+		}
+	}, {
+		name: "@tomjs:hbuilderx",
+		apply: "build",
+		enforce: "post",
+		config(config) {
+			return handleConfig(config);
+		},
+		configResolved(config) {
+			resolvedConfig = config;
+		},
+		transformIndexHtml(html, ctx) {
+			if (!opts.webview) return html;
+			prodHtmlCache[ctx.chunk?.name] = html;
+			return html;
+		},
+		closeBundle() {
+			let webviewVirtualCode;
+			const webview = opts?.webview;
+			if (webview) webviewVirtualCode = genProdWebviewCode(prodHtmlCache);
+			let outDir = resolvedConfig.build.outDir.replace(cwd(), "").replaceAll("\\", "/");
+			if (outDir.startsWith("/")) outDir = outDir.substring(1);
+			const env = {
+				NODE_ENV: resolvedConfig.mode || "production",
+				VITE_WEBVIEW_DIST: outDir
+			};
+			logger.info("extension build start");
+			const { onSuccess: _onSuccess, logLevel, ...tsupOptions } = opts.extension || {};
+			build(merge(tsupOptions, {
+				env,
+				logLevel: logLevel ?? "silent",
+				plugins: !webview ? [] : [{
+					name: `${ORG_NAME}:hbuilderx:inject`,
+					resolveId(id) {
+						if (id === VIRTUAL_MODULE_ID) return RESOLVED_VIRTUAL_MODULE_ID;
+					},
+					load(id) {
+						if (id === RESOLVED_VIRTUAL_MODULE_ID) return webviewVirtualCode;
+					}
+				}],
+				async onSuccess(config, signal) {
+					if (_onSuccess) {
+						if (typeof _onSuccess === "string") await execa(_onSuccess);
+						else if (typeof _onSuccess === "function") await _onSuccess(config, signal);
+					}
+					logger.info("extension build success");
+				}
+			}));
+		}
+	}];
+}
+var src_default = useHBuilderxPlugin;
+//#endregion
+export { src_default as default, useHBuilderxPlugin };

package/dist/webview.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+//#region src/webview/webview.d.ts
+interface WebviewHtmlOptions {
+  /**
+   * local server url
+   */
+  serverUrl: string;
+}
+/**
+ *
+ * @param options serverUrl string or object options
+ */
+declare function getWebviewHtml(options: WebviewHtmlOptions): string;
+//#endregion
+export { WebviewHtmlOptions, getWebviewHtml as default, getWebviewHtml };

package/dist/webview.js ADDED Viewed

@@ -0,0 +1,18 @@
+//#region src/webview/template.html
+var template_default = "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <style>\n      html,\n      body {\n        width: 100%;\n        height: 100%;\n        padding: 0;\n        margin: 0;\n        overflow: hidden;\n      }\n\n      #webview-patch-iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n      }\n\n      .outer {\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n    </style>\n\n    <script type=\"module\" id=\"webview-patch\">\n      const TAG = '[@tomjs:hbuilderx:extension] ';\n\n      function onDomReady(callback, doc) {\n        const _doc = doc || document;\n        if (_doc.readyState === 'interactive' || _doc.readyState === 'complete') {\n          callback();\n        } else {\n          _doc.addEventListener('DOMContentLoaded', callback);\n        }\n      }\n\n      // message handler\n      let iframeLoaded = false;\n      const cacheMessages = [];\n\n      onDomReady(function () {\n        /**  @type {HTMLIFrameElement} */\n        const iframe = document.getElementById('webview-patch-iframe');\n\n        onDomReady(function () {\n          iframeLoaded = true;\n        }, iframe.contentDocument);\n\n        iframe.addEventListener('load', function (e) {\n          iframeLoaded = true;\n        });\n      });\n\n      function handleMessage(e) {\n        const iframe = document.getElementById('webview-patch-iframe');\n        if (!iframeLoaded || !iframe) {\n          return;\n        }\n        if ('{{serverUrl}}'.startsWith(e.origin)) {\n          const { type, data } = e.data;\n          console.log(TAG + ' received:', e.data);\n          if (type === '[hbuilderx:client]:postMessage') {\n            hbuilderx.postMessage(data);\n          }\n        }\n      }\n\n      window.addEventListener('message', function (event) {\n        handleMessage(event);\n      });\n    <\/script>\n  </head>\n\n  <body>\n    <div class=\"outer\">\n      <iframe\n        id=\"webview-patch-iframe\"\n        frameborder=\"0\"\n        sandbox=\"allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads\"\n        allow=\"cross-origin-isolated; autoplay; clipboard-read; clipboard-write\"\n        src=\"{{serverUrl}}\"\n      ></iframe>\n    </div>\n  </body>\n</html>\n";
+//#endregion
+//#region src/webview/webview.ts
+/**
+*
+* @param options serverUrl string or object options
+*/
+function getWebviewHtml(options) {
+	const opts = { serverUrl: "" };
+	Object.assign(opts, options);
+	return template_default.replace(/\{\{serverUrl\}\}/g, opts.serverUrl);
+}
+var webview_default = getWebviewHtml;
+//#endregion
+export { webview_default as default, getWebviewHtml };

package/env-hbuilderx.d.ts ADDED Viewed

@@ -0,0 +1,36 @@
+/// <reference types="@tomjs/hbuilderx/types" />
+/**
+ * 提供 webview 代码注入的虚拟模块
+ */
+declare module 'virtual:hbuilderx' {
+  import type { ExtensionContext } from 'hbuilderx';
+  export interface WebviewHtmlOptions {
+    /**
+     * `[vite serve]` vite dev 服务地址. 请使用 `process.env.VITE_DEV_SERVER_URL`
+     */
+    serverUrl?: string;
+    /**
+     * `[vite build]` 插件的上下文 `ExtensionContext`.
+     */
+    context: ExtensionContext;
+    /**
+     * `[vite build]` vite build.rollupOptions.input 设置的 index 名. 默认 `index`.
+     */
+    inputName?: string;
+    /**
+     * `[vite build]` 在 `<head>` 后面注入 `script` 或 `style` 代码
+     */
+    injectCode?: string;
+  }
+  /**
+   * Get the html of the webview.
+   *
+   * @param options
+   */
+  export const getWebviewHtml: (options?: WebviewHtmlOptions) => string;
+  export default getWebviewHtml;
+}

package/env.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+/// <reference types="./env-hbuilderx.d.ts" />
+export { };
+declare global {
+  type UnionType<T> = T | (string & {});
+  namespace NodeJS {
+    interface ProcessEnv {
+      /**
+       * Node.js 环境变量
+       */
+      NODE_ENV: UnionType<'development' | 'production'>;
+      /**
+       * `[vite serve]` vite dev 服务地址
+       */
+      VITE_DEV_SERVER_URL?: string;
+      /**
+       * `[vite build]` web端静态资源输出目录
+       */
+      VITE_WEBVIEW_DIST?: string;
+    }
+  }
+}

package/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+import defineConfig from '@tomjs/eslint';
+export default defineConfig({
+  typescript: true,
+  node: true,
+});

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "@tomjs/vite-plugin-hbuilderx",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "为 HBuilderX 开发插件提供 vite 插件，可以使用 vue/react 开发 webview 的视图等",
+  "author": {
+    "name": "Tom Gao",
+    "email": "tom@tomgao.cc"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tomjs/hbuilderx.git",
+    "directory": "packages/vite"
+  },
+  "keywords": [
+    "vite",
+    "plugin",
+    "hbuilderx",
+    "html",
+    "hmr",
+    "extension",
+    "webview"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./webview": "./dist/webview.js",
+    "./client": "./dist/client.iife.js",
+    "./env": "./env.d.ts"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "peerDependencies": {
+    "vite": ">=5"
+  },
+  "dependencies": {
+    "@tomjs/logger": "^1.4.0",
+    "@tomjs/node": "^2.2.3",
+    "execa": "^9.6.1",
+    "lodash.merge": "^4.6.2",
+    "node-html-parser": "^7.0.1",
+    "picocolors": "^1.1.1",
+    "tsdown": "~0.18.4"
+  },
+  "devDependencies": {
+    "@types/jsdom": "^27.0.0",
+    "@types/lodash.merge": "^4.6.9",
+    "@tomjs/hbuilderx": "1.0.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "lint": "run-s lint:stylelint lint:eslint",
+    "lint:stylelint": "stylelint \"examples/**/*.{css,scss,vue}\" --fix",
+    "lint:eslint": "eslint --fix"
+  }
+}

package/src/constants.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export const PLUGIN_NAME = 'tomjs:hbuilderx';
+export const ORG_NAME = '@tomjs';
+export const VIRTUAL_MODULE_ID = 'virtual:hbuilderx';
+export const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;