From 74b44cf11e65bdc0aabb96c46ca0275804130605 Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:01:15 +0200 Subject: [PATCH 01/10] Remove log related to .shopify in .gitignore --- packages/cli/src/lib/shopify-config.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/cli/src/lib/shopify-config.ts b/packages/cli/src/lib/shopify-config.ts index 3491209c9e..fc7a3102c7 100644 --- a/packages/cli/src/lib/shopify-config.ts +++ b/packages/cli/src/lib/shopify-config.ts @@ -1,7 +1,6 @@ import {resolvePath, dirname} from '@shopify/cli-kit/node/path'; import {readFile, mkdir, fileExists, writeFile} from '@shopify/cli-kit/node/fs'; import {AbortError} from '@shopify/cli-kit/node/error'; -import {outputInfo} from '@shopify/cli-kit/node/output'; export const SHOPIFY_DIR = '.shopify'; export const SHOPIFY_DIR_PROJECT = 'project.json'; @@ -146,7 +145,6 @@ export async function ensureShopifyGitIgnore(root: string): Promise { gitIgnoreContents += `${SHOPIFY_DIR}\r\n`; - outputInfo('Adding .shopify to .gitignore...\n'); await writeFile(gitIgnoreFilePath, gitIgnoreContents); return true; From 8d76581bea677a5b10edaf0a3ddf905bfd8cee2a Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:05:48 +0200 Subject: [PATCH 02/10] Update list prompt and cleanup --- packages/cli/src/commands/hydrogen/list.ts | 15 +++++++++++++-- packages/cli/src/lib/missing-storefronts.ts | 17 ----------------- packages/cli/src/lib/user-errors.ts | 16 ---------------- 3 files changed, 13 insertions(+), 35 deletions(-) delete mode 100644 packages/cli/src/lib/missing-storefronts.ts delete mode 100644 packages/cli/src/lib/user-errors.ts diff --git a/packages/cli/src/commands/hydrogen/list.ts b/packages/cli/src/commands/hydrogen/list.ts index ee866921f6..f0277b8a35 100644 --- a/packages/cli/src/commands/hydrogen/list.ts +++ b/packages/cli/src/commands/hydrogen/list.ts @@ -6,6 +6,7 @@ import { outputInfo, outputNewline, } from '@shopify/cli-kit/node/output'; +import {renderInfo} from '@shopify/cli-kit/node/ui'; import {commonFlags} from '../../lib/flags.js'; import {parseGid} from '../../lib/gid.js'; import { @@ -13,8 +14,9 @@ import { type HydrogenStorefront, getStorefrontsWithDeployment, } from '../../lib/graphql/admin/list-storefronts.js'; -import {logMissingStorefronts} from '../../lib/missing-storefronts.js'; +import {newHydrogenStorefrontUrl} from '../../lib/admin-urls.js'; import {login} from '../../lib/auth.js'; +import {getCliCommand} from '../../lib/shell.js'; export default class List extends Command { static description = @@ -75,7 +77,16 @@ export async function runList({path: root = process.cwd()}: Flags) { }, ); } else { - logMissingStorefronts(session); + renderInfo({ + headline: 'Hydrogen storefronts', + body: 'There are no Hydrogen storefronts on your Shop.', + nextSteps: [ + `Ensure you are logged in to the correct shop (currently: ${session.storeFqdn})`, + `Create a new Hydrogen storefront: Run \`${await getCliCommand( + root, + )} link\` or visit ${newHydrogenStorefrontUrl(session)}`, + ], + }); } } diff --git a/packages/cli/src/lib/missing-storefronts.ts b/packages/cli/src/lib/missing-storefronts.ts deleted file mode 100644 index 8667ef77ea..0000000000 --- a/packages/cli/src/lib/missing-storefronts.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {renderInfo} from '@shopify/cli-kit/node/ui'; -import type {AdminSession} from '@shopify/cli-kit/node/session'; - -import {newHydrogenStorefrontUrl} from './admin-urls.js'; - -export function logMissingStorefronts(adminSession: AdminSession) { - renderInfo({ - headline: 'Hydrogen storefronts', - body: 'There are no Hydrogen storefronts on your Shop.', - nextSteps: [ - `Ensure you have specified the correct shop (you specified: ${adminSession.storeFqdn})`, - `Create a new Hydrogen storefront: ${newHydrogenStorefrontUrl( - adminSession, - )}`, - ], - }); -} diff --git a/packages/cli/src/lib/user-errors.ts b/packages/cli/src/lib/user-errors.ts deleted file mode 100644 index bfdec4307e..0000000000 --- a/packages/cli/src/lib/user-errors.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {AbortError} from '@shopify/cli-kit/node/error'; - -export interface UserError { - code: string | undefined; - field: string[]; - message: string; -} - -export function renderUserErrors(userErrors: UserError[]) { - const errorMessages = userErrors.map(({message}) => message).join(', '); - renderError(errorMessages); -} - -export function renderError(message: string) { - throw new AbortError(message); -} From 71b1eb4ad3dff2157c2b2c81e4ea634f6e92799a Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:37:25 +0200 Subject: [PATCH 03/10] Throw error in HR when storeDomain is falsy --- packages/hydrogen-react/src/storefront-client.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts index ceb1a7d812..3a14af15e0 100644 --- a/packages/hydrogen-react/src/storefront-client.ts +++ b/packages/hydrogen-react/src/storefront-client.ts @@ -33,6 +33,13 @@ export function createStorefrontClient( contentType, } = props; + if (!storeDomain) { + throw new Error( + H2_PREFIX_ERROR + + `\`storeDomain\` is required when creating a new Storefront client.\nReceived "${storeDomain}".`, + ); + } + if (storefrontApiVersion !== SFAPI_VERSION) { warnOnce( `The Storefront API version that you're using is different than the version this build of Hydrogen React is targeting.` + From 1689784bb5e4adb68e31491277e56e30b544684d Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:41:31 +0200 Subject: [PATCH 04/10] Trim stack trace for every known error, not only GraphQL --- packages/cli/src/lib/log.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts index efa181ccc5..bcc73b4b33 100644 --- a/packages/cli/src/lib/log.ts +++ b/packages/cli/src/lib/log.ts @@ -228,17 +228,17 @@ export function enhanceH2Logs(options: { queryName ? ` \`${colors.whiteBright(queryName)}\`` : '' }, try it in ${outputToken.link(colors.bold('GraphiQL'), link)}.` .value; + } - // Sanitize stack trace to only show app code - const stackLines = stack?.split('\n') ?? []; - const isAppLine = (line: string) => - line.includes(options.appDirectory); - const firstAppLineIndex = stackLines.findIndex(isAppLine); - const lastAppLineIndex = - stackLines.length - - [...stackLines] - .reverse() // findLastIndex requires Node 18 - .findIndex(isAppLine); + // Sanitize stack trace to only show app code + const stackLines = stack?.split('\n') ?? []; + const isAppLine = (line: string) => line.includes(options.appDirectory); + const firstAppLineIndex = stackLines.findIndex(isAppLine); + const lastAppLineIndex = + stackLines.length - + [...stackLines] + .reverse() // findLastIndex requires Node 18 + .findIndex(isAppLine); stack = [ From 52c8b9878ffbc8880a25f91d65ee9a06050181fa Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:43:45 +0200 Subject: [PATCH 05/10] Show server.ts in stack trace and ensure something is shown --- packages/cli/src/lib/log.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts index bcc73b4b33..3a0527502d 100644 --- a/packages/cli/src/lib/log.ts +++ b/packages/cli/src/lib/log.ts @@ -175,7 +175,7 @@ export function muteAuthLogs({ */ export function enhanceH2Logs(options: { graphiqlUrl: string; - appDirectory: string; + rootDirectory: string; }) { injectLogReplacer('warn'); injectLogReplacer('error'); @@ -232,7 +232,9 @@ export function enhanceH2Logs(options: { // Sanitize stack trace to only show app code const stackLines = stack?.split('\n') ?? []; - const isAppLine = (line: string) => line.includes(options.appDirectory); + const isAppLine = (line: string) => + line.includes(options.rootDirectory) && + !line.includes('node_modules'); const firstAppLineIndex = stackLines.findIndex(isAppLine); const lastAppLineIndex = stackLines.length - @@ -240,6 +242,7 @@ export function enhanceH2Logs(options: { .reverse() // findLastIndex requires Node 18 .findIndex(isAppLine); + if (firstAppLineIndex > 0 && lastAppLineIndex > firstAppLineIndex) { stack = [ stackLines[0], // Error message From d61290f76bfdc041aa24c8049a40e5f3ce271d40 Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:45:34 +0200 Subject: [PATCH 06/10] Fix tests --- packages/cli/src/lib/log.test.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/cli/src/lib/log.test.ts b/packages/cli/src/lib/log.test.ts index fac6b7a0a4..391e8a76da 100644 --- a/packages/cli/src/lib/log.test.ts +++ b/packages/cli/src/lib/log.test.ts @@ -6,7 +6,7 @@ import {resetAllLogs, enhanceH2Logs} from './log.js'; describe('log replacer', () => { describe('enhanceH2Logs', () => { const graphiqlUrl = 'http://localhost:3000/graphiql'; - const appDirectory = fileURLToPath(import.meta.url); + const rootDirectory = fileURLToPath(import.meta.url); const outputMock = mockAndCaptureOutput(); beforeEach(() => { @@ -21,7 +21,7 @@ describe('log replacer', () => { describe('enhances h2:info pattern', () => { it('renders in an info banner', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.warn('[h2:info:storefront.query] Tip'); @@ -35,7 +35,7 @@ describe('log replacer', () => { describe('enhances h2:warn pattern', () => { it('renders in a warning banner', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.warn('[h2:warn:storefront.query] Wrong query 1'); @@ -47,7 +47,7 @@ describe('log replacer', () => { }); it('shows links from the last line as a list', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.warn( '[h2:warn:storefront.query] Wrong query.\nhttps://docs.com/something', @@ -62,7 +62,7 @@ describe('log replacer', () => { describe('enhances h2:error pattern', () => { it('renders in an error banner', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.error(new Error('[h2:error:storefront.query] Wrong query 2')); @@ -75,7 +75,7 @@ describe('log replacer', () => { }); it('shows a GraphiQL link when the error is related to a GraphQL query', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.error( new Error('[h2:error:storefront.query] Wrong query 3', { @@ -95,7 +95,7 @@ describe('log replacer', () => { }); it('trims stack traces when the error is related to a GraphQL query', () => { - enhanceH2Logs({graphiqlUrl, appDirectory}); + enhanceH2Logs({graphiqlUrl, rootDirectory}); console.error( new Error('[h2:error:storefront.query] Wrong query 4', { @@ -105,7 +105,7 @@ describe('log replacer', () => { const error = outputMock.error(); const stack = error.split('stack trace:')[1] ?? ''; - const shortenedAppDir = appDirectory.split('/cli/').pop()!; + const shortenedAppDir = rootDirectory.split('/cli/').pop()!; expect(stack).toMatch(shortenedAppDir); expect(stack).not.toMatch('node_modules'); }); From c59a2f436a5c1c3b5b88fe7121c78614e048034f Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:50:26 +0200 Subject: [PATCH 07/10] Update HR error messages --- packages/hydrogen-react/src/storefront-client.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts index 3a14af15e0..64b60b294d 100644 --- a/packages/hydrogen-react/src/storefront-client.ts +++ b/packages/hydrogen-react/src/storefront-client.ts @@ -91,7 +91,7 @@ export function createStorefrontClient( ) { throw new Error( H2_PREFIX_ERROR + - 'You did not pass in a `privateStorefrontToken` while using `getPrivateTokenHeaders()`', + 'You did not pass in a `privateStorefrontToken` while using `createStorefrontClient()` or `getPrivateTokenHeaders()`', ); } @@ -127,7 +127,7 @@ export function createStorefrontClient( ) { throw new Error( H2_PREFIX_ERROR + - 'You did not pass in a `publicStorefrontToken` while using `getPublicTokenHeaders()`', + 'You did not pass in a `publicStorefrontToken` while using `createStorefrontClient()` or `getPublicTokenHeaders()`', ); } From 63b5b0c50212cc170a38af3409ccba04a1ba663c Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 12:57:38 +0200 Subject: [PATCH 08/10] Improve virtual-route information when store is linked --- .../cli/src/virtual-routes/routes/index.tsx | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/packages/cli/src/virtual-routes/routes/index.tsx b/packages/cli/src/virtual-routes/routes/index.tsx index 825ebcaa41..4f6897dce1 100644 --- a/packages/cli/src/virtual-routes/routes/index.tsx +++ b/packages/cli/src/virtual-routes/routes/index.tsx @@ -71,12 +71,26 @@ export default function Index() { {configDone ? : }

Hello, {shopName}

Welcome to your new custom storefront

- {configDone ? null : ( -
-
- -

Configure storefront token

-
+ +
+
+ +

+ {configDone + ? 'Create your first route' + : 'Configure storefront token'} +

+
+ {configDone ? ( +

+ You’re seeing this because you don’t have a home route + in your project yet.
+ Run h2 generate route home to create your home route. + Learn more about + {` `} + +

+ ) : (

You’re seeing this because you have not yet configured your storefront token.
@@ -95,23 +109,28 @@ export default function Index() { {` `} and{` `} - - creating routes - - . + .

-
- )} + )} +
); } +function CreateRoutesLink() { + return ( + + creating routes + + ); +} + function ErrorPage() { return ( <> From 42e5f871c198f770ef6216e9d659ddd913b10f87 Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 13:00:17 +0200 Subject: [PATCH 09/10] Use mock.shop in hello-world --- templates/hello-world/.env | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/hello-world/.env b/templates/hello-world/.env index 0e6eeed74c..70c3c48cf0 100644 --- a/templates/hello-world/.env +++ b/templates/hello-world/.env @@ -1,5 +1,4 @@ -# The variables added in this file are only available locally in MiniOxygen +# These variables are only available locally in MiniOxygen SESSION_SECRET="foobar" -PUBLIC_STOREFRONT_API_TOKEN="3b580e70970c4528da70c98e097c2fa0" -PUBLIC_STORE_DOMAIN="hydrogen-preview.myshopify.com" +PUBLIC_STORE_DOMAIN="mock.shop" From 895963c4147ac1a335a893b8fd21279aeda3d05d Mon Sep 17 00:00:00 2001 From: Fran Dios Date: Fri, 21 Jul 2023 13:01:43 +0200 Subject: [PATCH 10/10] Changesets --- .changeset/five-bees-itch.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/five-bees-itch.md diff --git a/.changeset/five-bees-itch.md b/.changeset/five-bees-itch.md new file mode 100644 index 0000000000..1ad025c46a --- /dev/null +++ b/.changeset/five-bees-itch.md @@ -0,0 +1,6 @@ +--- +'@shopify/hydrogen-react': patch +'@shopify/hydrogen': patch +--- + +Throw error when `storeDomain` is not passed to `createStorefrontClient`.