chore(web): enforce browser compatibility policy

.github/workflows/web.yml

@@ -26,7 +26,7 @@ jobs:
           package-json-file: platforms/web/package.json
           working-directory: platforms/web
 
-      - name: Lint (typecheck + oxlint + oxfmt --check)
+      - name: Lint (typecheck + browser compatibility + oxlint + oxfmt --check)
         run: pnpm lint
 
       - name: Test

platforms/web/README.md

@@ -45,9 +45,11 @@ Check out our blog to
 
 ## Platform Requirements
 
-- **Browsers** — evergreen Chromium, Firefox, and WebKit (Safari 16.4+). The
-  component relies on `<dialog>`, native `customElements`, and `AbortController`
-  — all stable in every supported browser.
+- **Browsers** — Chrome, Android Chrome, Edge, Firefox, and Android Firefox
+  111+, plus Safari and iOS Safari 16.4+. This policy is enforced for source
+  compatibility and build output. The component relies on `<dialog>`, native
+  `customElements`, and `AbortController` — all stable in every supported
+  browser.
 - **TypeScript** (optional) — `5.0+` for consumers using the bundled type
   definitions.
 - **Bundler** (optional) — works with Vite, Rollup, esbuild, webpack, or

platforms/web/eslint.compat.config.mjs

@@ -0,0 +1,17 @@
+import typescriptParser from "@typescript-eslint/parser";
+import compat from "eslint-plugin-compat";
+
+export default [
+  {
+    files: ["src/**/*.ts"],
+    ignores: ["src/**/*.test.ts"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+    },
+    plugins: { compat },
+    rules: { "compat/compat": "error" },
+  },
+];

platforms/web/package.json

@@ -57,7 +57,8 @@
     "dev": "vite build --watch",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
-    "lint": "pnpm run typecheck && pnpm run sample:typecheck && pnpm run lint:dependencies && pnpm run lint:js && pnpm run format:check",
+    "lint": "pnpm run typecheck && pnpm run sample:typecheck && pnpm run lint:compat && pnpm run lint:dependencies && pnpm run lint:js && pnpm run format:check",
+    "lint:compat": "eslint --config eslint.compat.config.mjs src",
     "lint:dependencies": "depcruise --config dependency-cruiser.config.mjs src",
     "lint:js": "oxlint --report-unused-disable-directives --max-warnings 0 src sample && pnpm --dir test/e2e lint",
     "lint:js:fix": "oxlint --fix src sample && pnpm --dir test/e2e lint:fix",
@@ -78,8 +79,12 @@
     "@shopify/checkout-kit-protocol": "workspace:*",
     "@shopify/checkout-kit-telemetry": "workspace:*",
     "@types/node": "^22.10.0",
+    "@typescript-eslint/parser": "^8.70.1",
     "@vitest/coverage-v8": "^4.1.0",
+    "browserslist-to-esbuild": "^2.1.1",
     "dependency-cruiser": "17.3.9",
+    "eslint": "^10.11.0",
+    "eslint-plugin-compat": "^7.0.2",
     "happy-dom": "^20.8.9",
     "oxfmt": "^0.47.0",
     "oxlint": "^1.62.0",
@@ -93,5 +98,14 @@
   "engines": {
     "node": ">=22.14.0"
   },
+  "browserslist": [
+    "Chrome >= 111",
+    "ChromeAndroid >= 111",
+    "Edge >= 111",
+    "Firefox >= 111",
+    "FirefoxAndroid >= 111",
+    "Safari >= 16.4",
+    "iOS >= 16.4"
+  ],
   "customElements": "dist/custom-elements.json"
 }

platforms/web/src/checkout-web-component.ts

@@ -1,5 +1,3 @@
-/* eslint ssr-friendly/no-dom-globals-in-module-scope: off */
-
 import { ShopifyCheckout } from "./checkout";
 
 declare global {

platforms/web/vite.config.ts

@@ -1,6 +1,7 @@
 import {fileURLToPath} from 'node:url';
 import {resolve} from 'node:path';
 
+import browserslistToEsbuild from 'browserslist-to-esbuild';
 import {defineConfig} from 'vitest/config';
 import dts from 'vite-plugin-dts';
 
@@ -26,7 +27,7 @@ export default defineConfig({
     }),
   ],
   build: {
-    target: 'es2022',
+    target: browserslistToEsbuild(),
     sourcemap: true,
     minify: true,
     emptyOutDir: true,