diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx index d143cc3..ab65ebe 100644 --- a/app/routes/($locale)._index.tsx +++ b/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, }, diff --git a/app/routes/($locale).products.$productHandle.tsx b/app/routes/($locale).products.$productHandle.tsx index 32294ee..dbcea4a 100644 --- a/app/routes/($locale).products.$productHandle.tsx +++ b/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), }); } diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx index e2f46e6..a3f899b 100644 --- a/app/sections/image-gallery/image.tsx +++ b/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( (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 ( - ) - } -) + ); + }, +); -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']], +}; diff --git a/app/weaverse/client.ts b/app/weaverse/client.ts new file mode 100644 index 0000000..5578fe9 --- /dev/null +++ b/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; + 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; diff --git a/app/weaverse/index.tsx b/app/weaverse/index.tsx index bdd9e98..57d428e 100644 --- a/app/weaverse/index.tsx +++ b/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 ( ); diff --git a/server.ts b/server.ts index a6ade47..7a86552 100644 --- a/server.ts +++ b/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, }), }), });