@weaverse/hydrogen 2.8.3 → 2.8.5

package/dist/index.d.mts

@@ -57,6 +57,7 @@ declare class WeaverseClient {
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
+    generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
 }
@@ -286,12 +287,14 @@ type HydrogenThemeEnv = {
     PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
     PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
 };
-type WeaverseClientArgs = {
+type CreateWeaverseClientArgs = {
     request: Request;
     cache: Cache;
     waitUntil: ExecutionContext['waitUntil'];
     env: HydrogenThemeEnv;
-    storefront: Storefront<I18nBase>;
+    storefront: Storefront<I18nBase> | any;
+};
+type WeaverseClientArgs = CreateWeaverseClientArgs & {
     components: HydrogenComponent[];
     countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
@@ -347,4 +350,4 @@ declare class WeaverseHydrogenItem extends WeaverseItemStore {
     set data(update: HydrogenComponentData);
 }
 
-export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentLoaderFunction, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectConfig, type HydrogenProjectType, type HydrogenThemeEnv, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, ThemeSettingsStore, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStorefrontData, type WeaverseStudioQueries, type WeaverseThemeConfigs, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, useThemeSettings, withWeaverse };
+export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type CreateWeaverseClientArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentLoaderFunction, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectConfig, type HydrogenProjectType, type HydrogenThemeEnv, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, ThemeSettingsStore, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStorefrontData, type WeaverseStudioQueries, type WeaverseThemeConfigs, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, useThemeSettings, withWeaverse };

package/dist/index.d.ts

@@ -57,6 +57,7 @@ declare class WeaverseClient {
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
+    generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
 }
@@ -286,12 +287,14 @@ type HydrogenThemeEnv = {
     PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: string;
     PUBLIC_CUSTOMER_ACCOUNT_API_URL: string;
 };
-type WeaverseClientArgs = {
+type CreateWeaverseClientArgs = {
     request: Request;
     cache: Cache;
     waitUntil: ExecutionContext['waitUntil'];
     env: HydrogenThemeEnv;
-    storefront: Storefront<I18nBase>;
+    storefront: Storefront<I18nBase> | any;
+};
+type WeaverseClientArgs = CreateWeaverseClientArgs & {
     components: HydrogenComponent[];
     countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
@@ -347,4 +350,4 @@ declare class WeaverseHydrogenItem extends WeaverseItemStore {
     set data(update: HydrogenComponentData);
 }
 
-export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentLoaderFunction, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectConfig, type HydrogenProjectType, type HydrogenThemeEnv, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, ThemeSettingsStore, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStorefrontData, type WeaverseStudioQueries, type WeaverseThemeConfigs, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, useThemeSettings, withWeaverse };
+export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type CreateWeaverseClientArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentLoaderFunction, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectConfig, type HydrogenProjectType, type HydrogenThemeEnv, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, ThemeSettingsStore, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStorefrontData, type WeaverseStudioQueries, type WeaverseThemeConfigs, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, useThemeSettings, withWeaverse };

package/dist/index.js

@@ -38,15 +38,15 @@ __export(src_exports, {
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
-  useChildInstances: () => import_react16.useChildInstances,
-  useItemInstance: () => import_react16.useItemInstance,
-  useParentInstance: () => import_react16.useParentInstance,
+  useChildInstances: () => import_react14.useChildInstances,
+  useItemInstance: () => import_react14.useItemInstance,
+  useParentInstance: () => import_react14.useParentInstance,
   useThemeSettings: () => useThemeSettings,
-  useWeaverse: () => import_react16.useWeaverse,
+  useWeaverse: () => import_react14.useWeaverse,
   withWeaverse: () => withWeaverse
 });
 module.exports = __toCommonJS(src_exports);
-var import_react16 = require("@weaverse/react");
+var import_react14 = require("@weaverse/react");
 
 // src/components/main.tsx
 var main_exports = {};
