@shopify/cli-hydrogen 6.1.0 → 7.0.0

package/dist/lib/request-events.js

@@ -1,14 +1,15 @@
+import path from 'node:path';
 import { EventEmitter } from 'node:events';
 import { ReadableStream } from 'node:stream/web';
 import { getGraphiQLUrl } from './graphiql-url.js';
-import { Response } from '@shopify/mini-oxygen';
+import { mapSourcePosition } from 'source-map-support';
 
 const H2O_BINDING_NAME = "H2O_LOG_EVENT";
-let ResponseConstructor = Response;
+let ResponseConstructor;
 function setConstructors(constructors) {
   ResponseConstructor = constructors.Response;
 }
-const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/debug-network"]);
+const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/subrequest-profiler"]);
 const EVENT_MAP = {
   request: "Request",
   subrequest: "Sub request"
@@ -16,9 +17,9 @@ const EVENT_MAP = {
 async function getRequestInfo(request) {
   const data = await request.json();
   return {
-    id: data.requestId ?? "",
+    ...data,
+    requestId: data.requestId ?? "",
     eventType: data.eventType || "unknown",
-    startTime: data.startTime,
     endTime: data.endTime || Date.now(),
     purpose: data.purpose === "prefetch" ? "(prefetch)" : "",
     cacheStatus: data.cacheStatus ?? "",
@@ -34,33 +35,66 @@ async function clearHistory(request) {
   eventHistory.length = 0;
   return createResponse();
 }
-async function logRequestEvent(request) {
-  const url = new URL(request.url);
-  if (DEV_ROUTES.has(url.pathname)) {
-    return createResponse();
-  }
-  const { eventType, purpose, graphql, ...data } = await getRequestInfo(request);
-  let graphiqlLink = "";
-  let description = request.url;
-  if (eventType === "subrequest") {
-    description = graphql?.query.match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ") || decodeURIComponent(url.search.slice(1));
-    if (graphql) {
-      graphiqlLink = getGraphiQLUrl({ graphql });
+function createLogRequestEvent(options) {
+  return async function logRequestEvent(request) {
+    const url = new URL(request.url);
+    if (DEV_ROUTES.has(url.pathname)) {
+      return createResponse();
+    }
+    const {
+      url: displayUrl,
+      displayName: displayNameData,
+      eventType,
+      purpose,
+      graphql,
+      stackInfo,
+      ...data
+    } = await getRequestInfo(request);
+    let graphiqlLink = "";
+    let descriptionUrl = request.url;
+    let displayName = displayNameData;
+    if (eventType === "subrequest") {
+      displayName = displayName || graphql?.query.match(/(query|mutation)\s+(\w+)/)?.[0]?.replace(/\s+/, " ");
+      descriptionUrl = displayUrl || request.url;
+      if (graphql) {
+        graphiqlLink = getGraphiQLUrl({ graphql });
+      }
+    }
+    let stackLine = null;
+    let stackLink = null;
+    if (stackInfo?.file) {
+      if (!path.isAbsolute(stackInfo.file) && options?.absoluteBundlePath) {
+        stackInfo.file = options.absoluteBundlePath;
+      }
+      const { source, line, column } = mapSourcePosition({
+        source: stackInfo.file,
+        line: stackInfo.line ?? 0,
+        column: stackInfo.column ?? 0
+      });
+      stackLine = `${source}:${line}:${column + 1}`;
+      stackLink = `vscode://${path.join("file", stackLine)}`;
+      stackLine = stackLine.split(path.sep + "app" + path.sep)[1] ?? stackLine;
+      if (stackInfo.func) {
+        stackLine = `${stackInfo.func.replace(/\d+$/, "")} (${stackLine})`;
+      }
     }
-  }
-  const event = {
-    event: EVENT_MAP[eventType] || eventType,
-    data: JSON.stringify({
-      ...data,
-      url: `${purpose} ${description}`.trim(),
-      graphiqlLink
-    })
+    const event = {
+      event: EVENT_MAP[eventType] || eventType,
+      data: JSON.stringify({
+        ...data,
+        displayName,
+        url: `${purpose} ${descriptionUrl}`.trim(),
+        graphiqlLink,
+        stackLine,
+        stackLink
+      })
+    };
+    eventHistory.push(event);
+    if (eventHistory.length > 100)
+      eventHistory.shift();
+    eventEmitter.emit("request", event);
+    return createResponse();
   };
-  eventHistory.push(event);
-  if (eventHistory.length > 100)
-    eventHistory.shift();
-  eventEmitter.emit("request", event);
-  return createResponse();
 }
 function streamRequestEvents(request) {
   const stream = new ReadableStream({
@@ -101,4 +135,4 @@ function handleDebugNetworkRequest(request) {
   return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
 }
 
-export { DEV_ROUTES, H2O_BINDING_NAME, handleDebugNetworkRequest, logRequestEvent, setConstructors };
+export { DEV_ROUTES, H2O_BINDING_NAME, createLogRequestEvent, handleDebugNetworkRequest, setConstructors };

package/dist/lib/setups/css/assets.js

@@ -1,7 +1,6 @@
 import { readFile, writeFile, fileExists } from '@shopify/cli-kit/node/fs';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { readAndParsePackageJson, writePackageJSON } from '@shopify/cli-kit/node/node-package-manager';
 import { GENERATOR_SETUP_ASSETS_SUB_DIRS, getAssetDir } from '../../build.js';
 
 const SETUP_CSS_STRATEGIES = GENERATOR_SETUP_ASSETS_SUB_DIRS;
@@ -41,49 +40,5 @@ async function canWriteFiles(assetMap, directory, force) {
   }
   return true;
 }
-const MANAGED_PACKAGE_JSON_KEYS = Object.freeze([
-  "dependencies",
-  "devDependencies",
-  "peerDependencies"
-]);
-async function mergePackageJson(feature, projectDir) {
-  const targetPkgJson = await readAndParsePackageJson(
-    joinPath(projectDir, "package.json")
-  );
-  const sourcePkgJson = await readAndParsePackageJson(
-    joinPath(getAssetDir(feature), "package.json")
-  );
-  delete sourcePkgJson.comment;
-  const unmanagedKeys = Object.keys(sourcePkgJson).filter(
-    (key) => !MANAGED_PACKAGE_JSON_KEYS.includes(key)
-  );
-  for (const key of unmanagedKeys) {
-    const sourceValue = sourcePkgJson[key];
-    const targetValue = targetPkgJson[key];
-    const newValue = Array.isArray(sourceValue) && Array.isArray(targetValue) ? [...targetValue, ...sourceValue] : typeof sourceValue === "object" && typeof targetValue === "object" ? { ...targetValue, ...sourceValue } : sourceValue;
-    targetPkgJson[key] = newValue;
-  }
-  const remixVersion = Object.entries(targetPkgJson.dependencies || {}).find(
-    ([dep]) => dep.startsWith("@remix-run/")
-  )?.[1];
-  for (const key of MANAGED_PACKAGE_JSON_KEYS) {
-    if (sourcePkgJson[key]) {
-      targetPkgJson[key] = [
-        .../* @__PURE__ */ new Set([
-          ...Object.keys(targetPkgJson[key] ?? {}),
-          ...Object.keys(sourcePkgJson[key] ?? {})
-        ])
-      ].sort().reduce((acc, dep) => {
-        let version = sourcePkgJson[key]?.[dep] ?? targetPkgJson[key]?.[dep];
-        if (dep.startsWith("@remix-run/") && remixVersion) {
-          version = remixVersion;
-        }
-        acc[dep] = version;
-        return acc;
-      }, {});
-    }
-  }
-  await writePackageJSON(projectDir, targetPkgJson);
-}
 
-export { SETUP_CSS_STRATEGIES, canWriteFiles, copyAssets, mergePackageJson };
+export { SETUP_CSS_STRATEGIES, canWriteFiles, copyAssets };

package/dist/lib/setups/css/css-modules.js

@@ -1,13 +1,14 @@
-import { mergePackageJson } from './assets.js';
+import { mergePackageJson } from '../../file.js';
 import { getCodeFormatOptions } from '../../format-code.js';
 import { injectCssBundlingLink } from './replacers.js';
+import { getAssetDir } from '../../build.js';
 
 async function setupCssModules({
   rootDirectory,
   appDirectory
 }) {
   const workPromise = Promise.all([
-    mergePackageJson("css-modules", rootDirectory),
+    mergePackageJson(getAssetDir("css-modules"), rootDirectory),
     getCodeFormatOptions(rootDirectory).then(
       (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
     )

package/dist/lib/setups/css/postcss.js

@@ -1,5 +1,7 @@
 import { outputInfo } from '@shopify/cli-kit/node/output';
-import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
+import { mergePackageJson } from '../../file.js';
+import { canWriteFiles, copyAssets } from './assets.js';
+import { getAssetDir } from '../../build.js';
 
 async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
   const assetMap = {
@@ -16,7 +18,7 @@ async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, f
     return;
   }
   const workPromise = Promise.all([
-    mergePackageJson("postcss", rootDirectory),
+    mergePackageJson(getAssetDir("postcss"), rootDirectory),
     copyAssets("postcss", assetMap, rootDirectory)
   ]);
   return {

package/dist/lib/setups/css/tailwind.js

@@ -1,8 +1,10 @@
 import { outputInfo } from '@shopify/cli-kit/node/output';
 import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
-import { canWriteFiles, mergePackageJson, copyAssets } from './assets.js';
+import { mergePackageJson } from '../../file.js';
+import { canWriteFiles, copyAssets } from './assets.js';
 import { getCodeFormatOptions } from '../../format-code.js';
 import { replaceRootLinks } from './replacers.js';
+import { getAssetDir } from '../../build.js';
 
 const tailwindCssPath = "styles/tailwind.css";
 async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
@@ -23,7 +25,7 @@ async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions },
     return;
   }
   const workPromise = Promise.all([
-    mergePackageJson("tailwind", rootDirectory),
+    mergePackageJson(getAssetDir("tailwind"), rootDirectory),
     copyAssets(
       "tailwind",
       assetMap,

package/dist/lib/setups/css/vanilla-extract.js

@@ -1,13 +1,14 @@
-import { mergePackageJson } from './assets.js';
+import { mergePackageJson } from '../../file.js';
 import { getCodeFormatOptions } from '../../format-code.js';
 import { injectCssBundlingLink } from './replacers.js';
+import { getAssetDir } from '../../build.js';
 
 async function setupVanillaExtract({
   rootDirectory,
   appDirectory
 }) {
   const workPromise = Promise.all([
-    mergePackageJson("vanilla-extract", rootDirectory),
+    mergePackageJson(getAssetDir("vanilla-extract"), rootDirectory),
     getCodeFormatOptions(rootDirectory).then(
       (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
     )

package/dist/lib/setups/i18n/replacers.test.js

@@ -41,26 +41,29 @@ describe("i18n replacers", () => {
       const newContent = await readFile(joinPath(tmpDir, remixDts));
       expect(() => checkTypes(newContent)).not.toThrow();
       expect(newContent).toMatchInlineSnapshot(`
-        "/// <reference types=\\"@remix-run/dev\\" />
-        /// <reference types=\\"@shopify/remix-oxygen\\" />
-        /// <reference types=\\"@shopify/oxygen-workers-types\\" />
+        "/// <reference types="@remix-run/dev" />
+        /// <reference types="@shopify/remix-oxygen" />
+        /// <reference types="@shopify/oxygen-workers-types" />
 
         // Enhance TypeScript's built-in typings.
-        import \\"@total-typescript/ts-reset\\";
+        import "@total-typescript/ts-reset";
 
-        import type { Storefront, HydrogenCart } from \\"@shopify/hydrogen\\";
+        import type {
+          Storefront,
+          CustomerClient,
+          HydrogenCart,
+        } from "@shopify/hydrogen";
         import type {
           LanguageCode,
           CountryCode,
-        } from \\"@shopify/hydrogen/storefront-api-types\\";
-        import type { CustomerAccessToken } from \\"@shopify/hydrogen/storefront-api-types\\";
-        import type { HydrogenSession } from \\"./server\\";
+        } from "@shopify/hydrogen/storefront-api-types";
+        import type { AppSession } from "~/lib/session";
 
         declare global {
           /**
            * A global \`process\` object is only available during build to access NODE_ENV.
            */
-          const process: { env: { NODE_ENV: \\"production\\" | \\"development\\" } };
+          const process: { env: { NODE_ENV: "production" | "development" } };
 
           /**
            * Declare expected Env parameter in fetch handler.
@@ -81,7 +84,7 @@ describe("i18n replacers", () => {
           type I18nLocale = { language: LanguageCode; country: CountryCode };
         }
 
-        declare module \\"@shopify/remix-oxygen\\" {
+        declare module "@shopify/remix-oxygen" {
           /**
            * Declare local additions to the Remix loader context.
            */
@@ -89,15 +92,9 @@ describe("i18n replacers", () => {
             env: Env;
             cart: HydrogenCart;
             storefront: Storefront<I18nLocale>;
-            session: HydrogenSession;
-            waitUntil: ExecutionContext[\\"waitUntil\\"];
-          }
-
-          /**
-           * Declare the data we expect to access via \`context.session\`.
-           */
-          export interface SessionData {
-            customerAccessToken: CustomerAccessToken;
+            customerAccount: CustomerClient;
+            session: AppSession;
+            waitUntil: ExecutionContext["waitUntil"];
           }
         }
         "
@@ -109,7 +106,7 @@ describe("i18n replacers", () => {
       const skeletonDir = getSkeletonSourceDir();
       await writeFile(
         joinPath(tmpDir, serverTs),
-        // Remove the part that is not needed for this test (HydrogenSession, Cart query, etc);
+        // Remove the part that is not needed for this test (AppSession, Cart query, etc);
         (await readFile(joinPath(skeletonDir, serverTs))).replace(/^};$.*/ms, "};")
       );
       await replaceServerI18n(
@@ -124,21 +121,22 @@ describe("i18n replacers", () => {
       expect(() => checkTypes(newContent)).not.toThrow();
       expect(newContent).toMatchInlineSnapshot(`
         "// Virtual entry point for the app
-        import * as remixBuild from \\"@remix-run/dev/server-build\\";
+        import * as remixBuild from "@remix-run/dev/server-build";
         import {
           cartGetIdDefault,
           cartSetIdDefault,
           createCartHandler,
           createStorefrontClient,
           storefrontRedirect,
-        } from \\"@shopify/hydrogen\\";
+          createCustomerAccountClient,
+        } from "@shopify/hydrogen";
         import {
           createRequestHandler,
           getStorefrontHeaders,
-          createCookieSessionStorage,
-          type SessionStorage,
-          type Session,
-        } from \\"@shopify/remix-oxygen\\";
+          type AppLoadContext,
+        } from "@shopify/remix-oxygen";
+        import { AppSession } from "~/lib/session";
+        import { CART_QUERY_FRAGMENT } from "~/lib/fragments";
 
         /**
          * Export a fetch handler in module format.
@@ -154,13 +152,13 @@ describe("i18n replacers", () => {
                * Open a cache instance in the worker and a custom session instance.
                */
               if (!env?.SESSION_SECRET) {
-                throw new Error(\\"SESSION_SECRET environment variable is not set\\");
+                throw new Error("SESSION_SECRET environment variable is not set");
               }
 
               const waitUntil = executionContext.waitUntil.bind(executionContext);
               const [cache, session] = await Promise.all([
-                caches.open(\\"hydrogen\\"),
-                HydrogenSession.init(request, [env.SESSION_SECRET]),
+                caches.open("hydrogen"),
+                AppSession.init(request, [env.SESSION_SECRET]),
               ]);
 
               /**
@@ -177,6 +175,17 @@ describe("i18n replacers", () => {
                 storefrontHeaders: getStorefrontHeaders(request),
               });
 
+              /**
+               * Create a client for Customer Account API.
+               */
+              const customerAccount = createCustomerAccountClient({
+                waitUntil,
+                request,
+                session,
+                customerAccountId: env.PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID,
+                customerAccountUrl: env.PUBLIC_CUSTOMER_ACCOUNT_API_URL,
+              });
+
               /*
                * Create a cart handler that will be used to
                * create and update the cart in the session.
@@ -195,7 +204,14 @@ describe("i18n replacers", () => {
               const handleRequest = createRequestHandler({
                 build: remixBuild,
                 mode: process.env.NODE_ENV,
-                getLoadContext: () => ({ session, storefront, cart, env, waitUntil }),
+                getLoadContext: (): AppLoadContext => ({
+                  session,
+                  storefront,
+                  customerAccount,
+                  cart,
+                  env,
+                  waitUntil,
+                }),
               });
 
               const response = await handleRequest(request);
@@ -213,23 +229,23 @@ describe("i18n replacers", () => {
             } catch (error) {
               // eslint-disable-next-line no-console
               console.error(error);
-              return new Response(\\"An unexpected error occurred\\", { status: 500 });
+              return new Response("An unexpected error occurred", { status: 500 });
             }
           },
         };
 
         function getLocaleFromRequest(request: Request): I18nLocale {
-          const defaultLocale: I18nLocale = { language: \\"EN\\", country: \\"US\\" };
+          const defaultLocale: I18nLocale = { language: "EN", country: "US" };
           const supportedLocales = {
-            ES: \\"ES\\",
-            FR: \\"FR\\",
-            DE: \\"DE\\",
-            JP: \\"JA\\",
-          } as Record<I18nLocale[\\"country\\"], I18nLocale[\\"language\\"]>;
+            ES: "ES",
+            FR: "FR",
+            DE: "DE",
+            JP: "JA",
+          } as Record<I18nLocale["country"], I18nLocale["language"]>;
 
           const url = new URL(request.url);
           const domain = url.hostname
-            .split(\\".\\")
+            .split(".")
             .pop()
             ?.toUpperCase() as keyof typeof supportedLocales;
 

package/dist/lib/template-diff.js

@@ -0,0 +1,89 @@
+import { rmdirSync } from 'node:fs';
+import { temporaryDirectory } from 'tempy';
+import { createSymlink, copy, remove } from 'fs-extra/esm';
+import { copyFile, removeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
+import colors from '@shopify/cli-kit/node/colors';
+import { getRepoNodeModules, getStarterDir } from './build.js';
+import { mergePackageJson } from './file.js';
+
+async function prepareDiffDirectory(diffDirectory, watch) {
+  const targetDirectory = temporaryDirectory({ prefix: "tmp-hydrogen-diff-" });
+  process.on("exit", () => rmdirSync(targetDirectory, { recursive: true }));
+  console.info(
+    `
+-- Applying diff to starter template in
+${colors.dim(
+      targetDirectory
+    )}
+`
+  );
+  await applyTemplateDiff(targetDirectory, diffDirectory);
+  await createSymlink(
+    await getRepoNodeModules(),
+    joinPath(targetDirectory, "node_modules")
+  );
+  if (watch) {
+    const pw = await import('@parcel/watcher').catch((error) => {
+      console.log("Could not watch for file changes.", error);
+    });
+    pw?.subscribe(
+      targetDirectory,
+      (error, events) => {
+        if (error) {
+          console.error(error);
+          return;
+        }
+        events.map((event) => {
+          return copyFile(
+            event.path,
+            joinPath(diffDirectory, relativePath(targetDirectory, event.path))
+          );
+        });
+      },
+      { ignore: ["!*.generated.d.ts"] }
+    );
+    pw?.subscribe(
+      diffDirectory,
+      async (error, events) => {
+        if (error) {
+          console.error(error);
+          return;
+        }
+        await events.map((event) => {
+          const targetFile = joinPath(
+            targetDirectory,
+            relativePath(diffDirectory, event.path)
+          );
+          return event.type === "delete" ? removeFile(targetFile).catch(() => {
+          }) : copyFile(event.path, targetFile);
+        });
+      },
+      { ignore: ["*.generated.d.ts", "package.json", "tsconfig.json"] }
+    );
+  }
+  return targetDirectory;
+}
+async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = getStarterDir()) {
+  const createFilter = (re) => (filepath) => !re.test(relativePath(templateDir, filepath));
+  await copy(templateDir, targetDirectory, {
+    filter: createFilter(/[\/\\](dist|node_modules|\.cache)(\/|\\|$)/i)
+  });
+  await copy(diffDirectory, targetDirectory, {
+    filter: createFilter(
+      /[\/\\](dist|node_modules|\.cache|package\.json|tsconfig\.json)(\/|\\|$)/i
+    )
+  });
+  await mergePackageJson(diffDirectory, targetDirectory, {
+    ignoredKeys: ["scripts"]
+  });
+}
+async function copyDiffBuild(targetDirectory, diffDirectory) {
+  const targetDist = joinPath(diffDirectory, "dist");
+  await remove(targetDist);
+  await copy(joinPath(targetDirectory, "dist"), targetDist, {
+    overwrite: true
+  });
+}
+
+export { applyTemplateDiff, copyDiffBuild, prepareDiffDirectory };

package/dist/lib/template-downloader.js

@@ -42,7 +42,7 @@ async function downloadTarball(url, storageDir, signal) {
       strip: 1,
       filter: (name) => {
         name = name.replace(storageDir, "");
-        return !name.startsWith(path.normalize("/templates/")) || name.startsWith(path.normalize("/templates/skeleton/"));
+        return !name.startsWith(path.normalize("/templates/")) && !name.startsWith(path.normalize("/examples/"));
       }
     })
   );
@@ -64,7 +64,8 @@ async function getLatestTemplates({
     }
     return {
       version,
-      templatesDir: path.join(templateStorageVersionPath, "templates")
+      templatesDir: path.join(templateStorageVersionPath, "templates"),
+      examplesDir: path.join(templateStorageVersionPath, "examples")
     };
   } catch (e) {
     const error = e;

package/dist/lib/transpile/project.js

@@ -102,7 +102,7 @@ async function transpileProject(projectDir, keepTypes = true) {
           delete pkgJson.devDependencies[key];
         }
       }
-      const codegenFlag = /\s*--codegen(-unstable)?/;
+      const codegenFlag = /\s*--codegen/;
       if (pkgJson.scripts?.dev) {
         pkgJson.scripts.dev = pkgJson.scripts.dev.replace(codegenFlag, "");
       }