feat: migrate to ESM and update dependencies

* Bump to Node 18.16.0
* Migrate to ESM instead of CJS
* Bump all dependencies
* Migrate to yarn berry
* Add more fonts to the docker images

BREAKING CHANGE: migrate to ESM

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   node-standalone:
     docker:
-      - image: cimg/node:18.3.0
+      - image: cimg/node:18.16.0
 
 jobs:
   deps-install:
@@ -12,19 +12,20 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - yarn-cache-node18-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
-            - yarn-cache-node18-{{ checksum "package.json" }}
-            - yarn-cache-node18
+            - yarn2-cache-node18-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
+            - yarn2-cache-node18-{{ checksum "package.json" }}
+            - yarn2-cache-node18
       - run:
           name: Install depdencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+          command: yarn install --immutable
       - save_cache:
-          key: yarn-cache-node18-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
+          key: yarn2-cache-node18-{{ checksum "package.json" }}-{{ checksum "yarn.lock" }}
           paths:
-            - ~/.cache/yarn
+            - ~/project/.yarn/cache
       - persist_to_workspace:
           root: ~/project
           paths:
+            - .yarn
             - node_modules
 
   validate-project:

.dockerignore

@@ -1,2 +1,11 @@
 /build
 /node_modules
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.eslintrc

@@ -2,7 +2,7 @@
     "root": true,
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
-        "ecmaVersion": 2019,
+        "ecmaVersion": 2022,
         "sourceType": "module",
         "warnOnUnsupportedTypeScriptVersion": true
     },
@@ -63,5 +63,9 @@
         "no-useless-constructor": "off",
         "@typescript-eslint/no-useless-constructor": "warn"
     },
-    "settings": { "import/resolver": { "node": { "extensions": [".mjs", ".csj", ".js", ".ts", ".ts", ".json"] } } }
+    "settings": {
+        "import/resolver": {
+            "typescript": {}
+        }
+    }
 }

.github/workflows/docker-publish.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.3.0'
+          node-version: '18.16.0'
 
       - name: Install dependencies
         run: yarn --frozen-lockfile
@@ -81,9 +81,6 @@ jobs:
       - name: Build chromium image
         run: docker build . --file docker/chromium/Dockerfile --platform linux/arm64 --tag $IMAGE_CHROMIUM
 
-      - name: Log into registry
-        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u $DOCKER_LOGIN --password-stdin
-
       - name: Push chromium image
         run: |
           IMAGE_ID=appvantage/$IMAGE_NAME

.gitignore

@@ -1,2 +1,11 @@
 /build
 /node_modules
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

docker/chrome/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.3.0-bullseye-slim as build
+FROM node:18.16.0-bullseye-slim as build
 
 RUN apt-get update \
     && apt-get install -y --no-install-recommends curl \
@@ -9,9 +9,10 @@ WORKDIR /usr/local/app
 ENV NODE_ENV=development
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
-COPY yarn.lock package.json ./
+COPY .yarn ./.yarn
+COPY yarn.lock package.json .yarnrc.yml ./
 
-RUN yarn install --frozen-lockfile
+RUN yarn install --immutable
 
 COPY tsconfig.json ./
 COPY src ./src
@@ -22,12 +23,12 @@ ENV NODE_ENV=production
 
 # install dependencies with frozen lockfile
 # then clean with node prune
-RUN yarn install --frozen-lockfile --production
+RUN yarn install --immutable
 
 # install node prune
 RUN curl -sf https://gobinaries.com/tj/node-prune | sh
 
-FROM node:18.3.0-bullseye-slim
+FROM node:18.16.0-bullseye-slim
 
 RUN apt-get update \
      && apt-get install -y wget gnupg ca-certificates procps libxss1 \
@@ -41,7 +42,7 @@ RUN apt-get update \
      # but that seems too easy to get out of date.
      && apt-get install -y google-chrome-stable \
      # Font installation, support chinese font characters for now
-     && apt-get install -y fonts-wqy-zenhei \
+     && apt-get install -y fonts-wqy-zenhei fonts-indic fonts-noto fonts-noto-cjk \
      && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /usr/local/app
@@ -51,6 +52,8 @@ ENV NODE_ENV=production
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome
 
 COPY --from=build /usr/local/app/node_modules ./node_modules
+COPY --from=build /usr/local/app/.yarn ./.yarn
 COPY --from=build /usr/local/app/build ./
+COPY yarn.lock package.json .yarnrc.yml ./
 
 CMD node index.js

docker/chromium/Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/arm64 node:18.3.0-bullseye-slim as build
+FROM --platform=linux/arm64 node:18.16.0-bullseye-slim as build
 
 RUN apt-get update \
     && apt-get install -y --no-install-recommends curl \
@@ -9,9 +9,10 @@ WORKDIR /usr/local/app
 ENV NODE_ENV=development
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 
-COPY yarn.lock package.json ./
+COPY .yarn ./.yarn
+COPY yarn.lock package.json .yarnrc.yml ./
 
-RUN yarn install --frozen-lockfile
+RUN yarn install --immutable
 
 COPY tsconfig.json ./
 COPY src ./src
@@ -22,12 +23,12 @@ ENV NODE_ENV=production
 
 # install dependencies with frozen lockfile
 # then clean with node prune
-RUN yarn install --frozen-lockfile --production
+RUN yarn install --immutable
 
 # install node prune
 RUN curl -sf https://gobinaries.com/tj/node-prune | sh
 
