npm - @shopify/cli-hydrogen - Versions diffs - 6.1.0 → 7.0.0 - Mend

@shopify/cli-hydrogen 6.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/dist/lib/mini-oxygen/mini-oxygen.test.js ADDED Viewed

@@ -0,0 +1,214 @@
+import { describe, it, expect, vi } from 'vitest';
+import { transformWithEsbuild } from 'vite';
+import { startMiniOxygen, buildAssetsUrl } from './index.js';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { inTemporaryDirectory, removeFile, touchFile, writeFile } from '@shopify/cli-kit/node/fs';
+import getPort from 'get-port';
+describe("MiniOxygen Worker Runtime", () => {
+  it("receives HTML from test worker", async () => {
+    await withFixtures(
+      async ({ writeHandler }) => {
+        await writeHandler(() => {
+          return new Response("<html><body>Hello, world</body></html>", {
+            headers: { "content-type": "text/html" }
+          });
+        });
+      },
+      async ({ fetch: fetch2 }) => {
+        const response = await fetch2("/");
+        expect(response.headers.get("content-type")).toEqual("text/html");
+        await expect(response.text()).resolves.toEqual(
+          "<html><body>Hello, world</body></html>"
+        );
+      }
+    );
+  });
+  it("reloads script", async () => {
+    await withFixtures(
+      async ({ writeHandler }) => {
+        await writeHandler((req, env) => new Response("foo"));
+      },
+      async ({ fetch: fetch2, writeHandler, miniOxygen }) => {
+        let response = await fetch2("/");
+        await expect(response.text()).resolves.toEqual("foo");
+        await writeHandler((req, env) => new Response("bar"));
+        await miniOxygen.reload();
+        response = await fetch2("/");
+        await expect(response.text()).resolves.toEqual("bar");
+      }
+    );
+  });
+  it("reloads environment variables", async () => {
+    await withFixtures(
+      async ({ writeHandler }) => {
+        await writeHandler((req, env) => new Response(env.TEST));
+        return { env: { TEST: "foo" } };
+      },
+      async ({ fetch: fetch2, miniOxygen }) => {
+        let response = await fetch2("/");
+        await expect(response.text()).resolves.toEqual("foo");
+        await miniOxygen.reload({ env: { TEST: "bar" } });
+        response = await fetch2("/");
+        await expect(response.text()).resolves.toEqual("bar");
+      }
+    );
+  });
+  it("serves a static asset via proxy", async () => {
+    await withFixtures(
+      async ({ writeHandler, writeAsset }) => {
+        await writeAsset(
+          "star.svg",
+          '<svg><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:gold;"/></svg>'
+        );
+        await writeHandler(() => new Response("ok"));
+      },
+      async ({ fetch: fetch2, fetchAsset }) => {
+        const asset = await (await fetchAsset("/star.svg")).text();
+        expect(asset).toEqual(
+          '<svg><polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:gold;"/></svg>'
+        );
+        const response = await fetch2("/star.svg");
+        const result = await response.text();
+        expect(response.headers.get("content-type")).toEqual("image/svg+xml");
+        expect(result).toEqual(asset);
+      }
+    );
+  });
+  it("adds Oxygen request headers", async () => {
+    await withFixtures(
+      async ({ writeHandler }) => {
+        await writeHandler(
+          (req) => new Response(
+            JSON.stringify(Object.fromEntries(req.headers.entries())),
+            { headers: { "content-type": "application/json" } }
+          )
+        );
+      },
+      async ({ fetch: fetch2 }) => {
+        const response = await fetch2("/");
+        await expect(response.json()).resolves.toMatchObject({
+          "request-id": expect.stringMatching(/^[a-z0-9-]{36}$/),
+          "oxygen-buyer-ip": "127.0.0.1"
+        });
+      }
+    );
+  });
+  it("applies sourcemaps to error stack traces", async () => {
+    await withFixtures(
+      async ({ writeHandler }) => {
+        await writeHandler(
+          () => {
+            function doStuff() {
+              throw new Error("test");
+            }
+            try {
+              doStuff();
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+            return new Response("ok");
+          },
+          { sourcemap: true }
+        );
+      },
+      async ({ fetch: fetch2, miniOxygen, miniOxygenOptions }) => {
+        const spy = vi.spyOn(console, "error").mockImplementation((error) => {
+        });
+        const response = await fetch2("/");
+        expect(response.status).toEqual(500);
+        await expect(response.text()).resolves.toEqual("Error: test");
+        await vi.waitFor(
+          () => expect(spy.mock.calls.length).toBeGreaterThan(1)
+          // At least 2 calls
+        );
+        expect(spy, "Logged with sourcemaps").toHaveBeenCalledWith(
+          expect.objectContaining({
+            stack: expect.stringMatching(
+              // Shows `doStuff` and the offending line by mapping
+              // the minified code with sourcemaps:
+              /Error: test\nthrow new Error\("test"\);\n.*at doStuff \(/s
+            )
+          })
+        );
+        expect(spy).toHaveBeenCalledWith(new Error("test"));
+        spy.mockClear();
+        await removeFile(miniOxygenOptions.buildPathWorkerFile + ".map");
+        await miniOxygen.reload();
+        await fetch2("/");
+        await vi.waitFor(
+          () => expect(spy.mock.calls.length).toBeGreaterThan(1)
+          // At least 2 calls
+        );
+        expect(spy, "Logged without sourcemaps").toHaveBeenCalledWith(
+          expect.objectContaining({
+            stack: expect.stringMatching(
+              // Doesn't show `doStuff` because it's minified
+              /Error: test\n\s+at \w .*at Object\.fetch/s
+            )
+          })
+        );
+        expect(spy).toHaveBeenCalledWith(new Error("test"));
+        spy.mockRestore();
+      }
+    );
+  });
+});
+function withFixtures(setup, runTest) {
+  return inTemporaryDirectory(async (tmpDir) => {
+    const relativeDistClient = joinPath("dist", "client");
+    const relativeDistWorker = joinPath("dist", "worker");
+    const relativeWorkerEntry = joinPath(relativeDistWorker, "index.js");
+    const writeFixture = async (filename, content) => {
+      const filepath = joinPath(tmpDir, filename);
+      await touchFile(filepath);
+      await writeFile(filepath, content);
+    };
+    const writeAsset = (filepath, content) => writeFixture(joinPath(relativeDistClient, filepath), content);
+    const writeHandler = async (handler, { sourcemap = false } = {}) => {
+      let code = `export default { fetch: ${handler.toString()} }`;
+      if (sourcemap) {
+        const result = await transformWithEsbuild(code, relativeWorkerEntry, {
+          minify: true,
+          sourcemap: true
+        });
+        code = result.code;
+        await writeFixture(
+          relativeWorkerEntry + ".map",
+          JSON.stringify(result.map)
+        );
+      }
+      await writeFixture(relativeWorkerEntry, code);
+    };
+    const optionsFromSetup = await setup({
+      writeFixture,
+      writeAsset,
+      writeHandler
+    });
+    const miniOxygenOptions = {
+      root: tmpDir,
+      port: await getPort(),
+      buildPathWorkerFile: joinPath(tmpDir, relativeWorkerEntry),
+      buildPathClient: joinPath(tmpDir, relativeDistClient),
+      inspectorPort: 9229,
+      assetsPort: 1347,
+      env: {},
+      ...optionsFromSetup
+    };
+    const miniOxygen = await startMiniOxygen(miniOxygenOptions);
+    try {
+      await runTest({
+        writeFixture,
+        writeHandler,
+        writeAsset,
+        miniOxygen,
+        miniOxygenOptions,
+        fetch: (pathname) => fetch(miniOxygen.listeningAt + pathname),
+        fetchAsset: (pathname) => fetch(buildAssetsUrl(miniOxygenOptions.assetsPort) + pathname)
+      });
+    } finally {
+      await miniOxygen.close();
+    }
+  });
+}

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

@@ -2,10 +2,10 @@ import { randomUUID } from 'node:crypto';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import { readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
-import { startServer, Request } from '@shopify/mini-oxygen';
+import { Response, startServer, Request } from '@shopify/mini-oxygen';
 import { DEFAULT_PORT } from '../flags.js';
 import { OXYGEN_HEADERS_MAP, logRequestLine } from './common.js';
-import { handleDebugNetworkRequest, H2O_BINDING_NAME, logRequestEvent } from '../request-events.js';
+import { setConstructors, createLogRequestEvent, handleDebugNetworkRequest, H2O_BINDING_NAME } from '../request-events.js';
 async function startNodeServer({
   port = DEFAULT_PORT,
@@ -21,6 +21,8 @@ async function startNodeServer({
       return [key, value.defaultValue];
     })
   );
+  setConstructors({ Response });
+  const logRequestEvent = createLogRequestEvent();
   const asyncLocalStorage = new AsyncLocalStorage();
   const serviceBindings = {
     [H2O_BINDING_NAME]: {

package/dist/lib/mini-oxygen/workerd-inspector-logs.js CHANGED Viewed

@@ -179,12 +179,12 @@ function formatStructuredError(sourceMapConsumer, message, frames) {
     lines.push(message);
   frames?.forEach(({ functionName, lineNumber, columnNumber }, i) => {
     try {
-      if (lineNumber) {
+      if (typeof lineNumber === "number") {
         const pos = sourceMapConsumer.originalPositionFor({
           line: lineNumber + 1,
           column: columnNumber
         });
-        if (i === 0 && pos.source && pos.line) {
+        if (i === 0 && pos.source && pos.line !== null) {
           const fileSource = sourceMapConsumer.sourceContentFor(pos.source);
           const fileSourceLine = fileSource?.split("\n")[pos.line - 1] || "";
           lines.push(fileSourceLine.trim());

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

@@ -1,12 +1,13 @@
-import crypto from 'node:crypto';
-import { Response, Miniflare, fetch, Request, NoOpLog } from 'miniflare';
+import { Response, Miniflare, Request, fetch, NoOpLog } from 'miniflare';
 import { resolvePath, dirname } from '@shopify/cli-kit/node/path';
 import { readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import colors from '@shopify/cli-kit/node/colors';
 import { createInspectorConnector } from './workerd-inspector.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';
+import { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, createLogRequestEvent } from '../request-events.js';
 import { STATIC_ASSET_EXTENSIONS, createAssetsServer, buildAssetsUrl } from './assets.js';
 const PRIVATE_WORKERD_INSPECTOR_PORT = 9222;
@@ -33,6 +34,13 @@ async function startWorkerdServer({
   const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
   const handleAssets = createAssetHandler(assetsPort);
   const staticAssetExtensions = STATIC_ASSET_EXTENSIONS.slice();
+  let stringifiedOxygenHandler = miniOxygenHandler.toString();
+  if (process.env.NODE_ENV === "test") {
+    stringifiedOxygenHandler = stringifiedOxygenHandler.replace(
+      /\w*vite_ssr_import[\w\d]*\./g,
+      ""
+    );
+  }
   const buildMiniOxygenOptions = async () => ({
     cf: false,
     verbose: false,
@@ -41,11 +49,13 @@ async function startWorkerdServer({
     log: new NoOpLog(),
     liveReload: watch,
     host: "localhost",
+    handleRuntimeStdio() {
+    },
     workers: [
       {
         name: "mini-oxygen",
         modules: true,
-        script: `export default { fetch: ${miniOxygenHandler.toString()} }`,
+        script: `export default { fetch: ${stringifiedOxygenHandler} }`,
         bindings: {
           staticAssetExtensions,
           oxygenHeadersMap
@@ -71,7 +81,7 @@ async function startWorkerdServer({
         compatibilityDate: "2022-10-31",
         bindings: { ...env },
         serviceBindings: {
-          [H2O_BINDING_NAME]: logRequestEvent
+          [H2O_BINDING_NAME]: createLogRequestEvent({ absoluteBundlePath })
         }
       }
     ]
@@ -107,10 +117,14 @@ async function startWorkerdServer({
     },
     showBanner(options) {
       console.log("");
-      const debuggerMessage = `
-Debug mode enabled. Attach a ${process.env.TERM_PROGRAM === "vscode" ? "VSCode " : ""}debugger to port ${publicInspectorPort}
-or open DevTools in http://localhost:${publicInspectorPort}`;
+      const isVSCode = process.env.TERM_PROGRAM === "vscode";
+      const debuggingDocsLink = "https://h2o.fyi/debugging/server-code" + (isVSCode ? "#visual-studio-code" : "#step-2-attach-a-debugger");
+      const debuggerMessage = outputContent`\n\nDebugging enabled on port ${String(
+        publicInspectorPort
+      )}.\nAttach a ${outputToken.link(
+        colors.yellow(isVSCode ? "VSCode debugger" : "debugger"),
+        debuggingDocsLink
+      )} or open DevTools in http://localhost:${String(publicInspectorPort)}.`.value;
       renderSuccess({
         headline: `${options?.headlinePrefix ?? ""}MiniOxygen (Worker Runtime) ${options?.mode ?? "development"} server running.`,
         body: [
@@ -179,7 +193,10 @@ function createAssetHandler(assetsPort) {
   return async (request) => {
     return fetch(
       new Request(
-        request.url.replace(new URL(request.url).origin, assetsServerOrigin),
+        request.url.replace(
+          new URL(request.url).origin + "/",
+          assetsServerOrigin
+        ),
         request
       )
     );

package/dist/lib/missing-routes.js CHANGED Viewed

@@ -23,12 +23,15 @@ const REQUIRED_ROUTES = [
   // 'discount/:discountCode', => Handled in storefrontRedirect
   "account",
   "account/login",
-  "account/register",
   // 'account/addresses',
   // 'account/orders',
   "account/orders/:orderId",
-  "account/reset/:id/:token",
-  "account/activate/:id/:token"
+  // -- Added for CAAPI:
+  "account/authorize"
+  // -- These were removed when migrating to CAAPI:
+  // 'account/register',
+  // 'account/reset/:id/:token',
+  // 'account/activate/:id/:token',
   //   'password',
   //   'opening_soon',
 ];

package/dist/lib/onboarding/common.js CHANGED Viewed

@@ -16,6 +16,7 @@ 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';
+import { getStorefronts } from '../graphql/admin/link-storefront.js';
 const LANGUAGES = {
   js: "JavaScript",
@@ -68,7 +69,7 @@ async function handleRouteGeneration(controller, flagRoutes) {
 }
 function generateProjectEntries(options) {
   return Promise.all(
-    ["root", "entry.server", "entry.client"].map(
+    ["root", "entry.server", "entry.client", "../server.ts"].map(
       (filename) => generateProjectFile(filename, options)
     )
   );
@@ -108,12 +109,41 @@ async function handleCliShortcut(controller, cliCommand, flagShortcut) {
 async function handleStorefrontLink(controller) {
   const { session, config } = await login();
   renderLoginSuccess(config);
-  const title = await renderTextPrompt({
-    message: "New storefront name",
-    defaultValue: titleize(config.shopName),
-    abortSignal: controller.signal
+  const storefronts = await getStorefronts(session);
+  let selectedStorefront = await handleStorefrontSelection(storefronts);
+  let title;
+  if (selectedStorefront) {
+    title = selectedStorefront.title;
+  } else {
+    title = await renderTextPrompt({
+      message: "New storefront name",
+      defaultValue: titleize(config.shopName),
+      abortSignal: controller.signal
+    });
+  }
+  return {
+    ...config,
+    id: selectedStorefront?.id,
+    title,
+    session
+  };
+}
+async function handleStorefrontSelection(storefronts) {
+  const choices = [
+    {
+      label: "Create a new storefront",
+      value: null
+    },
+    ...storefronts.map(({ id, title, productionUrl }) => ({
+      label: `${title} (${productionUrl})`,
+      value: id
+    }))
+  ];
+  const storefrontId = await renderSelectPrompt({
+    message: "Select a Hydrogen storefront to link",
+    choices
   });
-  return { ...config, title, session };
+  return storefrontId ? storefronts.find(({ id }) => id === storefrontId) : void 0;
 }
 async function handleProjectLocation({
   storefrontInfo,
@@ -380,7 +410,7 @@ async function renderProjectReady(project, {
               {
                 link: {
                   label: "Guides",
-                  url: "https://shopify.dev/docs/custom-storefronts/hydrogen/building"
+                  url: "https://h2o.fyi/building"
                 }
               },
               {
@@ -434,7 +464,8 @@ async function renderProjectReady(project, {
 function createAbortHandler(controller, project) {
   return async function abort(error) {
     controller.abort();
-    if (typeof project !== "undefined") {
+    await Promise.resolve();
+    if (project?.directory) {
       await rmdir(project.directory, { force: true }).catch(() => {
       });
     }
@@ -457,4 +488,4 @@ function normalizeRoutePath(routePath) {
   return routePath.replace(/(^|\.)_index$/, "").replace(/((^|\.)[^\.]+)_\./g, "$1.").replace(/\.(?!\w+\])/g, "/").replace(/\$$/g, ":catchAll").replace(/\$/g, ":").replace(/[\[\]]/g, "").replace(/:\w*Handle/i, ":handle");
 }
-export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, renderProjectReady };
+export { LANGUAGES, commitAll, createAbortHandler, createInitialCommit, generateProjectEntries, handleCliShortcut, handleCssStrategy, handleDependencies, handleI18n, handleLanguage, handleProjectLocation, handleRouteGeneration, handleStorefrontLink, handleStorefrontSelection, renderProjectReady };

package/dist/lib/onboarding/local.js CHANGED Viewed

@@ -37,7 +37,7 @@ async function setupLocalStarterTemplate(options, controller) {
   if (templateAction === "mock")
     project.storefrontTitle = "Mock.shop";
   const abort = createAbortHandler(controller, project);
-  const createStorefrontPromise = storefrontInfo && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
+  const createStorefrontPromise = storefrontInfo && !storefrontInfo.id && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
     if (jobId)
       await waitForJob(storefrontInfo.session, jobId);
     return storefront;
@@ -46,9 +46,9 @@ async function setupLocalStarterTemplate(options, controller) {
   let backgroundWorkPromise = copy(
     templateDir,
     project.directory,
-    // Filter out the `app` directory, which will be generated later
+    // Filter out the `app` directory and server.ts, which will be generated later
     {
-      filter: (filepath) => !/^(app|dist|node_modules)\//i.test(
+      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts)/i.test(
         relativePath(templateDir, filepath)
       )
     }
@@ -90,19 +90,23 @@ async function setupLocalStarterTemplate(options, controller) {
       )
     ];
     const envLeadingComment = "# The variables added in this file are only available locally in MiniOxygen.\n# Run `h2 link` to also inject environment variables from your storefront,\n# or `h2 env pull` to populate this file.";
-    if (storefrontInfo && createStorefrontPromise) {
+    let storefrontToLink;
+    if (storefrontInfo) {
       promises.push(
         // Save linked storefront in project
         setUserAccount(project.directory, storefrontInfo),
-        createStorefrontPromise.then(
-          (storefront) => (
-            // Save linked storefront in project
-            setStorefront(project.directory, storefront)
-          )
-        ),
         // Write empty dotenv file to fallback to remote Oxygen variables
         writeFile(joinPath(project.directory, ".env"), envLeadingComment)
       );
+      if (storefrontInfo.id) {
+        storefrontToLink = { id: storefrontInfo.id, title: storefrontInfo.title };
+      } else if (createStorefrontPromise) {
+        promises.push(
+          createStorefrontPromise.then((createdStorefront) => {
+            storefrontToLink = createdStorefront;
+          })
+        );
+      }
     } else if (templateAction === "mock") {
       promises.push(
         // Set required env vars
@@ -115,7 +119,11 @@ async function setupLocalStarterTemplate(options, controller) {
         )
       );
     }
-    return Promise.all(promises).catch(abort);
+    return Promise.all(promises).then(() => {
+      if (storefrontToLink) {
+        return setStorefront(project.directory, storefrontToLink);
+      }
+    }).catch(abort);
   });
   const { language, transpileProject } = await handleLanguage(
     project.directory,

package/dist/lib/onboarding/remote.js CHANGED Viewed

@@ -1,38 +1,58 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { copyFile } from '@shopify/cli-kit/node/fs';
+import { fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { getLatestTemplates } from '../template-downloader.js';
-import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
+import { applyTemplateDiff } from '../template-diff.js';
+import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 async function setupRemoteTemplate(options, controller) {
-  const isOfficialTemplate = options.template === "demo-store" || options.template === "hello-world";
-  if (!isOfficialTemplate) {
-    throw new AbortError(
-      "Only `demo-store` and `hello-world` are supported in --template flag for now.",
-      "Skip the --template flag to run the setup flow."
-    );
-  }
   const appTemplate = options.template;
+  let abort = createAbortHandler(controller);
   const backgroundDownloadPromise = getLatestTemplates({
     signal: controller.signal
-  }).catch((error) => {
-    throw abort(error);
-  });
+  }).then(async ({ templatesDir, examplesDir }) => {
+    const templatePath = joinPath(templatesDir, appTemplate);
+    const examplePath = joinPath(examplesDir, appTemplate);
+    if (await fileExists(templatePath)) {
+      return { templatesDir, sourcePath: templatePath };
+    }
+    if (await fileExists(examplePath)) {
+      return { templatesDir, sourcePath: examplePath };
+    }
+    throw new AbortError(
+      "Unknown value in --template flag.",
+      "Skip the --template flag or provide the name of a template or example in the Hydrogen repository."
+    );
+  }).catch(abort);
   const project = await handleProjectLocation({ ...options, controller });
   if (!project)
     return;
-  const abort = createAbortHandler(controller, project);
-  let backgroundWorkPromise = backgroundDownloadPromise.then(
-    ({ templatesDir }) => copyFile(joinPath(templatesDir, appTemplate), project.directory).catch(
-      abort
-    )
-  );
-  const { language, transpileProject } = await handleLanguage(
-    project.directory,
-    controller,
-    options.language
+  abort = createAbortHandler(controller, project);
+  let backgroundWorkPromise = backgroundDownloadPromise.then(async (result) => {
+    if (controller.signal.aborted)
+      return;
+    const { sourcePath: sourcePath2, templatesDir } = result;
+    const pkgJson = await readAndParsePackageJson(
+      joinPath(sourcePath2, "package.json")
+    );
+    if (pkgJson.scripts?.dev?.includes("--diff")) {
+      return applyTemplateDiff(
+        project.directory,
+        sourcePath2,
+        joinPath(templatesDir, "skeleton")
+      );
+    }
+    return copyFile(sourcePath2, project.directory);
+  }).catch(abort);
+  if (controller.signal.aborted)
+    return;
+  const { sourcePath } = await backgroundDownloadPromise;
+  const supportsTranspilation = await fileExists(
+    joinPath(sourcePath, "tsconfig.json")
   );
+  const { language, transpileProject } = supportsTranspilation ? await handleLanguage(project.directory, controller, options.language) : { language: "js", transpileProject: () => Promise.resolve() };
   backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(
     () => options.git ? createInitialCommit(project.directory) : void 0
   );
@@ -74,17 +94,17 @@ async function setupRemoteTemplate(options, controller) {
       }
     });
   }
+  if (controller.signal.aborted)
+    return;
   await renderTasks(tasks);
   if (options.git) {
     await commitAll(project.directory, "Lockfile");
   }
   await renderProjectReady(project, setupSummary);
-  if (isOfficialTemplate) {
-    renderInfo({
-      headline: `Your project will display inventory from ${options.template === "demo-store" ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
-      body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
-    });
-  }
+  renderInfo({
+    headline: `Your project will display inventory from ${options.template === "demo-store" ? "the Hydrogen Demo Store" : "Mock.shop"}.`,
+    body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
+  });
   return {
     ...project,
     ...setupSummary