quoid · ACTCD · Oct 27, 2023 · Oct 12, 2023 · Oct 12, 2023 · Oct 12, 2023
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -9,6 +9,6 @@ jobs:
     - name: Install modules
       run: npm install
     - name: Run ESLint
-      run: npm run lint-js
+      run: npm run lint:js
     - name: Run Stylelint
-      run: npm run lint-css
+      run: npm run lint:css
diff --git a/entry-app-webview.html b/entry-app-webview.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> -->
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+        <meta name="color-scheme" content="dark">
+        <title>Userscripts App</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/app/main.js"></script>
+    </body>
+</html>
diff --git a/entry-popup.html → entry-ext-action-popup.html b/entry-popup.html → entry-ext-action-popup.html
@@ -9,6 +9,6 @@
     <body>
         <noscript>Please enable Javascript to use this app</noscript>
         <div id="app"></div>
-        <script type="module" src="/src/popup/main.js"></script>
+        <script type="module" src="/src/ext/action-popup/main.js"></script>
     </body>
 </html>
diff --git a/entry-page.html → entry-ext-extension-page.html b/entry-page.html → entry-ext-extension-page.html
@@ -9,7 +9,7 @@
     <body>
         <noscript>Please enable Javascript to use this app</noscript>
         <div id="app"></div>
-        <script type="module" src="/src/page/main.js"></script>
-        <script src="/page/jshint.min.js"></script>
+        <script type="module" src="/src/ext/extension-page/main.js"></script>
+        <script src="extension-page/jshint.min.js"></script>
     </body>
 </html>
