fix(test): build configuration for content script

packages/adblocker-e2e-testing-content/index.html

@@ -56,6 +56,6 @@ <h4>Scriptlet</h4>
         </article>
     </main>
 
-    <script src="script.ts"></script>
+    <script src="dist/script.iife.min.js"></script>
 </body>
 </html>

packages/adblocker-e2e-testing-content/package.json

@@ -15,7 +15,8 @@
     "directory": "packages/adblocker-e2e-webpage"
   },
   "scripts": {
-    "lint": "eslint script.ts"
+    "lint": "eslint script.ts",
+    "build": "tsc --build ./tsconfig.json && rollup --config ./rollup.config.ts --configPlugin typescript"
   },
   "bugs": {
     "url": "https://github.com/ghostery/adblocker/issues"

packages/adblocker-e2e-testing-content/rollup.config.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright (c) 2017-present Cliqz GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+export default [
+  {
+    input: './dist/src/script.js',
+    output: {
+      file: './dist/script.iife.min.js',
+      format: 'iife',
+      name: 'script',
+      sourcemap: true,
+    },
+    plugins: [
+      resolve(),
+      terser({
+        output: {
+          comments: false,
+        },
+      }),
+    ],
+  },
+];

packages/adblocker-e2e-testing-content/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "es2020",
-    "outDir": "dist",
+    "outDir": "dist/src",
     "inlineSourceMap": true,
     "isolatedModules": true,
     "noImplicitAny": true,

packages/adblocker-e2e-testing/e2e.ts

@@ -1,8 +1,6 @@
-import { Stats, createReadStream, existsSync, readFileSync, statSync } from 'node:fs';
+import { Stats, createReadStream, existsSync, statSync } from 'node:fs';
 import * as http from 'node:http';
 import * as path from 'node:path';
-import * as crypto from 'node:crypto';
-import ts from 'typescript';
 import { minify } from 'terser';
 
 // Shared types
@@ -27,71 +25,17 @@ export type Result = {
 };
 
 // Server
-enum Extension {
-  TypeScript = 0,
-}
-
-type AssetPipeline = {
-  contentType: string;
-  extension?: Extension;
-};
-
-function getAssetPipeline(file: string): AssetPipeline {
-  const data: AssetPipeline = {
-    contentType: 'text/plain',
-  };
-
+function getContentType(file: string): string {
   switch (path.extname(file)) {
-    case '.ts':
-      data.contentType = 'text/javascript';
-      data.extension = Extension.TypeScript;
-      break;
     case '.js':
-      data.contentType = 'text/javascript';
-      break;
+      return 'text/javascript';
     case '.css':
-      data.contentType = 'text/css';
-      break;
+      return 'text/css';
     case '.html':
-      data.contentType = 'text/html';
-      break;
-  }
-
-  return data;
-}
-
-// Cache compile results
-type TypeScriptCompliationCache = {
-  hash: string;
-  output: string;
-};
-
-const typescriptCompliationCache = new Map<string, TypeScriptCompliationCache>();
-
-function compileTypeScript(key: string, script: string): string {
-  const hash = crypto.createHash('md5').update(script).digest('hex');
-  const cache = typescriptCompliationCache.get(key);
-
-  // Check if cache exists and the origin hash is identical to given content
-  if (cache !== undefined && cache.hash === hash) {
-    return cache.output;
+      return 'text/html';
   }
 
-  const result = ts.transpileModule(script, {
-    compilerOptions: {
-      target: ts.ScriptTarget.ES2018,
-      module: ts.ModuleKind.Preserve,
-      inlineSourceMap: true,
-      lib: ['dom'],
-    },
-  });
-
-  typescriptCompliationCache.set(key, {
-    hash,
-    output: result.outputText,
-  });
-
-  return result.outputText;
+  return 'text/pure';
 }
 
 export function createServer(): http.Server {
@@ -141,23 +85,9 @@ export function createServer(): http.Server {
       return;
     }
 
-    // Check if postprocessing is required for this asset
-    const assetPipeline = getAssetPipeline(assetPath);
-    switch (assetPipeline.extension) {
-      case Extension.TypeScript: {
-        const output = compileTypeScript(assetPath, readFileSync(assetPath, 'utf8'));
-        res.writeHead(200, {
-          'content-type': assetPipeline.contentType,
-          'content-length': output.length,
-        });
-        res.end(output);
-        return;
-      }
-    }
-
     // If postprocessing is not required, handle this as stream
     res.writeHead(200, {
-      'content-type': assetPipeline.contentType,
+      'content-type': getContentType(assetPath),
       'content-length': stats.size,
     });
 

packages/adblocker-e2e-testing/package.json

@@ -37,8 +37,8 @@
     "url": "https://github.com/ghostery/adblocker/issues"
   },
   "dependencies": {
-    "terser": "^5.31.1",
-    "typescript": "^5.4.5"
+    "rollup": "^4.17.2",
+    "terser": "^5.31.1"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -51,8 +51,8 @@
     "mocha": "^10.2.0",
     "nyc": "^17.0.0",
     "rimraf": "^5.0.7",
-    "rollup": "^4.17.2",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.4.5"
   },
   "contributors": [
     {

packages/adblocker-playwright/package.json

@@ -32,7 +32,7 @@
     "clean": "rimraf dist coverage",
     "lint": "eslint adblocker.ts",
     "build": "tsc --build ./tsconfig.json && rollup --config ./rollup.config.ts --configPlugin typescript",
-    "test": "nyc mocha --config ../../.mocharc.json"
+    "test": "yarn playwright install && nyc mocha --config ../../.mocharc.json"
   },
   "bugs": {
     "url": "https://github.com/ghostery/adblocker/issues"