improve playwright coverage

.github/codecov.yml

@@ -15,4 +15,4 @@ flag_management:
   individual_flags:
     - name: overlayscrollbars
       paths:
-        - packages/overlayscrollbars
+        - 'packages/overlayscrollbars/**'

local/config/src/resolve.json

@@ -1,5 +1,5 @@
 {
-  "extensions": [".json", ".js", "jsx", ".mjs", ".ts", ".tsx"],
+  "extensions": [".json", ".js", ".jsx", ".cjs", ".mjs", ".ts", ".tsx"],
   "directories": ["node_modules", "src"],
   "styleExtensions": [".scss", ".sass", ".css"]
 }

local/playwright-tooling/index.d.ts

@@ -1,4 +1,4 @@
 declare module '@~local/playwright-tooling' {
-  export function playwrightRollup(): void;
+  export function playwrightRollup(useEsbuild?: boolean): void;
   export function expectSuccess(page: any): Promise<void>;
 }

local/playwright-tooling/src/collectCoverage.js

@@ -1,22 +1,15 @@
 const fs = require('fs');
 const { basename, dirname, join } = require('path');
-const v8toIstanbul = require('v8-to-istanbul');
 const { tmpCoverageDirectory } = require('@~local/config/playwright.coverage');
 
-module.exports = async (coverageOutputDir, sourceDir, coverage, testfile) => {
-  // eslint-disable-next-line no-restricted-syntax
-  for (const entry of coverage) {
-    process.chdir(sourceDir);
-    const converter = v8toIstanbul('', 0, { source: entry.source });
-    // eslint-disable-next-line no-await-in-loop
-    await converter.load();
-    converter.applyCoverage(entry.functions);
-
+module.exports = async (coverageOutputDir, coverage, testfile) => {
+  if (coverage) {
+    // eslint-disable-next-line no-restricted-syntax
     const coveragePath = join(
       coverageOutputDir,
       `${tmpCoverageDirectory}/${basename(dirname(testfile))}_${Date.now()}.json`
     );
     fs.mkdirSync(dirname(coveragePath), { recursive: true });
-    fs.writeFileSync(coveragePath, JSON.stringify(converter.toIstanbul()));
+    fs.writeFileSync(coveragePath, coverage);
   }
 };

local/playwright-tooling/src/playwrightRollup.js

@@ -54,10 +54,8 @@ const createRollupBundle = async (testDir, useEsbuild, dev) => {
 };
 
 module.exports = (useEsbuild = true) => {
-  const originalCwd = process.cwd();
   let url;
   let close;
-  let output;
 
   const isDev = (config, timeout) =>
     config.globalTimeout === 0 && timeout === 0 && config.workers === 1;
@@ -68,25 +66,20 @@ module.exports = (useEsbuild = true) => {
       test.setTimeout(0);
     }
 
-    ({ close, url, output } = await createRollupBundle(
-      dirname(file),
-      useEsbuild,
-      isDev(config, timeout)
-    ));
+    ({ close, url } = await createRollupBundle(dirname(file), useEsbuild, isDev(config, timeout)));
   });
 
-  test.beforeEach(async ({ page, browserName }, { config, timeout }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(url, { waitUntil: 'domcontentloaded' });
     await page.waitForTimeout(500);
-    if (browserName === 'chromium' && !isDev(config, timeout)) {
-      await page.coverage.startJSCoverage();
-    }
   });
 
   test.afterEach(async ({ page, browserName }, { file, config, timeout }) => {
     if (browserName === 'chromium' && !isDev(config, timeout)) {
-      const coverage = await page.coverage.stopJSCoverage();
-      await collectCoverage(originalCwd, dirname(output), coverage, file);
+      const coverageJSON = await page
+        .evaluate(() => JSON.stringify(window.__coverage__))
+        .catch(() => null);
+      await collectCoverage(process.cwd(), coverageJSON, file);
     }
   });
 

local/rollup/src/bundle/plugins.js

@@ -59,8 +59,9 @@ module.exports = {
           });
     }
   },
-  rollupEsBuild: () =>
+  rollupEsBuild: (sourceMap) =>
     rollupPluginEsBuild({
+      sourceMap,
       include: /\.[jt]sx?$/,
       target: 'es6',
     }),

local/rollup/src/bundle/script.default.js

@@ -53,7 +53,6 @@ module.exports = (resolve, options) => {
         format,
         generatedCode,
         file: typeof filePathOverride === 'function' ? filePathOverride(filePath) : filePath,
-        plugins: (outputConfig.plugins || []).filter(Boolean),
       };
       const output = [baseOutput, minifiedVersion && createMinifiedOutput(baseOutput)].filter(
         Boolean
@@ -72,7 +71,7 @@ module.exports = (resolve, options) => {
           rollupCommonjs(sourcemap, resolve),
           rollupBabel(resolve, generatedCode === 'es2015'),
           ...plugins,
-        ].filter(Boolean),
+        ],
       };
     })
     .flat();

local/rollup/src/bundle/script.esbuild.js

