@shopify/cli-hydrogen 8.0.3 → 8.1.0

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

@@ -1,228 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { setH2OVerbose, isH2Verbose, muteDevLogs, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, overrideFlag, flagsToCamelObject, DEFAULT_INSPECTOR_PORT, DEFAULT_APP_PORT } from '../../lib/flags.js';
-import Command from '@shopify/cli-kit/node/base-command';
-import colors from '@shopify/cli-kit/node/colors';
-import { collectLog } from '@shopify/cli-kit/node/output';
-import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { AbortError } from '@shopify/cli-kit/node/error';
-import { Flags } from '@oclif/core';
-import { spawnCodegenProcess } from '../../lib/codegen.js';
-import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
-import { displayDevUpgradeNotice } from './upgrade.js';
-import { prepareDiffDirectory } from '../../lib/template-diff.js';
-import { getDevConfigInBackground, TUNNEL_DOMAIN, startTunnelAndPushConfig, getUtilityBannerlines, getDebugBannerLine, isMockShop, notifyIssueWithTunnelAndMockShop } from '../../lib/dev-shared.js';
-import { getCliCommand } from '../../lib/shell.js';
-import { findPort } from '../../lib/find-port.js';
-import { logRequestLine } from '../../lib/mini-oxygen/common.js';
-import { findHydrogenPlugin, findOxygenPlugin } from '../../lib/vite-config.js';
-
-class DevVite extends Command {
-  static description = "Runs Hydrogen storefront in an Oxygen worker for development.";
-  static flags = {
-    ...commonFlags.path,
-    ...commonFlags.entry,
-    ...overrideFlag(commonFlags.port, {
-      port: { default: void 0, required: false }
-    }),
-    ...commonFlags.codegen,
-    "disable-virtual-routes": Flags.boolean({
-      description: "Disable rendering fallback routes when a route file doesn't exist.",
-      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_VIRTUAL_ROUTES"
-    }),
-    ...commonFlags.debug,
-    ...commonFlags.inspectorPort,
-    host: Flags.boolean({
-      description: "Expose the server to the network",
-      default: false,
-      required: false
-    }),
-    ...commonFlags.env,
-    ...commonFlags.envBranch,
-    "disable-version-check": Flags.boolean({
-      description: "Skip the version check when running `hydrogen dev`",
-      default: false,
-      required: false
-    }),
-    ...commonFlags.diff,
-    ...commonFlags.customerAccountPush,
-    ...commonFlags.verbose
-  };
-  static hidden = true;
-  async run() {
-    const { flags } = await this.parse(DevVite);
-    let directory = flags.path ? path.resolve(flags.path) : process.cwd();
-    if (flags.diff) {
-      directory = await prepareDiffDirectory(directory, true);
-    }
-    await runViteDev({
-      ...flagsToCamelObject(flags),
-      customerAccountPush: flags["customer-account-push__unstable"],
-      path: directory,
-      isLocalDev: flags.diff,
-      cliConfig: this.config
-    });
-  }
-}
-async function runViteDev({
-  entry: ssrEntry,
-  port: appPort,
-  path: appPath,
-  host,
-  codegen: useCodegen = false,
-  codegenConfigPath,
-  disableVirtualRoutes,
-  envBranch,
-  env: envHandle,
-  debug = false,
-  disableVersionCheck = false,
-  inspectorPort,
-  isLocalDev = false,
-  customerAccountPush: customerAccountPushFlag = false,
-  cliConfig,
-  verbose
-}) {
-  if (!process.env.NODE_ENV)
-    process.env.NODE_ENV = "development";
-  if (verbose)
-    setH2OVerbose();
-  if (!isH2Verbose())
-    muteDevLogs();
-  const root = appPath ?? process.cwd();
-  const cliCommandPromise = getCliCommand(root);
-  const backgroundPromise = getDevConfigInBackground(
-    root,
-    customerAccountPushFlag
-  );
-  const envPromise = backgroundPromise.then(
-    ({ fetchRemote, localVariables }) => getAllEnvironmentVariables({
-      root,
-      envBranch,
-      envHandle,
-      fetchRemote,
-      localVariables
-    })
-  );
-  if (debug && !inspectorPort) {
-    inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
-  }
-  const vite = await import('vite');
-  const fs = isLocalDev ? { allow: [root, fileURLToPath(new URL("../../../../", import.meta.url))] } : void 0;
-  const customLogger = vite.createLogger();
-  if (process.env.SHOPIFY_UNIT_TEST) {
-    customLogger.info = (msg) => collectLog("info", msg);
-    customLogger.warn = (msg) => collectLog("warn", msg);
-    customLogger.error = (msg) => collectLog("error", msg);
-  }
-  const viteServer = await vite.createServer({
-    root,
-    customLogger,
-    clearScreen: false,
-    server: { fs, host: host ? true : void 0 },
-    plugins: [
-      {
-        name: "hydrogen:cli",
-        configResolved(config) {
-          findHydrogenPlugin(config)?.api?.registerPluginOptions({
-            disableVirtualRoutes
-          });
-          findOxygenPlugin(config)?.api?.registerPluginOptions({
-            debug,
-            entry: ssrEntry,
-            envPromise: envPromise.then(({ allVariables: allVariables2 }) => allVariables2),
-            inspectorPort,
-            logRequestLine
-          });
-        },
-        configureServer: (viteDevServer) => {
-          if (customerAccountPushFlag) {
-            viteDevServer.middlewares.use((req, res, next) => {
-              const host2 = req.headers.host;
-              if (host2?.includes(TUNNEL_DOMAIN.ORIGINAL)) {
-                req.headers.host = host2.replace(
-                  TUNNEL_DOMAIN.ORIGINAL,
-                  TUNNEL_DOMAIN.REBRANDED
-                );
-              }
-              next();
-            });
-          }
-        }
-      }
-    ]
-  });
-  const h2Plugin = findHydrogenPlugin(viteServer.config);
-  if (!h2Plugin) {
-    await viteServer.close();
-    throw new AbortError(
-      "Hydrogen plugin not found.",
-      "Add `hydrogen()` plugin to your Vite config."
-    );
-  }
-  const h2PluginOptions = h2Plugin.api?.getPluginOptions?.();
-  const codegenProcess = useCodegen ? spawnCodegenProcess({
-    rootDirectory: root,
-    configFilePath: codegenConfigPath,
-    appDirectory: h2PluginOptions?.remixConfig?.appDirectory
-  }) : void 0;
-  process.on("unhandledRejection", (err) => {
-    console.log("Unhandled Rejection: ", err);
-  });
-  const publicPort = appPort ?? viteServer.config.server.port ?? DEFAULT_APP_PORT;
-  const [tunnel, cliCommand] = await Promise.all([
-    backgroundPromise.then(
-      ({ customerAccountPush, storefrontId }) => customerAccountPush ? startTunnelAndPushConfig(root, cliConfig, publicPort, storefrontId) : void 0
-    ),
-    cliCommandPromise,
-    viteServer.listen(publicPort)
-  ]);
-  const publicUrl = new URL(
-    viteServer.resolvedUrls.local[0] ?? viteServer.resolvedUrls.network[0]
-  );
-  const finalHost = tunnel?.host || publicUrl.toString() || publicUrl.origin;
-  enhanceH2Logs({
-    rootDirectory: root,
-    host: finalHost,
-    cliCommand
-  });
-  const { logInjectedVariables, allVariables } = await envPromise;
-  logInjectedVariables();
-  console.log("");
-  viteServer.printUrls();
-  viteServer.bindCLIShortcuts({ print: true });
-  console.log("\n");
-  const customSections = [];
-  if (!h2PluginOptions?.disableVirtualRoutes) {
-    customSections.push({ body: getUtilityBannerlines(finalHost) });
-  }
-  if (debug && inspectorPort) {
-    customSections.push({
-      body: { warn: getDebugBannerLine(inspectorPort) }
-    });
-  }
-  const { storefrontTitle } = await backgroundPromise;
-  renderSuccess({
-    body: [
-      `View ${storefrontTitle ? colors.cyan(storefrontTitle) : "Hydrogen"} app:`,
-      { link: { url: finalHost } }
-    ],
-    customSections
-  });
-  if (!disableVersionCheck) {
-    displayDevUpgradeNotice({ targetPath: root });
-  }
-  if (customerAccountPushFlag && isMockShop(allVariables)) {
-    notifyIssueWithTunnelAndMockShop(cliCommand);
-  }
-  return {
-    getUrl: () => finalHost,
-    async close() {
-      codegenProcess?.removeAllListeners("close");
-      codegenProcess?.kill("SIGINT");
-      await Promise.allSettled([viteServer.close(), tunnel?.cleanup?.()]);
-    }
-  };
-}
-
-export { DevVite as default, runViteDev };

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

