@weaverse/hydrogen 1.3.3 → 1.4.1

package/dist/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -33,24 +32,192 @@ var src_exports = {};
 __export(src_exports, {
   ThemeSettingsStore: () => ThemeSettingsStore,
   WeaverseClient: () => WeaverseClient,
+  WeaverseHydrogen: () => WeaverseHydrogen,
+  WeaverseHydrogenItem: () => WeaverseHydrogenItem,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
-  createContentSecurityPolicy: () => createContentSecurityPolicy,
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
-  getWeaverseCsp: () => getWeaverseCsp,
   useThemeSettings: () => useThemeSettings,
   withWeaverse: () => withWeaverse
 });
 module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("@weaverse/react"), module.exports);
+var import_react11 = require("@weaverse/react");
 
-// src/client.ts
-var import_hydrogen = require("@shopify/hydrogen");
+// src/WeaverseHydrogenRoot.tsx
+var import_react8 = require("@remix-run/react");
+var import_react9 = require("@weaverse/react");
+var import_react10 = __toESM(require("react"));
+var import_react_error_boundary = require("react-error-boundary");
+
+// src/context.ts
+var import_react = require("@weaverse/react");
+var import_react2 = require("react");
+function createCachedWeaverseInstance(params, components) {
+  if (import_react.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 = (0, import_react2.createContext)(null);
+ThemeProvider.displayName = "WeaverseThemeProvider";
+
+// src/hooks/use-studio.ts
+var import_react4 = require("@remix-run/react");
+var import_react5 = require("@weaverse/react");
+var import_react6 = require("react");
+
+// src/hooks/use-theme-context.ts
+var import_react3 = require("react");
+function useThemeContext() {
+  let themeContext = (0, import_react3.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 } = (0, import_react4.useRevalidator)();
+  let navigate = (0, import_react4.useNavigate)();
+  let themeSettingsStore = useThemeContext();
+  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
+  let isStudio = import_react5.isIframe && isDesignMode && weaverseHost && weaverseVersion;
+  (0, import_react6.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}`;
+        (0, import_react5.loadScript)(studioSrc);
+      }
+    }
+  }, [weaverse]);
+}
+
+// src/hooks/use-theme-settings.ts
+var import_react7 = require("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 = (0, import_react7.useSyncExternalStore)(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
+
+// 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 });
+      })));
+    }
+    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!" }
+    }
+  );
+}
+function RenderRoot(props) {
+  let { data, components } = props;
+  let weaverse = createWeaverseInstance(data, components);
+  useStudio(weaverse);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
+}
+function withWeaverse(Component) {
+  return (props) => {
+    let { weaverseTheme } = (0, import_react8.useLoaderData)();
+    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
+    return /* @__PURE__ */ import_react10.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react10.default.createElement(Component, { ...props }));
+  };
+}
+function FallbackError({ error }) {
+  return /* @__PURE__ */ import_react10.default.createElement("div", null, error?.message || "An unexpected error occurred");
+}
 
 // package.json
 var package_default = {
-  version: "1.3.3",
+  version: "1.4.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -85,7 +252,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.3.3",
+    "@weaverse/react": "1.4.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -124,43 +291,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;
@@ -227,7 +372,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;
@@ -252,11 +397,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) {
@@ -310,212 +453,72 @@ var WeaverseClient = class {
   };
 };
 
-// src/hooks/use-theme-settings.ts
-var import_react4 = require("react");
-
-// src/hooks/use-theme-context.ts
-var import_react3 = require("react");
-
-// src/context.ts
-var import_react = require("@weaverse/react");
-var import_react2 = require("react");
-function createCachedWeaverseInstance(init) {
-  if (import_react.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 import_react.Weaverse(init);
-      window.__weaverses.push(weaverse);
-      console.log("\u{1F4BF} Weaverse", weaverse);
-    }
-    return weaverse;
-  }
-  return new import_react.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 = (0, import_react2.createContext)(null);
-ThemeProvider.displayName = "WeaverseThemeProvider";
-
-// src/hooks/use-theme-context.ts
-function useThemeContext() {
-  let themeContext = (0, import_react3.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 = (0, import_react4.useSyncExternalStore)(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  return settings;
-}
-
 // src/wrappers.ts
-var import_hydrogen2 = require("@shopify/hydrogen");
-var import_hydrogen3 = require("@shopify/hydrogen");
+var import_hydrogen = require("@shopify/hydrogen");
 function getSelectedProductOptions(request) {
-  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
+  let options = (0, import_hydrogen.getSelectedProductOptions)(request);
   return options.filter(
     ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
   );
 }
-function createContentSecurityPolicy(request, directives) {
-  let weaverseDirectives = getWeaverseCsp(request);
-  return (0, import_hydrogen3.createContentSecurityPolicy)({
-    ...directives,
-    ...weaverseDirectives
-  });
-}
-
-// src/WeaverseHydrogenRoot.tsx
-var import_react8 = require("@remix-run/react");
-var import_react9 = require("@weaverse/react");
-var import_react10 = __toESM(require("react"));
-var import_react_error_boundary = require("react-error-boundary");
 
-// src/hooks/use-studio.ts
-var import_react5 = require("@remix-run/react");
-var import_react6 = require("@weaverse/react");
-var import_react7 = require("react");
-function useStudio(weaverse) {
-  let { revalidate } = (0, import_react5.useRevalidator)();
-  let navigate = (0, import_react5.useNavigate)();
-  let themeSettingsStore = useThemeContext();
-  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = import_react6.isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  (0, import_react7.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}`;
-        (0, import_react6.loadScript)(studioSrc);
+// src/index.ts
+var WeaverseHydrogen = class extends import_react11.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 import_react11.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 = (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 a;
+    }, {});
+    return { ...defaultData, ...super.data };
   }
-  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);
-  useStudio(weaverse);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
-}
-var withWeaverse = (Component) => {
-  return (props) => {
-    let { weaverseTheme } = (0, import_react8.useLoaderData)();
-    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
-    return /* @__PURE__ */ import_react10.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react10.default.createElement(Component, { ...props }));
-  };
 };
-function FallbackError({ error }) {
-  return /* @__PURE__ */ import_react10.default.createElement("div", null, error?.message || "An unexpected error occurred");
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeSettingsStore,
   WeaverseClient,
+  WeaverseHydrogen,
+  WeaverseHydrogenItem,
   WeaverseHydrogenRoot,
-  createContentSecurityPolicy,
   getRequestQueries,
   getSelectedProductOptions,
   getWeaverseConfigs,
-  getWeaverseCsp,
   useThemeSettings,
-  withWeaverse,
-  ...require("@weaverse/react")
+  withWeaverse
 });