Bump actions, pmap genPng, fix nodejs version, fix issues with node 14.17

.changeset/swift-shoes-beam.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Bump GitHub action versions and add p-map for gen-og-images CI failure

.github/workflows/changelog.yml

@@ -17,12 +17,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
 

.github/workflows/ci-a11y-vrt.yml

@@ -21,16 +21,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.turbo
@@ -59,18 +59,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Chromatic git history to track changes
 
       - name: Setup Node with v16.13.0
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.13.0
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.turbo

.github/workflows/ci.yml

@@ -9,32 +9,32 @@ on:
 
 jobs:
   build:
-    name: 'Validate with Node v${{ matrix.node_version }}'
+    name: 'Validate with Node v${{ matrix.node-version }}'
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node_version: ['14.17.0', '16.13.0']
+        node-version: ['14.17.0', '16.13.0']
     steps:
       - name: Checkout branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Setup Node with v${{ matrix.node_version }}
+      - name: Setup Node with v${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-          node_version: ${{ matrix.node_version }}
+          node-version: ${{ matrix.node-version }}
           cache: yarn
 
       - name: Restore cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             **/.eslintcache
             **/.turbo
             node_modules/.cache/turbo
             polaris.shopify.com/.next/cache
-          key: ${{ runner.os }}-node${{ matrix.node_version }}-test-v1-${{ github.sha }}
+          key: ${{ runner.os }}-node${{ matrix.node-version }}-test-v1-${{ github.sha }}
           restore-keys: |
-            ${{ runner.os }}-node${{ matrix.node_version }}-test-v1-
+            ${{ runner.os }}-node${{ matrix.node-version }}-test-v1-
 
       - name: Install dependencies
         run: yarn --frozen-lockfile

.github/workflows/non-committable.yml

@@ -9,7 +9,7 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: dorny/paths-filter@v2
         id: filter
         with:

.github/workflows/publish-polaris-for-vscode.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         name: Checkout
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         name: Use Node.js 16.x
         with:
           node-version: 16

.github/workflows/release.yml

@@ -13,10 +13,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
           cache: 'yarn'

.github/workflows/size-limit.yml

@@ -12,8 +12,8 @@ jobs:
     env:
       CI_JOB_NUMBER: 1
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: yarn

.github/workflows/snapit.yml

@@ -39,7 +39,7 @@ jobs:
                 repo: context.repo.repo,
                 pull_number: context.issue.number,
               })
-              
+
               // Pull request from fork
               if (context.payload.repository.full_name !== pullRequest.data.head.repo.full_name) {
                 const errorMessage = '`/snapit` is not supported on pull requests from forked repositories.'
@@ -58,7 +58,7 @@ jobs:
             }
 
       - name: Checkout default branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # issue_comment requires us to checkout the branch
       # https://github.com/actions/checkout/issues/331#issuecomment-1120113003
@@ -78,7 +78,7 @@ jobs:
           fi
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
 

documentation/Nodejs support.md

@@ -23,7 +23,7 @@ The `package.json` engines. This should match the `.github/workflows/ci.yml` and
 The GitHub actions `.github/workflows/ci.yml` file. This should match the `package.json` and list all supported versions.
 
 ```yml
-node_version: ['14.17.0', '16.13.0']
+node-version: ['14.17.0', '16.13.0']
 ```
 
 The `dev.yml` file which creates a local development environment. This should match the `.nvmrc` file.

polaris.shopify.com/package.json

@@ -59,6 +59,7 @@
     "js-yaml": "^4.1.0",
     "lodash.set": "^4.3.2",
     "playroom": "^0.28.0",
+    "p-map": "^5.5.0",
     "marked": "^4.0.16",
     "puppeteer": "^16.0.0",
     "style-loader": "^3.3.1",

polaris.shopify.com/scripts/gen-og-images.mjs

@@ -3,6 +3,7 @@ import matter from 'gray-matter';
 import {existsSync} from 'fs';
 import path from 'path';
 import {writeFile, readFile, mkdir, rm} from 'fs/promises';
