@shopify/cli-hydrogen 8.3.0 → 8.4.0

package/dist/lib/onboarding/local.js

@@ -47,7 +47,7 @@ async function setupLocalStarterTemplate(options, controller) {
     {
       force: true,
       recursive: true,
-      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts)/i.test(
+      filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts|\.shopify\/)/i.test(
         relativePath(templateDir, filepath)
       )
     }
@@ -87,14 +87,16 @@ async function setupLocalStarterTemplate(options, controller) {
 # or \`${cliCommand} env pull\` to populate this file.`;
   backgroundWorkPromise = backgroundWorkPromise.then(() => {
     const promises = [
-      // Add project name to package.json
       replaceFileContent(
         joinPath(project.directory, "package.json"),
         false,
-        (content) => content.replace(
-          /"name": "[^"]+"/,
-          `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
-        )
+        (content) => {
+          content = maybeInjectCliHydrogen(content);
+          return content.replace(
+            /"name": "[^"]+"/,
+            `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
+          );
+        }
       )
     ];
     let storefrontToLink;
@@ -223,7 +225,7 @@ async function setupLocalStarterTemplate(options, controller) {
     backgroundWorkPromise = backgroundWorkPromise.then(async () => {
       await setupI18n({
         rootDirectory: project.directory,
-        serverEntryPoint: language === "ts" ? "server.ts" : "server.js"
+        contextCreate: language === "ts" ? "app/lib/context.ts" : "app/lib/context.js"
       }).then(
         () => options.git ? commitAll(
           project.directory,
@@ -260,5 +262,18 @@ async function setupLocalStarterTemplate(options, controller) {
     ...setupSummary
   };
 }
+function maybeInjectCliHydrogen(pkgJsonContent) {
+  const hydrogenDep = pkgJsonContent.match(
+    /^\s+"@shopify\/hydrogen":\s+"[^"]+",\n/m
+  )?.[0];
+  if (hydrogenDep && /"0\.0\.0-\w+-/.test(hydrogenDep)) {
+    const cliHydrogenDep = hydrogenDep.replace("hydrogen", "cli-hydrogen");
+    pkgJsonContent = pkgJsonContent.replace(
+      hydrogenDep,
+      cliHydrogenDep + hydrogenDep
+    );
+  }
+  return pkgJsonContent;
+}
 
 export { setupLocalStarterTemplate };

package/dist/lib/remix-config.js

@@ -7,7 +7,7 @@ import { fileExists } from '@shopify/cli-kit/node/fs';
 import { muteRemixLogs } from './log.js';
 import { REQUIRED_REMIX_VERSION } from './remix-version-check.js';
 import { findFileWithExtension } from './file.js';
-import { getViteConfig } from './vite-config.js';
+import { isViteProject, getViteConfig } from './vite-config.js';
 import { importLocal } from './import-utils.js';
 import { isHydrogenMonorepo, hydrogenPackagesPath } from './build.js';
 
@@ -15,6 +15,11 @@ async function hasRemixConfigFile(root) {
   const result = await findFileWithExtension(root, "remix.config");
   return !!result.filepath;
 }
+async function isClassicProject(root) {
+  const isVite = await isViteProject(root);
+  if (isVite) return false;
+  return hasRemixConfigFile(root);
+}
 const BUILD_DIR = "dist";
 const CLIENT_SUBDIR = "client";
 const WORKER_SUBDIR = "worker";
@@ -47,7 +52,7 @@ function getRawRemixConfig(root) {
   });
 }
 async function getRemixConfig(root, mode = process.env.NODE_ENV) {
-  if (!await hasRemixConfigFile(root)) {
+  if (await isViteProject(root)) {
     return (await getViteConfig(root)).remixConfig;
   }
   await muteRemixLogs(root);
@@ -160,4 +165,4 @@ async function assertEntryFileExists(root, fileRelative) {
   }
 }
 
-export { assertOxygenChecks, getProjectPaths, getRawRemixConfig, getRemixConfig, handleRemixImportFail, hasRemixConfigFile };
+export { assertOxygenChecks, getProjectPaths, getRawRemixConfig, getRemixConfig, handleRemixImportFail, hasRemixConfigFile, isClassicProject };

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

@@ -14,8 +14,8 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
     }
     const astGrep = await importLangAstGrep(astType);
     const root = astGrep.parse(content).root();
-    const importNodes = root.findAll({ rule: { kind: "import_statement" } });
-    const lastImportNode = importNodes.findLast((node) => node.text().includes(".css")) || importNodes.pop();
+    const importNodes = root.findAll({ rule: { kind: "import_statement" } }).reverse();
+    const lastImportNode = importNodes.find((node) => node.text().includes(".css")) || importNodes.shift();
     const linksReturnNode = root.find({
       utils: {
         "has-links-id": {

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

@@ -1,7 +1,7 @@
 import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
-import { fileExists, readFile } from '@shopify/cli-kit/node/fs';
+import { fileExists } from '@shopify/cli-kit/node/fs';
 import { getCodeFormatOptions } from '../../format-code.js';
-import { replaceServerI18n, replaceRemixEnv } from './replacers.js';
+import { replaceContextI18n } from './replacers.js';
 import { getAssetsDir } from '../../build.js';
 
 const SETUP_I18N_STRATEGIES = [
@@ -20,11 +20,8 @@ async function setupI18nStrategy(strategy, options) {
   if (!await fileExists(templatePath)) {
     throw new Error("Unknown strategy");
   }
-  const template = await readFile(templatePath);
   const formatConfig = await getCodeFormatOptions(options.rootDirectory);
-  const isJs = options.serverEntryPoint?.endsWith(".js") ?? false;
-  await replaceServerI18n(options, formatConfig, template, isJs);
-  await replaceRemixEnv(options, formatConfig, template);
+  await replaceContextI18n(options, formatConfig, templatePath);
 }
 async function renderI18nPrompt(options) {
   const i18nStrategies = Object.entries({

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

@@ -1,15 +1,25 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { joinPath, resolvePath } from '@shopify/cli-kit/node/path';
-import { fileExists } from '@shopify/cli-kit/node/fs';
+import { joinPath, relativePath, extname, dirname, resolvePath } from '@shopify/cli-kit/node/path';
+import { readFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
 import { replaceFileContent, findFileWithExtension } from '../../file.js';
 import { importLangAstGrep } from '../../ast.js';
 import { transpileFile } from '../../transpile/index.js';
 
-async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" }, formatConfig, localeExtractImpl, isJs) {
-  const { filepath, astType } = await findEntryFile({
+async function replaceContextI18n({
+  rootDirectory,
+  contextCreate = joinPath("app", "lib", "context.ts")
+}, formatConfig, i18nStrategyFilePath) {
+  const createContextMethodName = "createAppLoadContext";
+  const { filepath, astType } = await findContextCreateFile({
     rootDirectory,
-    serverEntryPoint
+    contextCreate
   });
+  const localeExtractImpl = await readFile(i18nStrategyFilePath);
+  const i18nFileFinalPath = await replaceI18nStrategy(
+    { rootDirectory, contextCreate },
+    formatConfig,
+    i18nStrategyFilePath
+  );
   await replaceFileContent(filepath, formatConfig, async (content) => {
     const astGrep = await importLangAstGrep(astType);
     const root = astGrep.parse(content).root();
@@ -20,15 +30,11 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
           kind: "formal_parameters",
           stopBy: "end",
           inside: {
-            kind: "method_definition",
+            kind: "function_declaration",
             stopBy: "end",
             has: {
-              kind: "property_identifier",
-              regex: "^fetch$"
-            },
-            inside: {
-              kind: "export_statement",
-              stopBy: "end"
+              kind: "identifier",
+              regex: `^${createContextMethodName}$`
             }
           }
         }
@@ -43,7 +49,7 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
     }
     const i18nFunctionCall = `${i18nFunctionName}(${requestIdentifierName})`;
     const hydrogenImportPath = "@shopify/hydrogen";
-    const hydrogenImportName = "createStorefrontClient";
+    const hydrogenImportName = "createHydrogenContext";
     const importSpecifier = root.find({
       rule: {
         kind: "import_specifier",
@@ -67,7 +73,7 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
     importName = importAlias ?? importName;
     if (!importName) {
       throw new AbortError(
-        `Could not find a Hydrogen import in ${serverEntryPoint}`,
+        `Could not find a Hydrogen import in ${contextCreate}`,
         `Please import "${hydrogenImportName}" from "${hydrogenImportPath}"`
       );
     }
@@ -88,40 +94,10 @@ async function replaceServerI18n({ rootDirectory, serverEntryPoint = "server" },
     });
     if (!argumentObject) {
       throw new AbortError(
-        `Could not find a Hydrogen client instantiation with an inline object as argument in ${serverEntryPoint}`,
+        `Could not find a Hydrogen client instantiation with an inline object as argument in ${contextCreate}`,
         `Please add a call to ${importName}({...})`
       );
     }
-    const defaultExportObject = root.find({
-      rule: {
-        kind: "export_statement",
-        regex: "^export default \\{"
-      }
-    });
-    if (!defaultExportObject) {
-      throw new AbortError(
-        "Could not find a default export in the server entry point"
-      );
-    }
-    let localeExtractFn = localeExtractImpl.match(/^(\/\*\*.*?\*\/\n)?^function .+?^}/ms)?.[0] || "";
-    if (!localeExtractFn) {
-      throw new AbortError(
-        "Could not find the locale extract function. This is a bug in Hydrogen."
-      );
-    }
-    if (isJs) {
-      localeExtractFn = await transpileFile(
-        localeExtractFn,
-        "locale-extract-server.ts"
-      );
-    } else {
-      localeExtractFn = localeExtractFn.replace(/\/\*\*.*?\*\//gms, "");
-    }
-    const defaultExportEnd = defaultExportObject.range().end.index;
-    content = content.slice(0, defaultExportEnd) + `
-
-${localeExtractFn}
-` + content.slice(defaultExportEnd);
     const i18nProperty = argumentObject.find({
       rule: {
         kind: "property_identifier",
@@ -143,109 +119,61 @@ ${localeExtractFn}
       const firstPart = content.slice(0, end.index - 1);
       content = firstPart + ((/,\s*$/.test(firstPart) ? "" : ",") + `i18n: ${i18nFunctionCall}`) + content.slice(end.index - 1);
     }
+    const lastImport = root.findAll({ rule: { kind: "import_statement" } }).pop();
+    const lastImportRange = lastImport?.range() ?? {
+      end: { index: 0 }
+    };
+    const i18nFunctionImport = joinPath(
+      "~",
+      relativePath(
+        joinPath(rootDirectory, "app"),
+        i18nFileFinalPath.slice(0, -extname(i18nFileFinalPath).length)
+      )
+    );
+    content = content.slice(0, lastImportRange.end.index) + `import {getLocaleFromRequest} from "${i18nFunctionImport}";` + content.slice(lastImportRange.end.index);
     return content;
   });
 }
-async function replaceRemixEnv({ rootDirectory }, formatConfig, localeExtractImpl) {
-  let envPath = joinPath(rootDirectory, "env.d.ts");
-  if (!await fileExists(envPath)) {
-    envPath = "remix.env.d.ts";
-    if (!await fileExists(envPath)) {
-      return;
-    }
-  }
-  const i18nType = localeExtractImpl.match(
-    /^(export )?(type \w+ =\s+\{.*?\};)\n/ms
-  )?.[2];
-  const i18nTypeName = i18nType?.match(/^type (\w+)/)?.[1];
-  if (!i18nTypeName) {
-    return;
+async function replaceI18nStrategy({
+  rootDirectory,
+  contextCreate = joinPath("app", "lib", "context.ts")
+}, formatConfig, i18nStrategyFilePath) {
+  const isJs = contextCreate?.endsWith(".js") || false;
+  const i18nPath = joinPath(
+    rootDirectory,
+    dirname(contextCreate),
+    isJs ? "i18n.js" : "i18n.ts"
+  );
+  if (await fileExists(i18nPath)) {
+    throw new AbortError(
+      `${i18nPath} already exist. Renamed or remove the existing file before continue.`
+    );
   }
-  await replaceFileContent(envPath, formatConfig, async (content) => {
-    if (content.includes(`Storefront<`)) return;
-    const astGrep = await importLangAstGrep("ts");
-    const root = astGrep.parse(content).root();
-    const storefrontTypeNode = root.find({
-      rule: {
-        kind: "property_signature",
-        has: {
-          kind: "type_annotation",
-          has: {
-            regex: "^Storefront$"
-          }
-        },
-        inside: {
-          kind: "interface_declaration",
-          stopBy: "end",
-          regex: "AppLoadContext"
-        }
-      }
-    });
-    if (storefrontTypeNode) {
-      const storefrontTypeNodeRange = storefrontTypeNode.range();
-      content = content.slice(0, storefrontTypeNodeRange.end.index) + `<${i18nTypeName}>` + content.slice(storefrontTypeNodeRange.end.index);
-    }
-    const ambientDeclarationContentNode = root.find({
-      rule: {
-        kind: "statement_block",
-        inside: {
-          kind: "ambient_declaration"
-        }
-      }
-    });
-    const i18nTypeDeclaration = `
-    /**
-     * The I18nLocale used for Storefront API query context.
-     */
-    ${i18nType}`;
-    if (ambientDeclarationContentNode) {
-      const { end } = ambientDeclarationContentNode.range();
-      content = content.slice(0, end.index - 1) + `
-
-${i18nTypeDeclaration}
-` + content.slice(end.index - 1);
-    } else {
-      content = content + `
-
-declare global {
-${i18nTypeDeclaration}
-}`;
-    }
-    const importImplTypes = localeExtractImpl.match(
-      /import\s+type\s+[^;]+?;/
-    )?.[0];
-    if (importImplTypes) {
-      const importPlace = root.findAll({
-        rule: {
-          kind: "import_statement",
-          has: {
-            kind: "string_fragment",
-            stopBy: "end",
-            regex: `^@shopify/hydrogen$`
-          }
-        }
-      }).pop() ?? root.findAll({ rule: { kind: "import_statement" } }).pop() ?? root.findAll({ rule: { kind: "comment", regex: "^/// <reference" } }).pop();
-      const importPlaceRange = importPlace?.range() ?? { end: { index: 0 } };
-      content = content.slice(0, importPlaceRange.end.index) + importImplTypes.replace(
-        /'[^']+'/,
-        `'@shopify/hydrogen/storefront-api-types'`
-      ) + content.slice(importPlaceRange.end.index);
+  await copyFile(i18nStrategyFilePath, i18nPath);
+  await replaceFileContent(i18nPath, formatConfig, async (content) => {
+    content = content.replace(/\.\/mock-i18n-types\.js/, "@shopify/hydrogen");
+    if (isJs) {
+      content = await transpileFile(content, i18nStrategyFilePath);
     }
     return content;
   });
+  return i18nPath;
 }
-async function findEntryFile({
+async function findContextCreateFile({
   rootDirectory,
-  serverEntryPoint = "server"
+  contextCreate = joinPath("app", "lib", "context.ts")
 }) {
-  const match = serverEntryPoint.match(/\.([jt]sx?)$/)?.[1];
-  const { filepath, astType } = match ? { filepath: resolvePath(rootDirectory, serverEntryPoint), astType: match } : await findFileWithExtension(rootDirectory, serverEntryPoint);
+  const match = contextCreate.match(/\.([jt]sx?)$/)?.[1];
+  const { filepath, astType } = match ? { filepath: resolvePath(rootDirectory, contextCreate), astType: match } : await findFileWithExtension(rootDirectory, joinPath(contextCreate));
   if (!filepath || !astType) {
     throw new AbortError(
-      `Could not find a server entry point at ${serverEntryPoint}`
+      `Could not find a context create file at ${resolvePath(
+        rootDirectory,
+        contextCreate
+      )}`
     );
   }
   return { filepath, astType };
 }
 
-export { replaceRemixEnv, replaceServerI18n };
+export { replaceContextI18n };

package/dist/lib/template-diff.js

@@ -136,6 +136,21 @@ ${colors.dim(
           joinPath(diffDirectory, ".env")
         )
       ]);
+    },
+    /**
+     * Brings the generated d.ts files back to the original project.
+     */
+    copyDiffCodegen() {
+      return Promise.all([
+        copyFile(
+          joinPath(targetDirectory, "storefrontapi.generated.d.ts"),
+          joinPath(diffDirectory, "storefrontapi.generated.d.ts")
+        ),
+        copyFile(
+          joinPath(targetDirectory, "customer-accountapi.generated.d.ts"),
+          joinPath(diffDirectory, "customer-accountapi.generated.d.ts")
+        )
+      ]);
     }
   };
 }

package/dist/lib/transpile/morph/functions.js

@@ -21,9 +21,10 @@ function generateFunctionDocumentation(functionNode, variableStatement) {
   } else {
     const declaration = functionNode;
     const jsDocs = declaration.getJsDocs()[0];
-    if (jsDocs?.getTags().length === 0) {
+    if (jsDocs && !jsDocs.getTags().find((tag) => tag.getTagName() === "return")) {
       const returnType = declaration.getReturnType().getText();
-      if (isAnnotableType(returnType)) {
+      const hasManuallySpecifiedReturnType = !!declaration.getSignature().compilerSignature.getReturnType().aliasSymbol;
+      if (hasManuallySpecifiedReturnType) {
         jsDocs.addTag({ tagName: "return", text: normalizeType(returnType) });
       }
     }

package/dist/lib/transpile/morph/typedefs.js

@@ -28,7 +28,10 @@ function generateTypeDefs(sourceFile, code) {
   typedefs.push("");
   const knownGenerics = {
     MetaFunction: "T",
-    SerializeFrom: "T"
+    SerializeFrom: "T",
+    Fetcher: "T",
+    PartialPredictiveSearchResult: "ItemType, ExtraProps",
+    PartialSearchResult: "ItemType"
   };
   typedefsFromImports.forEach((typeElements, moduleSpecifier) => {
     for (const typeElement of typeElements) {

package/dist/lib/vite-config.js

@@ -1,11 +1,23 @@
 import { joinPath, resolvePath, dirname, basename } from '@shopify/cli-kit/node/path';
 import { findFileWithExtension } from './file.js';
 import { importVite } from './import-utils.js';
+import { hasRemixConfigFile } from './remix-config.js';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
 
 async function hasViteConfig(root) {
   const result = await findFileWithExtension(root, "vite.config");
   return !!result.filepath;
 }
+async function isViteProject(root) {
+  const isVite = await hasViteConfig(root);
+  if (isVite && await hasRemixConfigFile(root)) {
+    renderWarning({
+      headline: "Both Vite and Remix config files found.",
+      body: "The remix.config.js file is not used in Vite projects. Please remove it to avoid conflicts."
+    });
+  }
+  return isVite;
+}
 async function getViteConfig(root, ssrEntryFlag) {
   const vite = await importVite(root);
   const command = "build";
@@ -73,4 +85,4 @@ function findOxygenPlugin(config) {
   return findPlugin(config, "oxygen:main");
 }
 
-export { findHydrogenPlugin, findOxygenPlugin, getViteConfig, hasViteConfig };
+export { findHydrogenPlugin, findOxygenPlugin, getViteConfig, hasViteConfig, isViteProject };

package/oclif.manifest.json

@@ -174,6 +174,14 @@
           "required": false,
           "allowNo": false,
           "type": "boolean"
+        },
+        "diff": {
+          "description": "Applies the current files on top of Hydrogen's starter template in a temporary directory.",
+          "hidden": true,
+          "name": "diff",
+          "required": false,
+          "allowNo": false,
+          "type": "boolean"
         }
       },
       "hasDynamicHelp": false,
@@ -599,6 +607,15 @@
           "multiple": false,
           "type": "option"
         },
+        "env-file": {
+          "description": "Path to an environment file to override existing environment variables. Defaults to the '.env' located in your project path `--path`.",
+          "name": "env-file",
+          "required": false,
+          "default": ".env",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "disable-version-check": {
           "description": "Skip the version check when running `hydrogen dev`",
           "name": "disable-version-check",
@@ -741,6 +758,15 @@
           "multiple": false,
           "type": "option"
         },
+        "env-file": {
+          "description": "Path to an environment file to override existing environment variables. Defaults to the '.env' located in your project path `--path`.",
+          "name": "env-file",
+          "required": false,
+          "default": ".env",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "path": {
           "description": "The path to the directory of the Hydrogen storefront. Defaults to the current directory where the command is run.",
           "env": "SHOPIFY_HYDROGEN_FLAG_PATH",
@@ -792,8 +818,10 @@
           "type": "option"
         },
         "env-file": {
-          "description": "Path to an environment file to override existing environment variables for the selected environment. Defaults to the '.env' located in your project path `--path`.",
+          "description": "Path to an environment file to override existing environment variables. Defaults to the '.env' located in your project path `--path`.",
           "name": "env-file",
+          "required": false,
+          "default": ".env",
           "hasDynamicHelp": false,
           "multiple": false,
           "type": "option"
@@ -1322,6 +1350,15 @@
           "multiple": false,
           "type": "option"
         },
+        "env-file": {
+          "description": "Path to an environment file to override existing environment variables. Defaults to the '.env' located in your project path `--path`.",
+          "name": "env-file",
+          "required": false,
+          "default": ".env",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "inspector-port": {
           "description": "The port where the inspector is available. Defaults to 9229.",
           "env": "SHOPIFY_HYDROGEN_FLAG_INSPECTOR_PORT",
@@ -1714,5 +1751,5 @@
       ]
     }
   },
-  "version": "8.3.0"
+  "version": "8.4.0"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "8.3.0",
+  "version": "8.4.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@ast-grep/napi": "0.11.0",
     "@oclif/core": "3.26.5",
-    "@shopify/cli-kit": "3.64.0",
+    "@shopify/cli-kit": "3.65.1",
     "@shopify/oxygen-cli": "4.4.9",
-    "@shopify/plugin-cloudflare": "3.64.0",
+    "@shopify/plugin-cloudflare": "3.65.1",
     "ansi-escapes": "^6.2.0",
     "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",