@shopify/cli-hydrogen 7.1.2 → 8.0.0

package/dist/commands/hydrogen/setup/vite.js

@@ -1,14 +1,17 @@
-import { resolvePath } from '@shopify/cli-kit/node/path';
+import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
-import { moveFile, removeFile, copyFile, writeFile } from '@shopify/cli-kit/node/fs';
-import { installNodeModules, getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import { renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { removeFile, moveFile, readFile, writeFile, fileExists } from '@shopify/cli-kit/node/fs';
+import { readAndParsePackageJson, installNodeModules, getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
-import { getRemixConfig } from '../../../lib/remix-config.js';
+import { getRawRemixConfig } from '../../../lib/remix-config.js';
 import { replaceFileContent, mergePackageJson } from '../../../lib/file.js';
 import { importLangAstGrep } from '../../../lib/ast.js';
 import { getAssetDir } from '../../../lib/build.js';
-import { getCodeFormatOptions } from '../../../lib/format-code.js';
+import { getCodeFormatOptions, formatCode } from '../../../lib/format-code.js';
+import { hasViteConfig } from '../../../lib/vite-config.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { outputNewline } from '@shopify/cli-kit/node/output';
 
 class SetupVite extends Command {
   static description = "EXPERIMENTAL: Upgrades the project to use Vite.";
@@ -24,16 +27,35 @@ class SetupVite extends Command {
     });
   }
 }
+const tailwindPostCSSConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
 async function runSetupVite({ directory }) {
-  const remixConfigPromise = getRemixConfig(directory);
-  const shouldContinue = await renderConfirmationPrompt({
-    message: "Are you sure you want to upgrade to Vite?\nThis is still an experimental feature and may not work as expected"
-  });
-  if (!shouldContinue)
-    return;
+  outputNewline();
+  if (await hasViteConfig(directory)) {
+    throw new AbortError("This project already has a Vite config file.");
+  }
+  const [rawRemixConfig, pkgJson, formatOptions] = await Promise.all([
+    getRawRemixConfig(directory),
+    readAndParsePackageJson(joinPath(directory, "package.json")),
+    getCodeFormatOptions(directory)
+  ]);
+  const serverEntry = rawRemixConfig.server || "server.js";
+  const isTS = serverEntry.endsWith(".ts");
+  const fileExt = isTS ? "tsx" : "jsx";
+  const viteAssets = getAssetDir("vite");
+  const usesTailwind = !!rawRemixConfig.tailwind;
+  const postCssConfigPath = resolvePath(directory, "postcss.config.js");
   const handlePartialIssue = () => {
   };
   const backgroundWorkPromise = Promise.all([
+    removeFile(resolvePath(directory, "remix.config.js")).catch(
+      handlePartialIssue
+    ),
     moveFile(
       resolvePath(directory, "remix.env.d.ts"),
       resolvePath(directory, "env.d.ts")
@@ -48,137 +70,217 @@ async function runSetupVite({ directory }) {
       resolvePath(directory, ".eslintrc.js"),
       resolvePath(directory, ".eslintrc.cjs")
     ).catch(handlePartialIssue),
-    moveFile(
-      resolvePath(directory, "postcss.config.js"),
-      resolvePath(directory, "postcss.config.cjs")
-    ).catch(handlePartialIssue),
-    remixConfigPromise.then((config) => {
-      const serverEntry = config.serverEntryPoint || "server.js";
-      const isTS = serverEntry.endsWith(".ts");
-      const fileExt = isTS ? "tsx" : "jsx";
-      const viteAssets = getAssetDir("vite");
-      return Promise.all([
-        removeFile(resolvePath(directory, "remix.config.js")).catch(
-          handlePartialIssue
-        ),
-        copyFile(
-          resolvePath(viteAssets, "vite.config.js"),
-          resolvePath(directory, "vite.config." + fileExt.slice(0, 2))
-        ),
-        mergePackageJson(viteAssets, directory),
-        replaceFileContent(
-          resolvePath(directory, serverEntry),
-          false,
-          (content) => (isTS ? "// @ts-ignore\n" : "") + content.replace(
-            "@remix-run/dev/server-build",
-            "virtual:remix/server-build"
-          )
-        ),
-        importLangAstGrep(fileExt).then(async (astGrep) => {
-          const codeFormatOpt = getCodeFormatOptions(directory);
-          const rootFilepath = resolvePath(
-            config.appDirectory,
-            "root." + fileExt
+    // Adjust PostCSS configuration:
+    readFile(resolvePath(directory, "postcss.config.js")).then(async (postCssContent) => {
+      const hasTailwindPlugin = postCssContent.includes("tailwindcss");
+      if (!hasTailwindPlugin && usesTailwind) {
+        postCssContent = await formatCode(
+          postCssContent.replace(
+            /(plugins:\s+{)/,
+            "$1\n    tailwindcss: {},"
+          ),
+          formatOptions
+        );
+      }
+      const isCJS = postCssContent.includes("module.exports") || postCssContent.includes("exports.") || postCssContent.includes("require(");
+      return writeFile(
+        isCJS ? postCssConfigPath.replace(".js", ".cjs") : postCssConfigPath,
+        postCssContent
+      );
+    }).catch(async () => {
+      if (usesTailwind && !await fileExists(postCssConfigPath) && !await fileExists(postCssConfigPath.replace(".js", ".cjs"))) {
+        return writeFile(postCssConfigPath, tailwindPostCSSConfig);
+      }
+    }).catch(handlePartialIssue),
+    // Adjust dependencies:
+    mergePackageJson(viteAssets, directory, {
+      onResult(pkgJson2) {
+        if (pkgJson2.dependencies) {
+          delete pkgJson2.dependencies["@remix-run/css-bundle"];
+        }
+        if (pkgJson2.devDependencies) {
+          if (pkgJson2.devDependencies["@vanilla-extract/css"]) {
+            pkgJson2.devDependencies["@vanilla-extract/vite-plugin"] = "^4.0.0";
+            pkgJson2.devDependencies = Object.keys(pkgJson2.devDependencies).sort().reduce((acc, key) => {
+              acc[key] = pkgJson2.devDependencies?.[key];
+              return acc;
+            }, {});
+          }
+        }
+        return pkgJson2;
+      }
+    }),
+    // Build `vite.config.js` for the project:
+    readFile(resolvePath(viteAssets, "vite.config.js")).then(
+      async (viteConfigContent) => {
+        const hasVanillaExtract = !!pkgJson.devDependencies?.["@vanilla-extract/css"];
+        if (hasVanillaExtract) {
+          viteConfigContent = viteConfigContent.replace(
+            /\n\n/g,
+            `
+import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin';
+
+`
+          ).replace(/^(\s+)\],/m, "$1  vanillaExtractPlugin(),\n$1],");
+        }
+        const { future, appDirectory, ignoredRouteFiles, routes } = rawRemixConfig;
+        for (const flag of [
+          "v3_fetcherPersist",
+          "v3_throwAbortReason",
+          "v3_relativeSplatPath"
+        ]) {
+          if (!future?.[flag]) {
+            viteConfigContent = viteConfigContent.replace(
+              `${flag}: true`,
+              `${flag}: false`
+            );
+          }
+        }
+        if (appDirectory && appDirectory !== "app") {
+          viteConfigContent = viteConfigContent.replace(
+            /^(\s+)(future:)/m,
+            `$1appDirectory: '${appDirectory}',
+$1$2`
           );
-          await new Promise(async (resolve, reject) => {
-            const fileNumber = await astGrep.findInFiles(
-              {
-                paths: [
-                  rootFilepath,
-                  resolvePath(config.appDirectory, "routes")
-                ],
-                matcher: {
-                  rule: {
-                    kind: "string_fragment",
-                    regex: "\\.css$",
-                    inside: {
-                      kind: "import_statement",
-                      stopBy: "end"
-                    }
-                  }
+        }
+        if (ignoredRouteFiles) {
+          viteConfigContent = viteConfigContent.replace(
+            /^(\s+)(future:)/m,
+            `$1ignoredRouteFiles: ${JSON.stringify(ignoredRouteFiles)},
+$1$2`
+          );
+        }
+        if (routes) {
+          viteConfigContent = viteConfigContent.replace(
+            /^(\s+)(future:)/m,
+            `$1routes: ${routes.toString()},
+$1$2`
+          );
+        }
+        const viteConfigPath = resolvePath(
+          directory,
+          "vite.config." + fileExt.slice(0, 2)
+        );
+        viteConfigContent = await formatCode(
+          viteConfigContent,
+          formatOptions,
+          viteConfigPath
+        );
+        return writeFile(viteConfigPath, viteConfigContent);
+      }
+    ),
+    // Adjust server entry:
+    replaceFileContent(
+      resolvePath(directory, serverEntry),
+      false,
+      (content) => (isTS ? "// @ts-ignore\n" : "") + content.replace(
+        "@remix-run/dev/server-build",
+        "virtual:remix/server-build"
+      )
+    ),
+    // Adjust CSS imports in the project routes:
+    importLangAstGrep(fileExt).then(async (astGrep) => {
+      const appDirectory = resolvePath(
+        directory,
+        rawRemixConfig.appDirectory ?? "app"
+      );
+      const rootFilepath = joinPath(appDirectory, "root." + fileExt);
+      await new Promise(async (resolve, reject) => {
+        const fileNumber = await astGrep.findInFiles(
+          {
+            paths: [rootFilepath, joinPath(appDirectory, "routes")],
+            matcher: {
+              rule: {
+                kind: "string_fragment",
+                regex: "\\.css$",
+                inside: {
+                  kind: "import_statement",
+                  stopBy: "end"
                 }
-              },
-              async (err, nodes) => {
-                if (err)
-                  reject(err);
-                const nodeMap = {};
-                nodes.forEach((node) => {
-                  const filename = node.getRoot().filename();
-                  const content = node.getRoot().root().text();
-                  const position = node.range().end.index;
-                  const tmp = nodeMap[filename] || { content, positions: [] };
-                  tmp.positions.push(position);
-                  nodeMap[filename] = tmp;
-                });
-                await Promise.all(
-                  Object.entries(nodeMap).flatMap(
-                    ([filename, { content, positions }]) => {
-                      positions.reverse();
-                      for (const position of positions) {
-                        content = content.slice(0, position) + "?url" + content.slice(position);
-                      }
-                      return writeFile(filename, content);
-                    }
-                  )
-                );
-                resolve(null);
               }
-            );
-            if (fileNumber === 0)
-              resolve(null);
-          });
-          await replaceFileContent(
-            rootFilepath,
-            await codeFormatOpt,
-            (content) => {
-              const root = astGrep.parse(content).root();
-              const liveReloadRegex = "LiveReload";
-              const hasLiveReloadRule = {
-                kind: "identifier",
-                regex: liveReloadRegex
-              };
-              const liveReloadImport = root.find({
-                rule: {
-                  kind: "import_specifier",
-                  regex: liveReloadRegex,
-                  inside: {
-                    kind: "import_statement",
-                    stopBy: "end"
+            }
+          },
+          async (err, nodes) => {
+            if (err)
+              reject(err);
+            const nodeMap = {};
+            nodes.forEach((node) => {
+              if (node.text().endsWith(".module.css")) {
+                return;
+              }
+              const filename = node.getRoot().filename();
+              const content = node.getRoot().root().text();
+              const position = node.range().end.index;
+              const tmp = nodeMap[filename] || { content, positions: [] };
+              tmp.positions.push(position);
+              nodeMap[filename] = tmp;
+            });
+            await Promise.all(
+              Object.entries(nodeMap).flatMap(
+                ([filename, { content, positions }]) => {
+                  positions.reverse();
+                  for (const position of positions) {
+                    content = content.slice(0, position) + "?url" + content.slice(position);
                   }
+                  return writeFile(filename, content);
                 }
-              });
-              const liveReloadElements = root.findAll({
-                rule: {
-                  any: [
-                    {
-                      kind: "jsx_self_closing_element",
-                      has: hasLiveReloadRule
-                    },
-                    {
-                      kind: "jsx_element",
-                      has: {
-                        kind: "jsx_opening_element",
-                        has: hasLiveReloadRule
-                      }
-                    }
-                  ]
+              )
+            );
+            resolve(null);
+          }
+        );
+        if (fileNumber === 0)
+          resolve(null);
+      });
+      await replaceFileContent(rootFilepath, formatOptions, (content) => {
+        const root = astGrep.parse(content).root();
+        const liveReloadRegex = "LiveReload";
+        const hasLiveReloadRule = {
+          kind: "identifier",
+          regex: liveReloadRegex
+        };
+        const liveReloadImport = root.find({
+          rule: {
+            kind: "import_specifier",
+            regex: liveReloadRegex,
+            inside: {
+              kind: "import_statement",
+              stopBy: "end"
+            }
+          }
+        });
+        const liveReloadElements = root.findAll({
+          rule: {
+            any: [
+              {
+                kind: "jsx_self_closing_element",
+                has: hasLiveReloadRule
+              },
+              {
+                kind: "jsx_element",
+                has: {
+                  kind: "jsx_opening_element",
+                  has: hasLiveReloadRule
                 }
-              });
-              for (const node of [
-                // From bottom to top
-                ...liveReloadElements.reverse(),
-                liveReloadImport
-              ]) {
-                if (!node)
-                  continue;
-                const { start, end } = node.range();
-                content = content.slice(0, start.index) + content.slice(end.index);
               }
-              return content.replace(/,\s*,/g, ",");
-            }
-          );
-        })
-      ]);
+            ]
+          }
+        });
+        for (const node of [
+          // From bottom to top
+          ...liveReloadElements.reverse(),
+          liveReloadImport
+        ]) {
+          if (!node)
+            continue;
+          const { start, end } = node.range();
+          content = content.slice(0, start.index) + content.slice(end.index);
+        }
+        return content.replace(/,\s*,/g, ",").replace(
+          /import\s+{\s+cssBundleHref\s+}\s+from\s+['"]@remix-run\/css-bundle['"];?\n/,
+          ""
+        ).replace(/\.\.\.\(\s*cssBundleHref[^)]+\),?/, "");
+      });
     })
   ]);
   await renderTasks([
@@ -201,8 +303,12 @@ async function runSetupVite({ directory }) {
   ]);
   renderSuccess({
     headline: `Your Vite project is ready!`,
-    body: `We've modified your project to use Vite experimental.
-Please use git to review the changes.`
+    body: `We've modified your project to use Vite.
+Please use Git to review the changes.`,
+    nextSteps: [
+      rawRemixConfig.mdx ? "Setup MDX support in Vite: https://remix.run/docs/en/main/future/vite#add-mdx-plugin" : "",
+      `See more information about Vite in Remix at https://remix.run/docs/en/main/future/vite`
+    ].filter(Boolean)
   });
 }
 

package/dist/commands/hydrogen/setup.js

@@ -1,8 +1,8 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { AbortController } from '@shopify/cli-kit/node/abort';
 import { renderTasks } from '@shopify/cli-kit/node/ui';
-import { resolvePath, basename } from '@shopify/cli-kit/node/path';
-import { copyFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, basename, joinPath } from '@shopify/cli-kit/node/path';
+import { fileExists, glob, copyFile } from '@shopify/cli-kit/node/fs';
 import { commonFlags, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
 import { renderI18nPrompt, setupI18nStrategy } from '../../lib/setups/i18n/index.js';
 import { getRemixConfig } from '../../lib/remix-config.js';
@@ -33,8 +33,10 @@ class Setup extends Command {
 }
 async function runSetup(options) {
   const controller = new AbortController();
-  const remixConfig = await getRemixConfig(options.directory);
-  const location = basename(remixConfig.rootDirectory);
+  const { rootDirectory, appDirectory, serverEntryPoint } = await getRemixConfig(
+    options.directory
+  );
+  const location = basename(rootDirectory);
   const cliCommandPromise = getCliCommand();
   let backgroundWorkPromise = Promise.resolve();
   const tasks = [
@@ -55,32 +57,29 @@ async function runSetup(options) {
   );
   let routes;
   if (needsRouteGeneration) {
-    const typescript = !!remixConfig.tsconfigPath;
+    const templateRoot = getTemplateAppFile("..");
+    const [typescript, dtsFiles] = await Promise.all([
+      fileExists(joinPath(rootDirectory, "tsconfig.json")),
+      glob("*.d.ts", { cwd: templateRoot })
+    ]);
     backgroundWorkPromise = backgroundWorkPromise.then(
       () => Promise.all([
-        ...typescript ? [
-          copyFile(
-            getTemplateAppFile("../remix.env.d.ts"),
-            resolvePath(remixConfig.rootDirectory, "remix.env.d.ts")
-          ),
-          copyFile(
-            getTemplateAppFile("../storefrontapi.generated.d.ts"),
-            resolvePath(
-              remixConfig.rootDirectory,
-              "storefrontapi.generated.d.ts"
-            )
+        ...dtsFiles.map(
+          (filename) => copyFile(
+            joinPath(templateRoot, filename),
+            resolvePath(rootDirectory, filename)
           )
-        ] : [],
+        ),
         // Copy app entries
         generateProjectEntries({
-          rootDirectory: remixConfig.rootDirectory,
-          appDirectory: remixConfig.appDirectory,
+          rootDirectory,
+          appDirectory,
           typescript
         })
       ])
     ).then(async () => {
       routes = await setupRoutes(
-        remixConfig.rootDirectory,
+        rootDirectory,
         typescript ? "ts" : "js",
         i18n
       );
@@ -88,7 +87,7 @@ async function runSetup(options) {
   }
   if (i18n) {
     backgroundWorkPromise = backgroundWorkPromise.then(
-      () => setupI18nStrategy(i18n, remixConfig)
+      () => setupI18nStrategy(i18n, { rootDirectory, serverEntryPoint })
     );
   }
   let cliCommand = await Promise.resolve(cliCommandPromise);
@@ -112,7 +111,7 @@ async function runSetup(options) {
     {
       location,
       name: location,
-      directory: remixConfig.rootDirectory
+      directory: rootDirectory
     },
     {
       cliCommand,

package/dist/commands/hydrogen/shortcut.js

@@ -3,6 +3,16 @@ import { renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
 import { ALIAS_NAME, createPlatformShortcut } from '../../lib/shell.js';
 
 class Shortcut extends Command {
+  static descriptionWithMarkdown = `Creates a global h2 shortcut for Shopify CLI using shell aliases.
+
+  The following shells are supported:
+
+  - Bash (using \`~/.bashrc\`)
+  - ZSH (using \`~/.zshrc\`)
+  - Fish (using \`~/.config/fish/functions\`)
+  - PowerShell (added to \`$PROFILE\`)
+
+  After the alias is created, you can call Shopify CLI from anywhere in your project using \`h2 <command>\`.`;
   static description = `Creates a global \`${ALIAS_NAME}\` shortcut for the Hydrogen CLI`;
   async run() {
     await runCreateShortcut();

package/dist/commands/hydrogen/unlink.js

@@ -5,6 +5,7 @@ import { commonFlags } from '../../lib/flags.js';
 import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
 
 class Unlink extends Command {
+  static descriptionWithMarkdown = "Unlinks your local development environment from a remote Hydrogen storefront.";
   static description = "Unlink a local project from a Hydrogen storefront.";
   static flags = {
     ...commonFlags.path

package/dist/commands/hydrogen/upgrade.js

@@ -16,6 +16,7 @@ import { getProjectPaths } from '../../lib/remix-config.js';
 
 const INSTRUCTIONS_FOLDER = ".hydrogen";
 class Upgrade extends Command {
+  static descriptionWithMarkdown = "Upgrade Hydrogen project dependencies, preview features, fixes and breaking changes. The command also generates an instruction file for each upgrade.";
   static description = "Upgrade Remix and Hydrogen npm dependencies.";
   static flags = {
     ...commonFlags.path,
@@ -655,7 +656,7 @@ async function displayDevUpgradeNotice({
   const appPath = targetPath ? path.resolve(targetPath) : process.cwd();
   const { currentVersion } = await getHydrogenVersion({ appPath });
   const isPrerelease = semver.prerelease(currentVersion);
-  if (isPrerelease) {
+  if (isPrerelease || /^[a-z]+$/i.test(currentVersion)) {
     return;
   }
   const changelog = await getChangelog();

package/dist/generator-templates/assets/vite/package.json

@@ -1,15 +1,14 @@
 {
   "type": "module",
   "scripts": {
-    "build": "shopify hydrogen build-vite --codegen",
-    "dev": "shopify hydrogen dev-vite --codegen"
+    "build": "shopify hydrogen build --codegen",
+    "dev": "shopify hydrogen dev --codegen"
   },
   "dependencies": {
-    "@remix-run/node": "^2.8.0",
     "isbot": "^3.8.0"
   },
   "devDependencies": {
-    "vite": "~5.1.0",
+    "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.3.1"
   }
 }

package/dist/generator-templates/assets/vite/vite.config.js

@@ -1,5 +1,6 @@
 import {defineConfig} from 'vite';
-import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
+import {hydrogen} from '@shopify/hydrogen/vite';
+import {oxygen} from '@shopify/mini-oxygen/vite';
 import {vitePlugin as remix} from '@remix-run/dev';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
@@ -7,7 +8,14 @@ export default defineConfig({
   plugins: [
     hydrogen(),
     oxygen(),
-    remix({buildDirectory: 'dist'}),
+    remix({
+      presets: [hydrogen.preset()],
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
     tsconfigPaths(),
   ],
 });