+import pMap from 'p-map';
 
 const sitemapPath = path.join(process.cwd(), 'public/sitemap.xml');
 const imgDir = path.join(process.cwd(), 'public/og-images');
@@ -152,21 +153,6 @@ const generateHTML = async (url, slug) => {
   return Buffer.from(html).toString('base64');
 };
 
-const getPNG = async (url, browser) => {
-  const slug = url === '' ? 'home' : url.split('/').at(-1);
-  const imgPath =
-    url.split('/').length > 1 ? url.split('/').slice(0, -1).join('/') : url;
-  const html = await generateHTML(url, slug);
-  const encodedUrl = `data:text/html;charset=utf-8;base64,${html}`;
-  const page = await browser.newPage();
-  await page.goto(encodedUrl, {waitUntil: 'networkidle0'});
-  const image = await page.screenshot();
-  if (!existsSync(`${imgDir}${imgPath}`)) {
-    await mkdir(`${imgDir}${imgPath}`, {recursive: true});
-  }
-  await writeFile(`${imgDir}${imgPath}/${slug}.png`, image);
-};
-
 const genOgImages = async () => {
   if (existsSync(imgDir)) await rm(imgDir, {recursive: true});
   await mkdir(imgDir, {recursive: true});
@@ -181,7 +167,31 @@ const genOgImages = async () => {
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
   });
 
-  const generateImages = urls.map((url) => getPNG(url, browser));
+  const getPNG = async (url) => {
+    try {
+      const slug = url === '' ? 'home' : url.split('/').pop();
+      const imgPath =
+        url.split('/').length > 1 ? url.split('/').slice(0, -1).join('/') : url;
+      const html = await generateHTML(url, slug);
+      const encodedUrl = `data:text/html;charset=utf-8;base64,${html}`;
+      const page = await browser.newPage();
+      await page.goto(encodedUrl, {waitUntil: 'networkidle0'});
+      const image = await page.screenshot();
+      if (!existsSync(`${imgDir}${imgPath}`)) {
+        await mkdir(`${imgDir}${imgPath}`, {recursive: true});
+      }
+      await writeFile(`${imgDir}${imgPath}/${slug}.png`, image);
+      await page.close();
+
+      console.log(`✅ Successfuly generated png for ${url}`);
+    } catch (error) {
+      console.error(`❌ Failed to generate png for ${url}`);
+      throw new Error(error);
+    }
+  };
+
+  const generateImages = await pMap(urls, getPNG, {concurrency: 30});
+
   await Promise.all(generateImages);
 
   await browser.close();

yarn.lock

@@ -5658,6 +5658,14 @@ aggregate-error@^3.0.0:
     clean-stack "^2.0.0"
     indent-string "^4.0.0"
 
+aggregate-error@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-4.0.1.tgz#25091fe1573b9e0be892aeda15c7c66a545f758e"
+  integrity sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==
+  dependencies:
+    clean-stack "^4.0.0"
+    indent-string "^5.0.0"
+
 [email protected]:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/ahocorasick/-/ahocorasick-1.0.2.tgz#9eee93aef9d02bfb476d9b648d9b7a40ef2fd500"
@@ -7668,6 +7676,13 @@ clean-stack@^3.0.1:
   dependencies:
     escape-string-regexp "4.0.0"
 
+clean-stack@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-4.2.0.tgz#c464e4cde4ac789f4e0735c5d75beb49d7b30b31"
+  integrity sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==
+  dependencies:
+    escape-string-regexp "5.0.0"
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -9586,6 +9601,11 @@ [email protected], escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+[email protected], escape-string-regexp@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
+  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
+
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -9596,11 +9616,6 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escape-string-regexp@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
-  integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
-
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -16878,6 +16893,13 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+p-map@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-5.5.0.tgz#054ca8ca778dfa4cf3f8db6638ccb5b937266715"
+  integrity sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==
+  dependencies:
+    aggregate-error "^4.0.0"
+
 p-retry@^4.5.0:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"