@@ -1,47 +0,0 @@
-/**
- * A side bar component with Overlay that works without JavaScript.
- * @example
- * ```jsx
- * <Aside id="search-aside" heading="SEARCH">
- *  <input type="search" />
- *  ...
- * </Aside>
- * ```
- */
-export function Aside({
-  children,
-  heading,
-  id = 'aside',
-}: {
-  children?: React.ReactNode;
-  heading: React.ReactNode;
-  id?: string;
-}) {
-  return (
-    <div aria-modal className="overlay" id={id} role="dialog">
-      <button
-        className="close-outside"
-        onClick={() => {
-          history.go(-1);
-          window.location.hash = '';
-        }}
-      />
-      <aside>
-        <header>
-          <h3>{heading}</h3>
-          <CloseAside />
-        </header>
-        <main>{children}</main>
-      </aside>
-    </div>
-  );
-}
-
-function CloseAside() {
-  return (
-    /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
-    <a className="close" href="#" onChange={() => history.go(-1)}>
-      &times;
-    </a>
-  );
-}

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

@@ -1,11 +0,0 @@
-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,227 +0,0 @@
-import {useNonce} from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  useRouteError,
-  useLoaderData,
-  ScrollRestoration,
-  isRouteErrorResponse,
-  type ShouldRevalidateFunction,
-} from '@remix-run/react';
-import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css?url';
-import appStyles from './styles/app.css?url';
-import {Layout} from '~/components/Layout';
-
-/**
- * This is important to avoid re-fetching root queries on sub-navigations
- */
-export const shouldRevalidate: ShouldRevalidateFunction = ({
-  formMethod,
-  currentUrl,
-  nextUrl,
-}) => {
-  // revalidate when a mutation is performed e.g add to cart, login...
-  if (formMethod && formMethod !== 'GET') {
-    return true;
-  }
-
-  // revalidate when manually revalidating via useRevalidator
-  if (currentUrl.toString() === nextUrl.toString()) {
-    return true;
-  }
-
-  return false;
-};
-
-export function links() {
-  return [
-    {rel: 'stylesheet', href: resetStyles},
-    {rel: 'stylesheet', href: appStyles},
-    {
-      rel: 'preconnect',
-      href: 'https://cdn.shopify.com',
-    },
-    {
-      rel: 'preconnect',
-      href: 'https://shop.app',
-    },
-    {rel: 'icon', type: 'image/svg+xml', href: favicon},
-  ];
-}
-
-export async function loader({context}: LoaderFunctionArgs) {
-  const {storefront, customerAccount, cart} = context;
-  const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
-
-  const isLoggedInPromise = customerAccount.isLoggedIn();
-  const cartPromise = cart.get();
-
-  // defer the footer query (below the fold)
-  const footerPromise = storefront.query(FOOTER_QUERY, {
-    cache: storefront.CacheLong(),
-    variables: {
-      footerMenuHandle: 'footer', // Adjust to your footer menu handle
-    },
-  });
-
-  // await the header query (above the fold)
-  const headerPromise = storefront.query(HEADER_QUERY, {
-    cache: storefront.CacheLong(),
-    variables: {
-      headerMenuHandle: 'main-menu', // Adjust to your header menu handle
-    },
-  });
-
-  return defer(
-    {
-      cart: cartPromise,
-      footer: footerPromise,
-      header: await headerPromise,
-      isLoggedIn: isLoggedInPromise,
-      publicStoreDomain,
-    },
-    {
-      headers: {
-        'Set-Cookie': await context.session.commit(),
-      },
-    },
-  );
-}
-
-export default function App() {
-  const nonce = useNonce();
-  const data = useLoaderData<typeof loader>();
-
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Layout {...data}>
-          <Outlet />
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-      </body>
-    </html>
-  );
-}
-
-export function ErrorBoundary() {
-  const error = useRouteError();
-  const rootData = useLoaderData<typeof loader>();
-  const nonce = useNonce();
-  let errorMessage = 'Unknown error';
-  let errorStatus = 500;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error?.data?.message ?? error.data;
-    errorStatus = error.status;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  }
-
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Layout {...rootData}>
-          <div className="route-error">
-            <h1>Oops</h1>
-            <h2>{errorStatus}</h2>
-            {errorMessage && (
-              <fieldset>
-                <pre>{errorMessage}</pre>
-              </fieldset>
-            )}
-          </div>
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-      </body>
-    </html>
-  );
-}
-
-const MENU_FRAGMENT = `#graphql
-  fragment MenuItem on MenuItem {
-    id
-    resourceId
-    tags
-    title
-    type
-    url
-  }
-  fragment ChildMenuItem on MenuItem {
-    ...MenuItem
-  }
-  fragment ParentMenuItem on MenuItem {
-    ...MenuItem
-    items {
-      ...ChildMenuItem
-    }
-  }
-  fragment Menu on Menu {
-    id
-    items {
-      ...ParentMenuItem
-    }
-  }
-` as const;
-
-const HEADER_QUERY = `#graphql
-  fragment Shop on Shop {
-    id
-    name
-    description
-    primaryDomain {
-      url
-    }
-    brand {
-      logo {
-        image {
-          url
-        }
-      }
-    }
-  }
-  query Header(
-    $country: CountryCode
-    $headerMenuHandle: String!
-    $language: LanguageCode
-  ) @inContext(language: $language, country: $country) {
-    shop {
-      ...Shop
-    }
-    menu(handle: $headerMenuHandle) {
-      ...Menu
-    }
-  }
-  ${MENU_FRAGMENT}
-` as const;
-
-const FOOTER_QUERY = `#graphql
-  query Footer(
-    $country: CountryCode
-    $footerMenuHandle: String!
-    $language: LanguageCode
-  ) @inContext(language: $language, country: $country) {
-    menu(handle: $footerMenuHandle) {
-      ...Menu
-    }
-  }
-  ${MENU_FRAGMENT}
-` as const;

