@shopify/cli-hydrogen 8.2.0 → 8.4.0

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.2.0"
+  "version": "8.4.0"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "8.2.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.63.2",
+    "@shopify/cli-kit": "3.65.1",
     "@shopify/oxygen-cli": "4.4.9",
-    "@shopify/plugin-cloudflare": "3.63.2",
+    "@shopify/plugin-cloudflare": "3.65.1",
     "ansi-escapes": "^6.2.0",
     "chokidar": "3.5.3",
     "cli-truncate": "^4.0.0",

package/dist/assets/hydrogen/starter/.graphqlrc.yml

@@ -1,12 +0,0 @@
-projects:
-  default:
-    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
-    documents:
-      - '!*.d.ts'
-      - '*.{ts,tsx,js,jsx}'
-      - 'app/**/*.{ts,tsx,js,jsx}'
-      - '!app/graphql/**/*.{ts,tsx,js,jsx}'
-  customer-account:
-    schema: 'node_modules/@shopify/hydrogen/customer-account.schema.json'
-    documents:
-      - 'app/graphql/customer-account/**/*.{ts,tsx,js,jsx}'