@shopify/cli-hydrogen 7.1.0 → 7.1.2

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

@@ -0,0 +1,209 @@
+import { resolvePath } 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 { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
+import { getRemixConfig } 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';
+
+class SetupVite extends Command {
+  static description = "EXPERIMENTAL: Upgrades the project to use Vite.";
+  static flags = {
+    ...commonFlags.path
+  };
+  async run() {
+    const { flags } = await this.parse(SetupVite);
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    await runSetupVite({
+      ...flagsToCamelObject(flags),
+      directory
+    });
+  }
+}
+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;
+  const handlePartialIssue = () => {
+  };
+  const backgroundWorkPromise = Promise.all([
+    moveFile(
+      resolvePath(directory, "remix.env.d.ts"),
+      resolvePath(directory, "env.d.ts")
+    ).then(
+      () => replaceFileContent(
+        resolvePath(directory, "env.d.ts"),
+        false,
+        (content) => content.replace('types="@remix-run/dev"', 'types="vite/client"')
+      )
+    ).catch(handlePartialIssue),
+    moveFile(
+      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
+          );
+          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"
+                    }
+                  }
+                }
+              },
+              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"
+                  }
+                }
+              });
+              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, ",");
+            }
+          );
+        })
+      ]);
+    })
+  ]);
+  await renderTasks([
+    {
+      title: "Updating files",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    },
+    {
+      title: "Installing new dependencies",
+      task: async () => {
+        await installNodeModules({
+          directory,
+          packageManager: await getPackageManager(directory),
+          args: []
+        });
+      }
+    }
+  ]);
+  renderSuccess({
+    headline: `Your Vite project is ready!`,
+    body: `We've modified your project to use Vite experimental.
+Please use git to review the changes.`
+  });
+}
+
+export { SetupVite as default, runSetupVite };

package/dist/commands/hydrogen/setup.js

