add dev mode to playwright tests

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

@@ -8,7 +8,7 @@ const {
   rollupAlias,
   rollupScss,
   rollupLicense,
-} = require('./pipeline.common.plugins');
+} = require('./plugins');
 
 const moduleFormats = ['es', 'esm', 'module'];
 const createMinifiedOutput = (baseOutput) => ({
@@ -53,6 +53,7 @@ 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

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

@@ -5,7 +5,7 @@ const {
   rollupResolve,
   rollupAlias,
   rollupScss,
-} = require('./pipeline.common.plugins');
+} = require('./plugins');
 
 module.exports = (resolve, options) => {
   const { rollup, paths, alias, extractStyles } = options;
@@ -20,6 +20,7 @@ module.exports = (resolve, options) => {
     format: 'esm',
     generatedCode: 'es2015',
     file: path.resolve(distPath, `${file}.js`),
+    plugins: (outputConfig.plugins || []).filter(Boolean),
   };
 
   return {

local/rollup/src/bundle/styles.js

@@ -1,10 +1,5 @@
 const path = require('path');
-const {
-  rollupAlias,
-  rollupResolve,
-  rollupScss,
-  rollupEsBuild,
-} = require('./pipeline.common.plugins');
+const { rollupAlias, rollupResolve, rollupScss, rollupEsBuild } = require('./plugins');
 
 module.exports = (resolve, options) => {
   const { rollup, alias, paths, banner, extractStyles } = options;

local/rollup/src/bundle/types.js

@@ -2,7 +2,8 @@ const fs = require('fs');
 const { basename } = require('path');
 const path = require('path');
 const rollupDts = require('rollup-plugin-dts');
-const { rollupTs } = require('./pipeline.common.plugins');
+
+const { rollupTs } = require('./plugins');
 
 module.exports = (resolve, options) => {
   const { rollup, paths } = options;

local/rollup/src/createRollupConfig.js

@@ -6,10 +6,7 @@ const path = require('path');
 const glob = require('glob');
 const resolve = require('@~local/config/resolve');
 const defaultOptions = require('./defaultOptions');
-const pipelineBuild = require('./pipeline.build');
-const pipelineDev = require('./pipeline.dev');
-const pipelineStyles = require('./pipeline.styles');
-const pipelineTypes = require('./pipeline.types');
+const pipelineDefault = require('./pipeline.default');
 
 const workspaceRoot = path.dirname(execSync('npm root').toString());
 const pkg = require(`${workspaceRoot}/package.json`);
@@ -33,7 +30,6 @@ const resolvePath = (basePath, pathToResolve, appendExt) => {
 
 const mergeAndResolveOptions = (userOptions) => {
   const {
-    mode: defaultMode,
     paths: defaultPaths,
     versions: defaultVersions,
     alias: defaultAlias,
@@ -42,10 +38,10 @@ const mergeAndResolveOptions = (userOptions) => {
     extractTypes: defaultExtractTypes,
     verbose: defaultVerbose,
     banner: defaultBanner,
+    useEsbuild: defaultUseEsbuild,
   } = defaultOptions;
   const {
     project,
-    mode: rawMode,
     paths: rawPaths = {},
     alias: rawAlias = {},
     rollup: rawRollup = {},
@@ -54,6 +50,7 @@ const mergeAndResolveOptions = (userOptions) => {
     extractTypes: rawExtractTypes,
     verbose: rawVerbose,
     banner: rawBanner,
+    useEsbuild: rawUseEsbuild,
   } = userOptions;
   const projectPath = process.cwd();
   const workspaces = pkg.workspaces
@@ -61,12 +58,12 @@ const mergeAndResolveOptions = (userOptions) => {
     .flat();
   const mergedOptions = {
     project: project || path.basename(projectPath),
-    mode: rawMode || defaultMode,
     extractStyles: rawExtractStyles ?? defaultExtractStyles,
     extractTypes: rawExtractTypes ?? defaultExtractTypes,
     verbose: rawVerbose ?? defaultVerbose,
     banner: rawBanner ?? defaultBanner,
     versions: rawVersions ?? defaultVersions,
+    useEsbuild: rawUseEsbuild ?? defaultUseEsbuild,
     paths: {
       ...defaultPaths,
       ...rawPaths,
@@ -104,22 +101,12 @@ const mergeAndResolveOptions = (userOptions) => {
 
 const createConfig = (userOptions = {}) => {
   const options = mergeAndResolveOptions(userOptions);
-  const { project, mode, extractTypes, extractStyles, verbose } = options;
-  const isBuild = mode === 'build';
-  let result;
-
-  if (isBuild) {
-    const styles = extractStyles && pipelineStyles(resolve, options);
-    const types = extractTypes && pipelineTypes(resolve, options);
-    const js = pipelineBuild(resolve, options);
-
-    result = [styles, types, js].flat().filter((build) => !!build);
-  } else {
-    result = [pipelineDev(resolve, options)];
-  }
+  const { project, useEsbuild, verbose } = options;
+  const result = pipelineDefault(resolve, options, useEsbuild);
+  const resultArr = Array.isArray(result) ? result : [result];
 
   if (verbose) {
-    result[0].plugins.push({
+    resultArr[0].plugins.push({
       name: 'PROJECT',
       buildStart() {
         console.log('');
@@ -129,7 +116,7 @@ const createConfig = (userOptions = {}) => {
     });
   }
 
-  return result;
+  return resultArr;
 };
 
 module.exports = createConfig;

local/rollup/src/defaultOptions.js

@@ -1,8 +1,8 @@
 module.exports = {
   project: null,
-  mode: 'build',
   verbose: false,
   banner: null,
+  useEsbuild: false,
   paths: {
     dist: './dist',
     types: './types',

local/rollup/src/pipeline.default.js

@@ -0,0 +1,15 @@
+const bundleScriptDefault = require('./bundle/script.default');
+const bundleScriptEsbuild = require('./bundle/script.esbuild');
+const bundleStyles = require('./bundle/styles');
+const bundleTypes = require('./bundle/types');
+
+module.exports = (resolve, options, esbuild) => {
+  const { extractTypes, extractStyles } = options;
+  const bundleScript = esbuild ? bundleScriptEsbuild : bundleScriptDefault;
+
+  const styles = extractStyles && bundleStyles(resolve, options);
+  const types = extractTypes && bundleTypes(resolve, options);
+  const js = bundleScript(resolve, options);
+
+  return [styles, types, js].flat().filter((build) => !!build);
+};

local/rollup/src/playwright/createPlaywrightRollupConfig.js

@@ -4,35 +4,53 @@ const fs = require('fs');
 const path = require('path');
 const rollupPluginStyles = require('rollup-plugin-styles');
 const rollupPluginServe = require('rollup-plugin-serve');
-// const rollupPluginLivereload = require('rollup-plugin-livereload');
+const rollupPluginLivereload = require('rollup-plugin-livereload');
 
 const rollupPluginHtml = require('./rollup.pluginHtml');
 const createRollupConfig = require('../createRollupConfig');
-// const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
+const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
 
 const portRange = {
   min: 20000,
   max: 60000,
 };
 
-const meta = {
+const paths = {
   dist: './.build',
-  html: './index.html',
   input: './index.browser',
+  html: './index.html',
 };
 
-module.exports = (testDir, mode = 'dev', onListening = null) => {
-  const name = path.basename(testDir);
-  const htmlFilePath = path.resolve(testDir, meta.html);
-  const dist = path.resolve(testDir, meta.dist);
-  const htmlName = `${name}.html`;
-  const { min, max } = portRange;
-  const port = Math.floor(Math.random() * (max - min + 1) + min);
+module.exports = (testDir, useEsbuild, dev) => {
+  const testPaths = Object.keys(paths).reduce((obj, key) => {
+    obj[key] = path.resolve(testDir, paths[key]);
+    return obj;
+  }, {});
 
-  return createRollupConfig({
+  const { min, max } = portRange;
+  const { dist, input, html: htmlPath } = testPaths;
+  const name = path.basename(testDir);
+  const htmlName = `${name}.html`;
+  const port = Math.floor(Math.random() * (max - min + 1) + min);
+  const isDev = !!dev;
+  let server;
+
+  const config = createRollupConfig({
+    useEsbuild,
     project: name,
-    mode,
-    banner: `${testDir}`,
+    banner: testDir,
+    extractStyle: false,
+    extractTypes: false,
+    paths: {
+      dist,
+    },
+    versions: [
+      {
+        format: 'iife',
+        generatedCode: 'es5',
+        minifiedVersion: false,
+      },
+    ],
     // if the import would be 'overlayscrollbars' and the package name is also 'overlayscrollbars' esbuild needs an alias to resolve it correctly
     alias: (workspaceRoot, workspaces, resolvePath) =>
       workspaces.reduce((obj, resolvedPath) => {
@@ -57,55 +75,38 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
         } catch {}
         return obj;
       }, {}),
-    paths: {
-      dist,
-    },
-    versions: [
-      mode === 'dev'
-        ? {
-            format: 'esm',
-            generatedCode: 'es2015',
-            minifiedVersion: false,
-          }
-        : {
-            format: 'iife',
-            generatedCode: 'es5',
-            minifiedVersion: false,
-          },
-    ],
-    extractStyle: false,
     rollup: {
-      input: path.resolve(testDir, meta.input),
+      input,
       context: 'this',
       moduleContext: () => 'this',
       output: {
-        sourcemap: true,
+        sourcemap: isDev,
       },
       plugins: [
         rollupPluginStyles(),
         rollupPluginHtml(`Playwright: ${name}`, htmlName, () =>
-          fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, 'utf8') : null
+          fs.existsSync(htmlPath) ? fs.readFileSync(htmlPath, 'utf8') : null
         ),
-        ...(onListening
-          ? [
-              // rollupAdditionalWatchFiles([htmlFilePath]),
-              rollupPluginServe({
-                contentBase: dist,
-                historyApiFallback: `/${htmlName}`,
-                host: '127.0.0.1',
-                port,
-                onListening,
-              }),
-              /*
-              rollupPluginLivereload({
-                watch: dist,
-                port: port - 1,
-                verbose: false,
-              }),
-              */
-            ]
-          : []),
+        rollupPluginServe({
+          port,
+          contentBase: dist,
+          historyApiFallback: `/${htmlName}`,
+          host: '127.0.0.1',
+          verbose: isDev,
+          onListening: (srv) => {
+            server = srv;
+          },
+        }),
+        isDev && rollupAdditionalWatchFiles([htmlPath]),
+        isDev &&
+          rollupPluginLivereload({
+            watch: dist,
+            port: port - 1,
+            verbose: false,
+          }),
       ],
     },
   });
+
+  return [config, () => server];
 };