@shopify/cli-hydrogen 5.1.1 → 5.2.0

package/dist/lib/codegen.js

@@ -2,7 +2,7 @@ import { loadCodegenConfig, generate } from '@graphql-codegen/cli';
 import { patchGqlPluck, pluckConfig, preset, schema } from '@shopify/hydrogen-codegen';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { joinPath } from '@shopify/cli-kit/node/path';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
@@ -82,16 +82,22 @@ async function generateTypes({
   forceSfapiVersion,
   ...dirs
 }) {
-  const { config: codegenConfig } = await loadCodegenConfig({
-    configFilePath,
-    searchPlaces: [dirs.rootDirectory]
-  }) || generateDefaultConfig(dirs, forceSfapiVersion);
+  const { config: codegenConfig } = (
+    // Load <root>/codegen.ts if available
+    await loadCodegenConfig({
+      configFilePath,
+      searchPlaces: [dirs.rootDirectory]
+    }) || // Fall back to default config
+    generateDefaultConfig(dirs, forceSfapiVersion)
+  );
   await addHooksToHydrogenOptions(codegenConfig, dirs);
   await generate(
     {
       ...codegenConfig,
       cwd: dirs.rootDirectory,
       watch,
+      // Note: do not use `silent` without `watch`, it will swallow errors and
+      // won't hide all logs. `errorsOnly` flag doesn't work either.
       silent: !watch
     },
     true
@@ -100,6 +106,7 @@ async function generateTypes({
 }
 function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
   const tsDefaultGlob = "*!(*.d).{ts,tsx}";
+  const appDirRelative = relativePath(rootDirectory, appDirectory);
   return {
     filepath: "virtual:codegen",
     config: {
@@ -110,8 +117,10 @@ function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersio
           preset,
           schema,
           documents: [
-            joinPath(rootDirectory, tsDefaultGlob),
-            joinPath(appDirectory, "**", tsDefaultGlob)
+            tsDefaultGlob,
+            // E.g. ./server.ts
+            joinPath(appDirRelative, "**", tsDefaultGlob)
+            // E.g. app/routes/_index.tsx
           ],
           ...!!forceSfapiVersion && {
             presetConfig: { importTypes: false },
@@ -142,6 +151,7 @@ async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
     const formatConfig = await getCodeFormatOptions(rootDirectory);
     hydrogenOptions.hooks = {
       beforeOneFileWrite: (file, content) => formatCode(content, formatConfig, file),
+      // Run Prettier before writing files
       ...hydrogenOptions.hooks
     };
   }

package/dist/lib/environment-variables.js

@@ -8,6 +8,10 @@ import colors from '@shopify/cli-kit/node/colors';
 import { getStorefrontEnvVariables } from './graphql/admin/pull-variables.js';
 import { login } from './auth.js';
 
+const createEmptyRemoteVars = () => ({
+  remoteVariables: {},
+  remoteSecrets: {}
+});
 async function getAllEnvironmentVariables({
   root,
   envBranch,
@@ -15,7 +19,15 @@ async function getAllEnvironmentVariables({
 }) {
   const dotEnvPath = resolvePath(root, ".env");
   const [{ remoteVariables, remoteSecrets }, { variables: localVariables }] = await Promise.all([
-    fetchRemote ? getRemoteVariables(root, envBranch) : { remoteVariables: {}, remoteSecrets: {} },
+    // Get remote vars
+    fetchRemote ? getRemoteVariables(root, envBranch).catch((error) => {
+      renderWarning({
+        headline: "Failed to load environment variables from Shopify. The development server will still start, but the following error occurred:",
+        body: [error.message, error.tryMessage, error.nextSteps].filter(Boolean).join("\n\n")
+      });
+      return createEmptyRemoteVars();
+    }) : createEmptyRemoteVars(),
+    // Get local vars
     fileExists(dotEnvPath).then(
       (exists) => exists ? readAndParseDotEnv(dotEnvPath) : { variables: {} }
     )
@@ -29,6 +41,7 @@ async function getAllEnvironmentVariables({
       linesToColumns([
         ...remotePublicKeys.filter((key) => !localKeys.includes(key)).map((key) => [key, "from Oxygen"]),
         ...localKeys.map((key) => [key, "from local .env"]),
+        // Ensure secret variables always get added to the bottom of the list
         ...remoteSecretKeys.filter((key) => !localKeys.includes(key)).map((key) => [
           colors.dim(key),
           colors.dim("from Oxygen (Marked as secret)")
@@ -44,16 +57,7 @@ async function getAllEnvironmentVariables({
 }
 async function getRemoteVariables(root, envBranch) {
   const { session, config } = await login(root);
-  const envVariables = (await getStorefrontEnvVariables(
-    session,
-    config.storefront.id,
-    envBranch
-  ).catch((error) => {
-    renderWarning({
-      headline: `Failed to load environment variables. The development server will still start, but the following error occurred:`,
-      body: error?.stack ?? error?.message ?? error
-    });
-  }))?.environmentVariables || [];
+  const envVariables = (await getStorefrontEnvVariables(session, config.storefront.id, envBranch))?.environmentVariables || [];
   const remoteVariables = {};
   const remoteSecrets = {};
   for (const { key, value, isSecret } of envVariables) {

package/dist/lib/file.test.js

@@ -1,13 +1,12 @@
-import { temporaryDirectoryTask } from 'tempy';
 import { describe, it, expect } from 'vitest';
 import { replaceFileContent, findFileWithExtension } from './file.js';
 import { resolvePath } from '@shopify/cli-kit/node/path';
-import { writeFile, readFile, mkdir } from '@shopify/cli-kit/node/fs';
+import { inTemporaryDirectory, writeFile, readFile, mkdir } from '@shopify/cli-kit/node/fs';
 
 describe("File utils", () => {
   describe("replaceFileContent", () => {
     it("replaces the content of a file and formats it", async () => {
-      await temporaryDirectoryTask(async (tmpDir) => {
+      await inTemporaryDirectory(async (tmpDir) => {
         const filepath = resolvePath(tmpDir, "index.js");
         await writeFile(
           filepath,
@@ -24,7 +23,7 @@ describe("File utils", () => {
   });
   describe("findFileWithExtension", () => {
     it("ignores missing files", async () => {
-      await temporaryDirectoryTask(async (tmpDir) => {
+      await inTemporaryDirectory(async (tmpDir) => {
         expect(findFileWithExtension(tmpDir, "nope")).resolves.toEqual({
           filepath: void 0,
           extension: void 0,
@@ -33,7 +32,7 @@ describe("File utils", () => {
       });
     });
     it("finds the file with its corresponding extension and astType", async () => {
-      await temporaryDirectoryTask(async (tmpDir) => {
+      await inTemporaryDirectory(async (tmpDir) => {
         await writeFile(resolvePath(tmpDir, "first.js"), "content");
         await writeFile(resolvePath(tmpDir, "second.tsx"), "content");
         await writeFile(resolvePath(tmpDir, "third.mjs"), "content");

package/dist/lib/find-port.js

@@ -0,0 +1,9 @@
+import getPort, { portNumbers } from 'get-port';
+
+function findPort(portPreference, range = 100) {
+  return getPort({
+    port: portNumbers(portPreference, portPreference + range)
+  });
+}
+
+export { findPort };

package/dist/lib/flags.js

@@ -6,6 +6,7 @@ import colors from '@shopify/cli-kit/node/colors';
 import { SETUP_CSS_STRATEGIES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
+const DEFAULT_PORT = 3e3;
 const commonFlags = {
   path: Flags.string({
     description: "The path to the directory of the Hydrogen storefront. The default is the current directory.",
@@ -14,7 +15,7 @@ const commonFlags = {
   port: Flags.integer({
     description: "Port to run the server on.",
     env: "SHOPIFY_HYDROGEN_FLAG_PORT",
-    default: 3e3
+    default: DEFAULT_PORT
   }),
   force: Flags.boolean({
     description: "Overwrite the destination directory and files if they already exist.",
@@ -112,4 +113,4 @@ function overrideFlag(flag, extra) {
   };
 }
 
-export { commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };
+export { DEFAULT_PORT, commonFlags, deprecated, flagsToCamelObject, overrideFlag, parseProcessFlags };

package/dist/lib/format-code.js

@@ -17,6 +17,9 @@ async function getCodeFormatOptions(filePath = process.cwd()) {
 function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
   const ext = extname(filePath);
   const formattedContent = prettier.format(content, {
+    // Specify the TypeScript parser for ts/tsx files. Otherwise
+    // we need to use the babel parser because the default parser
+    // Otherwise prettier will print a warning.
     parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
     ...config
   });

package/dist/lib/live-reload.js

@@ -0,0 +1,62 @@
+import http from 'node:http';
+
+async function setupLiveReload(devServerPort) {
+  try {
+    const [{ updates: hmrUpdates }, { serve }, { detectLoaderChanges }, { ok, err }] = await Promise.all([
+      import('@remix-run/dev/dist/devServer_unstable/hmr.js'),
+      import('@remix-run/dev/dist/devServer_unstable/socket.js'),
+      import('@remix-run/dev/dist/devServer_unstable/hdr.js'),
+      import('@remix-run/dev/dist/result.js')
+    ]);
+    const state = {};
+    const server = http.createServer(function(req, res) {
+      res.writeHead(200);
+      res.end();
+    }).listen(devServerPort);
+    const socket = serve(server);
+    return {
+      onBuildStart: (ctx) => {
+        state.loaderChanges = detectLoaderChanges(ctx).then(ok, err);
+      },
+      onBuildManifest: (manifest) => {
+        state.manifest = manifest;
+      },
+      onAppReady: async (ctx) => {
+        const nextState = { prevManifest: state.manifest };
+        try {
+          const loaderChanges = await state.loaderChanges;
+          if (loaderChanges.ok) {
+            nextState.prevLoaderHashes = loaderChanges.value;
+          }
+          if (loaderChanges.ok && state.manifest && state.prevManifest) {
+            socket.hmr(
+              state.manifest,
+              hmrUpdates(
+                ctx.config,
+                state.manifest,
+                state.prevManifest,
+                loaderChanges.value,
+                state.prevLoaderHashes
+              )
+            );
+          } else if (state.prevManifest) {
+            socket.reload();
+          }
+        } finally {
+          Object.assign(state, nextState);
+        }
+      },
+      close: () => {
+        socket.close();
+        server.close();
+      }
+    };
+  } catch (error) {
+    console.warn(
+      "Could not start HMR server. Please make sure your Remix packages are in sync with Hydrogen. Defaulting to regular live reload.",
+      error.stack
+    );
+  }
+}
+
+export { setupLiveReload };

package/dist/lib/log.js

@@ -121,7 +121,10 @@ function enhanceH2Logs(options) {
   injectLogReplacer("error");
   injectLogReplacer(
     "warn",
-    ([first]) => first?.includes?.("[h2:warn:createStorefrontClient]") ? true : void 0
+    ([first]) => (
+      // Show createStorefrontClient warnings only once.
+      first?.includes?.("[h2:warn:createStorefrontClient]") ? true : void 0
+    )
   );
   addMessageReplacers("h2-warn", [
     ([first]) => {
@@ -164,7 +167,9 @@ function enhanceH2Logs(options) {
         if (firstAppLineIndex > 0 && lastAppLineIndex > firstAppLineIndex) {
           stack = [
             stackLines[0],
+            // Error message
             ...stackLines.slice(firstAppLineIndex, lastAppLineIndex)
+            // App code
           ].join("\n").trim() || void 0;
         }
         const error = new BugError(

package/dist/lib/mini-oxygen.js

@@ -1,27 +1,28 @@
 import { outputToken, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
 import { resolvePath } from '@shopify/cli-kit/node/path';
-import { fileExists } from '@shopify/cli-kit/node/fs';
+import { readFile, fileExists } from '@shopify/cli-kit/node/fs';
 import colors from '@shopify/cli-kit/node/colors';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { startServer } from '@shopify/mini-oxygen';
+import { DEFAULT_PORT } from './flags.js';
 
 async function startMiniOxygen({
   root,
-  port = 3e3,
+  port = DEFAULT_PORT,
   watch = false,
+  autoReload = watch,
   buildPathWorkerFile,
   buildPathClient,
   env
 }) {
-  const { default: miniOxygenImport } = await import('@shopify/mini-oxygen');
-  const miniOxygenPreview = miniOxygenImport.default ?? miniOxygenImport;
   const dotenvPath = resolvePath(root, ".env");
-  const miniOxygen = await miniOxygenPreview({
-    workerFile: buildPathWorkerFile,
+  const miniOxygen = await startServer({
+    script: await readFile(buildPathWorkerFile),
     assetsDir: buildPathClient,
     publicPath: "",
     port,
     watch,
-    autoReload: watch,
+    autoReload,
     modules: true,
     env: {
       ...env,
@@ -30,23 +31,31 @@ async function startMiniOxygen({
     envPath: !env && await fileExists(dotenvPath) ? dotenvPath : void 0,
     log: () => {
     },
-    buildWatchPaths: watch ? [resolvePath(root, buildPathWorkerFile)] : void 0,
-    onResponse: (request, response) => logResponse(
-      request,
-      response
+    onResponse: (request, response) => (
+      // 'Request' and 'Response' types in MiniOxygen comes from
+      // Miniflare and are slightly different from standard types.
+      logResponse(
+        request,
+        response
+      )
     )
   });
   const listeningAt = `http://localhost:${miniOxygen.port}`;
   return {
     listeningAt,
     port: miniOxygen.port,
-    reload(nextOptions) {
-      return miniOxygen.reload({
-        env: {
-          ...nextOptions?.env ?? env,
+    async reload(options = {}) {
+      const nextOptions = {};
+      if (options.env) {
+        nextOptions.env = {
+          ...options.env,
           ...process.env
-        }
-      });
+        };
+      }
+      if (options.worker) {
+        nextOptions.script = await readFile(buildPathWorkerFile);
+      }
+      return miniOxygen.reload(nextOptions);
     },
     showBanner(options) {
       console.log("");
@@ -64,8 +73,9 @@ async function startMiniOxygen({
 function logResponse(request, response) {
   try {
     const url = new URL(request.url);
-    if (["/graphiql"].includes(url.pathname))
+    if (["/graphiql"].includes(url.pathname)) {
       return;
+    }
     const isProxy = !!response.url && response.url !== request.url;
     const isDataRequest = !isProxy && url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");

package/dist/lib/missing-routes.js

@@ -3,20 +3,34 @@ import { renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
 const REQUIRED_ROUTES = [
   "",
   "cart",
+  // 'products',
   "products/:productHandle",
   "collections",
+  //   'collections/all',
   "collections/:collectionHandle",
+  //   'collections/:collectionHandle/:constraint',
+  //   'collections/:collectionHandle/products/:productHandle',
   "sitemap.xml",
   "robots.txt",
   "pages/:pageHandle",
+  //   'blogs/:blogHandle/tagged/:tagHandle',
+  //   'blogs/:blogHandle/:articleHandle',
+  //   'blogs/:blogHandle/:articleHandle/comments',
   "policies/:policyHandle",
+  //   'variants/:variantId',
   "search",
+  //   'gift_cards/:storeId/:cardId',
+  // '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"
+  //   'password',
+  //   'opening_soon',
 ];
 function findMissingRoutes(config, requiredRoutes = REQUIRED_ROUTES) {
   const userRoutes = Object.values(config.routes);
@@ -40,7 +54,9 @@ function findMissingRoutes(config, requiredRoutes = REQUIRED_ROUTES) {
           currentRoute.parentId = parentRoute.parentId;
         }
         const optionalSegment = ":?[^\\/\\?]+\\?";
-        const reString = `^(${optionalSegment}\\/)?` + requiredRoute.replaceAll(".", "\\.").replace(/\//g, `\\/(${optionalSegment}\\/)?`).replace(/:[^/)?]+/g, ":[^\\/]+") + `(\\/${optionalSegment})?$`;
+        const reString = `^(${optionalSegment}\\/)?` + // Starts with an optional segment
+        requiredRoute.replaceAll(".", "\\.").replace(/\//g, `\\/(${optionalSegment}\\/)?`).replace(/:[^/)?]+/g, ":[^\\/]+") + // Replace params with regex
+        `(\\/${optionalSegment})?$`;
         if (new RegExp(reString).test(currentRoute.path)) {
           missingRoutes.delete(requiredRoute);
         }

package/dist/lib/onboarding/common.js

@@ -163,7 +163,9 @@ async function handleProjectLocation({
   return {
     name: basename(location),
     location,
+    // User input. E.g. "./hydrogen-storefront"
     directory,
+    // Absolute path to location
     storefrontTitle: storefrontInfo?.title
   };
 }
@@ -201,6 +203,7 @@ async function handleCssStrategy(projectDir, controller, flagStyling) {
           {
             rootDirectory: projectDir,
             appDirectory: joinPath(projectDir, "app")
+            // Default value in new projects
           },
           true
         );
@@ -344,6 +347,8 @@ async function renderProjectReady(project, {
     body: bodyLines.map(
       ([label, value]) => `  ${(label + ":").padEnd(padMin, " ")}  ${colors.dim(value)}`
     ).join("\n") + routeSummary,
+    // Use `customSections` instead of `nextSteps` and `references`
+    // here to enforce a newline between title and items.
     customSections: [
       hasErrors && {
         title: "Warnings\n",

package/dist/lib/onboarding/local.js

@@ -18,7 +18,7 @@ async function setupLocalStarterTemplate(options, controller) {
     message: "Connect to Shopify",
     choices: [
       {
-        label: "Use sample data from Mock.shop (no login required)",
+        label: "Use sample data from mock.shop (You can connect a Shopify account later)",
         value: "mock"
       },
       { label: "Link your Shopify account", value: "link" }
@@ -46,17 +46,22 @@ async function setupLocalStarterTemplate(options, controller) {
   let backgroundWorkPromise = copy(
     templateDir,
     project.directory,
+    // Filter out the `app` directory, which will be generated later
     {
       filter: (filepath) => !/^(app|dist|node_modules)\//i.test(
         relativePath(templateDir, filepath)
       )
     }
   ).then(
-    () => generateProjectEntries({
-      rootDirectory: project.directory,
-      appDirectory: joinPath(project.directory, "app"),
-      typescript: true
-    })
+    () => (
+      // Generate project entries and their file dependencies
+      generateProjectEntries({
+        rootDirectory: project.directory,
+        appDirectory: joinPath(project.directory, "app"),
+        typescript: true
+        // Will be transpiled later
+      })
+    )
   ).catch(abort);
   const tasks = [
     {
@@ -74,6 +79,7 @@ async function setupLocalStarterTemplate(options, controller) {
   ];
   backgroundWorkPromise = backgroundWorkPromise.then(() => {
     const promises = [
+      // Add project name to package.json
       replaceFileContent(
         joinPath(project.directory, "package.json"),
         false,
@@ -83,17 +89,23 @@ async function setupLocalStarterTemplate(options, controller) {
         )
       )
     ];
-    const envLeadingComment = "# The variables added in this file are only available locally in MiniOxygen\n";
+    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) {
       promises.push(
+        // Save linked storefront in project
         setUserAccount(project.directory, storefrontInfo),
         createStorefrontPromise.then(
-          (storefront) => setStorefront(project.directory, storefront)
+          (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)
       );
     } else if (templateAction === "mock") {
       promises.push(
+        // Set required env vars
         writeFile(
           joinPath(project.directory, ".env"),
           envLeadingComment + "\n" + [
@@ -188,6 +200,7 @@ async function setupLocalStarterTemplate(options, controller) {
     const { setupRoutes } = await handleRouteGeneration(
       controller,
       options.routes || true
+      // TODO: Remove default value when multi-select UI component is available
     );
     setupSummary.i18n = i18nStrategy;
     backgroundWorkPromise = backgroundWorkPromise.then(async () => {

package/dist/lib/onboarding/remote.js

@@ -3,7 +3,7 @@ import { copyFile } from '@shopify/cli-kit/node/fs';
 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, renderProjectReady } from './common.js';
+import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 async function setupRemoteTemplate(options, controller) {
   const isOfficialTemplate = options.template === "demo-store" || options.template === "hello-world";
@@ -33,7 +33,9 @@ async function setupRemoteTemplate(options, controller) {
     controller,
     options.language
   );
-  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(() => createInitialCommit(project.directory));
+  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(
+    () => options.git ? createInitialCommit(project.directory) : void 0
+  );
   const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
     project.directory,
     controller,
@@ -73,10 +75,13 @@ async function setupRemoteTemplate(options, controller) {
     });
   }
   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 the Hydrogen Demo Store.`,
+      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.`
     });
   }

package/dist/lib/remix-config.js

@@ -5,6 +5,7 @@ import { readdir } from 'node:fs/promises';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { outputWarn } from '@shopify/cli-kit/node/output';
 import { fileExists } from '@shopify/cli-kit/node/fs';
+import { muteRemixLogs } from './log.js';
 
 const BUILD_DIR = "dist";
 const CLIENT_SUBDIR = "client";
@@ -25,6 +26,7 @@ function getProjectPaths(appPath, entry) {
   };
 }
 async function getRemixConfig(root, mode = process.env.NODE_ENV) {
+  await muteRemixLogs();
   const { readConfig } = await import('@remix-run/dev/dist/config.js');
   const config = await readConfig(root, mode);
   if (process.env.LOCAL_DEV) {

package/dist/lib/remix-version-check.test.js

@@ -26,6 +26,7 @@ describe("remix-version-check", () => {
   it("warns when versions are out of sync", () => {
     const expectedVersion = "42.0.0-test";
     vi.mocked(requireMock).mockReturnValueOnce({
+      // Hydrogen expected version
       dependencies: { "@remix-run/dev": expectedVersion }
     });
     const outputMock = mockAndCaptureOutput();

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

@@ -1,8 +1,7 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { ts, tsx, js, jsx } from '@ast-grep/napi';
 import { findFileWithExtension, replaceFileContent } from '../../file.js';
+import { importLangAstGrep } from '../../ast.js';
 
-const astGrep = { ts, tsx, js, jsx };
 async function replaceRemixConfig(rootDirectory, formatConfig, newProperties) {
   const { filepath, astType } = await findFileWithExtension(
     rootDirectory,
@@ -14,7 +13,8 @@ async function replaceRemixConfig(rootDirectory, formatConfig, newProperties) {
     );
   }
   await replaceFileContent(filepath, formatConfig, async (content) => {
-    const root = astGrep[astType].parse(content).root();
+    const astGrep = await importLangAstGrep(astType);
+    const root = astGrep.parse(content).root();
     const remixConfigNode = root.find({
       rule: {
         kind: "object",
@@ -22,9 +22,11 @@ async function replaceRemixConfig(rootDirectory, formatConfig, newProperties) {
           any: [
             {
               kind: "export_statement"
+              // ESM
             },
             {
               kind: "assignment_expression",
+              // CJS
               has: {
                 kind: "member_expression",
                 field: "left",
@@ -77,7 +79,8 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
     if (content.includes(importStatement.split("from")[0])) {
       return;
     }
-    const root = astGrep[astType].parse(content).root();
+    const astGrep = await importLangAstGrep(astType);
+    const root = astGrep.parse(content).root();
     const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
     const linksReturnNode = root.find({
       utils: {