@shopify/cli-hydrogen 8.0.4 → 8.1.1

package/dist/lib/deps-optimizer.js

@@ -0,0 +1,146 @@
+import { BugError, AbortError } from '@shopify/cli-kit/node/error';
+import { extname } from '@shopify/cli-kit/node/path';
+import { renderFatalError } from '@shopify/cli-kit/node/ui';
+import colors from '@shopify/cli-kit/node/colors';
+import { importLangAstGrep } from './ast.js';
+import { replaceFileContent } from './file.js';
+import { outputInfo } from '@shopify/cli-kit/node/output';
+
+const throttledOptimizableDeps = /* @__PURE__ */ new Set();
+let debouncedBannerTimeout;
+function createEntryPointErrorHandler({
+  disableDepsOptimizer,
+  showSuccessBanner,
+  configFile,
+  formatOptionsPromise
+}) {
+  return async function entryPointErrorHandler({
+    optimizableDependency,
+    stack
+  }) {
+    const message = stack.split("\n")[0] ?? stack;
+    const cleanStack = stack.split("\n").filter((line) => !line.includes("virtual:remix")).join("\n");
+    const headline = "MiniOxygen encountered an error while running your app's entry point";
+    if (optimizableDependency) {
+      if (disableDepsOptimizer || !configFile) {
+        const depError = new BugError(
+          `${headline}:
+
+${colors.dim(message)}`,
+          `Try adding '${colors.yellow(
+            optimizableDependency
+          )}' to your Vite config in ssr.optimizeDeps.include`
+        );
+        depError.stack = cleanStack;
+        renderFatalError(depError);
+      } else if (!throttledOptimizableDeps.has(optimizableDependency)) {
+        throttledOptimizableDeps.add(optimizableDependency);
+        setTimeout(
+          () => throttledOptimizableDeps.delete(optimizableDependency),
+          2e3
+        );
+        addToViteOptimizeDeps(
+          optimizableDependency,
+          configFile,
+          await formatOptionsPromise,
+          cleanStack
+        ).then(() => {
+          setTimeout(() => {
+            outputInfo(
+              `
+Added '${colors.yellow(
+                optimizableDependency
+              )}' to your Vite config in ssr.optimizeDeps.include
+`
+            );
+          }, 200);
+          clearTimeout(debouncedBannerTimeout);
+          debouncedBannerTimeout = setTimeout(showSuccessBanner, 2e3);
+        }).catch((error) => {
+          clearTimeout(debouncedBannerTimeout);
+          renderFatalError(error);
+        });
+      }
+    } else {
+      const unknownError = new BugError(
+        headline + ":\n\n" + colors.dim(message)
+      );
+      unknownError.stack = cleanStack;
+      renderFatalError(unknownError);
+    }
+  };
+}
+const ssrOptimizeDepsIncludeRule = {
+  rule: {
+    pattern: "[$$$]",
+    inside: {
+      kind: "pair",
+      stopBy: "end",
+      has: {
+        field: "key",
+        regex: "include",
+        stopBy: "end"
+      },
+      inside: {
+        kind: "pair",
+        stopBy: "end",
+        has: {
+          field: "key",
+          regex: "optimizeDeps",
+          stopBy: "end"
+        },
+        inside: {
+          kind: "pair",
+          stopBy: "end",
+          has: {
+            field: "key",
+            regex: "ssr",
+            stopBy: "end"
+          }
+        }
+      }
+    }
+  }
+};
+async function addToViteOptimizeDeps(dependency, configFile, formatOptions, errorStack) {
+  const ext = extname(configFile).replace(/^\.m?/, "");
+  const astGrep = await importLangAstGrep(ext);
+  await replaceFileContent(configFile, formatOptions, (content) => {
+    const root = astGrep.parse(content).root();
+    const node = root.find(ssrOptimizeDepsIncludeRule);
+    if (!node) {
+      throw new AbortError(
+        `The dependency '${colors.yellow(
+          dependency
+        )}' needs to be optimized by Vite, but couldn't be added to the Vite config.`,
+        `Add the following code manually to your Vite config:
+
+` + colors.yellow(`ssr: {optimizeDeps: {include: ['${dependency}']}}`)
+      );
+    }
+    const isAlreadyAdded = !!node.find({
+      rule: {
+        kind: "string_fragment",
+        regex: `^${dependency}$`
+      }
+    });
+    if (isAlreadyAdded) {
+      const error = new BugError(
+        `A dependency related to '${colors.yellow(
+          dependency
+        )}' might need to be optimized by Vite but couldn't be configured automatically:
+
+${colors.dim(
+          errorStack.split("\n")[0]
+        )}`,
+        `If your app doesn't load, check the following stack trace and try fixing the problem by adding the imported dependency to the \`ssr.optimizeDeps.include\` array in your Vite config file.`
+      );
+      error.stack = errorStack;
+      throw error;
+    }
+    const { start } = node.range();
+    return content.slice(0, start.index + 1) + `'${dependency}',` + content.slice(start.index + 1);
+  });
+}
+
+export { addToViteOptimizeDeps, createEntryPointErrorHandler };

