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 PR 7a)
- Native ES2015 classes replace loose-mode Babel classes (non-enumerable
  prototype methods)
- Create major changeset for 4.0.0 version bump
- Pin pnpm/action-setup to commit SHA in ci.yml (supply chain hardening)
- Add @changesets/changelog-github as explicit devDependency (was phantom)

Author: kdaviduik

.babelrc

@@ -1,59 +1,15 @@
 {
+  "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
-        }]
-      ],
       "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,5 @@
+---
+"@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.

.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/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)
 
@@ -784,7 +749,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"
   }
 }