[CDX-468] Add modern ESM build

.github/workflows/publish-cdn.yml

@@ -41,6 +41,10 @@ jobs:
           # Also create a latest version for easy access
           cp dist/constructorio-client-javascript-$VERSION.js s3_dist/latest.js
 
+          # Modern ESM bundle
+          cp dist/esm/constructorio-client-javascript-$VERSION.esm.js s3_dist/$VERSION.esm.js
+          cp dist/esm/constructorio-client-javascript-$VERSION.esm.js s3_dist/latest.esm.js
+
           # Sync to S3 with appropriate caching and permissions
           aws s3 sync s3_dist s3://constructor-frontend-prod/sdk/client-javascript --cache-control 'public, max-age=31536000, immutable' --acl 'public-read'
 

.github/workflows/run-tests-bundled-esm.yml

@@ -0,0 +1,29 @@
+name: Run tests - Bundled ESM
+on:
+  pull_request:
+    branches:
+      - "**"
+concurrency:
+  group: run-tests-bundled-esm-${{ github.head_ref }}
+  cancel-in-progress: true
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ["22.18.0"]
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+      - name: Set up node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test:bundled:esm:parallel
+        env:
+          TEST_REQUEST_API_KEY: ${{ secrets.TEST_REQUEST_API_KEY }}
+          TEST_MEDIA_REQUEST_API_KEY: ${{ secrets.TEST_MEDIA_REQUEST_API_KEY }}
+          SKIP_NETWORK_TIMEOUT_TESTS: true

.gitignore

@@ -4,6 +4,9 @@ lib
 # Test temporary directory
 test
 
+# Test-only build artifact (modern source as IIFE for bundled tests)
+dist/test-only/
+
 # OS X specific files
 .DS_Store
 

package.json

@@ -3,6 +3,7 @@
   "version": "2.79.0",
   "description": "Constructor.io JavaScript client",
   "main": "lib/constructorio.js",
+  "module": "lib/esm/constructorio.js",
   "types": "lib/types/index.d.ts",
   "scripts": {
     "clean": "sudo rm -rf node_modules package-lock.json",
@@ -17,15 +18,18 @@
     "test:src:parallel": "mkdir -p test && cp -rf src/* test && mocha --parallel --retries 3 ./spec/*",
     "test:bundled": "npm run bundle && npm run generate-test-folder && BUNDLED=true PACKAGE_VERSION=$(echo $npm_package_version) mocha --retries 3 ./spec/*",
     "test:bundled:parallel": "npm run bundle && npm run generate-test-folder && BUNDLED=true PACKAGE_VERSION=$(echo $npm_package_version) mocha --parallel --retries 3 ./spec/*",
+    "test:bundled:esm": "npm run bundle && node ./scripts/build-test-iife.js && npm run generate-test-folder && BUNDLED=true BUNDLED_VARIANT=esm PACKAGE_VERSION=$(echo $npm_package_version) mocha --retries 3 ./spec/*",
+    "test:bundled:esm:parallel": "npm run bundle && node ./scripts/build-test-iife.js && npm run generate-test-folder && BUNDLED=true BUNDLED_VARIANT=esm PACKAGE_VERSION=$(echo $npm_package_version) mocha --parallel --retries 3 ./spec/*",
     "test:all": "npm run test && npm run test:bundled",
     "test:all:parallel": "npm run test:parallel && npm run test:bundled:parallel",
     "precoverage": "rm -rf ./coverage && rm -rf ./.nyc_output",
     "coverage": "nyc --all --reporter=html npm run test:src",
     "postcoverage": "open coverage/index.html && rm -rf test",
     "docs": "jsdoc --configure ./.jsdoc.json ./README.md --recurse ./src --destination ./docs",
     "compile": "rm -rf ./lib/* && babel src/ -d lib/ --copy-files && rm -rf ./lib/types/tests",
+    "postcompile": "node ./scripts/build-esm.js",
     "prepublish": "npm run compile",
-    "bundle": "rm -rf ./dist/* && npm run compile && node bundle.js",
+    "bundle": "rm -rf ./dist/* && npm run compile && node ./scripts/bundle.js && node ./scripts/bundle-esm.js",
     "prepare": "husky install",
     "generate-test-folder": "mkdir -p test && cp -rf lib/* test"
   },

