@shopify/cli-hydrogen 5.4.2 → 5.5.0

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) {

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

@@ -1,10 +1,11 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
+import { joinPath } from '@shopify/cli-kit/node/path';
 import { fileExists } from '@shopify/cli-kit/node/fs';
 import { replaceFileContent, findFileWithExtension } from '../../file.js';
 import { importLangAstGrep } from '../../ast.js';
+import { transpileFile } from '../../transpile/index.js';
 
-async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" }, formatConfig, localeExtractImplementation) {
+async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" }, formatConfig, localeExtractImpl, isJs) {
   const { filepath, astType } = await findEntryFile({
     rootDirectory,
     serverEntryPoint
@@ -34,7 +35,7 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
       }
     });
     const requestIdentifierName = requestIdentifier?.text() ?? "request";
-    const i18nFunctionName = localeExtractImplementation.match(
+    const i18nFunctionName = localeExtractImpl.match(
       /^(export )?function (\w+)/m
     )?.[2];
     if (!i18nFunctionName) {
@@ -91,6 +92,36 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
         `Please add a call to ${importName}({...})`
       );
     }
+    const defaultExportObject = root.find({
+      rule: {
+        kind: "export_statement",
+        regex: "^export default \\{"
+      }
+    });
+    if (!defaultExportObject) {
+      throw new AbortError(
+        "Could not find a default export in the server entry point"
+      );
+    }
+    let localeExtractFn = localeExtractImpl.match(/^(\/\*\*.*?\*\/\n)?^function .+?^}/ms)?.[0] || "";
+    if (!localeExtractFn) {
+      throw new AbortError(
+        "Could not find the locale extract function. This is a bug in Hydrogen."
+      );
+    }
+    if (isJs) {
+      localeExtractFn = await transpileFile(
+        localeExtractFn,
+        "locale-extract-server.ts"
+      );
+    } else {
+      localeExtractFn = localeExtractFn.replace(/\/\*\*.*?\*\//gms, "");
+    }
+    const defaultExportEnd = defaultExportObject.range().end.index;
+    content = content.slice(0, defaultExportEnd) + `
+
+${localeExtractFn}
+` + content.slice(defaultExportEnd);
     const i18nProperty = argumentObject.find({
       rule: {
         kind: "property_identifier",
@@ -112,49 +143,21 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
       const firstPart = content.slice(0, end.index - 1);
       content = firstPart + ((/,\s*$/.test(firstPart) ? "" : ",") + `i18n: ${i18nFunctionCall}`) + content.slice(end.index - 1);
     }
-    const importTypes = localeExtractImplementation.match(
-      /import\s+type\s+[^;]+?;/
-    )?.[0];
-    if (importTypes) {
-      localeExtractImplementation = localeExtractImplementation.replace(
-        importTypes,
-        ""
-      );
-      const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
-      if (lastImportNode) {
-        const lastImportContent = lastImportNode.text();
-        content = content.replace(
-          lastImportContent,
-          lastImportContent + "\n" + importTypes.replace(
-            /'[^']+'/,
-            `'@shopify/hydrogen/storefront-api-types'`
-          )
-        );
-      }
-    }
-    return content + `
-
-${localeExtractImplementation.replace(/^export function/m, "function").replace(/^export {.*?;/m, "")}
-`;
+    return content;
   });
 }