package/dist/lib/flags.js

@@ -78,8 +78,7 @@ const commonFlags = {
   codegen: {
     codegen: Flags.boolean({
       description: "Automatically generates GraphQL types for your project\u2019s Storefront API queries.",
-      required: false,
-      default: false
+      required: false
     }),
     "codegen-config-path": Flags.string({
       description: "Specifies a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if this file exists.",
@@ -106,8 +105,7 @@ const commonFlags = {
   debug: {
     debug: Flags.boolean({
       description: "Enables inspector connections to the server with a debugger such as Visual Studio Code or Chrome DevTools.",
-      env: "SHOPIFY_HYDROGEN_FLAG_DEBUG",
-      default: false
+      env: "SHOPIFY_HYDROGEN_FLAG_DEBUG"
     })
   },
   inspectorPort: {
@@ -119,7 +117,6 @@ const commonFlags = {
   diff: {
     diff: Flags.boolean({
       description: "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
-      default: false,
       required: false,
       hidden: true
     })
@@ -149,7 +146,6 @@ const commonFlags = {
       hidden: true,
       description: "Use tunneling for local development and push the tunneling domain to admin. Required to use Customer Account API's Oauth flow",
       required: false,
-      default: false,
       env: "SHOPIFY_HYDROGEN_FLAG_CUSTOMER_ACCOUNT_PUSH"
     })
   },
@@ -157,7 +153,6 @@ const commonFlags = {
     verbose: Flags.boolean({
       description: "Outputs more information about the command's execution.",
       required: false,
-      default: false,
       env: "SHOPIFY_HYDROGEN_FLAG_VERBOSE"
     })
   }

package/dist/lib/format-code.js

@@ -1,4 +1,5 @@
 import { extname } from '@shopify/cli-kit/node/path';
+import * as prettier from 'prettier';
 
 const DEFAULT_PRETTIER_CONFIG = {
   arrowParens: "always",
@@ -8,7 +9,6 @@ const DEFAULT_PRETTIER_CONFIG = {
 };
 async function getCodeFormatOptions(filePath = process.cwd()) {
   try {
-    const prettier = await import('prettier');
     return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
   } catch {
     return DEFAULT_PRETTIER_CONFIG;
@@ -16,7 +16,6 @@ async function getCodeFormatOptions(filePath = process.cwd()) {
 }
 async function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
   const ext = extname(filePath);
-  const prettier = await import('prettier');
   return prettier.format(content, {
     // Specify the TypeScript parser for ts/tsx files. Otherwise
     // we need to use the babel parser because the default parser

package/dist/lib/import-utils.js

@@ -0,0 +1,22 @@
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import { findUpAndReadPackageJson } from '@shopify/cli-kit/node/node-package-manager';
+import { joinPath, dirname } from '@shopify/cli-kit/node/path';
+
+const require2 = createRequire(import.meta.url);
+async function importVite(root) {
+  const vitePath = require2.resolve("vite", { paths: [root] });
+  const vitePackageJson = await findUpAndReadPackageJson(vitePath);
+  const viteNodeIndexFile = vitePackageJson.content.exports?.["."].import.default;
+  const viteNodePath = joinPath(
+    dirname(vitePackageJson.path),
+    viteNodeIndexFile
+  );
+  return import(pathToFileURL(viteNodePath).href);
+}
+function importLocal(packageName, path) {
+  const realPath = require2.resolve(packageName, { paths: [path] });
+  return import(pathToFileURL(realPath).href);
+}
+
+export { importLocal, importVite };

package/dist/lib/live-reload.js

@@ -1,13 +1,23 @@
 import http from 'node:http';
 import { handleRemixImportFail } from './remix-config.js';
+import { importLocal } from './import-utils.js';
 
-async function setupLiveReload(devServerPort) {
+async function setupLiveReload(devServerPort, root) {
   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')
+      importLocal(
+        "@remix-run/dev/dist/devServer_unstable/hmr.js",
+        root
+      ),
+      importLocal(
+        "@remix-run/dev/dist/devServer_unstable/socket.js",
+        root
+      ),
+      importLocal(
+        "@remix-run/dev/dist/devServer_unstable/hdr.js",
+        root
+      ),
+      importLocal("@remix-run/dev/dist/result.js", root)
     ]).catch(handleRemixImportFail);
     const state = {};
     const server = http.createServer(function(req, res) {

package/dist/lib/log.js

@@ -3,6 +3,7 @@ import { BugError } from '@shopify/cli-kit/node/error';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
 import { getGraphiQLUrl } from './graphiql-url.js';
+import { importLocal } from './import-utils.js';
 
 const originalConsole = { ...console };
 const methodsReplaced = /* @__PURE__ */ new Set();
@@ -153,6 +154,12 @@ function muteDevLogs({ workerReload } = {}) {
       () => {
       }
     ],
+    [
+      // This log must come from Rollup and does not go through Vite's customLogger
+      ([first]) => typeof first === "string" && /^Generated an empty chunk:/i.test(first),
+      () => {
+      }
+    ],
     [
       // Log new lines between Request logs and other logs
       ([first], existingMatches) => {
@@ -172,6 +179,18 @@ function muteDevLogs({ workerReload } = {}) {
       (params) => params
     ]
   );
+  const processStderrWrite = process.stderr.write;
+  const timeout = setTimeout(() => {
+    process.stderr.write = processStderrWrite;
+  }, 5e3);
+  process.stderr.write = (...args) => {
+    if (typeof args[0] === "string" && args[0].includes("Could not find ts-node")) {
+      clearTimeout(timeout);
+      process.stderr.write = processStderrWrite;
+      return false;
+    }
+    return processStderrWrite.apply(process.stderr, args);
+  };
 }
 const originalWrite = process.stdout.write;
 function muteAuthLogs({
@@ -353,9 +372,12 @@ function createRemixLogger() {
     }
   };
 }
-async function muteRemixLogs() {
+async function muteRemixLogs(root) {
   try {
-    const { logger } = await import('@remix-run/dev/dist/tux/logger.js');
+    const { logger } = await importLocal(
+      "@remix-run/dev/dist/tux/logger.js",
+      root
+    );
     logger.warn = logger.debug = logger.info = () => {
     };
   } catch {

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

@@ -1,8 +1,12 @@
+import { importLocal } from '../import-utils.js';
 import { handleMiniOxygenImportFail } from './common.js';
 export { DEFAULT_INSPECTOR_PORT } from './common.js';
 
-async function buildAssetsUrl(port) {
-  const { buildAssetsUrl: _buildAssetsUrl } = await import('@shopify/mini-oxygen').catch(handleMiniOxygenImportFail);
+async function buildAssetsUrl(port, root) {
+  const { buildAssetsUrl: _buildAssetsUrl } = await importLocal(
+    "@shopify/mini-oxygen",
+    root
+  ).catch(handleMiniOxygenImportFail);
   return _buildAssetsUrl(port);
 }
 async function startMiniOxygen(options, useNodeRuntime = false) {

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

@@ -2,12 +2,14 @@ import { AsyncLocalStorage } from 'node:async_hooks';
 import { readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
 import colors from '@shopify/cli-kit/node/colors';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { DEFAULT_INSPECTOR_PORT } from '../flags.js';
 import { handleMiniOxygenImportFail, SUBREQUEST_PROFILER_ENDPOINT, logRequestLine } from './common.js';
 import { setConstructors, createLogRequestEvent, handleDebugNetworkRequest, H2O_BINDING_NAME } from '../request-events.js';
 import { findPort } from '../find-port.js';
 import { getUtilityBannerlines } from '../dev-shared.js';
 import { outputNewline } from '@shopify/cli-kit/node/output';
+import { importLocal } from '../import-utils.js';
 
 async function startNodeServer({
   appPort,
@@ -16,9 +18,13 @@ async function startNodeServer({
   buildPathClient,
   env,
   debug = false,
-  inspectorPort
+  inspectorPort,
+  root
 }) {
-  const { startServer, Request, Response } = await import('@shopify/mini-oxygen/node').catch(handleMiniOxygenImportFail);
+  const { startServer, Request, Response } = await importLocal(
+    "@shopify/mini-oxygen/node",
+    root
+  ).catch(handleMiniOxygenImportFail);
   setConstructors({ Response });
   const logRequestEvent = createLogRequestEvent();
   const asyncLocalStorage = new AsyncLocalStorage();
@@ -40,8 +46,16 @@ async function startNodeServer({
       inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
     (await import('node:inspector')).open(inspectorPort);
   }
+  const readWorkerFile = () => readFile(buildPathWorkerFile).catch((error) => {
+    throw new AbortError(
+      `Could not read worker file.
+
+` + error.stack,
+      "Did you build the project?"
+    );
+  });
   const miniOxygen = await startServer({
-    script: await readFile(buildPathWorkerFile),
+    script: await readWorkerFile(),
     workerFile: buildPathWorkerFile,
     assetsDir: buildPathClient,
     publicPath: "",
@@ -100,7 +114,7 @@ async function startNodeServer({
           ...process.env
         };
       }
-      nextOptions.script = await readFile(buildPathWorkerFile);
+      nextOptions.script = await readWorkerFile();
       await miniOxygen.reload(nextOptions);
     },
     showBanner(options) {

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

@@ -1,12 +1,14 @@
 import { createRequire } from 'node:module';
 import { resolvePath, dirname } from '@shopify/cli-kit/node/path';
-import { readFile, createFileReadStream } from '@shopify/cli-kit/node/fs';
+import { createFileReadStream, readFile } from '@shopify/cli-kit/node/fs';
 import { renderSuccess } from '@shopify/cli-kit/node/ui';
 import { outputNewline } from '@shopify/cli-kit/node/output';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import colors from '@shopify/cli-kit/node/colors';
 import { handleMiniOxygenImportFail, logRequestLine, SUBREQUEST_PROFILER_ENDPOINT } from './common.js';
 import { TUNNEL_DOMAIN, getUtilityBannerlines, getDebugBannerLine } from '../dev-shared.js';
 import { setConstructors, handleDebugNetworkRequest, H2O_BINDING_NAME, createLogRequestEvent } from '../request-events.js';
+import { importLocal } from '../import-utils.js';
 
 async function startWorkerdServer({
   root,
@@ -19,7 +21,10 @@ async function startWorkerdServer({
   buildPathClient,
   env
 }) {
-  const { createMiniOxygen, Response } = await import('@shopify/mini-oxygen').catch(handleMiniOxygenImportFail);
+  const { createMiniOxygen, Response } = await importLocal(
+    "@shopify/mini-oxygen",
+    root
+  ).catch(handleMiniOxygenImportFail);
   setConstructors({ Response });
   async function handleCustomerAccountSchema() {
     const require2 = createRequire(import.meta.url);
@@ -30,8 +35,16 @@ async function startWorkerdServer({
       headers: { "Content-Type": "application/json" }
     });
   }
-  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
   const mainWorkerName = "hydrogen";
+  const absoluteBundlePath = resolvePath(root, buildPathWorkerFile);
+  const readWorkerFile = () => readFile(absoluteBundlePath).catch((error) => {
+    throw new AbortError(
+      `Could not read worker file.
+
+` + error.stack,
+      "Did you build the project?"
+    );
+  });
   const miniOxygen = createMiniOxygen({
     debug,
     port: appPort,
@@ -74,7 +87,7 @@ async function startWorkerdServer({
           {
             type: "ESModule",
             path: absoluteBundlePath,
-            contents: await readFile(absoluteBundlePath)
+            contents: await readWorkerFile()
           }
         ],
         bindings: { ...env },
@@ -94,7 +107,7 @@ async function startWorkerdServer({
       return miniOxygen.reload(async ({ workers }) => {
         const mainWorker = workers.find(({ name }) => name === mainWorkerName);
         if (Array.isArray(mainWorker.modules) && mainWorker.modules[0]) {
-          mainWorker.modules[0].contents = await readFile(absoluteBundlePath);
+          mainWorker.modules[0].contents = await readWorkerFile();
         }
         if (nextOptions) {
           mainWorker.bindings = { ...nextOptions?.env ?? env };

package/dist/lib/onboarding/local.js

@@ -42,7 +42,7 @@ async function setupLocalStarterTemplate(options, controller) {
       await waitForJob(storefrontInfo.session, jobId);
     return storefront;
   }).catch(abort);
-  const templateDir = getStarterDir();
+  const templateDir = await getStarterDir();
   let backgroundWorkPromise = copy(
     templateDir,
     project.directory,

package/dist/lib/onboarding/setup-template.mocks.js

@@ -1,25 +1,21 @@
-import { fileURLToPath } from 'node:url';
 import { vi } from 'vitest';
 import { remove, createSymlink } from 'fs-extra/esm';
 import { writeFile } from '@shopify/cli-kit/node/fs';
-import { joinPath } from '@shopify/cli-kit/node/path';
-import { getRepoNodeModules } from '../build.js';
+import { dirname, joinPath } from '@shopify/cli-kit/node/path';
+import { getSkeletonSourceDir, getRepoNodeModules } from '../build.js';
 
 const { renderTasksHook } = vi.hoisted(() => ({ renderTasksHook: vi.fn() }));
 vi.mock("../template-downloader.js", async () => ({
   downloadMonorepoTemplates: () => Promise.resolve({
     version: "",
-    templatesDir: fileURLToPath(
-      new URL("../../../../../templates", import.meta.url)
-    ),
-    examplesDir: fileURLToPath(
-      new URL("../../../../../examples", import.meta.url)
+    templatesDir: dirname(getSkeletonSourceDir()),
+    examplesDir: dirname(getSkeletonSourceDir()).replace(
+      "templates",
+      "examples"
     )
   }),
   downloadExternalRepo: () => Promise.resolve({
-    templateDir: fileURLToPath(
-      new URL("../../../../../templates/skeleton", import.meta.url)
-    )
+    templateDir: getSkeletonSourceDir()
   })
 }));
 vi.mock("@shopify/cli-kit/node/ui", async () => {

package/dist/lib/remix-config.js

@@ -1,14 +1,15 @@
 import { createRequire } from 'node:module';
-import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 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';
-import { getRequiredRemixVersion } from './remix-version-check.js';
+import { REQUIRED_REMIX_VERSION } from './remix-version-check.js';
 import { findFileWithExtension } from './file.js';
 import { getViteConfig } from './vite-config.js';
+import { importLocal } from './import-utils.js';
+import { isHydrogenMonorepo, hydrogenPackagesPath } from './build.js';
 
 async function hasRemixConfigFile(root) {
   const result = await findFileWithExtension(root, "remix.config");
@@ -33,7 +34,7 @@ function getProjectPaths(appPath) {
   };
 }
 function handleRemixImportFail() {
-  const remixVersion = getRequiredRemixVersion();
+  const remixVersion = REQUIRED_REMIX_VERSION;
   throw new AbortError(
     "Could not load Remix packages.",
     `Please make sure you have \`@remix-run/dev@${remixVersion}\` installed and all the other Remix packages have the same version.`
@@ -50,13 +51,14 @@ async function getRemixConfig(root, mode = process.env.NODE_ENV) {
   if (!await hasRemixConfigFile(root)) {
     return (await getViteConfig(root)).remixConfig;
   }
-  await muteRemixLogs();
-  const { readConfig } = await import('@remix-run/dev/dist/config.js').catch(
-    handleRemixImportFail
-  );
+  await muteRemixLogs(root);
+  const { readConfig } = await importLocal(
+    "@remix-run/dev/dist/config.js",
+    root
+  ).catch(handleRemixImportFail);
   const config = await readConfig(root, mode);
-  if (process.env.LOCAL_DEV) {
-    const packagesPath = fileURLToPath(new URL("../../..", import.meta.url));
+  if (isHydrogenMonorepo && hydrogenPackagesPath) {
+    const packagesPath = hydrogenPackagesPath;
     config.watchPaths ??= [];
     config.watchPaths.push(
       ...(await readdir(packagesPath)).map(

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

@@ -1,16 +1,9 @@
 import { createRequire } from 'node:module';
-import { fileURLToPath } from 'node:url';
 import { renderWarning } from '@shopify/cli-kit/node/ui';
 
-function getRequiredRemixVersion(require2 = createRequire(import.meta.url)) {
-  const hydrogenPkgJson = require2(fileURLToPath(
-    new URL("../../package.json", import.meta.url)
-  ));
-  return hydrogenPkgJson.peerDependencies["@remix-run/dev"];
-}
-function checkRemixVersions() {
+const REQUIRED_REMIX_VERSION = "^2.1.0";
+function checkRemixVersions(projectPath, requiredVersionInHydrogen = REQUIRED_REMIX_VERSION) {
   const require2 = createRequire(import.meta.url);
-  const requiredVersionInHydrogen = getRequiredRemixVersion(require2);
   const satisfiesSemver = require2("semver/functions/satisfies.js");
   const pkgs = [
     "dev",
@@ -20,7 +13,7 @@ function checkRemixVersions() {
     "node",
     "express",
     "eslint-config"
-  ].map((name) => getRemixPackageVersion(require2, name));
+  ].map((name) => getRemixPackageVersion(require2, name, projectPath));
   const outOfSyncPkgs = pkgs.filter(
     (pkg) => pkg.version && !satisfiesSemver(pkg.version, requiredVersionInHydrogen)
   );
@@ -40,11 +33,13 @@ function checkRemixVersions() {
     ]
   });
 }
-function getRemixPackageVersion(require2, name) {
+function getRemixPackageVersion(require2, name, root) {
   const pkgName = "@remix-run/" + name;
   const result = { name: pkgName, version: "" };
   try {
-    const pkgJsonPath = require2.resolve(`${pkgName}/package.json`);
+    const pkgJsonPath = require2.resolve(`${pkgName}/package.json`, {
+      paths: [root]
+    });
     const pkgJson = require2(pkgJsonPath);
     result.version = pkgJson.version;
   } catch {
@@ -52,4 +47,4 @@ function getRemixPackageVersion(require2, name) {
   return result;
 }
 
-export { checkRemixVersions, getRequiredRemixVersion };
+export { REQUIRED_REMIX_VERSION, checkRemixVersions };

package/dist/lib/resource-cleanup.js

@@ -0,0 +1,13 @@
+function setupResourceCleanup(cleanup) {
+  let closingPromise;
+  const processExit = process.exit;
+  process.exit = async (code) => {
+    closingPromise ??= cleanup();
+    const timeout = setTimeout(() => processExit(code), 5e3);
+    await closingPromise;
+    clearTimeout(timeout);
+    return processExit(code);
+  };
+}
+
+export { setupResourceCleanup };

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

@@ -1,7 +1,7 @@
 import { readFile, writeFile, fileExists } from '@shopify/cli-kit/node/fs';
 import { joinPath } from '@shopify/cli-kit/node/path';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { getAssetDir } from '../../build.js';
+import { getAssetsDir } from '../../build.js';
 
 const SETUP_CSS_STRATEGIES = [
   "tailwind",
@@ -9,8 +9,8 @@ const SETUP_CSS_STRATEGIES = [
   "vanilla-extract",
   "postcss"
 ];
-function copyAssets(feature, assets, rootDirectory, replacer = (content, filename) => content) {
-  const setupAssetsPath = getAssetDir(feature);
+async function copyAssets(feature, assets, rootDirectory, replacer = (content, filename) => content) {
+  const setupAssetsPath = await getAssetsDir(feature);
   return Promise.all(
     Object.entries(assets).map(async ([source, destination]) => {
       const content = await readFile(joinPath(setupAssetsPath, source));

package/dist/lib/setups/css/css-modules.js

@@ -1,14 +1,14 @@
 import { mergePackageJson } from '../../file.js';
 import { getCodeFormatOptions } from '../../format-code.js';
 import { injectCssBundlingLink } from './replacers.js';
-import { getAssetDir } from '../../build.js';
+import { getAssetsDir } from '../../build.js';
 
 async function setupCssModules({
   rootDirectory,
   appDirectory
 }) {
   const workPromise = Promise.all([
-    mergePackageJson(getAssetDir("css-modules"), rootDirectory),
+    mergePackageJson(await getAssetsDir("css-modules"), rootDirectory),
     getCodeFormatOptions(rootDirectory).then(
       (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
     )

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

@@ -1,7 +1,7 @@
 import { outputInfo } from '@shopify/cli-kit/node/output';
 import { mergePackageJson } from '../../file.js';
 import { canWriteFiles, copyAssets } from './assets.js';
-import { getAssetDir } from '../../build.js';
+import { getAssetsDir } from '../../build.js';
 
 async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
   const assetMap = {
@@ -18,7 +18,7 @@ async function setupPostCss({ rootDirectory, appDirectory, ...futureOptions }, f
     return;
   }
   const workPromise = Promise.all([
-    mergePackageJson(getAssetDir("postcss"), rootDirectory),
+    mergePackageJson(await getAssetsDir("postcss"), rootDirectory),
     copyAssets("postcss", assetMap, rootDirectory)
   ]);
   return {