@shopify/cli-hydrogen 5.4.3 → 5.5.1

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

@@ -0,0 +1,98 @@
+import { Flags } from '@oclif/core';
+import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
+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 ansiEscapes from 'ansi-escapes';
+import { getProjectPaths, 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';
+
+const DEFAULT_OUTPUT_PATH = "startup.cpuprofile";
+class DebugCpu extends Command {
+  static description = "Builds and profiles the server startup time the app.";
+  static flags = {
+    path: commonFlags.path,
+    output: Flags.string({
+      description: `Specify a path to generate the profile file. Defaults to "${DEFAULT_OUTPUT_PATH}".`,
+      default: DEFAULT_OUTPUT_PATH,
+      required: false
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(DebugCpu);
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    const output = flags.output ? resolvePath(flags.output) : joinPath(process.cwd(), flags.output);
+    await runDebugCpu({
+      ...flagsToCamelObject(flags),
+      path: directory,
+      output
+    });
+  }
+}
+async function runDebugCpu({
+  path: appPath,
+  output = DEFAULT_OUTPUT_PATH
+}) {
+  if (!process.env.NODE_ENV)
+    process.env.NODE_ENV = "production";
+  muteDevLogs({ workerReload: false });
+  const { root, buildPathWorkerFile } = getProjectPaths(appPath);
+  outputInfo(
+    "\u23F3\uFE0F Starting profiler for CPU startup... Profile will be written to:\n" + colors.dim(output)
+  );
+  const runProfiler = await createCpuStartupProfiler();
+  const [{ watch }, { createFileWatchCache }] = await Promise.all([
+    import('@remix-run/dev/dist/compiler/watch.js'),
+    import('@remix-run/dev/dist/compiler/fileWatchCache.js')
+  ]).catch(handleRemixImportFail);
+  let times = 0;
+  const fileWatchCache = createFileWatchCache();
+  await watch(
+    {
+      config: await getRemixConfig(root),
+      options: {
+        mode: process.env.NODE_ENV,
+        sourcemap: true
+      },
+      fileWatchCache,
+      logger: createRemixLogger()
+    },
+    {
+      onBuildStart() {
+        if (times > 0) {
+          process.stdout.write(ansiEscapes.eraseLines(4));
+        }
+        outputInfo(`
+#${++times} Building and profiling...`);
+      },
+      async onBuildFinish(context, duration, succeeded) {
+        if (succeeded) {
+          const { profile, totalScriptTimeMs } = await runProfiler(
+            buildPathWorkerFile
+          );
+          process.stdout.write(ansiEscapes.eraseLines(2));
+          outputInfo(
+            `#${times} Total time: ${totalScriptTimeMs.toLocaleString()} ms
+${colors.dim(output)}`
+          );
+          await writeFile(output, JSON.stringify(profile, null, 2));
+          outputInfo(`
+Waiting for changes...`);
+        } else {
+          outputWarn("\nBuild failed, waiting for changes to restart...");
+        }
+      },
+      async onFileChanged(file) {
+        fileWatchCache.invalidateFile(file);
+      },
+      async onFileDeleted(file) {
+        fileWatchCache.invalidateFile(file);
+      }
+    }
+  );
+}
+
+export { DebugCpu as default };

package/dist/commands/hydrogen/dev.js

@@ -122,7 +122,6 @@ async function runDev({
       },
       workerRuntime
     );
-    const debugNetworkUrl = `${miniOxygen.listeningAt}/debug-network`;
     enhanceH2Logs({ host: miniOxygen.listeningAt, ...remixConfig });
     miniOxygen.showBanner({
       appName: storefront ? colors.cyan(storefront?.title) : void 0,
@@ -135,11 +134,11 @@ View GraphiQL API browser: ${getGraphiQLUrl({
             host: miniOxygen.listeningAt
           })}`
         ),
-        workerRuntime ? "" : colors.dim(
+        colors.dim(
           `
-View server-side network requests: ${debugNetworkUrl}`
+View server-side network requests: ${miniOxygen.listeningAt}/debug-network`
         )
-      ].filter(Boolean)
+      ]
     });
     if (useCodegen) {
       spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });

package/dist/commands/hydrogen/init.test.js

@@ -171,7 +171,7 @@ describe("init", () => {
           )
         );
         await expect(readFile(`${tmpDir}/server.js`)).resolves.toMatch(
-          /export default {\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/
+          /export default {\n\s+\/\*\*.*?\*\/\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/s
         );
         const output = outputMock.info();
         expect(output).toMatch("success");
@@ -266,7 +266,7 @@ describe("init", () => {
         );
         expect(projectFiles).toContain("app/routes/_index.jsx");
         await expect(readFile(`${tmpDir}/server.js`)).resolves.toMatch(
-          /export default {\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/
+          /export default {\n\s+\/\*\*.*?\*\/\n\s+async fetch\(\s*request,\s*env,\s*executionContext,?\s*\)/s
         );
         const output = outputMock.info();
         expect(output).toMatch("success");

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

@@ -21,7 +21,9 @@ import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
-// This is important to avoid re-fetching root queries on sub-navigations
+/**
+ * This is important to avoid re-fetching root queries on sub-navigations
+ */
 export const shouldRevalidate: ShouldRevalidateFunction = ({
   formMethod,
   currentUrl,

package/dist/generator-templates/starter/app/routes/account.orders._index.tsx

@@ -164,8 +164,8 @@ export const CUSTOMER_FRAGMENT = `#graphql
       pageInfo {
         hasPreviousPage
         hasNextPage
-        hasNextPage
         endCursor
+        startCursor
       }
     }
   }

package/dist/generator-templates/starter/app/routes/account_.recover.tsx

@@ -1,4 +1,9 @@
-import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type LoaderArgs,
+  type ActionArgs,
+} from '@shopify/remix-oxygen';
 import {Form, Link, useActionData} from '@remix-run/react';
 
 type ActionResponse = {
@@ -15,7 +20,7 @@ export async function loader({context}: LoaderArgs) {
   return json({});
 }
 
-export async function action({request, context}: LoaderArgs) {
+export async function action({request, context}: ActionArgs) {
   const {storefront} = context;
   const form = await request.formData();
   const email = form.has('email') ? String(form.get('email')) : null;

package/dist/generator-templates/starter/app/routes/account_.register.tsx

@@ -1,8 +1,8 @@
 import {
   json,
   redirect,
-  type ActionFunction,
   type LoaderArgs,
+  type ActionArgs,
 } from '@shopify/remix-oxygen';
 import {Form, Link, useActionData} from '@remix-run/react';
 import type {CustomerCreateMutation} from 'storefrontapi.generated';
@@ -23,7 +23,7 @@ export async function loader({context}: LoaderArgs) {
   return json({});
 }
 
-export const action: ActionFunction = async ({request, context}) => {
+export async function action({request, context}: ActionArgs) {
   if (request.method !== 'POST') {
     return json({error: 'Method not allowed'}, {status: 405});
   }
@@ -101,7 +101,7 @@ export const action: ActionFunction = async ({request, context}) => {
     }
     return json({error}, {status: 400});
   }
-};
+}
 
 export default function Register() {
   const data = useActionData<ActionResponse>();

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

@@ -133,6 +133,7 @@ const BLOGS_QUERY = `#graphql
           hasNextPage
           hasNextPage
           endCursor
+          startCursor
         }
 
       }

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

@@ -15,9 +15,9 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.49.2",
-    "@shopify/cli-hydrogen": "^5.4.3",
-    "@shopify/hydrogen": "^2023.7.11",
-    "@shopify/remix-oxygen": "^1.1.7",
+    "@shopify/cli-hydrogen": "^5.5.1",
+    "@shopify/hydrogen": "^2023.7.13",
+    "@shopify/remix-oxygen": "^1.1.8",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "isbot": "^3.6.6",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@remix-run/dev": "1.19.1",
+    "@remix-run/eslint-config": "1.19.1",
     "@shopify/oxygen-workers-types": "^3.17.3",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/generator-templates/starter/storefrontapi.generated.d.ts

@@ -637,7 +637,7 @@ export type CustomerOrdersFragment = Pick<
     >;
     pageInfo: Pick<
       StorefrontAPI.PageInfo,
-      'hasPreviousPage' | 'hasNextPage' | 'endCursor'
+      'hasPreviousPage' | 'hasNextPage' | 'endCursor' | 'startCursor'
     >;
   };
 };
@@ -689,7 +689,7 @@ export type CustomerOrdersQuery = {
         >;
         pageInfo: Pick<
           StorefrontAPI.PageInfo,
-          'hasPreviousPage' | 'hasNextPage' | 'endCursor'
+          'hasPreviousPage' | 'hasNextPage' | 'endCursor' | 'startCursor'
         >;
       };
     }
@@ -1113,7 +1113,7 @@ export type BlogQuery = {
         >;
         pageInfo: Pick<
           StorefrontAPI.PageInfo,
-          'hasPreviousPage' | 'hasNextPage' | 'endCursor'
+          'hasPreviousPage' | 'hasNextPage' | 'endCursor' | 'startCursor'
         >;
       };
     }
@@ -1811,7 +1811,7 @@ interface GeneratedQueryTypes {
     return: ArticleQuery;
     variables: ArticleQueryVariables;
   };
-  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
+  '#graphql\n  query Blog(\n    $language: LanguageCode\n    $blogHandle: String!\n    $first: Int\n    $last: Int\n    $startCursor: String\n    $endCursor: String\n  ) @inContext(language: $language) {\n    blog(handle: $blogHandle) {\n      title\n      seo {\n        title\n        description\n      }\n      articles(\n        first: $first,\n        last: $last,\n        before: $startCursor,\n        after: $endCursor\n      ) {\n        nodes {\n          ...ArticleItem\n        }\n        pageInfo {\n          hasPreviousPage\n          hasNextPage\n          hasNextPage\n          endCursor\n          startCursor\n        }\n\n      }\n    }\n  }\n  fragment ArticleItem on Article {\n    author: authorV2 {\n      name\n    }\n    contentHtml\n    handle\n    id\n    image {\n      id\n      altText\n      url\n      width\n      height\n    }\n    publishedAt\n    title\n    blog {\n      handle\n    }\n  }\n': {
     return: BlogQuery;
     variables: BlogQueryVariables;
   };

package/dist/hooks/init.js

@@ -3,7 +3,10 @@ import { outputDebug } from '@shopify/cli-kit/node/output';
 
 const EXPERIMENTAL_VM_MODULES_FLAG = "--experimental-vm-modules";
 const hook = async function(options) {
-  if (options.id && ["hydrogen:dev", "hydrogen:preview"].includes(options.id) && !process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) && !(process.env.NODE_OPTIONS ?? "").includes(EXPERIMENTAL_VM_MODULES_FLAG)) {
+  if (options.id && // All the commands that rely on MiniOxygen:
+  ["hydrogen:dev", "hydrogen:preview", "hydrogen:debug:cpu"].includes(
+    options.id
+  ) && !process.execArgv.includes(EXPERIMENTAL_VM_MODULES_FLAG) && !(process.env.NODE_OPTIONS ?? "").includes(EXPERIMENTAL_VM_MODULES_FLAG)) {
     outputDebug(
       `Restarting CLI process with ${EXPERIMENTAL_VM_MODULES_FLAG} flag.`
     );

package/dist/lib/cpu-profiler.js

@@ -0,0 +1,92 @@
+import { readFile } from '@shopify/cli-kit/node/fs';
+import { Session } from 'node:inspector';
+
+async function createCpuStartupProfiler() {
+  const { createMiniOxygen } = await import('@shopify/mini-oxygen');
+  const miniOxygen = createMiniOxygen({
+    script: "export default {}",
+    modules: true,
+    log: () => {
+    }
+  });
+  await miniOxygen.ready();
+  return async (scriptPath) => {
+    const script = await readFile(scriptPath);
+    const stopProfiler = await startProfiler();
+    await miniOxygen.reload({ script });
+    const rawProfile = await stopProfiler();
+    return enhanceProfileNodes(rawProfile, scriptPath + ".map");
+  };
+}
+function startProfiler() {
+  const session = new Session();
+  session.connect();
+  return new Promise((resolveStart) => {
+    session.post("Profiler.enable", () => {
+      session.post("Profiler.start", () => {
+        resolveStart(() => {
+          return new Promise((resolveStop, rejectStop) => {
+            session.post("Profiler.stop", (err, { profile }) => {
+              session.disconnect();
+              if (err) {
+                return rejectStop(err);
+              }
+              resolveStop(profile);
+            });
+          });
+        });
+      });
+    });
+  });
+}
+async function enhanceProfileNodes(profile, sourceMapPath) {
+  const { SourceMapConsumer } = await import('source-map');
+  const sourceMap = JSON.parse(await readFile(sourceMapPath));
+  const smc = await new SourceMapConsumer(sourceMap, "file://" + sourceMapPath);
+  const scriptDescendants = /* @__PURE__ */ new Set();
+  let totalScriptTimeMicrosec = 0;
+  const totalTimeMicrosec = profile.endTime - profile.startTime;
+  const timePerSample = profile.samples?.length ? totalTimeMicrosec / profile.samples.length : 0;
+  for (const node of profile.nodes) {
+    if (node.callFrame.url === "<script>" || scriptDescendants.has(node.id)) {
+      scriptDescendants.add(node.id);
+      node.children?.forEach((id) => scriptDescendants.add(id));
+    }
+    if (scriptDescendants.has(node.id)) {
+      augmentNode(node, smc);
+      totalScriptTimeMicrosec += Math.round((node.hitCount ?? 0) * timePerSample * 1e3) / 1e3;
+    } else {
+      silenceNode(node);
+    }
+  }
+  smc.destroy();
+  return {
+    profile,
+    totalTimeMs: totalTimeMicrosec / 1e3,
+    totalScriptTimeMs: totalScriptTimeMicrosec / 1e3
+  };
+}
+function augmentNode(node, smc) {
+  const originalPosition = smc.originalPositionFor({
+    line: node.callFrame.lineNumber + 1,
+    column: node.callFrame.columnNumber + 1
+  });
+  node.callFrame.url = originalPosition.source || node.callFrame.url;
+  node.callFrame.functionName = originalPosition.name || node.callFrame.functionName;
+  node.callFrame.lineNumber = originalPosition.line ? originalPosition.line - 1 : node.callFrame.lineNumber;
+  node.callFrame.columnNumber = originalPosition.column ?? node.callFrame.columnNumber;
+}
+function silenceNode(node) {
+  Object.assign(node, {
+    children: [],
+    callFrame: {
+      functionName: "(profiler)",
+      scriptId: "0",
+      url: "",
+      lineNumber: -1,
+      columnNumber: -1
+    }
+  });
+}
+
+export { createCpuStartupProfiler };

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

@@ -5,7 +5,7 @@ import { renderSuccess } from '@shopify/cli-kit/node/ui';
 import { startServer, Request } from '@shopify/mini-oxygen';
 import { DEFAULT_PORT } from '../flags.js';
 import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
-import { clearHistory, streamRequestEvents, logRequestEvent } from '../request-events.js';
+import { handleDebugNetworkRequest, H2O_BINDING_NAME, logRequestEvent } from '../request-events.js';
 
 async function startNodeServer({
   port = DEFAULT_PORT,
@@ -21,13 +21,13 @@ async function startNodeServer({
   );
   const asyncLocalStorage = new AsyncLocalStorage();
   const serviceBindings = {
-    H2O_LOG_EVENT: {
+    [H2O_BINDING_NAME]: {
       fetch: async (request) => logRequestEvent(
         new Request(request.url, {
           method: "POST",
           body: JSON.stringify({
-            ...await request.json(),
-            ...asyncLocalStorage.getStore()
+            ...asyncLocalStorage.getStore(),
+            ...await request.json()
           })
         })
       )
@@ -53,7 +53,7 @@ async function startNodeServer({
     async onRequest(request, defaultDispatcher) {
       const url = new URL(request.url);
       if (url.pathname === "/debug-network-server") {
-        return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
+        return handleDebugNetworkRequest(request);
       }
       let requestId = request.headers.get("request-id");
       if (!requestId) {

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

@@ -1,4 +1,4 @@
-import { Miniflare, NoOpLog, Response, Request } from 'miniflare';
+import { Response, Miniflare, NoOpLog, Request } from 'miniflare';
 import { resolvePath } from '@shopify/cli-kit/node/path';
 import { glob, readFile, createFileReadStream, fileSize } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
@@ -7,7 +7,9 @@ import { findInspectorUrl, connectToInspector } from './workerd-inspector.js';
 import { DEFAULT_PORT } from '../flags.js';
 import { findPort } from '../find-port.js';
 import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
+import { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, logRequestEvent } from '../request-events.js';
 
+const DEFAULT_INSPECTOR_PORT = 8787;
 async function startWorkerdServer({
   root,
   port = DEFAULT_PORT,
@@ -16,7 +18,8 @@ async function startWorkerdServer({
   buildPathClient,
   env
 }) {
-  const inspectorPort = await findPort(8787);
+  const appPort = await findPort(port);
+  const inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
   const oxygenHeadersMap = Object.values(OXYGEN_HEADERS_MAP).reduce(
     (acc, item) => {
       acc[item.name] = item.defaultValue;
@@ -24,13 +27,14 @@ async function startWorkerdServer({
     },
     {}
   );
+  setConstructors({ Response });
   const buildMiniOxygenOptions = async () => ({
     cf: false,
     verbose: false,
-    port,
+    port: appPort,
+    inspectorPort,
     log: new NoOpLog(),
     liveReload: watch,
-    inspectorPort,
     host: "localhost",
     workers: [
       {
@@ -44,6 +48,7 @@ async function startWorkerdServer({
         serviceBindings: {
           hydrogen: "hydrogen",
           assets: createAssetHandler(buildPathClient),
+          debugNetwork: handleDebugNetworkRequest,
           logRequest
         }
       },
@@ -56,9 +61,12 @@ async function startWorkerdServer({
             contents: await readFile(resolvePath(root, buildPathWorkerFile))
           }
         ],
-        bindings: { ...env },
         compatibilityFlags: ["streams_enable_constructors"],
-        compatibilityDate: "2022-10-31"
+        compatibilityDate: "2022-10-31",
+        bindings: { ...env },
+        serviceBindings: {
+          [H2O_BINDING_NAME]: logRequestEvent
+        }
       }
     ]
   });
@@ -69,7 +77,7 @@ async function startWorkerdServer({
   let inspectorUrl = await findInspectorUrl(inspectorPort);
   let cleanupInspector = inspectorUrl ? connectToInspector({ inspectorUrl, sourceMapPath }) : void 0;
   return {
-    port,
+    port: appPort,
     listeningAt,
     async reload(nextOptions) {
       miniOxygenOptions = await buildMiniOxygenOptions();
@@ -105,13 +113,11 @@ async function startWorkerdServer({
   };
 }
 async function miniOxygenHandler(request, env, context) {
+  const { pathname } = new URL(request.url);
+  if (pathname === "/debug-network-server") {
+    return env.debugNetwork.fetch(request);
+  }
   if (request.method === "GET") {
-    const pathname = new URL(request.url).pathname;
-    if (pathname.startsWith("/debug-network")) {
-      return new Response(
-        "The Network Debugger is currently not supported in the Worker Runtime."
-      );
-    }
     if (new Set(env.initialAssets).has(pathname.slice(1))) {
       const response2 = await env.assets.fetch(
         new Request(request.url, {
@@ -125,6 +131,7 @@ async function miniOxygenHandler(request, env, context) {
   }
   const requestInit = {
     headers: {
+      "request-id": crypto.randomUUID(),
       ...env.oxygenHeadersMap,
       ...Object.fromEntries(request.headers.entries())
     }
@@ -138,7 +145,7 @@ async function miniOxygenHandler(request, env, context) {
         method: request.method,
         signal: request.signal,
         headers: {
-          ...Object.fromEntries(request.headers.entries()),
+          ...requestInit.headers,
           "h2-duration-ms": String(durationMs),
           "h2-response-status": String(response.status)
         }

package/dist/lib/onboarding/common.js

@@ -12,7 +12,7 @@ import { login, renderLoginSuccess } from '../auth.js';
 import { renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../setups/i18n/index.js';
 import { titleize } from '../string.js';
 import { ALIAS_NAME, createPlatformShortcut, getCliCommand } from '../shell.js';
-import { transpileProject } from '../transpile-ts.js';
+import { transpileProject } from '../transpile/index.js';
 import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
 import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
 import { execAsync } from '../process.js';
@@ -193,7 +193,7 @@ async function handleLanguage(projectDir, controller, flagLanguage) {
   return {
     language,
     async transpileProject() {
-      if (language === "js") {
+      if (language !== "ts") {
         await transpileProject(projectDir);
       }
     }

package/dist/lib/request-events.js

@@ -1,8 +1,13 @@
 import { EventEmitter } from 'node:events';
 import { ReadableStream } from 'node:stream/web';
-import { Response } from '@shopify/mini-oxygen';
 import { getGraphiQLUrl } from './graphiql-url.js';
+import { Response } from '@shopify/mini-oxygen';
 
+const H2O_BINDING_NAME = "H2O_LOG_EVENT";
+let ResponseConstructor = Response;
+function setConstructors(constructors) {
+  ResponseConstructor = constructors.Response;
+}
 const DEV_ROUTES = /* @__PURE__ */ new Set(["/graphiql", "/debug-network"]);
 const EVENT_MAP = {
   request: "Request",
@@ -22,14 +27,17 @@ async function getRequestInfo(request) {
 }
 const eventEmitter = new EventEmitter();
 const eventHistory = [];
-async function clearHistory() {
+function createResponse(main = "ok", init) {
+  return new ResponseConstructor(main, init);
+}
+async function clearHistory(request) {
   eventHistory.length = 0;
-  return new Response("ok");
+  return createResponse();
 }
 async function logRequestEvent(request) {
   const url = new URL(request.url);
   if (DEV_ROUTES.has(url.pathname)) {
-    return new Response("ok");
+    return createResponse();
   }
   const { eventType, purpose, graphql, ...data } = await getRequestInfo(request);
   let graphiqlLink = "";
@@ -52,7 +60,7 @@ async function logRequestEvent(request) {
   if (eventHistory.length > 100)
     eventHistory.shift();
   eventEmitter.emit("request", event);
-  return new Response("ok");
+  return createResponse();
 }
 function streamRequestEvents(request) {
   const stream = new ReadableStream({
@@ -81,7 +89,7 @@ function streamRequestEvents(request) {
         return close();
     }
   });
-  return new Response(stream, {
+  return createResponse(stream, {
     headers: {
       "Content-Type": "text/event-stream",
       "Cache-Control": "no-store",
@@ -89,5 +97,8 @@ function streamRequestEvents(request) {
     }
   });
 }
+function handleDebugNetworkRequest(request) {
+  return request.method === "DELETE" ? clearHistory() : streamRequestEvents(request);
+}
 
-export { DEV_ROUTES, clearHistory, logRequestEvent, streamRequestEvents };
+export { DEV_ROUTES, H2O_BINDING_NAME, handleDebugNetworkRequest, logRequestEvent, setConstructors };

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

@@ -1,5 +1,7 @@
+import { fileURLToPath } from 'node:url';
 import { describe, it, expect } from 'vitest';
 import { getLocaleFromRequest } from './templates/domains.js';
+import { readFile } from '@shopify/cli-kit/node/fs';
 
 describe("Setup i18n with domains", () => {
   it("extracts the locale from the domain", () => {
@@ -22,4 +24,16 @@ describe("Setup i18n with domains", () => {
       country: "ES"
     });
   });
+  it("does not access imported types directly", async () => {
+    const template = await readFile(
+      fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
+    );
+    const typeImports = (template.match(/import\s+type\s+{([^}]+)}/)?.[1] || "").trim().split(/\s*,\s*/);
+    expect(typeImports).not.toHaveLength(0);
+    const fnCode = template.match(/function .*\n}$/ms)?.[0] || "";
+    expect(fnCode).toBeTruthy();
+    typeImports.forEach(
+      (typeImport) => expect(fnCode).not.toContain(typeImport)
+    );
+  });
 });

package/dist/lib/setups/i18n/index.js

@@ -16,16 +16,16 @@ const I18N_STRATEGY_NAME_MAP = {
 };
 const I18N_CHOICES = [...SETUP_I18N_STRATEGIES, "none"];
 async function setupI18nStrategy(strategy, options) {
-  const isTs = options.serverEntryPoint?.endsWith(".ts") ?? false;
+  const isJs = options.serverEntryPoint?.endsWith(".js") ?? false;
   const templatePath = fileURLToPath(
-    new URL(`./templates/${strategy}${isTs ? ".ts" : ".js"}`, import.meta.url)
+    new URL(`./templates/${strategy}.ts`, import.meta.url)
   );
   if (!await fileExists(templatePath)) {
     throw new Error("Unknown strategy");
   }
   const template = await readFile(templatePath);
   const formatConfig = await getCodeFormatOptions(options.rootDirectory);
-  await replaceServerI18n(options, formatConfig, template);
+  await replaceServerI18n(options, formatConfig, template, isJs);
   await replaceRemixEnv(options, formatConfig, template);
 }
 async function renderI18nPrompt(options) {