package/dist/generator-templates/starter/app/routes/pages.$handle.tsx

@@ -1,56 +0,0 @@
-import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
-
-export const meta: MetaFunction<typeof loader> = ({data}) => {
-  return [{title: `Hydrogen | ${data?.page.title ?? ''}`}];
-};
-
-export async function loader({params, context}: LoaderFunctionArgs) {
-  if (!params.handle) {
-    throw new Error('Missing page handle');
-  }
-
-  const {page} = await context.storefront.query(PAGE_QUERY, {
-    variables: {
-      handle: params.handle,
-    },
-  });
-
-  if (!page) {
-    throw new Response('Not Found', {status: 404});
-  }
-
-  return json({page});
-}
-
-export default function Page() {
-  const {page} = useLoaderData<typeof loader>();
-
-  return (
-    <div className="page">
-      <header>
-        <h1>{page.title}</h1>
-      </header>
-      <main dangerouslySetInnerHTML={{__html: page.body}} />
-    </div>
-  );
-}
-
-const PAGE_QUERY = `#graphql
-  query Page(
-    $language: LanguageCode,
-    $country: CountryCode,
-    $handle: String!
-  )
-  @inContext(language: $language, country: $country) {
-    page(handle: $handle) {
-      id
-      title
-      body
-      seo {
-        description
-        title
-      }
-    }
-  }
-` as const;