@@ -13,12 +13,14 @@ import { getTemplateAppFile } from '../../lib/build.js';
 class Setup extends Command {
   static description = "Scaffold routes and core functionality.";
   static flags = {
-    path: commonFlags.path,
-    force: commonFlags.force,
-    styling: commonFlags.styling,
-    markets: commonFlags.markets,
-    shortcut: commonFlags.shortcut,
-    "install-deps": overrideFlag(commonFlags.installDeps, { default: true })
+    ...commonFlags.path,
+    ...commonFlags.force,
+    ...commonFlags.styling,
+    ...commonFlags.markets,
+    ...commonFlags.shortcut,
+    ...overrideFlag(commonFlags.installDeps, {
+      "install-deps": { default: true }
+    })
   };
   async run() {
     const { flags } = await this.parse(Setup);

package/dist/commands/hydrogen/unlink.js

@@ -7,7 +7,7 @@ import { getConfig, unsetStorefront } from '../../lib/shopify-config.js';
 class Unlink extends Command {
   static description = "Unlink a local project from a Hydrogen storefront.";
   static flags = {
-    path: commonFlags.path
+    ...commonFlags.path
   };
   async run() {
     const { flags } = await this.parse(Unlink);

package/dist/commands/hydrogen/upgrade.js

@@ -10,6 +10,7 @@ import { renderSuccess, renderInfo, renderConfirmationPrompt, renderTasks, rende
 import { readFile, isDirectory, mkdir, fileExists, touchFile, removeFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { installNodeModules, getPackageManager, getDependencies } from '@shopify/cli-kit/node/node-package-manager';
 import { AbortError } from '@shopify/cli-kit/node/error';
+import { getCliCommand } from '../../lib/shell.js';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
 
@@ -17,7 +18,7 @@ const INSTRUCTIONS_FOLDER = ".hydrogen";
 class Upgrade extends Command {
   static description = "Upgrade Remix and Hydrogen npm dependencies.";
   static flags = {
-    path: commonFlags.path,
+    ...commonFlags.path,
     version: Flags.string({
       description: "A target hydrogen version to update to",
       required: false,
@@ -153,7 +154,7 @@ async function getHydrogenVersion({ appPath }) {
 async function getChangelog() {
   if (CACHED_CHANGELOG)
     return CACHED_CHANGELOG;
-  if (process.env.FORCE_CHANGELOG_SOURCE === "local" || process.env.FORCE_CHANGELOG_SOURCE !== "remote" && !!process.env.LOCAL_ENV) {
+  if (process.env.FORCE_CHANGELOG_SOURCE === "local" || process.env.FORCE_CHANGELOG_SOURCE !== "remote" && !!process.env.LOCAL_DEV) {
     const require2 = createRequire(import.meta.url);
     return require2(fileURLToPath(
       new URL("../../../../../docs/changelog.json", import.meta.url)
@@ -681,6 +682,7 @@ async function displayDevUpgradeNotice({
     return `${version} - ${release.title}`;
   }).slice(0, 5) : [];
   let headline = Object.keys(uniqueAvailableUpgrades).length > 1 ? `There are ${Object.keys(uniqueAvailableUpgrades).length} new @shopify/hydrogen versions available.` : `There's a new @shopify/hydrogen version available.`;
+  const cliCommand = await getCliCommand();
   renderInfo({
     headline,
     body: [`Current: ${currentVersion} | Latest: ${pinnedLatestVersion}`],
@@ -705,7 +707,7 @@ async function displayDevUpgradeNotice({
           {
             list: {
               items: [
-                `Run \`h2 upgrade\` or \`h2 upgrade --version XXXX.X.XX\``,
+                `Run \`${cliCommand} upgrade\` or \`${cliCommand} upgrade --version XXXX.X.XX\``,
                 ,
                 `Read release notes at https://hydrogen.shopify.dev/releases`
               ]

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

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

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

@@ -0,0 +1,13 @@
+import {defineConfig} from 'vite';
+import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
+import {vitePlugin as remix} from '@remix-run/dev';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    hydrogen(),
+    oxygen(),
+    remix({buildDirectory: 'dist'}),
+    tsconfigPaths(),
+  ],
+});

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,54 @@
 # skeleton
 
+## 1.0.6
+
+### Patch Changes
+
+- Improve performance of predictive search: ([#1823](https://github.com/Shopify/hydrogen/pull/1823)) by [@frandiox](https://github.com/frandiox)
+
+  - Change the request to be GET instead of POST to avoid Remix route revalidations.
+  - Add Cache-Control headers to the response to get quicker results when typing.
+
+  Aside from that, it now shows a loading state when fetching the results instead of "No results found.".
+
+- Updated dependencies [[`351b3c1b`](https://github.com/Shopify/hydrogen/commit/351b3c1b7768870793ff072ba91426107ba0180c), [`5060cf57`](https://github.com/Shopify/hydrogen/commit/5060cf57f69d8391b425b54acaa487af1f7405ae), [`2888014e`](https://github.com/Shopify/hydrogen/commit/2888014e54fab72c150e9eca55df3c6dd789503e)]:
+  - @shopify/hydrogen@2024.1.4
+  - @shopify/cli-hydrogen@7.1.2
+
+## 1.0.5
+
+### Patch Changes
+
+- Update the `@shopify/cli` dependency: ([#1786](https://github.com/Shopify/hydrogen/pull/1786)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  - "@shopify/cli": "3.52.0",
+  + "@shopify/cli": "3.56.3",
+  ```
+
+- Update Remix and associated packages to 2.8.0. ([#1781](https://github.com/Shopify/hydrogen/pull/1781)) by [@frandiox](https://github.com/frandiox)
+
+  ```diff
+  "dependencies": {
+  -  "@remix-run/react": "^2.6.0",
+  -  "@remix-run/server-runtime": "^2.6.0",
+  +  "@remix-run/react": "^2.8.0",
+  +  "@remix-run/server-runtime": "^2.8.0",
+      //...
+    },
+    "devDependencies": {
+  -   "@remix-run/dev": "^2.6.0",
+  -   "@remix-run/eslint-config": "^2.6.0",
+  +  "@remix-run/dev": "^2.8.0",
+  +  "@remix-run/eslint-config": "^2.8.0",
+      //...
+    },
+  ```
+
+- Updated dependencies [[`ced1d4cb`](https://github.com/Shopify/hydrogen/commit/ced1d4cb5b1eeeb4303449eb1d60aac44f33480e), [`fc013401`](https://github.com/Shopify/hydrogen/commit/fc013401c5727948b602c9c6b6963a2df21cbd38), [`e641255e`](https://github.com/Shopify/hydrogen/commit/e641255eccc5783b41c8fabbc88313a610f539d0), [`d7e04cb6`](https://github.com/Shopify/hydrogen/commit/d7e04cb6a33d40ea86fa8ac2712d7a5ea785de2d), [`eedd9c49`](https://github.com/Shopify/hydrogen/commit/eedd9c497b36aba47a641cecbc710e18f5b14e46)]:
+  - @shopify/cli-hydrogen@7.1.1
+  - @shopify/hydrogen@2024.1.3
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -263,20 +263,18 @@ type ChildrenRenderProps = {
 
 type SearchFromProps = {
   action?: FormProps['action'];
-  method?: FormProps['method'];
   className?: string;
   children: (passedProps: ChildrenRenderProps) => React.ReactNode;
   [key: string]: unknown;
 };
 
 /**
- *  Search form component that posts search requests to the `/search` route
+ *  Search form component that sends search requests to the `/search` route
  **/
 export function PredictiveSearchForm({
   action,
   children,
   className = 'predictive-search-form',
-  method = 'POST',
   ...props
 }: SearchFromProps) {
   const params = useParams();
@@ -287,13 +285,14 @@ export function PredictiveSearchForm({
 
   function fetchResults(event: React.ChangeEvent<HTMLInputElement>) {
     const searchAction = action ?? '/api/predictive-search';
+    const newSearchTerm = event.target.value || '';
     const localizedAction = params.locale
       ? `/${params.locale}${searchAction}`
       : searchAction;
-    const newSearchTerm = event.target.value || '';
+
     fetcher.submit(
       {q: newSearchTerm, limit: '6'},
-      {method, action: localizedAction},
+      {method: 'GET', action: localizedAction},
     );
   }
 
@@ -322,7 +321,7 @@ export function PredictiveSearchForm({
 }
 
 export function PredictiveSearchResults() {
-  const {results, totalResults, searchInputRef, searchTerm} =
+  const {results, totalResults, searchInputRef, searchTerm, state} =
     usePredictiveSearch();
 
   function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -333,9 +332,14 @@ export function PredictiveSearchResults() {
     window.location.href = event.currentTarget.href;
   }
 
+  if (state === 'loading') {
+    return <div>Loading...</div>;
+  }
+
   if (!totalResults) {
     return <NoPredictiveSearchResults searchTerm={searchTerm} />;
   }
+
   return (
     <div className="predictive-search-results">
       <div>
@@ -452,6 +456,7 @@ function SearchResultItem({goToSearchResult, item}: SearchResultItemProps) {
 type UseSearchReturn = NormalizedPredictiveSearch & {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   searchTerm: React.MutableRefObject<string>;
+  state: ReturnType<typeof useFetcher>['state'];
 };
 
 function usePredictiveSearch(): UseSearchReturn {
@@ -474,7 +479,7 @@ function usePredictiveSearch(): UseSearchReturn {
     searchInputRef.current = document.querySelector('input[type="search"]');
   }, []);
 
-  return {...search, searchInputRef, searchTerm};
+  return {...search, searchInputRef, searchTerm, state: searchFetcher.state};
 }
 
 /**

package/dist/generator-templates/starter/app/root.tsx

@@ -17,8 +17,7 @@ import {
   isRouteErrorResponse,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
-import favicon from '../public/favicon.svg';
+import favicon from './assets/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';

package/dist/generator-templates/starter/app/routes/api.predictive-search.tsx

@@ -34,18 +34,16 @@ const DEFAULT_SEARCH_TYPES: PredictiveSearchTypes[] = [
  * Fetches the search results from the predictive search API
  * requested by the SearchForm component
  */
-export async function action({request, params, context}: LoaderFunctionArgs) {
-  if (request.method !== 'POST') {
-    throw new Error('Invalid request method');
-  }
-
+export async function loader({request, params, context}: LoaderFunctionArgs) {
   const search = await fetchPredictiveSearchResults({
     params,
     request,
     context,
   });
 
-  return json(search);
+  return json(search, {
+    headers: {'Cache-Control': `max-age=${search.searchTerm ? 60 : 3600}`},
+  });
 }
 
 async function fetchPredictiveSearchResults({
@@ -55,15 +53,10 @@ async function fetchPredictiveSearchResults({
 }: Pick<LoaderFunctionArgs, 'params' | 'context' | 'request'>) {
   const url = new URL(request.url);
   const searchParams = new URLSearchParams(url.search);
-  let body;
-  try {
-    body = await request.formData();
-  } catch (error) {}
-  const searchTerm = String(body?.get('q') || searchParams.get('q') || '');
-  const limit = Number(body?.get('limit') || searchParams.get('limit') || 10);
-  const rawTypes = String(
-    body?.get('type') || searchParams.get('type') || 'ANY',
-  );
+  const searchTerm = searchParams.get('q') || '';
+  const limit = Number(searchParams.get('limit') || 10);
+  const rawTypes = String(searchParams.get('type') || 'ANY');
+
   const searchTypes =
     rawTypes === 'ANY'
       ? DEFAULT_SEARCH_TYPES

package/dist/generator-templates/starter/package.json

@@ -2,7 +2,8 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.4",
+  "version": "1.0.6",
+  "type": "commonjs",
   "scripts": {
     "build": "shopify hydrogen build",
     "dev": "shopify hydrogen dev --codegen",
@@ -13,11 +14,11 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.6.0",
-    "@remix-run/server-runtime": "^2.6.0",
-    "@shopify/cli": "3.52.0",
-    "@shopify/cli-hydrogen": "^7.1.0",
-    "@shopify/hydrogen": "~2024.1.2",
+    "@remix-run/react": "^2.8.0",
+    "@remix-run/server-runtime": "^2.8.0",
+    "@shopify/cli": "3.56.3",
+    "@shopify/cli-hydrogen": "^7.1.2",
+    "@shopify/hydrogen": "~2024.1.4",
     "@shopify/remix-oxygen": "^2.0.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
@@ -26,8 +27,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.8.0",
+    "@remix-run/eslint-config": "^2.8.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

package/dist/lib/build.js

@@ -10,7 +10,8 @@ const GENERATOR_SETUP_ASSETS_SUB_DIRS = [
   "tailwind",
   "css-modules",
   "vanilla-extract",
-  "postcss"
+  "postcss",
+  "vite"
 ];
 function getAssetDir(feature) {
   if (process.env.NODE_ENV === "test") {

package/dist/lib/codegen.js

@@ -2,7 +2,7 @@ import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderWarning, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { relativePath, joinPath, basename } from '@shopify/cli-kit/node/path';
+import { relativePath, joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 
 const nodePath = process.argv[1];
@@ -36,7 +36,7 @@ function spawnCodegenProcess({
     [
       fileURLToPath(import.meta.url),
       rootDirectory,
-      appDirectory,
+      appDirectory ?? resolvePath("app"),
       configFilePath ?? ""
     ],
     { stdio: ["inherit", "ignore", "pipe"] }
@@ -46,6 +46,8 @@ function spawnCodegenProcess({
     if (!dataString)
       return;
     const { message, details } = normalizeCodegenError(dataString, rootDirectory);
+    if (/`punycode`/.test(message))
+      return;
     console.log("");
     renderWarning({ headline: message, body: details });
   });
@@ -110,7 +112,10 @@ async function generateTypes({
     return acc;
   }, {});
 }
-async function generateDefaultConfig({ rootDirectory, appDirectory }, forceSfapiVersion) {
+async function generateDefaultConfig({
+  rootDirectory,
+  appDirectory = resolvePath(rootDirectory, "app")
+}, forceSfapiVersion) {
   const { getSchema, preset, pluckConfig } = await import('@shopify/hydrogen-codegen');
   const { loadConfig } = await import('graphql-config');
   const gqlConfig = await loadConfig({

package/dist/lib/environment-variables.test.js

@@ -34,7 +34,8 @@ describe("getAllEnvironmentVariables()", () => {
           id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
           key: "PUBLIC_API_TOKEN",
           value: "abc123",
-          isSecret: false
+          isSecret: false,
+          readOnly: false
         }
       ]
     });
@@ -102,7 +103,8 @@ describe("getAllEnvironmentVariables()", () => {
             id: "gid://shopify/HydrogenStorefrontEnvironmentVariable/1",
             key: "PUBLIC_API_TOKEN",
             value: "",
-            isSecret: true
+            isSecret: true,
+            readOnly: false
           }
         ]
       });