Shopify Hydrogen
- 6.6k installs
- 476 repo stars
- Updated July 27, 2026
- shopify/shopify-ai-toolkit
shopify-hydrogen is a Shopify AI toolkit skill for Hydrogen storefront cookbooks with mandatory doc search and validation before returning code.
About
The shopify-hydrogen skill guides headless Shopify storefront work using Hydrogen cookbooks rather than generic Storefront GraphQL alone. Agents must search developer docs with scripts/search_docs.mjs, write Hydrogen React UI code, then validate through scripts/validate.mjs before returning any snippet. Mandatory rules forbid Hydrogen React shortcuts, require api hydrogen for Image, Video, Money, and MediaFile components, and prioritize cookbook recipes for bundles, B2B, markets, subscriptions, infinite scroll, and third-party API caching. Each response follows search, implement, validate, and retry up to three times on failure. Version flags such as 2026-04 or unstable target specific API releases. Telemetry hooks track skill invocations when the Shopify plugin root is present. Use when users mention Hydrogen storefront features, cookbook paths, or component rendering patterns that consume Storefront API data through Hydrogen UI primitives for production storefront releases.
- Mandatory search_docs.mjs query before writing any Hydrogen storefront code.
- validate.mjs gate with base64 user prompt, session id, and artifact revision retries.
- Cookbook-first guidance for bundles, B2B, markets, subscriptions, and caching recipes.
- Forbids api storefront for Hydrogen Image, Video, Money, and MediaFile React components.
- Requires complete JSX examples using api hydrogen only, never Hydrogen React shortcuts.
Shopify Hydrogen by the numbers
- 6,577 all-time installs (skills.sh)
- +279 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #77 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
shopify-hydrogen capabilities & compatibility
- Capabilities
- mandatory doc search before codegen · hydrogen jsx validation workflow · cookbook recipe prioritization · version aware api targeting · component api hydrogen enforcement
- Use cases
- frontend · api development
What shopify-hydrogen says it does
{ "admin": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "
npx skills add https://github.com/shopify/shopify-ai-toolkit --skill shopify-hydrogenAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 6.6k |
|---|---|
| repo stars | ★ 476 |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | shopify/shopify-ai-toolkit ↗ |
How do I implement Hydrogen storefront features with correct components, API versions, and validated snippets instead of generic GraphQL guesses?
Hydrogen storefront cookbooks with mandatory doc search, validation scripts, and React component patterns for headless Shopify commerce.
Who is it for?
Headless Shopify storefront developers implementing Hydrogen UI components, cookbook recipes, and versioned Storefront integrations.
Skip if: Skip when the task is Admin API only, POS extensions, or pure Storefront GraphQL without Hydrogen UI components.
When should I use this skill?
User mentions Hydrogen storefront, cookbook recipes, Hydrogen components, or headless Shopify UI implementation.
What you get
Search-backed Hydrogen JSX that passes validate.mjs with the right api hydrogen targets and cookbook-aligned patterns.
- Hydrogen storefront code
- Storefront API GraphQL queries
- admin GraphQL operations
By the numbers
- Documents six named admin API versions from 2025-07 through 2026-07 plus unstable
- Tracks parallel storefront-graphql and partner API version lines with 2026-04 marked latestVersion
Files
{ "admin": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "storefront-graphql": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "partner": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "customer": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "payments-apps": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "polaris-app-home": [], "polaris-admin-extensions": [ { "name": "2026-04", "releaseCandidate": true }, { "name": "2026-01", "latestVersion": true }, { "name": "2025-10" }, { "name": "2025-07" } ], "polaris-checkout-extensions": [ { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "polaris-customer-account-extensions": [ { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "pos-ui": [ { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "hydrogen": [ { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "storefront-web-components": [], "functions_cart_checkout_validation": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "functions_cart_transform": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "functions_delivery_customization": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, { "name": "2026-04", "latestVersion": true }, { "name": "2026-01" }, { "name": "2025-10" }, { "name": "2025-07" } ], "functions_discount": [ { "name": "unstable" }, { "name": "2026-07", "releaseCandidate": true }, {
{
"admin": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"storefront-graphql": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"partner": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"customer": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"payments-apps": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"polaris-app-home": [],
"polaris-admin-extensions": [
{
"name": "2026-04",
"releaseCandidate": true
},
{
"name": "2026-01",
"latestVersion": true
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"polaris-checkout-extensions": [
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"polaris-customer-account-extensions": [
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"pos-ui": [
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"hydrogen": [
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"storefront-web-components": [],
"functions_cart_checkout_validation": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_cart_transform": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_delivery_customization": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_discount": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_discounts_allocator": [
{
"name": "unstable",
"latestVersion": true
}
],
"functions_fulfillment_constraints": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_local_pickup_delivery_option_generator": [
{
"name": "unstable",
"latestVersion": true
}
],
"functions_order_discounts": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_order_routing_location_rule": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_payment_customization": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_pickup_point_delivery_option_generator": [
{
"name": "unstable",
"latestVersion": true
}
],
"functions_product_discounts": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
],
"functions_shipping_discounts": [
{
"name": "unstable"
},
{
"name": "2026-07",
"releaseCandidate": true
},
{
"name": "2026-04",
"latestVersion": true
},
{
"name": "2026-01"
},
{
"name": "2025-10"
},
{
"name": "2025-07"
}
]
}
{
"name": "@react-router/dev",
"version": "7.12.0",
"description": "Dev tools and CLI for React Router",
"homepage": "https://reactrouter.com",
"bugs": {
"url": "https://github.com/remix-run/react-router/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/remix-run/react-router",
"directory": "packages/react-router-dev"
},
"license": "MIT",
"exports": {
"./config/default-rsc-entries/entry.client": "./dist/config/default-rsc-entries/entry.client.tsx",
"./config/default-rsc-entries/entry.rsc": "./dist/config/default-rsc-entries/entry.rsc.tsx",
"./config/default-rsc-entries/entry.ssr": "./dist/config/default-rsc-entries/entry.ssr.tsx",
"./config": {
"types": "./dist/config.d.ts",
"default": "./dist/config.js"
},
"./routes": {
"types": "./dist/routes.d.ts",
"default": "./dist/routes.js"
},
"./rsc-types": "./rsc-types.d.ts",
"./vite": {
"types": "./dist/vite.d.ts",
"default": "./dist/vite.js"
},
"./vite/cloudflare": {
"types": "./dist/vite/cloudflare.d.ts",
"default": "./dist/vite/cloudflare.js"
},
"./package.json": "./package.json"
},
"imports": {
"#module-sync-enabled": {
"module-sync": "./module-sync-enabled/true.mjs",
"default": "./module-sync-enabled/false.cjs"
}
},
"bin": {
"react-router": "bin.js"
},
"wireit": {
"build": {
"command": "tsup",
"files": [
"../../pnpm-workspace.yaml",
"cli/**",
"config/**",
"module-sync-enabled/**",
"typegen/**",
"vite/**",
"*.ts",
"bin.js",
"tsconfig.json",
"package.json"
],
"output": [
"dist/**"
]
}
},
"dependencies": {
"@babel/core": "^7.27.7",
"@babel/generator": "^7.27.5",
"@babel/parser": "^7.27.7",
"@babel/plugin-syntax-jsx": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
"@babel/traverse": "^7.27.7",
"@babel/types": "^7.27.7",
"@remix-run/node-fetch-server": "^0.9.0",
"arg": "^5.0.1",
"babel-dead-code-elimination": "^1.0.6",
"chokidar": "^4.0.0",
"dedent": "^1.5.3",
"es-module-lexer": "^1.3.1",
"exit-hook": "2.2.1",
"isbot": "^5.1.11",
"jsesc": "3.0.2",
"lodash": "^4.17.21",
"p-map": "^7.0.3",
"pathe": "^1.1.2",
"picocolors": "^1.1.1",
"pkg-types": "^2.3.0",
"prettier": "^3.6.2",
"react-refresh": "^0.14.0",
"semver": "^7.3.7",
"tinyglobby": "^0.2.14",
"valibot": "^1.2.0",
"vite-node": "^3.2.2",
"@react-router/node": "7.12.0"
},
"devDependencies": {
"@types/babel__core": "^7.20.5",
"@types/babel__generator": "^7.27.0",
"@types/babel__traverse": "^7.20.7",
"@types/dedent": "^0.7.0",
"@types/express": "^4.17.9",
"@types/jest": "^29.5.4",
"@types/jsesc": "^3.0.1",
"@types/lodash": "^4.14.182",
"@types/node": "^20.0.0",
"@types/npmcli__package-json": "^4.0.0",
"@types/semver": "^7.7.0",
"@vitejs/plugin-rsc": "~0.5.7",
"esbuild-register": "^3.6.0",
"execa": "5.1.1",
"express": "^4.19.2",
"fast-glob": "3.2.11",
"tsup": "^8.3.0",
"typescript": "^5.4.5",
"vite": "^6.3.0",
"wireit": "0.14.9",
"wrangler": "^4.23.0",
"@react-router/serve": "7.12.0",
"react-router": "^7.12.0"
},
"peerDependencies": {
"@vitejs/plugin-rsc": "~0.5.7",
"react-server-dom-webpack": "^19.2.3",
"typescript": "^5.1.0",
"vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
"wrangler": "^3.28.2 || ^4.0.0",
"@react-router/serve": "^7.12.0",
"react-router": "^7.12.0"
},
"peerDependenciesMeta": {
"@vitejs/plugin-rsc": {
"optional": true
},
"@react-router/serve": {
"optional": true
},
"typescript": {
"optional": true
},
"react-server-dom-webpack": {
"optional": true
},
"wrangler": {
"optional": true
}
},
"engines": {
"node": ">=20.0.0"
},
"files": [
"dist/",
"module-sync-enabled/",
"bin.js",
"rsc-types.d.ts",
"CHANGELOG.md",
"LICENSE.md",
"README.md"
],
"scripts": {
"build": "wireit",
"typecheck": "tsc"
}
}declare module "virtual:react-router/unstable_rsc/routes" {
import type { unstable_RSCRouteConfig as RSCRouteConfig } from "react-router";
const routes: RSCRouteConfig;
export default routes;
}
declare module "virtual:react-router/unstable_rsc/basename" {
const basename: string;
export default basename;
}
declare module "virtual:react-router/unstable_rsc/react-router-serve-config" {
const unstable_reactRouterServeConfig: {
publicPath: string;
assetsBuildDirectory: string;
};
export default unstable_reactRouterServeConfig;
}
declare module "virtual:react-router/unstable_rsc/inject-hmr-runtime" {}
{
"name": "@react-router/dev",
"version": "7.14.0",
"description": "Dev tools and CLI for React Router",
"homepage": "https://reactrouter.com",
"bugs": {
"url": "https://github.com/remix-run/react-router/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/remix-run/react-router",
"directory": "packages/react-router-dev"
},
"license": "MIT",
"exports": {
"./config/default-rsc-entries/entry.client": "./dist/config/default-rsc-entries/entry.client.tsx",
"./config/default-rsc-entries/entry.rsc": "./dist/config/default-rsc-entries/entry.rsc.tsx",
"./config/default-rsc-entries/entry.ssr": "./dist/config/default-rsc-entries/entry.ssr.tsx",
"./config": {
"types": "./dist/config.d.ts",
"default": "./dist/config.js"
},
"./routes": {
"types": "./dist/routes.d.ts",
"default": "./dist/routes.js"
},
"./rsc-types": "./rsc-types.d.ts",
"./vite": {
"types": "./dist/vite.d.ts",
"default": "./dist/vite.js"
},
"./vite/cloudflare": {
"types": "./dist/vite/cloudflare.d.ts",
"default": "./dist/vite/cloudflare.js"
},
"./package.json": "./package.json"
},
"imports": {
"#module-sync-enabled": {
"module-sync": "./module-sync-enabled/true.mjs",
"default": "./module-sync-enabled/false.cjs"
}
},
"bin": {
"react-router": "bin.js"
},
"wireit": {
"build": {
"command": "tsup",
"files": [
"../../pnpm-workspace.yaml",
"cli/**",
"config/**",
"module-sync-enabled/**",
"typegen/**",
"vite/**",
"*.ts",
"bin.js",
"tsconfig.json",
"package.json"
],
"output": [
"dist/**"
]
}
},
"dependencies": {
"@babel/core": "^7.27.7",
"@babel/generator": "^7.27.5",
"@babel/parser": "^7.27.7",
"@babel/plugin-syntax-jsx": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
"@babel/traverse": "^7.27.7",
"@babel/types": "^7.27.7",
"@remix-run/node-fetch-server": "^0.13.0",
"arg": "^5.0.1",
"babel-dead-code-elimination": "^1.0.6",
"chokidar": "^4.0.0",
"dedent": "^1.5.3",
"es-module-lexer": "^1.3.1",
"exit-hook": "2.2.1",
"isbot": "^5.1.11",
"jsesc": "3.0.2",
"lodash": "^4.17.21",
"p-map": "^7.0.3",
"pathe": "^1.1.2",
"picocolors": "^1.1.1",
"pkg-types": "^2.3.0",
"prettier": "^3.6.2",
"react-refresh": "^0.14.0",
"semver": "^7.3.7",
"tinyglobby": "^0.2.14",
"valibot": "^1.2.0",
"vite-node": "^3.2.2",
"@react-router/node": "7.14.0"
},
"devDependencies": {
"@types/babel__core": "^7.20.5",
"@types/babel__generator": "^7.27.0",
"@types/babel__traverse": "^7.20.7",
"@types/dedent": "^0.7.0",
"@types/express": "^4.17.9",
"@types/jest": "^29.5.4",
"@types/jsesc": "^3.0.1",
"@types/lodash": "^4.14.182",
"@types/node": "^20.0.0",
"@types/npmcli__package-json": "^4.0.0",
"@types/semver": "^7.7.0",
"@vitejs/plugin-rsc": "~0.5.21",
"esbuild-register": "^3.6.0",
"execa": "5.1.1",
"express": "^4.19.2",
"fast-glob": "3.2.11",
"tsup": "^8.3.0",
"typescript": "^5.4.5",
"vite": "^6.3.0",
"wireit": "0.14.9",
"wrangler": "^4.23.0",
"@react-router/serve": "7.14.0",
"react-router": "^7.14.0"
},
"peerDependencies": {
"@vitejs/plugin-rsc": "~0.5.21",
"react-server-dom-webpack": "^19.2.3",
"typescript": "^5.1.0",
"vite": "^5.1.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
"wrangler": "^3.28.2 || ^4.0.0",
"@react-router/serve": "^7.14.0",
"react-router": "^7.14.0"
},
"peerDependenciesMeta": {
"@vitejs/plugin-rsc": {
"optional": true
},
"@react-router/serve": {
"optional": true
},
"typescript": {
"optional": true
},
"react-server-dom-webpack": {
"optional": true
},
"wrangler": {
"optional": true
}
},
"engines": {
"node": ">=20.0.0"
},
"files": [
"dist/",
"module-sync-enabled/",
"bin.js",
"rsc-types.d.ts",
"CHANGELOG.md",
"LICENSE.md",
"README.md"
],
"scripts": {
"build": "wireit",
"typecheck": "tsc"
}
}declare module "virtual:react-router/unstable_rsc/routes" {
import type { unstable_RSCRouteConfig as RSCRouteConfig } from "react-router";
const routes: RSCRouteConfig;
export default routes;
}
declare module "virtual:react-router/unstable_rsc/basename" {
const basename: string;
export default basename;
}
declare module "virtual:react-router/unstable_rsc/ssr" {
const ssr: boolean;
export default ssr;
}
declare module "virtual:react-router/unstable_rsc/react-router-serve-config" {
const unstable_reactRouterServeConfig: {
publicPath: string;
assetsBuildDirectory: string;
};
export default unstable_reactRouterServeConfig;
}
declare module "virtual:react-router/unstable_rsc/route-discovery" {
const routeDiscovery:
| {
mode: "initial";
}
| {
mode: "lazy";
manifestPath?: string;
};
export default routeDiscovery;
}
declare module "virtual:react-router/unstable_rsc/inject-hmr-runtime" {}
{
"name": "@shopify/hydrogen-react",
"version": "2025.10.0",
"description": "React components, hooks, and utilities for creating custom Shopify storefronts",
"homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
},
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"files": [
"dist",
"storefront.schema.json",
"customer-account.schema.json"
],
"type": "commonjs",
"exports": {
".": {
"node": {
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/node-dev/index.mjs",
"default": "./dist/node-prod/index.mjs"
},
"default": "./dist/node-prod/index.js"
},
"module": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"default": "./dist/browser-prod/index.mjs"
},
"./storefront-api-types": "./dist/types/storefront-api-types.d.ts",
"./storefront.schema.json": "./storefront.schema.json",
"./customer-account.schema.json": "./customer-account.schema.json",
"./customer-account-api-types": "./dist/types/customer-account-api-types.d.ts",
"./package.json": "./package.json",
"./*": {
"node": {
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/node-dev/*.mjs",
"default": "./dist/node-prod/*.mjs"
},
"default": "./dist/node-prod/*.js"
},
"module": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"default": "./dist/browser-prod/*.mjs"
}
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/types/storefront-api-types.d.ts"
]
}
},
"main": "./dist/node-prod/index.js",
"module": "./dist/node-prod/index.mjs",
"browser": "./dist/browser-prod/index.mjs",
"types": "./dist/types/index.d.ts",
"unpkg": "./dist/umd/hydrogen-react.prod.js",
"jsdelivr": "./dist/umd/hydrogen-react.prod.js",
"sideEffects": [
"dist/*/node_modules/use-sync-external-store/shim/with-selector.*js"
],
"scripts": {
"build-docs": "sh ./docs/build-docs.sh && npm run format",
"clean-dist": "rimraf ./dist",
"dev": "run-s dev:demo",
"dev:story": "ladle serve",
"dev:demo": "run-p dev:demo:* copy-api-types",
"dev:demo:browser-dev": "vite build --watch --emptyOutDir false --clearScreen false --mode devbuild",
"dev:demo:ts": "tsc --watch --emitDeclarationOnly",
"build": "npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types",
"build:vite:browser-dev": "vite build --mode devbuild",
"build:vite:browser-prod": "vite build",
"build:vite:node-dev": "vite build --mode devbuild --ssr",
"build:vite:node-prod": "vite build --ssr",
"build:vite:umddev": "vite build --mode umdbuilddev",
"build:vite:umdprod": "vite build --mode umdbuild",
"build:tsc:cjs": "cpy ./dist/types/index.d.ts ./dist/types/ --rename='index.d.cts' --flat",
"build:tsc:es": "tsc --emitDeclarationOnly --project tsconfig.typeoutput.json",
"copy-api-types": "cpy './src/storefront-api-types.d.ts' './src/customer-account-api-types.d.ts' ./dist/types/ --flat",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"graphql-types": "graphql-codegen --config codegen.ts && npm run format",
"test": "vitest run --coverage",
"test:watch": "vitest",
"typecheck": "run-p typecheck:*",
"typecheck:code": "tsc --noEmit",
"typecheck:examples": "tsc --noEmit --project tsconfig.examples.json",
"preview-docs": "npm run dev --prefix ../../docs/preview"
},
"devDependencies": {
"@faker-js/faker": "^9.4.0",
"@graphql-codegen/add": "^5.0.3",
"@graphql-codegen/cli": "^5.0.4",
"@graphql-codegen/introspection": "^4.0.3",
"@graphql-codegen/typescript": "^4.1.3",
"@ladle/react": "^5.0.1",
"@shopify/generate-docs": "0.16.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.2.4",
"cpy-cli": "^5.0.0",
"eslint": "9.19.0",
"eslint-config-prettier": "10.0.1",
"eslint-import-resolver-typescript": "3.7.0",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jest": "28.11.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.37.4",
"eslint-plugin-react-hooks": "5.1.0",
"eslint-plugin-simple-import-sort": "12.1.1",
"eslint-plugin-tsdoc": "0.2.14",
"happy-dom": "17.0.0",
"npm-run-all": "^4.1.5",
"react": "18.3.1",
"react-dom": "18.3.1",
"rimraf": "^6.0.1",
"ts-expect": "^1.3.0",
"typescript": "5.9.2",
"vite": "^6.2.4",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"react-dom": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"dependencies": {
"@google/model-viewer": "^4.0.0",
"@xstate/fsm": "2.0.0",
"@xstate/react": "3.2.1",
"graphql": "^16.10.0",
"use-isomorphic-layout-effect": "1.2.1",
"use-sync-external-store": "1.6.0",
"type-fest": "^4.33.0",
"worktop": "^0.7.3"
},
"repository": {
"type": "git",
"url": "https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen-react"
},
"bugs": "https://github.com/shopify/hydrogen/issues"
}
{
"name": "@shopify/hydrogen-react",
"version": "2025.7.2",
"description": "React components, hooks, and utilities for creating custom Shopify storefronts",
"homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react",
"license": "MIT",
"engines": {
"node": ">=18.0.0"
},
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"files": [
"dist",
"storefront.schema.json",
"customer-account.schema.json"
],
"type": "commonjs",
"exports": {
".": {
"node": {
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/node-dev/index.mjs",
"default": "./dist/node-prod/index.mjs"
},
"default": "./dist/node-prod/index.js"
},
"module": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"default": "./dist/browser-prod/index.mjs"
},
"./storefront-api-types": "./dist/types/storefront-api-types.d.ts",
"./storefront.schema.json": "./storefront.schema.json",
"./customer-account.schema.json": "./customer-account.schema.json",
"./customer-account-api-types": "./dist/types/customer-account-api-types.d.ts",
"./package.json": "./package.json",
"./*": {
"node": {
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/node-dev/*.mjs",
"default": "./dist/node-prod/*.mjs"
},
"default": "./dist/node-prod/*.js"
},
"module": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"default": "./dist/browser-prod/*.mjs"
}
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/types/storefront-api-types.d.ts"
]
}
},
"main": "./dist/node-prod/index.js",
"module": "./dist/node-prod/index.mjs",
"browser": "./dist/browser-prod/index.mjs",
"types": "./dist/types/index.d.ts",
"unpkg": "./dist/umd/hydrogen-react.prod.js",
"jsdelivr": "./dist/umd/hydrogen-react.prod.js",
"sideEffects": [
"dist/*/node_modules/use-sync-external-store/shim/with-selector.*js"
],
"scripts": {
"build-docs": "sh ./docs/build-docs.sh && npm run format",
"clean-dist": "rimraf ./dist",
"dev": "run-s dev:demo",
"dev:story": "ladle serve",
"dev:demo": "run-p dev:demo:* copy-api-types",
"dev:demo:browser-dev": "vite build --watch --emptyOutDir false --clearScreen false --mode devbuild",
"dev:demo:ts": "tsc --watch --emitDeclarationOnly",
"build": "npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types",
"build:vite:browser-dev": "vite build --mode devbuild",
"build:vite:browser-prod": "vite build",
"build:vite:node-dev": "vite build --mode devbuild --ssr",
"build:vite:node-prod": "vite build --ssr",
"build:vite:umddev": "vite build --mode umdbuilddev",
"build:vite:umdprod": "vite build --mode umdbuild",
"build:tsc:cjs": "cpy ./dist/types/index.d.ts ./dist/types/ --rename='index.d.cts' --flat",
"build:tsc:es": "tsc --emitDeclarationOnly --project tsconfig.typeoutput.json",
"copy-api-types": "cpy './src/storefront-api-types.d.ts' './src/customer-account-api-types.d.ts' ./dist/types/ --flat",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"graphql-types": "graphql-codegen --config codegen.ts && npm run format",
"test": "vitest run --coverage",
"test:watch": "vitest",
"typecheck": "run-p typecheck:*",
"typecheck:code": "tsc --noEmit",
"typecheck:examples": "tsc --noEmit --project tsconfig.examples.json",
"preview-docs": "npm run dev --prefix ../../docs/preview"
},
"devDependencies": {
"@faker-js/faker": "^9.4.0",
"@graphql-codegen/add": "^5.0.3",
"@graphql-codegen/cli": "^5.0.4",
"@graphql-codegen/introspection": "^4.0.3",
"@graphql-codegen/typescript": "^4.1.3",
"@ladle/react": "^5.0.1",
"@shopify/generate-docs": "0.16.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^29.5.14",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.2.4",
"cpy-cli": "^5.0.0",
"eslint": "9.19.0",
"eslint-config-prettier": "10.0.1",
"eslint-import-resolver-typescript": "3.7.0",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jest": "28.11.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.37.4",
"eslint-plugin-react-hooks": "5.1.0",
"eslint-plugin-simple-import-sort": "12.1.1",
"eslint-plugin-tsdoc": "0.2.14",
"happy-dom": "17.0.0",
"npm-run-all": "^4.1.5",
"react": "18.3.1",
"react-dom": "18.3.1",
"rimraf": "^6.0.1",
"ts-expect": "^1.3.0",
"typescript": "5.9.2",
"vite": "^6.2.4",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"react-dom": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"dependencies": {
"@google/model-viewer": "^4.0.0",
"@xstate/fsm": "2.0.0",
"@xstate/react": "3.2.1",
"graphql": "^16.10.0",
"use-isomorphic-layout-effect": "1.2.1",
"use-sync-external-store": "1.6.0",
"type-fest": "^4.33.0",
"worktop": "^0.7.3"
},
"repository": {
"type": "git",
"url": "https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen-react"
},
"bugs": "https://github.com/shopify/hydrogen/issues"
}
{
"name": "@shopify/hydrogen-react",
"version": "2026.1.2",
"description": "React components, hooks, and utilities for creating custom Shopify storefronts",
"homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react",
"license": "MIT",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"files": [
"dist",
"storefront.schema.json",
"customer-account.schema.json"
],
"type": "commonjs",
"exports": {
".": {
"node": {
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/node-dev/index.mjs",
"default": "./dist/node-prod/index.mjs"
},
"default": "./dist/node-prod/index.js"
},
"module": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"default": "./dist/browser-prod/index.mjs"
},
"./storefront-api-types": "./dist/types/storefront-api-types.d.ts",
"./storefront.schema.json": "./storefront.schema.json",
"./customer-account.schema.json": "./customer-account.schema.json",
"./customer-account-api-types": "./dist/types/customer-account-api-types.d.ts",
"./package.json": "./package.json",
"./*": {
"node": {
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/node-dev/*.mjs",
"default": "./dist/node-prod/*.mjs"
},
"default": "./dist/node-prod/*.js"
},
"module": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"default": "./dist/browser-prod/*.mjs"
}
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/types/storefront-api-types.d.ts"
]
}
},
"main": "./dist/node-prod/index.js",
"module": "./dist/node-prod/index.mjs",
"browser": "./dist/browser-prod/index.mjs",
"types": "./dist/types/index.d.ts",
"unpkg": "./dist/umd/hydrogen-react.prod.js",
"jsdelivr": "./dist/umd/hydrogen-react.prod.js",
"sideEffects": false,
"devDependencies": {
"@faker-js/faker": "^9.4.0",
"@graphql-codegen/add": "^5.0.3",
"@graphql-codegen/cli": "^5.0.4",
"@graphql-codegen/introspection": "^4.0.3",
"@graphql-codegen/typescript": "^4.1.3",
"@ladle/react": "^5.0.1",
"@shopify/generate-docs": "0.16.4",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.6.1",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.2.4",
"cpy-cli": "^5.0.0",
"eslint": "9.19.0",
"eslint-config-prettier": "10.0.1",
"eslint-import-resolver-typescript": "3.7.0",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jest": "28.11.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.37.4",
"eslint-plugin-react-hooks": "5.1.0",
"eslint-plugin-simple-import-sort": "12.1.1",
"eslint-plugin-tsdoc": "0.2.14",
"happy-dom": "^20.0.0",
"npm-run-all": "^4.1.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rimraf": "^6.0.1",
"ts-expect": "^1.3.0",
"typescript": "5.9.2",
"vite": "^6.2.4",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"react-dom": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"dependencies": {
"@google/model-viewer": "^4.0.0",
"@xstate/fsm": "2.0.0",
"ast-v8-to-istanbul": "^0.3.11",
"graphql": "^16.10.0",
"type-fest": "^4.33.0",
"worktop": "^0.7.3"
},
"repository": {
"type": "git",
"url": "https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen-react"
},
"bugs": "https://github.com/shopify/hydrogen/issues",
"scripts": {
"build-docs": "sh ./docs/build-docs.sh && pnpm run format",
"clean-dist": "rimraf ./dist",
"dev": "run-s dev:demo",
"dev:story": "ladle serve",
"dev:demo": "run-p dev:demo:* copy-api-types",
"dev:demo:browser-dev": "vite build --watch --emptyOutDir false --clearScreen false --mode devbuild",
"dev:demo:ts": "tsc --watch --emitDeclarationOnly",
"build": "npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types",
"build:vite:browser-dev": "vite build --mode devbuild",
"build:vite:browser-prod": "vite build",
"build:vite:node-dev": "vite build --mode devbuild --ssr",
"build:vite:node-prod": "vite build --ssr",
"build:vite:umddev": "vite build --mode umdbuilddev",
"build:vite:umdprod": "vite build --mode umdbuild",
"build:tsc:cjs": "cpy ./dist/types/index.d.ts ./dist/types/ --rename=index.d.cts --flat",
"build:tsc:es": "tsc --emitDeclarationOnly --project tsconfig.typeoutput.json",
"copy-api-types": "cpy ./src/storefront-api-types.d.ts ./src/customer-account-api-types.d.ts ./dist/types/ --flat",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"graphql-types": "graphql-codegen --config codegen.ts && pnpm run format",
"test": "vitest run --coverage",
"test:watch": "vitest",
"typecheck": "run-p typecheck:*",
"typecheck:code": "tsc --noEmit",
"typecheck:examples": "tsc --noEmit --project tsconfig.examples.json",
"preview-docs": "pnpm --dir ../../docs/preview run dev"
}
}{
"name": "@shopify/hydrogen-react",
"version": "2026.4.2",
"description": "React components, hooks, and utilities for creating custom Shopify storefronts",
"homepage": "https://github.com/Shopify/hydrogen/tree/main/packages/hydrogen-react",
"license": "MIT",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"files": [
"dist",
"storefront.schema.json",
"customer-account.schema.json"
],
"type": "commonjs",
"exports": {
".": {
"node": {
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/node-dev/index.mjs",
"default": "./dist/node-prod/index.mjs"
},
"default": "./dist/node-prod/index.js"
},
"module": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"import": {
"types": "./dist/types/index.d.ts",
"development": "./dist/browser-dev/index.mjs",
"default": "./dist/browser-prod/index.mjs"
},
"require": {
"types": "./dist/types/index.d.cts",
"development": "./dist/node-dev/index.js",
"default": "./dist/node-prod/index.js"
},
"default": "./dist/browser-prod/index.mjs"
},
"./storefront-api-types": "./dist/types/storefront-api-types.d.ts",
"./storefront.schema.json": "./storefront.schema.json",
"./customer-account.schema.json": "./customer-account.schema.json",
"./customer-account-api-types": "./dist/types/customer-account-api-types.d.ts",
"./package.json": "./package.json",
"./*": {
"node": {
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/node-dev/*.mjs",
"default": "./dist/node-prod/*.mjs"
},
"default": "./dist/node-prod/*.js"
},
"module": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"import": {
"types": "./dist/types/*.d.ts",
"development": "./dist/browser-dev/*.mjs",
"default": "./dist/browser-prod/*.mjs"
},
"require": {
"types": "./dist/types/*.d.cts",
"development": "./dist/node-dev/*.js",
"default": "./dist/node-prod/*.js"
},
"default": "./dist/browser-prod/*.mjs"
}
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/types/storefront-api-types.d.ts"
]
}
},
"main": "./dist/node-prod/index.js",
"module": "./dist/node-prod/index.mjs",
"browser": "./dist/browser-prod/index.mjs",
"types": "./dist/types/index.d.ts",
"unpkg": "./dist/umd/hydrogen-react.prod.js",
"jsdelivr": "./dist/umd/hydrogen-react.prod.js",
"sideEffects": false,
"devDependencies": {
"@faker-js/faker": "^9.4.0",
"@graphql-codegen/add": "^5.0.3",
"@graphql-codegen/cli": "^5.0.4",
"@graphql-codegen/introspection": "^4.0.3",
"@graphql-codegen/typescript": "^4.1.3",
"@ladle/react": "^5.0.1",
"@shopify/generate-docs": "1.1.4",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.6.1",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/coverage-v8": "^3.2.4",
"cpy-cli": "^5.0.0",
"eslint": "9.19.0",
"eslint-config-prettier": "10.0.1",
"eslint-import-resolver-typescript": "3.7.0",
"eslint-plugin-eslint-comments": "3.2.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jest": "28.11.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-prettier": "4.2.1",
"eslint-plugin-react": "7.37.4",
"eslint-plugin-react-hooks": "5.1.0",
"eslint-plugin-simple-import-sort": "12.1.1",
"eslint-plugin-tsdoc": "0.2.14",
"happy-dom": "^20.8.9",
"npm-run-all": "^4.1.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rimraf": "^6.0.1",
"ts-expect": "^1.3.0",
"typescript": "5.9.2",
"vite": "^8.0.1",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"react-dom": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1 || ^7.0.0 || ^8.0.0"
},
"dependencies": {
"@google/model-viewer": "^4.0.0",
"@xstate/fsm": "2.0.0",
"ast-v8-to-istanbul": "^0.3.11",
"graphql": "^16.10.0",
"type-fest": "^4.33.0",
"worktop": "^0.7.3"
},
"repository": {
"type": "git",
"url": "https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen-react"
},
"bugs": "https://github.com/shopify/hydrogen/issues",
"scripts": {
"build-docs": "sh ./docs/build-docs.sh && pnpm run format",
"clean-dist": "rimraf ./dist",
"dev": "run-s dev:demo",
"dev:story": "ladle serve",
"dev:demo": "run-p dev:demo:* copy-api-types",
"dev:demo:browser-dev": "vite build --watch --emptyOutDir false --clearScreen false --mode devbuild",
"dev:demo:ts": "tsc --watch --emitDeclarationOnly",
"build": "npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-api-types",
"build:vite:browser-dev": "vite build --mode devbuild",
"build:vite:browser-prod": "vite build",
"build:vite:node-dev": "vite build --mode devbuild --ssr",
"build:vite:node-prod": "vite build --ssr",
"build:vite:umddev": "vite build --mode umdbuilddev",
"build:vite:umdprod": "vite build --mode umdbuild",
"build:tsc:cjs": "cpy ./dist/types/index.d.ts ./dist/types/ --rename=index.d.cts --flat",
"build:tsc:es": "tsc --emitDeclarationOnly --project tsconfig.typeoutput.json",
"copy-api-types": "cpy ./src/storefront-api-types.d.ts ./src/customer-account-api-types.d.ts ./dist/types/ --flat",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"graphql-types": "graphql-codegen --config codegen.ts && pnpm run format",
"test": "vitest run --coverage",
"test:watch": "vitest",
"typecheck": "run-p typecheck:*",
"typecheck:code": "tsc --noEmit",
"typecheck:examples": "tsc --noEmit --project tsconfig.examples.json",
"preview-docs": "pnpm --dir ../../docs/preview run dev"
}
}{
"name": "@shopify/hydrogen",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"type": "module",
"version": "2025.10.1",
"license": "MIT",
"main": "dist/index.cjs",
"module": "dist/production/index.js",
"types": "dist/production/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "git+https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen"
},
"scripts": {
"build": "tsup --clean",
"dev": "tsup --watch ./src --watch ../../node_modules/@shopify/hydrogen-react/dist/browser-prod/index.mjs",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"prepack": "npm run build",
"test:watch": "vitest",
"build-docs": "sh ./docs/build-docs.sh && npm run format",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"preview-docs": "npm run dev --prefix ../../docs/preview"
},
"exports": {
".": {
"types": "./dist/production/index.d.ts",
"module": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"require": "./dist/index.cjs",
"import": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"default": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
}
},
"./vite": {
"types": "./dist/vite/plugin.d.ts",
"default": "./dist/vite/plugin.js"
},
"./oxygen": {
"types": "./dist/oxygen/index.d.ts",
"default": "./dist/oxygen/index.js"
},
"./storefront-api-types": "./dist/storefront-api-types.d.ts",
"./storefront.schema.json": "./dist/storefront.schema.json",
"./customer-account-api-types": "./dist/customer-account-api-types.d.ts",
"./customer-account.schema.json": "./dist/customer-account.schema.json",
"./react-router-types": {
"types": "./dist/react-router.d.ts"
},
"./react-router-preset": {
"types": "./dist/production/react-router-preset.d.ts",
"import": {
"development": "./dist/development/react-router-preset.js",
"default": "./dist/production/react-router-preset.js"
},
"default": "./dist/production/react-router-preset.js"
},
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/storefront-api-types.d.ts"
],
"customer-account-api-types": [
"./dist/customer-account-api-types.d.ts"
]
}
},
"files": [
"dist"
],
"dependencies": {
"@shopify/hydrogen-react": "2025.10.0",
"content-security-policy-builder": "^2.2.0",
"flame-chart-js": "2.3.1",
"isbot": "^5.1.21",
"source-map-support": "^0.5.21",
"type-fest": "^4.33.0",
"use-resize-observer": "^9.1.0",
"worktop": "^0.7.3",
"@shopify/graphql-client": "1.4.1"
},
"devDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"@shopify/generate-docs": "0.16.4",
"@shopify/hydrogen-codegen": "*",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@types/source-map-support": "^0.5.10",
"formdata-polyfill": "^4.0.10",
"happy-dom": "^17.0.0",
"react": "18.3.1",
"schema-dts": "^1.1.2",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
}
}
{
"name": "@shopify/hydrogen",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"type": "module",
"version": "2025.7.3",
"license": "MIT",
"main": "dist/index.cjs",
"module": "dist/production/index.js",
"types": "dist/production/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "git+https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen"
},
"scripts": {
"build": "tsup --clean",
"dev": "tsup --watch ./src --watch ../../node_modules/@shopify/hydrogen-react/dist/browser-prod/index.mjs",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"prepack": "npm run build",
"test:watch": "vitest",
"build-docs": "sh ./docs/build-docs.sh && npm run format",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"preview-docs": "npm run dev --prefix ../../docs/preview"
},
"exports": {
".": {
"types": "./dist/production/index.d.ts",
"module": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"require": "./dist/index.cjs",
"import": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"default": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
}
},
"./vite": {
"types": "./dist/vite/plugin.d.ts",
"default": "./dist/vite/plugin.js"
},
"./oxygen": {
"types": "./dist/oxygen/index.d.ts",
"default": "./dist/oxygen/index.js"
},
"./storefront-api-types": "./dist/storefront-api-types.d.ts",
"./storefront.schema.json": "./dist/storefront.schema.json",
"./customer-account-api-types": "./dist/customer-account-api-types.d.ts",
"./customer-account.schema.json": "./dist/customer-account.schema.json",
"./react-router-types": {
"types": "./dist/react-router.d.ts"
},
"./react-router-preset": {
"types": "./dist/production/react-router-preset.d.ts",
"import": {
"development": "./dist/development/react-router-preset.js",
"default": "./dist/production/react-router-preset.js"
},
"default": "./dist/production/react-router-preset.js"
},
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/storefront-api-types.d.ts"
],
"customer-account-api-types": [
"./dist/customer-account-api-types.d.ts"
]
}
},
"files": [
"dist"
],
"dependencies": {
"@shopify/hydrogen-react": "2025.7.2",
"content-security-policy-builder": "^2.2.0",
"flame-chart-js": "2.3.1",
"isbot": "^5.1.21",
"source-map-support": "^0.5.21",
"type-fest": "^4.33.0",
"use-resize-observer": "^9.1.0",
"worktop": "^0.7.3",
"@shopify/graphql-client": "1.4.1"
},
"devDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"@shopify/generate-docs": "0.16.4",
"@shopify/hydrogen-codegen": "*",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^14.0.0",
"@types/source-map-support": "^0.5.10",
"formdata-polyfill": "^4.0.10",
"happy-dom": "^17.0.0",
"react": "18.3.1",
"schema-dts": "^1.1.2",
"vitest": "^3.2.4"
},
"peerDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
}
}
{
"name": "@shopify/hydrogen",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"type": "module",
"version": "2026.1.4",
"license": "MIT",
"main": "dist/index.cjs",
"module": "dist/production/index.js",
"types": "dist/production/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "git+https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen"
},
"exports": {
".": {
"types": "./dist/production/index.d.ts",
"module": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"require": "./dist/index.cjs",
"import": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"default": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
}
},
"./vite": {
"types": "./dist/vite/plugin.d.ts",
"default": "./dist/vite/plugin.js"
},
"./oxygen": {
"types": "./dist/oxygen/index.d.ts",
"default": "./dist/oxygen/index.js"
},
"./storefront-api-types": "./dist/storefront-api-types.d.ts",
"./storefront.schema.json": "./dist/storefront.schema.json",
"./customer-account-api-types": "./dist/customer-account-api-types.d.ts",
"./customer-account.schema.json": "./dist/customer-account.schema.json",
"./react-router-types": {
"types": "./dist/react-router.d.ts"
},
"./react-router-preset": {
"types": "./dist/production/react-router-preset.d.ts",
"import": {
"development": "./dist/development/react-router-preset.js",
"default": "./dist/production/react-router-preset.js"
},
"default": "./dist/production/react-router-preset.js"
},
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/storefront-api-types.d.ts"
],
"customer-account-api-types": [
"./dist/customer-account-api-types.d.ts"
]
}
},
"files": [
"dist"
],
"dependencies": {
"content-security-policy-builder": "^2.2.0",
"flame-chart-js": "2.3.1",
"isbot": "^5.1.21",
"source-map-support": "^0.5.21",
"type-fest": "^4.33.0",
"use-resize-observer": "^9.1.0",
"worktop": "^0.7.3",
"@shopify/graphql-client": "1.4.1",
"@shopify/hydrogen-react": "2026.1.2"
},
"devDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"@shopify/generate-docs": "0.16.4",
"@testing-library/jest-dom": "^6.6.3",
"@types/node": "22.19.15",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@testing-library/react": "^14.0.0",
"@types/source-map-support": "^0.5.10",
"formdata-polyfill": "^4.0.10",
"graphql": "^16.12.0",
"happy-dom": "^20.8.9",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"schema-dts": "^1.1.2",
"vitest": "^3.2.4",
"@shopify/hydrogen-codegen": "0.3.3"
},
"peerDependencies": {
"react-router": "7.12.0",
"@react-router/dev": "7.12.0",
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
},
"scripts": {
"build": "tsup --clean",
"dev": "tsup --watch ./src --watch ../../node_modules/@shopify/hydrogen-react/dist/browser-prod/index.mjs",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"test:watch": "vitest",
"build-docs": "sh ./docs/build-docs.sh && pnpm run format",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"preview-docs": "pnpm --dir ../../docs/preview run dev"
}
}{
"name": "@shopify/hydrogen",
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
},
"type": "module",
"version": "2026.4.2",
"license": "MIT",
"main": "dist/index.cjs",
"module": "dist/production/index.js",
"types": "dist/production/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "git+https://github.com/Shopify/hydrogen.git",
"directory": "packages/hydrogen"
},
"exports": {
".": {
"types": "./dist/production/index.d.ts",
"module": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"require": "./dist/index.cjs",
"import": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
},
"default": {
"development": "./dist/development/index.js",
"default": "./dist/production/index.js"
}
},
"./vite": {
"types": "./dist/vite/plugin.d.ts",
"default": "./dist/vite/plugin.js"
},
"./oxygen": {
"types": "./dist/oxygen/index.d.ts",
"default": "./dist/oxygen/index.js"
},
"./storefront-api-types": "./dist/storefront-api-types.d.ts",
"./storefront.schema.json": "./dist/storefront.schema.json",
"./customer-account-api-types": "./dist/customer-account-api-types.d.ts",
"./customer-account.schema.json": "./dist/customer-account.schema.json",
"./react-router-types": {
"types": "./dist/react-router.d.ts"
},
"./react-router-preset": {
"types": "./dist/production/react-router-preset.d.ts",
"import": {
"development": "./dist/development/react-router-preset.js",
"default": "./dist/production/react-router-preset.js"
},
"default": "./dist/production/react-router-preset.js"
},
"./package.json": "./package.json"
},
"typesVersions": {
"*": {
"storefront-api-types": [
"./dist/storefront-api-types.d.ts"
],
"customer-account-api-types": [
"./dist/customer-account-api-types.d.ts"
]
}
},
"files": [
"dist"
],
"dependencies": {
"content-security-policy-builder": "^2.2.0",
"flame-chart-js": "2.3.1",
"isbot": "^5.1.21",
"source-map-support": "^0.5.21",
"type-fest": "^4.33.0",
"use-resize-observer": "^9.1.0",
"worktop": "^0.7.3",
"@shopify/graphql-client": "1.4.1",
"@shopify/hydrogen-react": "2026.4.2"
},
"devDependencies": {
"react-router": "7.14.0",
"@react-router/dev": "7.14.0",
"@shopify/generate-docs": "1.1.4",
"@testing-library/jest-dom": "^6.6.3",
"@types/node": "22.19.15",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@testing-library/react": "^14.0.0",
"@types/source-map-support": "^0.5.10",
"formdata-polyfill": "^4.0.10",
"graphql": "^16.12.0",
"happy-dom": "^20.8.9",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"schema-dts": "^1.1.2",
"vitest": "^3.2.4",
"@shopify/hydrogen-codegen": "0.3.3"
},
"peerDependencies": {
"react-router": "7.14.0",
"@react-router/dev": "7.14.0",
"react": "^18.3.1 || ~19.0.3 || ~19.1.4 || ^19.2.3",
"vite": "^5.1.0 || ^6.2.1 || ^7.0.0 || ^8.0.0"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
},
"scripts": {
"build": "tsup --clean",
"dev": "tsup --watch ./src --watch ../../node_modules/@shopify/hydrogen-react/dist/browser-prod/index.mjs",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"test:watch": "vitest",
"build-docs": "sh ./docs/build-docs.sh && pnpm run format",
"format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
"preview-docs": "pnpm --dir ../../docs/preview run dev"
}
}/**
* These are types for things that are present in the React `canary` release channel.
*
* To load the types declared here in an actual project, there are three ways. The easiest one,
* if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
* is to add `"react/canary"` to the `"types"` array.
*
* Alternatively, a specific import syntax can to be used from a typescript file.
* This module does not exist in reality, which is why the {} is important:
*
* ```ts
* import {} from 'react/canary'
* ```
*
* It is also possible to include it through a triple-slash reference:
*
* ```ts
* /// <reference types="react/canary" />
* ```
*
* Either the import or the reference only needs to appear once, anywhere in the project.
*/
// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared,
import React = require(".");
export {};
declare const UNDEFINED_VOID_ONLY: unique symbol;
type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
type NativeToggleEvent = ToggleEvent;
declare module "." {
export type Usable<T> = PromiseLike<T> | Context<T>;
export function use<T>(usable: Usable<T>): T;
interface ServerContextJSONArray extends ReadonlyArray<ServerContextJSONValue> {}
export type ServerContextJSONValue =
| string
| boolean
| number
| null
| ServerContextJSONArray
| { [key: string]: ServerContextJSONValue };
export interface ServerContext<T extends ServerContextJSONValue> {
Provider: Provider<T>;
}
/**
* Accepts a context object (the value returned from `React.createContext` or `React.createServerContext`) and returns the current
* context value, as given by the nearest context provider for the given context.
*
* @version 16.8.0
* @see {@link https://react.dev/reference/react/useContext}
*/
function useContext<T extends ServerContextJSONValue>(context: ServerContext<T>): T;
export function createServerContext<T extends ServerContextJSONValue>(
globalName: string,
defaultValue: T,
): ServerContext<T>;
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function cache<CachedFunction extends Function>(fn: CachedFunction): CachedFunction;
export function unstable_useCacheRefresh(): () => void;
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {
functions: (formData: FormData) => void | Promise<void>;
}
export interface TransitionStartFunction {
/**
* Marks all state updates inside the async function as transitions
*
* @see {https://react.dev/reference/react/useTransition#starttransition}
*
* @param callback
*/
(callback: () => Promise<VoidOrUndefinedOnly>): void;
}
/**
* Similar to `useTransition` but allows uses where hooks are not available.
*
* @param callback An _asynchronous_ function which causes state updates that can be deferred.
*/
export function startTransition(scope: () => Promise<VoidOrUndefinedOnly>): void;
export function useOptimistic<State>(
passthrough: State,
): [State, (action: State | ((pendingState: State) => State)) => void];
export function useOptimistic<State, Action>(
passthrough: State,
reducer: (state: State, action: Action) => State,
): [State, (action: Action) => void];
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
cleanup: () => VoidOrUndefinedOnly;
}
export function useActionState<State>(
action: (state: Awaited<State>) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: Awaited<State>, dispatch: () => void, isPending: boolean];
export function useActionState<State, Payload>(
action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: Awaited<State>, dispatch: (payload: Payload) => void, isPending: boolean];
interface DOMAttributes<T> {
// Transition Events
onTransitionCancel?: TransitionEventHandler<T> | undefined;
onTransitionCancelCapture?: TransitionEventHandler<T> | undefined;
onTransitionRun?: TransitionEventHandler<T> | undefined;
onTransitionRunCapture?: TransitionEventHandler<T> | undefined;
onTransitionStart?: TransitionEventHandler<T> | undefined;
onTransitionStartCapture?: TransitionEventHandler<T> | undefined;
}
type ToggleEventHandler<T = Element> = EventHandler<ToggleEvent<T>>;
interface HTMLAttributes<T> {
popover?: "" | "auto" | "manual" | "hint" | undefined;
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
popoverTarget?: string | undefined;
onToggle?: ToggleEventHandler<T> | undefined;
onBeforeToggle?: ToggleEventHandler<T> | undefined;
}
interface ToggleEvent<T = Element> extends SyntheticEvent<T, NativeToggleEvent> {
oldState: "closed" | "open";
newState: "closed" | "open";
}
interface LinkHTMLAttributes<T> {
precedence?: string | undefined;
}
interface StyleHTMLAttributes<T> {
href?: string | undefined;
precedence?: string | undefined;
}
/**
* @internal Use `Awaited<ReactNode>` instead
*/
// Helper type to enable `Awaited<ReactNode>`.
// Must be a copy of the non-thenables of `ReactNode`.
type AwaitedReactNode =
| ReactElement
| string
| number
| Iterable<AwaitedReactNode>
| ReactPortal
| boolean
| null
| undefined;
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
promises: Promise<AwaitedReactNode>;
bigints: bigint;
}
}
/**
* These are types for things that are present in the `experimental` builds of React but not yet
* on a stable build.
*
* Once they are promoted to stable they can just be moved to the main index file.
*
* To load the types declared here in an actual project, there are three ways. The easiest one,
* if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
* is to add `"react/experimental"` to the `"types"` array.
*
* Alternatively, a specific import syntax can to be used from a typescript file.
* This module does not exist in reality, which is why the {} is important:
*
* ```ts
* import {} from 'react/experimental'
* ```
*
* It is also possible to include it through a triple-slash reference:
*
* ```ts
* /// <reference types="react/experimental" />
* ```
*
* Either the import or the reference only needs to appear once, anywhere in the project.
*/
// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are
// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.
//
// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js
// is a good place to start looking for details; it generally calls prop validation functions or delegates
// all tasks done as part of the render phase (the concurrent part of the React update cycle).
//
// Suspense-related handling can be found in ReactFiberThrow.js.
import React = require("./canary");
export {};
declare const UNDEFINED_VOID_ONLY: unique symbol;
type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
declare module "." {
export interface SuspenseProps {
/**
* The presence of this prop indicates that the content is computationally expensive to render.
* In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
* @see {@link https://github.com/facebook/react/pull/19936}
*/
unstable_expectedLoadTime?: number | undefined;
}
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together";
export type SuspenseListTailMode = "collapsed" | "hidden";
export interface SuspenseListCommonProps {
/**
* Note that SuspenseList require more than one child;
* it is a runtime warning to provide only a single child.
*
* It does, however, allow those children to be wrapped inside a single
* level of `<React.Fragment>`.
*/
children: ReactElement | Iterable<ReactElement>;
}
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder: "forwards" | "backwards";
/**
* Dictates how unloaded items in a SuspenseList is shown.
*
* - By default, `SuspenseList` will show all fallbacks in the list.
* - `collapsed` shows only the next fallback in the list.
* - `hidden` doesn’t show any unloaded items.
*/
tail?: SuspenseListTailMode | undefined;
}
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
/**
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
*/
tail?: never | undefined;
}
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
/**
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
* in which these components are revealed to the user.
*
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
* until previous items have been displayed (this behavior is adjustable).
*
* @see {@link https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist}
* @see {@link https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist}
*/
export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function experimental_useEffectEvent<T extends Function>(event: T): T;
/**
* Warning: Only available in development builds.
*/
function captureOwnerStack(): string | null;
type Reference = object;
type TaintableUniqueValue = string | bigint | ArrayBufferView;
function experimental_taintUniqueValue(
message: string | undefined,
lifetime: Reference,
value: TaintableUniqueValue,
): void;
function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
export interface HTMLAttributes<T> {
/**
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}
*/
inert?: boolean | undefined;
}
}
/*
React projects that don't include the DOM library need these interfaces to compile.
React Native applications use React, but there is no DOM available. The JavaScript runtime
is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.
Warning: all of these interfaces are empty. If you want type definitions for various properties
(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).
*/
interface Event {}
interface AnimationEvent extends Event {}
interface ClipboardEvent extends Event {}
interface CompositionEvent extends Event {}
interface DragEvent extends Event {}
interface FocusEvent extends Event {}
interface InputEvent extends Event {}
interface KeyboardEvent extends Event {}
interface MouseEvent extends Event {}
interface TouchEvent extends Event {}
interface PointerEvent extends Event {}
interface ToggleEvent extends Event {}
interface TransitionEvent extends Event {}
interface UIEvent extends Event {}
interface WheelEvent extends Event {}
interface EventTarget {}
interface Document {}
interface DataTransfer {}
interface StyleMedia {}
interface Element {}
interface DocumentFragment {}
interface HTMLElement extends Element {}
interface HTMLAnchorElement extends HTMLElement {}
interface HTMLAreaElement extends HTMLElement {}
interface HTMLAudioElement extends HTMLElement {}
interface HTMLBaseElement extends HTMLElement {}
interface HTMLBodyElement extends HTMLElement {}
interface HTMLBRElement extends HTMLElement {}
interface HTMLButtonElement extends HTMLElement {}
interface HTMLCanvasElement extends HTMLElement {}
interface HTMLDataElement extends HTMLElement {}
interface HTMLDataListElement extends HTMLElement {}
interface HTMLDetailsElement extends HTMLElement {}
interface HTMLDialogElement extends HTMLElement {}
interface HTMLDivElement extends HTMLElement {}
interface HTMLDListElement extends HTMLElement {}
interface HTMLEmbedElement extends HTMLElement {}
interface HTMLFieldSetElement extends HTMLElement {}
interface HTMLFormElement extends HTMLElement {}
interface HTMLHeadingElement extends HTMLElement {}
interface HTMLHeadElement extends HTMLElement {}
interface HTMLHRElement extends HTMLElement {}
interface HTMLHtmlElement extends HTMLElement {}
interface HTMLIFrameElement extends HTMLElement {}
interface HTMLImageElement extends HTMLElement {}
interface HTMLInputElement extends HTMLElement {}
interface HTMLModElement extends HTMLElement {}
interface HTMLLabelElement extends HTMLElement {}
interface HTMLLegendElement extends HTMLElement {}
interface HTMLLIElement extends HTMLElement {}
interface HTMLLinkElement extends HTMLElement {}
interface HTMLMapElement extends HTMLElement {}
interface HTMLMetaElement extends HTMLElement {}
interface HTMLMeterElement extends HTMLElement {}
interface HTMLObjectElement extends HTMLElement {}
interface HTMLOListElement extends HTMLElement {}
interface HTMLOptGroupElement extends HTMLElement {}
interface HTMLOptionElement extends HTMLElement {}
interface HTMLOutputElement extends HTMLElement {}
interface HTMLParagraphElement extends HTMLElement {}
interface HTMLParamElement extends HTMLElement {}
interface HTMLPreElement extends HTMLElement {}
interface HTMLProgressElement extends HTMLElement {}
interface HTMLQuoteElement extends HTMLElement {}
interface HTMLSlotElement extends HTMLElement {}
interface HTMLScriptElement extends HTMLElement {}
interface HTMLSelectElement extends HTMLElement {}
interface HTMLSourceElement extends HTMLElement {}
interface HTMLSpanElement extends HTMLElement {}
interface HTMLStyleElement extends HTMLElement {}
interface HTMLTableElement extends HTMLElement {}
interface HTMLTableColElement extends HTMLElement {}
interface HTMLTableDataCellElement extends HTMLElement {}
interface HTMLTableHeaderCellElement extends HTMLElement {}
interface HTMLTableRowElement extends HTMLElement {}
interface HTMLTableSectionElement extends HTMLElement {}
interface HTMLTemplateElement extends HTMLElement {}
interface HTMLTextAreaElement extends HTMLElement {}
interface HTMLTimeElement extends HTMLElement {}
interface HTMLTitleElement extends HTMLElement {}
interface HTMLTrackElement extends HTMLElement {}
interface HTMLUListElement extends HTMLElement {}
interface HTMLVideoElement extends HTMLElement {}
interface HTMLWebViewElement extends HTMLElement {}
interface SVGElement extends Element {}
interface SVGSVGElement extends SVGElement {}
interface SVGCircleElement extends SVGElement {}
interface SVGClipPathElement extends SVGElement {}
interface SVGDefsElement extends SVGElement {}
interface SVGDescElement extends SVGElement {}
interface SVGEllipseElement extends SVGElement {}
interface SVGFEBlendElement extends SVGElement {}
interface SVGFEColorMatrixElement extends SVGElement {}
interface SVGFEComponentTransferElement extends SVGElement {}
interface SVGFECompositeElement extends SVGElement {}
interface SVGFEConvolveMatrixElement extends SVGElement {}
interface SVGFEDiffuseLightingElement extends SVGElement {}
interface SVGFEDisplacementMapElement extends SVGElement {}
interface SVGFEDistantLightElement extends SVGElement {}
interface SVGFEDropShadowElement extends SVGElement {}
interface SVGFEFloodElement extends SVGElement {}
interface SVGFEFuncAElement extends SVGElement {}
interface SVGFEFuncBElement extends SVGElement {}
interface SVGFEFuncGElement extends SVGElement {}
interface SVGFEFuncRElement extends SVGElement {}
interface SVGFEGaussianBlurElement extends SVGElement {}
interface SVGFEImageElement extends SVGElement {}
interface SVGFEMergeElement extends SVGElement {}
interface SVGFEMergeNodeElement extends SVGElement {}
interface SVGFEMorphologyElement extends SVGElement {}
interface SVGFEOffsetElement extends SVGElement {}
interface SVGFEPointLightElement extends SVGElement {}
interface SVGFESpecularLightingElement extends SVGElement {}
interface SVGFESpotLightElement extends SVGElement {}
interface SVGFETileElement extends SVGElement {}
interface SVGFETurbulenceElement extends SVGElement {}
interface SVGFilterElement extends SVGElement {}
interface SVGForeignObjectElement extends SVGElement {}
interface SVGGElement extends SVGElement {}
interface SVGImageElement extends SVGElement {}
interface SVGLineElement extends SVGElement {}
interface SVGLinearGradientElement extends SVGElement {}
interface SVGMarkerElement extends SVGElement {}
interface SVGMaskElement extends SVGElement {}
interface SVGMetadataElement extends SVGElement {}
interface SVGPathElement extends SVGElement {}
interface SVGPatternElement extends SVGElement {}
interface SVGPolygonElement extends SVGElement {}
interface SVGPolylineElement extends SVGElement {}
interface SVGRadialGradientElement extends SVGElement {}
interface SVGRectElement extends SVGElement {}
interface SVGSetElement extends SVGElement {}
interface SVGStopElement extends SVGElement {}
interface SVGSwitchElement extends SVGElement {}
interface SVGSymbolElement extends SVGElement {}
interface SVGTextElement extends SVGElement {}
interface SVGTextPathElement extends SVGElement {}
interface SVGTSpanElement extends SVGElement {}
interface SVGUseElement extends SVGElement {}
interface SVGViewElement extends SVGElement {}
interface FormData {}
interface Text {}
interface TouchList {}
interface WebGLRenderingContext {}
interface WebGL2RenderingContext {}
interface TrustedHTML {}
import * as React from "./";
export { Fragment } from "./";
export namespace JSX {
type ElementType = React.JSX.ElementType;
interface Element extends React.JSX.Element {}
interface ElementClass extends React.JSX.ElementClass {}
interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
interface IntrinsicElements extends React.JSX.IntrinsicElements {}
}
export interface JSXSource {
/**
* The source file where the element originates from.
*/
fileName?: string | undefined;
/**
* The line number where the element was created.
*/
lineNumber?: number | undefined;
/**
* The column number where the element was created.
*/
columnNumber?: number | undefined;
}
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsxDEV(
type: React.ElementType,
props: unknown,
key: React.Key | undefined,
isStatic: boolean,
source?: JSXSource,
self?: unknown,
): React.ReactElement;
import * as React from "./";
export { Fragment } from "./";
export namespace JSX {
type ElementType = React.JSX.ElementType;
interface Element extends React.JSX.Element {}
interface ElementClass extends React.JSX.ElementClass {}
interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
interface IntrinsicElements extends React.JSX.IntrinsicElements {}
}
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsx(
type: React.ElementType,
props: unknown,
key?: React.Key,
): React.ReactElement;
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsxs(
type: React.ElementType,
props: unknown,
key?: React.Key,
): React.ReactElement;
{
"name": "@types/react",
"version": "18.3.29",
"description": "TypeScript definitions for react",
"homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react",
"license": "MIT",
"contributors": [
{
"name": "Asana",
"url": "https://asana.com"
},
{
"name": "AssureSign",
"url": "http://www.assuresign.com"
},
{
"name": "Microsoft",
"url": "https://microsoft.com"
},
{
"name": "John Reilly",
"githubUsername": "johnnyreilly",
"url": "https://github.com/johnnyreilly"
},
{
"name": "Benoit Benezech",
"githubUsername": "bbenezech",
"url": "https://github.com/bbenezech"
},
{
"name": "Patricio Zavolinsky",
"githubUsername": "pzavolinsky",
"url": "https://github.com/pzavolinsky"
},
{
"name": "Eric Anderson",
"githubUsername": "ericanderson",
"url": "https://github.com/ericanderson"
},
{
"name": "Dovydas Navickas",
"githubUsername": "DovydasNavickas",
"url": "https://github.com/DovydasNavickas"
},
{
"name": "Josh Rutherford",
"githubUsername": "theruther4d",
"url": "https://github.com/theruther4d"
},
{
"name": "Guilherme Hübner",
"githubUsername": "guilhermehubner",
"url": "https://github.com/guilhermehubner"
},
{
"name": "Ferdy Budhidharma",
"githubUsername": "ferdaber",
"url": "https://github.com/ferdaber"
},
{
"name": "Johann Rakotoharisoa",
"githubUsername": "jrakotoharisoa",
"url": "https://github.com/jrakotoharisoa"
},
{
"name": "Olivier Pascal",
"githubUsername": "pascaloliv",
"url": "https://github.com/pascaloliv"
},
{
"name": "Martin Hochel",
"githubUsername": "hotell",
"url": "https://github.com/hotell"
},
{
"name": "Frank Li",
"githubUsername": "franklixuefei",
"url": "https://github.com/franklixuefei"
},
{
"name": "Jessica Franco",
"githubUsername": "Jessidhia",
"url": "https://github.com/Jessidhia"
},
{
"name": "Saransh Kataria",
"githubUsername": "saranshkataria",
"url": "https://github.com/saranshkataria"
},
{
"name": "Kanitkorn Sujautra",
"githubUsername": "lukyth",
"url": "https://github.com/lukyth"
},
{
"name": "Sebastian Silbermann",
"githubUsername": "eps1lon",
"url": "https://github.com/eps1lon"
},
{
"name": "Kyle Scully",
"githubUsername": "zieka",
"url": "https://github.com/zieka"
},
{
"name": "Cong Zhang",
"githubUsername": "dancerphil",
"url": "https://github.com/dancerphil"
},
{
"name": "Dimitri Mitropoulos",
"githubUsername": "dimitropoulos",
"url": "https://github.com/dimitropoulos"
},
{
"name": "JongChan Choi",
"githubUsername": "disjukr",
"url": "https://github.com/disjukr"
},
{
"name": "Victor Magalhães",
"githubUsername": "vhfmag",
"url": "https://github.com/vhfmag"
},
{
"name": "Priyanshu Rav",
"githubUsername": "priyanshurav",
"url": "https://github.com/priyanshurav"
},
{
"name": "Dmitry Semigradsky",
"githubUsername": "Semigradsky",
"url": "https://github.com/Semigradsky"
},
{
"name": "Matt Pocock",
"githubUsername": "mattpocock",
"url": "https://github.com/mattpocock"
}
],
"main": "",
"types": "index.d.ts",
"typesVersions": {
"<=5.0": {
"*": [
"ts5.0/*"
]
}
},
"exports": {
".": {
"types@<=5.0": {
"default": "./ts5.0/index.d.ts"
},
"types": {
"default": "./index.d.ts"
}
},
"./canary": {
"types@<=5.0": {
"default": "./ts5.0/canary.d.ts"
},
"types": {
"default": "./canary.d.ts"
}
},
"./experimental": {
"types@<=5.0": {
"default": "./ts5.0/experimental.d.ts"
},
"types": {
"default": "./experimental.d.ts"
}
},
"./jsx-runtime": {
"types@<=5.0": {
"default": "./ts5.0/jsx-runtime.d.ts"
},
"types": {
"default": "./jsx-runtime.d.ts"
}
},
"./jsx-dev-runtime": {
"types@<=5.0": {
"default": "./ts5.0/jsx-dev-runtime.d.ts"
},
"types": {
"default": "./jsx-dev-runtime.d.ts"
}
},
"./package.json": "./package.json"
},
"repository": {
"type": "git",
"url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
"directory": "types/react"
},
"scripts": {},
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.2.2"
},
"peerDependencies": {},
"typesPublisherContentHash": "9a2db63fba19867eecedffb70e57174fd752484350b91d6c40423acfc18378a1",
"typeScriptVersion": "5.3"
}/**
* These are types for things that are present in the React `canary` release channel.
*
* To load the types declared here in an actual project, there are three ways. The easiest one,
* if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
* is to add `"react/canary"` to the `"types"` array.
*
* Alternatively, a specific import syntax can to be used from a typescript file.
* This module does not exist in reality, which is why the {} is important:
*
* ```ts
* import {} from 'react/canary'
* ```
*
* It is also possible to include it through a triple-slash reference:
*
* ```ts
* /// <reference types="react/canary" />
* ```
*
* Either the import or the reference only needs to appear once, anywhere in the project.
*/
// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared,
import React = require(".");
export {};
declare const UNDEFINED_VOID_ONLY: unique symbol;
type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
type NativeToggleEvent = ToggleEvent;
declare module "." {
export type Usable<T> = PromiseLike<T> | Context<T>;
export function use<T>(usable: Usable<T>): T;
interface ServerContextJSONArray extends ReadonlyArray<ServerContextJSONValue> {}
export type ServerContextJSONValue =
| string
| boolean
| number
| null
| ServerContextJSONArray
| { [key: string]: ServerContextJSONValue };
export interface ServerContext<T extends ServerContextJSONValue> {
Provider: Provider<T>;
}
/**
* Accepts a context object (the value returned from `React.createContext` or `React.createServerContext`) and returns the current
* context value, as given by the nearest context provider for the given context.
*
* @version 16.8.0
* @see {@link https://react.dev/reference/react/useContext}
*/
function useContext<T extends ServerContextJSONValue>(context: ServerContext<T>): T;
export function createServerContext<T extends ServerContextJSONValue>(
globalName: string,
defaultValue: T,
): ServerContext<T>;
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function cache<CachedFunction extends Function>(fn: CachedFunction): CachedFunction;
export function unstable_useCacheRefresh(): () => void;
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {
functions: (formData: FormData) => void | Promise<void>;
}
export interface TransitionStartFunction {
/**
* Marks all state updates inside the async function as transitions
*
* @see {https://react.dev/reference/react/useTransition#starttransition}
*
* @param callback
*/
(callback: () => Promise<VoidOrUndefinedOnly>): void;
}
/**
* Similar to `useTransition` but allows uses where hooks are not available.
*
* @param callback An _asynchronous_ function which causes state updates that can be deferred.
*/
export function startTransition(scope: () => Promise<VoidOrUndefinedOnly>): void;
export function useOptimistic<State>(
passthrough: State,
): [State, (action: State | ((pendingState: State) => State)) => void];
export function useOptimistic<State, Action>(
passthrough: State,
reducer: (state: State, action: Action) => State,
): [State, (action: Action) => void];
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {
cleanup: () => VoidOrUndefinedOnly;
}
export function useActionState<State>(
action: (state: Awaited<State>) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: Awaited<State>, dispatch: () => void, isPending: boolean];
export function useActionState<State, Payload>(
action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
initialState: Awaited<State>,
permalink?: string,
): [state: Awaited<State>, dispatch: (payload: Payload) => void, isPending: boolean];
interface DOMAttributes<T> {
// Transition Events
onTransitionCancel?: TransitionEventHandler<T> | undefined;
onTransitionCancelCapture?: TransitionEventHandler<T> | undefined;
onTransitionRun?: TransitionEventHandler<T> | undefined;
onTransitionRunCapture?: TransitionEventHandler<T> | undefined;
onTransitionStart?: TransitionEventHandler<T> | undefined;
onTransitionStartCapture?: TransitionEventHandler<T> | undefined;
}
type ToggleEventHandler<T = Element> = EventHandler<ToggleEvent<T>>;
interface HTMLAttributes<T> {
popover?: "" | "auto" | "manual" | "hint" | undefined;
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
popoverTarget?: string | undefined;
onToggle?: ToggleEventHandler<T> | undefined;
onBeforeToggle?: ToggleEventHandler<T> | undefined;
}
interface ToggleEvent<T = Element> extends SyntheticEvent<T, NativeToggleEvent> {
oldState: "closed" | "open";
newState: "closed" | "open";
}
interface LinkHTMLAttributes<T> {
precedence?: string | undefined;
}
interface StyleHTMLAttributes<T> {
href?: string | undefined;
precedence?: string | undefined;
}
/**
* @internal Use `Awaited<ReactNode>` instead
*/
// Helper type to enable `Awaited<ReactNode>`.
// Must be a copy of the non-thenables of `ReactNode`.
type AwaitedReactNode =
| ReactElement
| string
| number
| Iterable<AwaitedReactNode>
| ReactPortal
| boolean
| null
| undefined;
interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {
promises: Promise<AwaitedReactNode>;
bigints: bigint;
}
}
/**
* These are types for things that are present in the `experimental` builds of React but not yet
* on a stable build.
*
* Once they are promoted to stable they can just be moved to the main index file.
*
* To load the types declared here in an actual project, there are three ways. The easiest one,
* if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
* is to add `"react/experimental"` to the `"types"` array.
*
* Alternatively, a specific import syntax can to be used from a typescript file.
* This module does not exist in reality, which is why the {} is important:
*
* ```ts
* import {} from 'react/experimental'
* ```
*
* It is also possible to include it through a triple-slash reference:
*
* ```ts
* /// <reference types="react/experimental" />
* ```
*
* Either the import or the reference only needs to appear once, anywhere in the project.
*/
// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are
// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.
//
// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js
// is a good place to start looking for details; it generally calls prop validation functions or delegates
// all tasks done as part of the render phase (the concurrent part of the React update cycle).
//
// Suspense-related handling can be found in ReactFiberThrow.js.
import React = require("./canary");
export {};
declare const UNDEFINED_VOID_ONLY: unique symbol;
type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };
declare module "." {
export interface SuspenseProps {
/**
* The presence of this prop indicates that the content is computationally expensive to render.
* In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).
* @see {@link https://github.com/facebook/react/pull/19936}
*/
unstable_expectedLoadTime?: number | undefined;
}
export type SuspenseListRevealOrder = "forwards" | "backwards" | "together";
export type SuspenseListTailMode = "collapsed" | "hidden";
export interface SuspenseListCommonProps {
/**
* Note that SuspenseList require more than one child;
* it is a runtime warning to provide only a single child.
*
* It does, however, allow those children to be wrapped inside a single
* level of `<React.Fragment>`.
*/
children: ReactElement | Iterable<ReactElement>;
}
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder: "forwards" | "backwards";
/**
* Dictates how unloaded items in a SuspenseList is shown.
*
* - By default, `SuspenseList` will show all fallbacks in the list.
* - `collapsed` shows only the next fallback in the list.
* - `hidden` doesn’t show any unloaded items.
*/
tail?: SuspenseListTailMode | undefined;
}
interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
/**
* Defines the order in which the `SuspenseList` children should be revealed.
*/
revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps["revealOrder"]> | undefined;
/**
* The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
*/
tail?: never | undefined;
}
export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
/**
* `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
* in which these components are revealed to the user.
*
* When multiple components need to fetch data, this data may arrive in an unpredictable order.
* However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
* until previous items have been displayed (this behavior is adjustable).
*
* @see {@link https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist}
* @see {@link https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist}
*/
export const unstable_SuspenseList: ExoticComponent<SuspenseListProps>;
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
export function experimental_useEffectEvent<T extends Function>(event: T): T;
/**
* Warning: Only available in development builds.
*/
function captureOwnerStack(): string | null;
type Reference = object;
type TaintableUniqueValue = string | bigint | ArrayBufferView;
function experimental_taintUniqueValue(
message: string | undefined,
lifetime: Reference,
value: TaintableUniqueValue,
): void;
function experimental_taintObjectReference(message: string | undefined, object: Reference): void;
export interface HTMLAttributes<T> {
/**
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}
*/
inert?: boolean | undefined;
}
}
/*
React projects that don't include the DOM library need these interfaces to compile.
React Native applications use React, but there is no DOM available. The JavaScript runtime
is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.
Warning: all of these interfaces are empty. If you want type definitions for various properties
(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).
*/
interface Event {}
interface AnimationEvent extends Event {}
interface ClipboardEvent extends Event {}
interface CompositionEvent extends Event {}
interface DragEvent extends Event {}
interface FocusEvent extends Event {}
interface InputEvent extends Event {}
interface KeyboardEvent extends Event {}
interface MouseEvent extends Event {}
interface TouchEvent extends Event {}
interface PointerEvent extends Event {}
interface ToggleEvent extends Event {}
interface TransitionEvent extends Event {}
interface UIEvent extends Event {}
interface WheelEvent extends Event {}
interface EventTarget {}
interface Document {}
interface DataTransfer {}
interface StyleMedia {}
interface Element {}
interface DocumentFragment {}
interface HTMLElement extends Element {}
interface HTMLAnchorElement extends HTMLElement {}
interface HTMLAreaElement extends HTMLElement {}
interface HTMLAudioElement extends HTMLElement {}
interface HTMLBaseElement extends HTMLElement {}
interface HTMLBodyElement extends HTMLElement {}
interface HTMLBRElement extends HTMLElement {}
interface HTMLButtonElement extends HTMLElement {}
interface HTMLCanvasElement extends HTMLElement {}
interface HTMLDataElement extends HTMLElement {}
interface HTMLDataListElement extends HTMLElement {}
interface HTMLDetailsElement extends HTMLElement {}
interface HTMLDialogElement extends HTMLElement {}
interface HTMLDivElement extends HTMLElement {}
interface HTMLDListElement extends HTMLElement {}
interface HTMLEmbedElement extends HTMLElement {}
interface HTMLFieldSetElement extends HTMLElement {}
interface HTMLFormElement extends HTMLElement {}
interface HTMLHeadingElement extends HTMLElement {}
interface HTMLHeadElement extends HTMLElement {}
interface HTMLHRElement extends HTMLElement {}
interface HTMLHtmlElement extends HTMLElement {}
interface HTMLIFrameElement extends HTMLElement {}
interface HTMLImageElement extends HTMLElement {}
interface HTMLInputElement extends HTMLElement {}
interface HTMLModElement extends HTMLElement {}
interface HTMLLabelElement extends HTMLElement {}
interface HTMLLegendElement extends HTMLElement {}
interface HTMLLIElement extends HTMLElement {}
interface HTMLLinkElement extends HTMLElement {}
interface HTMLMapElement extends HTMLElement {}
interface HTMLMetaElement extends HTMLElement {}
interface HTMLMeterElement extends HTMLElement {}
interface HTMLObjectElement extends HTMLElement {}
interface HTMLOListElement extends HTMLElement {}
interface HTMLOptGroupElement extends HTMLElement {}
interface HTMLOptionElement extends HTMLElement {}
interface HTMLOutputElement extends HTMLElement {}
interface HTMLParagraphElement extends HTMLElement {}
interface HTMLParamElement extends HTMLElement {}
interface HTMLPreElement extends HTMLElement {}
interface HTMLProgressElement extends HTMLElement {}
interface HTMLQuoteElement extends HTMLElement {}
interface HTMLSlotElement extends HTMLElement {}
interface HTMLScriptElement extends HTMLElement {}
interface HTMLSelectElement extends HTMLElement {}
interface HTMLSourceElement extends HTMLElement {}
interface HTMLSpanElement extends HTMLElement {}
interface HTMLStyleElement extends HTMLElement {}
interface HTMLTableElement extends HTMLElement {}
interface HTMLTableColElement extends HTMLElement {}
interface HTMLTableDataCellElement extends HTMLElement {}
interface HTMLTableHeaderCellElement extends HTMLElement {}
interface HTMLTableRowElement extends HTMLElement {}
interface HTMLTableSectionElement extends HTMLElement {}
interface HTMLTemplateElement extends HTMLElement {}
interface HTMLTextAreaElement extends HTMLElement {}
interface HTMLTimeElement extends HTMLElement {}
interface HTMLTitleElement extends HTMLElement {}
interface HTMLTrackElement extends HTMLElement {}
interface HTMLUListElement extends HTMLElement {}
interface HTMLVideoElement extends HTMLElement {}
interface HTMLWebViewElement extends HTMLElement {}
interface SVGElement extends Element {}
interface SVGSVGElement extends SVGElement {}
interface SVGCircleElement extends SVGElement {}
interface SVGClipPathElement extends SVGElement {}
interface SVGDefsElement extends SVGElement {}
interface SVGDescElement extends SVGElement {}
interface SVGEllipseElement extends SVGElement {}
interface SVGFEBlendElement extends SVGElement {}
interface SVGFEColorMatrixElement extends SVGElement {}
interface SVGFEComponentTransferElement extends SVGElement {}
interface SVGFECompositeElement extends SVGElement {}
interface SVGFEConvolveMatrixElement extends SVGElement {}
interface SVGFEDiffuseLightingElement extends SVGElement {}
interface SVGFEDisplacementMapElement extends SVGElement {}
interface SVGFEDistantLightElement extends SVGElement {}
interface SVGFEDropShadowElement extends SVGElement {}
interface SVGFEFloodElement extends SVGElement {}
interface SVGFEFuncAElement extends SVGElement {}
interface SVGFEFuncBElement extends SVGElement {}
interface SVGFEFuncGElement extends SVGElement {}
interface SVGFEFuncRElement extends SVGElement {}
interface SVGFEGaussianBlurElement extends SVGElement {}
interface SVGFEImageElement extends SVGElement {}
interface SVGFEMergeElement extends SVGElement {}
interface SVGFEMergeNodeElement extends SVGElement {}
interface SVGFEMorphologyElement extends SVGElement {}
interface SVGFEOffsetElement extends SVGElement {}
interface SVGFEPointLightElement extends SVGElement {}
interface SVGFESpecularLightingElement extends SVGElement {}
interface SVGFESpotLightElement extends SVGElement {}
interface SVGFETileElement extends SVGElement {}
interface SVGFETurbulenceElement extends SVGElement {}
interface SVGFilterElement extends SVGElement {}
interface SVGForeignObjectElement extends SVGElement {}
interface SVGGElement extends SVGElement {}
interface SVGImageElement extends SVGElement {}
interface SVGLineElement extends SVGElement {}
interface SVGLinearGradientElement extends SVGElement {}
interface SVGMarkerElement extends SVGElement {}
interface SVGMaskElement extends SVGElement {}
interface SVGMetadataElement extends SVGElement {}
interface SVGPathElement extends SVGElement {}
interface SVGPatternElement extends SVGElement {}
interface SVGPolygonElement extends SVGElement {}
interface SVGPolylineElement extends SVGElement {}
interface SVGRadialGradientElement extends SVGElement {}
interface SVGRectElement extends SVGElement {}
interface SVGSetElement extends SVGElement {}
interface SVGStopElement extends SVGElement {}
interface SVGSwitchElement extends SVGElement {}
interface SVGSymbolElement extends SVGElement {}
interface SVGTextElement extends SVGElement {}
interface SVGTextPathElement extends SVGElement {}
interface SVGTSpanElement extends SVGElement {}
interface SVGUseElement extends SVGElement {}
interface SVGViewElement extends SVGElement {}
interface FormData {}
interface Text {}
interface TouchList {}
interface WebGLRenderingContext {}
interface WebGL2RenderingContext {}
interface TrustedHTML {}
import * as React from "./";
export { Fragment } from "./";
export namespace JSX {
interface Element extends React.JSX.Element {}
interface ElementClass extends React.JSX.ElementClass {}
interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
interface IntrinsicElements extends React.JSX.IntrinsicElements {}
}
export interface JSXSource {
/**
* The source file where the element originates from.
*/
fileName?: string | undefined;
/**
* The line number where the element was created.
*/
lineNumber?: number | undefined;
/**
* The column number where the element was created.
*/
columnNumber?: number | undefined;
}
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsxDEV(
type: React.ElementType,
props: unknown,
key: React.Key | undefined,
isStatic: boolean,
source?: JSXSource,
self?: unknown,
): React.ReactElement;
import * as React from "./";
export { Fragment } from "./";
export namespace JSX {
interface Element extends React.JSX.Element {}
interface ElementClass extends React.JSX.ElementClass {}
interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
interface IntrinsicElements extends React.JSX.IntrinsicElements {}
}
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsx(
type: React.ElementType,
props: unknown,
key?: React.Key,
): React.ReactElement;
/**
* Create a React element.
*
* You should not use this function directly. Use JSX and a transpiler instead.
*/
export function jsxs(
type: React.ElementType,
props: unknown,
key?: React.Key,
): React.ReactElement;
import type { Maybe } from '../jsutils/Maybe';
import type { ASTNode } from '../language/ast';
import type { SourceLocation } from '../language/location';
import type { Source } from '../language/source';
/**
* Custom extensions
*
* @remarks
* Use a unique identifier name for your extension, for example the name of
* your library or project. Do not use a shortened identifier as this increases
* the risk of conflicts. We recommend you add at most one extension field,
* an object which can contain all the values you need.
*/
export interface GraphQLErrorExtensions {
[attributeName: string]: unknown;
}
/**
* Custom formatted extensions
*
* @remarks
* Use a unique identifier name for your extension, for example the name of
* your library or project. Do not use a shortened identifier as this increases
* the risk of conflicts. We recommend you add at most one extension field,
* an object which can contain all the values you need.
*/
export interface GraphQLFormattedErrorExtensions {
[attributeName: string]: unknown;
}
export interface GraphQLErrorOptions {
nodes?: ReadonlyArray<ASTNode> | ASTNode | null;
source?: Maybe<Source>;
positions?: Maybe<ReadonlyArray<number>>;
path?: Maybe<ReadonlyArray<string | number>>;
originalError?: Maybe<
Error & {
readonly extensions?: unknown;
}
>;
extensions?: Maybe<GraphQLErrorExtensions>;
}
/**
* A GraphQLError describes an Error found during the parse, validate, or
* execute phases of performing a GraphQL operation. In addition to a message
* and stack trace, it also includes information about the locations in a
* GraphQL document and/or execution result that correspond to the Error.
*/
export declare class GraphQLError extends Error {
/**
* An array of `{ line, column }` locations within the source GraphQL document
* which correspond to this error.
*
* Errors during validation often contain multiple locations, for example to
* point out two things with the same name. Errors during execution include a
* single location, the field which produced the error.
*
* Enumerable, and appears in the result of JSON.stringify().
*/
readonly locations: ReadonlyArray<SourceLocation> | undefined;
/**
* An array describing the JSON-path into the execution response which
* corresponds to this error. Only included for errors during execution.
*
* Enumerable, and appears in the result of JSON.stringify().
*/
readonly path: ReadonlyArray<string | number> | undefined;
/**
* An array of GraphQL AST Nodes corresponding to this error.
*/
readonly nodes: ReadonlyArray<ASTNode> | undefined;
/**
* The source GraphQL document for the first location of this error.
*
* Note that if this Error represents more than one node, the source may not
* represent nodes after the first node.
*/
readonly source: Source | undefined;
/**
* An array of character offsets within the source GraphQL document
* which correspond to this error.
*/
readonly positions: ReadonlyArray<number> | undefined;
/**
* The original error thrown from a field resolver during execution.
*/
readonly originalError: Error | undefined;
/**
* Extension fields to add to the formatted error.
*/
readonly extensions: GraphQLErrorExtensions;
constructor(message: string, options?: GraphQLErrorOptions);
/**
* @deprecated Please use the `GraphQLErrorOptions` constructor overload instead.
*/
constructor(
message: string,
nodes?: ReadonlyArray<ASTNode> | ASTNode | null,
source?: Maybe<Source>,
positions?: Maybe<ReadonlyArray<number>>,
path?: Maybe<ReadonlyArray<string | number>>,
originalError?: Maybe<
Error & {
readonly extensions?: unknown;
}
>,
extensions?: Maybe<GraphQLErrorExtensions>,
);
get [Symbol.toStringTag](): string;
toString(): string;
toJSON(): GraphQLFormattedError;
}
/**
* See: https://spec.graphql.org/draft/#sec-Errors
*/
export interface GraphQLFormattedError {
/**
* A short, human-readable summary of the problem that **SHOULD NOT** change
* from occurrence to occurrence of the problem, except for purposes of
* localization.
*/
readonly message: string;
/**
* If an error can be associated to a particular point in the requested
* GraphQL document, it should contain a list of locations.
*/
readonly locations?: ReadonlyArray<SourceLocation>;
/**
* If an error can be associated to a particular field in the GraphQL result,
* it _must_ contain an entry with the key `path` that details the path of
* the response field which experienced the error. This allows clients to
* identify whether a null result is intentional or caused by a runtime error.
*/
readonly path?: ReadonlyArray<string | number>;
/**
* Reserved for implementors to extend the protocol however they see fit,
* and hence there are no additional restrictions on its contents.
*/
readonly extensions?: GraphQLFormattedErrorExtensions;
}
/**
* Prints a GraphQLError to a string, representing useful location information
* about the error's position in the source.
*
* @deprecated Please use `error.toString` instead. Will be removed in v17
*/
export declare function printError(error: GraphQLError): string;
/**
* Given a GraphQLError, format it according to the rules described by the
* Response Format, Errors section of the GraphQL Specification.
*
* @deprecated Please use `error.toJSON` instead. Will be removed in v17
*/
export declare function formatError(error: GraphQLError): GraphQLFormattedError;
export { GraphQLError, printError, formatError } from './GraphQLError';
export type {
GraphQLErrorOptions,
GraphQLFormattedError,
GraphQLErrorExtensions,
GraphQLFormattedErrorExtensions,
} from './GraphQLError';
export { syntaxError } from './syntaxError';
export { locatedError } from './locatedError';
import type { Maybe } from '../jsutils/Maybe';
import type { ASTNode } from '../language/ast';
import { GraphQLError } from './GraphQLError';
/**
* Given an arbitrary value, presumably thrown while attempting to execute a
* GraphQL operation, produce a new GraphQLError aware of the location in the
* document responsible for the original Error.
*/
export declare function locatedError(
rawOriginalError: unknown,
nodes: ASTNode | ReadonlyArray<ASTNode> | undefined | null,
path?: Maybe<ReadonlyArray<string | number>>,
): GraphQLError;
import type { Source } from '../language/source';
import { GraphQLError } from './GraphQLError';
/**
* Produces a GraphQLError representing a syntax error, containing useful
* descriptive information about the syntax error's position in the source.
*/
export declare function syntaxError(
source: Source,
position: number,
description: string,
): GraphQLError;
import type { ObjMap } from '../jsutils/ObjMap';
import type {
FieldNode,
FragmentDefinitionNode,
SelectionSetNode,
} from '../language/ast';
import type { GraphQLObjectType } from '../type/definition';
import type { GraphQLSchema } from '../type/schema';
/**
* Given a selectionSet, collects all of the fields and returns them.
*
* CollectFields requires the "runtime type" of an object. For a field that
* returns an Interface or Union type, the "runtime type" will be the actual
* object type returned by that field.
*
* @internal
*/
export declare function collectFields(
schema: GraphQLSchema,
fragments: ObjMap<FragmentDefinitionNode>,
variableValues: {
[variable: string]: unknown;
},
runtimeType: GraphQLObjectType,
selectionSet: SelectionSetNode,
): Map<string, ReadonlyArray<FieldNode>>;
/**
* Given an array of field nodes, collects all of the subfields of the passed
* in fields, and returns them at the end.
*
* CollectSubFields requires the "return type" of an object. For a field that
* returns an Interface or Union type, the "return type" will be the actual
* object type returned by that field.
*
* @internal
*/
export declare function collectSubfields(
schema: GraphQLSchema,
fragments: ObjMap<FragmentDefinitionNode>,
variableValues: {
[variable: string]: unknown;
},
returnType: GraphQLObjectType,
fieldNodes: ReadonlyArray<FieldNode>,
): Map<string, ReadonlyArray<FieldNode>>;
import type { Maybe } from '../jsutils/Maybe';
import type { ObjMap } from '../jsutils/ObjMap';
import type { Path } from '../jsutils/Path';
import type { PromiseOrValue } from '../jsutils/PromiseOrValue';
import type { GraphQLFormattedError } from '../error/GraphQLError';
import { GraphQLError } from '../error/GraphQLError';
import type {
DocumentNode,
FieldNode,
FragmentDefinitionNode,
OperationDefinitionNode,
} from '../language/ast';
import type {
GraphQLField,
GraphQLFieldResolver,
GraphQLObjectType,
GraphQLResolveInfo,
GraphQLTypeResolver,
} from '../type/definition';
import type { GraphQLSchema } from '../type/schema';
/**
* Terminology
*
* "Definitions" are the generic name for top-level statements in the document.
* Examples of this include:
* 1) Operations (such as a query)
* 2) Fragments
*
* "Operations" are a generic name for requests in the document.
* Examples of this include:
* 1) query,
* 2) mutation
*
* "Selections" are the definitions that can appear legally and at
* single level of the query. These include:
* 1) field references e.g `a`
* 2) fragment "spreads" e.g. `...c`
* 3) inline fragment "spreads" e.g. `...on Type { a }`
*/
/**
* Data that must be available at all points during query execution.
*
* Namely, schema of the type system that is currently executing,
* and the fragments defined in the query document
*/
export interface ExecutionContext {
schema: GraphQLSchema;
fragments: ObjMap<FragmentDefinitionNode>;
rootValue: unknown;
contextValue: unknown;
operation: OperationDefinitionNode;
variableValues: {
[variable: string]: unknown;
};
fieldResolver: GraphQLFieldResolver<any, any>;
typeResolver: GraphQLTypeResolver<any, any>;
subscribeFieldResolver: GraphQLFieldResolver<any, any>;
collectedErrors: CollectedErrors;
}
/**
* @internal
*/
declare class CollectedErrors {
private _errorPositions;
private _errors;
constructor();
get errors(): ReadonlyArray<GraphQLError>;
add(error: GraphQLError, path: Path | undefined): void;
private _hasNulledPosition;
}
/**
* The result of GraphQL execution.
*
* - `errors` is included when any errors occurred as a non-empty array.
* - `data` is the result of a successful execution of the query.
* - `extensions` is reserved for adding non-standard properties.
*/
export interface ExecutionResult<
TData = ObjMap<unknown>,
TExtensions = ObjMap<unknown>,
> {
errors?: ReadonlyArray<GraphQLError>;
data?: TData | null;
extensions?: TExtensions;
}
export interface FormattedExecutionResult<
TData = ObjMap<unknown>,
TExtensions = ObjMap<unknown>,
> {
errors?: ReadonlyArray<GraphQLFormattedError>;
data?: TData | null;
extensions?: TExtensions;
}
export interface ExecutionArgs {
schema: GraphQLSchema;
document: DocumentNode;
rootValue?: unknown;
contextValue?: unknown;
variableValues?: Maybe<{
readonly [variable: string]: unknown;
}>;
operationName?: Maybe<string>;
fieldResolver?: Maybe<GraphQLFieldResolver<any, any>>;
typeResolver?: Maybe<GraphQLTypeResolver<any, any>>;
subscribeFieldResolver?: Maybe<GraphQLFieldResolver<any, any>>;
/** Additional execution options. */
options?: {
/** Set the maximum number of errors allowed for coercing (defaults to 50). */
maxCoercionErrors?: number;
};
}
/**
* Implements the "Executing requests" section of the GraphQL specification.
*
* Returns either a synchronous ExecutionResult (if all encountered resolvers
* are synchronous), or a Promise of an ExecutionResult that will eventually be
* resolved and never rejected.
*
* If the arguments to this function do not result in a legal execution context,
* a GraphQLError will be thrown immediately explaining the invalid input.
*/
export declare function execute(
args: ExecutionArgs,
): PromiseOrValue<ExecutionResult>;
/**
* Also implements the "Executing requests" section of the GraphQL specification.
* However, it guarantees to complete synchronously (or throw an error) assuming
* that all field resolvers are also synchronous.
*/
export declare function executeSync(args: ExecutionArgs): ExecutionResult;
/**
* Essential assertions before executing to provide developer feedback for
* improper use of the GraphQL library.
*
* @deprecated will be removed in v17 in favor of assertValidSchema() and TS checks
* @internal
*/
export declare function assertValidExecutionArguments(
schema: GraphQLSchema,
document: DocumentNode,
rawVariableValues: Maybe<{
readonly [variable: string]: unknown;
}>,
): void;
/**
* Constructs a ExecutionContext object from the arguments passed to
* execute, which we will pass throughout the other execution methods.
*
* Throws a GraphQLError if a valid execution context cannot be created.
*
* @internal
*/
export declare function buildExecutionContext(
args: ExecutionArgs,
): ReadonlyArray<GraphQLError> | ExecutionContext;
/**
* @internal
*/
export declare function buildResolveInfo(
exeContext: ExecutionContext,
fieldDef: GraphQLField<unknown, unknown>,
fieldNodes: ReadonlyArray<FieldNode>,
parentType: GraphQLObjectType,
path: Path,
): GraphQLResolveInfo;
/**
* If a resolveType function is not given, then a default resolve behavior is
* used which attempts two strategies:
*
* First, See if the provided value has a `__typename` field defined, if so, use
* that value as name of the resolved type.
*
* Otherwise, test each possible type for the abstract type by calling
* isTypeOf for the object being coerced, returning the first type that matches.
*/
export declare const defaultTypeResolver: GraphQLTypeResolver<unknown, unknown>;
/**
* If a resolve function is not given, then a default resolve behavior is used
* which takes the property of the source object of the same name as the field
* and returns it as the result, or if it's a function, returns the result
* of calling that function while passing along args and context value.
*/
export declare const defaultFieldResolver: GraphQLFieldResolver<
unknown,
unknown
>;
/**
* This method looks up the field on the given type definition.
* It has special casing for the three introspection fields,
* __schema, __type and __typename. __typename is special because
* it can always be queried as a field, even in situations where no
* other fields are allowed, like on a Union. __schema and __type
* could get automatically added to the query type, but that would
* require mutating type definitions, which would cause issues.
*
* @internal
*/
export declare function getFieldDef(
schema: GraphQLSchema,
parentType: GraphQLObjectType,
fieldNode: FieldNode,
): Maybe<GraphQLField<unknown, unknown>>;
export {};
export { pathToArray as responsePathAsArray } from '../jsutils/Path';
export {
execute,
executeSync,
defaultFieldResolver,
defaultTypeResolver,
} from './execute';
export type {
ExecutionArgs,
ExecutionResult,
FormattedExecutionResult,
} from './execute';
export { subscribe, createSourceEventStream } from './subscribe';
export {
getArgumentValues,
getVariableValues,
getDirectiveValues,
} from './values';
import type { PromiseOrValue } from '../jsutils/PromiseOrValue';
/**
* Given an AsyncIterable and a callback function, return an AsyncIterator
* which produces values mapped via calling the callback function.
*/
export declare function mapAsyncIterator<T, U, R = undefined>(
iterable: AsyncGenerator<T, R, void> | AsyncIterable<T>,
callback: (value: T) => PromiseOrValue<U>,
): AsyncGenerator<U, R, void>;
import type { Maybe } from '../jsutils/Maybe';
import type { ObjMap } from '../jsutils/ObjMap';
import { GraphQLError } from '../error/GraphQLError';
import type {
DirectiveNode,
FieldNode,
VariableDefinitionNode,
} from '../language/ast';
import type { GraphQLField } from '../type/definition';
import type { GraphQLDirective } from '../type/directives';
import type { GraphQLSchema } from '../type/schema';
declare type CoercedVariableValues =
| {
errors: ReadonlyArray<GraphQLError>;
coerced?: never;
}
| {
coerced: {
[variable: string]: unknown;
};
errors?: never;
};
/**
* Prepares an object map of variableValues of the correct type based on the
* provided variable definitions and arbitrary input. If the input cannot be
* parsed to match the variable definitions, a GraphQLError will be thrown.
*
* Note: The returned value is a plain Object with a prototype, since it is
* exposed to user code. Care should be taken to not pull values from the
* Object prototype.
*/
export declare function getVariableValues(
schema: GraphQLSchema,
varDefNodes: ReadonlyArray<VariableDefinitionNode>,
inputs: {
readonly [variable: string]: unknown;
},
options?: {
maxErrors?: number;
},
): CoercedVariableValues;
/**
* Prepares an object map of argument values given a list of argument
* definitions and list of argument AST nodes.
*
* Note: The returned value is a plain Object with a prototype, since it is
* exposed to user code. Care should be taken to not pull values from the
* Object prototype.
*/
export declare function getArgumentValues(
def: GraphQLField<unknown, unknown> | GraphQLDirective,
node: FieldNode | DirectiveNode,
variableValues?: Maybe<ObjMap<unknown>>,
): {
[argument: string]: unknown;
};
/**
* Prepares an object map of argument values given a directive definition
* and a AST node which may contain directives. Optionally also accepts a map
* of variable values.
*
* If the directive does not exist on the node, returns undefined.
*
* Note: The returned value is a plain Object with a prototype, since it is
* exposed to user code. Care should be taken to not pull values from the
* Object prototype.
*/
export declare function getDirectiveValues(
directiveDef: GraphQLDirective,
node: {
readonly directives?: ReadonlyArray<DirectiveNode>;
},
variableValues?: Maybe<ObjMap<unknown>>,
):
| undefined
| {
[argument: string]: unknown;
};
export {};
export declare function devAssert(condition: unknown, message: string): void;
/**
* Given [ A, B, C ] return ' Did you mean A, B, or C?'.
*/
export declare function didYouMean(suggestions: ReadonlyArray<string>): string;
export declare function didYouMean(
subMessage: string,
suggestions: ReadonlyArray<string>,
): string;
/**
* Groups array items into a Map, given a function to produce grouping key.
*/
export declare function groupBy<K, T>(
list: ReadonlyArray<T>,
keyFn: (item: T) => K,
): Map<K, ReadonlyArray<T>>;
/**
* Returns the first argument it receives.
*/
export declare function identityFunc<T>(x: T): T;
/**
* Used to print values in error messages.
*/
export declare function inspect(value: unknown): string;
export declare function invariant(
condition: unknown,
message?: string,
): asserts condition;
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Choose shopify-hydrogen for version-aware Hydrogen and GraphQL work instead of generic React ecommerce templates without Shopify schema pinning.
FAQ
Must I run validation before returning Hydrogen code?
Yes. Every response requires search_docs.mjs, code generation, then validate.mjs with required flags before the user sees output.
When should I use api hydrogen versus api storefront?
Always use api hydrogen for Hydrogen React components such as Image, Video, Money, and MediaFile that render Storefront data.
Where do cookbook recipes live?
Search /docs/storefronts/headless/hydrogen/cookbook and fetch recipe paths for bundles, B2B, subscriptions, and related features.
Is Shopify Hydrogen safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.