diff --git a/etc/App-iOS-WebView.zip b/etc/App-iOS-WebView.zip
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="/src/main.js"></script>
+        <script type="module" src="/src/dev/main.js"></script>
         <script>
             function notice() {
                 if (!app.hasChildNodes()) {

diff --git a/package.json b/package.json
@@ -4,9 +4,11 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
-        "lint-js": "eslint ./",
-        "lint-css": "stylelint '**/*.{css,svelte}'"
+        "build": "pnpm build:app && pnpm build:ext",
+        "build:app": "node scripts/build-app.js",
+        "build:ext": "node scripts/build-ext-v4.js",
+        "lint:js": "eslint ./",
+        "lint:css": "stylelint '**/*.{css,svelte}'"
     },
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.4.3",

diff --git a/public/page/jshint.min.js → public/extension-page/jshint.min.js b/public/page/jshint.min.js → public/extension-page/jshint.min.js
diff --git a/scripts/build-app.js b/scripts/build-app.js
@@ -0,0 +1,36 @@
+/**
+ * @file Build App WebView resources using the Vite JavaScript API
+ * @see {@link https://vitejs.dev/guide/api-javascript.html|JavaScript API}
+ *
+ * All build processes start at the same time due to asynchronous calls
+ * The assets name is irrelevant, just need to determine the entry path
+ */
+
+import {build} from "vite";
+import {svelte} from "@sveltejs/vite-plugin-svelte";
+
+/**
+ * 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}
+ */
+const defineConfig = {
+    base: "./",
+    configFile: false
+};
+
+/**
+ * Build App-Shared WebView resources to xcode dist
+ */
+build({
+    ...defineConfig,
+    plugins: [svelte()],
+    build: {
+        outDir: "xcode/App-Shared/Resources/dist/",
+        copyPublicDir: false,
+        rollupOptions: {
+            input: "entry-app-webview.html"
+        }
+    }
+});
diff --git a/scripts/build-ext-v4.js b/scripts/build-ext-v4.js
@@ -0,0 +1,72 @@
+/**
+ * @file Build Safari extension resources using the Vite JavaScript API
+ * @see {@link https://vitejs.dev/guide/api-javascript.html|JavaScript API}
+ *
+ * Safari supports for modules in background since 16.4
+ * @see {@link https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes#Safari-Extensions}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background#browser_compatibility}
+ * To ensure forward compatibility, background script use independent builds in v4
+ *
+ * Content scripts not support import modules, and due to their privileges and the
+ * speed of injecting user scripts, use a independent build currently
+ *
+ * All build processes start at the same time due to asynchronous calls
+ * The assets name is irrelevant, just need to determine the entry path
+ */
+
+import {build} from "vite";
+import {svelte} from "@sveltejs/vite-plugin-svelte";
+
+/**
+ * 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}
+ */
+const defineConfig = {
+    base: "./",
+    configFile: false
+};
+
+/**
+ * Build shared modules for safari
+ * These multiple entry files will share the same modules
+ * Using a subdirectory avoid emptying other built files
+ */
+build({
+    ...defineConfig,
+    plugins: [svelte()],
+    build: {
+        outDir: "xcode/Ext-Safari/Resources/dist/s/",
+        rollupOptions: {
+            input: [
+                "entry-ext-action-popup.html",
+                "entry-ext-extension-page.html"
+            ]
+        }
+    }
+});
+
+/**
+ * Build independent scripts for safari
+ * Each entry in the array will generate a separate script
+ */
+[
+    {background: "src/ext/background/main.js"},
+    {content: "src/ext/content-scripts/main.js"}
+].forEach(input => {
+    build({
+        ...defineConfig,
+        build: {
+            outDir: "xcode/Ext-Safari/Resources/dist/",
+            emptyOutDir: false,
+            copyPublicDir: false,
+            rollupOptions: {
+                input,
+                output: {
+                    entryFileNames: "[name].js"
+                }
+            }
+        }
+    });
+});
diff --git a/scripts/build-ext-v5.js b/scripts/build-ext-v5.js
@@ -0,0 +1,74 @@
+/**
+ * @file Build Safari extension resources using the Vite JavaScript API
+ * @see {@link https://vitejs.dev/guide/api-javascript.html|JavaScript API}
+ *
+ * Safari supports for modules in background since 16.4
+ * @see {@link https://developer.apple.com/documentation/safari-release-notes/safari-16_4-release-notes#Safari-Extensions}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background#browser_compatibility}
+ *
+ * Content scripts not support import modules, and due to their privileges and the
+ * speed of injecting user scripts, use a independent build currently
+ *
+ * All build processes start at the same time due to asynchronous calls
+ * The assets name is irrelevant, just need to determine the entry path
+ */
+
+import {build} from "vite";
+import {svelte} from "@sveltejs/vite-plugin-svelte";
+
+/**
+ * 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}
+ */
+const defineConfig = {
+    base: "./",
+    configFile: false
+};
+
+/**
+ * Build shared modules for safari
+ * These multiple entry files will share the same modules
+ * Using a subdirectory avoid emptying other built files
+ */
+build({
+    ...defineConfig,
+    plugins: [svelte()],
+    build: {
+        outDir: "xcode/Ext-Safari/Resources/dist/s/",
+        rollupOptions: {
+            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"
+            }
+        }
+    }
+});
+
+/**
+ * Build independent scripts for safari
+ * Each entry in the array will generate a separate script
+ */
+[
+    {content: "src/ext/content-scripts/main.js"}
+].forEach(input => {
+    build({
+        ...defineConfig,
+        build: {
+            outDir: "xcode/Ext-Safari/Resources/dist/",
+            emptyOutDir: false,
+            copyPublicDir: false,
+            rollupOptions: {
+                input,
+                output: {
+                    entryFileNames: "[name].js"
+                }
+            }
+        }
+    });
+});
diff --git a/scripts/preview-app.js b/scripts/preview-app.js
@@ -0,0 +1,34 @@
+/**
+ * @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}
+ */
+const defineConfig = {
+    base: "./",
+    configFile: false
+};
+
+/**
+ * Preview App-Shared WebView resources from xcode dist
+ */
+(async () => {
+    const previewServer = await preview({
+        ...defineConfig,
+        preview: {
+            // port: 4173,
+            open: "entry-app-webview.html"
+        },
+        build: {
+            outDir: "xcode/App-Shared/Resources/dist/"
+        }
+    });
+    previewServer.printUrls();
+})();