chore: await for deferred weaverse data

app/routes/($locale)._index.tsx

@@ -26,7 +26,7 @@ export async function loader(args: RouteLoaderArgs) {
 
   return defer({
     shop,
-    weaverseData: context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(args),
     analytics: {
       pageType: AnalyticsPageType.home,
     },

app/routes/($locale).products.$productHandle.tsx

@@ -90,7 +90,7 @@ export async function loader(args: RouteLoaderArgs) {
       totalValue: parseFloat(selectedVariant.price.amount),
     },
     seo,
-    weaverseData: context.weaverse.loadPage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 }
 

app/sections/image-gallery/image.tsx

@@ -1,10 +1,10 @@
 import type {
   HydrogenComponentProps,
-  HydrogenComponentSchema
-} from "@weaverse/hydrogen"
-import clsx from "clsx"
-import { forwardRef } from "react"
-import { Image } from "@shopify/hydrogen"
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import {Image} from '@shopify/hydrogen';
 
 interface ImageGalleryItemProps extends HydrogenComponentProps {
   // TODO: change src to imageData
@@ -19,58 +19,58 @@ interface ImageGalleryItemProps extends HydrogenComponentProps {
   hideOnMobile: boolean;
 }
 
-let columnSpanClasses: { [span: number]: string } = {
-  1: "col-span-1",
-  2: "col-span-2",
-  3: "col-span-3",
-  4: "col-span-4"
-}
+let columnSpanClasses: {[span: number]: string} = {
+  1: 'col-span-1',
+  2: 'col-span-2',
+  3: 'col-span-3',
+  4: 'col-span-4',
+};
 
-let radiusClasses: { [radius: string]: string } = {
-  0: "",
-  2: "rounded-sm",
-  4: "rounded",
-  6: "rounded-md",
-  8: "rounded-lg"
-}
+let radiusClasses: {[radius: string]: string} = {
+  0: '',
+  2: 'rounded-sm',
+  4: 'rounded',
+  6: 'rounded-md',
+  8: 'rounded-lg',
+};
 
 let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>(
   (props, ref) => {
-    let { src, columnSpan, borderRadius, hideOnMobile, ...rest } = props
-    let data = typeof src === "object" ? src : { url: src, altText: src }
+    let {src, columnSpan, borderRadius, hideOnMobile, ...rest} = props;
+    let data = typeof src === 'object' ? src : {url: src, altText: src};
     return (
       <Image
         ref={ref}
         {...rest}
         className={clsx(
-          "h-72 object-cover object-center w-full",
+          'h-72 object-cover object-center w-full',
           columnSpanClasses[columnSpan],
           radiusClasses[borderRadius],
-          hideOnMobile && "hidden sm:block"
+          hideOnMobile && 'hidden sm:block',
         )}
         data={data}
         sizes={`(min-width: 45em) 50vw, 100vw`}
       />
-    )
-  }
-)
+    );
+  },
+);
 
