Vendor workerbox to fix signals esm issue in some environments (#1155)

Author: silesky

.buildkite/pipeline.yml

@@ -140,6 +140,8 @@ steps:
       - HUSKY=0 yarn install --immutable
       - echo "--- Build bundles"
       - yarn turbo run --filter='./packages/signals/*' build
+      - echo "--- Assert Workerbox Up-to-Date"
+      - yarn workspace @segment/analytics-signals run assert-workerbox-built
       - echo "+++ Run Lint"
       - yarn turbo run --filter='./packages/signals/*' lint
       - echo "+++ Run Tests"

.changeset/nasty-drinks-nail.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-signals': minor
+---
+
+- Fix npm installation esm error by vendoring esm-only module workerbox

.gitignore

@@ -31,7 +31,7 @@ reports/*
 
 .changelog
 .turbo
-/test-results/
+test-results/
 playwright-report/
 playwright/.cache/
 tmp.tsconfig.json

packages/signals/signals-integration-tests/playwright.config.ts

@@ -34,10 +34,8 @@ const config: PlaywrightTestConfig = {
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'on',
   },
 
   /* Configure projects for major browsers */

packages/signals/signals-integration-tests/src/helpers/base-page-object.ts

@@ -231,9 +231,7 @@ export class BasePage {
           },
           body: JSON.stringify({ foo: 'bar' }),
           ...request,
-        })
-          .then(console.log)
-          .catch(console.error)
+        }).catch(console.error)
       },
       { url, request }
     )

packages/signals/signals-integration-tests/src/helpers/log-console.ts

@@ -2,6 +2,9 @@ import { Page } from '@playwright/test'
 
 export const logConsole = (page: Page) => {
   page.on('console', (msg) => {
-    console.log(`[${msg.type()}]`, msg.text())
+    console.log(`console.${msg.type()}:`, msg.text())
+  })
+  page.on('pageerror', (error) => {
+    console.error('Page error:', error)
   })
 }

packages/signals/signals/.lintstagedrc.js

@@ -1 +1,5 @@
-module.exports = require("@internal/config").lintStagedConfig
+module.exports = {
+  ...require("@internal/config").lintStagedConfig,
+  'src/lib/workerbox/*.{js,ts,html}': ['yarn workerbox']
+}
+

packages/signals/signals/package.json

@@ -32,6 +32,8 @@
     "build:cjs": "yarn tsc -p tsconfig.build.json --outDir ./dist/cjs --module commonjs",
     "build:bundle": "NODE_ENV=production yarn run webpack",
     "build:bundle-dev": "NODE_ENV=development yarn run webpack",
+    "workerbox": "node scripts/build-workerbox.js",
+    "assert-workerbox-built": "sh scripts/assert-workerbox-built.sh",
     "watch": "yarn concurrently 'yarn build:bundle-dev --watch' 'yarn build:esm --watch'",
     "version": "sh scripts/version.sh",
     "watch:test": "yarn test --watch",
@@ -44,8 +46,7 @@
   "dependencies": {
     "@segment/analytics-generic-utils": "1.2.0",
     "idb": "^8.0.0",
-    "tslib": "^2.4.1",
-    "workerboxjs": "^6.1.1"
+    "tslib": "^2.4.1"
   },
   "peerDependencies": {
     "@segment/analytics-next": ">1.72.0"
@@ -60,6 +61,7 @@
     "@internal/config-webpack": "workspace:^",
     "@internal/test-helpers": "workspace:^",
     "fake-indexeddb": "^6.0.0",
+    "minify": "^11.4.1",
     "node-fetch": "^2.6.7"
   }
 }

packages/signals/signals/scripts/assert-workerbox-built.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+# A CI script to ensure people remember to rebuild workerbox related files if workerbox changes
+
+node scripts/build-workerbox.js
+# Check for changes in the workerbox directory
+changed_files=$(git diff --name-only | grep 'lib/workerbox')
+
+# Check for changes in the workerbox directory
+if [ -n "$changed_files" ]; then
+  echo "Error: Changes detected in the workerbox directory. Please commit the changed files:"
+  echo "$changed_files"
+  exit 1
+else
+  echo "Files have not changed"
+  exit 0
+fi

packages/signals/signals/scripts/build-workerbox.js

@@ -0,0 +1,64 @@
+const fs = require('fs')
+const esbuild = require('esbuild')
+const path = require('path')
+
+// Note: This was adopted from the https://github.com/markwylde/workerbox/blob/master/build.js
+console.log('Building workerbox...')
+
+const DEBUG = process.env.DEBUG === 'true'
+if (DEBUG) console.log('Minification off.')
+
+async function writeFileWithDirs(filePath, data) {
+  // Extract the directory path from the file path
+  const dir = path.dirname(filePath)
+
+  // Ensure the directory exists
+  await fs.promises.mkdir(dir, { recursive: true })
+
+  // Write the file
+  await fs.promises.writeFile(filePath, data, 'utf8')
+}
+
+async function build() {
+  console.log(new Date(), 'rebuilding...')
+
+  // clean up dist folder
+  await fs.promises.rm('./src/lib/workerbox/dist', {
+    recursive: true,
+    force: true,
+  })
+
+  await esbuild.build({
+    entryPoints: ['./src/lib/workerbox/worker.ts'],
+    bundle: true,
+    outfile: './src/lib/workerbox/dist/worker.js',
+    minify: !DEBUG,
+  })
+
+  const jsData = await fs.promises.readFile(
+    './src/lib/workerbox/dist/worker.js',
+    'utf8'
+  )
+
+  const TEMPLATE_PLACEHOLDER = `{{WORKERSCRIPT}}`
+  const htmlData = (
+    await fs.promises.readFile('./src/lib/workerbox/worker.html', 'utf8')
+  ).replace(TEMPLATE_PLACEHOLDER, jsData)
+
+  await writeFileWithDirs('./src/lib/workerbox/dist/worker.html', htmlData)
+  await writeFileWithDirs(
+    './src/lib/workerbox/worker.generated.ts',
+    [
+      '/* eslint-disable */',
+      `// built from /dist/worker.html`,
+      `export default atob('${Buffer.from(htmlData).toString('base64')}');`,
+    ].join('\n')
+  )
+}
+
+build()
+  .then(() => console.log('Build successful'))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })