@shopify/cli-hydrogen 7.1.0 → 7.1.2

package/dist/lib/template-diff.js

@@ -3,6 +3,7 @@ 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 { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getRepoNodeModules, getStarterDir } from './build.js';
 import { mergePackageJson } from './file.js';
@@ -65,35 +66,49 @@ ${colors.dim(
   return targetDirectory;
 }
 async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir = getStarterDir()) {
-  const createFilter = (re) => (filepath) => !re.test(relativePath(templateDir, filepath));
+  const pkgJson = await readAndParsePackageJson(
+    joinPath(diffDirectory, "package.json")
+  );
+  const createFilter = (re, skipFiles) => (filepath) => {
+    const filename = relativePath(templateDir, filepath);
+    return !re.test(filename) && !skipFiles?.includes(filename);
+  };
   await copy(templateDir, targetDirectory, {
     filter: createFilter(
-      /(^|\/|\\)(dist|node_modules|\.cache|CHANGELOG\.md)(\/|\\|$)/i
+      /(^|\/|\\)(dist|node_modules|\.cache|.turbo|CHANGELOG\.md)(\/|\\|$)/i,
+      pkgJson["h2:diff"]?.["skip-files"] || []
     )
   });
   await copy(diffDirectory, targetDirectory, {
     filter: createFilter(
-      /(^|\/|\\)(dist|node_modules|\.cache|package\.json|tsconfig\.json)(\/|\\|$)/i
+      /(^|\/|\\)(dist|node_modules|\.cache|.turbo|package\.json|tsconfig\.json)(\/|\\|$)/i
     )
   });
   await mergePackageJson(diffDirectory, targetDirectory, {
-    onResult: (pkgJson) => {
+    ignoredKeys: ["h2:diff"],
+    onResult: (pkgJson2) => {
       for (const key of ["build", "dev"]) {
-        const scriptLine = pkgJson.scripts?.[key];
-        if (pkgJson.scripts?.[key] && typeof scriptLine === "string") {
-          pkgJson.scripts[key] = scriptLine.replace(/\s+--diff/, "");
+        const scriptLine = pkgJson2.scripts?.[key];
+        if (pkgJson2.scripts?.[key] && typeof scriptLine === "string") {
+          pkgJson2.scripts[key] = scriptLine.replace(/\s+--diff/, "");
         }
       }
-      return pkgJson;
+      return pkgJson2;
     }
   });
 }
 async function copyDiffBuild(targetDirectory, diffDirectory) {
   const targetDist = joinPath(diffDirectory, "dist");
   await remove(targetDist);
-  await copy(joinPath(targetDirectory, "dist"), targetDist, {
-    overwrite: true
-  });
+  await Promise.all([
+    copy(joinPath(targetDirectory, "dist"), targetDist, {
+      overwrite: true
+    }),
+    copyFile(
+      joinPath(targetDirectory, ".env"),
+      joinPath(diffDirectory, ".env")
+    )
+  ]);
 }
 
 export { applyTemplateDiff, copyDiffBuild, prepareDiffDirectory };

package/dist/lib/template-downloader.js

@@ -1,11 +1,12 @@
-import path from 'path';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { pipeline } from 'stream/promises';
 import gunzipMaybe from 'gunzip-maybe';
 import { extract } from 'tar-fs';
 import { fetch } from '@shopify/cli-kit/node/http';
 import { fileExists, mkdir } from '@shopify/cli-kit/node/fs';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { fileURLToPath } from 'url';
+import { getSkeletonSourceDir } from './build.js';
 
 const REPO_RELEASES_URL = `https://api.github.com/repos/shopify/hydrogen/releases/latest`;
 const getTryMessage = (status) => status === 403 ? `If you are using a VPN, WARP, or similar service, consider disabling it momentarily.` : void 0;
@@ -50,6 +51,14 @@ async function downloadTarball(url, storageDir, signal) {
 async function getLatestTemplates({
   signal
 } = {}) {
+  if (process.env.LOCAL_DEV) {
+    const templatesDir = path.dirname(getSkeletonSourceDir());
+    return {
+      version: "local",
+      templatesDir,
+      examplesDir: path.resolve(templatesDir, "..", "examples")
+    };
+  }
   try {
     const { version, url } = await getLatestReleaseDownloadUrl(signal);
     const templateStoragePath = fileURLToPath(

package/dist/lib/vite/hydrogen-middleware.js

@@ -0,0 +1,82 @@
+import { normalizePath } from 'vite';
+import path from 'node:path';
+import { createRequire } from 'node:module';
+import { createFileReadStream } from '@shopify/cli-kit/node/fs';
+import { setConstructors, handleDebugNetworkRequest } from '../request-events.js';
+import { SUBREQUEST_PROFILER_ENDPOINT } from '../mini-oxygen/common.js';
+import { toWeb, pipeFromWeb } from './utils.js';
+import { addVirtualRoutes } from '../virtual-routes.js';
+
+function setupRemixDevServerHooks(viteUrl) {
+  globalThis["__remix_devServerHooks"] = {
+    getCriticalCss: (...args) => fetch(new URL("/__vite_critical_css", viteUrl), {
+      method: "POST",
+      body: JSON.stringify(args)
+    }).then((res) => res.json())
+  };
+}
+function setupHydrogenMiddleware(viteDevServer, options) {
+  viteDevServer.middlewares.use(
+    "/__vite_critical_css",
+    function h2HandleCriticalCss(req, res) {
+      toWeb(req).json().then(async (args) => {
+        const result = await globalThis["__remix_devServerHooks"]?.getCriticalCss?.(...args);
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify(result ?? ""));
+      });
+    }
+  );
+  if (options.disableVirtualRoutes)
+    return;
+  addVirtualRoutesToRemix(viteDevServer);
+  setConstructors({ Response: globalThis.Response });
+  viteDevServer.middlewares.use(
+    SUBREQUEST_PROFILER_ENDPOINT,
+    function h2HandleSubrequestProfilerEvent(req, res) {
+      const webResponse = handleDebugNetworkRequest(toWeb(req));
+      pipeFromWeb(webResponse, res);
+    }
+  );
+  viteDevServer.middlewares.use(
+    "/graphiql/customer-account.schema.json",
+    function h2HandleGraphiQLCustomerSchema(req, res) {
+      const require2 = createRequire(import.meta.url);
+      const filePath = require2.resolve(
+        "@shopify/hydrogen/customer-account.schema.json"
+      );
+      res.writeHead(200, { "Content-Type": "application/json" });
+      createFileReadStream(filePath).pipe(res);
+    }
+  );
+}
+let virtualRoutesAdded = false;
+async function addVirtualRoutesToRemix(viteDevServer) {
+  if (virtualRoutesAdded)
+    return;
+  const appDirectory = await reloadRemixVirtualRoutes(viteDevServer.config);
+  viteDevServer.watcher.on("all", (eventName, filepath) => {
+    const appFileAddedOrRemoved = (eventName === "add" || eventName === "unlink") && normalizePath(filepath).startsWith(normalizePath(appDirectory));
+    const viteConfigChanged = eventName === "change" && normalizePath(filepath) === normalizePath(viteDevServer.config.configFile ?? "");
+    if (appFileAddedOrRemoved || viteConfigChanged) {
+      setTimeout(() => reloadRemixVirtualRoutes(viteDevServer.config), 100);
+    }
+  });
+  virtualRoutesAdded = true;
+}
+async function reloadRemixVirtualRoutes(config) {
+  const remixPluginContext = config.__remixPluginContext;
+  remixPluginContext.remixConfig = { ...remixPluginContext.remixConfig };
+  remixPluginContext.remixConfig.routes = {
+    ...remixPluginContext.remixConfig.routes
+  };
+  await addVirtualRoutes(remixPluginContext.remixConfig).catch((error) => {
+    console.debug(
+      "Could not add virtual routes: " + (error?.stack ?? error?.message ?? error)
+    );
+  });
+  Object.freeze(remixPluginContext.remixConfig.routes);
+  Object.freeze(remixPluginContext.remixConfig);
+  return remixPluginContext?.remixConfig?.appDirectory ?? path.join(config.root, "app");
+}
+
+export { setupHydrogenMiddleware, setupRemixDevServerHooks };

package/dist/lib/vite/mini-oxygen.js

@@ -0,0 +1,152 @@
+import { fetchModule } from 'vite';
+import { fileURLToPath } from 'node:url';
+import crypto from 'node:crypto';
+import { Miniflare, NoOpLog } from 'miniflare';
+import { OXYGEN_HEADERS_MAP, logRequestLine } from '../mini-oxygen/common.js';
+import { PRIVATE_WORKERD_INSPECTOR_PORT, OXYGEN_WORKERD_COMPAT_PARAMS } from '../mini-oxygen/workerd.js';
+import { findPort } from '../find-port.js';
+import { createInspectorConnector } from '../mini-oxygen/workerd-inspector.js';
+import { getHmrUrl, toURL, toWeb, pipeFromWeb } from './utils.js';
+
+const scriptPath = fileURLToPath(new URL("./worker-entry.js", import.meta.url));
+const FETCH_MODULE_PATHNAME = "/__vite_fetch_module";
+const WARMUP_PATHNAME = "/__vite_warmup";
+const oxygenHeadersMap = Object.values(OXYGEN_HEADERS_MAP).reduce(
+  (acc, item) => {
+    acc[item.name] = item.defaultValue;
+    return acc;
+  },
+  {}
+);
+async function startMiniOxygenRuntime({
+  viteDevServer,
+  env,
+  services,
+  debug = false,
+  inspectorPort,
+  workerEntryFile,
+  setupScripts
+}) {
+  const [publicInspectorPort, privateInspectorPort] = await Promise.all([
+    findPort(inspectorPort),
+    findPort(PRIVATE_WORKERD_INSPECTOR_PORT)
+  ]);
+  const mf = new Miniflare({
+    cf: false,
+    verbose: false,
+    log: new NoOpLog(),
+    inspectorPort: privateInspectorPort,
+    handleRuntimeStdio(stdout, stderr) {
+      stdout.destroy();
+      stderr.destroy();
+    },
+    workers: [
+      {
+        name: "oxygen",
+        modulesRoot: "/",
+        modules: [{ type: "ESModule", path: scriptPath }],
+        ...OXYGEN_WORKERD_COMPAT_PARAMS,
+        serviceBindings: { ...services },
+        bindings: {
+          ...env,
+          __VITE_ROOT: viteDevServer.config.root,
+          __VITE_RUNTIME_EXECUTE_URL: workerEntryFile,
+          __VITE_FETCH_MODULE_PATHNAME: FETCH_MODULE_PATHNAME,
+          __VITE_HMR_URL: getHmrUrl(viteDevServer),
+          __VITE_WARMUP_PATHNAME: WARMUP_PATHNAME
+        },
+        unsafeEvalBinding: "__VITE_UNSAFE_EVAL",
+        wrappedBindings: {
+          __VITE_SETUP_ENV: "setup-environment"
+        }
+      },
+      {
+        name: "setup-environment",
+        modules: true,
+        scriptPath,
+        script: `
+          const setupScripts = [${setupScripts ?? ""}];
+          export default (env) => (request) => {
+            const viteUrl = new URL(request.url).origin;
+            setupScripts.forEach((setup) => setup?.(viteUrl));
+            setupScripts.length = 0;
+          }`
+      }
+    ]
+  });
+  const warmupWorkerdCache = () => {
+    let viteUrl = viteDevServer.resolvedUrls?.local[0] ?? viteDevServer.resolvedUrls?.network[0];
+    if (!viteUrl) {
+      const address = viteDevServer.httpServer?.address?.();
+      viteUrl = address && typeof address !== "string" ? `http://localhost:${address.port}` : address ?? void 0;
+    }
+    if (viteUrl) {
+      mf.dispatchFetch(new URL(WARMUP_PATHNAME, viteUrl)).catch(() => {
+      });
+    }
+  };
+  viteDevServer.httpServer?.listening ? warmupWorkerdCache() : viteDevServer.httpServer?.once("listening", warmupWorkerdCache);
+  mf.ready.then(() => {
+    const reconnect = createInspectorConnector({
+      debug,
+      sourceMapPath: "",
+      absoluteBundlePath: "",
+      privateInspectorPort,
+      publicInspectorPort
+    });
+    return reconnect();
+  });
+  return {
+    ready: mf.ready,
+    publicInspectorPort,
+    dispatch: (webRequest) => mf.dispatchFetch(webRequest),
+    async dispose() {
+      await mf.dispose();
+    }
+  };
+}
+function setupOxygenMiddleware(viteDevServer, dispatchFetch) {
+  viteDevServer.middlewares.use(
+    FETCH_MODULE_PATHNAME,
+    function o2HandleModuleFetch(req, res) {
+      const url = toURL(req);
+      const id = url.searchParams.get("id");
+      const importer = url.searchParams.get("importer") ?? void 0;
+      if (id) {
+        res.setHeader("cache-control", "no-store");
+        res.setHeader("content-type", "application/json");
+        fetchModule(viteDevServer, id, importer).then((ssrModule) => res.end(JSON.stringify(ssrModule))).catch((error) => {
+          console.error("Error during module fetch:", error);
+          res.writeHead(500, { "Content-Type": "text/plain" });
+          res.end("Internal server error");
+        });
+      } else {
+        res.statusCode = 400;
+        res.writeHead(400, { "Content-Type": "text/plain" });
+        res.end("Invalid request");
+      }
+    }
+  );
+  viteDevServer.middlewares.use(function o2HandleWorkerRequest(req, res) {
+    if (!req.headers.host)
+      throw new Error("Missing host header");
+    const webRequest = toWeb(req, {
+      "request-id": crypto.randomUUID(),
+      ...oxygenHeadersMap
+    });
+    const startTimeMs = Date.now();
+    dispatchFetch(webRequest).then((webResponse) => {
+      pipeFromWeb(webResponse, res);
+      logRequestLine(webRequest, {
+        responseStatus: webResponse.status,
+        durationMs: Date.now() - startTimeMs
+      });
+    }).catch((error) => {
+      console.error("Error during evaluation:", error);
+      res.writeHead(500);
+      res.end();
+    });
+  });
+}
+
+export { setupOxygenMiddleware, startMiniOxygenRuntime };

package/dist/lib/vite/plugins.d.ts

@@ -0,0 +1,27 @@
+import { Plugin } from 'vite';
+
+type HydrogenPluginOptions = {
+    disableVirtualRoutes?: boolean;
+};
+type OxygenPluginOptions = {
+    ssrEntry?: string;
+    debug?: boolean;
+    inspectorPort?: number;
+    env?: Record<string, any>;
+};
+
+/**
+ * Enables Hydrogen utilities for local development
+ * such as GraphiQL, Subrequest Profiler, etc.
+ * It must be used in combination with the `oxygen` plugin and Hydrogen CLI.
+ * @experimental
+ */
+declare function hydrogen(pluginOptions?: HydrogenPluginOptions): Plugin[];
+/**
+ * Runs backend code in an Oxygen worker instead of Node.js during development.
+ * It must be placed after `hydrogen` but before `remix` in the Vite plugins list.
+ * @experimental
+ */
+declare function oxygen(pluginOptions?: OxygenPluginOptions): Plugin[];
+
+export { hydrogen, oxygen };

package/dist/lib/vite/plugins.js

@@ -0,0 +1,139 @@
+import path from 'node:path';
+import { setupRemixDevServerHooks, setupHydrogenMiddleware } from './hydrogen-middleware.js';
+import { startMiniOxygenRuntime, setupOxygenMiddleware } from './mini-oxygen.js';
+import { setH2OPluginContext, getH2OPluginContext, DEFAULT_SSR_ENTRY } from './shared.js';
+import { H2O_BINDING_NAME, createLogRequestEvent } from '../request-events.js';
+
+function hydrogen(pluginOptions = {}) {
+  const isRemixChildCompiler = (config) => !config.plugins?.some((plugin) => plugin.name === "remix");
+  return [
+    {
+      name: "hydrogen:main",
+      config(config) {
+        return {
+          ssr: {
+            optimizeDeps: {
+              // Add CJS dependencies that break code in workerd
+              // with errors like "require/module/exports is not defined":
+              include: [
+                // React deps:
+                "react",
+                "react/jsx-runtime",
+                "react/jsx-dev-runtime",
+                "react-dom",
+                "react-dom/server",
+                // Remix deps:
+                "set-cookie-parser",
+                "cookie",
+                // Hydrogen deps:
+                "content-security-policy-builder"
+              ]
+            }
+          },
+          // Pass the setup functions to the Oxygen runtime.
+          ...setH2OPluginContext({
+            setupScripts: [setupRemixDevServerHooks],
+            shouldStartRuntime: (config2) => !isRemixChildCompiler(config2),
+            services: {
+              [H2O_BINDING_NAME]: createLogRequestEvent({
+                transformLocation: (partialLocation) => path.join(config.root ?? process.cwd(), partialLocation)
+              })
+            }
+          })
+        };
+      },
+      configureServer(viteDevServer) {
+        if (isRemixChildCompiler(viteDevServer.config))
+          return;
+        const { cliOptions } = getH2OPluginContext(viteDevServer.config) || {};
+        return () => {
+          setupHydrogenMiddleware(viteDevServer, {
+            ...pluginOptions,
+            ...cliOptions
+          });
+        };
+      }
+    }
+  ];
+}
+function oxygen(pluginOptions = {}) {
+  let resolvedConfig;
+  let absoluteWorkerEntryFile;
+  return [
+    {
+      name: "oxygen:runtime",
+      config(config, env) {
+        return {
+          appType: "custom",
+          resolve: {
+            conditions: ["worker", "workerd"]
+          },
+          ssr: {
+            noExternal: true,
+            target: "webworker"
+          },
+          // When building, the CLI will set the `ssr` option to `true`
+          // if no --entry flag is passed for the default SSR entry file.
+          // Replace it here with a default value.
+          ...env.isSsrBuild && config.build?.ssr && {
+            build: {
+              ssr: config.build?.ssr === true ? (
+                // No --entry flag passed by the user, use the
+                // option passed to the plugin or the default value
+                pluginOptions.ssrEntry ?? DEFAULT_SSR_ENTRY
+              ) : (
+                // --entry flag passed by the user, keep it
+                config.build?.ssr
+              )
+            }
+          }
+        };
+      },
+      configureServer(viteDevServer) {
+        resolvedConfig = viteDevServer.config;
+        const { shouldStartRuntime, cliOptions, setupScripts, services } = getH2OPluginContext(resolvedConfig) || {};
+        if (shouldStartRuntime && !shouldStartRuntime(resolvedConfig))
+          return;
+        const workerEntryFile = cliOptions?.ssrEntry ?? pluginOptions.ssrEntry ?? DEFAULT_SSR_ENTRY;
+        absoluteWorkerEntryFile = path.isAbsolute(workerEntryFile) ? workerEntryFile : path.resolve(viteDevServer.config.root, workerEntryFile);
+        const envPromise = cliOptions?.envPromise ?? Promise.resolve();
+        let miniOxygen;
+        const miniOxygenPromise = envPromise.then((remoteEnv) => {
+          return startMiniOxygenRuntime({
+            viteDevServer,
+            workerEntryFile,
+            setupScripts,
+            services,
+            env: { ...remoteEnv, ...pluginOptions.env },
+            debug: cliOptions?.debug ?? pluginOptions.debug ?? false,
+            inspectorPort: cliOptions?.inspectorPort ?? pluginOptions.inspectorPort ?? 9229
+          });
+        });
+        process.once("SIGTERM", async () => {
+          try {
+            await miniOxygen?.dispose();
+          } finally {
+            process.exit();
+          }
+        });
+        return () => {
+          setupOxygenMiddleware(viteDevServer, async (request) => {
+            miniOxygen ??= await miniOxygenPromise;
+            return miniOxygen.dispatch(request);
+          });
+        };
+      },
+      transform(code, id, options) {
+        if (resolvedConfig?.command === "serve" && resolvedConfig?.server?.hmr !== false && options?.ssr && (id === absoluteWorkerEntryFile || id === absoluteWorkerEntryFile + path.extname(id))) {
+          return {
+            // Accept HMR in server entry module to avoid full-page refresh in the browser.
+            // Note: appending code at the end should not break the source map.
+            code: code + "\nif (import.meta.hot) import.meta.hot.accept();"
+          };
+        }
+      }
+    }
+  ];
+}
+
+export { hydrogen, oxygen };

package/dist/lib/vite/shared.js

@@ -0,0 +1,10 @@
+const DEFAULT_SSR_ENTRY = "./server";
+const H2O_CONTEXT_KEY = "__h2oPluginContext";
+function getH2OPluginContext(config) {
+  return config?.[H2O_CONTEXT_KEY];
+}
+function setH2OPluginContext(options) {
+  return { [H2O_CONTEXT_KEY]: options };
+}
+
+export { DEFAULT_SSR_ENTRY, getH2OPluginContext, setH2OPluginContext };

package/dist/lib/vite/utils.js

@@ -0,0 +1,55 @@
+import path from 'node:path';
+import { Readable } from 'node:stream';
+import { Request } from 'miniflare';
+
+function toURL(req = "/", origin) {
+  const isRequest = typeof req !== "string";
+  const pathname = (isRequest ? req.url : req) || "/";
+  return new URL(
+    pathname,
+    origin || isRequest && req.headers.host && `http://${req.headers.host}` || "http://example.com"
+  );
+}
+function toWeb(req, headers) {
+  return new Request(toURL(req), {
+    method: req.method,
+    headers: { ...headers, ...req.headers },
+    body: req.headers["content-length"] ? Readable.toWeb(req) : void 0,
+    duplex: "half",
+    // This is required when sending a ReadableStream as body
+    redirect: "manual"
+    // Avoid consuming 300 responses here, return to browser
+  });
+}
+function pipeFromWeb(webResponse, res) {
+  const headers = Object.fromEntries(webResponse.headers.entries());
+  const setCookieHeader = "set-cookie";
+  if (headers[setCookieHeader]) {
+    delete headers[setCookieHeader];
+    res.setHeader(setCookieHeader, webResponse.headers.getSetCookie());
+  }
+  res.writeHead(webResponse.status, webResponse.statusText, headers);
+  if (webResponse.body) {
+    Readable.fromWeb(webResponse.body).pipe(res);
+  } else {
+    res.end();
+  }
+}
+function getHmrUrl(viteDevServer) {
+  const userHmrValue = viteDevServer.config.server?.hmr;
+  if (userHmrValue === false) {
+    console.warn(
+      "HMR is disabled. Code changes will not be reflected in neither browser or server."
+    );
+    return "";
+  }
+  const configHmr = typeof userHmrValue === "object" ? userHmrValue : {};
+  const hmrPort = configHmr.port;
+  const hmrPath = configHmr.path;
+  let hmrBase = viteDevServer.config.base;
+  if (hmrPath)
+    hmrBase = path.posix.join(hmrBase, hmrPath);
+  return (hmrPort ? `http://localhost:${hmrPort}` : "") + hmrBase;
+}
+
+export { getHmrUrl, pipeFromWeb, toURL, toWeb };