@weaverse/hydrogen 2.1.1 → 2.2.0

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare class ThemeSettingsStore {
-    settings: HydrogenThemeSettings | null;
+    static settings: HydrogenThemeSettings | null;
     listeners: (() => void)[];
     countries?: Localizations;
     schema?: HydrogenThemeSchema;
@@ -43,14 +43,16 @@ declare class WeaverseClient {
     API: string;
     clientVersion: string;
     basePageConfigs: Omit<WeaverseProjectConfigs, 'requestInfo'>;
-    basePageRequestBody: Omit<FetchProjectRequestBody, 'url'>;
+    basePageRequestBody: Omit<FetchProjectRequestBody, 'url' | 'countries'>;
     configs: WeaverseProjectConfigs;
+    withCache: ReturnType<typeof createWithCache>;
     request: WeaverseClientArgs['request'];
     storefront: WeaverseClientArgs['storefront'];
     components: WeaverseClientArgs['components'];
     themeSchema: WeaverseClientArgs['themeSchema'];
     env: WeaverseClientArgs['env'];
-    withCache: WeaverseClientArgs['withCache'];
+    cache: WeaverseClientArgs['cache'];
+    waitUntil: WeaverseClientArgs['waitUntil'];
     countries?: WeaverseClientArgs['countries'];
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options: FetchWithCacheOptions) => Promise<T>;
@@ -272,7 +274,8 @@ type HydrogenThemeEnv = {
 };
 type WeaverseClientArgs = {
     request: Request;
-    withCache: ReturnType<typeof createWithCache>;
+    cache: Cache;
+    waitUntil: ExecutionContext['waitUntil'];
     env: HydrogenThemeEnv;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
@@ -298,7 +301,7 @@ declare global {
     }
 }
 
-declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps): React.JSX.Element;
+declare let WeaverseHydrogenRoot: React.MemoExoticComponent<({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps) => React.JSX.Element>;
 declare function withWeaverse(Component: React.ComponentType): (props: React.JSX.IntrinsicAttributes) => React.JSX.Element;
 
 declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
@@ -321,7 +324,7 @@ declare class WeaverseHydrogen extends Weaverse {
 }
 declare class WeaverseHydrogenItem extends WeaverseItemStore {
     weaverse: WeaverseHydrogen;
-    constructor(intialData: HydrogenComponentData, weaverse: WeaverseHydrogen);
+    constructor(initialData: HydrogenComponentData, weaverse: WeaverseHydrogen);
     get Element(): HydrogenElement;
     get data(): HydrogenComponentData;
     set data(update: HydrogenComponentData);

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare class ThemeSettingsStore {
-    settings: HydrogenThemeSettings | null;
+    static settings: HydrogenThemeSettings | null;
     listeners: (() => void)[];
     countries?: Localizations;
     schema?: HydrogenThemeSchema;
@@ -43,14 +43,16 @@ declare class WeaverseClient {
     API: string;
     clientVersion: string;
     basePageConfigs: Omit<WeaverseProjectConfigs, 'requestInfo'>;
-    basePageRequestBody: Omit<FetchProjectRequestBody, 'url'>;
+    basePageRequestBody: Omit<FetchProjectRequestBody, 'url' | 'countries'>;
     configs: WeaverseProjectConfigs;
+    withCache: ReturnType<typeof createWithCache>;
     request: WeaverseClientArgs['request'];
     storefront: WeaverseClientArgs['storefront'];
     components: WeaverseClientArgs['components'];
     themeSchema: WeaverseClientArgs['themeSchema'];
     env: WeaverseClientArgs['env'];
-    withCache: WeaverseClientArgs['withCache'];
+    cache: WeaverseClientArgs['cache'];
+    waitUntil: WeaverseClientArgs['waitUntil'];
     countries?: WeaverseClientArgs['countries'];
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options: FetchWithCacheOptions) => Promise<T>;
@@ -272,7 +274,8 @@ type HydrogenThemeEnv = {
 };
 type WeaverseClientArgs = {
     request: Request;
-    withCache: ReturnType<typeof createWithCache>;
+    cache: Cache;
+    waitUntil: ExecutionContext['waitUntil'];
     env: HydrogenThemeEnv;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
@@ -298,7 +301,7 @@ declare global {
     }
 }
 
-declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps): React.JSX.Element;
+declare let WeaverseHydrogenRoot: React.MemoExoticComponent<({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps) => React.JSX.Element>;
 declare function withWeaverse(Component: React.ComponentType): (props: React.JSX.IntrinsicAttributes) => React.JSX.Element;
 
 declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
@@ -321,7 +324,7 @@ declare class WeaverseHydrogen extends Weaverse {
 }
 declare class WeaverseHydrogenItem extends WeaverseItemStore {
     weaverse: WeaverseHydrogen;
-    constructor(intialData: HydrogenComponentData, weaverse: WeaverseHydrogen);
+    constructor(initialData: HydrogenComponentData, weaverse: WeaverseHydrogen);
     get Element(): HydrogenElement;
     get data(): HydrogenComponentData;
     set data(update: HydrogenComponentData);

package/dist/index.js

@@ -58,13 +58,14 @@ function createCachedWeaverseInstance(params, components) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
-      let { __cachedId } = w.data;
-      return pathname === params.requestInfo.pathname && search === params.requestInfo.search && __cachedId === params.data.__cachedId;
+      return pathname === params.requestInfo.pathname;
     });
     if (!weaverse) {
       weaverse = new WeaverseHydrogen(params, components);
       window.__weaverses.push(weaverse);
-      console.log("\u{1F4BF} Weaverse", weaverse);
+    } else if (weaverse.isDesignMode) {
+      weaverse.requestInfo = params.requestInfo;
+      weaverse.setProjectData(params.data);
     }
     return weaverse;
   }
@@ -72,7 +73,7 @@ function createCachedWeaverseInstance(params, components) {
 }
 function createWeaverseInstance(weaverseData, components) {
   let { page, configs, project, pageAssignment } = weaverseData || {};
-  let weaverse = createCachedWeaverseInstance(
+  return createCachedWeaverseInstance(
     {
       ...configs,
       data: page || {},
@@ -81,7 +82,6 @@ function createWeaverseInstance(weaverseData, components) {
     },
     components
   );
-  return weaverse;
 }
 var ThemeProvider = (0, import_react2.createContext)(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
@@ -126,26 +126,36 @@ function useStudio(weaverse) {
         (0, import_react5.loadScript)(studioSrc);
       }
     }
-  }, [weaverse]);
+  }, [weaverse.requestInfo]);
 }
 
 // src/hooks/use-theme-settings.ts
 var import_react7 = require("react");
