v0.6.4

fix: run Hydrogen middleware after Vite handles static assets

.eslintrc.js

@@ -2,6 +2,7 @@
 const {defineConfig} = require('eslint-define-config');
 
 module.exports = defineConfig({
+  ignorePatterns: ['**/graphql/types/types.ts'],
   root: true,
   plugins: ['eslint-plugin-tsdoc'],
   extends: [

.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,11 @@ assignees: ''
 A clear and concise description of what the bug is.
 
 **To Reproduce**
-Steps to reproduce the behaviour:
+
+- Provide a link to a [StackBlitz sandbox](https://hydrogen.new) which reproduces the issue
+- OR: provide a link to a repository that reproduces the issue
+
+If you cannot do one of the above, list steps to reproduce the behaviour below:
 
 1. Go to '...'
 2. Click on '....'

.github/workflows/publish_stackblitz.yml

@@ -0,0 +1,21 @@
+name: Publish to Stackblitz
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Publish latest release to Stackblitz
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v2
+      - name: Rename gitignore
+        run: |
+          mv packages/dev/_gitignore packages/dev/.gitignore
+      - name: Push to stackblitz branch
+        uses: EndBug/add-and-commit@v7.4.0
+        with:
+          push: 'origin stackblitz --force'
+

README.md

@@ -1,11 +1,21 @@
-![Hydrogen logo](/docs/images/HydrogenLogo.png)
+<p align="center">
+    <a href="https://hydrogen.shopify.dev">
+    <img src="./docs/images/HydrogenLogo.png"/>
+    </a>
+</p>
 
-📚 [Docs](https://shopify.dev/custom-storefronts/hydrogen)  | 🗣 [Discord](https://discord.gg/Hefq6w5c5d)  |  💬 [Discussions](https://github.com/Shopify/hydrogen/discussions)  |  📝 [Changelog](./packages/hydrogen/CHANGELOG.md)
+<div align="center">
+
+📚 [Docs](https://shopify.dev/custom-storefronts/hydrogen) | 🗣 [Discord](https://discord.gg/Hefq6w5c5d) | 💬 [Discussions](https://github.com/Shopify/hydrogen/discussions) | 📝 [Changelog](./packages/hydrogen/CHANGELOG.md)
+
+</div>
 
 Hydrogen is a **React-based framework** for building dynamic, **Shopify-powered** custom storefronts.
 
 Spin up a Hydrogen app in your browser with our [playground](https://hydrogen.new/) or set up your local environment with the instructions below ⬇️
 
+**This is a developer preview of Hydrogen**. The documentation will be updated as Shopify [introduces new features and refines existing functionality](https://github.com/Shopify/hydrogen/releases). Production launches of Hydrogen custom storefronts aren't yet supported as Shopify is evolving the Hydrogen framework.
+
 ## Getting Started
 
 **Requirements:**
@@ -63,4 +73,3 @@ Learn more about [getting started with Hydrogen](https://shopify.dev/custom-stor
 - [`@shopify/hydrogen-plugin-sanity`](https://www.npmjs.com/package/@shopify/hydrogen-plugin-sanity)
 - [`create-hydrogen-app`](https://www.npmjs.com/package/create-hydrogen-app)
 - [`eslint-plugin-hydrogen`](https://www.npmjs.com/package/eslint-plugin-hydrogen)
-- [`@shopify/create-hydrogen` (deprecated)](https://www.npmjs.com/package/@shopify/create-hydrogen)

docs/contributing.md

@@ -182,3 +182,16 @@ When finished, push up your changes.
 Next, visit the Shipit page for Hydrogen and click **Deploy**.
 
 After Shipit has released your version, visit the [releases page on GitHub](https://github.com/Shopify/hydrogen/releases), click on the version number you just released, and select "Create release from tag." Then, select "Auto-generate release notes." At this point, edit the release notes as you see fit (e.g. call out any breaking changes or upgrade guides). Finally, click "Publish release."
+
+## Testing changes in another project
+
+From the root of the repo, run:
+
+```bash
+yarn tophat ../PATH/TO/PROJECT --packages [...PACKAGES_LIST]
+
+
+# example
+yarn tophat ../cartogram/hydrogen-shop --packages cli hydrogen eslint-plugin
+
+```

lerna.json

@@ -3,7 +3,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.6.1",
+  "version": "0.6.4",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {}

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev-lib": "yarn workspace @shopify/hydrogen dev",
-    "dev-server": "VITE_INSPECT=1 yarn workspace dev dev",
+    "dev-server": "LOCAL_DEV=true VITE_INSPECT=1 yarn workspace dev dev",
     "build": "run-s build-lib build-dev build-cli",
     "build-lib": "yarn workspace @shopify/hydrogen build",
     "build-cli": "yarn workspace @shopify/hydrogen-cli build",
@@ -30,7 +30,8 @@
     "h2": "./packages/cli/bin/hydrogen",
     "update-docs-on-version": "ts-node --project ./tsconfig.json ./scripts/update-docs-on-version.ts",
     "generate-docs": "ts-node --project ./tsconfig.json ./scripts/generate-docs.ts",
-    "generate-docs:debug": "node --inspect-brk ./node_modules/.bin/ts-node --project ./tsconfig.json ./scripts/generate-docs.ts"
+    "generate-docs:debug": "node --inspect-brk ./node_modules/.bin/ts-node --project ./tsconfig.json ./scripts/generate-docs.ts",
+    "tophat": "node ./scripts/tophat"
   },
   "devDependencies": {
     "@shopify/prettier-config": "^1.1.2",
@@ -64,8 +65,10 @@
     "ts-jest": "^26.5.4",
     "ts-node": "^10.2.1",
     "typescript": "^4.2.3",
-    "vite": "^2.6.0",
-    "yorkie": "^2.0.0"
+    "vite": "^2.6.14",
+    "yorkie": "^2.0.0",
+    "glob": "^7.2.0",
+    "shelljs": "^0.8.4"
   },
   "gitHooks": {
     "pre-commit": "lint-staged",

packages/cli/CHANGELOG.md

@@ -7,6 +7,14 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+## 0.6.4 - 2021-11-11
+
+- No updates. Transitive dependency bump.
+
+## 0.6.2 - 2021-11-10
+
+- Add ability to explicitly set the root for the running command using the `--root` flag
+
 ## 0.6.0 - 2021-11-05
 
 - Add create page command [#810](https://github.com/Shopify/hydrogen/pull/810)

packages/cli/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/cli and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/cli and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 ## `@shopify/hydrogen-cli`
 

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/hydrogen-cli",
-  "version": "0.6.0",
+  "version": "0.6.4",
   "description": "Command line interface for hydrogen",
   "license": "MIT",
   "engines": {
@@ -52,7 +52,7 @@
     "playwright-chromium": "^1.13.0",
     "sirv": "^1.0.14",
     "typescript": "^4.2.3",
-    "vite": "^2.6.0"
+    "vite": "^2.6.14"
   },
   "files": [
     "dist",

packages/cli/src/commands/create/app/app.ts

@@ -99,7 +99,7 @@ export async function app(env: Env<{name: string}>) {
   workspace.install('react-dom', {version: '18.0.0-alpha-e6be2d531'});
   workspace.install('react-router-dom', {version: '^5.2.0'});
   workspace.install('@shopify/hydrogen');
-  workspace.install('vite', {dev: true, version: '^2.6.0'});
+  workspace.install('vite', {dev: true, version: '^2.6.14'});
   workspace.install('@vitejs/plugin-react-refresh', {
     dev: true,
     version: '^1.3.2',

packages/cli/src/commands/create/app/templates/index-html.ts

@@ -7,7 +7,7 @@ export default function ({ifFeature}: TemplateOptions) {
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     ${ifFeature(

packages/cli/src/commands/init/init.ts

@@ -13,7 +13,7 @@ export enum Template {
  * Create a new `@shopify/hydrogen` app.
  */
 export async function init(env: Env) {
-  const {ui, fs, workspace} = env;
+  const {ui, fs, workspace, ...passThroughEnv} = env;
 
   const name = await ui.ask('What do you want to name this app?', {
     validate: validateProjectName,
@@ -43,8 +43,8 @@ export async function init(env: Env) {
   );
 
   if (template === Template.None) {
-    const context = {name};
-    await app({ui, fs, workspace, context});
+    const context = {name, ...passThroughEnv.context};
+    await app({...passThroughEnv, ui, fs, workspace, context});
   }
 
   if (template === Template.Default) {

packages/cli/src/index.ts

@@ -4,9 +4,14 @@ import {Cli} from './ui';
 import {Workspace} from './workspace';
 import {Fs} from './fs';
 import {loadConfig} from './config';
+import {Env} from './types';
 
 const logger = debug('hydrogen');
 
+interface ModuleType {
+  default: (env: Env) => Promise<void>;
+}
+
 (async () => {
   const rawInputs = process.argv.slice(2);
   const {command, root} = parseCliArguments(rawInputs);
@@ -22,10 +27,23 @@ const logger = debug('hydrogen');
     throw new InputError();
   }
 
+  async function runModule(module: ModuleType) {
+    logger('Run start');
+
+    await module.default({
+      ui,
+      fs,
+      workspace,
+      logger: debug(`hydrogen/${command}`),
+    });
+
+    logger('Run end');
+  }
+
   try {
     const module = await import(`./commands/${command}`);
 
-    await module.default({ui, fs, workspace});
+    await runModule(module);
   } catch (error) {
     logger(error);
 
@@ -36,7 +54,9 @@ const logger = debug('hydrogen');
     ui.printFile(file);
   }
 
-  await workspace.commit();
+  if (command === 'init') {
+    await workspace.commit();
+  }
 })().catch((error) => {
   logger(error);
   process.exitCode = 1;

packages/cli/src/types.ts

@@ -1,3 +1,4 @@
+import debug from 'debug';
 import {Workspace} from './workspace';
 import {Ui} from './ui';
 import {Fs} from './fs';
@@ -9,6 +10,7 @@ export interface Env<Context = {}> {
   workspace: Workspace;
   fs: Fs;
   context?: Context;
+  logger: debug.Debugger;
 }
 
 export enum ComponentType {

packages/cli/src/utilities/index.ts

@@ -1,4 +1,4 @@
-import {join, resolve} from 'path';
+import {resolve} from 'path';
 
 import minimist from 'minimist';
 
@@ -15,10 +15,8 @@ const DEFAULT_SUBCOMMANDS = {
 export function parseCliArguments(rawInputs?: string[]) {
   const inputs = minimist(rawInputs || []);
   const command = inputs._[0];
-  const root =
-    command === 'create' && inputs._[2]
-      ? join(process.cwd(), inputs._[2])
-      : process.cwd();
+
+  const root = inputs.root || process.cwd();
   const subcommand =
     inputs._[1] || DEFAULT_SUBCOMMANDS[command as 'create' | 'version'];
   const {debug} = inputs;

packages/create-hydrogen-app/CHANGELOG.md

@@ -7,6 +7,21 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+## 0.6.4 - 2021-11-11
+
+- No updates. Transitive dependency bump.
+
+## 0.6.3 - 2021-11-10
+
+- No updates. Transitive dependency bump.
+
+## 0.6.2 - 2021-11-10
+
+- Wrap instances of `<Money>` in client components due to render prop usage
+- Eliminate use of `Link` client re-exports
+- fix: gallery safari grid layout
+- fix: Move `LocalizationProvider` to `Layout.server` to prevent issues with React Router & Suspense
+
 ## 0.6.1 - 2021-11-08
 
 - Wrap LocalizationProvider in a proper Suspense boundary

packages/create-hydrogen-app/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.6.1",
+  "version": "0.6.4",
   "main": "index.js",
   "license": "MIT",
   "bin": {

packages/create-hydrogen-app/scripts/tmp-copy-template-from-dev.js

@@ -12,7 +12,7 @@ const {copy} = require('./utils');
 
 const devPath = path.resolve(__dirname, '..', '..', 'dev');
 const templatePath = path.resolve(__dirname, '..', './template-hydrogen');
-const skipFiles = ['node_modules', 'dist'];
+const skipFiles = ['node_modules', 'dist', '.stackblitzrc'];
 
 // Remove the symlink and replace it with a folder
 fs.unlinkSync(templatePath);

packages/dev/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

packages/dev/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hydrogen App</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

packages/dev/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dev",
   "description": "This is a dev environment for Hydrogen",
-  "version": "0.6.1",
+  "version": "0.6.4",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "dev": "LOCAL_DEV=true vite",
+    "dev": "vite",
     "lint": "npm-run-all lint:*",
     "lint:js": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx src",
     "lint:css": "stylelint ./src/**/*.{css,sass,scss}",
@@ -28,11 +28,11 @@
     "prettier": "^2.3.2",
     "stylelint": "^13.13.0",
     "tailwindcss": "^2.2.4",
-    "vite": "^2.6.0"
+    "vite": "^2.6.14"
   },
   "dependencies": {
     "@headlessui/react": "^1.4.1",
-    "@shopify/hydrogen": "^0.6.1",
+    "@shopify/hydrogen": "^0.6.4",
     "compression": "^1.7.4",
     "express": "^4.17.1",
     "graphql-tag": "^2.12.4",

packages/dev/src/App.server.jsx

@@ -1,8 +1,4 @@
-import {
-  ShopifyServerProvider,
-  DefaultRoutes,
-  LocalizationProvider,
-} from '@shopify/hydrogen';
+import {ShopifyServerProvider, DefaultRoutes} from '@shopify/hydrogen';
 import {Switch} from 'react-router-dom';
 import {Suspense} from 'react';
 
@@ -19,18 +15,16 @@ export default function App({...serverState}) {
   return (
     <Suspense fallback={<LoadingFallback />}>
       <ShopifyServerProvider shopifyConfig={shopifyConfig} {...serverState}>
-        <LocalizationProvider>
-          <CartProvider>
-            <DefaultSeo />
-            <Switch>
-              <DefaultRoutes
-                pages={pages}
-                serverState={serverState}
-                fallback={<NotFound />}
-              />
-            </Switch>
-          </CartProvider>
-        </LocalizationProvider>
+        <CartProvider>
+          <DefaultSeo />
+          <Switch>
+            <DefaultRoutes
+              pages={pages}
+              serverState={serverState}
+              fallback={<NotFound />}
+            />
+          </Switch>
+        </CartProvider>
       </ShopifyServerProvider>
     </Suspense>
   );

packages/dev/src/components/FeaturedCollection.server.jsx

@@ -1,6 +1,4 @@
-import {Image} from '@shopify/hydrogen/client';
-
-import {Link} from './Link.client';
+import {Image, Link} from '@shopify/hydrogen/client';
 
 export default function FeaturedCollection({collection}) {
   return collection ? (

packages/dev/src/components/Footer.server.jsx

@@ -1,4 +1,4 @@
-import {Link} from './Link.client';
+import {Link} from '@shopify/hydrogen';
 
 export default function Footer({collection, product}) {
   return (

packages/dev/src/components/Gallery.client.jsx

@@ -26,7 +26,7 @@ export default function Gallery() {
       className="gap-4 flex md:grid md:grid-cols-2 overflow-x-scroll no-scrollbar scroll-snap-x scroll-smooth h-[485px] md:h-auto place-content-start"
       tabIndex="-1"
     >
-      <SelectedVariantImage className="w-[80vw] md:w-full h-full object-cover object-center flex-shrink-0 md:flex-shrink-none snap-start md:col-span-2 border border-gray-200 rounded-lg" />
+      <SelectedVariantImage className="w-[80vw] md:w-full h-full md:h-auto object-cover object-center flex-shrink-0 md:flex-shrink-none snap-start md:col-span-2 border border-gray-200 rounded-lg" />
       {galleryMedia.map((med) => {
         let extraProps = {};
 

packages/dev/src/components/Layout.server.jsx

@@ -1,4 +1,9 @@
-import {useShopQuery, flattenConnection, Image} from '@shopify/hydrogen';
+import {
+  Image,
+  useShopQuery,
+  flattenConnection,
+  LocalizationProvider,
+} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
 import Header from './Header.client';
@@ -23,7 +28,7 @@ export default function Layout({children, hero}) {
   const storeName = data ? data.shop.name : '';
 
   return (
-    <>
+    <LocalizationProvider>
       <div className="absolute top-0 left-0">
         <a
           href="#mainContent"
@@ -52,7 +57,7 @@ export default function Layout({children, hero}) {
         </main>
         <Footer collection={collections[0]} product={products[0]} />
       </div>
-    </>
+    </LocalizationProvider>
   );
 }
 

packages/dev/src/components/Link.client.jsx

@@ -1 +0,0 @@
-export {Link} from '@shopify/hydrogen/client';

packages/dev/src/components/MoneyCompareAtPrice.client.jsx

@@ -0,0 +1,14 @@
+import {Money} from '@shopify/hydrogen/client';
+
+export default function MoneyCompareAtPrice({money}) {
+  return (
+    <Money money={money}>
+      {({amount, currencyNarrowSymbol}) => (
+        <span className="line-through text-lg mr-2.5 text-gray-500">
+          {currencyNarrowSymbol}
+          {amount}
+        </span>
+      )}
+    </Money>
+  );
+}

packages/dev/src/components/MoneyPrice.client.jsx

@@ -0,0 +1,15 @@
+import {Money} from '@shopify/hydrogen/client';
+
+export default function MoneyPrice({money}) {
+  return (
+    <Money className="text-black text-md" money={money}>
+      {({amount, currencyNarrowSymbol, currencyCode}) => (
+        <>
+          {currencyCode}
+          {currencyNarrowSymbol}
+          {amount}
+        </>
+      )}
+    </Money>
+  );
+}

packages/dev/src/components/ProductCard.server.jsx

@@ -1,6 +1,7 @@
-import {Image, Money} from '@shopify/hydrogen';
+import {Image, Link} from '@shopify/hydrogen';
 
-import {Link} from './Link.client';
+import MoneyCompareAtPrice from './MoneyCompareAtPrice.client';
+import MoneyPrice from './MoneyPrice.client';
 
 export default function ProductCard({product}) {
   const selectedVariant = product.variants.edges[0].node;
@@ -36,24 +37,9 @@ export default function ProductCard({product}) {
 
         <div className="flex ">
           {selectedVariant.compareAtPriceV2 && (
-            <Money money={selectedVariant.compareAtPriceV2}>
-              {({amount, currencyNarrowSymbol}) => (
-                <span className="line-through text-lg mr-2.5 text-gray-500">
-                  {currencyNarrowSymbol}
-                  {amount}
-                </span>
-              )}
-            </Money>
+            <MoneyCompareAtPrice money={selectedVariant.compareAtPriceV2} />
           )}
-          <Money className="text-black text-md" money={selectedVariant.priceV2}>
-            {({amount, currencyNarrowSymbol, currencyCode}) => (
-              <>
-                {currencyCode}
-                {currencyNarrowSymbol}
-                {amount}
-              </>
-            )}
-          </Money>
+          <MoneyPrice money={selectedVariant.priceV2} />
         </div>
       </Link>
     </div>

packages/dev/src/components/Welcome.server.jsx

@@ -1,8 +1,6 @@
-import {useShopQuery, flattenConnection} from '@shopify/hydrogen';
+import {useShopQuery, flattenConnection, Link} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import {Link} from './Link.client';
-
 function ExternalIcon() {
   return (
     <svg

packages/dev/src/pages/Index.server.jsx

@@ -3,10 +3,10 @@ import {
   flattenConnection,
   ProductProviderFragment,
   Image,
+  Link,
 } from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import {Link} from '../components/Link.client';
 import Layout from '../components/Layout.server';
 import FeaturedCollection from '../components/FeaturedCollection.server';
 import ProductCard from '../components/ProductCard.server';

packages/eslint-plugin/CHANGELOG.md

@@ -7,6 +7,12 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+## 0.6.2 - 2021-11-10
+
+- Added new `hydrogen/typescript` config
+- Added `env#node: true` and `parserOptions#sourceType: 'module'` to core config
+- Fixed issue requiring typescript to be install on non-typescript projects
+
 ## 0.6.0 - 2021-11-05
 
 - No updates. Transitive dependency bump.

packages/eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-hydrogen",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Eslint rules for hydrogen",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -12,7 +12,8 @@
     "test": "jest",
     "dev": "yarn build -w",
     "build": "tsc -p .",
-    "prepack": "yarn build"
+    "prepack": "yarn build",
+    "tophat": "node ./scripts/tophat"
   },
   "repository": {
     "type": "git",
@@ -42,7 +43,6 @@
     "ts-jest": "^26.5.4"
   },
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": ">= 4",
     "eslint": ">=5"
   }
 }

packages/eslint-plugin/src/config/recommended-typescript.ts

@@ -1,12 +0,0 @@
-import rules from './rules';
-
-export default {
-  plugins: ['hydrogen'],
-  extends: [
-    'plugin:@shopify/typescript',
-    'plugin:@shopify/react',
-    'plugin:@shopify/node',
-    'plugin:@shopify/prettier',
-  ],
-  rules,
-};

packages/eslint-plugin/src/config/recommended.ts

@@ -1,12 +0,0 @@
-import rules from './rules';
-
-export default {
-  plugins: ['hydrogen'],
-  extends: [
-    'plugin:@shopify/esnext',
-    'plugin:@shopify/react',
-    'plugin:@shopify/node',
-    'plugin:@shopify/prettier',
-  ],
-  rules,
-};

packages/eslint-plugin/src/config/rules/hydrogen.ts

@@ -1,4 +0,0 @@
-export default {
-  'hydrogen/no-state-in-server-components': 'error',
-  'hydrogen/prefer-image-component': 'error',
-};

packages/eslint-plugin/src/config/rules/index.ts

@@ -1,5 +0,0 @@
-import {deepMerge} from '@typescript-eslint/experimental-utils/dist/eslint-utils';
-import overrides from './overrides';
-import hydrogen from './hydrogen';
-
-export default deepMerge(hydrogen, overrides);

packages/eslint-plugin/src/config/rules/overrides.ts

@@ -1,45 +0,0 @@
-export default {
-  // TODO: We may want to change the configuration for the following 3 rules
-  'jsx-a11y/click-events-have-key-events': 'off',
-  'jsx-a11y/no-noninteractive-element-interactions': 'off',
-  'react/jsx-filename-extension': ['error', {extensions: ['.tsx', '.jsx']}],
-
-  /**
-   * Rules below this line are intentionally disabled for different reasons
-   */
-
-  // The following 2 rules are very strict and disabled here to lessen developer frustration
-  '@shopify/jsx-no-hardcoded-content': 'off',
-  '@shopify/jsx-no-complex-expressions': 'off',
-
-  /**
-   * eslint overrides
-   */
-
-  // We often define GraphQL queries at the bottom of the file which would be a violation for this rule
-  'no-use-before-define': 'off',
-  // We agree that warning comments acceptable
-  'no-warning-comments': 'off',
-
-  /**
-   * react overrides
-   */
-
-  // Following Next.js and likely this will be the default in most frameworks
-  'react/react-in-jsx-scope': 'off',
-  // We default to typescript for typing, non typescript projects can override this rule if they want
-  'react/prop-types': 'off',
-
-  /**
-   * import overrides
-   */
-
-  // TODO: We should turn these on, at least partially
-  // 'import/no-unresolved': ['off'],
-  // 'import/extensions': ['off'],
-
-  // These two rules result in a significant number of false positives so we
-  // need to keep them disabled.
-  'jsx-a11y/label-has-for': 'off',
-  'jsx-a11y/control-has-associated-label': 'off',
-};

packages/eslint-plugin/src/configs/core.ts

@@ -11,6 +11,7 @@ export default {
   env: {
     es2021: true,
     browser: true,
+    node: true,
   },
   settings: {
     react: {
@@ -21,6 +22,7 @@ export default {
     ecmaFeatures: {
       jsx: true,
     },
+    sourceType: 'module',
   },
   rules: {
     'no-console': 'warn',
@@ -39,54 +41,6 @@ export default {
   },
   ignorePatterns: ['node_modules/', 'build/', '*.graphql.d.ts', '*.graphql.ts'],
   overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      parser: '@typescript-eslint/parser',
-      extends: ['plugin:@typescript-eslint/recommended'],
-      rules: {
-        'react/prop-types': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
-        '@typescript-eslint/no-empty-interface': 'off',
-        '@typescript-eslint/ban-types': [
-          'error',
-          {
-            types: {
-              String: {message: 'Use string instead', fixWith: 'string'},
-              Boolean: {message: 'Use boolean instead', fixWith: 'boolean'},
-              Number: {message: 'Use number instead', fixWith: 'number'},
-              Object: {message: 'Use object instead', fixWith: 'object'},
-              Array: {message: 'Provide a more specific type'},
-              ReadonlyArray: {message: 'Provide a more specific type'},
-            },
-          },
-        ],
-        '@typescript-eslint/naming-convention': [
-          'error',
-          {
-            selector: 'default',
-            format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
-            leadingUnderscore: 'allowSingleOrDouble',
-            trailingUnderscore: 'allowSingleOrDouble',
-          },
-          {
-            selector: 'typeLike',
-            format: ['PascalCase'],
-          },
-          {
-            selector: 'typeParameter',
-            format: ['PascalCase'],
-            leadingUnderscore: 'allow',
-          },
-          {
-            selector: 'interface',
-            format: ['PascalCase'],
-          },
-        ],
-      },
-    },
     {
       files: ['*.test.*'],
       plugins: ['jest'],

packages/eslint-plugin/src/configs/typescript.ts

@@ -0,0 +1,52 @@
+export default {
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: ['plugin:@typescript-eslint/recommended'],
+      rules: {
+        'react/prop-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+        '@typescript-eslint/ban-types': [
+          'error',
+          {
+            types: {
+              String: {message: 'Use string instead', fixWith: 'string'},
+              Boolean: {message: 'Use boolean instead', fixWith: 'boolean'},
+              Number: {message: 'Use number instead', fixWith: 'number'},
+              Object: {message: 'Use object instead', fixWith: 'object'},
+              Array: {message: 'Provide a more specific type'},
+              ReadonlyArray: {message: 'Provide a more specific type'},
+            },
+          },
+        ],
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'default',
+            format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+            leadingUnderscore: 'allowSingleOrDouble',
+            trailingUnderscore: 'allowSingleOrDouble',
+          },
+          {
+            selector: 'typeLike',
+            format: ['PascalCase'],
+          },
+          {
+            selector: 'typeParameter',
+            format: ['PascalCase'],
+            leadingUnderscore: 'allow',
+          },
+          {
+            selector: 'interface',
+            format: ['PascalCase'],
+          },
+        ],
+      },
+    },
+  ],
+};

packages/eslint-plugin/src/index.ts

@@ -1,9 +1,11 @@
 import recommended from './configs/recommended';
 import hydrogen from './configs/hydrogen';
+import typescript from './configs/typescript';
 
 export {rules} from './rules';
 
 export const configs = {
   recommended,
   hydrogen,
+  typescript,
 };

packages/generate-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/generate-docs",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Command line interface for generating docs from code comments",
   "license": "MIT",
   "private": true,

packages/generate-docs/src/DocsGen.ts

@@ -142,10 +142,11 @@ export class DocsGen {
 
         await componentResult.docs(componentEntryBase);
 
-        await Promise.all([
-          componentResult.writeReadme(componentEntryBase),
-          componentResult.writeDevDoc(componentPaths.output),
-        ]);
+        await componentResult.writeReadme(componentEntryBase);
+
+        if (this.writeDocs) {
+          componentResult.writeDevDoc(componentPaths.output);
+        }
 
         listItems.push({
           name: `<a href="${componentUrl}">${name}</a>`,

packages/generate-docs/src/FileResult.ts

@@ -24,8 +24,9 @@ export class FileResult {
 
   public async writeDevDoc(path: string) {
     const result = inPageAnchors(this.staged.join(''));
+    const docPath = "https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md"
 
-    const comment = `<!-- This file is generated from the source code and any changes you make here will be overwritten. -->`;
+    const comment = `<!-- This file is generated from source code in the Shopify/hydrogen repo. Any changes you make here will be overwritten. For more information, refer to ${docPath}. -->`;
 
     await this.write(path, [this.frontMatter, comment, result].join('\n\n'));
   }
@@ -37,8 +38,9 @@ export class FileResult {
       }
 
       const localPath = path.replace(resolve('.'), '');
+      const docPath = "https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md"
       const finalPath = resolve(path, 'README.md');
-      const comment = `<!-- This file is generated from the source code. Edit the files in ${localPath} and run 'yarn generate-docs' at the root of this repo. -->`;
+      const comment = `<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in ${localPath} and run 'yarn generate-docs' at the root of this repo. For more information, refer to ${docPath}. -->`;
       await this.write(
         finalPath,
         [comment, ...this.staged].join('\n\n').trim()

packages/hydrogen-plugin-sanity/CHANGELOG.md

@@ -7,6 +7,18 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+## 0.6.4 - 2021-11-11
+
+- No updates. Transitive dependency bump.
+
+## 0.6.3 - 2021-11-10
+
+- No updates. Transitive dependency bump.
+
+## 0.6.2 - 2021-11-10
+
+- No updates. Transitive dependency bump.
+
 ## 0.6.1 - 2021-11-08
 
 - No updates. Transitive dependency bump.

packages/hydrogen-plugin-sanity/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/hydrogen-plugin-sanity",
-  "version": "0.6.1",
+  "version": "0.6.4",
   "description": "Hydrogen plugins for integrating with Sanity",
   "main": "dist/esnext/index.js",
   "publishConfig": {
@@ -17,7 +17,7 @@
     "prepack": "yarn build"
   },
   "devDependencies": {
-    "@shopify/hydrogen": "^0.6.1"
+    "@shopify/hydrogen": "^0.6.4"
   },
   "peerDependencies": {
     "@shopify/hydrogen": "^0.4.0"

packages/hydrogen/CHANGELOG.md

@@ -7,10 +7,30 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 <!-- ## Unreleased -->
 
+## 0.6.4 - 2021-11-11
+
+- fix: let Vite handle public assets in development
+- fix: new lines in hydration request break JSON.parse
+- fix(#201): normalize POSIX separators to support windows
+- fix: scroll to top on app first load
+
+## 0.6.3 - 2021-11-10
+
+- fix: add trailing slash to user components glob
+
+## 0.6.2 - 2021-11-10
+
+- fix: remove CartProvider from BuyNowButton
+- fix: reading property of null for component props
+- fix: transform deeply-imported client components
+- fix: duplicated files and contexts in browser
+
 ## 0.6.1 - 2021-11-08
 
 - No updates. Transitive dependency bump.
 
+- fix: do not set headers after they are sent to client
+
 ## 0.6.0 - 2021-11-05
 
 - feat: disable the quantity adjust button when the cart is not idle

packages/hydrogen/marker.js

@@ -1 +1 @@
-export {ClientMarker} from './dist/esnext/framework/ClientMarker';
+export * from './dist/esnext/framework/ClientMarker';

packages/hydrogen/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "0.6.1",
+  "version": "0.6.4",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -78,16 +78,18 @@
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^5.2.0",
-    "vite": "^2.6.0"
+    "vite": "^2.6.14"
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^1.0.0",
+    "@vitejs/plugin-react": "^1.0.8",
     "connect": "^3.7.0",
+    "es-module-lexer": "^0.9.0",
     "fast-glob": "^3.2.5",
     "graphql": "^15.5.0",
     "html-dom-parser": "^1.0.1",
     "html-react-parser": "^1.2.6",
     "isomorphic-dompurify": "^0.13.0",
+    "magic-string": "^0.25.7",
     "node-fetch": "^2.6.1",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.0.9",

packages/hydrogen/src/components/AddToCartButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/AddToCartButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/AddToCartButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
 It must be a descendent of the `CartProvider` component.

packages/hydrogen/src/components/BuyNowButton/BuyNowButton.client.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, ElementType, useState, useCallback} from 'react';
 import type {ReactNode} from 'react';
-import {CartProvider, useInstantCheckout} from '../CartProvider';
+import {useInstantCheckout} from '../CartProvider';
 import {Props} from '../types';
 
 export interface BuyNowButtonProps {
@@ -22,16 +22,6 @@ export type BuyNowButtonPropsWeControl = 'onClick';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
 export function BuyNowButton<TTag extends ElementType = 'button'>(
   props: Props<TTag, BuyNowButtonPropsWeControl> & BuyNowButtonProps
-) {
-  return (
-    <CartProvider>
-      <Button {...props} />
-    </CartProvider>
-  );
-}
-
-function Button<TTag extends ElementType = 'button'>(
-  props: Props<TTag, BuyNowButtonPropsWeControl> & BuyNowButtonProps
 ) {
   const {createInstantCheckout, checkoutUrl} = useInstantCheckout();
   const [loading, setLoading] = useState<boolean>(false);

packages/hydrogen/src/components/BuyNowButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/BuyNowButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/BuyNowButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.
 

packages/hydrogen/src/components/CartCheckoutButton/README.md

@@ -1,8 +1,4 @@
----
-gid: c7df6e06-3c6c-4c35-b6fe-82bfac8b6b95
-title: CartCheckoutButton
-description: Use the CartCheckoutButton to render a button that redirects to checkoutUrl for the cart.
----
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartCheckoutButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
 
@@ -33,9 +29,9 @@ export class MyComponent() {
 
 ## Props
 
-| Name | Required | Description |
-| ---- | -------- | ----------- |
-| `children` | Yes | A `ReactNode` element. |
+| Name       | Required | Description            |
+| ---------- | -------- | ---------------------- |
+| `children` | Yes      | A `ReactNode` element. |
 
 ## Related components
 

packages/hydrogen/src/components/CartEstimatedCost/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartEstimatedCost and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartEstimatedCost and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
 cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.

packages/hydrogen/src/components/CartLineAttributes/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineAttributes and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineAttributes and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineAttributes` component takes a function as a child and calls that function for each of the
 cart line's attributes. It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLineImage/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineImage and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineImage and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineImage` component renders an `Image` component for the cart line merchandise's image.
 It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLinePrice/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLinePrice and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLinePrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
 compare at price. It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLineProductTitle/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineProductTitle and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProductTitle and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineProductTitle` component renders a `span` element (or the type of HTML element specified by
 the `as` prop) with the cart line merchandise's title. It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLineProvider/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineProvider and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
 

packages/hydrogen/src/components/CartLineQuantity/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineQuantity and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantity and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineQuantity` component renders a `span` element (or the type of HTML element
 specified by the `as` prop) with the cart line's quantity. It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLineQuantityAdjustButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineQuantityAdjustButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineQuantityAdjustButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
 It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLineSelectedOptions/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLineSelectedOptions and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLineSelectedOptions and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLineSelectedOptions` component takes a function as a child and calls that function
 for each of the cart line merchandise's selected options. It must be a descendent of a `CartLineProvider` component.

packages/hydrogen/src/components/CartLines/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartLines and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartLines and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartLines` component iterates over each cart line and renders its `children` within
 a `CartLineProvider` for each cart line. It also provides render props in the case where `children` is a function.

packages/hydrogen/src/components/CartProvider/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartProvider and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 ## Example code
 

packages/hydrogen/src/components/CartProvider/hooks.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {useShop} from '../../foundation';
 import {flattenConnection} from '../../utilities';
 import {CartInput} from '../../graphql/types/types';
@@ -47,10 +47,9 @@ export function useCartFetch() {
 }
 
 export function useInstantCheckout() {
-  const [cart, updateCart] = React.useState<Cart | undefined>();
-  const [checkoutUrl, updateCheckoutUrl] =
-    React.useState<Cart['checkoutUrl']>();
-  const [error, updateError] = React.useState<string | undefined>();
+  const [cart, updateCart] = useState<Cart | undefined>();
+  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();
+  const [error, updateError] = useState<string | undefined>();
 
   const fetch = useCartFetch();
 

packages/hydrogen/src/components/CartShopPayButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/CartShopPayButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/CartShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
 It must be a descendent of a `CartProvider` component.

packages/hydrogen/src/components/ExternalVideo/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ExternalVideo and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ExternalVideo and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ExternalVideo` component renders an embedded video for the Storefront
 API's [`ExternalVideo` object](/api/storefront/reference/products/externalvideo).

packages/hydrogen/src/components/Image/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Image and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `Image` component renders an image for the Storefront API's
 [`Image` object](/api/storefront/reference/common-objects/image).

packages/hydrogen/src/components/Link/index.ts

@@ -0,0 +1 @@
+export {Link} from './Link.client';

packages/hydrogen/src/components/LocalizationProvider/LocalizationContext.client.tsx

@@ -9,16 +9,5 @@ export interface LocalizationContextValue {
   setCountry(country: Localization['country']): void;
 }
 
-/**
- * This is a workaround to support exposing context from within a server component
- * exported from Hydrogen.
- */
-declare global {
-  var __localizationContext: any;
-}
-
 export const LocalizationContext =
-  globalThis.__localizationContext ||
   createContext<LocalizationContextValue | null>(null);
-
-globalThis.__localizationContext = LocalizationContext;

packages/hydrogen/src/components/LocalizationProvider/README.md

@@ -1,8 +1,4 @@
----
-gid: 2d9f4930-fafe-11eb-9a03-0242ac130003
-title: LocalizationProvider
-description: Use a LocalizationProvider component to automatically query the Storefront API's localization field for the ISO code, name of the country, and available countries, and keep this information in a context.
----
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/LocalizationProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `LocalizationProvider` component automatically queries the Storefront API's [`localization`](/api/storefront/reference/common-objects/queryroot) field for the `isoCode` and `name` of the `country` and `availableCountries` and keeps this information in a context.
 

packages/hydrogen/src/components/MediaFile/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/MediaFile and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/MediaFile and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `MediaFile` component renders the media for the Storefront API's
 [Media object](/api/storefront/reference/products/media). It renders an `Image`, a

packages/hydrogen/src/components/Metafield/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Metafield and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Metafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `Metafield` component renders the value of a Storefront
 API's [Metafield object](/api/storefront/reference/common-objects/metafield).

packages/hydrogen/src/components/Model3D/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Model3D and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Model3D and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `Model3D` component renders a 3D model (with the `model-viewer` tag) for
 the Storefront API's [`Model3d` object](/api/storefront/reference/products/model3d).

packages/hydrogen/src/components/Money/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /Users/michellevinci/src/github.com/Shopify/hydrogen/packages/hydrogen/src/components/Money and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Money and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `Money` component renders a string of the Storefront API's
 [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) according to the

packages/hydrogen/src/components/ProductDescription/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductDescription and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductDescription and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ProductDescription` component renders a `RawHtml` component with
 the product's [`descriptionHtml`](/api/storefront/reference/products/product).

packages/hydrogen/src/components/ProductMetafield/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductMetafield and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductMetafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ProductMetafield` component renders a
 [`Metafield`](/api/hydrogen/components/primitive/metafield) component with the product metafield.

packages/hydrogen/src/components/ProductPrice/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductPrice and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ProductPrice` component renders a `Money` component with the product
 [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice`

packages/hydrogen/src/components/ProductProvider/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductProvider and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductProvider and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `useProduct` hook returns the product object of the nearest `ProductProvider`. It must be a descendent of
 a `ProductProvider` component.

packages/hydrogen/src/components/ProductTitle/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ProductTitle and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ProductTitle and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ProductTitle` component renders a `span` element (or the type of
 HTML element specified by the `as` prop) with the product's [`title`](/api/storefront/reference/products/product).

packages/hydrogen/src/components/RawHtml/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/RawHtml and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/RawHtml and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `RawHtml` component renders an HTML string as HTML DOM elements. This should be used for
 displaying rich text-like descriptions associated with a product.

packages/hydrogen/src/components/SelectedVariantAddToCartButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantAddToCartButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantAddToCartButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantAddToCartButton` component renders a `AddToCartButton` for the product's
 selected variant. Clicking this button automatically adds the selected variant to the cart.

packages/hydrogen/src/components/SelectedVariantBuyNowButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantBuyNowButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantBuyNowButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantBuyNowButton` component renders a `BuyNowButton` for the product's selected variant.
 Clicking this button automatically adds the selected variant to the cart and redirect the customer to checkout.

packages/hydrogen/src/components/SelectedVariantImage/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantImage and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantImage and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantImage` component renders an `Image` component for the product's selected variant's image.
 It must be a descendent of a `ProductProvider` component.

packages/hydrogen/src/components/SelectedVariantMetafield/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantMetafield and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantMetafield and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantMetafield` component renders a [`Metafield`](/api/hydrogen/components/primitive/metafield)
 component with the selected product's metafield.

packages/hydrogen/src/components/SelectedVariantPrice/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantPrice and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantPrice` component renders a `Money` component for the product's selected variant's price or compare at price.
 It must be a descendent of a `ProductProvider` component.

packages/hydrogen/src/components/SelectedVariantShopPayButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantShopPayButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantShopPayButton` component renders a `ShopPayButton` for the product's selected variant.
 It must be a descendent of a `ProductProvider` component.

packages/hydrogen/src/components/SelectedVariantUnitPrice/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/SelectedVariantUnitPrice and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/SelectedVariantUnitPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `SelectedVariantUnitPrice` component renders a `UnitPrice` component for the product's selected variant's unit price.
 It must be a descendent of a `ProductProvider`.

packages/hydrogen/src/components/ShopPayButton/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/ShopPayButton and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/ShopPayButton and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
 

packages/hydrogen/src/components/UnitPrice/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/UnitPrice and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/UnitPrice and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
 [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from

packages/hydrogen/src/components/Video/README.md

@@ -1,4 +1,4 @@
-<!-- This file is generated from the source code. Edit the files in /packages/hydrogen/src/components/Video and run 'yarn generate-docs' at the root of this repo. -->
+<!-- This file is generated from source code in the Shopify/hydrogen repo. Edit the files in /packages/hydrogen/src/components/Video and run 'yarn generate-docs' at the root of this repo. For more information, refer to https://github.com/Shopify/shopify-dev/blob/master/content/internal/operations/hydrogen-reference-docs.md. -->
 
 The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).
 

packages/hydrogen/src/components/index.ts

@@ -1,4 +1,4 @@
-export {Link} from 'react-router-dom';
+export {Link} from './Link';
 export type {MediaFileProps} from './MediaFile';
 export {MediaFile, MediaFileFragment} from './MediaFile';
 export type {VideoProps} from './Video';

packages/hydrogen/src/docs/components.md

@@ -19,8 +19,8 @@ Components can be customized using passthrough props and render props:
 
 - **Passthrough props**: You can pass attributes as props to the Hydrogen component, and the Hydrogen component will pass them through to the rendered HTML tag.
 
-    > Note:
-    > Any attributes supported by the component's outputted HTML tag are supported, except for those explicitly controlled by the component (for example, `src` for the `Image` component and `dangerouslySetInnerHtml` for the `RawHtml` component).
+  > Note:
+  > Any attributes supported by the component's outputted HTML tag are supported, except for those explicitly controlled by the component (for example, `src` for the `Image` component and `dangerouslySetInnerHtml` for the `RawHtml` component).
 
 - **Render props**: You can pass a function that returns JSX as a child to the Hydrogen component.
 

packages/hydrogen/src/entry-server.tsx

@@ -97,7 +97,7 @@ const renderHydrogen: ServerHandler = (App, hook) => {
       console.error('Fatal', error);
     });
 
-    let didError = false;
+    let didError: Error | undefined;
 
     const head = template.match(/<head>(.+?)<\/head>/s)![1];
 
@@ -124,6 +124,11 @@ const renderHydrogen: ServerHandler = (App, hook) => {
           response.setHeader('Content-type', 'text/html');
           response.write('<!DOCTYPE html>');
           startWriting();
+
+          if (dev && didError) {
+            // This error was delayed until the headers were properly sent.
+            response.write(getErrorMarkup(didError));
+          }
         },
         onCompleteAll() {
           if (componentResponse.canStream()) return;
@@ -148,9 +153,11 @@ const renderHydrogen: ServerHandler = (App, hook) => {
           }
         },
         onError(error: any) {
-          didError = true;
+          didError = error;
 
-          if (dev) {
+          if (dev && response.headersSent) {
+            // Calling write would flush headers automatically.
+            // Delay this error until headers are properly sent.
             response.write(getErrorMarkup(error));
           }
 
@@ -183,7 +190,7 @@ const renderHydrogen: ServerHandler = (App, hook) => {
       console.error('Fatal', error);
     });
 
-    let didError = false;
+    let didError: Error | undefined;
 
     const writer = new HydrationWriter();
 
@@ -212,7 +219,7 @@ const renderHydrogen: ServerHandler = (App, hook) => {
           response.end(generateWireSyntaxFromRenderedHtml(writer.toString()));
         },
         onError(error: any) {
-          didError = true;
+          didError = error;
           console.error(error);
         },
       }

packages/hydrogen/src/foundation/Router/ServerStateRouter.client.tsx

@@ -9,13 +9,16 @@ import {useServerState} from '../useServerState';
  * server state, which in turn fetches the correct server component.
  */
 export function ServerStateRouter() {
-  const {setServerState, pending} = useServerState() as ServerStateContextValue;
+  const {setServerState, pending, serverState} =
+    useServerState() as ServerStateContextValue;
   const [isNavigating, setIsNavigating] = useState(false);
   const location = useLocation();
 
   useEffect(() => {
-    setIsNavigating(true);
-    setServerState('pathname', location.pathname);
+    if (serverState.pathname !== location.pathname) {
+      setIsNavigating(true);
+      setServerState('pathname', location.pathname);
+    }
   }, [location.pathname, setServerState]);
 
   useEffect(() => {

packages/hydrogen/src/foundation/ServerStateProvider/ServerStateProvider.client.tsx

@@ -16,17 +16,7 @@ export interface ServerStateContextValue {
   pending: any;
 }
 
-/**
- * This is a workaround to support exposing context from within a server component
- * exported from Hydrogen.
- */
-declare global {
-  var __serverStateContext: any;
-}
-export const ServerStateContext =
-  globalThis.__serverStateContext || createContext<any>(null);
-
-globalThis.__serverStateContext = ServerStateContext;
+export const ServerStateContext = createContext<any>(null);
 
 interface Props {
   serverState: Record<string, any>;