chore: add demo build and fix basic dev mode

scripts/build-ext-demo.js

@@ -0,0 +1,53 @@
+/**
+ * @file Build extension pages demonstration using the Vite JavaScript API
+ * @see {@link https://vitejs.dev/guide/api-javascript.html JavaScript API}
+ */
+
+import { build } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { cp, emptyBuildDir, rootDir } from "./utils.js";
+
+/**
+ * Define default vite config options
+ * Disable auto resolving {@link vite.config.js}
+ * @see {@link https://vitejs.dev/config/ Config}
+ * @see {@link https://vitejs.dev/guide/api-javascript.html#inlineconfig InlineConfig}
+ * @type {import("vite").InlineConfig}
+ */
+const defineConfig = {
+	configFile: false,
+	envFile: false,
+	root: await rootDir(),
+	base: "./",
+	mode: "development",
+	define: {
+		"import.meta.env.BROWSER": JSON.stringify("Safari"),
+		"import.meta.env.NATIVE_APP": JSON.stringify("app"),
+		"import.meta.env.SAFARI_PLATFORM": JSON.stringify(
+			process.env.SAFARI_PLATFORM,
+		),
+		"import.meta.env.EXT_DEMO_BUILD": JSON.stringify(true),
+	},
+};
+
+/**
+ * Empty resources directory
+ * Copy public static assets
+ */
+await emptyBuildDir("dist");
+cp("public/ext/shared", "dist");
+
+/** Build shared modules */
+build({
+	...defineConfig,
+	plugins: [svelte()],
+	publicDir: "public/ext/vendor/",
+	build: {
+		outDir: `dist/`,
+		emptyOutDir: false,
+		rollupOptions: {
+			input: ["entry-ext-action-popup.html", "entry-ext-extension-page.html"],
+		},
+		target: "esnext", // top-level await
+	},
+});

scripts/build-ext-safari-15.js

@@ -82,11 +82,6 @@ build({
 });
 
 /** Build shared modules */
-/** @type {import("rollup").InputOption} */
-let input = ["entry-ext-action-popup.html", "entry-ext-extension-page.html"];
-if (process.env.SAFARI_PLATFORM === "ios") {
-	input = ["entry-ext-action-popup.html"];
-}
 build({
 	...defineConfig,
 	plugins: [svelte()],
@@ -95,7 +90,7 @@ build({
 		outDir: `${SAFARI_EXT_RESOURCES}/dist/`,
 		emptyOutDir: false,
 		rollupOptions: {
-			input,
+			input: ["entry-ext-action-popup.html", "entry-ext-extension-page.html"],
 		},
 	},
 });

scripts/build-ext-safari-16.4.js

@@ -85,15 +85,6 @@ build({
 });
 
 /** Build shared modules */
-/** @type {import("rollup").InputOption} */
-let input = {
-	// background: "src/ext/background/main.js",
-	"action-popup": "entry-ext-action-popup.html",
-	"extension-page": "entry-ext-extension-page.html",
-};
-if (process.env.SAFARI_PLATFORM === "ios") {
-	delete input["extension-page"];
-}
 build({
 	...defineConfig,
 	plugins: [svelte()],
@@ -102,7 +93,11 @@ build({
 		outDir: `${SAFARI_EXT_RESOURCES}/dist/`,
 		emptyOutDir: false,
 		rollupOptions: {
-			input,
+			input: {
+				// background: "src/ext/background/main.js",
+				"action-popup": "entry-ext-action-popup.html",
+				"extension-page": "entry-ext-extension-page.html",
+			},
 			output: { entryFileNames: "[name].js" },
 		},
 	},

scripts/preview-ext-demo.js

@@ -0,0 +1,35 @@
+/**
+ * @file Preview App WebView resources using the Vite JavaScript API
+ * @see {@link https://vitejs.dev/guide/api-javascript.html JavaScript API}
+ */
+
+import { preview } from "vite";
+
+/**
+ * Define default vite config options
+ * Disable auto resolving {@link vite.config.js}
+ * @see {@link https://vitejs.dev/config/ Config}
+ * @see {@link https://vitejs.dev/guide/api-javascript.html#inlineconfig configFile}
+ * @type {import("vite").InlineConfig}
+ */
+const defineConfig = {
+	base: "./",
+	configFile: false,
+};
+
+/**
+ * Preview App-Shared WebView resources from xcode dist
+ */
+(async () => {
+	const previewServer = await preview({
+		...defineConfig,
+		preview: {
+			// port: 4173,
+			open: "entry-ext-extension-page.html",
+		},
+		build: {
+			outDir: "dist/",
+		},
+	});
+	previewServer.printUrls();
+})();

src/ext/extension-page/Components/Settings.svelte

@@ -297,6 +297,7 @@
 							{gl(`settings_${item.name}_saving`)}
 						{/if}
 						{#if gemFocused}
+							<!-- Must escape tab nav, otherwise it will cause an infinite loop -->
 							<button tabindex="-1" class="done"
 								>{gl("settings_global_exclude_match_done")}</button
 							>

src/ext/extension-page/main.js

@@ -9,9 +9,32 @@ if (import.meta.env.MODE === "development") {
 	const modules = import.meta.glob("../shared/dev.js", { eager: true });
 	const browser = modules["../shared/dev.js"]["browser"];
 	console.debug("DEV-ENV", import.meta.env, modules, browser);
+	// basic dev mode relies on extension environment simulation
 	if (!window?.browser?.extension) {
 		// assign to window simulation WebExtension APIs
 		window.browser = browser;
+		// pre-fetch i18n resource registration to window
+		const lang = window.navigator.language.replace("-", "_");
+		let url = "/public/ext/shared/_locales/en/messages.json";
+		if (lang.startsWith("zh")) {
+			url = "/public/ext/shared/_locales/zh/messages.json";
+		}
+		// demo build for non-extension environment (gh-pages)
+		if (import.meta.env.EXT_DEMO_BUILD) {
+			url = "/_locales/en/messages.json";
+			if (["zh_HK", "zh_MO", "zh_TW"].includes(lang)) {
+				url = `/_locales/${lang}/messages.json`;
+			} else if (lang.startsWith("zh")) {
+				url = `/_locales/zh/messages.json`;
+			}
+		}
+		try {
+			const response = await fetch(url);
+			const messages = await response.json();
+			window["i18nMessages"] = messages;
+		} catch (error) {
+			console.error("Fetch i18n faild", error);
+		}
 	}
 }
 

src/ext/shared/dev.js

@@ -83,13 +83,19 @@ const files = [
 	...Array.from({ length: 7 }, () => generateFile("js")),
 ];
 
+/** @type {"ios"|"macos"} */
+const platform = "macos";
+
 const _browser = {
 	delay: 200,
-	platform: "macos", // ios || macos
+	platform,
 	runtime: {
 		getURL() {
 			return "https://www.example.com/";
 		},
+		async getPlatformInfo() {
+			return { os: platform };
+		},
 		async sendMessage(message, responseCallback) {
 			const name = message.name;
 			console.info(`Got message: ${name}`);
@@ -475,6 +481,12 @@ const _browser = {
 			addListener: () => undefined,
 		},
 	},
+	i18n: {
+		getMessage(n, s = undefined) {
+			if (!window["i18nMessages"]) return;
+			return window["i18nMessages"]?.[n]?.message.replace("$1", s);
+		},
+	},
 };
 
 async function getRemoteFileContents(url) {