injected: replace rollup with esbuild (#1521)

* injected: replace rollup with esbuild

* fix

* remove suffix

* poc: preserve comments in esbuild (#1565)

* poc: preserve comments in esbuild

* comment

* more test cases

* more test cases

* additional test

Author: shakyShane

CODEOWNERS

@@ -15,7 +15,6 @@ injected/src/features/autofill-password-import.js @duckduckgo/content-scope-scri
 Sources/ @duckduckgo/content-scope-scripts-owners @duckduckgo/apple-devs
 injected/entry-points/android.js @duckduckgo/content-scope-scripts-owners @duckduckgo/android-devs
 injected/entry-points/extension-mv3.js @duckduckgo/content-scope-scripts-owners @kzar @sammacbeth
-injected/entry-points/chrome.js @duckduckgo/content-scope-scripts-owners @kzar @sammacbeth
 injected/entry-points/windows.js @duckduckgo/content-scope-scripts-owners @duckduckgo/team-windows-development
 
 # Test owners

injected/entry-points/chrome.js

@@ -81,7 +81,6 @@ export class Build {
             'android',
             'android-autofill-password-import',
             'chrome-mv3',
-            'chrome',
             'firefox',
         ];
         if (items.includes(name)) {

injected/integration-test/type-helpers.mjs

@@ -3,31 +3,22 @@
   "scripts": {
     "postinstall": "npm run copy-sjcl",
     "copy-sjcl": "node scripts/generateSJCL.js",
+    "build": "npm run build-types && npm run build-locales && npm run bundle-trackers && npm run bundle-entry-points",
     "bundle-config": "node scripts/bundleConfig.mjs",
-    "build": "npm run build-types && npm run build-locales && npm run bundle-trackers && npm run build-firefox && npm run build-chrome && npm run build-apple && npm run build-android && npm run build-windows && npm run build-integration && npm run build-chrome-mv3",
+    "bundle-entry-points": "node scripts/entry-points.js",
+    "build-chrome-mv3": "node scripts/entry-points.js",
     "build-locales": "node scripts/buildLocales.js",
-    "build-firefox": "node scripts/entry-points.js --platform firefox",
-    "build-chrome": "node scripts/entry-points.js --platform chrome",
-    "build-chrome-mv3": "node scripts/entry-points.js --platform chrome-mv3",
-    "build-apple": "node scripts/entry-points.js --platform apple && node scripts/entry-points.js --platform apple-isolated",
-    "build-android": "node scripts/entry-points.js --platform android && node scripts/entry-points.js --platform android-autofill-password-import && node scripts/entry-points.js --platform android-broker-protection",
-    "build-windows": "node scripts/entry-points.js --platform windows",
-    "build-integration": "node scripts/entry-points.js --platform integration",
     "build-types": "node scripts/types.mjs",
     "bundle-trackers": "node scripts/bundleTrackers.mjs --output ../build/tracker-lookup.json",
     "test-unit": "jasmine --config=unit-test/config.json",
-    "test-int": "npm run build-integration && npm run playwright",
+    "test-int": "npm run playwright",
     "test-int-x": "xvfb-run --server-args='-screen 0 1024x768x24' npm run test-int",
     "test": "npm run lint && npm run test-unit && npm run test-int && npm run playwright",
     "serve": "http-server -c-1 --port 3220 integration-test/test-pages",
     "playwright": "playwright test --grep-invert '@screenshots'",
     "playwright-screenshots": "playwright test --grep '@screenshots'",
-    "playwright-headed": "playwright test --headed",
-    "preplaywright": "npm run build-windows && npm run build-apple && npm run build-android",
-    "preplaywright-headed": "npm run build-windows && npm run build-apple && npm run build-android",
     "playwright-e2e": "playwright test -c playwright-e2e.config.js --project duckplayer-e2e",
-    "playwright-e2e-headed": "npm run playwright-e2e -- --headed",
-    "preplaywright-e2e": "npm run build-windows && npm run build-apple"
+    "playwright-e2e-headed": "npm run playwright-e2e -- --headed"
   },
   "type": "module",
   "dependencies": {
@@ -39,18 +30,12 @@
     "@canvas/image-data": "^1.0.0",
     "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#main",
     "@fingerprintjs/fingerprintjs": "^4.5.1",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-replace": "^6.0.2",
     "@types/chrome": "^0.0.308",
     "@types/jasmine": "^5.1.7",
     "@types/node": "^22.13.9",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "fast-check": "^3.23.2",
     "jasmine": "^5.6.0",
-    "minimist": "^1.2.8",
-    "rollup": "^4.34.9",
-    "rollup-plugin-import-css": "^3.5.8",
-    "rollup-plugin-svg-import": "^3.0.0"
+    "minimist": "^1.2.8"
   }
 }

injected/package.json

@@ -54,7 +54,7 @@ export default defineConfig({
             use: { injectName: 'android-autofill-password-import', platform: 'android', ...devices['Galaxy S5'] },
         },
         {
-            name: 'chrome',
+            name: 'chrome-mv3',
             testMatch: [
                 'integration-test/remote-pages.spec.js',
                 'integration-test/cookie.spec.js',
@@ -64,7 +64,7 @@ export default defineConfig({
                 'integration-test/utils.spec.js',
                 'integration-test/web-compat.spec.js',
             ],
-            use: { injectName: 'chrome', platform: 'extension', ...devices['Desktop Chrome'] },
+            use: { injectName: 'chrome-mv3', platform: 'extension', ...devices['Desktop Chrome'] },
         },
         {
             name: 'firefox',
@@ -93,7 +93,7 @@ export default defineConfig({
     webServer: {
         reuseExistingServer: true,
         ignoreHTTPSErrors: true,
-        command: 'npm run serve',
+        command: 'npm run bundle-entry-points && npm run serve',
         port: 3220,
     },
     use: {

injected/playwright.config.js

@@ -1,15 +1,10 @@
-import { postProcess, rollupScript } from './utils/build.js';
+import { bundle } from './utils/build.js';
 import { parseArgs, write } from '../../scripts/script-utils.js';
-import { camelcase } from '../src/utils.js';
-
-const contentScopePath = 'src/content-scope-features.js';
-const contentScopeName = 'contentScopeFeatures';
 
 /**
  * @typedef Build
  * @property {string} input
  * @property {string[]} output
- * @property {boolean} [postProcess] - optional value to post-process an output file
  *
  * @typedef {Record<NonNullable<ImportMeta['injectName']>, Build>} BuildManifest
  */
@@ -22,7 +17,6 @@ const builds = {
     },
     apple: {
         input: 'entry-points/apple.js',
-        postProcess: true,
         output: ['../Sources/ContentScopeScripts/dist/contentScope.js'],
     },
     'apple-isolated': {
@@ -34,11 +28,11 @@ const builds = {
         output: ['../build/android/contentScope.js'],
     },
     'android-broker-protection': {
-        input: 'entry-points/android',
+        input: 'entry-points/android.js',
         output: ['../build/android/brokerProtection.js'],
     },
     'android-autofill-password-import': {
-        input: 'entry-points/android',
+        input: 'entry-points/android.js',
         output: ['../build/android/autofillPasswordImport.js'],
     },
     windows: {
@@ -57,65 +51,33 @@ const builds = {
         input: 'entry-points/extension-mv3.js',
         output: ['../build/chrome-mv3/inject.js'],
     },
-    chrome: {
-        input: 'entry-points/chrome.js',
-        output: ['../build/chrome/inject.js'],
-    },
 };
 
-async function initOther(injectScriptPath, platformName) {
-    const identName = `inject${camelcase(platformName)}`;
-    const injectScript = await rollupScript({
-        scriptPath: injectScriptPath,
-        name: identName,
-        platform: platformName,
-    });
-    const outputScript = injectScript;
-    return outputScript;
-}
-
-/**
- * @param {string} entry
- * @param {string} platformName
- */
-async function initChrome(entry, platformName) {
-    const replaceString = '/* global contentScopeFeatures */';
-    const injectScript = await rollupScript({ scriptPath: entry, platform: platformName });
-    const contentScope = await rollupScript({
-        scriptPath: contentScopePath,
-        name: contentScopeName,
-        platform: platformName,
-    });
-    // Encode in URI format to prevent breakage (we could choose to just escape ` instead)
-    // NB: .replace(/\r\n/g, "\n") is needed because in Windows rollup generates CRLF line endings
-    const encodedString = encodeURI(contentScope.toString().replace(/\r\n/g, '\n'));
-    const outputScript = injectScript.toString().replace(replaceString, '${decodeURI("' + encodedString + '")}');
-    return outputScript;
-}
-
 async function init() {
     // verify the input
-    const requiredFields = ['platform'];
+    const requiredFields = [];
     const args = parseArgs(process.argv.slice(2), requiredFields);
-    const build = builds[args.platform];
-
-    if (!build) {
-        throw new Error('unsupported platform: ' + args.platform);
-    }
 
-    let output;
-    if (args.platform === 'chrome') {
-        output = await initChrome(build.input, args.platform);
-    } else {
-        output = await initOther(build.input, args.platform);
-        if (build.postProcess) {
-            const processResult = await postProcess(output);
-            output = processResult.code;
+    // if a platform was given as an argument, just build that platform
+    if (args.platform) {
+        const build = builds[args.platform];
+        if (!build) {
+            throw new Error('unsupported platform: ' + args.platform);
         }
+        const output = await bundle({ scriptPath: build.input, platform: args.platform });
+
+        // bundle and write the output
+        write([build.output], output);
+
+        return;
     }
 
-    // bundle and write the output
-    write([build.output], output);
+    // otherwise, just build them all
+    for (const [injectName, build] of Object.entries(builds)) {
+        const output = await bundle({ scriptPath: build.input, platform: injectName });
+        write(build.output, output);
+        console.log('✅', injectName, build.output[0]);
+    }
 }
 
 init();