@multiplatform.one/vite-plugin-webext 6.2.0

package/lib/index.mjs

@@ -0,0 +1,296 @@
+import fs from "node:fs";
+import path from "node:path";
+import { lookupProjectRoot, lookupTamaguiModules, oneServerOnlyBrowserStub, stubExpoTypeDeclarations, workspaceSourceAliases } from "@multiplatform.one/utils/dev";
+import react from "@vitejs/plugin-react";
+
+//#region src/index.ts
+const WEBEXT_EXTENSIONS = [
+	".webext.ts",
+	".webext.tsx",
+	".webext.js",
+	".webext.jsx",
+	".web.ts",
+	".web.tsx",
+	".web.js",
+	".web.jsx",
+	".ts",
+	".tsx",
+	".js",
+	".jsx"
+];
+const OPTIMIZE_INCLUDE = [
+	"react",
+	"react-dom",
+	"webextension-polyfill",
+	"@tamagui/core",
+	"@tamagui/web",
+	"tamagui",
+	"react-native-web",
+	"@multiplatform.one/components"
+];
+/** shiki's chunk graph (wasm/TLA) can't fold into the single-file iife a
+*  content script requires. Stub it with an empty module —
+*  @multiplatform.one/components' highlightCode() catches the missing
+*  codeToTokens and falls back to plain text. */
+function shikiStubPlugin() {
+	const VIRTUAL_ID = "\0webext-shiki-stub";
+	return {
+		name: "webext-shiki-stub",
+		enforce: "pre",
+		resolveId(id) {
+			if (/^shiki(\/.*)?$/.test(id)) return VIRTUAL_ID;
+		},
+		load(id) {
+			if (id === VIRTUAL_ID) return "export {}";
+		}
+	};
+}
+function resolveDefaults(options) {
+	return {
+		workspaceRoot: options.workspaceRoot ?? lookupProjectRoot(),
+		isDev: options.isDev ?? process.env.NODE_ENV !== "production",
+		port: options.port ?? (Number(process.env.PORT) || 3303)
+	};
+}
+function baseDefine(options, isDev) {
+	return {
+		__DEV__: isDev,
+		__NAME__: JSON.stringify(options.packageInfo.name),
+		"process.env.NODE_ENV": JSON.stringify(isDev ? "development" : "production"),
+		global: "globalThis",
+		...options.define
+	};
+}
+function baseResolve(options, workspaceRoot) {
+	return {
+		alias: [
+			...Object.entries(workspaceSourceAliases(workspaceRoot)).map(([find, replacement]) => ({
+				find,
+				replacement
+			})),
+			{
+				find: "react-native",
+				replacement: "react-native-web"
+			},
+			{
+				find: "@",
+				replacement: options.targetDir
+			},
+			...options.aliases ?? []
+		],
+		extensions: WEBEXT_EXTENSIONS,
+		mainFields: [
+			"browser",
+			"module",
+			"main"
+		]
+	};
+}
+function baseOptimizeDeps() {
+	return {
+		include: OPTIMIZE_INCLUDE,
+		esbuildOptions: {
+			resolveExtensions: WEBEXT_EXTENSIONS,
+			mainFields: ["module", "main"]
+		}
+	};
+}
+/** Discover view names — every directory under <targetDir>/views with an
+*  index.html becomes an extension page (popup, options, sidepanel, …). */
+function listWebextViews(targetDir) {
+	const viewsDir = path.join(targetDir, "views");
+	if (!fs.existsSync(viewsDir)) return [];
+	return fs.readdirSync(viewsDir).filter((file) => fs.statSync(path.join(viewsDir, file)).isDirectory()).filter((view) => fs.existsSync(path.join(viewsDir, view, "index.html")));
+}
+/** The extension pages build (popup/options/sidepanel/devtools…). */
+async function createWebextViewsConfig(options) {
+	const { workspaceRoot, isDev, port } = resolveDefaults(options);
+	const { tamaguiPlugin } = await import("@tamagui/vite-plugin");
+	const views = listWebextViews(options.targetDir);
+	return {
+		root: options.targetDir,
+		base: isDev ? `http://localhost:${port}/` : "/dist/",
+		plugins: [
+			stubExpoTypeDeclarations(),
+			oneServerOnlyBrowserStub(workspaceRoot),
+			react({ jsxRuntime: "automatic" }),
+			tamaguiPlugin({
+				components: lookupTamaguiModules([options.targetDir]),
+				config: options.tamaguiConfig,
+				outputCSS: path.join(options.targetDir, "tamagui.css")
+			})
+		],
+		define: baseDefine(options, isDev),
+		optimizeDeps: baseOptimizeDeps(),
+		esbuild: {
+			jsx: "automatic",
+			target: "esnext"
+		},
+		resolve: baseResolve(options, workspaceRoot),
+		server: {
+			port,
+			hmr: {
+				host: "localhost",
+				protocol: "ws",
+				clientPort: port
+			},
+			origin: `http://localhost:${port}`,
+			cors: true,
+			headers: { "Access-Control-Allow-Origin": "*" }
+		},
+		build: {
+			watch: isDev ? {} : void 0,
+			outDir: path.join(options.stagingDir, "dist"),
+			emptyOutDir: false,
+			sourcemap: isDev ? "inline" : false,
+			terserOptions: { mangle: false },
+			rollupOptions: { input: Object.fromEntries(views.map((view) => [view, path.join(options.targetDir, "views", view, "index.html")])) }
+		}
+	};
+}
+/** The background service-worker (chromium) / background-script (firefox)
+*  build — a single-file iife, no DOM. */
+function createWebextBackgroundConfig(options) {
+	const { workspaceRoot, isDev } = resolveDefaults(options);
+	return {
+		root: options.targetDir,
+		plugins: [oneServerOnlyBrowserStub(workspaceRoot)],
+		define: baseDefine(options, isDev),
+		optimizeDeps: baseOptimizeDeps(),
+		esbuild: {
+			jsx: "automatic",
+			target: "esnext"
+		},
+		resolve: baseResolve(options, workspaceRoot),
+		build: {
+			watch: isDev ? {} : void 0,
+			outDir: path.join(options.stagingDir, "dist/background"),
+			cssCodeSplit: false,
+			emptyOutDir: false,
+			sourcemap: isDev ? "inline" : false,
+			lib: {
+				entry: path.join(options.targetDir, "background/main.ts"),
+				name: options.packageInfo.name,
+				formats: ["iife"]
+			},
+			rollupOptions: { output: {
+				entryFileNames: "index.mjs",
+				extend: true
+			} }
+		}
+	};
+}
+/** The content-script build — a single-file iife injected into pages, with
+*  Tamagui CSS extracted separately (webext.css web-accessible resource). */
+async function createWebextContentConfig(options) {
+	const { workspaceRoot, isDev } = resolveDefaults(options);
+	const { tamaguiPlugin } = await import("@tamagui/vite-plugin");
+	return {
+		root: options.targetDir,
+		plugins: [
+			stubExpoTypeDeclarations(),
+			oneServerOnlyBrowserStub(workspaceRoot),
+			shikiStubPlugin(),
+			tamaguiPlugin({
+				components: lookupTamaguiModules([options.targetDir]),
+				config: options.tamaguiConfig,
+				outputCSS: path.join(options.targetDir, "tamagui.content.css")
+			})
+		],
+		define: {
+			...baseDefine(options, isDev),
+			process: { env: { NODE_ENV: JSON.stringify(isDev ? "development" : "production") } }
+		},
+		optimizeDeps: baseOptimizeDeps(),
+		esbuild: {
+			jsx: "automatic",
+			target: "esnext"
+		},
+		resolve: baseResolve(options, workspaceRoot),
+		build: {
+			watch: isDev ? {} : void 0,
+			outDir: path.join(options.stagingDir, "dist/contentScripts"),
+			cssCodeSplit: false,
+			emptyOutDir: false,
+			sourcemap: isDev ? "inline" : false,
+			lib: {
+				entry: path.join(options.targetDir, "content_scripts/index.tsx"),
+				name: options.packageInfo.name,
+				formats: ["iife"]
+			},
+			rollupOptions: { output: {
+				entryFileNames: "index.global.js",
+				extend: true
+			} }
+		}
+	};
+}
+/** Copy static extension files (icons, …) into the staging root — the
+*  staging dir is build output (gitignored), so committed assets live in
+*  the target source tree instead. */
+async function copyWebextStatic(options) {
+	const staticDir = options.staticDir ?? path.join(options.targetDir, "static");
+	if (!fs.existsSync(staticDir)) return;
+	await fs.promises.mkdir(options.stagingDir, { recursive: true });
+	await fs.promises.cp(staticDir, options.stagingDir, { recursive: true });
+}
+async function writeWebextManifest(options) {
+	const manifestPath = path.join(options.stagingDir, "manifest.json");
+	await fs.promises.mkdir(path.dirname(manifestPath), { recursive: true });
+	await fs.promises.writeFile(manifestPath, JSON.stringify(await options.getManifest(), null, 2), "utf-8");
+}
+/** Dev mode: emit view HTML that loads main.tsx from the vite dev server
+*  (extension pages can't be served BY vite — the html on disk must point
+*  at it) plus the react-refresh preamble shim. */
+async function stubWebextIndexHtml(options) {
+	const port = options.port ?? 3303;
+	for (const view of listWebextViews(options.targetDir)) {
+		let data = await fs.promises.readFile(path.join(options.targetDir, "views", view, "index.html"), "utf-8");
+		data = data.replace("</head>", `  <script type="module" src="http://localhost:${port}/@vite/client"><\/script>
+  <script type="module" src="/dist/refresh.js"><\/script>
+</head>`);
+		data = data.replace("<script type=\"module\" src=\"./main.tsx\"><\/script>", `<script type="module" src="http://localhost:${port}/views/${view}/main.tsx"><\/script>`).replace("<div id=\"app\"></div>", "<div id=\"app\">vite server did not start</div>");
+		const outPath = path.join(options.stagingDir, "dist/views", view, "index.html");
+		await fs.promises.mkdir(path.dirname(outPath), { recursive: true });
+		await fs.promises.writeFile(outPath, data, "utf-8");
+	}
+}
+async function writeWebextRefreshScript(options) {
+	const port = options.port ?? 3303;
+	const refreshPath = path.join(options.stagingDir, "dist/refresh.js");
+	await fs.promises.mkdir(path.dirname(refreshPath), { recursive: true });
+	await fs.promises.writeFile(refreshPath, `window.__vite_plugin_react_preamble_installed__ = true;
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;
+window.addEventListener('load', () => {
+  import("http://localhost:${port}/@react-refresh")
+    .then((RefreshRuntime) => {
+      if (RefreshRuntime && typeof RefreshRuntime.injectIntoGlobalHook === 'function') {
+        RefreshRuntime.injectIntoGlobalHook(window);
+      }
+    })
+    .catch(console.error);
+});
+`, "utf-8");
+}
+/** One-shot (prod) or watching (dev) prepare: manifest + static assets +
+*  dev scaffolding. */
+async function runWebextPrepare(options) {
+	if (!(options.isDev ?? process.env.NODE_ENV !== "production")) {
+		await copyWebextStatic(options);
+		await writeWebextManifest(options);
+		return;
+	}
+	await copyWebextStatic(options);
+	await stubWebextIndexHtml(options);
+	await writeWebextRefreshScript(options);
+	await writeWebextManifest(options);
+	if (options.watch) {
+		const { watch } = await import("chokidar");
+		watch(path.join(options.targetDir, "**/*.html")).on("change", () => stubWebextIndexHtml(options).catch(console.error));
+		watch(path.join(options.targetDir, "manifest.ts")).on("change", () => writeWebextManifest(options).catch(console.error));
+	}
+}
+
+//#endregion
+export { copyWebextStatic, createWebextBackgroundConfig, createWebextContentConfig, createWebextViewsConfig, listWebextViews, runWebextPrepare, shikiStubPlugin, stubWebextIndexHtml, writeWebextManifest, writeWebextRefreshScript };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@multiplatform.one/vite-plugin-webext",
+  "version": "6.2.0",
+  "description": "Vite config factories for building a browser web extension (MV3 views, background service worker, content scripts) as a target of a multiplatform.one One app — workspace source aliases, the one-server-only browser stub, Tamagui wiring, and the manifest/dev-reload prepare pipeline.",
+  "keywords": [
+    "browser-extension",
+    "multiplatform.one",
+    "vite-plugin",
+    "webext",
+    "webextension"
+  ],
+  "homepage": "https://multiplatform.one",
+  "bugs": {
+    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one/issues",
+    "email": "support@risserlabs.com"
+  },
+  "license": "Apache-2.0",
+  "author": "BitSpur <support@risserlabs.com> (https://risserlabs.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "directory": "public/vite-plugin-webext"
+  },
+  "source": "src/index.ts",
+  "files": [
+    "lib",
+    "types",
+    "src",
+    "!types/.tsbuildinfo"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "lib/index.cjs",
+  "module": "lib/index.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./types/index.d.ts",
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "chokidar": "^5.0.0",
+    "@multiplatform.one/utils": "6.2.0"
+  },
+  "devDependencies": {
+    "@tamagui/vite-plugin": "2.0.0-rc.41",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.10"
+  },
+  "peerDependencies": {
+    "@tamagui/vite-plugin": "*",
+    "@vitejs/plugin-react": ">=4",
+    "vite": ">=5"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "rm -rf lib types 2>/dev/null && tsc -b --emitDeclarationOnly && tsdown"
+  }
+}