[2025-07] Fix Money component compatibility with Customer Account API USDC currency #3090
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089
This comment has been minimized.
This comment has been minimized.
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist
This was referenced Aug 19, 2025
juanpprieto
changed the base branch from
2025-07-sfapi-caapi-update
to
fix-monorepo-detection-runtime
juanpprieto
changed the base branch from
fix-monorepo-detection-runtime
to
2025-07-sfapi-caapi-update
juanpprieto
merged commit 92fbe15
into
2025-07-sfapi-caapi-update
11 of 17 checks passed
kdaviduik
added a commit
that referenced
this pull request
Aug 20, 2025
5 tasks
Contributor
|
LGTM (would approve but I can't as it has already merged). Some suggested changes here #3097 |
kdaviduik
added a commit
that referenced
this pull request
Aug 20, 2025
juanpprieto
added a commit
that referenced
this pull request
Sep 4, 2025
… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild
juanpprieto
pushed a commit
that referenced
this pull request
Sep 4, 2025
kdaviduik
pushed a commit
that referenced
this pull request
Sep 11, 2025
… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild
kdaviduik
added a commit
that referenced
this pull request
Sep 11, 2025
kdaviduik
added a commit
that referenced
this pull request
Sep 11, 2025
* [2025-07] Update Storefront API and Customer Account API ## Summary Updated both Storefront API and Customer Account API from version 2025-04 to 2025-07 ## Changes - Updated version constants in hydrogen-react and hydrogen packages - Regenerated GraphQL types and schemas for both APIs - Updated all hardcoded version references in documentation and tests - Regenerated skeleton template types - Created 6 GitHub issues for tracking API changes implementation ## API Changes Tracked - #3076: Subscription discount data in Customer Account API - #3077: Cart warnings for non-applicable discount codes - #3078: BUYER_CANNOT_PURCHASE_FOR_COMPANY_LOCATION cart error - #3079: New order filter options in Customer Account API - #3080: Imperial units in UnitPriceMeasurement - #3081: Selling plan error handling in Cart mutations ## Validation - TypeScript: ✅ No errors - Tests: ✅ All passing - Lint:⚠️ 2 warnings (non-blocking import duplicates) - Build: ✅ Successful * Update skeleton @shopify/cli dependency to latest version - Update from ~3.80.4 to ~3.83.3 - Include in changeset documentation * Update package-lock.json for @shopify/cli dependency update * [2025-07] Fix Monorepo RR7 CI build failures and improve reliability (#3091) * fix: Complete React Router 7 migration for Express example The Express example was partially migrated to React Router 7 but missing critical configuration and dependencies, causing CI failures. Changes: - Add react-router.config.ts with proper preset and app directory configuration - Fix vite.config.ts to call reactRouter() without arguments (RR7 API change) - Add @react-router/dev as devDependency for TypeScript types - Update entry.server.tsx to remove unnecessary @remix-run/web-fetch import (Node 20+ provides native Response globally) - Fix environment variable loading using getEnv() helper - Add .gitignore for React Router generated type files - Update tsconfig.json to exclude generated directories The example now builds successfully with React Router 7's framework mode. * fix: Fix CLI build checks and TypeScript configuration Multiple CLI-specific issues were causing CI failures after recent refactoring. Changes: - Fix build-check.mjs to expect .jsx extensions (tsup outputs .tsx→.jsx) - Exclude assets/routes from TypeScript checking (template files for user projects) - Align ast-grep to version 0.33.0 to match @shopify/cli's bundled version - Fix isHydrogenMonorepo() detection to work in both dev and npm package contexts - Add 'as const' assertions for ast-grep 0.33.0 API compatibility Background: - Template files were moved to assets/routes in May 2024 and inadvertently included in TypeScript scope - ast-grep 0.34.1 conflicted with @shopify/cli's bundled 0.33.0 * fix: Fix CI workflow and monorepo build orchestration The CI workflow and Turbo configuration had multiple issues causing intermittent build failures, particularly the "No lockfile found" error. Changes: - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to typecheck step in CI (was only on build:all, but typecheck also triggers builds via Turbo) - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to turbo.json globalEnv - Add explicit build dependencies for all examples in turbo.json - Remove docs-preview from workspaces to prevent React Router version conflicts - Regenerate package-lock.json for dependency resolution The root cause was that the typecheck step depends on build tasks (per turbo.json) but wasn't receiving the lockfile check flag, causing skeleton builds to fail. This has been a source of CI instability since the monorepo migration. * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * chore: ignore tsup bundled config build artifacts During the build process, tsup creates temporary bundled configuration files (tsup.config.bundled_*.mjs) in each package directory. These are generated artifacts that should not be tracked in version control. These files: - Are created when running 'npm run build:all' or similar build commands - Contain bundled versions of tsup.config.ts files for build execution - Have random hash suffixes (e.g., tsup.config.bundled_jt705ss6fz.mjs) - Should be cleaned up automatically but sometimes persist Adding the pattern '**/tsup.config.bundled_*.mjs' to gitignore prevents these temporary build artifacts from cluttering git status and being accidentally committed. * fix: add missing TypeScript type definitions for cookbook dependencies Added @types/inquirer and @types/yargs to cookbook devDependencies to resolve TypeScript compilation errors when running cookbook commands. This fixes the TS7016 error: 'Could not find a declaration file for module inquirer' that occurs when running cookbook commands like 'npm run cookbook -- regenerate' on fresh branches or after clean installs. * chore: regenerate cookbook recipes with updated patch hashes Regenerated all cookbook recipes to update patch file hashes after recent changes to the skeleton template. This ensures the cookbook validation passes in CI by keeping the patches in sync with the current state of the skeleton template. The regeneration updates: - All patch files with new content hashes - Recipe YAML files with updated patch references - README and prompt files with current examples This fixes the 'Validate Recipes' CI job failure. * fix: Add lockfile check bypass to cookbook validation in CI The cookbook validation was failing because the skeleton template intentionally doesn't include a lockfile (templates shouldn't have lockfiles), but the hydrogen build command validates lockfile presence by default. This fix adds SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to the cookbook validation step, consistent with how other CI build tasks handle this requirement. * fix: Remove unnecessary cli-hydrogen dependency from root package.json The @shopify/cli-hydrogen dependency in the root package.json was causing npm to incorrectly attempt to run scripts in all workspace packages when executing root-level scripts like 'npm run build:pkg'. This resulted in confusing error messages when npm tried to run 'build:pkg' in packages that don't have that script defined (e.g., hydrogen-react). This dependency was likely added accidentally during the v3_routeConfig changes in March 2025 (commit 74ef1ba) but serves no actual purpose: - The root package doesn't use cli-hydrogen directly - Turbo.json already manages build dependencies correctly - Workspace packages are linked automatically by npm workspaces - The skeleton template correctly uses @shopify/cli (which bundles cli-hydrogen internally) Removing this dependency: - Eliminates the 'Missing script: build:pkg' error messages - Prevents npm from unnecessarily propagating script execution - Maintains all existing functionality (builds still work correctly) - Simplifies the dependency tree The actual build process through Turbo remains unchanged and continues to work as expected. * Suggested money changes for PR #3090 (#3097) * Support imperial units in UnitPriceMeasurement (#3107) * Support imperial units in UnitPriceMeasurement * remove unnecessary changeset * Use count instead of dimension, which doesn't exist * Don't commit claude settings in this PR to avoid cluttering the branch * [2025-07] Fix React Context error during client-side hydration (#3101) * Fix React Context errors in Vite dev server This fixes "Cannot read properties of null (reading 'useContext')" errors that occur when React Context hooks are used in development mode. Root Cause: Vite's module federation can cause multiple React instances to be loaded when @shopify/hydrogen is served as an external module. React Context requires a single React instance to function properly - when multiple instances exist, Context providers from one instance cannot be consumed by hooks from another instance, resulting in null context values. Solution: 1. Added resolve.dedupe for react, react-dom, and @shopify/hydrogen to ensure Vite uses a single instance of these packages 2. Modified optimizeDeps.include to conditionally optimize @shopify/hydrogen: - In production/regular projects: Optimize @shopify/hydrogen to prevent context errors - In monorepo development: Skip optimization to allow live reload of source changes This maintains development workflow in the monorepo while fixing the production build issue. * Fix React Context error during client-side hydration Resolves 'Cannot read properties of null (reading useContext)' error that occurred on first page load when using CSP with nonces. The issue was caused by NonceProvider being present during SSR but missing during client hydration, creating a React Context mismatch. Changes: - Export NonceProvider from @shopify/hydrogen for client-side usage - Add NonceProvider wrapper to skeleton's entry.client.tsx - Simplify Vite config to improve React Context stability * [2025-07] Display new Cart warnings in skeleton template (#3084) * [2025-07] Display all cart warnings with user-friendly messages (fixes #3077, #3085) * Remove CartWarning fragment from cart query - only available in mutations * Add support for all cart user error types in skeleton template (#3121) The Hydrogen cart handler's return type includes a union of three possible user error types: CartUserError, MetafieldsSetUserError, and MetafieldDeleteUserError. While the skeleton template currently only handles non-metafield operations, the TypeScript types from the cart handler don't narrow based on the specific operation performed. This change updates the CartUserErrors, CartMain, and CartSummary components to accept all three error types, resolving TypeScript errors and ensuring the components are compatible with any cart operation that might be added in the future. * Update Vitest from v1.0.4 to v3.2.4 across all packages (#3126) * Update Vitest from v1.0.4 to v3.2.4 across all packages - Upgrade vitest to ^3.2.4 in all 5 packages that use it - Upgrade @vitest/coverage-v8 to ^3.2.4 to match vitest version - Add vitest as devDependency to create-hydrogen package (was missing) - Add explicit coverage provider configuration (required in v3+) - Set provider: 'v8' in cli and hydrogen-react vitest configs Breaking change: Vitest v2+ requires explicit coverage provider config * Fix Vitest v3 Mock type breaking changes In Vitest v3, vi.fn() returns Mock<() => unknown> instead of Mock<any[], any>, requiring explicit type assertions or type parameters for mocks with specific return types. Changes: - Add type assertion for fetchWithServerCache mock in storefront.test.ts - Simplify Promise creation in session mocks (Promise.resolve instead of new Promise) - Fix Mock type usage in Image.test.tsx for console.warn assertions - Add vitest/globals to tsconfig for packages using global test functions - Keep jest types alongside vitest types for @testing-library/jest-dom compatibility The stricter typing in v3 catches more potential issues at compile time but requires updating existing mocks that relied on v1's permissive typing. * Fix formatting * Add CODEOWNERS file to automatically request team's review on non-draft PRs (#3133) * [2025-06] Fix MiniOxygen/Miniflare v4 redirects handling + Stable --customer-account-push flag (#3123) * Fix MiniOxygen to support React Router's redirectDocument for external redirects The Miniflare v4 update introduced a breaking change where dispatchFetch automatically follows redirects internally, preventing external OAuth redirects from working properly. React Router's redirectDocument() expects the browser to handle external redirects, but Miniflare was intercepting and following them within the worker runtime. This fix adds {redirect: 'manual'} to all dispatchFetch calls in MiniOxygen, which prevents Miniflare from following redirects automatically. This ensures that: - External redirects (like OAuth flows to Shopify's Customer Account API) are passed to the browser as intended - React Router's redirectDocument() works correctly for cross-origin navigation - The X-Remix-Reload-Document header is respected for full document reloads The implementation uses Function.prototype.call to pass both arguments to dispatchFetch while maintaining TypeScript compatibility, as the property accessor doesn't properly expose the second parameter in TypeScript definitions. Also adds .tryhydrogen.dev to Vite's allowedHosts for development testing. References: - cloudflare/workers-sdk#5018 - cloudflare/workers-sdk#5191 * Stabilize customer-account-push flag - Changed from customer-account-push__unstable to customer-account-push - Removed hidden: true to make flag visible in help - Fixed typo: Oauth → OAuth in description - Flag now works via CLI argument or SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH env var * Fix MiniOxygen redirect handling for OAuth flows Apply {redirect: 'manual'} to Miniflare's dispatchFetch calls to prevent automatic redirect following. This ensures external redirects (like OAuth) are passed to the browser instead of being followed internally. Changes: - Add redirect: 'manual' parameter to dispatchFetch in both worker and node environments - Fix Headers.getSetCookie() usage for proper Set-Cookie header handling - Add comprehensive tests for redirect behavior in both environments - Stabilize customer-account-push CLI flag (remove __unstable prefix) This fixes OAuth/PKCE authentication flows in React Router 7 where redirectDocument() and external redirects need to be handled by the browser, not the server. * Add changeset for OAuth redirect fixes and stabilized CLI flag * Fix intermittent CI test failures in MiniOxygen tests - Use dynamic port allocation (port: 0) for all test servers to prevent EADDRINUSE errors - Properly handle OS-assigned ports when using port 0 - Add server tracking and cleanup to ensure all servers are properly closed - Fix proxy server test to use dynamic port allocation This resolves race conditions and port conflicts that occur when tests run in parallel in CI environments. * Fix TypeScript errors in MiniOxygen tests - Change MiniOxygenOptions to MiniOxygenPreviewOptions in test files - Add proper type imports for Request, Response, and DispatchFetch - Add explicit types for onRequest callback parameters This resolves TypeScript compilation errors that were failing CI. * Update subscriptions recipe with account/subscriptions (#3124) * Delete unused variable --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 12, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 12, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 12, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 12, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor: use getStorefrontHeaders from oxygen module to remove duplication * chore: update changeset to major version and fix formatting --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 13, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * fix: address PR review comments - Remove unused skeletonPath variable in remote.ts - Add debug logging when package.json cannot be read for React Router version check * fix: resolve CI test failures by adding build dependencies - Add build dependency to test task in turbo.json - Fix mkdirSync usage in CLI tests (no recursive option) - Ensure tests have required dependencies built first * chore: remove test project directories These were accidentally created during test runs * fix: add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to test CI job The skeleton template doesn't have a lockfile since it's a template, not a deployed package. The CI test job needs to skip lockfile checks when running tests that build the skeleton template. --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 13, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * feat(skeleton): use hydrogenPreset in react-router config * feat(skeleton): migrate template to React Router 7.8.x - Update all routes to use React Router 7.8.x imports and patterns - Replace LoaderArgs/ActionArgs with Route.LoaderArgs/Route.ActionArgs - Update type imports to use ./+types/[route] pattern - Replace @shopify/remix-oxygen imports with react-router - Update context.ts to use createHydrogenRouterContext pattern - Configure react-router.config.ts with hydrogenPreset - Update package.json dependencies for React Router 7.8.x - All npm scripts now pass with zero issues * chore: trigger CI after rebase * fix(skeleton): use customerAccount.i18n.language for Customer Account API operations - Updated all account routes to consistently use context.customerAccount.i18n.language - This ensures Customer Account API mutations receive the correct LanguageCode type - Storefront API operations continue to use context.storefront.i18n * test: update i18n replacers snapshot for React Router 7.8.x context structure * ci: temporarily disable recipe validation for React Router 7.8.x migration * feat(skeleton): migrate to @shopify/hydrogen/oxygen imports - Remove @shopify/remix-oxygen dependency from package.json - Update server.ts to import createRequestHandler from @shopify/hydrogen/oxygen - Add comprehensive changeset documenting all migration changes - Update CI to temporarily disable recipe validation * fix: remove markdown header from changeset to pass lint check * Address PR #3141 review comments - Refactor: destructure customerAccount from context in account routes - Change context.customerAccount.i18n.language to customerAccount.i18n.language - Remove caret from typescript version in skeleton package.json (5.9.2 instead of ^5.9.2) * format * fix: remove isHydrogenMonorepo logic from vite plugin to match main The merge incorrectly introduced isHydrogenMonorepo logic that doesn't exist in the main branch. This simplifies the optimizeDeps configuration to match what's in origin/main, fixing the TypeScript compilation error. --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
rbshop
pushed a commit
that referenced
this pull request
Sep 16, 2025
… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild
rbshop
pushed a commit
that referenced
this pull request
Sep 16, 2025
juanpprieto
added a commit
that referenced
this pull request
Sep 16, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * feat(skeleton): use hydrogenPreset in react-router config * feat(skeleton): migrate template to React Router 7.8.x - Update all routes to use React Router 7.8.x imports and patterns - Replace LoaderArgs/ActionArgs with Route.LoaderArgs/Route.ActionArgs - Update type imports to use ./+types/[route] pattern - Replace @shopify/remix-oxygen imports with react-router - Update context.ts to use createHydrogenRouterContext pattern - Configure react-router.config.ts with hydrogenPreset - Update package.json dependencies for React Router 7.8.x - All npm scripts now pass with zero issues * chore: trigger CI after rebase * fix(skeleton): use customerAccount.i18n.language for Customer Account API operations - Updated all account routes to consistently use context.customerAccount.i18n.language - This ensures Customer Account API mutations receive the correct LanguageCode type - Storefront API operations continue to use context.storefront.i18n * test: update i18n replacers snapshot for React Router 7.8.x context structure * ci: temporarily disable recipe validation for React Router 7.8.x migration * feat(skeleton): migrate to @shopify/hydrogen/oxygen imports - Remove @shopify/remix-oxygen dependency from package.json - Update server.ts to import createRequestHandler from @shopify/hydrogen/oxygen - Add comprehensive changeset documenting all migration changes - Update CI to temporarily disable recipe validation * fix: remove markdown header from changeset to pass lint check * feat(examples): migrate examples to React Router 7.8.x and fix Customer Account API compatibility This commit completes the migration of all Hydrogen examples to React Router 7.8.x and fixes type compatibility issues between Storefront API and Customer Account API. ## Key Changes ### React Router 7.8.x Migration - Migrated all examples from Remix to React Router 7.8.x - Updated all imports from `@shopify/remix-oxygen` to `@shopify/hydrogen/oxygen` - Removed `@shopify/remix-oxygen` dependency from all examples - Updated server.ts files to use `createRequestHandler` from `@shopify/hydrogen/oxygen` - Converted file-based routing to React Router configuration ### Customer Account API Fixes - Fixed language parameter usage for Customer Account API operations - Changed from `context.storefront.i18n.language` to `context.customerAccount.i18n.language` - Updated all account-related routes across all examples - Fixed account.addresses.tsx files to properly destructure from `customerAccount` instead of `storefront` - Ensured proper type compatibility between Storefront and Customer Account APIs ### Examples Updated - b2b: Fixed Customer Account language usage and B2B-specific functionality - custom-cart-method: Updated cart implementation with new API patterns - gtm: Integrated Google Tag Manager with proper API usage - infinite-scroll: Updated pagination with Customer Account API - legacy-customer-account-flow: Preserved Storefront API usage (as intended for legacy flow) - metaobjects: Fixed metaobject queries with proper language parameters - multipass: Preserved Storefront API usage (as intended for multipass authentication) - partytown: Updated with proper Customer Account API integration - third-party-queries-caching: Fixed caching patterns with new API usage - hydrogen-express: Updated Express.js integration for React Router 7.8.x ### CI/CD Updates - Re-enabled example deployments to Oxygen (removed temporary disable) - All examples now build and typecheck successfully - Ready for automated deployment on push ## Testing - ✅ All examples build successfully - ✅ All examples pass TypeScript type checking - ✅ No remaining @shopify/remix-oxygen imports - ✅ Customer Account API operations use correct language parameters ## Breaking Changes None - all changes maintain backward compatibility while fixing type issues Fixes the TypeScript errors from PR #3139 related to enum type incompatibilities between Storefront API and Customer Account API language codes. * fix: remove non-existent --diff flag from oxygen deploy command * feat: add legacy-customer-account-flow to Oxygen deployment matrix * chore: remove guides folders from all examples - Removed guides folders containing predictiveSearch and search documentation from all 9 examples - Added legacy-customer-account-flow to Oxygen deployment matrix * fix: use existing token 1000022490 for legacy-customer-account-flow deployment * Fix CartSummary component to include warnings and userErrors props * Add third-party-api cookbook recipe Adds a new cookbook recipe demonstrating how to integrate third-party GraphQL APIs with Oxygen's sub-request caching. The recipe shows: - Creating a cached GraphQL client for external APIs - Integrating the client into Hydrogen's context - Fetching and displaying data from third-party APIs alongside Shopify data - TypeScript type augmentation for the custom context Uses the Rick & Morty GraphQL API as an example that can be adapted for any third-party API integration (CMS, reviews, analytics, etc). * Add custom-cart-method cookbook recipe Adds a new cookbook recipe demonstrating inline product option editing in cart. The recipe shows: - Custom cart method updateLineByOptions for variant selection - Inline dropdown selectors for product options in cart items - Automatic cart updates when options are changed - Full TypeScript support with proper type augmentation This implementation allows users to change product variants (size, color, etc.) directly within the cart without removing and re-adding items. * Delete migrated examples * Add migrate-example claude command * Add infinite-scroll cookbook recipe Adds a new cookbook recipe demonstrating infinite scroll functionality for collection pages. The recipe shows: - Automatic product loading as users scroll down - Integration with react-intersection-observer - Seamless pagination using Shopify's Pagination component - Preserves browser history and scroll position - Optimized loading with eager/lazy image strategies This improves the browsing experience on collection pages by replacing traditional pagination buttons with continuous scrolling. * delete infinite-scroll * Add metaobjects cookbook recipe Adds a new cookbook recipe demonstrating dynamic content management using Shopify metaobjects. The recipe shows: - Dynamic route-based content rendering with metaobjects - Modular section components (Hero, Featured Products, Featured Collections, Stores) - Content editing capabilities with direct links to Shopify admin - Rich text support with Slate editor - Comprehensive documentation with visual setup guides This enables merchants to create and manage dynamic content sections through the Shopify admin, providing a flexible CMS-like experience for building pages with reusable components. * delete metaobjects example * Add b2b cookbook recipe Adds a new cookbook recipe for B2B (Business-to-Business) functionality that enables: - Company location selection for B2B customers - Quantity rules (minimum, maximum, increment) on products - Volume-based price breaks for bulk purchases - Contextualized GraphQL queries with buyer information The recipe adds 6 new components and modifies 8 existing files to integrate B2B features throughout the cart, product display, and checkout flow. Requirements: - Shopify Plus plan with B2B enabled - New customer accounts activated - At least one B2B company configured * delete b2b * Add Google Tag Manager (GTM) cookbook recipe Adds a comprehensive cookbook recipe for integrating Google Tag Manager into Hydrogen storefronts. The recipe includes: - GTM script integration with CSP nonce support - Content Security Policy configuration for GTM/GA domains - Analytics event subscriber component using dataLayer - Support for GTM preview mode and Customer Privacy API Key features: - Proper security with nonce attributes - CSP rules for googletagmanager.com and google-analytics.com - Extensible GoogleTagManager component for custom events - Detailed setup instructions and troubleshooting guidance Users need to replace GTM-<YOUR_GTM_ID> with their actual container ID after applying the recipe. * delete gtm example * Add partytown cookbook recipe Adds a new cookbook recipe demonstrating Partytown + GTM integration. The recipe shows: - Web worker integration for third-party scripts - Google Tag Manager setup with CSP support - CORS reverse proxy for script loading - Performance optimization for Core Web Vitals This recipe moves third-party scripts off the main thread using Partytown's web worker approach, improving page performance and Core Web Vitals metrics. * Improve migrate-example command * delete partytown example * Add legacy-customer-account-flow cookbook recipe Adds a new cookbook recipe that converts a Hydrogen app from the new Customer Account API to the legacy customer account flow using the Storefront API. This is useful for stores that haven't migrated to the new Customer Account API yet. The recipe provides: - Full customer registration and login flow - Password recovery and reset functionality - Account activation via email - Customer profile management - Order history and address management - Session-based authentication using customer access tokens - Updated README with legacy authentication documentation Also updates migrate-example.md to clarify using 'generate' vs 'regenerate' commands. * delete legacy account example * Add multipass cookbook recipe Adds a new cookbook recipe demonstrating Shopify Plus Multipass authentication. The recipe shows: - Multipass token generation for session persistence through checkout - Storefront API-based authentication (replacing Customer Account API) - Custom login, registration, and account management routes - Seamless checkout experience for logged-in customers - Automatic fallback for non-Plus stores This recipe is useful for Shopify Plus merchants who want to maintain customer sessions from their Hydrogen storefront through to the Shopify checkout, providing a seamless authenticated experience. * delete multipass example * Add express cookbook recipe Adds a new cookbook recipe that transforms the Hydrogen skeleton to run with Node.js Express instead of Shopify Oxygen. The recipe demonstrates: - Running Hydrogen with Express server - Custom development server orchestration - In-memory cache implementation for Node.js - Minimal route setup (index and product pages) - React Router 7 integration with Express This enables developers to deploy Hydrogen to any Node.js hosting platform instead of being limited to Cloudflare Workers/Oxygen. * delete final express example * fix: correct changeset version from minor to major Aligns with origin/main where this breaking change is correctly marked as major * Add README patch to GTM recipe - Added comprehensive README patch that merges GTM-specific documentation with skeleton template - Updates recipe.yaml with description for README.md step * Add README patch to metaobjects recipe - Added comprehensive README patch that merges metaobjects CMS documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents metaobjects architecture, setup instructions, and section creation process * Add README patch to infinite-scroll recipe - Added comprehensive README patch that merges infinite scroll documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents implementation details, features, and customization options * Add README patch to custom-cart-method recipe - Added comprehensive README patch that merges custom cart method documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents inline variant editing, implementation details, and customization options * Update bundles recipe for React Router 7.8.x compatibility - Removed all patches that modify @shopify/remix-oxygen imports - Fixed line number mismatches in all patch files - Updated patches to work with consolidated react-router imports - Generated new patch files with updated hashes - Recipe now applies cleanly without offset warnings - All bundle features working correctly with new import structure Key changes: - _index.tsx: Removed import formatting changes, fixed line numbers - products.$handle.tsx: Removed import modifications, adjusted line offsets - collections.$handle.tsx: Removed redundant import additions - All patches now target correct line numbers in skeleton - No .orig files created when patches apply exactly * Update combined-listings recipe for React Router 7.8.x compatibility - Updated all patch files to work with React Router 7.8.x import structure - Removed expectations of @shopify/remix-oxygen imports - All patches now compatible with consolidated 'react-router' imports - Fixed inverted logic bug in ProductForm selectedVariant prop - Successfully regenerated recipe with new patch hashes - Recipe applies cleanly to skeleton template without creating .orig files - Added note about React Router 7.8.x compatibility to recipe.yaml * Update markets recipe for React Router 7.8.x compatibility This comprehensive update brings the markets recipe to full compatibility with React Router 7.8.x and adds complete localization support across all routes. Changes: - Updated all imports from '@remix-run/*' to 'react-router' - Converted all routes to support ($locale) dynamic segments - Added unified Link component for locale-aware navigation - Implemented CountrySelector with cart buyer identity updates - Added comprehensive i18n utilities with locale detection - Generated new patches reflecting all changes The recipe now converts the entire skeleton to a multi-region setup with: - Path-based locale routing (e.g., /FR-CA/products) - Automatic locale detection and redirection - Country/language selector with cart integration - Locale-aware meta tags and canonical URLs - Support for EN-US, EN-CA, FR-CA, and FR-FR by default * Update subscriptions recipe for React Router 7.8.x compatibility Updated the subscriptions recipe from origin/feat/recipes-rr-7.8 branch to ensure full compatibility with React Router 7.8.x. Changes: - Updated all imports from '@remix-run/*' to 'react-router' - Fixed GraphQL queries to match current Customer Account API schema - Removed deprecated subscription discount fields that no longer exist in the API - Simplified account.subscriptions.tsx to work with current API structure - Generated new patches reflecting all changes The recipe now: - Applies cleanly to the skeleton template - Passes all validation steps (codegen, typecheck, build, dev server) - Properly displays subscription options on product pages - Shows subscription details in cart line items - Adds subscription management page to customer account All patches have been regenerated with updated hashes to match the current skeleton structure. * Update third-party-api recipe for React Router 7.8.x compatibility - Updated patches to add functionality without removing existing Shopify features - Patches now work with consolidated 'react-router' imports - Added comprehensive documentation to recipe.yaml with use cases and next steps - Generated new LLM prompts for AI-assisted development - Added README patch to document third-party API integration - Recipe applies cleanly without creating .orig files - All TypeScript checks pass successfully * Update the partytown recipe * Update metaobject recipe * Update legacy-customer-account-flow recipe for React Router 7.8.x compatibility - Fix all patches to use consolidated React Router imports from 'react-router' - Update patches to properly convert from Customer Account API to Storefront API - Add login/logout route patches that were missing - Remove patches for non-existent files (account.profile.tsx, cart.tsx) - Update recipe.yaml with comprehensive documentation - Add troubleshooting tips and next steps - Fix TypeScript compatibility issues with generated types * Update multipass recipe for React Router 7.8.x compatibility - Convert all account routes from Customer Account API to Storefront API - Replace snakecase-keys with custom ESM-compatible implementation - Add comprehensive documentation and troubleshooting guide - Fix TypeScript definitions for multipass environment variable - Update all patches to work with consolidated react-router imports * Update express recipe for React Router 7.8.x compatibility - Fix circular reference in eslint.config.js patch - Update vite.config.ts patch to remove oxygen plugin - Update tsconfig.json patch for proper types configuration - Update root.tsx patch for Express environment - Add comprehensive documentation to recipe.yaml - Document requirements, notes, and next steps for users * Update lock * Fix format * Fix recipes * fix recipes * fix express * Fix expres * Re-enable recipes validation * Skip old example test * fix: Update package-lock.json to sync with package.json The package-lock.json was out of sync causing CI failures with npm ci. This commit updates the lock file to match the current dependency tree. * fix: Add .gitkeep files to empty ingredients directories The custom-cart-method and infinite-scroll recipes have empty ingredients directories which weren't tracked by git, causing CI validation failures. Added .gitkeep files to ensure these directories exist in CI environment. * Fix multipass validation * Fix multipass patch * Fix multipass env.d.ts patch * Fix infinite-scroll and custom-cart-method ingredients * fix: Handle missing ingredients directory in recipe validation - Check if ingredients directory exists before attempting to read it - Return empty array when directory doesn't exist instead of throwing error - Fixes CI validation failures for recipes with no ingredient files * Fix multipass and generate command * feat: Deploy recipe-applied templates instead of examples - Modified deploy-examples.yml to apply recipes to skeleton template - Deploys 4 recipe versions: metaobjects, third-party-api, custom-cart-method, legacy-customer-account-flow - Each deployment applies recipe, builds, and deploys to Oxygen - Runs on push to main, PR changes to templates/cookbook, or manual trigger - Adds recipe name to deployment description for clarity * fix: Add codegen step before build in deploy-examples workflow - Run npm run codegen to generate GraphQL types before building - Fixes CI failure where build was failing due to missing generated types * fix: Reset template directory after building packages in CI - Add step to reset templates/skeleton after npm run build:pkg - Prevents 'uncommitted changes' error when applying recipes - Uses git checkout and git clean to ensure clean state * fix: Skip git status check in CI environment - Modified cookbook apply.ts to skip git status check when CI=true - Removed unnecessary template reset step from workflow - This avoids false positives from build artifacts in CI * fix: Use npm install instead of npm ci after applying recipes - Recipes may modify package.json dependencies - npm ci fails when package-lock.json is out of sync - npm install will update the lock file as needed * fix: Use --path flag for all hydrogen commands in CI - Deploy recipes from temporary directory outside monorepo - Use --path flag for codegen, build, and deploy commands - This ensures commands run against the isolated project copy * fix: Use npm link to connect local packages in CI - Link locally built packages before installing dependencies - Avoids peer dependency conflicts from npm registry versions - Ensures skeleton uses the correct monorepo package versions * fix: Use file: protocol instead of npm link to avoid duplicate graphql - Update package.json to use file: paths for local packages - Avoids duplicate graphql module issue from npm link - Ensures single graphql instance for codegen to work * fix: Build in monorepo context then copy for deployment - Run install, codegen, and build within the monorepo workspace - This uses the correct package versions without conflicts - Only copy to /tmp after building for the deployment step * Deploy from template folder * fix: Add --force flag to deploy command for CI --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 16, 2025
… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild
juanpprieto
pushed a commit
that referenced
this pull request
Sep 16, 2025
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* [2025-07] Update Storefront API and Customer Account API ## Summary Updated both Storefront API and Customer Account API from version 2025-04 to 2025-07 ## Changes - Updated version constants in hydrogen-react and hydrogen packages - Regenerated GraphQL types and schemas for both APIs - Updated all hardcoded version references in documentation and tests - Regenerated skeleton template types - Created 6 GitHub issues for tracking API changes implementation ## API Changes Tracked - #3076: Subscription discount data in Customer Account API - #3077: Cart warnings for non-applicable discount codes - #3078: BUYER_CANNOT_PURCHASE_FOR_COMPANY_LOCATION cart error - #3079: New order filter options in Customer Account API - #3080: Imperial units in UnitPriceMeasurement - #3081: Selling plan error handling in Cart mutations ## Validation - TypeScript: ✅ No errors - Tests: ✅ All passing - Lint:⚠️ 2 warnings (non-blocking import duplicates) - Build: ✅ Successful * Update skeleton @shopify/cli dependency to latest version - Update from ~3.80.4 to ~3.83.3 - Include in changeset documentation * Update package-lock.json for @shopify/cli dependency update * [2025-07] Fix Monorepo RR7 CI build failures and improve reliability (#3091) * fix: Complete React Router 7 migration for Express example The Express example was partially migrated to React Router 7 but missing critical configuration and dependencies, causing CI failures. Changes: - Add react-router.config.ts with proper preset and app directory configuration - Fix vite.config.ts to call reactRouter() without arguments (RR7 API change) - Add @react-router/dev as devDependency for TypeScript types - Update entry.server.tsx to remove unnecessary @remix-run/web-fetch import (Node 20+ provides native Response globally) - Fix environment variable loading using getEnv() helper - Add .gitignore for React Router generated type files - Update tsconfig.json to exclude generated directories The example now builds successfully with React Router 7's framework mode. * fix: Fix CLI build checks and TypeScript configuration Multiple CLI-specific issues were causing CI failures after recent refactoring. Changes: - Fix build-check.mjs to expect .jsx extensions (tsup outputs .tsx→.jsx) - Exclude assets/routes from TypeScript checking (template files for user projects) - Align ast-grep to version 0.33.0 to match @shopify/cli's bundled version - Fix isHydrogenMonorepo() detection to work in both dev and npm package contexts - Add 'as const' assertions for ast-grep 0.33.0 API compatibility Background: - Template files were moved to assets/routes in May 2024 and inadvertently included in TypeScript scope - ast-grep 0.34.1 conflicted with @shopify/cli's bundled 0.33.0 * fix: Fix CI workflow and monorepo build orchestration The CI workflow and Turbo configuration had multiple issues causing intermittent build failures, particularly the "No lockfile found" error. Changes: - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to typecheck step in CI (was only on build:all, but typecheck also triggers builds via Turbo) - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to turbo.json globalEnv - Add explicit build dependencies for all examples in turbo.json - Remove docs-preview from workspaces to prevent React Router version conflicts - Regenerate package-lock.json for dependency resolution The root cause was that the typecheck step depends on build tasks (per turbo.json) but wasn't receiving the lockfile check flag, causing skeleton builds to fail. This has been a source of CI instability since the monorepo migration. * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * chore: ignore tsup bundled config build artifacts During the build process, tsup creates temporary bundled configuration files (tsup.config.bundled_*.mjs) in each package directory. These are generated artifacts that should not be tracked in version control. These files: - Are created when running 'npm run build:all' or similar build commands - Contain bundled versions of tsup.config.ts files for build execution - Have random hash suffixes (e.g., tsup.config.bundled_jt705ss6fz.mjs) - Should be cleaned up automatically but sometimes persist Adding the pattern '**/tsup.config.bundled_*.mjs' to gitignore prevents these temporary build artifacts from cluttering git status and being accidentally committed. * fix: add missing TypeScript type definitions for cookbook dependencies Added @types/inquirer and @types/yargs to cookbook devDependencies to resolve TypeScript compilation errors when running cookbook commands. This fixes the TS7016 error: 'Could not find a declaration file for module inquirer' that occurs when running cookbook commands like 'npm run cookbook -- regenerate' on fresh branches or after clean installs. * chore: regenerate cookbook recipes with updated patch hashes Regenerated all cookbook recipes to update patch file hashes after recent changes to the skeleton template. This ensures the cookbook validation passes in CI by keeping the patches in sync with the current state of the skeleton template. The regeneration updates: - All patch files with new content hashes - Recipe YAML files with updated patch references - README and prompt files with current examples This fixes the 'Validate Recipes' CI job failure. * fix: Add lockfile check bypass to cookbook validation in CI The cookbook validation was failing because the skeleton template intentionally doesn't include a lockfile (templates shouldn't have lockfiles), but the hydrogen build command validates lockfile presence by default. This fix adds SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to the cookbook validation step, consistent with how other CI build tasks handle this requirement. * fix: Remove unnecessary cli-hydrogen dependency from root package.json The @shopify/cli-hydrogen dependency in the root package.json was causing npm to incorrectly attempt to run scripts in all workspace packages when executing root-level scripts like 'npm run build:pkg'. This resulted in confusing error messages when npm tried to run 'build:pkg' in packages that don't have that script defined (e.g., hydrogen-react). This dependency was likely added accidentally during the v3_routeConfig changes in March 2025 (commit 74ef1ba) but serves no actual purpose: - The root package doesn't use cli-hydrogen directly - Turbo.json already manages build dependencies correctly - Workspace packages are linked automatically by npm workspaces - The skeleton template correctly uses @shopify/cli (which bundles cli-hydrogen internally) Removing this dependency: - Eliminates the 'Missing script: build:pkg' error messages - Prevents npm from unnecessarily propagating script execution - Maintains all existing functionality (builds still work correctly) - Simplifies the dependency tree The actual build process through Turbo remains unchanged and continues to work as expected. * Suggested money changes for PR #3090 (#3097) * Support imperial units in UnitPriceMeasurement (#3107) * Support imperial units in UnitPriceMeasurement * remove unnecessary changeset * Use count instead of dimension, which doesn't exist * Don't commit claude settings in this PR to avoid cluttering the branch * [2025-07] Fix React Context error during client-side hydration (#3101) * Fix React Context errors in Vite dev server This fixes "Cannot read properties of null (reading 'useContext')" errors that occur when React Context hooks are used in development mode. Root Cause: Vite's module federation can cause multiple React instances to be loaded when @shopify/hydrogen is served as an external module. React Context requires a single React instance to function properly - when multiple instances exist, Context providers from one instance cannot be consumed by hooks from another instance, resulting in null context values. Solution: 1. Added resolve.dedupe for react, react-dom, and @shopify/hydrogen to ensure Vite uses a single instance of these packages 2. Modified optimizeDeps.include to conditionally optimize @shopify/hydrogen: - In production/regular projects: Optimize @shopify/hydrogen to prevent context errors - In monorepo development: Skip optimization to allow live reload of source changes This maintains development workflow in the monorepo while fixing the production build issue. * Fix React Context error during client-side hydration Resolves 'Cannot read properties of null (reading useContext)' error that occurred on first page load when using CSP with nonces. The issue was caused by NonceProvider being present during SSR but missing during client hydration, creating a React Context mismatch. Changes: - Export NonceProvider from @shopify/hydrogen for client-side usage - Add NonceProvider wrapper to skeleton's entry.client.tsx - Simplify Vite config to improve React Context stability * [2025-07] Display new Cart warnings in skeleton template (#3084) * [2025-07] Display all cart warnings with user-friendly messages (fixes #3077, #3085) * Remove CartWarning fragment from cart query - only available in mutations * Add support for all cart user error types in skeleton template (#3121) The Hydrogen cart handler's return type includes a union of three possible user error types: CartUserError, MetafieldsSetUserError, and MetafieldDeleteUserError. While the skeleton template currently only handles non-metafield operations, the TypeScript types from the cart handler don't narrow based on the specific operation performed. This change updates the CartUserErrors, CartMain, and CartSummary components to accept all three error types, resolving TypeScript errors and ensuring the components are compatible with any cart operation that might be added in the future. * Update Vitest from v1.0.4 to v3.2.4 across all packages (#3126) * Update Vitest from v1.0.4 to v3.2.4 across all packages - Upgrade vitest to ^3.2.4 in all 5 packages that use it - Upgrade @vitest/coverage-v8 to ^3.2.4 to match vitest version - Add vitest as devDependency to create-hydrogen package (was missing) - Add explicit coverage provider configuration (required in v3+) - Set provider: 'v8' in cli and hydrogen-react vitest configs Breaking change: Vitest v2+ requires explicit coverage provider config * Fix Vitest v3 Mock type breaking changes In Vitest v3, vi.fn() returns Mock<() => unknown> instead of Mock<any[], any>, requiring explicit type assertions or type parameters for mocks with specific return types. Changes: - Add type assertion for fetchWithServerCache mock in storefront.test.ts - Simplify Promise creation in session mocks (Promise.resolve instead of new Promise) - Fix Mock type usage in Image.test.tsx for console.warn assertions - Add vitest/globals to tsconfig for packages using global test functions - Keep jest types alongside vitest types for @testing-library/jest-dom compatibility The stricter typing in v3 catches more potential issues at compile time but requires updating existing mocks that relied on v1's permissive typing. * Fix formatting * Add CODEOWNERS file to automatically request team's review on non-draft PRs (#3133) * [2025-06] Fix MiniOxygen/Miniflare v4 redirects handling + Stable --customer-account-push flag (#3123) * Fix MiniOxygen to support React Router's redirectDocument for external redirects The Miniflare v4 update introduced a breaking change where dispatchFetch automatically follows redirects internally, preventing external OAuth redirects from working properly. React Router's redirectDocument() expects the browser to handle external redirects, but Miniflare was intercepting and following them within the worker runtime. This fix adds {redirect: 'manual'} to all dispatchFetch calls in MiniOxygen, which prevents Miniflare from following redirects automatically. This ensures that: - External redirects (like OAuth flows to Shopify's Customer Account API) are passed to the browser as intended - React Router's redirectDocument() works correctly for cross-origin navigation - The X-Remix-Reload-Document header is respected for full document reloads The implementation uses Function.prototype.call to pass both arguments to dispatchFetch while maintaining TypeScript compatibility, as the property accessor doesn't properly expose the second parameter in TypeScript definitions. Also adds .tryhydrogen.dev to Vite's allowedHosts for development testing. References: - cloudflare/workers-sdk#5018 - cloudflare/workers-sdk#5191 * Stabilize customer-account-push flag - Changed from customer-account-push__unstable to customer-account-push - Removed hidden: true to make flag visible in help - Fixed typo: Oauth → OAuth in description - Flag now works via CLI argument or SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH env var * Fix MiniOxygen redirect handling for OAuth flows Apply {redirect: 'manual'} to Miniflare's dispatchFetch calls to prevent automatic redirect following. This ensures external redirects (like OAuth) are passed to the browser instead of being followed internally. Changes: - Add redirect: 'manual' parameter to dispatchFetch in both worker and node environments - Fix Headers.getSetCookie() usage for proper Set-Cookie header handling - Add comprehensive tests for redirect behavior in both environments - Stabilize customer-account-push CLI flag (remove __unstable prefix) This fixes OAuth/PKCE authentication flows in React Router 7 where redirectDocument() and external redirects need to be handled by the browser, not the server. * Add changeset for OAuth redirect fixes and stabilized CLI flag * Fix intermittent CI test failures in MiniOxygen tests - Use dynamic port allocation (port: 0) for all test servers to prevent EADDRINUSE errors - Properly handle OS-assigned ports when using port 0 - Add server tracking and cleanup to ensure all servers are properly closed - Fix proxy server test to use dynamic port allocation This resolves race conditions and port conflicts that occur when tests run in parallel in CI environments. * Fix TypeScript errors in MiniOxygen tests - Change MiniOxygenOptions to MiniOxygenPreviewOptions in test files - Add proper type imports for Request, Response, and DispatchFetch - Add explicit types for onRequest callback parameters This resolves TypeScript compilation errors that were failing CI. * Update subscriptions recipe with account/subscriptions (#3124) * Delete unused variable --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor: use getStorefrontHeaders from oxygen module to remove duplication * chore: update changeset to major version and fix formatting --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * fix: address PR review comments - Remove unused skeletonPath variable in remote.ts - Add debug logging when package.json cannot be read for React Router version check * fix: resolve CI test failures by adding build dependencies - Add build dependency to test task in turbo.json - Fix mkdirSync usage in CLI tests (no recursive option) - Ensure tests have required dependencies built first * chore: remove test project directories These were accidentally created during test runs * fix: add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to test CI job The skeleton template doesn't have a lockfile since it's a template, not a deployed package. The CI test job needs to skip lockfile checks when running tests that build the skeleton template. --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * feat(skeleton): use hydrogenPreset in react-router config * feat(skeleton): migrate template to React Router 7.8.x - Update all routes to use React Router 7.8.x imports and patterns - Replace LoaderArgs/ActionArgs with Route.LoaderArgs/Route.ActionArgs - Update type imports to use ./+types/[route] pattern - Replace @shopify/remix-oxygen imports with react-router - Update context.ts to use createHydrogenRouterContext pattern - Configure react-router.config.ts with hydrogenPreset - Update package.json dependencies for React Router 7.8.x - All npm scripts now pass with zero issues * chore: trigger CI after rebase * fix(skeleton): use customerAccount.i18n.language for Customer Account API operations - Updated all account routes to consistently use context.customerAccount.i18n.language - This ensures Customer Account API mutations receive the correct LanguageCode type - Storefront API operations continue to use context.storefront.i18n * test: update i18n replacers snapshot for React Router 7.8.x context structure * ci: temporarily disable recipe validation for React Router 7.8.x migration * feat(skeleton): migrate to @shopify/hydrogen/oxygen imports - Remove @shopify/remix-oxygen dependency from package.json - Update server.ts to import createRequestHandler from @shopify/hydrogen/oxygen - Add comprehensive changeset documenting all migration changes - Update CI to temporarily disable recipe validation * fix: remove markdown header from changeset to pass lint check * Address PR #3141 review comments - Refactor: destructure customerAccount from context in account routes - Change context.customerAccount.i18n.language to customerAccount.i18n.language - Remove caret from typescript version in skeleton package.json (5.9.2 instead of ^5.9.2) * format * fix: remove isHydrogenMonorepo logic from vite plugin to match main The merge incorrectly introduced isHydrogenMonorepo logic that doesn't exist in the main branch. This simplifies the optimizeDeps configuration to match what's in origin/main, fixing the TypeScript compilation error. --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
* feat: pin React Router to exact version 7.8.2 across monorepo - Pin react-router and react-router-dom to exact 7.8.2 - Pin @react-router/* packages to exact 7.8.2 - Remove version ranges (~, ^) to ensure consistency - Update all packages, templates, and examples - Update package-lock.json to lock exact versions * fix: hoist @react-router/dev and fs-routes to fix CLI tests - Add @react-router/dev and @react-router/fs-routes to root devDependencies - Ensures packages are available in root node_modules for test symlinks - Fixes CLI setup test that creates temporary directories * fix: update .gitignore and example lint scripts for React Router 7.8.2 compatibility - Add .react-router to .gitignore (generated by React Router 7.8.2) - Remove deprecated --ext flag from example lint scripts for ESLint 9 compatibility * fix: update UIMatch test helper for React Router 7.8.2 compatibility - React Router 7.8.2 requires loaderData to be non-optional in UIMatch type - Add loaderData property to fillMatch helper in seo.test.ts * Lint and format * Lint and format * Add changeset * fix: TypeScript 5.9 compatibility updates - Upgrade TypeScript to 5.9.2 across all packages - Fix enum compatibility between Storefront and Customer Account APIs - Fix Navigation type mocks in hydrogen package tests - Fix BodyInit type compatibility in cache implementation * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Suggested money changes for PR #3090 (#3097) * fix: resolve eslint dependency issue in subscriptions example Add missing dependencies to useMemo hook to satisfy react-hooks/exhaustive-deps rule * fix: properly fix useMemo dependencies in subscriptions example Move params initialization inside useMemo to avoid recreating on every render * fix: resolve TypeScript 5.9 compatibility issues with ESLint and update dependencies This commit addresses critical TypeScript 5.9 compatibility issues that were blocking the React Router 7.8.x migration. The changes ensure all CI checks pass with zero errors. ## Key Changes: ### ESLint TypeScript Compatibility - Removed unused `eslint-plugin-hydrogen` package that was causing TypeScript version conflicts - Updated `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` to v8.42.0 - Pinned all ESLint-related package versions for consistency and reproducibility ### Fixed Lint Errors Across Examples - GTM example: Added missing `ready` and `subscribe` dependencies to useEffect hooks - Partytown example: Added missing `location.pathname` dependency, fixed iframe accessibility - Subscriptions example: Replaced deprecated @ts-ignore with @ts-expect-error directives - Added missing iframe title attributes for accessibility compliance ### Build Configuration - Added `dist/` to eslint ignores in skeleton template to prevent linting of built files - Standardized ESLint configuration across all examples using flat config format - Created eslint.config.js files for all examples to ensure consistent linting ### Dependencies - Added `@total-typescript/ts-reset@0.6.1` at monorepo level (pinned version) - Fixed duplicate import issue in hydrogen/src/seo/seo.ts ## Technical Details: The root cause was eslint-plugin-hydrogen depending on an older version of @typescript-eslint packages that don't support TypeScript 5.9. Since the plugin wasn't actively used in the codebase, removing it was the cleanest solution. All ESLint packages are now pinned to specific versions to prevent future compatibility issues during dependency updates. ## Testing: - ✅ All lint checks pass - ✅ All typecheck passes - ✅ No ESLint warnings about TypeScript version compatibility - ✅ All examples build successfully * ci: trigger CI workflows * chore: remove pr-plans and changeset files from migration branch These files were added during development but should not be part of the final PR: - Removed .github/pr-plans/ directory (planning documentation) - Removed .changeset/ files added during development These are internal development artifacts not needed for the React Router 7.8.x migration. * fix(hydrogen-react): update codegen.ts to use Storefront API types for Customer Account enums - Configure Customer Account API codegen to reference Storefront API types for LanguageCode and CurrencyCode enums - Ensures type compatibility between APIs when passing i18n.language from Storefront to Customer Account API - Regenerate Customer Account API types with proper enum references - Resolves TypeScript errors in skeleton template account routes * fix: address PR review feedback - Remove CI_ISSUES_REPORT.md and PR1_STATUS.md files - Restore deleted changeset file dry-swans-relate.md - Improve comment for SellingPlanGroup type assertion * fix: address PR review feedback - Remove .claude/commands/shopify-cli-update.md file - Regenerate GraphQL types to ensure correctness - Add changeset for enum compatibility fix * fix(hydrogen-react): restore separate enum types for Customer Account API - Remove enumValues override that forced Customer Account API to use Storefront API types - Allow Customer Account API to generate its own enum types (including USDC currency) - Update Money component and useMoney hook to handle union types properly - Fix test helper to use USDC as example of Customer Account API-specific currency - This properly supports runtime values like USDC that Customer Account API can return * chore: remove unrelated shopify-cli-update.md changes This file was inadvertently modified in commit 054c2b3 and should match the base branch version * fix: pin React and React-DOM to 18.3.1 across monorepo - Pin React to exactly 18.3.1 (no ^ or ~) in all packages - Pin React-DOM to exactly 18.3.1 where used - This resolves React version mismatch issues in monorepo - Fixes create-hydrogen test failures due to multiple React instances * fix: pin React to 18.3.1 across monorepo to resolve version conflicts - Pin React and React-DOM to exact version 18.3.1 in all packages - Add npm overrides to force React 18.3.1 for transitive dependencies - Fixes React hook errors caused by multiple React versions - All tests now passing (381 tests across 45 files) * fix: add missing ast-grep Linux x64 optional dependency for CI - Add @ast-grep/napi-linux-x64-gnu as optional dependency - Fixes CLI tests failing in Linux CI environment - Module was missing causing MODULE_NOT_FOUND errors * feat(hydrogen): add React Router 7.8.x support infrastructure Implement comprehensive React Router 7.8.x support in @shopify/hydrogen package matching the hydrogen-react-router-7.8.2-clean branch implementation. Core Infrastructure: - Add proxy-based hybrid context in createHydrogenContext for React Router compatibility - Implement unstable_RouterContextProvider with Hydrogen services - Enable both context.get() and direct property access patterns New Files: - Add context-keys.ts with React Router context keys for Hydrogen services - Add react-router-preset.ts for React Router configuration - Add react-router.d.ts for module augmentation Type System Updates: - Add HydrogenRouterContextProvider interface to types.d.ts - Update dev.env.d.ts with React Router type augmentation - Export context keys and NonceProvider from index.ts Build Configuration: - Add react-router-preset build targets in tsup.config.ts - Add react-router-types and react-router-preset exports in package.json - Include React Router in Vite SSR no-external list Documentation and Examples: - Update customer.auth-handler.example.tsx with React Router imports - Update virtual routes to use react-router imports All tests pass and skeleton template builds successfully with these changes. * feat(hydrogen): export hydrogenContext for React Router context.get() pattern Export a single hydrogenContext object containing all Hydrogen service context keys. This enables users to access Hydrogen services using React Router's context.get() pattern while maintaining compatibility with the existing direct property access pattern. Changes: - Add hydrogenContext grouped export with all service context keys - Remove individual context key exports from package (internal use only) - Add comprehensive tests verifying both access patterns work - Add documentation and examples for hydrogenContext usage - Verify proxy-based context supports both get/set methods and direct access The proxy implementation in createHydrogenContext ensures both patterns work: 1. Direct access: const {storefront, cart} = context 2. Context.get(): const storefront = context.get(hydrogenContext.storefront) This provides a cleaner API with better discoverability and type safety. * Add changeset for hydrogen React Router 7.8.x support * test(hydrogen): add comprehensive tests for React Router 7.8.x integration - Add tests for HydrogenRouterContextProvider type augmentations - Add tests for React Router preset configuration and validation - Add tests for createHydrogenContext proxy behavior - Add minimal export tests for critical API surface validation - Test context.get() and context.set() patterns from React Router - Verify hydrogenContext export structure and API isolation * fix: apply linting and formatting * Add @shopify/hydrogen/oxygen export path Creates new oxygen export with: - createRequestHandler: Oxygen-specific wrapper around React Router's handler - Request validation (GET/HEAD with body check) - URL normalization (double slash handling) - Powered-by header injection - getStorefrontHeaders: Extract Oxygen headers from requests This replaces the functionality from @shopify/remix-oxygen * Move stack trace improvements to Vite plugin for Oxygen builds Adds Error.prototype.toString override to Vite's crossBoundarySetup so it's automatically injected into Oxygen worker environments. This replaces the runtime override that was in remix-oxygen. * Update TypeScript references from remix-oxygen to oxygen-workers-types Updates /// <reference types> directives in env.d.ts files to use @shopify/oxygen-workers-types instead of @shopify/remix-oxygen * docs: improve changeset with comprehensive examples for React Router 7.8.x features * docs: add createRequestHandler export details to changeset * docs: update documentation URL to use 2025-07 API version Address PR #3142 feedback - update outdated 2025-01 documentation URL * fix: remove unnecessary comments in createHydrogenContext - Remove comment explaining HydrogenContextOverloads interface - Remove commented-out function signature that duplicated the actual implementation * fix: update UnitPriceMeasurement documentation URL to 2025-07 * Regen docs * feat: add customerAccount.i18n support for Customer Account API - Added i18n property to CustomerAccount type with language field - Made I18nBase.language a union of StorefrontLanguageCode | CustomerLanguageCode - Added cast in createHydrogenContext with explanatory comment - Updated test snapshots to reflect new context structure This enables skeleton templates to use context.customerAccount.i18n.language for Customer Account API operations while maintaining type safety * test: update i18n replacers snapshot for React Router 7.8.x context structure * refactor(cli): remove diff-based development system Remove the deprecated --diff flag and associated functionality from all CLI commands. The diff system is no longer needed with React Router 7.8.x standalone applications. Changes: - Remove --diff flag from build, dev, preview, codegen commands - Delete template-diff.ts and related diff utilities - Clean up onboarding and live-reload code - Update CLI manifest and documentation This simplifies the CLI and removes complexity that's no longer needed. * ci: temporarily disable examples and recipes from CI for React Router 7.8.x migration - Remove all example folders from npm workspaces array - Rename build:examples and typecheck:examples scripts to disabled variants - Update CI workflow step names to reflect only packages and templates are built - Examples will fail due to skeleton template React Router 7.8.x changes - This is temporary until examples are updated to match new skeleton patterns * test: fix failing tests after diff removal - Fix plugin-autolinker test by clearing CI environment variables in beforeEach The console.log for auto-linking is only shown when not in CI, so tests need to ensure CI and GITHUB_ACTIONS env vars are cleared - Update remote.test.ts to reflect that examples are now copied directly Since diff functionality was removed, examples are copied as-is rather than having diffs applied. Updated test expectations accordingly. - Exclude env.d.ts from JS transpilation test since it's a TypeScript-only file * feat: add React Router version checking to dev command * fix: make transpile handle missing app/routes.ts for examples * test: skip example template tests until examples are standalone - Skip 'creates basic projects from example templates' test - Skip 'transpiles projects to JS' test - Both tests fail because --diff flag was removed but examples are still diff-based - Will be re-enabled in Branch 4 when examples are converted to standalone - Added TODO comments explaining the situation * format * delete .md * fix: remove incorrectly added React dependencies from CLI package The CLI package doesn't need React as a runtime dependency. These were incorrectly added during the diff removal refactor. * fix(ci): disable examples deployment and fix build:all script - Disable examples deployment workflow during React Router 7.8.x migration - Fix build:all to use build:examples:disabled instead of build:examples - Examples are not in workspaces and need separate migration * feat(skeleton): use hydrogenPreset in react-router config * feat(skeleton): migrate template to React Router 7.8.x - Update all routes to use React Router 7.8.x imports and patterns - Replace LoaderArgs/ActionArgs with Route.LoaderArgs/Route.ActionArgs - Update type imports to use ./+types/[route] pattern - Replace @shopify/remix-oxygen imports with react-router - Update context.ts to use createHydrogenRouterContext pattern - Configure react-router.config.ts with hydrogenPreset - Update package.json dependencies for React Router 7.8.x - All npm scripts now pass with zero issues * chore: trigger CI after rebase * fix(skeleton): use customerAccount.i18n.language for Customer Account API operations - Updated all account routes to consistently use context.customerAccount.i18n.language - This ensures Customer Account API mutations receive the correct LanguageCode type - Storefront API operations continue to use context.storefront.i18n * test: update i18n replacers snapshot for React Router 7.8.x context structure * ci: temporarily disable recipe validation for React Router 7.8.x migration * feat(skeleton): migrate to @shopify/hydrogen/oxygen imports - Remove @shopify/remix-oxygen dependency from package.json - Update server.ts to import createRequestHandler from @shopify/hydrogen/oxygen - Add comprehensive changeset documenting all migration changes - Update CI to temporarily disable recipe validation * fix: remove markdown header from changeset to pass lint check * feat(examples): migrate examples to React Router 7.8.x and fix Customer Account API compatibility This commit completes the migration of all Hydrogen examples to React Router 7.8.x and fixes type compatibility issues between Storefront API and Customer Account API. ## Key Changes ### React Router 7.8.x Migration - Migrated all examples from Remix to React Router 7.8.x - Updated all imports from `@shopify/remix-oxygen` to `@shopify/hydrogen/oxygen` - Removed `@shopify/remix-oxygen` dependency from all examples - Updated server.ts files to use `createRequestHandler` from `@shopify/hydrogen/oxygen` - Converted file-based routing to React Router configuration ### Customer Account API Fixes - Fixed language parameter usage for Customer Account API operations - Changed from `context.storefront.i18n.language` to `context.customerAccount.i18n.language` - Updated all account-related routes across all examples - Fixed account.addresses.tsx files to properly destructure from `customerAccount` instead of `storefront` - Ensured proper type compatibility between Storefront and Customer Account APIs ### Examples Updated - b2b: Fixed Customer Account language usage and B2B-specific functionality - custom-cart-method: Updated cart implementation with new API patterns - gtm: Integrated Google Tag Manager with proper API usage - infinite-scroll: Updated pagination with Customer Account API - legacy-customer-account-flow: Preserved Storefront API usage (as intended for legacy flow) - metaobjects: Fixed metaobject queries with proper language parameters - multipass: Preserved Storefront API usage (as intended for multipass authentication) - partytown: Updated with proper Customer Account API integration - third-party-queries-caching: Fixed caching patterns with new API usage - hydrogen-express: Updated Express.js integration for React Router 7.8.x ### CI/CD Updates - Re-enabled example deployments to Oxygen (removed temporary disable) - All examples now build and typecheck successfully - Ready for automated deployment on push ## Testing - ✅ All examples build successfully - ✅ All examples pass TypeScript type checking - ✅ No remaining @shopify/remix-oxygen imports - ✅ Customer Account API operations use correct language parameters ## Breaking Changes None - all changes maintain backward compatibility while fixing type issues Fixes the TypeScript errors from PR #3139 related to enum type incompatibilities between Storefront API and Customer Account API language codes. * fix: remove non-existent --diff flag from oxygen deploy command * feat: add legacy-customer-account-flow to Oxygen deployment matrix * chore: remove guides folders from all examples - Removed guides folders containing predictiveSearch and search documentation from all 9 examples - Added legacy-customer-account-flow to Oxygen deployment matrix * fix: use existing token 1000022490 for legacy-customer-account-flow deployment * Fix CartSummary component to include warnings and userErrors props * Add third-party-api cookbook recipe Adds a new cookbook recipe demonstrating how to integrate third-party GraphQL APIs with Oxygen's sub-request caching. The recipe shows: - Creating a cached GraphQL client for external APIs - Integrating the client into Hydrogen's context - Fetching and displaying data from third-party APIs alongside Shopify data - TypeScript type augmentation for the custom context Uses the Rick & Morty GraphQL API as an example that can be adapted for any third-party API integration (CMS, reviews, analytics, etc). * Add custom-cart-method cookbook recipe Adds a new cookbook recipe demonstrating inline product option editing in cart. The recipe shows: - Custom cart method updateLineByOptions for variant selection - Inline dropdown selectors for product options in cart items - Automatic cart updates when options are changed - Full TypeScript support with proper type augmentation This implementation allows users to change product variants (size, color, etc.) directly within the cart without removing and re-adding items. * Delete migrated examples * Add migrate-example claude command * Add infinite-scroll cookbook recipe Adds a new cookbook recipe demonstrating infinite scroll functionality for collection pages. The recipe shows: - Automatic product loading as users scroll down - Integration with react-intersection-observer - Seamless pagination using Shopify's Pagination component - Preserves browser history and scroll position - Optimized loading with eager/lazy image strategies This improves the browsing experience on collection pages by replacing traditional pagination buttons with continuous scrolling. * delete infinite-scroll * Add metaobjects cookbook recipe Adds a new cookbook recipe demonstrating dynamic content management using Shopify metaobjects. The recipe shows: - Dynamic route-based content rendering with metaobjects - Modular section components (Hero, Featured Products, Featured Collections, Stores) - Content editing capabilities with direct links to Shopify admin - Rich text support with Slate editor - Comprehensive documentation with visual setup guides This enables merchants to create and manage dynamic content sections through the Shopify admin, providing a flexible CMS-like experience for building pages with reusable components. * delete metaobjects example * Add b2b cookbook recipe Adds a new cookbook recipe for B2B (Business-to-Business) functionality that enables: - Company location selection for B2B customers - Quantity rules (minimum, maximum, increment) on products - Volume-based price breaks for bulk purchases - Contextualized GraphQL queries with buyer information The recipe adds 6 new components and modifies 8 existing files to integrate B2B features throughout the cart, product display, and checkout flow. Requirements: - Shopify Plus plan with B2B enabled - New customer accounts activated - At least one B2B company configured * delete b2b * Add Google Tag Manager (GTM) cookbook recipe Adds a comprehensive cookbook recipe for integrating Google Tag Manager into Hydrogen storefronts. The recipe includes: - GTM script integration with CSP nonce support - Content Security Policy configuration for GTM/GA domains - Analytics event subscriber component using dataLayer - Support for GTM preview mode and Customer Privacy API Key features: - Proper security with nonce attributes - CSP rules for googletagmanager.com and google-analytics.com - Extensible GoogleTagManager component for custom events - Detailed setup instructions and troubleshooting guidance Users need to replace GTM-<YOUR_GTM_ID> with their actual container ID after applying the recipe. * delete gtm example * Add partytown cookbook recipe Adds a new cookbook recipe demonstrating Partytown + GTM integration. The recipe shows: - Web worker integration for third-party scripts - Google Tag Manager setup with CSP support - CORS reverse proxy for script loading - Performance optimization for Core Web Vitals This recipe moves third-party scripts off the main thread using Partytown's web worker approach, improving page performance and Core Web Vitals metrics. * Improve migrate-example command * delete partytown example * Add legacy-customer-account-flow cookbook recipe Adds a new cookbook recipe that converts a Hydrogen app from the new Customer Account API to the legacy customer account flow using the Storefront API. This is useful for stores that haven't migrated to the new Customer Account API yet. The recipe provides: - Full customer registration and login flow - Password recovery and reset functionality - Account activation via email - Customer profile management - Order history and address management - Session-based authentication using customer access tokens - Updated README with legacy authentication documentation Also updates migrate-example.md to clarify using 'generate' vs 'regenerate' commands. * delete legacy account example * Add multipass cookbook recipe Adds a new cookbook recipe demonstrating Shopify Plus Multipass authentication. The recipe shows: - Multipass token generation for session persistence through checkout - Storefront API-based authentication (replacing Customer Account API) - Custom login, registration, and account management routes - Seamless checkout experience for logged-in customers - Automatic fallback for non-Plus stores This recipe is useful for Shopify Plus merchants who want to maintain customer sessions from their Hydrogen storefront through to the Shopify checkout, providing a seamless authenticated experience. * delete multipass example * Add express cookbook recipe Adds a new cookbook recipe that transforms the Hydrogen skeleton to run with Node.js Express instead of Shopify Oxygen. The recipe demonstrates: - Running Hydrogen with Express server - Custom development server orchestration - In-memory cache implementation for Node.js - Minimal route setup (index and product pages) - React Router 7 integration with Express This enables developers to deploy Hydrogen to any Node.js hosting platform instead of being limited to Cloudflare Workers/Oxygen. * delete final express example * fix: correct changeset version from minor to major Aligns with origin/main where this breaking change is correctly marked as major * Add README patch to GTM recipe - Added comprehensive README patch that merges GTM-specific documentation with skeleton template - Updates recipe.yaml with description for README.md step * Add README patch to metaobjects recipe - Added comprehensive README patch that merges metaobjects CMS documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents metaobjects architecture, setup instructions, and section creation process * Add README patch to infinite-scroll recipe - Added comprehensive README patch that merges infinite scroll documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents implementation details, features, and customization options * Add README patch to custom-cart-method recipe - Added comprehensive README patch that merges custom cart method documentation with skeleton template - Updates recipe.yaml with description for README.md step - Documents inline variant editing, implementation details, and customization options * Update bundles recipe for React Router 7.8.x compatibility - Removed all patches that modify @shopify/remix-oxygen imports - Fixed line number mismatches in all patch files - Updated patches to work with consolidated react-router imports - Generated new patch files with updated hashes - Recipe now applies cleanly without offset warnings - All bundle features working correctly with new import structure Key changes: - _index.tsx: Removed import formatting changes, fixed line numbers - products.$handle.tsx: Removed import modifications, adjusted line offsets - collections.$handle.tsx: Removed redundant import additions - All patches now target correct line numbers in skeleton - No .orig files created when patches apply exactly * Update combined-listings recipe for React Router 7.8.x compatibility - Updated all patch files to work with React Router 7.8.x import structure - Removed expectations of @shopify/remix-oxygen imports - All patches now compatible with consolidated 'react-router' imports - Fixed inverted logic bug in ProductForm selectedVariant prop - Successfully regenerated recipe with new patch hashes - Recipe applies cleanly to skeleton template without creating .orig files - Added note about React Router 7.8.x compatibility to recipe.yaml * Update markets recipe for React Router 7.8.x compatibility This comprehensive update brings the markets recipe to full compatibility with React Router 7.8.x and adds complete localization support across all routes. Changes: - Updated all imports from '@remix-run/*' to 'react-router' - Converted all routes to support ($locale) dynamic segments - Added unified Link component for locale-aware navigation - Implemented CountrySelector with cart buyer identity updates - Added comprehensive i18n utilities with locale detection - Generated new patches reflecting all changes The recipe now converts the entire skeleton to a multi-region setup with: - Path-based locale routing (e.g., /FR-CA/products) - Automatic locale detection and redirection - Country/language selector with cart integration - Locale-aware meta tags and canonical URLs - Support for EN-US, EN-CA, FR-CA, and FR-FR by default * Update subscriptions recipe for React Router 7.8.x compatibility Updated the subscriptions recipe from origin/feat/recipes-rr-7.8 branch to ensure full compatibility with React Router 7.8.x. Changes: - Updated all imports from '@remix-run/*' to 'react-router' - Fixed GraphQL queries to match current Customer Account API schema - Removed deprecated subscription discount fields that no longer exist in the API - Simplified account.subscriptions.tsx to work with current API structure - Generated new patches reflecting all changes The recipe now: - Applies cleanly to the skeleton template - Passes all validation steps (codegen, typecheck, build, dev server) - Properly displays subscription options on product pages - Shows subscription details in cart line items - Adds subscription management page to customer account All patches have been regenerated with updated hashes to match the current skeleton structure. * Update third-party-api recipe for React Router 7.8.x compatibility - Updated patches to add functionality without removing existing Shopify features - Patches now work with consolidated 'react-router' imports - Added comprehensive documentation to recipe.yaml with use cases and next steps - Generated new LLM prompts for AI-assisted development - Added README patch to document third-party API integration - Recipe applies cleanly without creating .orig files - All TypeScript checks pass successfully * Update the partytown recipe * Update metaobject recipe * Update legacy-customer-account-flow recipe for React Router 7.8.x compatibility - Fix all patches to use consolidated React Router imports from 'react-router' - Update patches to properly convert from Customer Account API to Storefront API - Add login/logout route patches that were missing - Remove patches for non-existent files (account.profile.tsx, cart.tsx) - Update recipe.yaml with comprehensive documentation - Add troubleshooting tips and next steps - Fix TypeScript compatibility issues with generated types * Update multipass recipe for React Router 7.8.x compatibility - Convert all account routes from Customer Account API to Storefront API - Replace snakecase-keys with custom ESM-compatible implementation - Add comprehensive documentation and troubleshooting guide - Fix TypeScript definitions for multipass environment variable - Update all patches to work with consolidated react-router imports * Update express recipe for React Router 7.8.x compatibility - Fix circular reference in eslint.config.js patch - Update vite.config.ts patch to remove oxygen plugin - Update tsconfig.json patch for proper types configuration - Update root.tsx patch for Express environment - Add comprehensive documentation to recipe.yaml - Document requirements, notes, and next steps for users * Update lock * Fix format * Fix recipes * fix recipes * fix express * Fix expres * Re-enable recipes validation * Skip old example test * fix: Update package-lock.json to sync with package.json The package-lock.json was out of sync causing CI failures with npm ci. This commit updates the lock file to match the current dependency tree. * fix: Add .gitkeep files to empty ingredients directories The custom-cart-method and infinite-scroll recipes have empty ingredients directories which weren't tracked by git, causing CI validation failures. Added .gitkeep files to ensure these directories exist in CI environment. * Fix multipass validation * Fix multipass patch * Fix multipass env.d.ts patch * Fix infinite-scroll and custom-cart-method ingredients * fix: Handle missing ingredients directory in recipe validation - Check if ingredients directory exists before attempting to read it - Return empty array when directory doesn't exist instead of throwing error - Fixes CI validation failures for recipes with no ingredient files * Fix multipass and generate command * feat: Deploy recipe-applied templates instead of examples - Modified deploy-examples.yml to apply recipes to skeleton template - Deploys 4 recipe versions: metaobjects, third-party-api, custom-cart-method, legacy-customer-account-flow - Each deployment applies recipe, builds, and deploys to Oxygen - Runs on push to main, PR changes to templates/cookbook, or manual trigger - Adds recipe name to deployment description for clarity * fix: Add codegen step before build in deploy-examples workflow - Run npm run codegen to generate GraphQL types before building - Fixes CI failure where build was failing due to missing generated types * fix: Reset template directory after building packages in CI - Add step to reset templates/skeleton after npm run build:pkg - Prevents 'uncommitted changes' error when applying recipes - Uses git checkout and git clean to ensure clean state * fix: Skip git status check in CI environment - Modified cookbook apply.ts to skip git status check when CI=true - Removed unnecessary template reset step from workflow - This avoids false positives from build artifacts in CI * fix: Use npm install instead of npm ci after applying recipes - Recipes may modify package.json dependencies - npm ci fails when package-lock.json is out of sync - npm install will update the lock file as needed * fix: Use --path flag for all hydrogen commands in CI - Deploy recipes from temporary directory outside monorepo - Use --path flag for codegen, build, and deploy commands - This ensures commands run against the isolated project copy * fix: Use npm link to connect local packages in CI - Link locally built packages before installing dependencies - Avoids peer dependency conflicts from npm registry versions - Ensures skeleton uses the correct monorepo package versions * fix: Use file: protocol instead of npm link to avoid duplicate graphql - Update package.json to use file: paths for local packages - Avoids duplicate graphql module issue from npm link - Ensures single graphql instance for codegen to work * fix: Build in monorepo context then copy for deployment - Run install, codegen, and build within the monorepo workspace - This uses the correct package versions without conflicts - Only copy to /tmp after building for the deployment step * Deploy from template folder * fix: Add --force flag to deploy command for CI --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com>
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
… USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild
juanpprieto
pushed a commit
that referenced
this pull request
Sep 17, 2025
juanpprieto
added a commit
that referenced
this pull request
Sep 17, 2025
…t/orders route (#3125) * [2025-07] Update Storefront API and Customer Account API Updated both Storefront API and Customer Account API from version 2025-04 to 2025-07 - Updated version constants in hydrogen-react and hydrogen packages - Regenerated GraphQL types and schemas for both APIs - Updated all hardcoded version references in documentation and tests - Regenerated skeleton template types - Created 6 GitHub issues for tracking API changes implementation - #3076: Subscription discount data in Customer Account API - #3077: Cart warnings for non-applicable discount codes - #3078: BUYER_CANNOT_PURCHASE_FOR_COMPANY_LOCATION cart error - #3079: New order filter options in Customer Account API - #3080: Imperial units in UnitPriceMeasurement - #3081: Selling plan error handling in Cart mutations - TypeScript: ✅ No errors - Tests: ✅ All passing - Lint:⚠️ 2 warnings (non-blocking import duplicates) - Build: ✅ Successful * Update package-lock.json for @shopify/cli dependency update * [2025-07] Fix Monorepo RR7 CI build failures and improve reliability (#3091) * fix: Complete React Router 7 migration for Express example The Express example was partially migrated to React Router 7 but missing critical configuration and dependencies, causing CI failures. Changes: - Add react-router.config.ts with proper preset and app directory configuration - Fix vite.config.ts to call reactRouter() without arguments (RR7 API change) - Add @react-router/dev as devDependency for TypeScript types - Update entry.server.tsx to remove unnecessary @remix-run/web-fetch import (Node 20+ provides native Response globally) - Fix environment variable loading using getEnv() helper - Add .gitignore for React Router generated type files - Update tsconfig.json to exclude generated directories The example now builds successfully with React Router 7's framework mode. * fix: Fix CLI build checks and TypeScript configuration Multiple CLI-specific issues were causing CI failures after recent refactoring. Changes: - Fix build-check.mjs to expect .jsx extensions (tsup outputs .tsx→.jsx) - Exclude assets/routes from TypeScript checking (template files for user projects) - Align ast-grep to version 0.33.0 to match @shopify/cli's bundled version - Fix isHydrogenMonorepo() detection to work in both dev and npm package contexts - Add 'as const' assertions for ast-grep 0.33.0 API compatibility Background: - Template files were moved to assets/routes in May 2024 and inadvertently included in TypeScript scope - ast-grep 0.34.1 conflicted with @shopify/cli's bundled 0.33.0 * fix: Fix CI workflow and monorepo build orchestration The CI workflow and Turbo configuration had multiple issues causing intermittent build failures, particularly the "No lockfile found" error. Changes: - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK=false to typecheck step in CI (was only on build:all, but typecheck also triggers builds via Turbo) - Add SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK to turbo.json globalEnv - Add explicit build dependencies for all examples in turbo.json - Remove docs-preview from workspaces to prevent React Router version conflicts - Regenerate package-lock.json for dependency resolution The root cause was that the typecheck step depends on build tasks (per turbo.json) but wasn't receiving the lockfile check flag, causing skeleton builds to fail. This has been a source of CI instability since the monorepo migration. * [2025-07] Fix Money component compatibility with Customer Account API USDC currency (#3090) * Fix Money component compatibility with Customer Account API USDC currency The 2025-07 API update introduced USDC currency code to Customer Account API but not Storefront API, causing TypeScript errors and runtime failures. Changes: - Update Money component to accept MoneyV2 from both Storefront and Customer Account APIs via union types - Enhance useMoney hook to detect unsupported currency codes (like USDC) and gracefully fall back to decimal formatting - Add currency code suffix for unsupported currencies (e.g., "100.00 USDC") to maintain clarity - Default to 2 decimal places for USDC to reinforce its 1:1 USD peg based on industry standards Technical details: - Handle Intl.NumberFormat RangeError for cryptocurrency codes not in ISO 4217 - Add comprehensive test coverage for both API types and USDC formatting - Update TypeScript types to support both CurrencyCode enums Fixes #3089 * Add changeset for Money component USDC compatibility fix * Add build script to copy customer-account-api-types to dist Since our Money component now imports from customer-account-api-types, we need to ensure this file is copied to the dist folder during the build process. Previously, only storefront-api-types was being copied. - Replace copy-storefront-types with copy-api-types script that copies both API type files - Update build and dev:demo scripts to use the new copy-api-types script - This fixes the CI build failure where customer-account-api-types.d.ts was not found in dist * Trigger CI rebuild * Update subscriptions recide * Suggested money changes for PR #3090 (#3097) * [2025-07] Fix React Context error during client-side hydration (#3101) * Fix React Context errors in Vite dev server This fixes "Cannot read properties of null (reading 'useContext')" errors that occur when React Context hooks are used in development mode. Root Cause: Vite's module federation can cause multiple React instances to be loaded when @shopify/hydrogen is served as an external module. React Context requires a single React instance to function properly - when multiple instances exist, Context providers from one instance cannot be consumed by hooks from another instance, resulting in null context values. Solution: 1. Added resolve.dedupe for react, react-dom, and @shopify/hydrogen to ensure Vite uses a single instance of these packages 2. Modified optimizeDeps.include to conditionally optimize @shopify/hydrogen: - In production/regular projects: Optimize @shopify/hydrogen to prevent context errors - In monorepo development: Skip optimization to allow live reload of source changes This maintains development workflow in the monorepo while fixing the production build issue. * Fix React Context error during client-side hydration Resolves 'Cannot read properties of null (reading useContext)' error that occurred on first page load when using CSP with nonces. The issue was caused by NonceProvider being present during SSR but missing during client hydration, creating a React Context mismatch. Changes: - Export NonceProvider from @shopify/hydrogen for client-side usage - Add NonceProvider wrapper to skeleton's entry.client.tsx - Simplify Vite config to improve React Context stability * Update Vitest from v1.0.4 to v3.2.4 across all packages (#3126) * Update Vitest from v1.0.4 to v3.2.4 across all packages - Upgrade vitest to ^3.2.4 in all 5 packages that use it - Upgrade @vitest/coverage-v8 to ^3.2.4 to match vitest version - Add vitest as devDependency to create-hydrogen package (was missing) - Add explicit coverage provider configuration (required in v3+) - Set provider: 'v8' in cli and hydrogen-react vitest configs Breaking change: Vitest v2+ requires explicit coverage provider config * Fix Vitest v3 Mock type breaking changes In Vitest v3, vi.fn() returns Mock<() => unknown> instead of Mock<any[], any>, requiring explicit type assertions or type parameters for mocks with specific return types. Changes: - Add type assertion for fetchWithServerCache mock in storefront.test.ts - Simplify Promise creation in session mocks (Promise.resolve instead of new Promise) - Fix Mock type usage in Image.test.tsx for console.warn assertions - Add vitest/globals to tsconfig for packages using global test functions - Keep jest types alongside vitest types for @testing-library/jest-dom compatibility The stricter typing in v3 catches more potential issues at compile time but requires updating existing mocks that relied on v1's permissive typing. * Fix formatting * Add order filtering support for Customer Account API 2025-07 Implement new order filtering capabilities using the query parameter introduced in Customer Account API version 2025-07. Customers can now filter orders by name (order number) and confirmation number. Changes: - Add query parameter to CustomerOrdersQuery GraphQL fragments - Create orderFilters utility functions for building search queries - Add search form UI to orders page with inputs for filters - Update empty state to handle filtered vs unfiltered scenarios - Persist filter state in URL parameters for bookmarking The implementation follows the new filtering syntax: - name:1001 for order number filtering - confirmation_number:ABC123 for confirmation number filtering - Combined filters using AND operator * Improve order filtering UI with minimal, mobile-friendly design - Simplified HTML structure using semantic fieldset/legend elements - Removed inline styles in favor of CSS classes - Added responsive grid layout (single column mobile, two column desktop) - Improved accessibility with proper ARIA labels and search input types - Reduced visual complexity while maintaining full functionality - Minimal CSS that allows easy customization by developers * Add changeset * Address PR feedback for order filtering feature - Fix duplicate empty state logic by passing filters to OrdersTable - Add input sanitization to prevent injection attacks - Extract field name constants for maintainability - Remove hardcoded string repetition throughout component * PR feedback - Add confirmationNumber to orders query - Render confirmationNumber for orders in list, and on order details page - Clear both form inputs when the "Clear" button is pressed - Delete the "<number> active" that stated how many filters were active but was a bit confusing - Added aria-live=polite to orders table for accessibility - Disable buttons and change text from "Search" to "Searching" when form has been submitted - As part of this, I also removed the styles on these buttons. The default browser styles are nicer here (ie: it greys out disabled buttons) * Undoing a couple of accidental non-changes from rebasing * Link to full list of available fields, add aria-live polite * update lock * Update lock * Fix recipe base commit reference to point to commit where recipe was created * Update recipe to use commit from main where it was merged * Fix legacy-customer-account-flow recipe for React Router 7.8.x compatibility - Update all patches to use React Router 7.8.x consolidated imports - Complete conversion from Customer Account API to Storefront API - Fix account.orders.$id.tsx and account.orders._index.tsx patches - Add missing account.profile.tsx route for legacy customer flow - Update recipe.yaml with regenerated patch hashes - Ensure all routes use session-based customer access tokens * feat(multipass): align multipass recipe with legacy customer account flow - Apply all order-related patches from legacy recipe to multipass - Fix redirect loop by using Storefront API instead of Customer Account API - Update account.orders._index.tsx to use session-based auth with proper GraphQL query - Update account.orders.$id.tsx with complete order details query - Apply profile patches to support email, phone, password changes - Ensure all routes use classic customer accounts with session tokens - Remove conflicting Customer Account API usage in multipass context * revert lock * fix type issue * add cookbook deps * Fix legacy recipe * Fix cookbook recipes for React Router 7.8.x compatibility Fixed two cookbook recipes that were failing validation: 1. legacy-customer-account-flow recipe: - Removed confirmationNumber references (not available in Storefront API) - Added proper error handling for loader data that can return errors - Updated patches to match current skeleton structure - All TypeScript errors resolved 2. partytown recipe: - Updated vite.config.ts patch to account for new server configuration block - Regenerated all patches with new hash names - Recipe now applies cleanly without conflicts Both recipes now pass all validation tests including: - npm install - npm run codegen - npm run typecheck - npm run build * Fixing express recipe * Skip lockfile check during typecheck on ci * Skip lockfile check in deploy-examples workflow --------- Co-authored-by: Kara Daviduik <105449131+kdaviduik@users.noreply.github.com> Co-authored-by: Kara Daviduik <kara.daviduik@shopify.com> Co-authored-by: rbshop <rheese.burgess@shopify.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fixes #3089
The 2025-07 API update introduced the USDC currency code to the Customer Account API but not to the Storefront API. This created incompatible MoneyV2 types between the two APIs, causing:
WHAT is this pull request doing?
This PR updates the Money component and useMoney hook in
@shopify/hydrogen-reactto:TypeScript Compatibility:
Runtime Currency Handling:
Implementation Details:
HOW to test your changes?
Verify TypeScript compilation passes:
cd templates/skeleton npm run typecheckTest Money component with USDC:
Run hydrogen-react tests:
Build skeleton template:
cd templates/skeleton npm run buildChecklist