-export default ImageGalleryItem
+export default ImageGalleryItem;
 
 export let schema: HydrogenComponentSchema = {
-  type: "image-gallery--item",
-  title: "Image",
+  type: 'image-gallery--item',
+  title: 'Image',
   inspector: [
     {
-      group: "Image Gallery Item",
+      group: 'Image Gallery Item',
       inputs: [
         {
-          type: "image",
+          type: 'image',
           // TODO: change src to imageData object
-          name: "src",
-          label: "Image",
+          name: 'src',
+          label: 'Image',
           defaultValue:
-            "https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg"
+            'https://cdn.shopify.com/s/files/1/0728/0410/6547/files/pilot-image-placeholder.svg',
         },
         // {
         //   type: 'text',
@@ -79,36 +79,36 @@ export let schema: HydrogenComponentSchema = {
         //   defaultValue: 'Pilot Image',
         // },
         {
-          type: "range",
-          label: "Column Span",
-          name: "columnSpan",
+          type: 'range',
+          label: 'Column Span',
+          name: 'columnSpan',
           configs: {
             min: 1,
             max: 4,
-            step: 1
+            step: 1,
           },
-          defaultValue: 1
+          defaultValue: 1,
         },
         {
-          type: "range",
-          label: "Border Radius",
-          name: "borderRadius",
+          type: 'range',
+          label: 'Border Radius',
+          name: 'borderRadius',
           configs: {
             min: 0,
             max: 8,
             step: 2,
-            unit: "px"
+            unit: 'px',
           },
-          defaultValue: 8
+          defaultValue: 8,
         },
         {
-          type: "switch",
-          label: "Hide on Mobile",
-          name: "hideOnMobile",
-          defaultValue: false
-        }
-      ]
-    }
+          type: 'switch',
+          label: 'Hide on Mobile',
+          name: 'hideOnMobile',
+          defaultValue: false,
+        },
+      ],
+    },
   ],
-  toolbar: ["general-settings", ["duplicate", "delete"]]
-}
+  toolbar: ['general-settings', ['duplicate', 'delete']],
+};

app/weaverse/client.ts

@@ -0,0 +1,36 @@
+import {
+  createWeaverseClient,
+  getWeaverseConfigs,
+  I18nLocale,
+} from '@weaverse/hydrogen';
+import {countries} from '~/data/countries';
+import {themeSchema} from '~/weaverse/theme-schema';
+import {components} from '~/weaverse/components';
+import {createWithCache, Storefront} from '@shopify/hydrogen';
+
+export type CreateWeaverseClient = {
+  storefront: Storefront<I18nLocale>;
+  request: Request;
+  env: Env;
+  cache: Cache;
+  waitUntil: ExecutionContext['waitUntil'];
+};
+
+export function weaverseClient({
+  storefront,
+  request,
+  env,
+  cache,
+  waitUntil,
+}: CreateWeaverseClient) {
+  return createWeaverseClient({
+    storefront,
+    countries,
+    themeSchema,
+    components,
+    configs: getWeaverseConfigs(request, env),
+    withCache: createWithCache({cache, waitUntil}),
+  });
+}
+
+export default weaverseClient;

app/weaverse/index.tsx

@@ -1,15 +1,11 @@
 import {WeaverseHydrogenRoot} from '@weaverse/hydrogen';
 import {GenericError} from '~/components/GenericError';
 import {components} from './components';
-import {countries} from '~/data/countries';
-import {themeSchema} from './theme-schema';
 
 export function WeaverseContent() {
   return (
     <WeaverseHydrogenRoot
       components={components}
-      countries={countries}
-      themeSchema={themeSchema}
       errorComponent={GenericError}
     />
   );

server.ts

@@ -9,16 +9,12 @@ import {
   cartSetIdDefault,
   createCartHandler,
   createStorefrontClient,
-  createWithCache,
   storefrontRedirect,
 } from '@shopify/hydrogen';
 
 import {HydrogenSession} from '~/lib/session.server';
 import {getLocaleFromRequest} from '~/lib/utils';
-import {createWeaverseClient, getWeaverseConfigs} from '@weaverse/hydrogen';
-import {components} from '~/weaverse/components';
-import {countries} from '~/data/countries';
-import {themeSchema} from '~/weaverse/theme-schema';
+import weaverseClient from '~/weaverse/client';
 
 /**
  * Export a fetch handler in module format.
@@ -76,13 +72,12 @@ export default {
           storefront,
           cart,
           env,
-          weaverse: createWeaverseClient({
+          weaverse: weaverseClient({
             storefront,
-            countries,
-            themeSchema,
-            components,
-            configs: getWeaverseConfigs(request, env),
-            withCache: createWithCache({cache, waitUntil}),
+            request,
+            env,
+            cache,
+            waitUntil,
           }),
         }),
       });