@@ -69,9 +69,9 @@ var schema = {
 var defaultComponents = [main_exports];
 
 // src/WeaverseHydrogenRoot.tsx
-var import_react13 = require("@remix-run/react");
-var import_react14 = require("@weaverse/react");
-var import_react15 = __toESM(require("react"));
+var import_react11 = require("@remix-run/react");
+var import_react12 = require("@weaverse/react");
+var import_react13 = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
@@ -174,41 +174,19 @@ function useThemeSettings() {
 }
 
 // src/Effect.tsx
-var import_react12 = require("react");
-
-// src/hooks/use-pixel.ts
-var import_react7 = require("react");
-var import_react8 = require("@remix-run/react");
-var fetchingKey = "";
-function usePixel(context) {
-  let { projectId, pageId, weaverseHost, isDesignMode } = context;
-  let location = (0, import_react8.useLocation)();
-  (0, import_react7.useEffect)(() => {
-    if (isDesignMode || !projectId || !pageId || !weaverseHost)
-      return;
-    let currentKey = `${projectId}-${pageId}-${location.pathname}`;
-    if (fetchingKey === currentKey)
-      return;
-    fetchingKey = currentKey;
-    let url = `${weaverseHost}/api/public/px`;
-    let xhr = new XMLHttpRequest();
-    xhr.open("POST", url, true);
-    xhr.setRequestHeader("Content-Type", "application/json");
-    xhr.send(JSON.stringify({ projectId, pageId }));
-  }, [location]);
-}
+var import_react10 = require("react");
 
 // src/hooks/use-studio.ts
-var import_react9 = require("@remix-run/react");
-var import_react10 = require("@weaverse/react");
-var import_react11 = require("react");
+var import_react7 = require("@remix-run/react");
+var import_react8 = require("@weaverse/react");
+var import_react9 = require("react");
 function useStudio(weaverse) {
-  let { revalidate } = (0, import_react9.useRevalidator)();
-  let { pathname, search } = (0, import_react9.useLocation)();
-  let navigate = (0, import_react9.useNavigate)();
+  let { revalidate } = (0, import_react7.useRevalidator)();
+  let { pathname, search } = (0, import_react7.useLocation)();
+  let navigate = (0, import_react7.useNavigate)();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -217,7 +195,7 @@ function useStudio(weaverse) {
         themeSettingsStore
       };
       let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-      (0, import_react10.loadScript)(studioSrc).then(() => {
+      (0, import_react8.loadScript)(studioSrc).then(() => {
         window.weaverseStudio?.init(weaverse);
       }).catch(console.error);
     }
@@ -225,31 +203,30 @@ function useStudio(weaverse) {
 }
 
 // src/Effect.tsx
-var WeaverseEffect = (0, import_react12.memo)(
+var WeaverseEffect = (0, import_react10.memo)(
   ({ context }) => {
     useStudio(context);
-    usePixel(context);
     return null;
   }
 );
 
 // src/WeaverseHydrogenRoot.tsx
-var WeaverseHydrogenRoot = (0, import_react15.memo)(
+var WeaverseHydrogenRoot = (0, import_react13.memo)(
   ({
     errorComponent: ErrorComponent = FallbackError,
     components
   }) => {
-    let loaderData = (0, import_react13.useLoaderData)();
+    let loaderData = (0, import_react11.useLoaderData)();
     let data = loaderData?.weaverseData;
     if (data) {
       if (data instanceof Promise) {
-        return /* @__PURE__ */ import_react15.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react15.default.createElement(import_react15.Suspense, null, /* @__PURE__ */ import_react15.default.createElement(import_react13.Await, { resolve: data }, (resolvedData) => {
-          return /* @__PURE__ */ import_react15.default.createElement(RenderRoot, { data: resolvedData, components });
+        return /* @__PURE__ */ import_react13.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react13.default.createElement(import_react13.Suspense, null, /* @__PURE__ */ import_react13.default.createElement(import_react11.Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ import_react13.default.createElement(RenderRoot, { data: resolvedData, components });
         })));
       }
-      return /* @__PURE__ */ import_react15.default.createElement(RenderRoot, { data, components });
+      return /* @__PURE__ */ import_react13.default.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement(
       ErrorComponent,
       {
         error: { message: "No Weaverse data return from route loader!" }
@@ -260,17 +237,17 @@ var WeaverseHydrogenRoot = (0, import_react15.memo)(
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(import_react14.WeaverseRoot, { context: weaverse }), /* @__PURE__ */ import_react15.default.createElement(WeaverseEffect, { context: weaverse }));
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(import_react12.WeaverseRoot, { context: weaverse }), /* @__PURE__ */ import_react13.default.createElement(WeaverseEffect, { context: weaverse }));
 }
 function withWeaverse(Component) {
   return (props) => {
-    let loaderData = (0, import_react13.useRouteLoaderData)("root");
+    let loaderData = (0, import_react11.useRouteLoaderData)("root");
     let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
-    return /* @__PURE__ */ import_react15.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react15.default.createElement(Component, { ...props }));
+    return /* @__PURE__ */ import_react13.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react13.default.createElement(Component, { ...props }));
   };
 }
 function FallbackError({ error }) {
-  return /* @__PURE__ */ import_react15.default.createElement("div", null, error?.message || "An unexpected error occurred");
+  return /* @__PURE__ */ import_react13.default.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
 // src/weaverse-client.ts
@@ -281,7 +258,7 @@ var package_default = {
   name: "@weaverse/hydrogen",
   author: "Weaverse Team",
   description: "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  version: "2.8.3",
+  version: "2.8.5",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -319,7 +296,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.3",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -496,6 +473,20 @@ var WeaverseClient = class {
       return null;
     }
   };
+  generateFallbackPage = (message) => {
+    return {
+      id: "fallback" + Date.now(),
+      rootId: "root",
+      name: "Error",
+      items: [
+        {
+          type: "main",
+          id: "main",
+          data: { dangerouslySetInnerHTML: { __html: message } }
+        }
+      ]
+    };
+  };
   loadPage = async (params = {}) => {
     return new Promise(async (resolve, reject) => {
       try {
@@ -532,7 +523,9 @@ var WeaverseClient = class {
           throw new Error(`Weaverse project not found. Id: ${projectId}`);
         }
         if (!page) {
-          throw new Error(`No Weaverse page assigned to this url.`);
+          page = this.generateFallbackPage(
+            `No Weaverse page assigned to this url.1`
+          );
         }
         if (page?.items) {
           let items = page.items;
@@ -592,7 +585,7 @@ function getSelectedProductOptions(request) {
 }
 
 // src/index.ts
-var WeaverseHydrogen = class extends import_react16.Weaverse {
+var WeaverseHydrogen = class extends import_react14.Weaverse {
   platformType = "shopify-hydrogen";
   pageId;
   internal;
@@ -609,7 +602,7 @@ var WeaverseHydrogen = class extends import_react16.Weaverse {
   }
   registerComponents = (components) => {
     components.forEach((comp) => {
-      import_react16.Weaverse.registerElement({
+      import_react14.Weaverse.registerElement({
         type: comp?.schema?.type,
         Component: comp?.default,
         schema: comp?.schema,
@@ -618,7 +611,7 @@ var WeaverseHydrogen = class extends import_react16.Weaverse {
     });
   };
 };
-var WeaverseHydrogenItem = class extends import_react16.WeaverseItemStore {
+var WeaverseHydrogenItem = class extends import_react14.WeaverseItemStore {
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
     let { data, ...rest } = initialData;

package/dist/index.mjs

@@ -142,39 +142,17 @@ function useThemeSettings() {
 // src/Effect.tsx
 import { memo } from "react";
 
-// src/hooks/use-pixel.ts
-import { useEffect } from "react";
-import { useLocation } from "@remix-run/react";
-var fetchingKey = "";
-function usePixel(context) {
-  let { projectId, pageId, weaverseHost, isDesignMode } = context;
-  let location = useLocation();
-  useEffect(() => {
-    if (isDesignMode || !projectId || !pageId || !weaverseHost)
-      return;
-    let currentKey = `${projectId}-${pageId}-${location.pathname}`;
-    if (fetchingKey === currentKey)
-      return;
-    fetchingKey = currentKey;
-    let url = `${weaverseHost}/api/public/px`;
-    let xhr = new XMLHttpRequest();
-    xhr.open("POST", url, true);
-    xhr.setRequestHeader("Content-Type", "application/json");
-    xhr.send(JSON.stringify({ projectId, pageId }));
-  }, [location]);
-}
-
 // src/hooks/use-studio.ts
-import { useLocation as useLocation2, useNavigate, useRevalidator } from "@remix-run/react";
+import { useLocation, useNavigate, useRevalidator } from "@remix-run/react";
 import { loadScript } from "@weaverse/react";
-import { useEffect as useEffect2 } from "react";
+import { useEffect } from "react";
 function useStudio(weaverse) {
   let { revalidate } = useRevalidator();
-  let { pathname, search } = useLocation2();
+  let { pathname, search } = useLocation();
   let navigate = useNavigate();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  useEffect2(() => {
+  useEffect(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -194,7 +172,6 @@ function useStudio(weaverse) {
 var WeaverseEffect = memo(
   ({ context }) => {
     useStudio(context);
-    usePixel(context);
     return null;
   }
 );
@@ -247,7 +224,7 @@ var package_default = {
   name: "@weaverse/hydrogen",
   author: "Weaverse Team",
   description: "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  version: "2.8.3",
+  version: "2.8.5",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -285,7 +262,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.3",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -462,6 +439,20 @@ var WeaverseClient = class {
       return null;
     }
   };
+  generateFallbackPage = (message) => {
+    return {
+      id: "fallback" + Date.now(),
+      rootId: "root",
+      name: "Error",
+      items: [
+        {
+          type: "main",
+          id: "main",
+          data: { dangerouslySetInnerHTML: { __html: message } }
+        }
+      ]
+    };
+  };
   loadPage = async (params = {}) => {
     return new Promise(async (resolve, reject) => {
       try {
@@ -498,7 +489,9 @@ var WeaverseClient = class {
           throw new Error(`Weaverse project not found. Id: ${projectId}`);
         }
         if (!page) {
-          throw new Error(`No Weaverse page assigned to this url.`);
+          page = this.generateFallbackPage(
+            `No Weaverse page assigned to this url.1`
+          );
         }
         if (page?.items) {
           let items = page.items;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "description": "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -40,10 +40,10 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@weaverse/react": "2.8.3",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^2.0.1"
   }
-}
+}

package/readme.md

@@ -34,7 +34,7 @@ Initialize the Weaverse Client to establish a connection between your Hydrogen p
 ```typescript
 // <root>/server.ts
 
-import {createWeaverseClient} from '~/weaverse/create-weaverse.server';
+import { createWeaverseClient } from '~/weaverse/create-weaverse.server'
 
 const handleRequest = createRequestHandler({
   // ...
@@ -49,8 +49,7 @@ const handleRequest = createRequestHandler({
     }),
     // ... more app context properties
   }),
-});
-
+})
 ```
 
 ### Data Fetching and Rendering
@@ -60,19 +59,18 @@ Use the Weaverse Client to fetch data such as page content and global theme sett
 ```typescript
 // <root>/app/routes/($locale)._index.tsx
 
-import { json } from '@shopify/remix-oxygen';
-import { type RouteLoaderArgs } from '@weaverse/hydrogen';
+import { json } from '@shopify/remix-oxygen'
+import { type RouteLoaderArgs } from '@weaverse/hydrogen'
 
-export async function loader({context}: RouteLoaderArgs) {
-  let {weaverse} = context;
+export async function loader({ context }: RouteLoaderArgs) {
+  let { weaverse } = context
 
   return json({
     // The key prop for a Weaverse page must always be `weaverseData`
     weaverseData: await weaverse.loadPage(),
     // Additional page data...
-  });
+  })
 }
-
 ```
 
 Implement the `WeaverseHydrogenRoot` component to render the fetched content:
@@ -80,9 +78,9 @@ Implement the `WeaverseHydrogenRoot` component to render the fetched content:
 ```jsx
 // <root>/app/weaverse/index.tsx
 
-import {WeaverseHydrogenRoot} from '@weaverse/hydrogen';
-import {GenericError} from '~/components/GenericError';
-import {components} from './components';
+import { WeaverseHydrogenRoot } from '@weaverse/hydrogen'
+import { GenericError } from '~/components/GenericError'
+import { components } from './components'
 
 export function WeaverseContent() {
   return (
@@ -90,18 +88,16 @@ export function WeaverseContent() {
       components={components}
       errorComponent={GenericError}
     />
-  );
+  )
 }
 
-
 // <root>/app/routes/($locale)._index.tsx
 
-import { WeaverseContent } from '~/weaverse';
+import { WeaverseContent } from '~/weaverse'
 
 export default function Homepage() {
-  return <WeaverseContent />;
+  return <WeaverseContent />
 }
-
 ```
 
 ### Defining Component Schema
@@ -109,7 +105,7 @@ export default function Homepage() {
 Define your component's schema to control its behavior and interactivity within Weaverse Studio:
 
 ```typescript
-import type { HydrogenComponentSchema } from '@weaverse/hydrogen';
+import type { HydrogenComponentSchema } from '@weaverse/hydrogen'
 
 export let schema: HydrogenComponentSchema = {
   title: 'Product Card',
@@ -117,17 +113,13 @@ export let schema: HydrogenComponentSchema = {
   inspector: [
     {
       group: 'Settings',
-      inputs: [] // Defining input settings
-    }
+      inputs: [], // Defining input settings
+    },
   ],
   childTypes: ['image', 'product-title', 'price'],
   presets: {
     type: 'product-card',
-    children: [
-      { type: 'image' },
-      { type: 'product-title' },
-      { type: 'price' },
-    ],
+    children: [{ type: 'image' }, { type: 'product-title' }, { type: 'price' }],
   },
   limit: 3,
   enabledOn: {
@@ -135,8 +127,7 @@ export let schema: HydrogenComponentSchema = {
     groups: ['body'],
   },
   toolbar: ['general-settings', ['duplicate', 'delete']],
-};
-
+}
 ```
 
 ### Customizing Input Settings
@@ -170,4 +161,3 @@ for more details on how to contribute effectively.
 
 This package is created by The Weaverse Team ([https://weaverse.io](https://weaverse.io)) and is licensed under the MIT
 License.
-