@shopify/cli-hydrogen 8.0.0 → 8.0.2

package/dist/commands/hydrogen/debug/cpu.js

@@ -4,8 +4,9 @@ import Command from '@shopify/cli-kit/node/base-command';
 import { outputInfo, outputWarn } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
 import { writeFile } from '@shopify/cli-kit/node/fs';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import ansiEscapes from 'ansi-escapes';
-import { getProjectPaths, handleRemixImportFail, getRemixConfig } from '../../../lib/remix-config.js';
+import { getProjectPaths, hasRemixConfigFile, handleRemixImportFail, getRemixConfig } from '../../../lib/remix-config.js';
 import { muteDevLogs, createRemixLogger } from '../../../lib/log.js';
 import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
 import { createCpuStartupProfiler } from '../../../lib/cpu-profiler.js';
@@ -43,6 +44,11 @@ async function runDebugCpu({
     process.env.NODE_ENV = "production";
   muteDevLogs({ workerReload: false });
   const { root, buildPathWorkerFile } = getProjectPaths(appPath);
+  if (!await hasRemixConfigFile(root)) {
+    throw new AbortError(
+      "No remix.config.js file found. This command is not supported in Vite projects."
+    );
+  }
   outputInfo(
     "\u23F3\uFE0F Starting profiler for CPU startup... Profile will be written to:\n" + colors.dim(output)
   );

package/dist/commands/hydrogen/deploy.js

@@ -350,27 +350,16 @@ ${changedFiles.trimEnd()}`;
     workerDir,
     overriddenEnvironmentVariables
   };
-  if (!isCI && (userProvidedEnvironmentTag || userChosenEnvironmentTag || config.defaultEnvironment)) {
-    let chosenEnvironment = null;
-    if (config.defaultEnvironment) {
-      chosenEnvironment = findEnvironmentOrThrow(
-        deploymentData.environments,
-        "preview"
-      );
-    } else if (config.environmentTag) {
-      chosenEnvironment = findEnvironmentByBranchOrThrow(
-        deploymentData.environments,
-        config.environmentTag
-      );
-    }
-    let confirmationMessage = "Creating a deployment";
-    if (chosenEnvironment) {
-      confirmationMessage += ` against ${createEnvironmentCliChoiceLabel(
-        chosenEnvironment.name,
-        chosenEnvironment.handle,
-        chosenEnvironment.branch
-      )}`;
-    }
+  if (!isCI && !config.defaultEnvironment && (userProvidedEnvironmentTag || userChosenEnvironmentTag)) {
+    let chosenEnvironment = findEnvironmentByBranchOrThrow(
+      deploymentData.environments,
+      config.environmentTag
+    );
+    let confirmationMessage = `Creating a deployment against ${createEnvironmentCliChoiceLabel(
+      chosenEnvironment.name,
+      chosenEnvironment.handle,
+      chosenEnvironment.branch
+    )}`;
     const confirmPush = await renderConfirmationPrompt({
       confirmationMessage: "Yes, confirm deploy",
       cancellationMessage: "No, cancel deploy",

package/dist/commands/hydrogen/dev-vite.js

@@ -96,12 +96,12 @@ async function runViteDev({
     customerAccountPushFlag
   );
   const envPromise = backgroundPromise.then(
-    ({ fetchRemote, localVariables: localVariables2 }) => getAllEnvironmentVariables({
+    ({ fetchRemote, localVariables }) => getAllEnvironmentVariables({
       root,
       envBranch,
       envHandle,
       fetchRemote,
-      localVariables: localVariables2
+      localVariables
     })
   );
   if (debug && !inspectorPort) {
@@ -130,7 +130,7 @@ async function runViteDev({
           findOxygenPlugin(config)?.api?.registerPluginOptions({
             debug,
             entry: ssrEntry,
-            envPromise: envPromise.then(({ allVariables }) => allVariables),
+            envPromise: envPromise.then(({ allVariables: allVariables2 }) => allVariables2),
             inspectorPort,
             logRequestLine
           });
@@ -186,7 +186,7 @@ async function runViteDev({
     host: finalHost,
     cliCommand
   });
-  const { logInjectedVariables, localVariables } = await envPromise;
+  const { logInjectedVariables, allVariables } = await envPromise;
   logInjectedVariables();
   console.log("");
   viteServer.printUrls();
@@ -212,7 +212,7 @@ async function runViteDev({
   if (!disableVersionCheck) {
     displayDevUpgradeNotice({ targetPath: root });
   }
-  if (customerAccountPushFlag && isMockShop(localVariables)) {
+  if (customerAccountPushFlag && isMockShop(allVariables)) {
     notifyIssueWithTunnelAndMockShop(cliCommand);
   }
   return {

package/dist/commands/hydrogen/dev.js

@@ -168,7 +168,7 @@ async function runDev({
   async function safeStartMiniOxygen() {
     if (miniOxygen)
       return;
-    const { allVariables, localVariables, logInjectedVariables } = await envPromise;
+    const { allVariables, logInjectedVariables } = await envPromise;
     miniOxygen = await startMiniOxygen(
       {
         root,
@@ -204,7 +204,7 @@ async function runDev({
     if (!disableVersionCheck) {
       displayDevUpgradeNotice({ targetPath: appPath });
     }
-    if (customerAccountPushFlag && isMockShop(localVariables)) {
+    if (customerAccountPushFlag && isMockShop(allVariables)) {
       notifyIssueWithTunnelAndMockShop(cliCommand);
     }
   }

package/dist/commands/hydrogen/env/list.js

@@ -1,14 +1,13 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { pluralize } from '@shopify/cli-kit/common/string';
 import { outputInfo, outputNewline, outputContent } from '@shopify/cli-kit/node/output';
-import { linkStorefront } from '../link.js';
 import { commonFlags } from '../../../lib/flags.js';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
 import { createEnvironmentCliChoiceLabel } from '../../../lib/common.js';
-import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
+import { renderMissingStorefront } from '../../../lib/render-errors.js';
 import { login } from '../../../lib/auth.js';
 import { getCliCommand } from '../../../lib/shell.js';
+import { verifyLinkedStorefront } from '../../../lib/verify-linked-storefront.js';
 
 class EnvList extends Command {
   static descriptionWithMarkdown = "Lists all environments available on the linked Hydrogen storefront.";
@@ -26,29 +25,23 @@ async function runEnvList({ path: root = process.cwd() }) {
     login(root),
     getCliCommand()
   ]);
-  let configStorefront = config.storefront;
-  if (!configStorefront?.id) {
-    renderMissingLink({ session, cliCommand });
-    const runLink = await renderConfirmationPrompt({
-      message: ["Run", { command: `${cliCommand} link` }, "?"]
-    });
-    if (!runLink) {
-      return;
-    }
-    configStorefront = await linkStorefront(root, session, config, {
-      cliCommand
-    });
-  }
-  if (!configStorefront)
+  const linkedStorefront = await verifyLinkedStorefront({
+    root,
+    session,
+    config,
+    cliCommand
+  });
+  if (!linkedStorefront)
     return;
+  config.storefront = linkedStorefront;
   const storefront = await getStorefrontEnvironments(
     session,
-    configStorefront.id
+    config.storefront.id
   );
   if (!storefront) {
     renderMissingStorefront({
       session,
-      storefront: configStorefront,
+      storefront: config.storefront,
       cliCommand
     });
     return;
@@ -64,7 +57,7 @@ async function runEnvList({ path: root = process.cwd() }) {
   outputInfo(
     pluralizedEnvironments({
       environments: storefront.environments,
-      storefrontTitle: configStorefront.title
+      storefrontTitle: config.storefront.title
     }).toString()
   );
   storefront.environments.forEach(({ name, handle, branch, type, url }) => {

package/dist/commands/hydrogen/env/pull.js

@@ -1,7 +1,7 @@
 import { diffLines } from 'diff';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderInfo, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken, outputInfo } from '@shopify/cli-kit/node/output';
+import { renderInfo, renderConfirmationPrompt, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputInfo, outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import { fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { patchEnvFile } from '@shopify/cli-kit/node/dot-env';
@@ -10,10 +10,10 @@ import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
 import { login } from '../../../lib/auth.js';
 import { getCliCommand } from '../../../lib/shell.js';
 import { findEnvironmentOrThrow, findEnvironmentByBranchOrThrow } from '../../../lib/common.js';
-import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
-import { linkStorefront } from '../link.js';
+import { renderMissingStorefront } from '../../../lib/render-errors.js';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
 import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-variables.js';
+import { verifyLinkedStorefront } from '../../../lib/verify-linked-storefront.js';
 
 class EnvPull extends Command {
   static descriptionWithMarkdown = "Pulls environment variables from the linked Hydrogen storefront and writes them to an `.env` file.";
@@ -39,21 +39,15 @@ async function runEnvPull({
     login(root),
     getCliCommand()
   ]);
-  if (!config.storefront?.id) {
-    renderMissingLink({ session, cliCommand });
-    const runLink = await renderConfirmationPrompt({
-      message: outputContent`Run ${outputToken.genericShellCommand(
-        `${cliCommand} link`
-      )}?`.value
-    });
-    if (!runLink)
-      return;
-    config.storefront = await linkStorefront(root, session, config, {
-      cliCommand
-    });
-  }
-  if (!config.storefront?.id)
+  const linkedStorefront = await verifyLinkedStorefront({
+    root,
+    session,
+    config,
+    cliCommand
+  });
+  if (!linkedStorefront)
     return;
+  config.storefront = linkedStorefront;
   if (envHandle || envBranch) {
     const environments = (await getStorefrontEnvironments(session, config.storefront.id))?.environments || [];
     if (envHandle) {

package/dist/commands/hydrogen/env/push.js

@@ -5,16 +5,15 @@ import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
 import { login } from '../../../lib/auth.js';
 import { getCliCommand } from '../../../lib/shell.js';
 import { resolvePath } from '@shopify/cli-kit/node/path';
-import { renderConfirmationPrompt, renderSelectPrompt, renderInfo, renderSuccess } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
+import { renderSelectPrompt, renderInfo, renderConfirmationPrompt, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputWarn, outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import { orderEnvironmentsBySafety, findEnvironmentOrThrow, createEnvironmentCliChoiceLabel } from '../../../lib/common.js';
-import { renderMissingLink } from '../../../lib/render-errors.js';
 import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
-import { linkStorefront } from '../link.js';
 import { getStorefrontEnvVariables } from '../../../lib/graphql/admin/pull-variables.js';
 import { pushStorefrontEnvVariables } from '../../../lib/graphql/admin/push-variables.js';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { readAndParseDotEnv, createDotEnvFileLine } from '@shopify/cli-kit/node/dot-env';
+import { verifyLinkedStorefront } from '../../../lib/verify-linked-storefront.js';
 
 class EnvPush extends Command {
   static description = "Push environment variables from the local .env file to your linked Hydrogen storefront.";
@@ -42,21 +41,15 @@ async function runEnvPush({
     login(path),
     getCliCommand()
   ]);
-  if (!config.storefront?.id) {
-    renderMissingLink({ session, cliCommand });
-    const runLink = await renderConfirmationPrompt({
-      message: outputContent`Run ${outputToken.genericShellCommand(
-        `${cliCommand} link`
-      )}?`.value
-    });
-    if (!runLink)
-      return;
-    config.storefront = await linkStorefront(path, session, config, {
-      cliCommand
-    });
-  }
-  if (!config.storefront?.id)
+  const linkedStorefront = await verifyLinkedStorefront({
+    root: path,
+    session,
+    config,
+    cliCommand
+  });
+  if (!linkedStorefront)
     return;
+  config.storefront = linkedStorefront;
   const { environments: environmentsData } = await getStorefrontEnvironments(session, config.storefront.id) ?? {};
   if (!environmentsData) {
     throw new AbortError("Failed to fetch environments");

package/dist/commands/hydrogen/init.js

@@ -6,7 +6,6 @@ import { AbortError } from '@shopify/cli-kit/node/error';
 import { AbortController } from '@shopify/cli-kit/node/abort';
 import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
-import { STYLING_CHOICES } from './../../lib/setups/css/index.js';
 import { I18N_CHOICES } from '../../lib/setups/i18n/index.js';
 import { supressNodeExperimentalWarnings } from '../../lib/process.js';
 import { setupRemoteTemplate, setupLocalStarterTemplate } from '../../lib/onboarding/index.js';
@@ -34,16 +33,13 @@ class Init extends Command {
     ...commonFlags.installDeps,
     "mock-shop": Flags.boolean({
       description: "Use mock.shop as the data source for the storefront.",
-      default: false,
       env: "SHOPIFY_HYDROGEN_FLAG_MOCK_DATA"
     }),
-    ...commonFlags.styling,
     ...commonFlags.markets,
     ...commonFlags.shortcut,
     routes: Flags.boolean({
       description: "Generate routes for all pages.",
       env: "SHOPIFY_HYDROGEN_FLAG_ROUTES",
-      hidden: true,
       allowNo: true
     }),
     git: Flags.boolean({
@@ -53,7 +49,7 @@ class Init extends Command {
       allowNo: true
     }),
     quickstart: Flags.boolean({
-      description: "Scaffolds a new Hydrogen project with a set of sensible defaults.",
+      description: "Scaffolds a new Hydrogen project with a set of sensible defaults. Equivalent to `shopify hydrogen init --path hydrogen-quickstart --mock-shop --language js --shortcut --routes --markets none`",
       env: "SHOPIFY_HYDROGEN_FLAG_QUICKSTART",
       default: false
     }),
@@ -84,21 +80,15 @@ async function runInit({
       `Invalid URL structure strategy: ${options.i18n}. Must be one of ${I18N_CHOICES.join(", ")}`
     );
   }
-  if (options.styling && !STYLING_CHOICES.includes(options.styling)) {
-    throw new AbortError(
-      `Invalid styling strategy: ${options.styling}. Must be one of ${STYLING_CHOICES.join(", ")}`
-    );
-  }
   options.git ??= true;
   if (options.quickstart) {
-    options.i18n ||= "none";
-    options.installDeps ||= true;
-    options.language ||= "js";
-    options.mockShop ||= true;
-    options.path ||= "./hydrogen-quickstart";
-    options.routes ||= true;
-    options.shortcut ||= true;
-    options.styling ||= "tailwind";
+    options.i18n ??= "none";
+    options.installDeps ??= true;
+    options.language ??= "js";
+    options.mockShop ??= true;
+    options.path ??= "./hydrogen-quickstart";
+    options.routes ??= true;
+    options.shortcut ??= true;
   }
   const showUpgrade = await checkHydrogenVersion(
     // Resolving the CLI package from a local directory might fail because

package/dist/commands/hydrogen/link.js

@@ -63,7 +63,8 @@ async function runLink({
 async function linkStorefront(root, session, config, {
   force = false,
   flagStorefront,
-  cliCommand
+  cliCommand,
+  storefronts
 }) {
   if (!config.shop) {
     throw new AbortError("No shop found in local config, login first.");
@@ -76,7 +77,9 @@ async function linkStorefront(root, session, config, {
       return;
     }
   }
-  const storefronts = await getStorefronts(session);
+  if (!storefronts) {
+    storefronts = await getStorefronts(session);
+  }
   let selectedStorefront;
   if (flagStorefront) {
     selectedStorefront = storefronts.find(

package/dist/commands/hydrogen/setup.js

@@ -15,7 +15,6 @@ class Setup extends Command {
   static flags = {
     ...commonFlags.path,
     ...commonFlags.force,
-    ...commonFlags.styling,
     ...commonFlags.markets,
     ...commonFlags.shortcut,
     ...overrideFlag(commonFlags.installDeps, {

package/dist/generator-templates/assets/vite/vite.config.js

@@ -18,4 +18,9 @@ export default defineConfig({
     }),
     tsconfigPaths(),
   ],
+  build: {
+    // Allow a strict Content-Security-Policy
+    // withtout inlining assets as base64:
+    assetsInlineLimit: 0,
+  },
 });

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,54 @@
 # skeleton
 
+## 1.0.9
+
+### Patch Changes
+
+- Pin React dependency to 18.2.0 to avoid mismatches. ([#2051](https://github.com/Shopify/hydrogen/pull/2051)) by [@frandiox](https://github.com/frandiox)
+
+- Updated dependencies [[`9c36c8a5`](https://github.com/Shopify/hydrogen/commit/9c36c8a566b1ae2ceac4846c4c9fe4f63f6f4ab3)]:
+  - @shopify/cli-hydrogen@8.0.2
+
+## 1.0.8
+
+### Patch Changes
+
+- Stop inlining the favicon in base64 to avoid issues with the Content-Security-Policy. In `vite.config.js`: ([#2006](https://github.com/Shopify/hydrogen/pull/2006)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  export default defineConfig({
+    plugins: [
+      ...
+    ],
+  + build: {
+  +   assetsInlineLimit: 0,
+  + },
+  });
+  ```
+
+- To improve HMR in Vite, move the `useRootLoaderData` function from `app/root.tsx` to a separate file like `app/lib/root-data.ts`. This change avoids circular imports: ([#2014](https://github.com/Shopify/hydrogen/pull/2014)) by [@frandiox](https://github.com/frandiox)
+
+  ```tsx
+  // app/lib/root-data.ts
+  import {useMatches} from '@remix-run/react';
+  import type {SerializeFrom} from '@shopify/remix-oxygen';
+  import type {loader} from '~/root';
+
+  /**
+   * Access the result of the root loader from a React component.
+   */
+  export const useRootLoaderData = () => {
+    const [root] = useMatches();
+    return root?.data as SerializeFrom<typeof loader>;
+  };
+  ```
+
+  Import this hook from `~/lib/root-data` instead of `~/root` in your components.
+
+- Updated dependencies [[`b4dfda32`](https://github.com/Shopify/hydrogen/commit/b4dfda320ca52855b2d4493a4306d15a883ca843), [`ffa57bdb`](https://github.com/Shopify/hydrogen/commit/ffa57bdbcdf51e03d565736f9388b5bb4f46292c), [`ac4e1670`](https://github.com/Shopify/hydrogen/commit/ac4e1670f0361a2cd2c6827e4162bbbee0ca37f3), [`0af624d5`](https://github.com/Shopify/hydrogen/commit/0af624d51afc7250db889ba5e736c85a6070c8b2), [`9723eaf3`](https://github.com/Shopify/hydrogen/commit/9723eaf3e5a42c30e657d1cadb123ed775d620e4), [`e842f68c`](https://github.com/Shopify/hydrogen/commit/e842f68c8e879d4c54e0730f3cb55214a760d7f5)]:
+  - @shopify/cli-hydrogen@8.0.1
+  - @shopify/hydrogen@2024.4.1
+
 ## 1.0.7
 
 ### Patch Changes

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -1,6 +1,6 @@
 import {NavLink} from '@remix-run/react';
 import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
-import {useRootLoaderData} from '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 export function Footer({
   menu,

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -2,7 +2,7 @@ import {Await, NavLink} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {HeaderQuery} from 'storefrontapi.generated';
 import type {LayoutProps} from './Layout';
-import {useRootLoaderData} from '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 type HeaderProps = Pick<LayoutProps, 'header' | 'cart' | 'isLoggedIn'>;
 

package/dist/generator-templates/starter/app/lib/root-data.ts

@@ -0,0 +1,11 @@
+import {useMatches} from '@remix-run/react';
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import type {loader} from '~/root';
+
+/**
+ * Access the result of the root loader from a React component.
+ */
+export function useRootLoaderData() {
+  const [root] = useMatches();
+  return root?.data as SerializeFrom<typeof loader>;
+}

package/dist/generator-templates/starter/app/root.tsx

@@ -1,15 +1,10 @@
 import {useNonce} from '@shopify/hydrogen';
-import {
-  defer,
-  type SerializeFrom,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  useMatches,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
@@ -58,14 +53,6 @@ export function links() {
   ];
 }
 
-/**
- * Access the result of the root loader from a React component.
- */
-export const useRootLoaderData = () => {
-  const [root] = useMatches();
-  return root?.data as SerializeFrom<typeof loader>;
-};
-
 export async function loader({context}: LoaderFunctionArgs) {
   const {storefront, customerAccount, cart} = context;
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
@@ -130,7 +117,7 @@ export default function App() {
 
 export function ErrorBoundary() {
   const error = useRouteError();
-  const rootData = useRootLoaderData();
+  const rootData = useLoaderData<typeof loader>();
   const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -7,11 +7,11 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
 };
 
-export const loader = async ({
+export async function loader({
   request,
   params,
   context: {storefront},
-}: LoaderFunctionArgs) => {
+}: LoaderFunctionArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -32,7 +32,7 @@ export const loader = async ({
   }
 
   return json({blog});
-};
+}
 
 export default function Blog() {
   const {blog} = useLoaderData<typeof loader>();

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -4,7 +4,7 @@ import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
-import {useRootLoaderData} from '~/root';
+import {useRootLoaderData} from '~/lib/root-data';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];

package/dist/generator-templates/starter/app/routes/collections.all.tsx

@@ -10,7 +10,7 @@ import type {ProductItemFragment} from 'storefrontapi.generated';
 import {useVariantUrl} from '~/lib/variants';
 
 export const meta: MetaFunction<typeof loader> = () => {
-  return [{title: `Hydrogen | Procuts`}];
+  return [{title: `Hydrogen | Products`}];
 };
 
 export async function loader({request, context}: LoaderFunctionArgs) {

package/dist/generator-templates/starter/package.json

@@ -2,7 +2,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "scripts": {
     "build": "shopify hydrogen build --codegen",
@@ -17,21 +17,21 @@
     "@remix-run/react": "^2.8.0",
     "@remix-run/server-runtime": "^2.8.0",
     "@shopify/cli": "3.58.0",
-    "@shopify/cli-hydrogen": "^8.0.0",
-    "@shopify/hydrogen": "2024.4.0",
+    "@shopify/cli-hydrogen": "^8.0.2",
+    "@shopify/hydrogen": "2024.4.1",
     "@shopify/remix-oxygen": "^2.0.4",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.2",
     "@remix-run/dev": "^2.8.0",
     "@remix-run/eslint-config": "^2.8.0",
     "@shopify/hydrogen-codegen": "^0.3.0",
-    "@shopify/mini-oxygen": "^3.0.0",
+    "@shopify/mini-oxygen": "^3.0.1",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/generator-templates/starter/vite.config.ts

@@ -18,4 +18,9 @@ export default defineConfig({
     }),
     tsconfigPaths(),
   ],
+  build: {
+    // Allow a strict Content-Security-Policy
+    // withtout inlining assets as base64:
+    assetsInlineLimit: 0,
+  },
 });

package/dist/init.d.ts

@@ -45,7 +45,6 @@ declare class Init extends Command {
         'package-manager': _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         shortcut: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         markets: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
-        styling: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         'mock-shop': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         'install-deps': _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;

package/dist/lib/dev-shared.js

@@ -9,7 +9,9 @@ import { getConfig } from './shopify-config.js';
 import { getGraphiQLUrl } from './graphiql-url.js';
 
 function isMockShop(envVariables) {
-  return envVariables.PUBLIC_STORE_DOMAIN && envVariables.PUBLIC_STORE_DOMAIN.includes("mock.shop");
+  return envVariables.PUBLIC_STORE_DOMAIN === "mock.shop" || // We fallback to mock.shop if the env var is falsy.
+  // When it's undefined, it might be overwritten by remote variables.
+  envVariables.PUBLIC_STORE_DOMAIN === "";
 }
 function notifyIssueWithTunnelAndMockShop(cliCommand) {
   renderInfo({

package/dist/lib/flags.js

@@ -3,7 +3,6 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
-import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
 const DEFAULT_APP_PORT = 3e3;
@@ -88,15 +87,6 @@ const commonFlags = {
       dependsOn: ["codegen"]
     })
   },
-  styling: {
-    styling: Flags.string({
-      description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
-        (item) => `\`${item}\``
-      ).join(", ")}.`,
-      choices: STYLING_CHOICES,
-      env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
-    })
-  },
   markets: {
     markets: Flags.string({
       description: `Sets the URL structure to support multiple markets. Must be one of: ${I18N_CHOICES.map(

package/dist/lib/get-oxygen-deployment-data.js

@@ -1,10 +1,9 @@
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
 import { outputWarn } from '@shopify/cli-kit/node/output';
-import { linkStorefront } from '../commands/hydrogen/link.js';
 import { login } from './auth.js';
 import { getCliCommand } from './shell.js';
-import { renderMissingLink, renderMissingStorefront } from './render-errors.js';
+import { renderMissingStorefront } from './render-errors.js';
 import { getOxygenData } from './graphql/admin/get-oxygen-data.js';
+import { verifyLinkedStorefront } from './verify-linked-storefront.js';
 
 async function getOxygenDeploymentData({
   root
@@ -13,21 +12,15 @@ async function getOxygenDeploymentData({
     login(root),
     getCliCommand()
   ]);
-  if (!config.storefront?.id) {
-    renderMissingLink({ session, cliCommand });
-    const runLink = await renderConfirmationPrompt({
-      message: ["Run", { command: `${cliCommand} link` }]
-    });
-    if (!runLink) {
-      return;
-    }
-    config.storefront = await linkStorefront(root, session, config, {
-      cliCommand
-    });
-  }
-  if (!config.storefront) {
+  const linkedStorefront = await verifyLinkedStorefront({
+    root,
+    session,
+    config,
+    cliCommand
+  });
+  if (!linkedStorefront)
     return;
-  }
+  config.storefront = linkedStorefront;
   const { storefront } = await getOxygenData(session, config.storefront.id);
   if (!storefront) {
     renderMissingStorefront({

package/dist/lib/onboarding/common.js

@@ -141,6 +141,9 @@ async function handleStorefrontSelection(storefronts) {
       value: id
     }))
   ];
+  if (choices.length === 1) {
+    return;
+  }
   const storefrontId = await renderSelectPrompt({
     message: "Select a Hydrogen storefront to link",
     choices

package/dist/lib/render-errors.js

@@ -1,4 +1,4 @@
-import { renderFatalError } from '@shopify/cli-kit/node/ui';
+import { renderFatalError, renderInfo } from '@shopify/cli-kit/node/ui';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import { hydrogenStorefrontsUrl } from './admin-urls.js';
 import { parseGid } from './gid.js';
@@ -25,15 +25,22 @@ function renderMissingStorefront({
     )}`.value
   });
 }
-function renderMissingLink({ session, cliCommand }) {
-  renderFatalError({
-    name: "NoLinkedStorefrontError",
-    type: 0,
-    message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
-    skipOclifErrorHandling: true,
-    tryMessage: [
-      "To pull environment variables or to deploy to Oxygen, link this project to a Hydrogen storefront. To select a storefront to link, run",
-      { command: `${cliCommand} link` }
+function renderMissingLink({ noStorefronts = false }) {
+  const headline = noStorefronts ? "You don't have a Hydrogen storefront to link to" : "You haven't linked your project to a storefront yet";
+  renderInfo({
+    headline,
+    body: [
+      "Link your local environment to a Hydrogen storefront. Enable automatic environment variable injection and access to",
+      { command: "env list" },
+      ",",
+      { command: "env pull" },
+      ",",
+      { command: "env push" },
+      ", and",
+      { command: "deploy" },
+      "commands. Use",
+      { command: `unlink` },
+      "to disconnect from the storefront."
     ]
   });
 }

package/dist/lib/transpile/morph/functions.js

@@ -6,18 +6,36 @@ function generateFunctionDocumentation(functionNode, variableStatement) {
     variableStatement
   );
   generateParameterDocumentation(functionNode, outputDocNode);
-  const jsDocs = variableStatement?.getJsDocs()[0];
-  if (jsDocs?.getTags().length === 0) {
+  if (variableStatement) {
     const declaration = variableStatement?.getDeclarations()[0];
-    const type = declaration?.getType().getText();
-    if (type && type !== "any" && type !== "unknown") {
-      const tagName = type.startsWith("() =>") ? "return" : "type";
-      const normalizedType = type.replace(/^\(\)\s+=>\s+/, "").replace(/typeof import\("[^"]+"\)\./, "typeof ");
-      const text = normalizedType === "SerializeFrom<typeof loader>" ? `{LoaderReturnData}` : `{${normalizedType}}`;
-      jsDocs.addTag({ tagName, text });
+    const jsDocs = variableStatement?.getJsDocs()[0];
+    if (jsDocs?.getTags().length === 0) {
+      const type = declaration?.getType().getText();
+      if (isAnnotableType(type)) {
+        jsDocs.addTag({
+          tagName: type.startsWith("() =>") ? "return" : "type",
+          text: normalizeType(type)
+        });
+      }
+    }
+  } else {
+    const declaration = functionNode;
+    const jsDocs = declaration.getJsDocs()[0];
+    if (jsDocs?.getTags().length === 0) {
+      const returnType = declaration.getReturnType().getText();
+      if (isAnnotableType(returnType)) {
+        jsDocs.addTag({ tagName: "return", text: normalizeType(returnType) });
+      }
     }
   }
 }
+function isAnnotableType(type) {
+  return !!(type && type !== "any" && type !== "unknown" && type !== "{}" && type !== "boolean");
+}
+function normalizeType(type) {
+  const normalizedType = type.replace(/^\(\)\s+=>\s+/, "").replace(/typeof import\("[^"]+"\)\./, "typeof ");
+  return normalizedType === "SerializeFrom<any>" ? `{SerializeFrom<loader>}` : `{${normalizedType}}`;
+}
 function generateParameterDocumentation(functionNode, docNode) {
   const params = functionNode.getParameters();
   const jsDoc = getJsDocOrCreate(docNode);

package/dist/lib/transpile/morph/typedefs.js

@@ -27,12 +27,11 @@ function generateTypeDefs(sourceFile, code) {
   }
   typedefs.push("");
   const knownGenerics = {
-    MetaFunction: "T"
+    MetaFunction: "T",
+    SerializeFrom: "T"
   };
   typedefsFromImports.forEach((typeElements, moduleSpecifier) => {
     for (const typeElement of typeElements) {
-      if (typeElement === "SerializeFrom")
-        continue;
       const hasGeneric = !!knownGenerics[typeElement];
       typedefs.push(
         `/** ${hasGeneric ? `@template ${knownGenerics[typeElement]} ` : ""}@typedef {import('${moduleSpecifier}').${typeElement}${hasGeneric ? `<${knownGenerics[typeElement]}>` : ""}} ${typeElement} */`

package/dist/lib/verify-linked-storefront.js

@@ -0,0 +1,24 @@
+import { getStorefronts } from './graphql/admin/link-storefront.js';
+import { linkStorefront } from '../commands/hydrogen/link.js';
+import { renderMissingLink } from './render-errors.js';
+
+async function verifyLinkedStorefront({
+  root,
+  session,
+  config,
+  cliCommand
+}) {
+  const storefronts = await getStorefronts(session);
+  let configuredStorefront = config.storefront?.id ? storefronts.find(({ id }) => id === config.storefront.id) : void 0;
+  if (configuredStorefront) {
+    return configuredStorefront;
+  }
+  renderMissingLink({ noStorefronts: !storefronts.length });
+  return await linkStorefront(root, session, config, {
+    force: true,
+    cliCommand,
+    storefronts
+  });
+}
+
+export { verifyLinkedStorefront };

package/oclif.manifest.json

@@ -1195,14 +1195,6 @@
           "allowNo": false,
           "type": "boolean"
         },
-        "styling": {
-          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`, `none`.",
-          "env": "SHOPIFY_HYDROGEN_FLAG_STYLING",
-          "name": "styling",
-          "hasDynamicHelp": false,
-          "multiple": false,
-          "type": "option"
-        },
         "markets": {
           "description": "Sets the URL structure to support multiple markets. Must be one of: `subfolders`, `domains`, `subdomains`, `none`. Example: `--markets subfolders`.",
           "env": "SHOPIFY_HYDROGEN_FLAG_I18N",
@@ -1221,7 +1213,6 @@
         "routes": {
           "description": "Generate routes for all pages.",
           "env": "SHOPIFY_HYDROGEN_FLAG_ROUTES",
-          "hidden": true,
           "name": "routes",
           "allowNo": true,
           "type": "boolean"
@@ -1234,7 +1225,7 @@
           "type": "boolean"
         },
         "quickstart": {
-          "description": "Scaffolds a new Hydrogen project with a set of sensible defaults.",
+          "description": "Scaffolds a new Hydrogen project with a set of sensible defaults. Equivalent to `shopify hydrogen init --path hydrogen-quickstart --mock-shop --language js --shortcut --routes --markets none`",
           "env": "SHOPIFY_HYDROGEN_FLAG_QUICKSTART",
           "name": "quickstart",
           "allowNo": false,
@@ -1532,14 +1523,6 @@
           "allowNo": false,
           "type": "boolean"
         },
-        "styling": {
-          "description": "Sets the styling strategy to use. One of `tailwind`, `css-modules`, `vanilla-extract`, `postcss`, `none`.",
-          "env": "SHOPIFY_HYDROGEN_FLAG_STYLING",
-          "name": "styling",
-          "hasDynamicHelp": false,
-          "multiple": false,
-          "type": "option"
-        },
         "markets": {
           "description": "Sets the URL structure to support multiple markets. Must be one of: `subfolders`, `domains`, `subdomains`, `none`. Example: `--markets subfolders`.",
           "env": "SHOPIFY_HYDROGEN_FLAG_I18N",
@@ -1805,5 +1788,5 @@
       ]
     }
   },
-  "version": "8.0.0"
+  "version": "8.0.2"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "8.0.0",
+  "version": "8.0.2",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -60,7 +60,7 @@
     "@graphql-codegen/cli": "^5.0.2",
     "@remix-run/dev": "^2.1.0",
     "@shopify/hydrogen-codegen": "^0.3.0",
-    "@shopify/mini-oxygen": "^3.0.0",
+    "@shopify/mini-oxygen": "^3.0.1",
     "graphql-config": "^5.0.3",
     "vite": "^5.1.0"
   },