@weaverse/hydrogen 1.3.2 → 1.4.1

package/dist/index.mjs

@@ -1,12 +1,183 @@
 // src/index.ts
-export * from "@weaverse/react";
+import {
+  Weaverse,
+  WeaverseItemStore
+} from "@weaverse/react";
 
-// src/client.ts
-import "@shopify/hydrogen";
+// src/WeaverseHydrogenRoot.tsx
+import { Await, useLoaderData } from "@remix-run/react";
+import { WeaverseRoot } from "@weaverse/react";
+import React, { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+// src/context.ts
+import { isBrowser } from "@weaverse/react";
+import { createContext } from "react";
+function createCachedWeaverseInstance(params, components) {
+  if (isBrowser) {
+    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;
+    });
+    if (!weaverse) {
+      weaverse = new WeaverseHydrogen(params, components);
+      window.__weaverses.push(weaverse);
+      console.log("\u{1F4BF} Weaverse", weaverse);
+    }
+    return weaverse;
+  }
+  return new WeaverseHydrogen(params, components);
+}
+function createWeaverseInstance(weaverseData, components) {
+  let { page, configs, project, pageAssignment } = weaverseData || {};
+  let weaverse = createCachedWeaverseInstance(
+    {
+      ...configs,
+      data: page || {},
+      pageId: page?.id,
+      internal: { project, pageAssignment }
+    },
+    components
+  );
+  return weaverse;
+}
+var ThemeProvider = createContext(null);
+ThemeProvider.displayName = "WeaverseThemeProvider";
+
+// src/hooks/use-studio.ts
+import { useNavigate, useRevalidator } from "@remix-run/react";
+import { isIframe, loadScript } from "@weaverse/react";
+import { useEffect } from "react";
+
+// src/hooks/use-theme-context.ts
+import { useContext } from "react";
+function useThemeContext() {
+  let themeContext = useContext(ThemeProvider);
+  if (!themeContext) {
+    throw new Error(
+      `useThemeContext must be used within a ThemeProvider. Make sure to wrap your app in the withWeaverse HoC.`
+    );
+  }
+  return themeContext;
+}
+
+// src/hooks/use-studio.ts
+function useStudio(weaverse) {
+  let { revalidate } = useRevalidator();
+  let navigate = useNavigate();
+  let themeSettingsStore = useThemeContext();
+  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
+  let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
+  useEffect(() => {
+    if (isStudio) {
+      weaverse.internal = {
+        ...weaverse.internal,
+        navigate,
+        revalidate,
+        themeSettingsStore
+      };
+      window.__weaverse = weaverse;
+      if (window.weaverseStudio) {
+        window.weaverseStudio.init(weaverse);
+      } else {
+        let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
+        loadScript(studioSrc);
+      }
+    }
+  }, [weaverse]);
+}
+
+// src/hooks/use-theme-settings.ts
+import { useSyncExternalStore } from "react";
+var ThemeSettingsStore = class {
+  settings = null;
+  listeners = [];
+  countries;
+  schema;
+  publicEnv;
+  constructor(data) {
+    let { theme, countries, schema, publicEnv } = data || {};
+    this.settings = theme || null;
+    this.countries = countries;
+    this.schema = schema;
+    this.publicEnv = publicEnv;
+  }
+  updateThemeSettings = (newSettings) => {
+    this.settings = { ...this.settings, ...newSettings };
+    this.emitChange();
+  };
+  subscribe = (listener) => {
+    this.listeners = [...this.listeners, listener];
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  };
+  getSnapshot = () => {
+    return this.settings;
+  };
+  getServerSnapshot = () => {
+    return this.settings;
+  };
+  emitChange = () => {
+    for (let listener of this.listeners) {
+      listener();
+    }
+  };
+};
+function useThemeSettings() {
+  let themeSettingsStore = useThemeContext();
+  let settings = useSyncExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
+
+// 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 });
+      })));
+    }
+    return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
+  }
+  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);
+  useStudio(weaverse);
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
+}
+function withWeaverse(Component) {
+  return (props) => {
+    let { weaverseTheme } = useLoaderData();
+    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
+    return /* @__PURE__ */ React.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React.createElement(Component, { ...props }));
+  };
+}
+function FallbackError({ error }) {
+  return /* @__PURE__ */ React.createElement("div", null, error?.message || "An unexpected error occurred");
+}
 
 // package.json
 var package_default = {
-  version: "1.3.2",
+  version: "1.4.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -18,7 +189,7 @@ var package_default = {
     "dist/*"
   ],
   engines: {
-    node: ">=10"
+    node: ">=16"
   },
   scripts: {
     start: "npm run dev",
@@ -41,7 +212,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.3.2",
+    "@weaverse/react": "1.4.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -80,51 +251,61 @@ function getWeaverseConfigs(request, env) {
     }
   };
 }
