Merge pull request #191 from koloml/feature/build-extension-for-local-philomena

Added build option to build it against local Philomena

.vite/lib/content-scripts.js

@@ -4,7 +4,6 @@ import path from "path";
 import fs from "fs";
 import { SwapDefinedVariablesPlugin } from "../plugins/swap-defined-variables.js";
 import { ScssViteReadEnvVariableFunctionPlugin } from "../plugins/scss-read-env-variable-function.js";
-import { ConvertCjsToAmd } from "../plugins/convert-cjs-to-amd.js";
 
 /**
  * Create the result base file name for the file.
@@ -38,7 +37,7 @@ function wrapScriptIntoIIFE() {
       Object.keys(bundle).forEach(fileName => {
         const file = bundle[fileName];
 
-        file.code = `(()=>{${file.code}})();`
+        file.code = `(() => {\n${file.code}})();`
       });
     }
   }
@@ -189,16 +188,19 @@ export async function buildScriptsAndStyles(buildOptions) {
     configFile: false,
     publicDir: false,
     build: {
-      rolldownOptions: {
+      rollupOptions: {
         input: amdScriptsInput,
         output: {
           dir: buildOptions.outputDir,
           entryFileNames: '[name].js',
           chunkFileNames: 'chunks/[name]-[hash].js',
-          // Vite 8 no longer have support for `amd` format extension depends on
-          // TODO Make plugin to live-convert cjs module require/exports into AMD
-          format: "cjs",
-          codeSplitting: true,
+          // ManifestV3 doesn't allow to use modern ES modules syntax, so we build all content scripts as AMD modules.
+          format: "amd",
+          inlineDynamicImports: false,
+          amd: {
+            // amd-lite requires names even for the entry-point scripts, so we should make sure to add those.
+            autoId: true,
+          },
           // All these modules are not intended to be used outside of extension anyway
           minifyInternalExports: true,
         }
@@ -209,7 +211,6 @@ export async function buildScriptsAndStyles(buildOptions) {
       alias: aliasesSettings,
     },
     plugins: [
-      ConvertCjsToAmd(),
       wrapScriptIntoIIFE(),
       collectDependenciesForManifestBuilding((fileName, dependencies) => {
         pathsReplacementByOutputPath
@@ -227,7 +228,7 @@ export async function buildScriptsAndStyles(buildOptions) {
     configFile: false,
     publicDir: false,
     build: {
-      rolldownOptions: {
+      rollupOptions: {
         input: libsAndStylesInput,
         output: {
           dir: buildOptions.outputDir,

.vite/pack-extension.js

@@ -69,6 +69,12 @@ export async function packExtension(settings) {
   })
 
   switch (process.env.SITE) {
+    case 'localhost':
+      manifest.replaceHostTo('localhost');
+      manifest.replaceBooruNameWith('Philomena');
+      manifest.setGeckoIdentifier('philomena-tagging-assistant@thecore.city');
+      break;
+
     case 'derpibooru':
       manifest.replaceHostTo([
         'derpibooru.org',

.vite/plugins/convert-cjs-to-amd.js

@@ -1,170 +0,0 @@
-/**
- * # CJS → AMD module format converter.
- *
- * Incredibly scary and potentially unstable way to bring back AMD modules on Vite 8+. Converts require() calls into
- * list of dependencies and forms define() function with module name, dependencies and exports.
- *
- * @return {import('vite').Plugin}
- */
-export function ConvertCjsToAmd() {
-  const requireAssignmentsRegExp = /(?:const\s*|,\s*)(?<variable>[a-z0-9_$]+)\s*=\s*require\((?<path>['"][^'"]+['"])\)/iy;
-  const inlineRequireRegExp = /require\((?<path>['"][^'"]+['"])\)\.(?<variable>[a-z0-9_$]+)/gi
-  const exportsDefinitionRegExp = /Object.defineProperty\(exports,['"](?<export_variable>[^'"]+)['"],{enumerable:!\d,get:function\(\){return\s*(?<assigned_variable>[^};]+)}}\)(?<separator>[,;])/gi;
-  const exportVariablePrefix = "$";
-  const exportVariableCollisionsRegExp = /\$[a-z_$]+/g;
-  const amdExportsModule = '"exports"';
-
-  /**
-   * Clears the name of the module to be fit with what we had before.
-   * @param {string} path Path to normalize.
-   * @returns {string} Normalized path.
-   */
-  function normalizeDependencyName(path) {
-    return path.replace(/\.js(['"])$/, "$1");
-  }
-
-  /**
-   * Deduce the potentially unused variable from the current code. Uses special rarely encountered prefix.
-   * @param {string} code Code to parse the used symbols from. Ideally, code should be passed here before any
-   * replacements.
-   * @param {Set<string>} usedSymbols Set of symbols which were already used or found in code.
-   * @returns {string} Not-yet used variable which is likely safe to use.
-   */
-  function findUnusedSpecialVariable(code, usedSymbols) {
-    // Run complete scan of the source code first, to find any potential collisions.
-    if (!usedSymbols.size) {
-      let match;
-
-      exportVariableCollisionsRegExp.lastIndex = 0;
-
-      while (match = exportVariableCollisionsRegExp.exec(code)) {
-        usedSymbols.add(match[0]);
-      }
-    }
-
-    if (!usedSymbols.size || !usedSymbols.has(exportVariablePrefix)) {
-      usedSymbols.add(exportVariablePrefix);
-      return exportVariablePrefix;
-    }
-
-    let count = 0;
-    let resultVariable;
-
-    do {
-      resultVariable = exportVariablePrefix + count.toString(36);
-    } while (count++ < 1000 && usedSymbols.has(resultVariable));
-
-    if (usedSymbols.has(resultVariable)) {
-      throw new Error('Failed to convert CJS to AMD: Failed to find non-colliding variable after 100 tries!');
-    }
-
-    usedSymbols.add(resultVariable);
-    return resultVariable;
-  }
-
-  /**
-   * Main function doing the conversion of one chunk.
-   * @param {import('rolldown').OutputChunk} chunk
-   */
-  function convertChunkToAmd(chunk) {
-    /** @type {string} */
-    let chunkCode = chunk.code;
-    let lastRequireIndex = 0;
-    /**
-     * Saved per-chunk set of used symbols. This set is reused for multiple calls to not parse code multiple times.
-     * @type {Set<string>}
-     */
-    const chunkUsedSymbols = new Set();
-
-    /** @type {Record<string, string>} */
-    let dependenciesVarsToPaths = {};
-
-    // region Extracting `const x = require()` calls from the start of the source code...
-
-    do {
-      requireAssignmentsRegExp.lastIndex = lastRequireIndex;
-      const result = requireAssignmentsRegExp.exec(chunkCode);
-
-      if (!result) {
-        break;
-      }
-
-      dependenciesVarsToPaths[result.groups.variable] = normalizeDependencyName(result.groups.path);
-      lastRequireIndex += result["0"].length;
-    } while (true);
-
-    if (lastRequireIndex > 0) {
-      const characterAfterRequires = chunkCode[lastRequireIndex];
-
-      if (characterAfterRequires !== ';') {
-        throw new Error("Failed to convert CJS to AMD: reached last require() assignment, but list didn't stop.");
-      }
-    }
-
-    // endregion
-
-    // region Finding and replacing inlined `require().x` calls...
-
-    chunkCode = chunkCode.replaceAll(inlineRequireRegExp, (match, dependencyPath, variable) => {
-      const dependencyVariable = findUnusedSpecialVariable(chunkCode, chunkUsedSymbols);
-      dependenciesVarsToPaths[dependencyVariable] = dependencyPath;
-      return `${dependencyVariable}.${variable}`;
-    });
-
-    // endregion
-
-    // region Finding and replacing all exports with AMD exports...
-
-    /** @type {string|undefined} */
-    let chunkExportsVariable;
-
-    exportsDefinitionRegExp.lastIndex = 0;
-
-    chunkCode = chunkCode.replaceAll(exportsDefinitionRegExp, (substring, exportVariable, assignedVariable, separator) => {
-      chunkExportsVariable ??= findUnusedSpecialVariable(chunkCode, chunkUsedSymbols);
-
-      if (!(chunkExportsVariable in dependenciesVarsToPaths)) {
-        dependenciesVarsToPaths = {
-          [chunkExportsVariable]: amdExportsModule,
-          ...dependenciesVarsToPaths,
-        };
-      }
-
-      return `${chunkExportsVariable}.${exportVariable}=${assignedVariable}${separator}`;
-    });
-
-    // endregion
-
-    const normalizedModuleName = normalizeDependencyName(`"${chunk.fileName}"`);
-    const dependenciesVariables = Object.keys(dependenciesVarsToPaths).join(',');
-    const dependenciesPaths = Object.values(dependenciesVarsToPaths).join(',');
-
-    if (lastRequireIndex > 0) {
-      chunkCode = chunkCode.substring(lastRequireIndex + 1);
-    }
-
-    chunk.code = `define(${normalizedModuleName},[${dependenciesPaths}],function(${dependenciesVariables}){${chunkCode}})`;
-  }
-
-  return {
-    name: "koloml:covert-cjs-to-amd",
-    apply: "build",
-    enforce: "pre",
-
-    /**
-     * @param _
-     * @param {Record<string, (import('rolldown').OutputBundle|import('rolldown').OutputChunk)>} bundle
-     */
-    generateBundle(_, bundle) {
-      for (const chunkId in bundle) {
-        const chunkOrAsset = bundle[chunkId];
-
-        if (chunkOrAsset.type === 'asset') {
-          continue;
-        }
-
-        convertChunkToAmd(chunkOrAsset);
-      }
-    }
-  }
-}

package.json

@@ -7,6 +7,7 @@
         "build": "npm run build:popup && npm run build:extension",
         "build:derpibooru": "cross-env SITE=derpibooru npm run build",
         "build:tantabus": "cross-env SITE=tantabus npm run build",
+        "build:local": "cross-env SITE=localhost npm run build",
         "build:popup": "vite build",
         "build:extension": "node build-extension.js",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -24,7 +25,7 @@
         "svelte": "^5.57.2"
     },
     "devDependencies": {
-         "@sveltejs/vite-plugin-svelte": "^7.3.1",
+        "@sveltejs/vite-plugin-svelte": "^6.2.4",
         "@types/chrome": "^0.3.5",
         "@types/node": "^25.9.9",
         "@vitest/coverage-v8": "^4.1.11",
@@ -33,7 +34,7 @@
         "jsdom": "^29.1.1",
         "svelte-check": "^4.7.6",
         "typescript": "^6.0.3",
-        "vite": "^8.3.4",
+        "vite": "^7.3.7",
         "vitest": "^4.1.11"
     },
     "engines": {

vite.config.ts

@@ -1,7 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
-import { ScssViteReadEnvVariableFunctionPlugin } from "./.vite/plugins/scss-read-env-variable-function.js";
-import { SwapDefinedVariablesPlugin } from "./.vite/plugins/swap-defined-variables.js";
+import { ScssViteReadEnvVariableFunctionPlugin } from "./.vite/plugins/scss-read-env-variable-function";
+import { SwapDefinedVariablesPlugin } from "./.vite/plugins/swap-defined-variables";
 
 export default defineConfig(() => {
   return {