-async function replaceRemixEnv({ rootDirectory, serverEntryPoint }, formatConfig, localeExtractImplementation) {
+async function replaceRemixEnv({ rootDirectory }, formatConfig, localeExtractImpl) {
   const remixEnvPath = joinPath(rootDirectory, "remix.env.d.ts");
   if (!await fileExists(remixEnvPath)) {
     return;
   }
-  const i18nTypeName = localeExtractImplementation.match(/export type (\w+)/)?.[1];
+  const i18nType = localeExtractImpl.match(
+    /^(export )?(type \w+ =\s+\{.*?\};)\n/ms
+  )?.[2];
+  const i18nTypeName = i18nType?.match(/^type (\w+)/)?.[1];
   if (!i18nTypeName) {
     return;
   }
-  const { filepath: entryFilepath } = await findEntryFile({
-    rootDirectory,
-    serverEntryPoint
-  });
-  const relativePathToEntry = relativePath(
-    rootDirectory,
-    entryFilepath
-  ).replace(/.[tj]sx?$/, "");
   await replaceFileContent(remixEnvPath, formatConfig, async (content) => {
     if (content.includes(`Storefront<`))
       return;
@@ -176,38 +179,55 @@ async function replaceRemixEnv({ rootDirectory, serverEntryPoint }, formatConfig
         }
       }
     });
-    if (!storefrontTypeNode) {
-      return;
+    if (storefrontTypeNode) {
+      const storefrontTypeNodeRange = storefrontTypeNode.range();
+      content = content.slice(0, storefrontTypeNodeRange.end.index) + `<${i18nTypeName}>` + content.slice(storefrontTypeNodeRange.end.index);
     }
-    const { end } = storefrontTypeNode.range();
-    content = content.slice(0, end.index) + `<${i18nTypeName}>` + content.slice(end.index);
-    const serverImportNode = root.findAll({
+    const ambientDeclarationContentNode = root.find({
       rule: {
-        kind: "import_statement",
-        has: {
-          kind: "string_fragment",
-          stopBy: "end",
-          regex: `^(\\./)?${relativePathToEntry.replaceAll(
-            ".",
-            "\\."
-          )}(\\.[jt]sx?)?$`
+        kind: "statement_block",
+        inside: {
+          kind: "ambient_declaration"
         }
       }
-    }).pop();
-    if (serverImportNode) {
-      content = content.replace(
-        serverImportNode.text(),
-        serverImportNode.text().replace("{", `{${i18nTypeName},`)
-      );
+    });
+    const i18nTypeDeclaration = `
+    /**
+     * The I18nLocale used for Storefront API query context.
+     */
+    ${i18nType}`;
+    if (ambientDeclarationContentNode) {
+      const { end } = ambientDeclarationContentNode.range();
+      content = content.slice(0, end.index - 1) + `
+
+${i18nTypeDeclaration}
+` + content.slice(end.index - 1);
     } else {
-      const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop() ?? root.findAll({ rule: { kind: "comment", regex: "^/// <reference" } }).pop();
-      const { end: end2 } = lastImportNode?.range() ?? { end: { index: 0 } };
-      const typeImport = `
-import type {${i18nTypeName}} from './${serverEntryPoint.replace(
-        /\.[jt]s$/,
-        ""
-      )}';`;
-      content = content.slice(0, end2.index) + typeImport + content.slice(end2.index);
+      content = content + `
+
+declare global {
+${i18nTypeDeclaration}
+}`;
+    }
+    const importImplTypes = localeExtractImpl.match(
+      /import\s+type\s+[^;]+?;/
+    )?.[0];
+    if (importImplTypes) {
+      const importPlace = root.findAll({
+        rule: {
+          kind: "import_statement",
+          has: {
+            kind: "string_fragment",
+            stopBy: "end",
+            regex: `^@shopify/hydrogen$`
+          }
+        }
+      }).pop() ?? root.findAll({ rule: { kind: "import_statement" } }).pop() ?? root.findAll({ rule: { kind: "comment", regex: "^/// <reference" } }).pop();
+      const importPlaceRange = importPlace?.range() ?? { end: { index: 0 } };
+      content = content.slice(0, importPlaceRange.end.index) + importImplTypes.replace(
+        /'[^']+'/,
+        `'@shopify/hydrogen/storefront-api-types'`
+      ) + content.slice(importPlaceRange.end.index);
     }
     return content;
   });

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

@@ -0,0 +1,242 @@
+import { fileURLToPath } from 'node:url';
+import { describe, it, expect } from 'vitest';
+import { inTemporaryDirectory, copyFile, readFile, writeFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { ts } from 'ts-morph';
+import { getSkeletonSourceDir } from '../../build.js';
+import { replaceRemixEnv, replaceServerI18n } from './replacers.js';
+import { DEFAULT_COMPILER_OPTIONS } from '../../transpile/morph/index.js';
+
+const remixDts = "remix.env.d.ts";
+const serverTs = "server.ts";
+const checkTypes = (content) => {
+  const { diagnostics } = ts.transpileModule(content, {
+    reportDiagnostics: true,
+    compilerOptions: DEFAULT_COMPILER_OPTIONS
+  });
+  if (diagnostics && diagnostics.length > 0) {
+    throw new Error(
+      ts.formatDiagnostics(
+        diagnostics,
+        ts.createCompilerHost(DEFAULT_COMPILER_OPTIONS)
+      )
+    );
+  }
+};
+describe("i18n replacers", () => {
+  it("adds i18n type to remix.env.d.ts", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const skeletonDir = getSkeletonSourceDir();
+      await copyFile(
+        joinPath(skeletonDir, remixDts),
+        joinPath(tmpDir, remixDts)
+      );
+      await replaceRemixEnv(
+        { rootDirectory: tmpDir },
+        {},
+        await readFile(
+          fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
+        )
+      );
+      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\\" />
+
+        // Enhance TypeScript's built-in typings.
+        import \\"@total-typescript/ts-reset\\";
+
+        import type { Storefront, 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\\";
+
+        declare global {
+          /**
+           * A global \`process\` object is only available during build to access NODE_ENV.
+           */
+          const process: { env: { NODE_ENV: \\"production\\" | \\"development\\" } };
+
+          /**
+           * Declare expected Env parameter in fetch handler.
+           */
+          interface Env {
+            SESSION_SECRET: string;
+            PUBLIC_STOREFRONT_API_TOKEN: string;
+            PRIVATE_STOREFRONT_API_TOKEN: string;
+            PUBLIC_STORE_DOMAIN: string;
+            PUBLIC_STOREFRONT_ID: string;
+          }
+
+          /**
+           * The I18nLocale used for Storefront API query context.
+           */
+          type I18nLocale = { language: LanguageCode; country: CountryCode };
+        }
+
+        declare module \\"@shopify/remix-oxygen\\" {
+          /**
+           * Declare local additions to the Remix loader context.
+           */
+          export interface AppLoadContext {
+            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;
+          }
+        }
+        "
+      `);
+    });
+  });
+  it("adds i18n type to server.ts", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const skeletonDir = getSkeletonSourceDir();
+      await writeFile(
+        joinPath(tmpDir, serverTs),
+        // Remove the part that is not needed for this test (HydrogenSession, Cart query, etc);
+        (await readFile(joinPath(skeletonDir, serverTs))).replace(/^};$.*/ms, "};")
+      );
+      await replaceServerI18n(
+        { rootDirectory: tmpDir, serverEntryPoint: serverTs },
+        {},
+        await readFile(
+          fileURLToPath(new URL("./templates/domains.ts", import.meta.url))
+        ),
+        false
+      );
+      const newContent = await readFile(joinPath(tmpDir, serverTs));
+      expect(() => checkTypes(newContent)).not.toThrow();
+      expect(newContent).toMatchInlineSnapshot(`
+        "// Virtual entry point for the app
+        import * as remixBuild from \\"@remix-run/dev/server-build\\";
+        import {
+          cartGetIdDefault,
+          cartSetIdDefault,
+          createCartHandler,
+          createStorefrontClient,
+          storefrontRedirect,
+        } from \\"@shopify/hydrogen\\";
+        import {
+          createRequestHandler,
+          getStorefrontHeaders,
+          createCookieSessionStorage,
+          type SessionStorage,
+          type Session,
+        } from \\"@shopify/remix-oxygen\\";
+
+        /**
+         * Export a fetch handler in module format.
+         */
+        export default {
+          async fetch(
+            request: Request,
+            env: Env,
+            executionContext: ExecutionContext
+          ): Promise<Response> {
+            try {
+              /**
+               * 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\\");
+              }
+
+              const waitUntil = executionContext.waitUntil.bind(executionContext);
+              const [cache, session] = await Promise.all([
+                caches.open(\\"hydrogen\\"),
+                HydrogenSession.init(request, [env.SESSION_SECRET]),
+              ]);
+
+              /**
+               * Create Hydrogen's Storefront client.
+               */
+              const { storefront } = createStorefrontClient({
+                cache,
+                waitUntil,
+                i18n: getLocaleFromRequest(request),
+                publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+                privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
+                storeDomain: env.PUBLIC_STORE_DOMAIN,
+                storefrontId: env.PUBLIC_STOREFRONT_ID,
+                storefrontHeaders: getStorefrontHeaders(request),
+              });
+
+              /*
+               * Create a cart handler that will be used to
+               * create and update the cart in the session.
+               */
+              const cart = createCartHandler({
+                storefront,
+                getCartId: cartGetIdDefault(request.headers),
+                setCartId: cartSetIdDefault(),
+                cartQueryFragment: CART_QUERY_FRAGMENT,
+              });
+
+              /**
+               * Create a Remix request handler and pass
+               * Hydrogen's Storefront client to the loader context.
+               */
+              const handleRequest = createRequestHandler({
+                build: remixBuild,
+                mode: process.env.NODE_ENV,
+                getLoadContext: () => ({ session, storefront, cart, env, waitUntil }),
+              });
+
+              const response = await handleRequest(request);
+
+              if (response.status === 404) {
+                /**
+                 * Check for redirects only when there's a 404 from the app.
+                 * If the redirect doesn't exist, then \`storefrontRedirect\`
+                 * will pass through the 404 response.
+                 */
+                return storefrontRedirect({ request, response, storefront });
+              }
+
+              return response;
+            } catch (error) {
+              // eslint-disable-next-line no-console
+              console.error(error);
+              return new Response(\\"An unexpected error occurred\\", { status: 500 });
+            }
+          },
+        };
+
+        function getLocaleFromRequest(request: Request): I18nLocale {
+          const defaultLocale: I18nLocale = { language: \\"EN\\", country: \\"US\\" };
+          const supportedLocales = {
+            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(\\".\\")
+            .pop()
+            ?.toUpperCase() as keyof typeof supportedLocales;
+
+          return domain && supportedLocales[domain]
+            ? { language: supportedLocales[domain], country: domain }
+            : defaultLocale;
+        }
+        "
+      `);
+    });
+  });
+});

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

@@ -1,5 +1,7 @@
+import { fileURLToPath } from 'node:url';
 import { describe, it, expect } from 'vitest';
 import { getLocaleFromRequest } from './templates/subdomains.js';
+import { readFile } from '@shopify/cli-kit/node/fs';
 
 describe("Setup i18n with subdomains", () => {
   it("extracts the locale from the subdomain", () => {
@@ -22,4 +24,16 @@ describe("Setup i18n with subdomains", () => {
       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/subfolders.test.js

@@ -1,5 +1,7 @@
+import { fileURLToPath } from 'node:url';
 import { describe, it, expect } from 'vitest';
 import { getLocaleFromRequest } from './templates/subfolders.js';
+import { readFile } from '@shopify/cli-kit/node/fs';
 
 describe("Setup i18n with subfolders", () => {
   it("extracts the locale from the pathname", () => {
@@ -22,4 +24,16 @@ describe("Setup i18n with subfolders", () => {
       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/templates/domains.js

@@ -8,7 +8,7 @@ function getLocaleFromRequest(request) {
   };
   const url = new URL(request.url);
   const domain = url.hostname.split(".").pop()?.toUpperCase();
-  return supportedLocales[domain] ? { language: supportedLocales[domain], country: domain } : defaultLocale;
+  return domain && supportedLocales[domain] ? { language: supportedLocales[domain], country: domain } : defaultLocale;
 }
 
 export { getLocaleFromRequest };

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

@@ -2,6 +2,9 @@ import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
 
 export type I18nLocale = {language: LanguageCode; country: CountryCode};
 
+/**
+ * @returns {I18nLocale}
+ */
 function getLocaleFromRequest(request: Request): I18nLocale {
   const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
   const supportedLocales = {
@@ -9,7 +12,7 @@ function getLocaleFromRequest(request: Request): I18nLocale {
     FR: 'FR',
     DE: 'DE',
     JP: 'JA',
-  } as Record<CountryCode, LanguageCode>;
+  } as Record<I18nLocale['country'], I18nLocale['language']>;
 
   const url = new URL(request.url);
   const domain = url.hostname
@@ -17,7 +20,7 @@ function getLocaleFromRequest(request: Request): I18nLocale {
     .pop()
     ?.toUpperCase() as keyof typeof supportedLocales;
 
-  return supportedLocales[domain]
+  return domain && supportedLocales[domain]
     ? {language: supportedLocales[domain], country: domain}
     : defaultLocale;
 }

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

@@ -2,6 +2,9 @@ import type {LanguageCode, CountryCode} from '../mock-i18n-types.js';
 
 export type I18nLocale = {language: LanguageCode; country: CountryCode};
 
+/**
+ * @returns {I18nLocale}
+ */
 function getLocaleFromRequest(request: Request): I18nLocale {
   const defaultLocale: I18nLocale = {language: 'EN', country: 'US'};
   const supportedLocales = {
@@ -9,7 +12,7 @@ function getLocaleFromRequest(request: Request): I18nLocale {
     FR: 'FR',
     DE: 'DE',
     JP: 'JA',
-  } as Record<CountryCode, LanguageCode>;
+  } as Record<I18nLocale['country'], I18nLocale['language']>;
 
   const url = new URL(request.url);
   const firstSubdomain = url.hostname

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

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

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

@@ -6,20 +6,21 @@ export type I18nLocale = {
   pathPrefix: string;
 };
 
+/**
+ * @returns {I18nLocale}
+ */
 function getLocaleFromRequest(request: Request): I18nLocale {
   const url = new URL(request.url);
   const firstPathPart = url.pathname.split('/')[1]?.toUpperCase() ?? '';
 
+  type I18nFromUrl = [I18nLocale['language'], I18nLocale['country']];
+
   let pathPrefix = '';
-  let language: LanguageCode = 'EN';
-  let country: CountryCode = 'US';
+  let [language, country]: I18nFromUrl = ['EN', 'US'];
 
   if (/^[A-Z]{2}-[A-Z]{2}$/i.test(firstPathPart)) {
     pathPrefix = '/' + firstPathPart;
-    [language, country] = firstPathPart.split('-') as [
-      LanguageCode,
-      CountryCode,
-    ];
+    [language, country] = firstPathPart.split('-') as I18nFromUrl;
   }
 
   return {language, country, pathPrefix};

package/dist/lib/setups/routes/generate.js

@@ -3,7 +3,7 @@ import { fileExists, mkdir, copyFile, readFile, writeFile } from '@shopify/cli-k
 import { joinPath, relativizePath, dirname, relativePath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { transpileFile } from '../../../lib/transpile-ts.js';
+import { transpileFile } from '../../transpile/index.js';
 import { getCodeFormatOptions, formatCode } from '../../../lib/format-code.js';
 import { getTemplateAppFile, GENERATOR_ROUTE_DIR, getStarterDir } from '../../../lib/build.js';
 import { getV2Flags, convertTemplateToRemixVersion, convertRouteToV1 } from '../../../lib/remix-version-interop.js';
@@ -165,7 +165,10 @@ async function generateProjectFile(routeFrom, {
       v2Flags
     );
     if (!typescript) {
-      templateContent = await transpileFile(templateContent);
+      templateContent = await transpileFile(
+        templateContent,
+        templateAppFilePath
+      );
     }
     if (adapter) {
       templateContent = templateContent.replace(

package/dist/lib/transpile/file.js

@@ -0,0 +1,6 @@
+async function transpileFile(code, filepath, keepTypes = true) {
+  const { transpileTs } = await import('./morph/index.js');
+  return transpileTs(code, filepath, keepTypes);
+}
+
+export { transpileFile };

package/dist/lib/transpile/index.js

@@ -0,0 +1,2 @@
+export { transpileFile } from './file.js';
+export { transpileProject } from './project.js';