@shopify/cli-hydrogen 8.1.0 → 8.2.0

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

@@ -2,73 +2,6 @@ import { AbortError } from '@shopify/cli-kit/node/error';
 import { findFileWithExtension, replaceFileContent } from '../../file.js';
 import { importLangAstGrep } from '../../ast.js';
 
-async function replaceRemixConfig(rootDirectory, formatConfig, newProperties) {
-  const { filepath, astType } = await findFileWithExtension(
-    rootDirectory,
-    "remix.config"
-  );
-  if (!filepath || !astType) {
-    throw new AbortError(
-      `Could not find remix.config.js file in ${rootDirectory}`
-    );
-  }
-  await replaceFileContent(filepath, formatConfig, async (content) => {
-    const astGrep = await importLangAstGrep(astType);
-    const root = astGrep.parse(content).root();
-    const remixConfigNode = root.find({
-      rule: {
-        kind: "object",
-        inside: {
-          any: [
-            {
-              kind: "export_statement"
-              // ESM
-            },
-            {
-              kind: "assignment_expression",
-              // CJS
-              has: {
-                kind: "member_expression",
-                field: "left",
-                pattern: "module.exports"
-              }
-            }
-          ]
-        }
-      }
-    });
-    if (!remixConfigNode) {
-      throw new AbortError(
-        "Could not find a default export in remix.config.js"
-      );
-    }
-    newProperties = { ...newProperties };
-    for (const key of Object.keys(newProperties)) {
-      const propertyNode = remixConfigNode.find({
-        rule: {
-          kind: "pair",
-          has: {
-            field: "key",
-            regex: `^${key}$`
-          }
-        }
-      });
-      if (propertyNode?.text().endsWith(" " + JSON.stringify(newProperties[key]))) {
-        delete newProperties[key];
-      }
-    }
-    if (Object.keys(newProperties).length === 0) {
-      return;
-    }
-    const childrenNodes = remixConfigNode.children();
-    const lastNode = childrenNodes.find((node) => node.text().startsWith("future:")) ?? childrenNodes.pop();
-    if (!lastNode) {
-      throw new AbortError("Could not add properties to Remix config");
-    }
-    const { start } = lastNode.range();
-    return content.slice(0, start.index) + JSON.stringify(newProperties).slice(1, -1) + "," + content.slice(start.index);
-  });
-}
 async function replaceRootLinks(appDirectory, formatConfig, importer) {
   const { filepath, astType } = await findFileWithExtension(appDirectory, "root");
   if (!filepath || !astType) {
@@ -81,7 +14,8 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
     }
     const astGrep = await importLangAstGrep(astType);
     const root = astGrep.parse(content).root();
-    const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
+    const importNodes = root.findAll({ rule: { kind: "import_statement" } });
+    const lastImportNode = importNodes.findLast((node) => node.text().includes(".css")) || importNodes.pop();
     const linksReturnNode = root.find({
       utils: {
         "has-links-id": {
@@ -127,14 +61,78 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
     );
   });
 }
-function injectCssBundlingLink(appDirectory, formatConfig) {
-  return replaceRootLinks(appDirectory, formatConfig, {
-    name: "cssBundleHref",
-    path: "@remix-run/css-bundle",
-    isDefault: false,
-    isConditional: true,
-    isAbsolute: true
+async function injectVitePlugin(rootDirectory, formatConfig, importer, pluginOptions) {
+  const { filepath, astType } = await findFileWithExtension(
+    rootDirectory,
+    "vite.config"
+  );
+  if (!filepath || !astType) {
+    throw new AbortError(`Could not find vite.config file in ${rootDirectory}`);
+  }
+  await replaceFileContent(filepath, formatConfig, async (content) => {
+    const importStatement = `import ${importer.isDefault ? importer.name : `{${importer.name}}`} from '${importer.path}';`;
+    if (new RegExp(`['"]${importer.path.replace("/", "\\/")}['"]`).test(content)) {
+      return;
+    }
+    const astGrep = await importLangAstGrep(astType);
+    const root = astGrep.parse(content).root();
+    const lastImportNode = root.findAll({ rule: { kind: "import_statement" } }).pop();
+    const vitePluginListNode = root.find(vitePluginListRule);
+    if (!lastImportNode || !vitePluginListNode) {
+      throw new AbortError(
+        'Could not find a "plugins" key in Vite config file. Please add one and try again.'
+      );
+    }
+    const lastImportContent = lastImportNode.text();
+    const linksExportReturnContent = vitePluginListNode.text();
+    const newVitePluginItem = `${importer.name}(${pluginOptions ? JSON.stringify(pluginOptions) : ""})`;
+    return content.replace(lastImportContent, lastImportContent + "\n" + importStatement).replace(
+      linksExportReturnContent,
+      linksExportReturnContent.replace("[", `[${newVitePluginItem},`)
+    );
   });
 }
+const vitePluginListRule = {
+  rule: {
+    // An array
+    pattern: "[$$$]",
+    inside: {
+      // directly in the value part of a `plugins` key
+      kind: "pair",
+      stopBy: "neighbor",
+      has: {
+        field: "key",
+        regex: "^plugins$",
+        stopBy: "neighbor"
+      },
+      inside: {
+        // directly inside an object (the Vite config object)
+        kind: "object",
+        stopBy: "neighbor",
+        // that is exported but is not inside another object
+        // e.g. `export default {something:{plugins:[]}}`
+        // doesn't match, but `export default {plugins:[]}` does.
+        // And `export default defineConfig({plugins:[]})` matches too.
+        all: [
+          {
+            inside: {
+              kind: "export_statement",
+              regex: "export default",
+              stopBy: "end"
+            }
+          },
+          {
+            not: {
+              inside: {
+                kind: "object",
+                stopBy: "end"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+};
 
-export { injectCssBundlingLink, replaceRemixConfig, replaceRootLinks };
+export { injectVitePlugin, replaceRootLinks };

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

@@ -3,21 +3,15 @@ import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { mergePackageJson } from '../../file.js';
 import { canWriteFiles, copyAssets } from './assets.js';
 import { getCodeFormatOptions } from '../../format-code.js';
-import { replaceRootLinks } from './replacers.js';
+import { replaceRootLinks, injectVitePlugin } from './replacers.js';
 import { getAssetsDir } from '../../build.js';
 
 const tailwindCssPath = "styles/tailwind.css";
-async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions }, force = false) {
+async function setupTailwind({ rootDirectory, appDirectory }, force = false) {
   const relativeAppDirectory = relativePath(rootDirectory, appDirectory);
   const assetMap = {
-    "tailwind.config.js": "tailwind.config.js",
-    "postcss.config.js": "postcss.config.js",
     "tailwind.css": joinPath(relativeAppDirectory, tailwindCssPath)
   };
-  if (futureOptions.tailwind && futureOptions.postcss) {
-    outputInfo(`Tailwind and PostCSS are already setup in ${rootDirectory}.`);
-    return;
-  }
   if (!await canWriteFiles(assetMap, appDirectory, force)) {
     outputInfo(
       `Skipping CSS setup as some files already exist. You may use \`--force\` or \`-f\` to override it.`
@@ -26,24 +20,26 @@ async function setupTailwind({ rootDirectory, appDirectory, ...futureOptions },
   }
   const workPromise = Promise.all([
     mergePackageJson(await getAssetsDir("tailwind"), rootDirectory),
-    copyAssets(
-      "tailwind",
-      assetMap,
-      rootDirectory,
-      (content, filepath) => filepath === "tailwind.config.js" ? content.replace("{src-dir}", relativeAppDirectory) : content
-    ),
+    copyAssets("tailwind", assetMap, rootDirectory),
     getCodeFormatOptions(rootDirectory).then(
-      (formatConfig) => replaceRootLinks(appDirectory, formatConfig, {
-        name: "tailwindCss",
-        path: tailwindCssPath,
-        isDefault: true
-      })
+      (formatConfig) => Promise.all([
+        replaceRootLinks(appDirectory, formatConfig, {
+          name: "tailwindCss",
+          path: `${tailwindCssPath}?url`,
+          isDefault: true
+        }),
+        injectVitePlugin(rootDirectory, formatConfig, {
+          name: "tailwindcss",
+          path: "@tailwindcss/vite",
+          isDefault: true
+        })
+      ])
     )
   ]);
   return {
     workPromise,
     generatedAssets: Object.values(assetMap),
-    helpUrl: "https://tailwindcss.com/docs/configuration"
+    needsInstallDeps: true
   };
 }
 

package/dist/lib/setups/css/vanilla-extract.js

@@ -1,22 +1,25 @@
 import { mergePackageJson } from '../../file.js';
 import { getCodeFormatOptions } from '../../format-code.js';
-import { injectCssBundlingLink } from './replacers.js';
+import { injectVitePlugin } from './replacers.js';
 import { getAssetsDir } from '../../build.js';
 
 async function setupVanillaExtract({
-  rootDirectory,
-  appDirectory
+  rootDirectory
 }) {
   const workPromise = Promise.all([
     mergePackageJson(await getAssetsDir("vanilla-extract"), rootDirectory),
     getCodeFormatOptions(rootDirectory).then(
-      (formatConfig) => injectCssBundlingLink(appDirectory, formatConfig)
+      (formatConfig) => injectVitePlugin(rootDirectory, formatConfig, {
+        path: "@vanilla-extract/vite-plugin",
+        name: "vanillaExtractPlugin",
+        isDefault: false
+      })
     )
   ]);
   return {
     workPromise,
     generatedAssets: [],
-    helpUrl: "https://vanilla-extract.style/documentation/styling/"
+    needsInstallDeps: true
   };
 }
 

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

@@ -162,8 +162,7 @@ async function replaceRemixEnv({ rootDirectory }, formatConfig, localeExtractImp
     return;
   }
   await replaceFileContent(envPath, formatConfig, async (content) => {
-    if (content.includes(`Storefront<`))
-      return;
+    if (content.includes(`Storefront<`)) return;
     const astGrep = await importLangAstGrep("ts");
     const root = astGrep.parse(content).root();
     const storefrontTypeNode = root.find({

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

@@ -91,10 +91,8 @@ async function generateRoutes(options, remixConfig) {
   };
 }
 async function getLocalePrefix(routesDirectory, { localePrefix, routeName, v1RouteConvention }) {
-  if (localePrefix)
-    return localePrefix;
-  if (localePrefix !== void 0 || routeName === "all")
-    return;
+  if (localePrefix) return localePrefix;
+  if (localePrefix !== void 0 || routeName === "all") return;
   const existingFiles = await readdir(routesDirectory).catch(() => []);
   const coreRouteWithLocaleRE = v1RouteConvention ? /^\(\$(\w+)\)$/ : /^\(\$(\w+)\)\.(_index|\$|cart).[jt]sx?$/;
   const coreRouteWithLocale = existingFiles.find(
@@ -114,19 +112,12 @@ async function generateProjectFile(routeFrom, {
   formatOptions,
   localePrefix,
   v1RouteConvention = false,
-  signal
+  signal,
+  overwriteFileDeps = true
 }) {
   templatesRoot ??= await getStarterDir();
   const extension = (routeFrom.match(/(\.[jt]sx?)$/) ?? [])[1] ?? ".tsx";
   routeFrom = routeFrom.replace(extension, "");
-  const routeTemplatePath = await getTemplateAppFile(
-    routeFrom + extension,
-    templatesRoot
-  );
-  const allFilesToGenerate = await findRouteDependencies(
-    routeTemplatePath,
-    await getTemplateAppFile("", templatesRoot)
-  );
   const routeDestinationPath = joinPath(
     appDirectory,
     getDestinationRoute(routeFrom, localePrefix, { v1RouteConvention }) + (typescript ? extension : extension.replace(".ts", ".js"))
@@ -144,16 +135,26 @@ async function generateProjectFile(routeFrom, {
       cancellationMessage: "No",
       abortSignal: signal
     });
-    if (!shouldOverwrite)
-      return { ...result, operation: "skipped" };
+    if (!shouldOverwrite) return { ...result, operation: "skipped" };
     result.operation = "replaced";
   }
+  const routeTemplatePath = await getTemplateAppFile(
+    routeFrom + extension,
+    templatesRoot
+  );
+  const allFilesToGenerate = await findRouteDependencies(
+    routeTemplatePath,
+    await getTemplateAppFile("", templatesRoot)
+  );
   for (const filePath of allFilesToGenerate) {
     const isRoute = filePath.startsWith(ASSETS_STARTER_DIR_ROUTES + "/");
     const destinationPath = isRoute ? routeDestinationPath : joinPath(
       appDirectory,
       filePath.replace(/\.ts(x?)$/, `.${typescript ? "ts$1" : "js$1"}`)
     );
+    if (!overwriteFileDeps && await fileExists(destinationPath)) {
+      continue;
+    }
     if (!await fileExists(dirname(destinationPath))) {
       await mkdir(dirname(destinationPath));
     }
@@ -200,8 +201,7 @@ async function findRouteDependencies(routeFilePath, appDirectory) {
   for (const filePath of filesToCheck) {
     const importMatches = (await readFile(filePath, { encoding: "utf8" })).matchAll(/^(import|export)\s+.*?\s+from\s+['"](.*?)['"];?$/gims);
     for (let [, , match] of importMatches) {
-      if (!match || !/^(\.|~)/.test(match))
-        continue;
+      if (!match || !/^(\.|~)/.test(match)) continue;
       match = match.replace(/\?[a-z.]+$/, "");
       match = match.replace(
         "~",
@@ -253,8 +253,7 @@ async function copyRouteTemplate({
   adapter
 }) {
   const routePath = joinPath(routesDirectory, routeName);
-  if (await fileExists(routePath))
-    return;
+  if (await fileExists(routePath)) return;
   const templatePath = await getAssetsDir("routes", templateName);
   if (!await fileExists(templatePath)) {
     throw new Error("Unknown strategy");

package/dist/lib/shell.js

@@ -30,10 +30,8 @@ async function supportsShell(shell) {
   }
 }
 function getShellAliasDefinitionFile(shell) {
-  if (shell === "bash")
-    return "~/.bashrc";
-  if (shell === "zsh")
-    return "~/.zshrc";
+  if (shell === "bash") return "~/.bashrc";
+  if (shell === "zsh") return "~/.zshrc";
   return `~/.config/fish/functions/${ALIAS_NAME}.fish`;
 }
 async function hasAliasDefinition(aliasName, shell) {
@@ -71,10 +69,8 @@ async function shellWriteFile(shell, content, append = false) {
   }
 }
 async function shellWriteAlias(shell, aliasName, content) {
-  if (!await supportsShell(shell))
-    return false;
-  if (await hasAliasDefinition(aliasName, shell))
-    return true;
+  if (!await supportsShell(shell)) return false;
+  if (await hasAliasDefinition(aliasName, shell)) return true;
   return await shellWriteFile(shell, content, shell !== "fish");
 }
 async function shellRunScript(script, shellBin) {
@@ -98,8 +94,7 @@ async function hasCliAlias() {
       await execAsync(`Get-Alias -Name ${ALIAS_NAME}`);
     } else {
       const shell = os.userInfo().shell?.split("/").pop() ?? "bash";
-      if (!isKnownUnixShell(shell))
-        return false;
+      if (!isKnownUnixShell(shell)) return false;
       return await hasAliasDefinition(ALIAS_NAME, shell);
     }
     return true;

package/dist/lib/template-diff.js

@@ -1,12 +1,12 @@
+import { symlink, cp } from 'node:fs/promises';
 import { temporaryDirectory } from 'tempy';
-import { createSymlink, copy } from 'fs-extra/esm';
 import { copyFile, fileExists, removeFile } from '@shopify/cli-kit/node/fs';
 import { joinPath, relativePath } from '@shopify/cli-kit/node/path';
 import { readAndParsePackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { outputInfo } from '@shopify/cli-kit/node/output';
 import colors from '@shopify/cli-kit/node/colors';
 import { getStarterDir, isHydrogenMonorepo, getRepoNodeModules } from './build.js';
-import { mergePackageJson } from './file.js';
+import { mergePackageJson, mergeTsConfig } from './file.js';
 
 async function prepareDiffDirectory(diffDirectory, watch) {
   const targetDirectory = temporaryDirectory({ prefix: "tmp-hydrogen-diff-" });
@@ -20,106 +20,81 @@ ${colors.dim(
   );
   const templateDirectory = await getStarterDir(isHydrogenMonorepo);
   await applyTemplateDiff(targetDirectory, diffDirectory, templateDirectory);
-  await createSymlink(
+  await symlink(
     await getRepoNodeModules(),
     joinPath(targetDirectory, "node_modules")
   );
-  const pw = watch ? await import('@parcel/watcher').catch((error) => {
-    console.log("Could not watch for file changes.", error);
-  }) : void 0;
-  const subscriptions = await Promise.all([
+  const { default: chokidar } = await import('chokidar');
+  const subscriptions = watch ? [
     // Copy back the changes in generated d.ts from the
     // temporary directory to the original diff directory.
-    pw?.subscribe(
-      targetDirectory,
-      (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
-        events.map((event) => {
-          return copyFile(
-            event.path,
-            joinPath(diffDirectory, relativePath(targetDirectory, event.path))
-          );
-        });
-      },
-      { ignore: ["!*.generated.d.ts"] }
-    ),
+    chokidar.watch(joinPath(targetDirectory, "*.generated.d.ts"), {
+      ignoreInitial: true
+    }).on("all", async (eventName, eventFilePath) => {
+      const targetFile = joinPath(
+        diffDirectory,
+        relativePath(targetDirectory, eventFilePath)
+      );
+      await copyFile(eventFilePath, targetFile);
+    }),
     // Copy new changes in the original diff directory to
     // the temporary directory.
-    pw?.subscribe(
-      diffDirectory,
-      async (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
-        await events.map((event) => {
-          const targetFile = joinPath(
-            targetDirectory,
-            relativePath(diffDirectory, event.path)
-          );
-          const fileInTemplate = event.path.replace(
-            diffDirectory,
-            templateDirectory
-          );
-          return event.type === "delete" ? fileExists(fileInTemplate).then(
-            (exists) => exists ? (
-              // Replace it with original file from the starter template.
-              copyFile(fileInTemplate, targetFile)
-            ) : (
-              // Remove the file otherwise.
-              removeFile(targetFile)
-            )
-          ).catch(() => {
-          }) : copyFile(event.path, targetFile);
+    chokidar.watch(diffDirectory, {
+      ignoreInitial: true,
+      ignored: [
+        "**/*.generated.d.ts",
+        "**/package.json",
+        "**/tsconfig.json",
+        "**/.shopify"
+      ]
+    }).on("all", async (eventName, eventFilePath) => {
+      const targetFile = joinPath(
+        targetDirectory,
+        relativePath(diffDirectory, eventFilePath)
+      );
+      const fileInTemplate = eventFilePath.replace(
+        diffDirectory,
+        templateDirectory
+      );
+      if (eventName === "unlink") {
+        return fileExists(fileInTemplate).then(
+          (exists) => exists ? (
+            // Replace it with original file from the starter template.
+            copyFile(fileInTemplate, targetFile)
+          ) : (
+            // Remove the file otherwise.
+            removeFile(targetFile)
+          )
+        ).catch(() => {
         });
-      },
-      {
-        ignore: [
-          "*.generated.d.ts",
-          "package.json",
-          "tsconfig.json",
-          ".shopify"
-        ]
       }
-    ),
+      return copyFile(eventFilePath, targetFile);
+    }),
     // Copy new changes in the starter template to the temporary
     // directory only if they don't overwrite the files in the
     // original diff directory, which have higher priority.
-    pw?.subscribe(
-      templateDirectory,
-      async (error, events) => {
-        if (error) {
-          console.error(error);
-          return;
-        }
-        await events.map(async (event) => {
-          const fileInDiff = event.path.replace(
-            templateDirectory,
-            diffDirectory
-          );
-          if (await fileExists(fileInDiff))
-            return;
-          const targetFile = joinPath(
-            targetDirectory,
-            relativePath(templateDirectory, event.path)
-          );
-          return event.type === "delete" ? removeFile(targetFile).catch(() => {
-          }) : copyFile(event.path, targetFile);
-        });
-      },
-      {
-        ignore: [
-          "*.generated.d.ts",
-          "package.json",
-          "tsconfig.json",
-          ".shopify"
-        ]
-      }
-    )
-  ]);
+    chokidar.watch(templateDirectory, {
+      ignoreInitial: true,
+      ignored: [
+        "**/*.generated.d.ts",
+        "**/package.json",
+        "**/tsconfig.json",
+        "**/.shopify"
+      ]
+    }).on("all", async (eventName, eventFilePath) => {
+      const fileInDiff = eventFilePath.replace(
+        templateDirectory,
+        diffDirectory
+      );
+      if (await fileExists(fileInDiff)) return;
+      const targetFile = joinPath(
+        targetDirectory,
+        relativePath(templateDirectory, eventFilePath)
+      );
+      return eventName === "unlink" ? removeFile(targetFile).catch(() => {
+      }) : copyFile(eventFilePath, targetFile);
+    })
+  ] : [];
   return {
     /**
      * The temporary directory with the starter template and diff applied.
@@ -129,7 +104,7 @@ ${colors.dim(
      * Removes the temporary directory and stops the file watchers.
      */
     cleanup: async () => {
-      await Promise.all(subscriptions.map((sub) => sub?.unsubscribe()));
+      await Promise.all(subscriptions.map((sub) => sub.close()));
       await removeFile(targetDirectory);
     },
     /**
@@ -139,11 +114,10 @@ ${colors.dim(
      */
     async copyShopifyConfig() {
       const source = joinPath(targetDirectory, ".shopify");
-      if (!await fileExists(source))
-        return;
+      if (!await fileExists(source)) return;
       const target = joinPath(diffDirectory, ".shopify");
       await removeFile(target);
-      await copy(source, target, { overwrite: true });
+      await cp(source, target, { recursive: true, force: true });
     },
     /**
      * Brings the `dist` directory back to the original project.
@@ -153,8 +127,9 @@ ${colors.dim(
       const target = joinPath(diffDirectory, "dist");
       await removeFile(target);
       await Promise.all([
-        copy(joinPath(targetDirectory, "dist"), target, {
-          overwrite: true
+        cp(joinPath(targetDirectory, "dist"), target, {
+          force: true,
+          recursive: true
         }),
         copyFile(
           joinPath(targetDirectory, ".env"),
@@ -166,23 +141,26 @@ ${colors.dim(
 }
 async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir) {
   templateDir ??= await getStarterDir();
-  const [diffPkgJson, templatePkgJson] = await Promise.all([
-    readAndParsePackageJson(joinPath(diffDirectory, "package.json")),
-    readAndParsePackageJson(joinPath(templateDir, "package.json"))
-  ]);
+  const diffPkgJson = await readAndParsePackageJson(
+    joinPath(diffDirectory, "package.json")
+  );
   const diffOptions = diffPkgJson["h2:diff"] ?? {};
   const createFilter = (re, skipFiles) => (filepath) => {
     const filename = relativePath(templateDir, filepath);
     return !re.test(filename) && !skipFiles?.includes(filename);
   };
-  await copy(templateDir, targetDirectory, {
+  await cp(templateDir, targetDirectory, {
+    force: true,
+    recursive: true,
     filter: createFilter(
       // Do not copy .shopify from skeleton to avoid linking in examples inadvertedly
       /(^|\/|\\)(dist|node_modules|\.cache|\.turbo|\.shopify|CHANGELOG\.md)(\/|\\|$)/i,
       diffOptions.skipFiles || []
     )
   });
-  await copy(diffDirectory, targetDirectory, {
+  await cp(diffDirectory, targetDirectory, {
+    force: true,
+    recursive: true,
     filter: createFilter(
       /(^|\/|\\)(dist|node_modules|\.cache|.turbo|package\.json|tsconfig\.json)(\/|\\|$)/i
     )
@@ -190,8 +168,8 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir) {
   await mergePackageJson(diffDirectory, targetDirectory, {
     ignoredKeys: ["h2:diff"],
     onResult: (pkgJson) => {
-      if (pkgJson.dependencies && templatePkgJson.dependencies) {
-        pkgJson.dependencies["@shopify/cli-hydrogen"] = templatePkgJson.dependencies["@shopify/cli-hydrogen"] ?? "*";
+      if (pkgJson.dependencies) {
+        delete pkgJson.dependencies["@shopify/cli-hydrogen"];
       }
       for (const key of ["build", "dev", "preview"]) {
         const scriptLine = pkgJson.scripts?.[key];
@@ -212,6 +190,7 @@ async function applyTemplateDiff(targetDirectory, diffDirectory, templateDir) {
       return pkgJson;
     }
   });
+  await mergeTsConfig(diffDirectory, targetDirectory);
 }
 
 export { applyTemplateDiff, prepareDiffDirectory };