Add @shopify/checkout-kit web platform scaffolding and CI

.github/dependabot.yml

@@ -114,3 +114,16 @@ updates:
         update-types:
           - "version-update:semver-major"
           - "version-update:semver-minor"
+
+  # Web — @shopify/checkout-kit
+  - package-ecosystem: npm
+    directory: "/platforms/web"
+    schedule:
+      interval: daily
+    cooldown:
+      default-days: 7
+    ignore:
+      - dependency-name: "*"
+        update-types:
+          - "version-update:semver-major"
+          - "version-update:semver-minor"

.github/workflows/ci.yml

@@ -27,6 +27,7 @@ jobs:
       android: ${{ steps.filter.outputs.android }}
       swift: ${{ steps.filter.outputs.swift }}
       reactNative: ${{ steps.filter.outputs.reactNative }}
+      web: ${{ steps.filter.outputs.web }}
     steps:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
@@ -57,6 +58,12 @@ jobs:
               - '.github/workflows/rn-check-packed-files.yml'
               - '.github/workflows/rn-lint.yml'
               - '.github/workflows/ci.yml'
+            web:
+              - 'platforms/web/**'
+              - '.github/workflows/web.yml'
+              - '.github/workflows/web-license-headers.yml'
+              - '.github/actions/setup/**'
+              - '.github/workflows/ci.yml'
 
   android-test:
     name: Android
@@ -127,6 +134,21 @@ jobs:
     if: needs.changes.outputs.reactNative == 'true'
     uses: ./.github/workflows/rn-lint.yml
 
+  web:
+    name: Web
+    needs: changes
+    if: needs.changes.outputs.web == 'true'
+    permissions:
+      contents: read
+      pull-requests: write
+    uses: ./.github/workflows/web.yml
+
+  web-license-headers:
+    name: Web
+    needs: changes
+    if: needs.changes.outputs.web == 'true'
+    uses: ./.github/workflows/web-license-headers.yml
+
   # Single required status check for branch protection.
   # Passes when every relevant platform job either succeeded or was skipped
   # because no files in that platform's tree changed.
@@ -146,6 +168,8 @@ jobs:
       - rn-license-headers
       - rn-check-packed-files
       - rn-lint
+      - web
+      - web-license-headers
     runs-on: ubuntu-latest
     steps:
       - name: Verify all upstream jobs succeeded or were skipped

.github/workflows/web-license-headers.yml

@@ -0,0 +1,24 @@
+name: Web — Check License Headers
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  license:
+    name: Verify license headers
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    defaults:
+      run:
+        working-directory: platforms/web
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Install Ruby
+        uses: ruby/setup-ruby@c4e5b1316158f92e3d49443a9d58b31d25ac0f8f # v1.306.0
+        with:
+          ruby-version: '3.0'
+
+      - name: Check license headers
+        run: ./scripts/check_license_headers.rb

.github/workflows/web.yml