scripts/build-esm.js

@@ -0,0 +1,13 @@
+require('esbuild').build({
+  entryPoints: ['./src/constructorio.js'],
+  bundle: true,
+  format: 'esm',
+  target: 'es2017',
+  platform: 'browser',
+  sourcemap: true,
+  define: {
+    global: 'window',
+  },
+  external: ['@constructor-io/constructorio-id', 'crc-32'],
+  outfile: './lib/esm/constructorio.js',
+}).catch(() => process.exit(1));

scripts/build-test-iife.js

@@ -0,0 +1,16 @@
+const packageJSON = require('../package.json');
+
+require('esbuild').build({
+  entryPoints: ['./src/constructorio.js'],
+  bundle: true,
+  minify: true,
+  format: 'iife',
+  globalName: 'ConstructorioClient',
+  target: 'es2017',
+  platform: 'browser',
+  define: {
+    global: 'window',
+    process: '{"env":{"BUNDLED":"true"}}',
+  },
+  outfile: `./dist/test-only/constructorio-client-javascript-${packageJSON.version}.iife.js`,
+}).catch(() => process.exit(1));

scripts/bundle-esm.js

@@ -0,0 +1,30 @@
+const packageJSON = require('../package.json');
+
+const banner = `/*!
+ *
+ * Constructor.io JavaScript Client, version ${packageJSON.version}
+ * (c) 2015-${new Date().getFullYear()} Constructor.io
+ * ---
+ * Constructor Search uses artificial intelligence to provide AI-first search, browse, and recommendations results that increase conversions and revenue.
+ * - https://constructor.io
+ * - https://github.com/Constructor-io/constructorio-client-javascript
+ * ---
+ * Includes code from the 'browserify/events' library, licensed under the MIT License.
+ * For full license details, see the library documentation.
+ *
+ */`;
+
+require('esbuild').build({
+  entryPoints: ['./src/constructorio.js'],
+  bundle: true,
+  minify: true,
+  format: 'esm',
+  target: 'es2017',
+  platform: 'browser',
+  define: {
+    global: 'window',
+    process: '{"env":{"BUNDLED":"true"}}',
+  },
+  banner: { js: banner },
+  outfile: `./dist/esm/constructorio-client-javascript-${packageJSON.version}.esm.js`,
+}).catch(() => process.exit(1));

bundle.js → scripts/bundle.js

@@ -1,4 +1,4 @@
-const packageJSON = require('./package.json');
+const packageJSON = require('../package.json');
 const banner = `/*!
  *
  * Constructor.io JavaScript Client, version ${packageJSON.version}

spec/src/modules/quizzes.js

@@ -27,7 +27,10 @@ describe(`ConstructorIO - Quizzes${bundledDescriptionSuffix}`, () => {
   let cleanup;
 
   if (bundled) {
-    jsdomOptions.src = fs.readFileSync(`./dist/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.js`, 'utf-8');
+    const bundlePath = process.env.BUNDLED_VARIANT === 'esm'
+      ? `./dist/test-only/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.iife.js`
+      : `./dist/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.js`;
+    jsdomOptions.src = fs.readFileSync(bundlePath, 'utf-8');
   }
 
   beforeEach(() => {

spec/src/utils/jsdom-global.js

@@ -10,7 +10,10 @@ const bundled = process.env.BUNDLED === 'true';
 // to make it available in the tests
 let cioScriptTag = '';
 if (bundled) {
-  const cioJSBundle = fs.readFileSync(`./dist/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.js`, 'utf-8');
+  const bundlePath = process.env.BUNDLED_VARIANT === 'esm'
+    ? `./dist/test-only/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.iife.js`
+    : `./dist/constructorio-client-javascript-${process.env.PACKAGE_VERSION}.js`;
+  const cioJSBundle = fs.readFileSync(bundlePath, 'utf-8');
   cioScriptTag = `<script>${cioJSBundle}</script>`;
 }