@@ -5,10 +5,11 @@ const {
   rollupResolve,
   rollupAlias,
   rollupScss,
+  rollupLicense,
 } = require('./plugins');
 
 module.exports = (resolve, options) => {
-  const { rollup, paths, alias, extractStyles } = options;
+  const { rollup, paths, alias, extractStyles, banner } = options;
   const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
   const { file, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
   const { dist: distPath } = paths;
@@ -16,11 +17,10 @@ module.exports = (resolve, options) => {
 
   const output = {
     ...outputConfig,
-    sourcemap: true,
+    sourcemap,
     format: 'esm',
     generatedCode: 'es2015',
     file: path.resolve(distPath, `${file}.js`),
-    plugins: (outputConfig.plugins || []).filter(Boolean),
   };
 
   return {
@@ -28,12 +28,13 @@ module.exports = (resolve, options) => {
     output,
     ...rollupOptions,
     plugins: [
+      rollupLicense(banner, sourcemap),
       rollupAlias(alias),
       rollupScss(resolve, sourcemap, extractStyles, false),
-      rollupEsBuild(),
+      rollupEsBuild(sourcemap),
       rollupCommonjs(sourcemap, resolve),
       rollupResolve(resolve),
       ...plugins,
-    ].filter(Boolean),
+    ],
   };
 };

local/rollup/src/bundle/styles.js

@@ -20,7 +20,7 @@ module.exports = (resolve, options) => {
         banner,
         minified
       ),
-      rollupEsBuild(),
+      rollupEsBuild(false),
       rollupResolve(resolve, (module) =>
         resolve.styleExtensions.some((ext) => module.endsWith(ext))
       ),

local/rollup/src/createRollupConfig.js

@@ -84,6 +84,8 @@ const mergeAndResolveOptions = (userOptions) => {
     },
   };
   const { dist, types, styles } = mergedOptions.paths;
+  const pluginFromFn = (plugin) =>
+    typeof plugin === 'function' ? plugin(mergedOptions, workspaceRoot, workspaces) : plugin;
 
   mergedOptions.paths.dist = resolvePath(projectPath, dist);
   mergedOptions.paths.types = resolvePath(projectPath, types);
@@ -95,6 +97,10 @@ const mergeAndResolveOptions = (userOptions) => {
     name: mergedOptions.rollup.output?.name || mergedOptions.project,
     file: mergedOptions.rollup.output?.file || mergedOptions.project.toLocaleLowerCase(),
   };
+  mergedOptions.rollup.plugins =
+    mergedOptions.rollup.plugins?.map(pluginFromFn).filter(Boolean) || [];
+  mergedOptions.rollup.output.plugins =
+    mergedOptions.rollup.output?.plugins?.map(pluginFromFn).filter(Boolean) || [];
 
   return mergedOptions;
 };

local/rollup/src/playwright/createPlaywrightRollupConfig.js

@@ -5,10 +5,12 @@ const path = require('path');
 const rollupPluginStyles = require('rollup-plugin-styles');
 const rollupPluginServe = require('rollup-plugin-serve');
 const rollupPluginLivereload = require('rollup-plugin-livereload');
+const resolve = require('@~local/config/resolve');
 
 const rollupPluginHtml = require('./rollup.pluginHtml');
 const createRollupConfig = require('../createRollupConfig');
 const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
+const rollupIstanbul = require('./rollup.pluginIstanbul');
 
 const portRange = {
   min: 20000,
@@ -80,7 +82,7 @@ module.exports = (testDir, useEsbuild, dev) => {
       context: 'this',
       moduleContext: () => 'this',
       output: {
-        sourcemap: isDev,
+        sourcemap: !isDev,
       },
       plugins: [
         rollupPluginStyles(),
@@ -104,6 +106,11 @@ module.exports = (testDir, useEsbuild, dev) => {
             port: port - 1,
             verbose: false,
           }),
+        !isDev &&
+          rollupIstanbul({
+            include: resolve.extensions.map((extension) => `/**/*${extension}`).flat(),
+            exclude: ['**/node_modules/**', `**/${path.relative(process.cwd(), testDir)}/**`],
+          }),
       ],
     },
   });

local/rollup/src/playwright/rollup.pluginIstanbul.js

@@ -0,0 +1,33 @@
+const { createFilter } = require('@rollup/pluginutils');
+const istanbul = require('istanbul-lib-instrument');
+
+module.exports = (options = {}) => {
+  const filter = createFilter(options.include, options.exclude);
+
+  return {
+    name: 'istanbul',
+    transform(code, id) {
+      if (!filter(id)) {
+        return;
+      }
+
+      const instrumenter = istanbul.createInstrumenter({
+        esModules: true,
+        compact: true,
+        produceSourceMap: true,
+        autoWrap: true,
+        preserveComments: true,
+        ...options.instrumenterConfig,
+      });
+
+      const combinedSourceMap = this.getCombinedSourcemap();
+      const instrumentedCode = instrumenter.instrumentSync(code, id, {
+        ...combinedSourceMap,
+        version: String(combinedSourceMap.version),
+      });
+      const sourceMap = instrumenter.lastSourceMap();
+
+      return { code: instrumentedCode, map: { ...sourceMap, version: Number(sourceMap.version) } };
+    },
+  };
+};