@@ -0,0 +1,53 @@
+name: Web
+
+on:
+  workflow_call:
+  workflow_dispatch:
+
+jobs:
+  ci:
+    name: Lint, test, build, verify
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      contents: read
+      pull-requests: write
+    defaults:
+      run:
+        working-directory: platforms/web
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node.js, pnpm, and install dependencies
+        uses: ./.github/actions/setup
+        with:
+          node-version-file: platforms/web/package.json
+          cache-dependency-path: platforms/web/pnpm-lock.yaml
+          package-json-file: platforms/web/package.json
+          working-directory: platforms/web
+
+      - name: Lint (typecheck + oxlint + oxfmt --check)
+        run: pnpm lint
+
+      - name: Test
+        run: pnpm test
+
+      - name: Coverage comment
+        if: github.event_name == 'pull_request'
+        uses: MishaKav/jest-coverage-comment@fb83bcbaeb5ca467936175796f862a2992938833 # main
+        with:
+          coverage-summary-path: platforms/web/coverage/coverage-summary.json
+          title: 'Web — Coverage Report'
+          create-new-comment: false
+
+      - name: Build
+        run: pnpm build
+
+      - name: Verify package (publint)
+        run: pnpm verify
+
+      - name: Pack and inspect contents
+        run: |
+          pnpm pack --pack-destination /tmp/web-pack
+          echo "Packed tarball contents:"
+          tar -tzf /tmp/web-pack/*.tgz | sort

README.md

@@ -35,7 +35,8 @@ Checkout Kit is a monorepo containing all the platforms Checkout Kit supports to
 | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------- | ------------------------------------------ |
 | [`ShopifyCheckoutKit` `ShopifyAcceleratedCheckouts`](platforms/swift/) | [![GitHub tag](https://img.shields.io/github/v/tag/Shopify/checkout-kit?label=SPM)](https://github.com/Shopify/checkout-kit/tags) [![CocoaPods](https://img.shields.io/cocoapods/v/ShopifyCheckoutKit.svg?label=CocoaPods)](https://cocoapods.org/pods/ShopifyCheckoutKit) | Swift Package Manager, CocoaPods | iOS checkout presentation and accelerated checkout libraries.   | [Readme](platforms/swift/README.md)        |
 | [`com.shopify:checkout-kit`](platforms/android/)                       | [![Maven Central](https://img.shields.io/maven-central/v/com.shopify/checkout-kit.svg?label=Maven%20Central)](https://central.sonatype.com/artifact/com.shopify/checkout-kit)                                                                                              | Maven Central                    | Android checkout presentation and accelerated checkout support. | [Readme](platforms/android/README.md)      |
-| [`@shopify/checkout-kit-react-native`](platforms/react-native/)                     | [![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit-react-native/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit-react-native)                                                                                                                              | npm                              | React Native wrapper for Checkout Kit.                          | [Readme](platforms/react-native/README.md) |
+| [`@shopify/checkout-kit-react-native`](platforms/react-native/)        | [![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit-react-native/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit-react-native)                                                                                                    | npm                              | React Native wrapper for Checkout Kit.                          | [Readme](platforms/react-native/README.md) |
+| [`@shopify/checkout-kit`](platforms/web/)                              | [![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit)                                                                                                                              | npm                              | Web component for embedding Shopify checkout in any website.    | [Readme](platforms/web/README.md)          |
 
 ## Versioning
 

platforms/web/.gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+
+# Build output
+dist/
+build/
+coverage/
+custom-elements.json
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Local env
+.env
+.env.local
+.env.*.local

platforms/web/.oxlintrc.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "vitest", "unicorn", "promise"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "error",
+    "perf": "off",
+    "pedantic": "off",
+    "style": "off"
+  },
+  "rules": {
+    "eslint/no-console": "error",
+    "eslint/no-unused-vars": "off",
+    "typescript/no-unused-vars": "error",
+    "typescript/consistent-type-imports": "error",
+    "typescript/no-non-null-assertion": "error",
+    "typescript/no-explicit-any": "error",
+    "unicorn/filename-case": ["error", {"case": "kebabCase"}]
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2024": true
+  },
+  "ignorePatterns": [
+    "dist/**",
+    "coverage/**",
+    "node_modules/**"
+  ]
+}

platforms/web/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright 2023 - Present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

platforms/web/README.md

@@ -0,0 +1,54 @@
+# @shopify/checkout-kit
+
+A web component for embedding Shopify checkout in any website.
+
+[![npm latest](https://img.shields.io/npm/v/@shopify/checkout-kit/latest.svg?label=npm)](https://www.npmjs.com/package/@shopify/checkout-kit)
+
+## Install
+
+```bash
+npm i @shopify/checkout-kit
+```
+
+## Layout
+
+```
+platforms/web/
+├── src/                    # source — add web component code here
+│   └── index.ts            # public API
+├── package.json            # the published @shopify/checkout-kit
+├── vite.config.ts          # build (lib mode + dts) + vitest config
+├── tsconfig.json
+├── custom-elements-manifest.config.mjs
+└── .oxlintrc.json
+```
+
+## Development
+
+```bash
+cd platforms/web
+pnpm install
+
+pnpm build              # vite + custom-elements-manifest
+pnpm dev                # vite build --watch
+pnpm test               # vitest with coverage
+pnpm test:watch
+pnpm lint               # typecheck + oxlint + oxfmt --check
+pnpm format             # oxfmt (writes in place)
+pnpm verify             # publint
+```
+
+## Tooling
+
+| Concern         | Tool                                         |
+| --------------- | -------------------------------------------- |
+| Bundler         | Vite (lib mode) + `vite-plugin-dts`          |
+| Tests           | Vitest + happy-dom                           |
+| Lint            | oxlint                                       |
+| Format          | oxfmt                                        |
+| Element docs    | `@custom-elements-manifest/analyzer` → `dist/custom-elements.json` |
+| Publish hygiene | `publint`                                    |
+
+## License
+
+[MIT](./LICENSE)

platforms/web/custom-elements-manifest.config.mjs

@@ -0,0 +1,11 @@
+// Custom Elements Manifest analyzer config.
+// Produces `dist/custom-elements.json`, which IDEs (VS Code, JetBrains) and
+// Storybook consume to provide HTML attribute autocompletion and docs.
+//
+// Docs: https://custom-elements-manifest.open-wc.org/analyzer/getting-started/
+export default {
+  globs: ['src/**/*.ts'],
+  exclude: ['src/**/*.test.ts'],
+  outdir: 'dist',
+  packagejson: true,
+};

platforms/web/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@shopify/checkout-kit",
+  "version": "4.0.0-alpha.1",
+  "description": "A web component for embedding Shopify's Checkout Kit in any website.",
+  "license": "MIT",
+  "author": "Shopify",
+  "homepage": "https://github.com/Shopify/checkout-kit/tree/main/platforms/web",
+  "bugs": {
+    "url": "https://github.com/Shopify/checkout-kit/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shopify/checkout-kit.git",
+    "directory": "platforms/web"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./custom-elements.json": "./dist/custom-elements.json",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "LICENSE",
+    "README.md",
+    "package.json",
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "shopify",
+    "checkout",
+    "web-components",
+    "custom-elements",
+    "headless-commerce",
+    "ecommerce"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist coverage",
+    "build": "vite build && pnpm run build:manifest",
+    "build:manifest": "cem analyze --globs 'src/**/*.ts' --exclude 'src/**/*.test.ts' --outdir dist",
+    "dev": "vite build --watch",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
+    "lint": "pnpm run typecheck && pnpm run lint:js && pnpm run format:check",
+    "lint:js": "oxlint --report-unused-disable-directives --max-warnings 0 src",
+    "lint:js:fix": "oxlint --fix src",
+    "format": "oxfmt src",
+    "format:check": "oxfmt --check src",
+    "typecheck": "tsc --noEmit",
+    "verify": "publint",
+    "prepack": "pnpm run build"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@types/node": "^22.10.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^15.11.7",
+    "oxfmt": "^0.47.0",
+    "oxlint": "^1.62.0",
+    "publint": "^0.3.12",
+    "typescript": "5.9.3",
+    "vite": "^7.3.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.33.1+sha512.05ba3c1d5d1c18f68df06470d74055e62d41fc110a0c660db1b2dfb2785327f04cf0f68345d4609bc52089e7fa0343c31593b2f9594e2c5d5da426230acc9820",
+  "engines": {
+    "node": ">=22.14.0"
+  },
+  "customElements": "dist/custom-elements.json"
+}