-FROM --platform=linux/arm64 node:18.3.0-bullseye-slim
+FROM --platform=linux/arm64 node:18.16.0-bullseye-slim
 
 RUN apt-get update \
      && apt-get install -y wget gnupg ca-certificates procps libxss1 \
@@ -37,17 +38,18 @@ RUN apt-get update \
      # thus we use chromium for this
      && apt-get install -y chromium \
      # Font settings, currently support for chinese characters
-     && apt-get install -y fonts-wqy-zenhei \
+     && apt-get install -y fonts-wqy-zenhei fonts-indic fonts-noto fonts-noto-cjk  \
      && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /usr/local/app
 
 ENV PORT=3000
 ENV NODE_ENV=production
-# ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 
 COPY --from=build /usr/local/app/node_modules ./node_modules
+COPY --from=build /usr/local/app/.yarn ./.yarn
 COPY --from=build /usr/local/app/build ./
+COPY yarn.lock package.json .yarnrc.yml ./
 
 CMD node index.js

lint-commits.js

@@ -1,5 +1,5 @@
-const { Octokit } = require('@octokit/rest');
-const execa = require('execa');
+import { Octokit } from '@octokit/rest';
+import { execa } from 'execa';
 
 const git = async (...args) => {
     const { stdout } = await execa('git', args);

package.json

@@ -5,39 +5,42 @@
         "node": ">=18.2"
     },
     "license": "MIT",
+    "type": "module",
     "scripts": {
         "lint": "eslint . --ext .js,.ts",
         "lint:fix": "yarn lint --fix",
         "build": "tsc",
         "prepare": "husky install"
     },
     "devDependencies": {
-        "@commitlint/cli": "^17.0.2",
-        "@commitlint/config-conventional": "^17.0.2",
-        "@octokit/rest": "^18.5.6",
-        "@types/express": "^4.17.12",
-        "@types/k6": "^0.37.0",
-        "@types/lodash": "^4.14.170",
-        "@types/node": "^17.0.41",
-        "@types/puppeteer": "^5.4.3",
-        "@typescript-eslint/eslint-plugin": "^5.27.1",
-        "@typescript-eslint/parser": "^5.27.1",
-        "eslint": "^8.17.0",
+        "@commitlint/cli": "^17.6.3",
+        "@commitlint/config-conventional": "^17.6.3",
+        "@octokit/rest": "^19.0.11",
+        "@types/express": "^4.17.17",
+        "@types/k6": "^0.44.1",
+        "@types/lodash": "^4.14.195",
+        "@types/node": "^20.2.5",
+        "@types/puppeteer": "^7.0.4",
+        "@typescript-eslint/eslint-plugin": "^5.59.8",
+        "@typescript-eslint/parser": "^5.59.8",
+        "eslint": "^8.41.0",
         "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "^2.23.4",
-        "eslint-plugin-prettier": "^4.0.0",
-        "execa": "^5.0.1",
-        "prettier": "^2.3.0",
-        "semantic-release": "^19.0.3",
-        "typescript": "^4.7.3"
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-import-resolver-typescript": "^3.5.5",
+        "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-prettier": "^4.2.1",
+        "execa": "^7.1.1",
+        "prettier": "^2.8.8",
+        "semantic-release": "^21.0.2",
+        "typescript": "^5.0.4"
     },
     "dependencies": {
         "compression": "^1.7.4",
-        "express": "^4.17.1",
-        "husky": "^8.0.1",
+        "express": "^4.18.2",
+        "husky": "^8.0.3",
         "lodash": "^4.17.21",
         "morgan": "^1.10.0",
-        "puppeteer": "^14.3.0"
-    }
+        "puppeteer": "^20.4.0"
+    },
+    "packageManager": "[email protected]"
 }

src/app.ts

@@ -1,8 +1,8 @@
 import compression from 'compression';
 import express from 'express';
 import morgan from 'morgan';
-import { getBrowser } from './browser';
-import render from './render';
+import { getBrowser } from './browser.js';
+import render from './render.js';
 
 const app = express();
 

src/browser.ts

@@ -6,7 +6,7 @@ let instancePromise: Promise<puppeteer.Browser> | null = null;
 
 const launchBrowser = async (): Promise<puppeteer.Browser> =>
     puppeteer.launch({
-        headless: true,
+        headless: 'new',
         args: ['--disable-gpu', '--no-sandbox', '--disable-setuid-sandbox'],
     });
 

src/index.ts

@@ -1,5 +1,5 @@
-import app from './app';
-import { closeBrowser } from './browser';
+import app from './app.js';
+import { closeBrowser } from './browser.js';
 
 const port = parseInt(process.env.PORT || '3000', 10);
 

src/render.ts

@@ -1,6 +1,6 @@
-import { merge } from 'lodash/fp';
+import merge from 'lodash/fp/merge.js';
 import puppeteer from 'puppeteer';
-import { getBrowser } from './browser';
+import { getBrowser } from './browser.js';
 
 export type RenderOptions = {
     emulateScreenMedia: boolean;

tsconfig.json

@@ -1,18 +1,18 @@
 {
+    "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
-        "target": "es2020",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "target": "ES2022",
+        "lib": ["ESNext"],
         "outDir": "build",
         "allowJs": true,
         "skipLibCheck": true,
         "strict": false,
         "forceConsistentCasingInFileNames": true,
         "esModuleInterop": true,
-        "module": "commonjs",
-        "moduleResolution": "node",
+        "module": "ESNext",
+        "moduleResolution": "NodeNext",
         "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve"
+        "isolatedModules": true
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules", "build"]