@weaverse/hydrogen 1.3.3 → 1.5.0

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.3",
+  version: "1.5.0",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -41,7 +212,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.3.3",
+    "@weaverse/react": "1.5.0",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -80,43 +251,21 @@ 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;
-  basePageConfigs;
-  basePageRequestBody;
   withCache;
+  // withCache: ReturnType<typeof createWithCache>
   constructor(args) {
     let { configs, storefront, components, countries, withCache, themeSchema } = args;
     this.storefront = storefront;
@@ -183,7 +332,7 @@ var WeaverseClient = class {
     return new Promise(async (resolve, reject) => {
       try {
         if (!this.configs.projectId) {
-          reject(new Error("Missing Weaverse projectId!"));
+          throw new Error("Missing Weaverse projectId!");
         }
         let { request, params } = args;
         let { strategy, ...pageLoadParams } = configs;
@@ -208,11 +357,9 @@ var WeaverseClient = class {
         }
         let { page, project, pageAssignment } = payload;
         if (!page || !project || !pageAssignment) {
-          return reject(
-            new Error(
-              // @ts-ignore
-              payload?.error || "Invalid Weaverse project payload!"
-            )
+          throw new Error(
+            // @ts-ignore
+            payload?.error || "Invalid Weaverse project payload!"
           );
         }
         if (page?.items) {
@@ -266,210 +413,71 @@ var WeaverseClient = class {
   };
 };
 
-// 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.`
-    );
-  }
-  return themeContext;
-}
-
-// src/hooks/use-theme-settings.ts
-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/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
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.3",
+  "version": "1.5.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.3.3",
+    "@weaverse/react": "1.5.0",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {