@shopify/cli-hydrogen 7.1.1 → 7.1.2

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

@@ -9,7 +9,7 @@
     "isbot": "^3.8.0"
   },
   "devDependencies": {
-    "vite": "^5.1.0",
+    "vite": "~5.1.0",
     "vite-tsconfig-paths": "^4.3.1"
   }
 }

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

@@ -1,5 +1,20 @@
 # 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

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/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,7 @@
   "name": "skeleton",
   "private": true,
   "sideEffects": false,
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "commonjs",
   "scripts": {
     "build": "shopify hydrogen build",
@@ -17,8 +17,8 @@
     "@remix-run/react": "^2.8.0",
     "@remix-run/server-runtime": "^2.8.0",
     "@shopify/cli": "3.56.3",
-    "@shopify/cli-hydrogen": "^7.1.1",
-    "@shopify/hydrogen": "~2024.1.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",

package/oclif.manifest.json

@@ -1592,5 +1592,5 @@
       ]
     }
   },
-  "version": "7.1.1"
+  "version": "7.1.2"
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "@shopify:registry": "https://registry.npmjs.org"
   },
-  "version": "7.1.1",
+  "version": "7.1.2",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -31,7 +31,7 @@
     "flame-chart-js": "2.3.2",
     "get-port": "^7.0.0",
     "type-fest": "^4.5.0",
-    "vite": "^5.1.0",
+    "vite": "~5.1.0",
     "vitest": "^1.0.4"
   },
   "dependencies": {
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "@remix-run/dev": "^2.1.0",
-    "vite": "^5.1.0"
+    "vite": "~5.1.0"
   },
   "peerDependenciesMeta": {
     "@remix-run/dev": {