add dev mode to playwright tests

local/rollup/src/bundle/babel.config.es2015.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        bugfixes: true,
+        targets: {
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+};

local/rollup/src/bundle/babel.config.es5.js

@@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        targets: {
+          firefox: '54',
+          chrome: '58',
+          ie: '11',
+          esmodules: false,
+        },
+      },
+    ],
+  ],
+};

local/rollup/src/bundle/plugins.js

@@ -0,0 +1,122 @@
+const path = require('path');
+const sass = require('sass');
+const postcss = require('postcss');
+const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+const { nodeResolve: rollupPluginResolve } = require('@rollup/plugin-node-resolve');
+const { babel: rollupBabelInputPlugin } = require('@rollup/plugin-babel');
+const rollupPluginScss = require('rollup-plugin-scss');
+const rollupPluginIgnoreImport = require('rollup-plugin-ignore-import');
+const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
+const rollupPluginAlias = require('@rollup/plugin-alias');
+const rollupPluginTs = require('rollup-plugin-typescript2');
+const { default: rollupPluginEsBuild } = require('rollup-plugin-esbuild');
+const rollupPluginLicense = require('rollup-plugin-license');
+const babelConfigEs5 = require('./babel.config.es5');
+const babelConfigEs6 = require('./babel.config.es2015');
+
+const normalizePath = (pathName) =>
+  pathName ? pathName.split(path.sep).join(path.posix.sep) : pathName;
+
+module.exports = {
+  rollupAlias: (aliasEntries) =>
+    rollupPluginAlias({
+      entries: aliasEntries,
+    }),
+  rollupCommonjs: (sourcemap, resolve) =>
+    rollupPluginCommonjs({
+      sourceMap: sourcemap,
+      extensions: resolve.extensions,
+    }),
+  rollupResolve: (resolve, resolveOnly) =>
+    rollupPluginResolve({
+      mainFields: ['browser', 'umd:main', 'module', 'main'],
+      moduleDirectories: resolve.directories,
+      extensions: resolve.extensions,
+      ignoreSideEffectsForRoot: true,
+      ...(resolveOnly ? { resolveOnly } : {}),
+    }),
+  rollupScss: (resolve, sourceMap, extract, output, banner, minified) => {
+    if (extract) {
+      return output
+        ? rollupPluginScss({
+            output,
+            sourceMap,
+            sass,
+            prefix: banner
+              ? `/*! \r\n${banner
+                  .replace(/\r\n/g, '\r')
+                  .replace(/\n/g, '\r')
+                  .split(/\r/)
+                  .map((line) => ` * ${line}\r\n`)
+                  .join('')} */`
+              : undefined,
+            processor: () => postcss([autoprefixer()].concat(minified ? cssnano() : [])),
+          })
+        : rollupPluginIgnoreImport({
+            extensions: resolve.styleExtensions,
+            body: 'export default undefined;',
+          });
+    }
+  },
+  rollupEsBuild: () =>
+    rollupPluginEsBuild({
+      include: /\.[jt]sx?$/,
+      target: 'es6',
+    }),
+  rollupBabel: (resolve, es6) =>
+    rollupBabelInputPlugin({
+      ...(es6 ? babelConfigEs6 : babelConfigEs5),
+      assumptions: {
+        enumerableModuleMeta: false,
+        constantReexports: true,
+        iterableIsArray: true,
+        objectRestNoSymbols: true,
+        noNewArrows: true,
+        noClassCalls: true,
+        ignoreToPrimitiveHint: true,
+        ignoreFunctionLength: true,
+        // privateFieldsAsProperties: true,
+        // setPublicClassFields: true,
+        setSpreadProperties: true,
+        pureGetters: true,
+      },
+      plugins: [
+        '@babel/plugin-transform-runtime',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        ['@babel/plugin-proposal-private-methods', { loose: true }],
+      ],
+      babelHelpers: 'runtime',
+      shouldPrintComment: (comment) => /@__PURE__/.test(comment),
+      caller: {
+        name: 'babel-rollup-build',
+      },
+      extensions: resolve.extensions,
+    }),
+  rollupTs: (input, declaration) =>
+    rollupPluginTs({
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration,
+          emitDeclarationOnly: declaration,
+          declarationMap: declaration,
+        },
+        // files to include / exclude from typescript .d.ts generation
+        include: [`${normalizePath(path.dirname(path.resolve(input)))}/**/*`],
+        exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
+      },
+      clean: true,
+      // files to include / exclude from the plugin
+      include: ['*.ts+(|x)', '**/*.ts+(|x)'],
+      exclude: ['node_modules', '**/node_modules/*', '*.d.ts', '**/*.d.ts'],
+    }),
+  rollupLicense: (content, sourceMap) =>
+    content &&
+    rollupPluginLicense({
+      sourcemap: sourceMap,
+      banner: {
+        content,
+        commentStyle: 'ignored',
+      },
+    }),
+};

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