-var ThemeSettingsStore = class {
-  settings = null;
+var ThemeSettingsStore = class _ThemeSettingsStore {
+  static settings = null;
   listeners = [];
   countries;
   schema;
   publicEnv;
   constructor(data) {
     let { theme, countries, schema, publicEnv } = data || {};
-    this.settings = theme || null;
+    if (!_ThemeSettingsStore.settings) {
+      _ThemeSettingsStore.settings = theme || null;
+    } else {
+      _ThemeSettingsStore.settings = {
+        ...theme,
+        ..._ThemeSettingsStore.settings
+      };
+    }
     this.countries = countries;
     this.schema = schema;
     this.publicEnv = publicEnv;
   }
   updateThemeSettings = (newSettings) => {
-    this.settings = { ...this.settings, ...newSettings };
+    _ThemeSettingsStore.settings = {
+      ..._ThemeSettingsStore.settings,
+      ...newSettings
+    };
     this.emitChange();
   };
   subscribe = (listener) => {
@@ -155,10 +165,10 @@ var ThemeSettingsStore = class {
     };
   };
   getSnapshot = () => {
-    return this.settings;
+    return _ThemeSettingsStore.settings;
   };
   getServerSnapshot = () => {
-    return this.settings;
+    return _ThemeSettingsStore.settings;
   };
   emitChange = () => {
     for (let listener of this.listeners) {
@@ -177,27 +187,29 @@ function useThemeSettings() {
 }
 
 // src/WeaverseHydrogenRoot.tsx
-function WeaverseHydrogenRoot({
-  errorComponent: ErrorComponent = FallbackError,
-  components
-}) {
-  let loaderData = (0, import_react8.useLoaderData)();
-  let data = loaderData?.weaverseData;
-  if (data) {
-    if (data instanceof Promise) {
-      return /* @__PURE__ */ import_react10.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react10.default.createElement(import_react10.Suspense, null, /* @__PURE__ */ import_react10.default.createElement(import_react8.Await, { resolve: data }, (resolvedData) => {
-        return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data: resolvedData, components });
-      })));
+var WeaverseHydrogenRoot = (0, import_react10.memo)(
+  ({
+    errorComponent: ErrorComponent = FallbackError,
+    components
+  }) => {
+    let loaderData = (0, import_react8.useLoaderData)();
+    let data = loaderData?.weaverseData;
+    if (data) {
+      if (data instanceof Promise) {
+        return /* @__PURE__ */ import_react10.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react10.default.createElement(import_react10.Suspense, null, /* @__PURE__ */ import_react10.default.createElement(import_react8.Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data: resolvedData, components });
+        })));
+      }
+      return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data, components });
+    return /* @__PURE__ */ import_react10.default.createElement(
+      ErrorComponent,
+      {
+        error: { message: "No Weaverse data return from route loader!" }
+      }
+    );
   }