package/dist/lib/setups/i18n/mock-i18n-types.js

@@ -1 +0,0 @@
-

package/dist/lib/setups/i18n/templates/domains.js

@@ -1,14 +0,0 @@
-function getLocaleFromRequest(request) {
-  const defaultLocale = { language: "EN", country: "US" };
-  const supportedLocales = {
-    ES: "ES",
-    FR: "FR",
-    DE: "DE",
-    JP: "JA"
-  };
-  const url = new URL(request.url);
-  const domain = url.hostname.split(".").pop()?.toUpperCase();
-  return domain && supportedLocales[domain] ? { language: supportedLocales[domain], country: domain } : defaultLocale;
-}
-
-export { getLocaleFromRequest };

package/dist/lib/setups/i18n/templates/subdomains.js

@@ -1,14 +0,0 @@
-function getLocaleFromRequest(request) {
-  const defaultLocale = { language: "EN", country: "US" };
-  const supportedLocales = {
-    ES: "ES",
-    FR: "FR",
-    DE: "DE",
-    JP: "JA"
-  };
-  const url = new URL(request.url);
-  const firstSubdomain = url.hostname.split(".")[0]?.toUpperCase();
-  return supportedLocales[firstSubdomain] ? { language: supportedLocales[firstSubdomain], country: firstSubdomain } : defaultLocale;
-}
-
-export { getLocaleFromRequest };

