switch to playwright test runner, use esbuild for dev builds, switch to array destructuring

2026-06-19 02:20:36 +03:00 · 2022-06-10 10:55:51 +02:00
parent 9d0dd41d7f
commit 35868511ff
156 changed files with 6693 additions and 7793 deletions
@@ -0,0 +1,73 @@
+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 createRollupConfig = require('../rollup/rollup.config');
+const rollupPluginHtml = require('./rollup.pluginHtml');
+const rollupAdditionalWatchFiles = require('./rollup.pluginAdditionalWatchFiles');
+
+const portRange = {
+  min: 20000,
+  max: 60000,
+};
+
+const meta = {
+  dist: './.build',
+  html: './index.html',
+  input: './index.browser',
+};
+
+module.exports = (testDir, 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);
+
+  return createRollupConfig({
+    project: name,
+    mode: 'dev',
+    paths: {
+      dist,
+      src: path.resolve(testDir, './'),
+    },
+    versions: {
+      minified: false,
+      module: false,
+    },
+    rollup: {
+      input: path.resolve(testDir, meta.input),
+      context: 'this',
+      moduleContext: () => 'this',
+      output: {
+        sourcemap: true,
+      },
+      plugins: [
+        rollupPluginStyles(),
+        rollupPluginHtml(`Playwright: ${name}`, htmlName, () =>
+          fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, '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,
+              }),
+            ]
+          : []),
+      ],
+    },
+  });
+};
@@ -0,0 +1,13 @@
+const fs = require('fs');
+
+module.exports = (files) => ({
+  buildStart() {
+    if (files) {
+      files.forEach((file) => {
+        if (fs.existsSync(file)) {
+          this.addWatchFile(file);
+        }
+      });
+    }
+  },
+});
@@ -0,0 +1,102 @@
+const rollupPluginHtml = require('@rollup/plugin-html');
+
+const makeHtmlAttributes = (attributes) => {
+  if (!attributes) {
+    return '';
+  }
+
+  const keys = Object.keys(attributes);
+  // eslint-disable-next-line no-param-reassign
+  // eslint-disable-next-line no-return-assign
+  return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
+};
+
+const genHtmlTemplateFunc = (contentOrContentFn) => ({
+  attributes,
+  files,
+  meta,
+  publicPath,
+  title,
+}) => {
+  const scripts = (files.js || [])
+    .map(
+      ({ fileName }) =>
+        `<script src="${publicPath}${fileName}"${makeHtmlAttributes(attributes.script)}></script>`
+    )
+    .join('\n');
+
+  const links = (files.css || [])
+    .map(
+      ({ fileName }) =>
+        `<link href="${publicPath}${fileName}" rel="stylesheet"${makeHtmlAttributes(
+          attributes.link
+        )}>`
+    )
+    .join('\n');
+
+  const metas = meta.map((input) => `<meta${makeHtmlAttributes(input)}>`).join('\n');
+
+  return `<!doctype html>
+<html${makeHtmlAttributes(attributes.html)}>
+  <head>
+    ${metas}
+    <title>${title}</title>
+    <style>
+      html,
+      body {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+      body {
+        padding: 10px;
+      }
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      * {
+        box-sizing: inherit;
+      }
+      #testResult {
+        display: none;
+        position: fixed;
+        top: 0;
+        right: 0;
+        padding: 5px;
+        background: white;
+      }
+      #testResult.passed {
+        display: block;
+        background: lime;
+      }
+      #testResult.passed::before {
+        content: 'passed';
+      }
+      #testResult.failed {
+        display: block;
+        background: red;
+      }
+      #testResult.failed::before {
+        content: 'failed';
+      }
+    </style>
+    ${links}
+  </head>
+  <body>
+    ${(typeof contentOrContentFn === 'function' ? contentOrContentFn() : contentOrContentFn) || ''}
+    ${scripts}
+    <div id="testResult"></div>
+  </body>
+</html>`;
+};
+
+module.exports = (title, fileName, getHtmlContent) =>
+  rollupPluginHtml({
+    title,
+    fileName,
+    template: genHtmlTemplateFunc(getHtmlContent),
+    meta: [{ charset: 'utf-8' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }],
+  });