-function getWeaverseCsp(request) {
-  let url = new URL(request.url);
-  let weaverseHost = url.searchParams.get("weaverseHost");
-  let weaverseHosts = ["https://*.weaverse.io"];
-  if (weaverseHost) {
-    weaverseHosts.push(weaverseHost);
-  }
-  return {
-    frameAncestors: weaverseHosts,
-    defaultSrc: [
-      "'self'",
-      "https://cdn.shopify.com",
-      "https://shopify.com",
-      "https://*.youtube.com",
-      ...weaverseHosts
-    ],
-    styleSrc: [
-      "'self'",
-      "'unsafe-inline'",
-      "https://cdn.shopify.com",
-      ...weaverseHosts
-    ]
-  };
-}
 
-// src/client.ts
+// src/weaverse-client.ts
 var WeaverseClient = class {
+  API = "api/public/project";
+  clientVersion = package_default.version;
+  basePageConfigs;
+  basePageRequestBody;
+  storefront;
+  // storefront: Storefront<I18nLocale>
+  components;
+  countries;
+  themeSchema;
+  configs;
+  withCache;
+  // withCache: ReturnType<typeof createWithCache>
   constructor(args) {
-    this.API = "api/public/project";
-    this.clientVersion = package_default.version;
-    this.fetchWithCache = (url, options) => {
-      let cacheKey = [url, options.body];
-      let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
-      let res = this.withCache(cacheKey, strategy, async () => {
-        let response = await fetch(url, reqInit);
-        if (!response.ok) {
-          throw new Error("Something went wrong. Skipping cache.");
-        }
-        return await response.json();
-      });
-      return res;
+    let { configs, storefront, components, countries, withCache, themeSchema } = args;
+    this.storefront = storefront;
+    this.components = components;
+    this.countries = countries;
+    this.themeSchema = themeSchema;
+    this.configs = configs;
+    this.withCache = withCache;
+    this.basePageConfigs = {
+      projectId: configs.projectId,
+      weaverseHost: configs.weaverseHost,
+      weaverseVersion: configs.weaverseVersion,
+      isDesignMode: configs.isDesignMode
     };
-    this.loadThemeSettings = async (strategy) => {
+    this.basePageRequestBody = {
+      countries,
+      isDesignMode: this.configs.isDesignMode,
+      i18n: storefront.i18n,
+      projectId: this.configs.projectId
+    };
+  }
+  fetchWithCache = (url, options) => {
+    let cacheKey = [url, options.body];
+    let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
+    let res = this.withCache(cacheKey, strategy, async () => {
+      let response = await fetch(url, reqInit);
+      if (!response.ok) {
+        throw new Error("Something went wrong. Skipping cache.");
+      }
+      return await response.json();
+    });
+    return res;
+  };
+  loadThemeSettings = async (strategy) => {
+    try {
       let { API, configs } = this;
       let { weaverseHost, projectId } = configs;
+      if (!projectId) {
+        throw new Error("Missing Weaverse projectId!");
+      }
       let res = await this.fetchWithCache(
         `${weaverseHost}/${API}/${projectId}/configs`,
         { strategy }
@@ -142,312 +323,161 @@ var WeaverseClient = class {
         }
       }
       return data;
-    };
-    this.loadPage = async (args, configs = {}) => {
-      return new Promise(async (resolve, reject) => {
-        try {
-          let { request, params } = args;
-          let { strategy, ...pageLoadParams } = configs;
-          let body = {
-            ...this.basePageRequestBody,
-            params: pageLoadParams,
-            url: request.url
-          };
-          let reqInit = {
-            method: "POST",
-            body: JSON.stringify(body)
-          };
-          let url = `${this.configs.weaverseHost}/${this.API}`;
-          let payload;
-          if (this.configs.isDesignMode) {
-            payload = await fetch(url, reqInit).then((res) => res.json());
-          } else {
-            payload = await this.fetchWithCache(url, {
-              ...reqInit,
-              strategy
-            });
-          }
-          let { page, project, pageAssignment } = payload;
-          if (!page || !project || !pageAssignment) {
-            return reject(
-              new Error(
-                // @ts-ignore
-                payload?.error || "Invalid Weaverse project payload!"
-              )
-            );
-          }
-          if (page?.items) {
-            let items = page.items;
-            page.items = await Promise.all(
-              items.map((item) => this.execComponentLoader(item, args))
-            );
-          }
-          let data = {
-            page,
-            project,
-            pageAssignment,
-            configs: {
-              ...this.basePageConfigs,
-              requestInfo: {
-                params,
-                i18n: this.storefront.i18n,
-                queries: getRequestQueries(request),
-                pathname: new URL(request.url).pathname,
-                search: new URL(request.url).search
-              }
-            }
-          };
-          return resolve(data);
-        } catch (err) {
-          console.log(`\u274C [Weaverse page]`, err);
-          reject(err);
+    } catch (err) {
+      console.log(`\u274C [Weaverse theme settings]`, err);
+      return null;
+    }
+  };
+  loadPage = async (args, configs = {}) => {
+    return new Promise(async (resolve, reject) => {
+      try {
+        if (!this.configs.projectId) {
+          throw new Error("Missing Weaverse projectId!");
         }
-      });
-    };
-    this.execComponentLoader = async (item, args) => {
-      let schema = this.components.find(
-        ({ schema: schema2 }) => schema2?.type === item.type
-      );
-      let { loader } = schema || {};
-      if (loader && typeof loader === "function") {
-        try {
-          return {
-            ...item,
-            loaderData: await loader({
-              itemData: item,
-              ...args
-            })
-          };
-        } catch (err) {
-          console.log(`\u274C [Weaverse item loader]`, item.id, err);
-          return item;
+        let { request, params } = args;
+        let { strategy, ...pageLoadParams } = configs;
+        let body = {
+          ...this.basePageRequestBody,
+          params: pageLoadParams,
+          url: request.url
+        };
+        let reqInit = {
+          method: "POST",
+          body: JSON.stringify(body)
+        };
+        let url = `${this.configs.weaverseHost}/${this.API}`;
+        let payload;
+        if (this.configs.isDesignMode) {
+          payload = await fetch(url, reqInit).then((res) => res.json());
+        } else {
+          payload = await this.fetchWithCache(url, {
+            ...reqInit,
+            strategy
+          });
         }
+        let { page, project, pageAssignment } = payload;
+        if (!page || !project || !pageAssignment) {
+          throw new Error(
+            // @ts-ignore
+            payload?.error || "Invalid Weaverse project payload!"
+          );
+        }
+        if (page?.items) {
+          let items = page.items;
+          page.items = await Promise.all(
+            items.map((item) => this.execComponentLoader(item, args))
+          );
+        }
+        let data = {
+          page,
+          project,
+          pageAssignment,
+          configs: {
+            ...this.basePageConfigs,
+            requestInfo: {
+              params,
+              i18n: this.storefront.i18n,
+              queries: getRequestQueries(request),
+              pathname: new URL(request.url).pathname,
+              search: new URL(request.url).search
+            }
+          }
+        };
+        return resolve(data);
+      } catch (err) {
+        console.log(`\u274C [Weaverse page]`, err);
+        reject(err);
       }
-      return item;
-    };
-    let { configs, storefront, components, countries, withCache, themeSchema } = args;
-    this.storefront = storefront;
-    this.components = components;
-    this.countries = countries;
-    this.themeSchema = themeSchema;
-    this.configs = configs;
-    this.withCache = withCache;
-    this.basePageConfigs = {
-      projectId: configs.projectId,
-      weaverseHost: configs.weaverseHost,
-      weaverseVersion: configs.weaverseVersion,
-      isDesignMode: configs.isDesignMode
-    };
-    this.basePageRequestBody = {
-      countries,
-      isDesignMode: this.configs.isDesignMode,
-      i18n: storefront.i18n,
-      projectId: this.configs.projectId
-    };
-  }
-};
-
-// src/hooks/use-theme-settings.ts
-import { useSyncExternalStore } from "react";
-
-// src/hooks/use-theme-context.ts
-import { useContext } from "react";
-
-// src/context.ts
-import { Weaverse, isBrowser } from "@weaverse/react";
-import { createContext } from "react";
-function createCachedWeaverseInstance(init) {
-  if (isBrowser) {
-    window.__weaverses = window.__weaverses || [];
-    let weaverse = window.__weaverses.find((w) => {
-      let { pathname, search } = w.requestInfo;
-      let { __cachedId } = w.data;
-      return pathname === init.requestInfo.pathname && search === init.requestInfo.search && __cachedId === init.data.__cachedId;
-    });
-    if (!weaverse) {
-      weaverse = new Weaverse(init);
-      window.__weaverses.push(weaverse);
-      console.log("\u{1F4BF} Weaverse", weaverse);
-    }
-    return weaverse;
-  }
-  return new Weaverse(init);
-}
-function createWeaverseInstance(weaverseData, components) {
-  let { page, configs, project, pageAssignment } = weaverseData || {};
-  let weaverse = createCachedWeaverseInstance({
-    ...configs,
-    data: page || {},
-    pageId: page?.id,
-    platformType: "shopify-hydrogen",
-    internal: { project, pageAssignment }
-  });
-  components.forEach((comp) => {
-    weaverse.registerElement({
-      type: comp?.schema?.type,
-      Component: comp?.default,
-      schema: comp?.schema,
-      loader: comp?.loader
     });
-  });
-  return weaverse;
-}
-var ThemeProvider = createContext(null);
-ThemeProvider.displayName = "WeaverseThemeProvider";
-
-// src/hooks/use-theme-context.ts
-function useThemeContext() {
-  let themeContext = useContext(ThemeProvider);
-  if (!themeContext) {
-    throw new Error(
-      `useThemeContext must be used within a ThemeProvider. Make sure to wrap your app in the withWeaverse HoC.`
+  };
+  execComponentLoader = async (item, args) => {
+    let schema = this.components.find(
+      ({ schema: schema2 }) => schema2?.type === item.type
     );
-  }
-  return themeContext;
-}
-
-// src/hooks/use-theme-settings.ts
-var ThemeSettingsStore = class {
-  constructor(data) {
-    this.settings = null;
-    this.listeners = [];
-    this.updateThemeSettings = (newSettings) => {
-      this.settings = { ...this.settings, ...newSettings };
-      this.emitChange();
-    };
-    this.subscribe = (listener) => {
-      this.listeners = [...this.listeners, listener];
-      return () => {
-        this.listeners = this.listeners.filter((l) => l !== listener);
-      };
-    };
-    this.getSnapshot = () => {
-      return this.settings;
-    };
-    this.getServerSnapshot = () => {
-      return this.settings;
-    };
-    this.emitChange = () => {
-      for (let listener of this.listeners) {
-        listener();
+    let { loader } = schema || {};
+    if (loader && typeof loader === "function") {
+      try {
+        return {
+          ...item,
+          loaderData: await loader({
+            itemData: item,
+            ...args
+          })
+        };
+      } catch (err) {
+        console.log(`\u274C [Weaverse item loader]`, item.id, err);
+        return item;
       }
-    };
-    let { theme, countries, schema, publicEnv } = data || {};
-    this.settings = theme || null;
-    this.countries = countries;
-    this.schema = schema;
-    this.publicEnv = publicEnv;
-  }
+    }
+    return item;
+  };
 };
-function useThemeSettings() {
-  let themeSettingsStore = useThemeContext();
-  let settings = useSyncExternalStore(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  return settings;
-}
 
 // src/wrappers.ts
 import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
-import { createContentSecurityPolicy as hydrogen_createContentSecurityPolicy } from "@shopify/hydrogen";
 function getSelectedProductOptions(request) {
   let options = hydrogen_getSelectedProductOptions(request);
   return options.filter(
     ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
   );
 }
-function createContentSecurityPolicy(request, directives) {
-  let weaverseDirectives = getWeaverseCsp(request);
-  return hydrogen_createContentSecurityPolicy({
-    ...directives,
-    ...weaverseDirectives
-  });
-}
-
-// src/WeaverseHydrogenRoot.tsx
-import { Await, useLoaderData } from "@remix-run/react";
-import { WeaverseRoot } from "@weaverse/react";
-import React, { Suspense } from "react";
-import { ErrorBoundary } from "react-error-boundary";
 
-// src/hooks/use-studio.ts
-import { useNavigate, useRevalidator } from "@remix-run/react";
-import { isIframe, loadScript } from "@weaverse/react";
-import { useEffect } from "react";
-function useStudio(weaverse) {
-  let { revalidate } = useRevalidator();
-  let navigate = useNavigate();
-  let themeSettingsStore = useThemeContext();
-  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  useEffect(() => {
-    if (isStudio) {
-      weaverse.internal = {
-        ...weaverse.internal,
-        navigate,
-        revalidate,
-        themeSettingsStore
-      };
-      window.__weaverse = weaverse;
-      if (window.weaverseStudio) {
-        window.weaverseStudio.init(weaverse);
-      } else {
-        let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        loadScript(studioSrc);
+// src/index.ts
+var WeaverseHydrogen = class extends Weaverse {
+  platformType = "shopify-hydrogen";
+  pageId;
+  internal;
+  requestInfo;
+  constructor(params, components) {
+    let { internal, pageId, requestInfo, ...coreParams } = params;
+    super({ ...coreParams, ItemConstructor: WeaverseHydrogenItem });
+    this.internal = internal;
+    this.pageId = pageId;
+    this.requestInfo = requestInfo;
+    this.registerComponents(components);
+  }
+  registerElement(element) {
+    super.registerElement(element);
+  }
+  registerComponents(components) {
+    components.forEach((comp) => {
+      this.registerElement({
+        type: comp?.schema?.type,
+        Component: comp?.default,
+        schema: comp?.schema,
+        loader: comp?.loader
+      });
+    });
+  }
+};
+var WeaverseHydrogenItem = class extends WeaverseItemStore {
+  constructor(intialData, weaverse) {
+    super(intialData, weaverse);
+    let { data, ...rest } = intialData;
+    this._store = { ...data, ...rest };
+  }
+  get Element() {
+    return super.Element;
+  }
+  get data() {
+    let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs)?.reduce((a, { defaultValue, name }) => {
+      if (name && defaultValue !== null && defaultValue !== void 0) {
+        a[name] = defaultValue;
       }
-    }
-  }, [weaverse]);
-}
-
-// 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 });
-      })));
-    }
-    return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
+      return a;
+    }, {});
+    return { ...defaultData, ...super.data };
   }
-  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);
-  useStudio(weaverse);
-  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
-}
-var withWeaverse = (Component) => {
-  return (props) => {
-    let { weaverseTheme } = useLoaderData();
-    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
-    return /* @__PURE__ */ React.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React.createElement(Component, { ...props }));
-  };
 };
-function FallbackError({ error }) {
-  return /* @__PURE__ */ React.createElement("div", null, error?.message || "An unexpected error occurred");
-}
 export {
   ThemeSettingsStore,
   WeaverseClient,
+  WeaverseHydrogen,
+  WeaverseHydrogenItem,
   WeaverseHydrogenRoot,
-  createContentSecurityPolicy,
   getRequestQueries,
   getSelectedProductOptions,
   getWeaverseConfigs,
-  getWeaverseCsp,
   useThemeSettings,
   withWeaverse
 };