@@ -0,0 +1,79 @@
+const path = require('path');
+const { terser: rollupTerser } = require('rollup-plugin-terser');
+const {
+  rollupBabel,
+  rollupTs,
+  rollupCommonjs,
+  rollupResolve,
+  rollupAlias,
+  rollupScss,
+  rollupLicense,
+} = require('./plugins');
+
+const moduleFormats = ['es', 'esm', 'module'];
+const createMinifiedOutput = (baseOutput) => ({
+  ...baseOutput,
+  compact: true,
+  file: baseOutput.file.replace('.js', '.min.js'),
+  sourcemap: false,
+  plugins: [
+    ...(baseOutput.plugins || []),
+    rollupTerser({
+      ecma: baseOutput.generatedCode === 'es2015' ? 2015 : 5,
+      safari10: true,
+      compress: {
+        evaluate: false,
+        module: moduleFormats.includes(baseOutput.format),
+        passes: 3,
+      },
+    }),
+  ],
+});
+
+module.exports = (resolve, options) => {
+  const { rollup, paths, versions, alias, extractStyles, banner } = options;
+  const { output: rollupOutput, input, plugins = [], ...rollupOptions } = rollup;
+  const { name, file, globals, exports, sourcemap: rawSourcemap, ...outputConfig } = rollupOutput;
+  const { dist: distPath } = paths;
+  const sourcemap = rawSourcemap;
+
+  return versions
+    .map(({ format, generatedCode, file: filePathOverride, outputSuffix, minifiedVersion }) => {
+      const needsGlobals = format === 'umd' || format === 'iife';
+      const filePath = path.resolve(distPath, `${file}${outputSuffix || ''}.js`);
+
+      const baseOutput = {
+        ...outputConfig,
+        ...(needsGlobals && {
+          name,
+          globals,
+          exports,
+        }),
+        sourcemap,
+        format,
+        generatedCode,
+        file: typeof filePathOverride === 'function' ? filePathOverride(filePath) : filePath,
+        plugins: (outputConfig.plugins || []).filter(Boolean),
+      };
+      const output = [baseOutput, minifiedVersion && createMinifiedOutput(baseOutput)].filter(
+        Boolean
+      );
+
+      return {
+        input,
+        output,
+        ...rollupOptions,
+        plugins: [
+          rollupLicense(banner, sourcemap),
+          rollupAlias(alias),
+          rollupScss(resolve, sourcemap, extractStyles, false),
+          rollupTs(input),
+          rollupResolve(resolve),
+          rollupCommonjs(sourcemap, resolve),
+          rollupBabel(resolve, generatedCode === 'es2015'),
+          ...plugins,
+        ].filter(Boolean),
+      };
+    })
+    .flat();
+};

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

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

local/rollup/src/bundle/styles.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const { rollupAlias, rollupResolve, rollupScss, rollupEsBuild } = require('./plugins');
+
+module.exports = (resolve, options) => {
+  const { rollup, alias, paths, banner, extractStyles } = options;
+  const { output: rollupOutput, input } = rollup;
+  const { file, sourcemap } = rollupOutput;
+  const { styles: stylesPath } = paths;
+  const ogWrite = process.stdout.write;
+
+  const pipeline = (cssFilename, minified) => ({
+    input,
+    plugins: [
+      rollupAlias(alias),
+      rollupScss(
+        resolve,
+        sourcemap && !minified,
+        extractStyles,
+        path.resolve(stylesPath, cssFilename),
+        banner,
+        minified
+      ),
+      rollupEsBuild(),
+      rollupResolve(resolve, (module) =>
+        resolve.styleExtensions.some((ext) => module.endsWith(ext))
+      ),
+      {
+        generateBundle() {
+          process.stdout.write = () => {
+            process.stdout.write = ogWrite;
+          };
+        },
+        writeBundle() {
+          process.stdout.write = ogWrite;
+        },
+      },
+    ],
+  });
+
+  return [pipeline(`${file}.css`), pipeline(`${file}.min.css`, true)];
+};

local/rollup/src/bundle/types.js

@@ -0,0 +1,53 @@
+const fs = require('fs');
+const { basename } = require('path');
+const path = require('path');
+const rollupDts = require('rollup-plugin-dts');
+
+const { rollupTs } = require('./plugins');
+
+module.exports = (resolve, options) => {
+  const { rollup, paths } = options;
+  const { output: rollupOutput, input } = rollup;
+  const { file } = rollupOutput;
+  const { types: typesPath } = paths;
+  const dtsOutput = path.resolve(typesPath, `${file}.d.ts`);
+
+  return [
+    {
+      input,
+      onwarn: (warning, warn) => {
+        if (warning.code !== 'EMPTY_BUNDLE') {
+          warn(warning);
+        }
+      },
+      output: {
+        file: path.resolve(typesPath, `${file}`),
+      },
+      plugins: [rollupTs(input, true)],
+    },
+    {
+      input: path.join(typesPath, `${basename(input).replace('.ts', '.d.ts')}`),
+      output: {
+        file: dtsOutput,
+      },
+      plugins: [
+        rollupDts.default({
+          respectExternal: true,
+          compilerOptions: {
+            baseUrl: typesPath,
+          },
+        }),
+        {
+          writeBundle() {
+            const filesAndDirs = fs.readdirSync(typesPath);
+            filesAndDirs.forEach((fileOrDir) => {
+              if (basename(fileOrDir) !== basename(dtsOutput)) {
+                fs.rmSync(path.join(typesPath, fileOrDir), { recursive: true });
+              }
+            });
+          },
+        },
+      ],
+    },
+  ];
+};