chore: add build scripts (#139)

Author: smeijer

package-lock.json

@@ -1,25 +1,24 @@
 {
   "name": "testing-playground",
   "version": "1.5.0",
-  "description": "",
+  "description": "Simple and complete DOM testing playground that encourage good testing practices.",
   "scripts": {
     "start": "run-s start:client",
-    "start:client": "parcel src/index.html --open",
-    "start:embed": "parcel src/embed.html --open",
-    "build": "cross-env NODE_ENV=production run-s clean build:client build:server build:sw",
-    "build:client": "parcel build src/index.html src/embed.js --dist-dir dist/client",
-    "postbuild:client": "mkdir -p dist/client/public && cp _redirects dist/client/_redirects && cp public/favicon.ico dist/client/favicon.ico && cp public/icon.png dist/client/public/icon.png && cp -r .well-known dist/client/.well-known",
-    "build:server": "cp -r src/lambda/ dist/server",
-    "postbuild:server": "mkdir -p dist/server/server && mv dist/client/index.html dist/server/server/",
-    "build:sw": "workbox generateSW",
-    "lint": "eslint . --quiet --fix",
-    "clean": "rimraf ./dist ./.cache ./.parcel-cache",
+    "start:client": "node ./scripts/build-client",
+    "build": "run-s clean build:*",
+    "build:client": "cross-env NODE_ENV=production node ./scripts/build-client",
+    "build:server": "cross-env NODE_ENV=production node ./scripts/build-lambda",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint . --quiet --fix",
+    "lint:prettier": "prettier . --write",
+    "clean": "run-p clean:*",
+    "clean:cache": "rimraf ./dist ./.cache ./.parcel-cache",
+    "clean:dist": "rimraf ./dist",
     "ci:lint": "eslint .",
     "ci:test": "jest --ci",
     "ci:changelog": "node scripts/changelog.js",
     "test": "jest",
     "test:watch": "jest --watch",
-    "prettier": "prettier . --write",
     "bump:patch": "npm version patch -m 'release: cut the %s release'",
     "bump:minor": "npm version minor -m 'release: cut the %s release'",
     "bump:major": "npm version major -m 'release: cut the %s release'",
@@ -50,6 +49,7 @@
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",
     "@testing-library/user-event": "^11.2.0",
+    "@types/fs-extra": "^9.0.1",
     "babel-eslint": "^10.1.0",
     "conventional-changelog": "^3.1.21",
     "conventional-changelog-config-spec": "^2.1.0",
@@ -58,6 +58,8 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
+    "fs-extra": "^9.0.1",
+    "get-port": "^5.1.1",
     "git-semver-tags": "^4.0.0",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
@@ -71,7 +73,7 @@
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
     "tailwindcss": "^1.4.6",
-    "workbox-cli": "^5.1.3"
+    "workbox-build": "^5.1.3"
   },
   "jest": {
     "verbose": true,

package.json

@@ -9,37 +9,37 @@
   "start_url": "/",
   "icons": [
     {
-      "src": "../public/36-production.png",
+      "src": "36-production.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
     },
     {
-      "src": "../public/48-production.png",
+      "src": "48-production.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
     },
     {
-      "src": "../public/72-production.png",
+      "src": "72-production.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
     },
     {
-      "src": "../public/96-production.png",
+      "src": "96-production.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
     },
     {
-      "src": "../public/144-production.png",
+      "src": "144-production.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
     },
     {
-      "src": "../public/192-production.png",
+      "src": "192-production.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"

public/site.webmanifest

@@ -0,0 +1,98 @@
+const { copy, remove, readFile, writeFile, readdir } = require('fs-extra');
+const { resolve, join } = require('path');
+const { build } = require('./build');
+const { openInBrowser } = require('@parcel/utils');
+const workbox = require('workbox-build');
+
+const hashRegExp = /\.[0-9a-fA-F]{8}\./;
+
+const removeRevisionManifestTransform = async (manifestEntries) => ({
+  manifest: manifestEntries.map((entry) =>
+    hashRegExp.test(entry.url) ? { ...entry, revision: null } : entry,
+  ),
+});
+
+const workboxConfig = {
+  globDirectory: 'dist/client',
+  globPatterns: ['**/*.{html,js,css,png,svg,jpg,gif,json,ico}'],
+  swDest: 'dist/client/sw.js',
+  clientsClaim: true,
+  skipWaiting: true,
+  manifestTransforms: [removeRevisionManifestTransform],
+  ignoreURLParametersMatching: [/.*/],
+};
+
+async function fixWebManifest({ dest }) {
+  // browsers can't detect service-worker updates if the manifest changes name
+  const htmlContent = await readFile(join(dest, 'index.html'), 'utf8');
+  const [, manifestFilename] = htmlContent.match(
+    /<link rel="manifest" href="\/?(site\.[0-9a-fA-F]{8}\.webmanifest)">/,
+  );
+
+  // replace site.e5465fc8.webmanifest with manifest.json
+  const replacer = new RegExp(manifestFilename, 'g');
+  const newContent = htmlContent.replace(replacer, 'manifest.json', 'utf8');
+
+  // fix image paths in manifest.json
+  const iconSrcHashTable = (await readdir(dest))
+    .filter((file) => /\.png/.test(file))
+    .reduce((index, file) => {
+      index[file.replace(hashRegExp, '.')] = file;
+      return index;
+    }, {});
+
+  const manifest = JSON.parse(
+    await readFile(join(dest, manifestFilename), 'utf8'),
+  );
+
+  manifest.icons.forEach((icon) => {
+    icon.src = iconSrcHashTable[icon.src];
+  });
+
+  await Promise.all([
+    // rename manifest file from site.e5465fc8.webmanifest to manifest.json
+    remove(join(dest, manifestFilename)),
+    // write updated html content referring to the renamed manifest
+    writeFile(join(dest, 'index.html'), newContent),
+    // write the fixed manifest json
+    writeFile(
+      join(dest, 'manifest.json'),
+      JSON.stringify(manifest, '', '  '),
+      'utf8',
+    ),
+  ]);
+}
+
+async function main() {
+  const dest = resolve('dist/client');
+  await remove(dest);
+
+  const entries = ['src/index.html', 'src/embed.js'];
+
+  if (process.env.NODE_ENV === 'development') {
+    entries.push('src/embed.html');
+  }
+
+  const parcel = await build({
+    entries,
+    dest: 'dist/client',
+    port: 1234,
+  });
+
+  await fixWebManifest({ dest });
+
+  await workbox.generateSW(workboxConfig);
+
+  await Promise.all([
+    copy('_redirects', join(dest, '_redirects')),
+    copy('public/favicon.ico', join(dest, 'favicon.ico')),
+    copy('public/icon.png', join(dest, 'icon.png')),
+    copy('.well-known', join(dest, '.well-known')),
+  ]);
+
+  if (parcel.watching) {
+    openInBrowser(`http://localhost:${parcel.config.serve.port}`);
+  }
+}
+
+main();

scripts/build-client.js

@@ -0,0 +1,12 @@
+const { copy, remove } = require('fs-extra');
+const { resolve } = require('path');
+
+async function main() {
+  const dest = resolve('dist/server');
+  await remove(dest);
+
+  await copy('src/lambda', dest);
+  await copy('dist/client/index.html', 'dist/server/server/index.html');
+}
+
+main();

scripts/build-lambda.js

@@ -0,0 +1,48 @@
+const { ensureDir } = require('fs-extra');
+const Parcel = require('@parcel/core').default;
+const getPort = require('get-port');
+
+async function build({
+  entries,
+  dest,
+  port,
+  serve = process.env.NODE_ENV !== 'production',
+}) {
+  await ensureDir(dest);
+
+  const config = {
+    entries,
+    distDir: dest,
+  };
+
+  if (serve !== false && port) {
+    config.serve = { port: await getPort({ port }) };
+  } else {
+    config.mode = 'production';
+  }
+
+  const parcel = new Parcel(config);
+
+  return new Promise((resolve, reject) => {
+    const callback = (err, build) => {
+      if (err) {
+        return reject(err);
+      }
+
+      resolve({ build, config, watching: serve });
+    };
+
+    if (serve) {
+      parcel.watch(callback);
+    } else {
+      parcel
+        .run()
+        .then((build) => resolve({ build, config, watching: false }))
+        .catch(reject);
+    }
+  });
+}
+
+module.exports = {
+  build,
+};

scripts/build.js

@@ -17,6 +17,7 @@
 
     <link rel="icon" type="image/png" sizes="192x192" href="../public/192-production.png" />
     <link rel="icon" type="image/png" sizes="96x96" href="../public/96-production.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="../public/48-production.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="../public/32-production.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="../public/16-production.png" />
 

src/index.html

@@ -54,7 +54,7 @@ function handler(event, context, callback) {
         width: maxwidth,
         height: maxheight,
 
-        thumbnail_url: `${host}/public/icon.png`,
+        thumbnail_url: `${host}/icon.png`,
         thumbnail_width: 512,
         thumbnail_height: 512,
 

src/lambda/oembed/oembed.js

@@ -64,7 +64,7 @@ const isLoggingEnabled =
   process.env.NODE_ENV !== 'production' || !!localStorage.getItem('debug');
 
 export function withLogging(reducerFn) {
-  if (isLoggingEnabled) {
+  if (!isLoggingEnabled) {
     return reducerFn;
   }