@weaverse/hydrogen 2.1.2 → 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,7 +43,7 @@ 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'];
@@ -301,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;
@@ -324,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,7 +43,7 @@ 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'];
@@ -301,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;
@@ -324,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);
@@ -220,7 +232,7 @@ var import_hydrogen = require("@shopify/hydrogen");
 
 // package.json
 var package_default = {
-  version: "2.1.2",
+  version: "2.2.0",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -254,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.2",
+    "@shopify/hydrogen": "2023.7.10",
+    "@weaverse/react": "2.2.0",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
-    "@shopify/remix-oxygen": "^1.1.5"
+    "@shopify/remix-oxygen": "^1.1.6"
   }
 };
 
@@ -339,7 +351,6 @@ var WeaverseClient = class {
       isDesignMode: this.configs.isDesignMode
     };
     this.basePageRequestBody = {
-      countries,
       isDesignMode: this.configs.isDesignMode,
       i18n: storefront.i18n,
       projectId: this.configs.projectId
@@ -362,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 = {
@@ -507,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);
@@ -180,7 +192,7 @@ import { createWithCache } from "@shopify/hydrogen";
 
 // package.json
 var package_default = {
-  version: "2.1.2",
+  version: "2.2.0",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -214,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.2",
+    "@shopify/hydrogen": "2023.7.10",
+    "@weaverse/react": "2.2.0",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
-    "@shopify/remix-oxygen": "^1.1.5"
+    "@shopify/remix-oxygen": "^1.1.6"
   }
 };
 
@@ -299,7 +311,6 @@ var WeaverseClient = class {
       isDesignMode: this.configs.isDesignMode
     };
     this.basePageRequestBody = {
-      countries,
       isDesignMode: this.configs.isDesignMode,
       i18n: storefront.i18n,
       projectId: this.configs.projectId
@@ -322,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 = {
@@ -467,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,43 +1,43 @@
 {
-  "version": "2.1.2",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "module": "dist/index.mjs",
-  "publishConfig": {
-    "access": "public"
+  "version" : "2.2.0",
+  "license" : "MIT",
+  "main" : "dist/index.js",
+  "typings" : "dist/index.d.ts",
+  "module" : "dist/index.mjs",
+  "publishConfig" : {
+    "access" : "public"
   },
-  "files": [
+  "files" : [
     "dist/*"
   ],
-  "engines": {
-    "node": ">=16"
+  "engines" : {
+    "node" : ">=16"
   },
-  "scripts": {
-    "start": "npm run dev",
-    "dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external @remix-run/react,@shopify/hydrogen",
-    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --external @remix-run/react,@shopify/hydrogen",
-    "clean": "rimraf dist",
-    "prepublish": "npm run build"
+  "scripts" : {
+    "start" : "npm run dev",
+    "dev" : "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external @remix-run/react,@shopify/hydrogen",
+    "build" : "tsup src/index.ts --format esm,cjs --dts --outDir dist --external @remix-run/react,@shopify/hydrogen",
+    "clean" : "rimraf dist",
+    "prepublish" : "npm run build"
   },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+  "peerDependencies" : {
+    "react" : ">=18",
+    "react-dom" : ">=18"
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": false,
-    "singleQuote": true
+  "prettier" : {
+    "printWidth" : 80,
+    "semi" : false,
+    "singleQuote" : true
   },
-  "name": "@weaverse/hydrogen",
-  "author": "Weaverse Team",
-  "dependencies": {
-    "@remix-run/react": "1.19.1",
-    "@shopify/hydrogen": "2023.7.9",
-    "@weaverse/react": "2.1.2",
-    "react-error-boundary": "^4.0.11"
+  "name" : "@weaverse/hydrogen",
+  "author" : "Weaverse Team",
+  "dependencies" : {
+    "@remix-run/react" : "1.19.1",
+    "@shopify/hydrogen" : "2023.7.10",
+    "@weaverse/react" : "2.2.0",
+    "react-error-boundary" : "^4.0.11"
   },
-  "devDependencies": {
-    "@shopify/remix-oxygen": "^1.1.5"
+  "devDependencies" : {
+    "@shopify/remix-oxygen" : "^1.1.6"
   }
 }