feat!: drop IE 11 and modernize browser targets

BREAKING CHANGE: Drop IE 11, Safari 8, iOS 8, Android 4.4 browser support.
Minimum browser targets are now rolling modern versions aligned with
Shopify Online Store themes. The library now emits ES2015+ JavaScript
(native classes, arrow functions, template literals) and no longer
transpiles to ES5.

- Update browserslist to union of @shopify/browserslist-config + Theme Store requirements
- Remove 15 Babel ES5 transform plugins + dead @babel/plugin-external-helpers
- Remove 7 polyfill imports from buybutton.js (whatwg-fetch, core-js/*)
- Replace UglifyJS with terser for ES2015+-compatible minification
- Add terser error guard against silent minification failure
- Keep @babel/plugin-transform-modules-commonjs for Browserify test pipeline (until Vite migration)
- Native ES2015 classes replace loose-mode Babel classes (non-enumerable prototype methods)
- Create major changeset for 4.0.0 version bump
- Update docs/index.md browser support table
- Pin pnpm/action-setup to commit SHA in ci.yml (supply chain hardening)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kdaviduik

.babelrc

@@ -1,59 +1,16 @@
 {
+  "presets": [
+    ["@babel/preset-typescript", {
+      "isTSX": false,
+      "allExtensions": true
+    }]
+  ],
   "env": {
-    "production": {
-      "presets": [
-        ["@babel/preset-typescript", {
-          "isTSX": false,
-          "allExtensions": true
-        }]
-      ],
-      "plugins": [
-        "@babel/plugin-transform-template-literals",
-        "@babel/plugin-transform-literals",
-        "@babel/plugin-transform-function-name",
-        "@babel/plugin-transform-arrow-functions",
-        "@babel/plugin-transform-block-scoped-functions",
-        ["@babel/plugin-transform-classes", {
-          "loose": true
-        }],
-        "@babel/plugin-transform-object-super",
-        "@babel/plugin-transform-shorthand-properties",
-        "@babel/plugin-transform-duplicate-keys",
-        "@babel/plugin-transform-computed-properties",
-        "@babel/plugin-transform-spread",
-        "@babel/plugin-transform-parameters",
-        "@babel/plugin-transform-destructuring",
-        "@babel/plugin-transform-block-scoping",
-        "@babel/plugin-transform-typeof-symbol"
-      ]
-    },
     "development": {
-      "presets": [
-        ["@babel/preset-typescript", {
-          "isTSX": false,
-          "allExtensions": true
-        }]
-      ],
+      // Retained for Browserify/testem test pipeline — removed in PR 7a when Vitest replaces Browserify
       "plugins": [
-        "@babel/plugin-transform-modules-commonjs",
-        "@babel/plugin-transform-template-literals",
-        "@babel/plugin-transform-literals",
-        "@babel/plugin-transform-function-name",
-        "@babel/plugin-transform-arrow-functions",
-        "@babel/plugin-transform-block-scoped-functions",
-        ["@babel/plugin-transform-classes", {
-          "loose": true
-        }],
-        "@babel/plugin-transform-object-super",
-        "@babel/plugin-transform-shorthand-properties",
-        "@babel/plugin-transform-duplicate-keys",
-        "@babel/plugin-transform-computed-properties",
-        "@babel/plugin-transform-spread",
-        "@babel/plugin-transform-parameters",
-        "@babel/plugin-transform-destructuring",
-        "@babel/plugin-transform-block-scoping",
-        "@babel/plugin-transform-typeof-symbol"
+        "@babel/plugin-transform-modules-commonjs"
       ]
     }
   }
-}
+}

.changeset/drop-ie11-modernize-targets.md

@@ -0,0 +1,10 @@
+---
+"@shopify/buy-button-js": major
+---
+
+Drop IE 11, Safari 8, iOS 8, Android 4.4 browser support. Minimum browser targets are now rolling modern versions aligned with Shopify Online Store themes. The library now emits ES2015+ JavaScript (native classes, arrow functions, template literals) and no longer transpiles to ES5.
+
+**Migration guide:**
+- If you need IE 11 support, pin to `@shopify/buy-button-js@^3.0.0`.
+- If you use the CDN `latest` URL (`sdks.shopifycdn.com/buy-button/latest/buybutton.js`), pin to a specific 3.x version before upgrading.
+- If your site relied on buy-button-js to provide `fetch`, `Promise`, or ES6 array/object polyfills as a side effect, you must now provide your own polyfills.

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v3
@@ -48,7 +48,7 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v3

docs/index.md

@@ -17,9 +17,11 @@ This tool is intended for use by developers who are familiar with JavaScript and
 
 ## Current Support
 
-| Internet Explorer     | Chrome, Edge, Firefox, Opera     | Safari    | iOS     | Android   |
-| :-------------------- | :------------------------------- | :-------- | :------ | :-------- |
-| 11+                   | (Current - 1) or Current         | 8+        | 8+      | 4.4+
+| Chrome | Firefox | Safari | Edge | iOS | Android |
+| :----- | :------ | :----- | :--- | :-- | :------ |
+| Last 3 | Last 3  | Last 3 | Last 3 | 13.4+ | Last 3 Chrome |
+
+> **Note (v4.0.0+):** Internet Explorer, Safari 8, iOS 8, and Android 4.4 are no longer supported. If you need IE 11 support, pin to v3.x.
 
 ## Including the library
 

docs/tasks/prd-typescript-migration.md

@@ -11,7 +11,7 @@ This document outlines the requirements for migrating the Buy Button JS applicat
 ### Status
 
 - **Phases 1-2 (Infrastructure + Type Definitions):** Complete. PRs [#926](https://github.com/Shopify/buy-button-js/pull/926) and [#927](https://github.com/Shopify/buy-button-js/pull/927) merged.
-- **Phase 3 (Tooling Modernization):** Not started.
+- **Phase 3 (Tooling Modernization):** In progress. PR 3 (pnpm) submitted as [PR #942](https://github.com/Shopify/buy-button-js/pull/942). PR 4 (browser targets) submitted as PR 4a ([#945](https://github.com/Shopify/buy-button-js/pull/945)) + PR 4b ([#946](https://github.com/Shopify/buy-button-js/pull/946)).
 - **Phase 4 (Source File Conversion):** Not started. 49 JS files remain in `src/`.
 - **Phase 5 (Test File Conversion):** Not started. 30 test JS files remain.
 
@@ -185,7 +185,7 @@ All 49 source files are categorized by dependency depth. Each tier must be conve
 | Area | Current | Target | Rationale |
 |------|---------|--------|-----------|
 | Package manager | Yarn v1 (1.x) | pnpm | Faster, stricter dependency resolution, better monorepo support, actively maintained |
-| Browser targets | IE 11, Safari 8, iOS 8, Android 4.4 | Rolling modern targets | Eliminates 16 Babel transform plugins + all polyfills (~30-50KB bundle savings). Major version bump required. |
+| Browser targets | IE 11, Safari 8, iOS 8, Android 4.4 | Rolling modern targets | Eliminates 15 Babel ES5 transform plugins + all polyfills (~30-50KB bundle savings). Major version bump required. `@babel/plugin-transform-modules-commonjs` retained for Browserify test pipeline until PR 7a. |
 | Build system | Rollup 1.18.0 + Babel 7.5 + UglifyJS | Vite library mode | Native TS support, ESM-first, tree-shaking, faster builds. UglifyJS can't parse ES2015+ (blocks IE 11 drop). |
 | Test framework | Mocha 6.2 + Testem 2.17 + Chai 4.2 + Sinon 7.4 + Browserify | Vitest + happy-dom | Native TS support, ESM-first, fast, built-in coverage, compatible assertion API. Eliminates Browserify test pipeline. |
 | Linting | ESLint 3.3.1 + eslint-plugin-shopify | ESLint 9 flat config + @typescript-eslint | Modern TS rules, enforces `no-explicit-any`, replaces unmaintained Shopify plugin |
@@ -211,7 +211,7 @@ All 49 source files are categorized by dependency depth. Each tier must be conve
 **Rationale:** Buy-button-js is embedded on merchant storefronts — the same browser environment as the theme itself. If the theme works, the buy button must work. Auto-advancing rolling targets mean zero maintenance.
 
 Dropping legacy browsers enables:
-1. Remove 16 Babel transform plugins (all target ES5 output)
+1. Remove 15 Babel ES5 transform plugins (retain `@babel/plugin-transform-modules-commonjs` for Browserify test pipeline until PR 7a)
 2. Replace UglifyJS with terser as interim minifier (UglifyJS can't parse ES2015+ — blocking the Vite migration). Terser is removed once Vite handles minification.
 3. Remove 7 polyfill imports from `buybutton.js` (`whatwg-fetch` + 6 `core-js` modules)
 4. Native ES2015+ output — classes, arrow functions, template literals, destructuring
@@ -306,7 +306,7 @@ These are key checkpoints where the executor should perform manual verification
 |-------|-------------|-----|--------|
 | 1 | TypeScript Infrastructure Setup | 1 (PR 1) | Complete |
 | 2 | Type Definitions | 1 (PR 2) | Complete |
-| 3 | Tooling Modernization | 7 (PRs 3-8, with 7 split into 7a/7b) | Not started |
+| 3 | Tooling Modernization | 7 (PRs 3-8, with 7 split into 7a/7b) | In progress (PRs 3-4 submitted) |
 | 4 | TypeScript File Conversion | 13 (PRs 9-21) | Not started |
 | 5 | Test File Conversion | 6 (PRs 22-26, with 25 split into 25a/25b) | Not started |
 

docs/tasks/tasks-prd-typescript-migration.md

@@ -6,7 +6,7 @@ This migration is structured across ~28 PRs in 5 phases. Phases 1-2 are complete
 
 **Exit criteria for every PR:** `pnpm test` passes, `pnpm run build` produces correct bundles, `pnpm run type-check` passes, `pnpm run lint` passes.
 
-**Note on package manager commands:** All commands in this document use `pnpm` (the target state after PR 3). Before PR 3 is complete, the project uses Yarn (`yarn test`, `yarn run build`, etc.). The `pretest` script in package.json also uses `npm run` — this should be updated to `pnpm run` in PR 3.
+**Note on package manager commands:** All commands in this document use `pnpm`, which is the active package manager since PR 3.
 
 ## Source File Inventory (49 files)
 
@@ -196,82 +196,47 @@ Use Graphite (gt) commands for managing stacked branches:
 
 ---
 
-- [ ] 3. Migrate Yarn v1 → pnpm (PR 3)
+- [x] 3. Migrate Yarn v1 → pnpm (PR 3) — [PR #942](https://github.com/Shopify/buy-button-js/pull/942)
 
-  - [ ] 3.1. Create new branch using `gt create typescript-migration-part-3`
+  - [x] 3.1. Create new branch using `gt create typescript-migration-part-3`
 
-  - [ ] 3.2. Install pnpm and initialize `pnpm-lock.yaml`; delete `yarn.lock`
+  - [x] 3.2. Install pnpm and initialize `pnpm-lock.yaml`; delete `yarn.lock`
 
-  - [ ] 3.3. Update `package.json` scripts: replace all `yarn run` with `pnpm run`, replace `yarn` with `pnpm`. Fix `pretest` script which uses `npm run` → `pnpm run`
+  - [x] 3.3. Update `package.json` scripts: replace all `yarn run` with `pnpm run`, replace `yarn` with `pnpm`. Fix `pretest` script which uses `npm run` → `pnpm run`
 
-  - [ ] 3.4. Update `.github/workflows/ci.yml`: replace `npm install`/`npm run`/`npm test` with pnpm equivalents. Add pnpm setup step.
+  - [x] 3.4. Update `.github/workflows/ci.yml`: replace `npm install`/`npm run`/`npm test` with pnpm equivalents. Add pnpm setup step.
 
   - [ ] 3.5. Update `.github/workflows/npm-release.yml`: replace `yarn install` with `pnpm install`, `npx changeset` with `pnpx changeset`. Add pnpm setup step.
 
-  - [ ] 3.6. Update `.github/workflows/snapit.yml`: same pattern — replace yarn/npm with pnpm equivalents. Add pnpm setup step.
+  - [x] 3.6. Update `.github/workflows/snapit.yml`: same pattern — replace yarn/npm with pnpm equivalents. Add pnpm setup step.
 
-  - [ ] 3.7. Verify: `pnpm test` passes, `pnpm run build` produces correct output, `pnpm run type-check` passes
+  - [x] 3.7. Verify: `pnpm test` passes, `pnpm run build` produces correct output, `pnpm run type-check` passes
 
-  - [ ] 3.8. **[PR BOUNDARY]** Submit PR 3 using `gt submit`
+  - [x] 3.8. **[PR BOUNDARY]** Submit PR 3 using `gt submit`
 
-- [ ] 4. Drop IE 11 + Modernize Browser Targets — MAJOR VERSION BUMP (PR 4)
+- [x] 4. Drop IE 11 + Modernize Browser Targets — MAJOR VERSION BUMP (PR 4) — PR 4a: [PR #945](https://github.com/Shopify/buy-button-js/pull/945), PR 4b: [PR #946](https://github.com/Shopify/buy-button-js/pull/946)
 
-  - [ ] 4.1. Create new branch using `gt create typescript-migration-part-4`
+  - [x] 4.1. Create new branch using `gt create typescript-migration-part-4`
 
-  - [ ] 4.2. Update `package.json` and create changeset:
+  - [x] 4.2. Update `package.json` and create changeset:
     - Create a major changeset via `pnpm changeset` (select `major` bump) with description: "Drop IE 11, Safari 8, iOS 8, Android 4.4 browser support. Minimum browser targets are now rolling modern versions aligned with Shopify Online Store themes." Do NOT edit `version` in package.json directly — changesets manages this.
-    - Replace `browserslist` with modern rolling targets:
-      ```json
-      "browserslist": [
-        "last 3 Chrome versions",
-        "last 3 Firefox versions",
-        "last 3 Safari versions",
-        "last 2 Edge versions",
-        "last 3 ChromeAndroid versions",
-        "last 3 iOS versions",
-        "last 2 Samsung versions",
-        "not dead"
-      ]
-      ```
-
-  - [ ] 4.3. Update `.babelrc`: remove 16 transform plugins (15 production + 1 development-only):
-    - `@babel/plugin-transform-arrow-functions`
-    - `@babel/plugin-transform-block-scoped-functions`
-    - `@babel/plugin-transform-block-scoping`
-    - `@babel/plugin-transform-classes`
-    - `@babel/plugin-transform-computed-properties`
-    - `@babel/plugin-transform-destructuring`
-    - `@babel/plugin-transform-duplicate-keys`
-    - `@babel/plugin-transform-function-name`
-    - `@babel/plugin-transform-literals`
-    - `@babel/plugin-transform-object-super`
-    - `@babel/plugin-transform-parameters`
-    - `@babel/plugin-transform-shorthand-properties`
-    - `@babel/plugin-transform-spread`
-    - `@babel/plugin-transform-template-literals`
-    - `@babel/plugin-transform-typeof-symbol`
-    - `@babel/plugin-transform-modules-commonjs` (development env)
-
-  - [ ] 4.4. Remove polyfill imports from `src/buybutton.js`:
-    - `whatwg-fetch`
-    - `core-js/features/promise`
-    - `core-js/features/string/ends-with`
-    - `core-js/features/array/iterator`
-    - `core-js/features/array/find`
-    - `core-js/features/object/assign`
-    - `core-js/features/object/values`
-
-  - [ ] 4.5. Remove polyfill dependencies from `package.json`: `core-js`, `whatwg-fetch`
-
-  - [ ] 4.6. Replace UglifyJS with terser in `script/build.js`: Install `terser` as devDep, replace `uglify-js` calls with terser equivalents. Terser supports ES2015+ syntax (unlike UglifyJS) and serves as the interim minifier until Vite replaces the build pipeline in PR 6.
-
-  - [ ] 4.7. Remove UglifyJS from dependencies: `uglify-js`
-
-  - [ ] 4.8. Update `CHANGELOG.md` documenting the breaking change (IE 11 drop)
-
-  - [ ] 4.9. Verify: `pnpm test` passes, `pnpm run build` produces correct output, `pnpm run type-check` passes
-
-  - [ ] 4.10. **[PR BOUNDARY]** Submit PR 4 using `gt submit`
+    - Replace `browserslist` with modern rolling targets (union of `@shopify/browserslist-config` + Theme Store requirements)
+
+  - [x] 4.3. Update `.babelrc`: remove 15 ES5 transform plugins; retain `@babel/plugin-transform-modules-commonjs` in development env for Browserify test pipeline (removed in PR 7a)
+
+  - [x] 4.4. Remove polyfill imports from `src/buybutton.js` (7 imports: `whatwg-fetch` + 6 `core-js` modules)
+
+  - [x] 4.5. Remove polyfill dependencies from `package.json`: `core-js`, `whatwg-fetch`
+
+  - [x] 4.6. Replace UglifyJS with terser in `script/build.js`: Install `terser` as devDep, replace `uglify-js` calls with terser equivalents. Terser supports ES2015+ syntax (unlike UglifyJS) and serves as the interim minifier until Vite replaces the build pipeline in PR 6.
+
+  - [x] 4.7. Remove UglifyJS from dependencies: `uglify-js`
+
+  - [x] 4.8. CHANGELOG breaking change is documented via major changeset (automatic CHANGELOG generation enabled in PR 4a)
+
+  - [x] 4.9. Verify: `pnpm test` passes, `pnpm run build` produces correct output, `pnpm run type-check` passes
+
+  - [x] 4.10. **[PR BOUNDARY]** Submit PR 4 using `gt submit`
 
 - [ ] 5. ESLint 3.3.1 → ESLint 9 Flat Config + @typescript-eslint (PR 5)
 
@@ -313,6 +278,10 @@ Use Graphite (gt) commands for managing stacked branches:
 
 - [ ] 6. Rollup 1 + Babel → Vite Library Mode (PR 6)
 
+  > **Deferred from PR 4b review:**
+  > - **Update `caniuse-lite`** before this PR. The current version (1.0.30000989, circa 2019) resolves `"last 3 Chrome versions"` to Chrome 73-75 instead of current versions. This had no impact in PR 4b (no Babel transform plugins consume targets), but Vite's `build.target` will consume browserslist — stale data would produce incorrect output.
+  > - **Source maps for minification** were not added in PR 4b (terser replaced UglifyJS without source map config, matching the original behavior). Vite's library mode handles source maps natively, so this resolves itself when terser is removed.
+
   - [ ] 6.1. Create new branch using `gt create typescript-migration-part-6`
 
   - [ ] 6.2. Install `vite` and configure `vite.config.ts` for library mode:
@@ -784,7 +753,7 @@ Since Vitest natively handles both `.js` and `.ts` test files, test conversion i
 ## Important Learnings from Initial Setup
 
 ### Package Manager
-**CRITICAL:** This project currently uses **Yarn v1**, but will migrate to **pnpm** in PR 3. Until PR 3 is complete, use `yarn` commands. After PR 3, use `pnpm` exclusively.
+This project uses **pnpm** (migrated from Yarn v1 in PR 3).
 
 ### Build System Architecture
 - Currently: Rollup with Babel for builds (migrates to Vite in PR 6)

package.json

@@ -2,13 +2,16 @@
   "name": "@shopify/buy-button-js",
   "version": "3.0.6",
   "browserslist": [
-    "last 2 Chrome versions",
-    "last 2 Firefox versions",
-    "last 2 versions",
-    "Safari >= 8",
-    "iOS >= 8",
-    "IE >= 11",
-    "android >= 4.4"
+    "last 3 Chrome versions",
+    "last 3 Firefox versions",
+    "last 3 Safari versions",
+    "last 3 Edge versions",
+    "last 3 Opera versions",
+    "last 3 ChromeAndroid versions",
+    "last 1 FirefoxAndroid versions",
+    "ios >= 13.4",
+    "last 2 Samsung versions",
+    "not dead"
   ],
   "description": "BuyButton.js allows merchants to build Shopify interfaces into any website",
   "main": "lib/buybutton.umd.js",
@@ -54,23 +57,7 @@
   "devDependencies": {
     "@babel/cli": "7.5.5",
     "@babel/core": "7.5.5",
-    "@babel/plugin-external-helpers": "7.2.0",
-    "@babel/plugin-transform-arrow-functions": "7.2.0",
-    "@babel/plugin-transform-block-scoped-functions": "7.2.0",
-    "@babel/plugin-transform-block-scoping": "7.5.5",
-    "@babel/plugin-transform-classes": "7.5.5",
-    "@babel/plugin-transform-computed-properties": "7.2.0",
-    "@babel/plugin-transform-destructuring": "7.5.0",
-    "@babel/plugin-transform-duplicate-keys": "7.5.0",
-    "@babel/plugin-transform-function-name": "7.4.4",
-    "@babel/plugin-transform-literals": "7.2.0",
     "@babel/plugin-transform-modules-commonjs": "7.5.0",
-    "@babel/plugin-transform-object-super": "7.5.5",
-    "@babel/plugin-transform-parameters": "7.4.4",
-    "@babel/plugin-transform-shorthand-properties": "7.2.0",
-    "@babel/plugin-transform-spread": "7.2.2",
-    "@babel/plugin-transform-template-literals": "7.4.4",
-    "@babel/plugin-transform-typeof-symbol": "7.2.0",
     "@babel/preset-typescript": "^7.27.1",
     "@changesets/changelog-github": "^0.6.0",
     "@changesets/cli": "^2.28.1",
@@ -80,7 +67,6 @@
     "aws-sdk": "2.6.8",
     "babelify": "10.0.0",
     "chai": "4.2.0",
-    "core-js": "3.1.4",
     "eslint": "3.3.1",
     "eslint-plugin-shopify": "13.0",
     "fetch-pretender": "1.5.0",
@@ -98,20 +84,19 @@
     "rollup-plugin-commonjs": "10.0.1",
     "rollup-plugin-node-resolve": "5.2.0",
     "sinon": "7.4.1",
+    "terser": "^5.39.0",
     "testem": "2.17.0",
     "typescript": "^5.9.2",
     "watch": "1.0.2",
     "watchify": "3.11.1",
-    "webdriverio": "4.2.8",
-    "whatwg-fetch": "3.0.0"
+    "webdriverio": "4.2.8"
   },
   "dependencies": {
     "@babel/runtime": "7.18.9",
     "browserify": "16.3.0",
     "morphdom": "2.6.1",
     "mustache": "3.0.1",
     "sass": "1.69.0",
-    "shopify-buy": "3.0.7",
-    "uglify-js": "3.16.3"
+    "shopify-buy": "3.0.7"
   }
 }