-  return /* @__PURE__ */ import_react10.default.createElement(
-    ErrorComponent,
-    {
-      error: { message: "No Weaverse data return from route loader!" }
-    }
-  );
-}
+);
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
@@ -215,9 +227,12 @@ function FallbackError({ error }) {
   return /* @__PURE__ */ import_react10.default.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
+// src/weaverse-client.ts
+var import_hydrogen = require("@shopify/hydrogen");
+
 // package.json
 var package_default = {
-  version: "2.1.1",
+  version: "2.2.0",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -251,12 +266,12 @@ var package_default = {
   author: "Weaverse Team",
   dependencies: {
     "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen": "2023.7.9",
-    "@weaverse/react": "2.1.1",
+    "@shopify/hydrogen": "2023.7.10",
+    "@weaverse/react": "2.2.0",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
-    "@shopify/remix-oxygen": "^1.1.4"
+    "@shopify/remix-oxygen": "^1.1.6"
   }
 };
 
@@ -299,12 +314,14 @@ var WeaverseClient = class {
   basePageConfigs;
   basePageRequestBody;
   configs;
+  withCache;
   request;
   storefront;
   components;
   themeSchema;
   env;
-  withCache;
+  cache;
+  waitUntil;
   countries;
   constructor(args) {
     let {
@@ -312,7 +329,8 @@ var WeaverseClient = class {
       storefront,
       components,
       countries,
-      withCache,
+      cache,
+      waitUntil,
       themeSchema,
       request
     } = args;
@@ -321,8 +339,10 @@ var WeaverseClient = class {
     this.components = components;
     this.themeSchema = themeSchema;
     this.env = env;
-    this.withCache = withCache;
+    this.cache = cache;
+    this.waitUntil = waitUntil;
     this.countries = countries;
+    this.withCache = (0, import_hydrogen.createWithCache)({ cache, waitUntil });
     this.configs = getWeaverseConfigs(request, env);
     this.basePageConfigs = {
       projectId: this.configs.projectId,
@@ -331,7 +351,6 @@ var WeaverseClient = class {
       isDesignMode: this.configs.isDesignMode
     };
     this.basePageRequestBody = {
-      countries,
       isDesignMode: this.configs.isDesignMode,
       i18n: storefront.i18n,
       projectId: this.configs.projectId
@@ -354,14 +373,21 @@ var WeaverseClient = class {
   loadThemeSettings = async (strategy) => {
     try {
       let { API, configs } = this;
-      let { weaverseHost, projectId } = configs;
+      let { weaverseHost, projectId, isDesignMode } = configs;
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
       }
-      let res = await this.fetchWithCache(
-        `${weaverseHost}/${API}/${projectId}/configs`,
-        { method: "POST", strategy }
-      );
+      let res;
+      if (isDesignMode) {
+        res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
+          method: "POST"
+        });
+      } else {
+        res = await this.fetchWithCache(
+          `${weaverseHost}/${API}/${projectId}/configs`,
+          { method: "POST", strategy }
+        );
+      }
       let data = res || {};
       if (this.configs.isDesignMode) {
         data = {
@@ -462,9 +488,9 @@ var WeaverseClient = class {
 };
 
 // src/wrappers.ts
-var import_hydrogen = require("@shopify/hydrogen");
+var import_hydrogen2 = require("@shopify/hydrogen");
 function getSelectedProductOptions(request) {
-  let options = (0, import_hydrogen.getSelectedProductOptions)(request);
+  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
   return options.filter(
     ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
   );
@@ -499,9 +525,9 @@ var WeaverseHydrogen = class extends import_react11.Weaverse {
   }
 };
 var WeaverseHydrogenItem = class extends import_react11.WeaverseItemStore {
-  constructor(intialData, weaverse) {
-    super(intialData, weaverse);
-    let { data, ...rest } = intialData;
+  constructor(initialData, weaverse) {
+    super(initialData, weaverse);
+    let { data, ...rest } = initialData;
     this._store = { ...data, ...rest };
   }
   get Element() {

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
 // src/WeaverseHydrogenRoot.tsx
 import { Await, useLoaderData } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React, { Suspense } from "react";
+import React, { memo, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
@@ -18,13 +18,14 @@ function createCachedWeaverseInstance(params, components) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
-      let { __cachedId } = w.data;
-      return pathname === params.requestInfo.pathname && search === params.requestInfo.search && __cachedId === params.data.__cachedId;
+      return pathname === params.requestInfo.pathname;
     });
     if (!weaverse) {
       weaverse = new WeaverseHydrogen(params, components);
       window.__weaverses.push(weaverse);
-      console.log("\u{1F4BF} Weaverse", weaverse);
+    } else if (weaverse.isDesignMode) {
+      weaverse.requestInfo = params.requestInfo;
+      weaverse.setProjectData(params.data);
     }
     return weaverse;
   }
@@ -32,7 +33,7 @@ function createCachedWeaverseInstance(params, components) {
 }
 function createWeaverseInstance(weaverseData, components) {
   let { page, configs, project, pageAssignment } = weaverseData || {};
-  let weaverse = createCachedWeaverseInstance(
+  return createCachedWeaverseInstance(
     {
       ...configs,
       data: page || {},
@@ -41,7 +42,6 @@ function createWeaverseInstance(weaverseData, components) {
     },
     components
   );
-  return weaverse;
 }
 var ThemeProvider = createContext(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
@@ -86,26 +86,36 @@ function useStudio(weaverse) {
         loadScript(studioSrc);
       }
     }
-  }, [weaverse]);
+  }, [weaverse.requestInfo]);
 }
 
 // src/hooks/use-theme-settings.ts
 import { useSyncExternalStore } from "react";
-var ThemeSettingsStore = class {
-  settings = null;
+var ThemeSettingsStore = class _ThemeSettingsStore {
+  static settings = null;
   listeners = [];
   countries;
   schema;
   publicEnv;
   constructor(data) {
     let { theme, countries, schema, publicEnv } = data || {};
-    this.settings = theme || null;
+    if (!_ThemeSettingsStore.settings) {
+      _ThemeSettingsStore.settings = theme || null;
+    } else {
+      _ThemeSettingsStore.settings = {
+        ...theme,
+        ..._ThemeSettingsStore.settings
+      };
+    }
     this.countries = countries;
     this.schema = schema;
     this.publicEnv = publicEnv;
   }
   updateThemeSettings = (newSettings) => {
-    this.settings = { ...this.settings, ...newSettings };
+    _ThemeSettingsStore.settings = {
+      ..._ThemeSettingsStore.settings,
+      ...newSettings
+    };
     this.emitChange();
   };
   subscribe = (listener) => {
@@ -115,10 +125,10 @@ var ThemeSettingsStore = class {
     };
   };
   getSnapshot = () => {
-    return this.settings;
+    return _ThemeSettingsStore.settings;
   };
   getServerSnapshot = () => {
-    return this.settings;
+    return _ThemeSettingsStore.settings;
   };
   emitChange = () => {
     for (let listener of this.listeners) {
@@ -137,27 +147,29 @@ function useThemeSettings() {
 }
 
 // src/WeaverseHydrogenRoot.tsx
-function WeaverseHydrogenRoot({
-  errorComponent: ErrorComponent = FallbackError,
-  components
-}) {
-  let loaderData = useLoaderData();
-  let data = loaderData?.weaverseData;
-  if (data) {
-    if (data instanceof Promise) {
-      return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
-        return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
-      })));
+var WeaverseHydrogenRoot = memo(
+  ({
+    errorComponent: ErrorComponent = FallbackError,
+    components
+  }) => {
+    let loaderData = useLoaderData();
+    let data = loaderData?.weaverseData;
+    if (data) {
+      if (data instanceof Promise) {
+        return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
+        })));
+      }
+      return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
+    return /* @__PURE__ */ React.createElement(
+      ErrorComponent,
+      {
+        error: { message: "No Weaverse data return from route loader!" }
+      }
+    );
   }
-  return /* @__PURE__ */ React.createElement(
-    ErrorComponent,
-    {
-      error: { message: "No Weaverse data return from route loader!" }
-    }
-  );
-}
+);
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
@@ -175,9 +187,12 @@ function FallbackError({ error }) {
   return /* @__PURE__ */ React.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
+// src/weaverse-client.ts
+import { createWithCache } from "@shopify/hydrogen";
+
 // package.json
 var package_default = {
-  version: "2.1.1",
+  version: "2.2.0",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -211,12 +226,12 @@ var package_default = {
   author: "Weaverse Team",
   dependencies: {
     "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen": "2023.7.9",
-    "@weaverse/react": "2.1.1",
+    "@shopify/hydrogen": "2023.7.10",
+    "@weaverse/react": "2.2.0",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
-    "@shopify/remix-oxygen": "^1.1.4"
+    "@shopify/remix-oxygen": "^1.1.6"
   }
 };
 
@@ -259,12 +274,14 @@ var WeaverseClient = class {
   basePageConfigs;
   basePageRequestBody;
   configs;
+  withCache;
   request;
   storefront;
   components;
   themeSchema;
   env;
-  withCache;
+  cache;
+  waitUntil;
   countries;
   constructor(args) {
     let {
@@ -272,7 +289,8 @@ var WeaverseClient = class {
       storefront,
       components,
       countries,
-      withCache,
+      cache,
+      waitUntil,
       themeSchema,
       request
     } = args;
@@ -281,8 +299,10 @@ var WeaverseClient = class {
     this.components = components;
     this.themeSchema = themeSchema;
     this.env = env;
-    this.withCache = withCache;
+    this.cache = cache;
+    this.waitUntil = waitUntil;
     this.countries = countries;
+    this.withCache = createWithCache({ cache, waitUntil });
     this.configs = getWeaverseConfigs(request, env);
     this.basePageConfigs = {
       projectId: this.configs.projectId,
@@ -291,7 +311,6 @@ var WeaverseClient = class {
       isDesignMode: this.configs.isDesignMode
     };
     this.basePageRequestBody = {
-      countries,
       isDesignMode: this.configs.isDesignMode,
       i18n: storefront.i18n,
       projectId: this.configs.projectId
@@ -314,14 +333,21 @@ var WeaverseClient = class {
   loadThemeSettings = async (strategy) => {
     try {
       let { API, configs } = this;
-      let { weaverseHost, projectId } = configs;
+      let { weaverseHost, projectId, isDesignMode } = configs;
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
       }
-      let res = await this.fetchWithCache(
-        `${weaverseHost}/${API}/${projectId}/configs`,
-        { method: "POST", strategy }
-      );
+      let res;
+      if (isDesignMode) {
+        res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
+          method: "POST"
+        });
+      } else {
+        res = await this.fetchWithCache(
+          `${weaverseHost}/${API}/${projectId}/configs`,
+          { method: "POST", strategy }
+        );
+      }
       let data = res || {};
       if (this.configs.isDesignMode) {
         data = {
@@ -459,9 +485,9 @@ var WeaverseHydrogen = class extends Weaverse {
   }
 };
 var WeaverseHydrogenItem = class extends WeaverseItemStore {
-  constructor(intialData, weaverse) {
-    super(intialData, weaverse);
-    let { data, ...rest } = intialData;
+  constructor(initialData, weaverse) {
+    super(initialData, weaverse);
+    let { data, ...rest } = initialData;
     this._store = { ...data, ...rest };
   }
   get Element() {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version" : "2.1.1",
+  "version" : "2.2.0",
   "license" : "MIT",
   "main" : "dist/index.js",
   "typings" : "dist/index.d.ts",
@@ -33,11 +33,11 @@
   "author" : "Weaverse Team",
   "dependencies" : {
     "@remix-run/react" : "1.19.1",
-    "@shopify/hydrogen" : "2023.7.9",
-    "@weaverse/react" : "2.1.1",
+    "@shopify/hydrogen" : "2023.7.10",
+    "@weaverse/react" : "2.2.0",
     "react-error-boundary" : "^4.0.11"
   },
   "devDependencies" : {
-    "@shopify/remix-oxygen" : "^1.1.4"
+    "@shopify/remix-oxygen" : "^1.1.6"
   }
 }