package/dist/lib/setups/i18n/templates/subfolders.js

@@ -1,13 +0,0 @@
-function getLocaleFromRequest(request) {
-  const url = new URL(request.url);
-  const firstPathPart = url.pathname.split("/")[1]?.toUpperCase() ?? "";
-  let pathPrefix = "";
-  let [language, country] = ["EN", "US"];
-  if (/^[A-Z]{2}-[A-Z]{2}$/i.test(firstPathPart)) {
-    pathPrefix = "/" + firstPathPart;
-    [language, country] = firstPathPart.split("-");
-  }
-  return { language, country, pathPrefix };
-}
-
-export { getLocaleFromRequest };

package/dist/lib/setups/routes/templates/locale-check.js

@@ -1,9 +0,0 @@
-async function loader({ params, context }) {
-  const { language, country } = context.storefront.i18n;
-  if (params.locale && params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()) {
-    throw new Response(null, { status: 404 });
-  }
-  return null;
-}
-
-export { loader };

package/dist/virtual-routes/components/IconDiscord.jsx

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-const IconDiscord = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: 26,
-    height: 20,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M21.19 1.675A19.91 19.91 0 0 0 16.03 0c-.223.415-.482.973-.661 1.418a18.355 18.355 0 0 0-5.72 0A15.367 15.367 0 0 0 8.98 0a19.844 19.844 0 0 0-5.165 1.68C.55 6.776-.336 11.747.106 16.647c2.167 1.67 4.266 2.686 6.33 3.35.51-.724.964-1.495 1.356-2.306a13.149 13.149 0 0 1-2.135-1.073c.179-.137.354-.28.523-.428 4.116 1.989 8.588 1.989 12.655 0 .172.148.347.291.524.428a13.12 13.12 0 0 1-2.139 1.075c.392.81.844 1.582 1.356 2.306 2.066-.664 4.167-1.68 6.333-3.352.52-5.68-.887-10.606-3.718-14.973ZM8.353 13.635c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644.002 1.45-.991 2.642-2.249 2.642Zm8.311 0c-1.235 0-2.249-1.192-2.249-2.643 0-1.45.992-2.644 2.25-2.644 1.257 0 2.27 1.191 2.248 2.644 0 1.45-.991 2.642-2.249 2.642Z",
-        fill: "#5C5F62"
-      }
-    )
-  }
-);
-export {
-  IconDiscord
-};