@weaverse/hydrogen 4.2.2 → 4.2.6

package/dist/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
+var hydrogen = require('@shopify/hydrogen');
 var react = require('@weaverse/react');
 var react$2 = require('@remix-run/react');
 var react$1 = require('react');
 var reactErrorBoundary = require('react-error-boundary');
 var jsxRuntime = require('react/jsx-runtime');
-var hydrogen = require('@shopify/hydrogen');
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -13,7 +13,7 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/utils.ts
+// src/utils/index.ts
 function getRequestQueries(request) {
   let url = new URL(request.url);
   return Array.from(url.searchParams.entries()).reduce(
@@ -57,10 +57,9 @@ function getWeaverseConfigs(request, env) {
     }
   };
 }
-function generateDataFromSchema({
-  inspector
-}) {
+function generateDataFromSchema(schema2) {
   let data = {};
+  let inspector = schema2?.inspector;
   if (inspector) {
     for (let group of inspector) {
       for (let input of group.inputs) {
@@ -73,36 +72,19 @@ function generateDataFromSchema({
   }
   return data;
 }
-function resizeShopifyImage(imageURL, size) {
-  try {
-    if (!imageURL.includes("cdn.shopify.com") || size === "original") {
-      return imageURL;
-    }
-    let [, path, ext] = imageURL.match(/(.*\/[\w-_.]+)\.(\w{2,4})/);
-    return `${path}_${size}.${ext}`;
-  } catch (e) {
-    return imageURL;
-  }
-}
 function recursivelyAddDataItem(type, components, items, initData) {
-  const component = components.find((c) => c.schema.type === type);
+  let component = components.find((c) => c.schema.type === type);
   if (!component) {
     return;
   }
-  let childIDs = [];
-  const id = crypto.randomUUID();
-  const { children, ...data } = component.schema?.presets || {};
+  let childIds = [];
+  let id = crypto.randomUUID();
+  let { children, ...data } = component.schema?.presets || {};
   if (children) {
-    for (const child of children) {
-      const { type: type2, children: children2, ...data2 } = child;
-      const childID = recursivelyAddDataItem(
-        child.type,
-        components,
-        items,
-        data2
-      );
-      childIDs.push({
-        id: childID
+    for (let c of children) {
+      let { type: type2, children: children2, ...data2 } = c;
+      childIds.push({
+        id: recursivelyAddDataItem(type2, components, items, data2)
       });
     }
   }
@@ -110,23 +92,13 @@ function recursivelyAddDataItem(type, components, items, initData) {
     data: { ...data, ...initData },
     id,
     type,
-    children: childIDs
+    children: childIds
   });
   return id;
 }
 function getPreviewData(type, components, weaverseHost) {
-  const initialData = {
-    project: {
-      id: "x",
-      weaverseShopId: "shopid",
-      name: "Section Preview"
-    },
-    // pageAssignment: {
-    //   projectId: "x",
-    //   type: "CUSTOM",
-    //   locale: "en-us",
-    //   handle: "",
-    // },
+  return {
+    project: { id: "x", weaverseShopId: "shop-id", name: "Section Preview" },
     configs: {
       projectId: "x",
       weaverseHost,
@@ -144,239 +116,24 @@ function getPreviewData(type, components, weaverseHost) {
         pathname: "/",
         search: ""
       }
+    },
+    page: {
+      id: "0",
+      name: "Preview section",
+      rootId: "1",
+      items: [
+        {
+          data: {},
+          id: "1",
+          type: "main",
+          children: [{ id: recursivelyAddDataItem(type, components, []) }]
+        }
+      ]
     }
   };
-  let items = [];
-  const id = recursivelyAddDataItem(type, components, items);
-  const page = {
-    id: "0",
-    name: "Preview section",
-    rootId: "1",
-    items: [
-      {
-        data: {},
-        id: "1",
-        type: "main",
-        children: [
-          {
-            id
-          }
-        ]
-      },
-      ...items
-    ]
-  };
-  const previewData = {
-    ...initialData,
-    page
-  };
-  return previewData;
-}
-var ThemeSettingsStore = class extends react.EventEmitter {
-  settings = {};
-  countries;
-  schema;
-  publicEnv;
-  constructor(data) {
-    super();
-    let { theme, countries, schema: schema2, publicEnv } = data || {};
-    this.settings = { ...theme };
-    this.countries = countries;
-    this.schema = schema2;
-    this.publicEnv = publicEnv;
-    if (react.isBrowser) {
-      window.__weaverseThemeSettingsStore = this;
-    }
-  }
-  updateThemeSettings = (newSettings) => {
-    this.settings = {
-      ...this.settings,
-      ...newSettings
-    };
-    this.emit(this.settings);
-  };
-  getSnapshot = () => {
-    return this.settings;
-  };
-  getServerSnapshot = () => {
-    return this.settings;
-  };
-};
-function useThemeSettingsStore() {
-  let data = react$2.useRouteLoaderData("root");
-  if (react.isBrowser && window.__weaverseThemeSettingsStore) {
-    return window.__weaverseThemeSettingsStore;
-  }
-  return new ThemeSettingsStore(data?.weaverseTheme);
-}
-function useThemeSettings() {
-  let themeSettingsStore = useThemeSettingsStore();
-  let settings = react$1.useSyncExternalStore(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  return settings;
 }
 
-// src/hooks/use-studio.ts
-function useStudio(weaverse) {
-  let { revalidate } = react$2.useRevalidator();
-  let navigation = react$2.useNavigation();
-  let { pathname, search } = react$2.useLocation();
-  let navigate = react$2.useNavigate();
-  let themeSettingsStore = useThemeSettingsStore();
-  let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
-  react$1.useEffect(() => {
-    if (navigation.state === "idle") {
-      if (isPreviewMode) {
-        let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
-        react.loadScript(previewSrc).catch(console.error);
-      } else if (isDesignMode) {
-        weaverse.internal = {
-          ...weaverse.internal,
-          navigate,
-          revalidate,
-          themeSettingsStore
-        };
-        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        react.loadScript(studioSrc).then(() => {
-          window.weaverseStudio?.init(weaverse);
-        }).catch(console.error);
-      }
-    }
-  }, [pathname, search, navigation.state]);
-  usePixel(weaverse);
-}
-function usePixel(context) {
-  let { projectId, pageId, weaverseHost, isDesignMode } = context;
-  react$1.useEffect(() => {
-    if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
-    let url = `${weaverseHost}/api/public/px`;
-    let img = new Image();
-    img.onload = () => {
-      img.remove();
-    };
-    img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
-  }, []);
-}
-
-// src/Effect.tsx
-var WeaverseEffect = react$1.memo(
-  ({ context }) => {
-    useStudio(context);
-    return null;
-  }
-);
-
-// src/components/main.tsx
-var main_exports = {};
-__export(main_exports, {
-  default: () => main_default,
-  schema: () => schema
-});
-var Main = react$1.forwardRef((props, ref) => {
-  let { children, dangerouslySetInnerHTML, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...rest,
-      children,
-      dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
-    }
-  );
-});
-var main_default = Main;
-var schema = {
-  type: "main",
-  title: "Main",
-  inspector: []
-};
-
-// src/components/index.ts
-var defaultComponents = [main_exports];
-
-// src/context.ts
-function registerComponents(components) {
-  for (const comp of components) {
-    comp?.schema?.type && WeaverseHydrogen.registerElement({
-      type: comp?.schema.type,
-      Component: comp.default,
-      schema: comp.schema,
-      loader: comp.loader
-    });
-  }
-}
-function createCachedWeaverseInstance(params) {
-  if (react.isBrowser) {
-    window.__weaverses = window.__weaverses || {};
-    let weaverse = window.__weaverses[params.pageId];
-    if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
-      weaverse = new WeaverseHydrogen(params);
-      window.__weaverses[params.pageId] = weaverse;
-    }
-    if (weaverse?.isDesignMode) {
-      weaverse.requestInfo = params.requestInfo;
-      window.weaverseStudio?.refreshStudio(params);
-    }
-    return weaverse;
-  }
-  return new WeaverseHydrogen(params);
-}
-function createWeaverseInstance(weaverseData, components) {
-  let { page, configs, project, pageAssignment } = weaverseData || {};
-  registerComponents(components);
-  registerComponents(defaultComponents);
-  return createCachedWeaverseInstance({
-    ...configs,
-    data: page,
-    pageId: page?.id,
-    internal: { project, pageAssignment }
-  });
-}
-var ThemeSettingsProvider = react$1.createContext(
-  null
-);
-ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
-var WeaverseHydrogenRoot = react$1.memo(
-  ({
-    errorComponent: ErrorComponent = FallbackError,
-    components
-  }) => {
-    let loaderData = react$2.useLoaderData();
-    let data = loaderData?.weaverseData;
-    if (data) {
-      if (data instanceof Promise) {
-        return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ErrorComponent,
-      {
-        error: { message: "No Weaverse data return from route loader!" }
-      }
-    );
-  }
-);
-function RenderRoot(props) {
-  let { data, components } = props;
-  let weaverse = createWeaverseInstance(data, components);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
-    /* @__PURE__ */ jsxRuntime.jsx(WeaverseEffect, { context: weaverse })
-  ] });
-}
-function withWeaverse(Component) {
-  return (props) => {
-    let { settings } = useThemeSettingsStore();
-    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
-  };
-}
-function FallbackError({ error }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" });
-}
+// src/weaverse-client.ts
 var API_PATH = "api/public";
 var DEFAULT_CACHE_STRATEGY = {
   maxAge: 5,
@@ -397,13 +154,11 @@ var WeaverseClient = class {
   env;
   cache;
   waitUntil;
-  countries;
   constructor(args) {
     const {
       env,
       storefront,
       components,
-      countries,
       cache,
       waitUntil,
       themeSchema,
@@ -416,7 +171,6 @@ var WeaverseClient = class {
     this.env = env;
     this.cache = cache;
     this.waitUntil = waitUntil;
-    this.countries = countries;
     this.withCache = hydrogen.createWithCache({ cache, waitUntil, request });
     this.configs = getWeaverseConfigs(request, env);
     this.basePageConfigs = {
@@ -472,10 +226,7 @@ var WeaverseClient = class {
     );
   }
   loadThemeSettings = async (strategy) => {
-    let defaultThemeSettings = {};
-    if (this.themeSchema) {
-      defaultThemeSettings = generateDataFromSchema(this.themeSchema);
-    }
+    let defaultThemeSettings = generateDataFromSchema(this.themeSchema);
     try {
       let { API, configs } = this;
       let { weaverseHost, projectId, isDesignMode } = configs;
@@ -497,7 +248,7 @@ var WeaverseClient = class {
         });
       }
       let data = res || {};
-      if (data?.theme && this.themeSchema?.inspector) {
+      if (this.themeSchema?.inspector) {
         data.theme = {
           ...defaultThemeSettings,
           ...data.theme
@@ -507,7 +258,6 @@ var WeaverseClient = class {
         data = {
           ...data,
           schema: this.themeSchema,
-          countries: this.countries || [],
           publicEnv: this.configs.publicEnv
         };
       }
@@ -601,7 +351,6 @@ var WeaverseClient = class {
           ...basePageConfigs,
           requestInfo: {
             i18n: storefront.i18n,
-            // TODO: @hta218 - migrate to Remix hooks
             queries: getRequestQueries(request),
             pathname: new URL(request.url).pathname,
             search: new URL(request.url).search
@@ -636,14 +385,224 @@ var WeaverseClient = class {
     return item;
   };
 };
+
+// src/components/main.tsx
+var main_exports = {};
+__export(main_exports, {
+  default: () => main_default,
+  schema: () => schema
+});
+var Main = react$1.forwardRef((props, ref) => {
+  let { children, dangerouslySetInnerHTML, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      ...rest,
+      children,
+      dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
+    }
+  );
+});
+var main_default = Main;
+var schema = {
+  type: "main",
+  title: "Main",
+  inspector: []
+};
+
+// src/components/index.ts
+var defaultComponents = [main_exports];
+var ThemeSettingsStore = class extends react.EventEmitter {
+  settings = {};
+  schema;
+  publicEnv;
+  constructor(data) {
+    super();
+    let { theme, schema: schema2, publicEnv } = data || {};
+    this.settings = { ...theme };
+    this.schema = schema2;
+    this.publicEnv = publicEnv;
+    if (react.isBrowser) {
+      window.__weaverseThemeSettingsStore = this;
+    }
+  }
+  updateThemeSettings = (newSettings) => {
+    this.settings = {
+      ...this.settings,
+      ...newSettings
+    };
+    this.emit(this.settings);
+  };
+  getSnapshot = () => {
+    return this.settings;
+  };
+  getServerSnapshot = () => {
+    return this.settings;
+  };
+};
+function useThemeSettingsStore() {
+  let data = react$2.useRouteLoaderData("root");
+  if (react.isBrowser && window.__weaverseThemeSettingsStore) {
+    return window.__weaverseThemeSettingsStore;
+  }
+  return new ThemeSettingsStore(data?.weaverseTheme);
+}
+
+// src/utils/use-studio.ts
+function useStudio(weaverse) {
+  let { revalidate } = react$2.useRevalidator();
+  let navigation = react$2.useNavigation();
+  let { pathname, search } = react$2.useLocation();
+  let navigate = react$2.useNavigate();
+  let themeSettingsStore = useThemeSettingsStore();
+  let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
+  react$1.useEffect(() => {
+    if (navigation.state === "idle") {
+      if (isPreviewMode) {
+        let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
+        react.loadScript(previewSrc).catch(console.error);
+      } else if (isDesignMode) {
+        weaverse.internal = {
+          ...weaverse.internal,
+          navigate,
+          revalidate,
+          themeSettingsStore
+        };
+        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
+        react.loadScript(studioSrc).then(() => {
+          window.weaverseStudio?.init(weaverse);
+        }).catch(console.error);
+      }
+    }
+  }, [pathname, search, navigation.state]);
+  usePixel(weaverse);
+}
+function usePixel(context) {
+  let { projectId, pageId, weaverseHost, isDesignMode } = context;
+  react$1.useEffect(() => {
+    if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
+    let url = `${weaverseHost}/api/public/px`;
+    let img = new Image();
+    img.onload = () => img.remove();
+    img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
+  }, []);
+}
+var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
+  constructor(initialData, weaverse) {
+    super(initialData, weaverse);
+    let { data, ...rest } = initialData;
+    let schemaData = generateDataFromSchema(this.Element.schema);
+    Object.assign(this._store, schemaData, data, rest);
+  }
+  get Element() {
+    return super.Element;
+  }
+};
+react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
+var WeaverseHydrogen = class extends react.Weaverse {
+  platformType = "shopify-hydrogen";
+  pageId;
+  internal;
+  requestInfo;
+  static itemInstances;
+  static elementRegistry;
+  constructor(params) {
+    let { internal, pageId, requestInfo, ...coreParams } = params;
+    super({ ...coreParams });
+    this.internal = internal;
+    this.pageId = pageId;
+    this.requestInfo = requestInfo;
+  }
+};
+function createWeaverseInstance(params) {
+  if (react.isBrowser) {
+    window.__weaverses = window.__weaverses || {};
+    let weaverse = window.__weaverses[params.pageId];
+    if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
+      weaverse = new WeaverseHydrogen(params);
+      window.__weaverses[params.pageId] = weaverse;
+    }
+    if (weaverse?.isDesignMode) {
+      weaverse.requestInfo = params.requestInfo;
+      window.weaverseStudio?.refreshStudio(params);
+    }
+    return weaverse;
+  }
+  return new WeaverseHydrogen(params);
+}
+var StudioBridge = react$1.memo(({ context }) => {
+  useStudio(context);
+  return null;
+});
+function RenderRoot(props) {
+  let { data, components } = props;
+  for (let comp of [...components, ...defaultComponents]) {
+    comp?.schema?.type && WeaverseHydrogen.registerElement({
+      type: comp?.schema.type,
+      Component: comp.default,
+      schema: comp.schema,
+      loader: comp.loader
+    });
+  }
+  let { page, configs, project, pageAssignment } = data || {};
+  let weaverse = createWeaverseInstance({
+    ...configs,
+    data: page,
+    pageId: page?.id,
+    internal: { project, pageAssignment }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
+    /* @__PURE__ */ jsxRuntime.jsx(StudioBridge, { context: weaverse })
+  ] });
+}
+var WeaverseHydrogenRoot = react$1.memo(
+  ({
+    components,
+    errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" })
+  }) => {
+    let loaderData = react$2.useLoaderData();
+    let data = loaderData?.weaverseData;
+    if (data) {
+      if (data instanceof Promise) {
+        return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(react$2.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ErrorComponent,
+      {
+        error: { message: "No Weaverse data return from route loader!" }
+      }
+    );
+  }
+);
+var ThemeSettingsProvider = react$1.createContext(null);
+ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
+function withWeaverse(Component) {
+  return (props) => {
+    let { settings } = useThemeSettingsStore();
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
+  };
+}
+function useThemeSettings() {
+  let themeSettingsStore = useThemeSettingsStore();
+  let settings = react$1.useSyncExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
+
+// src/index.ts
 function getSelectedProductOptions(request) {
   let options = hydrogen.getSelectedProductOptions(request);
   return options.filter(
     ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
   );
 }
-
-// src/placeholders.ts
 var IMAGES_PLACEHOLDERS = {
   logo_white: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-logo-w-600x200.svg",
   logo_black: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-logo-k-600x200.svg",
@@ -676,40 +635,6 @@ var IMAGES_PLACEHOLDERS = {
   product_18: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-2-1024x1024.svg"
 };
 
-// src/index.ts
-var WeaverseHydrogen = class extends react.Weaverse {
-  platformType = "shopify-hydrogen";
-  pageId;
-  internal;
-  requestInfo;
-  static itemInstances;
-  static elementRegistry;
-  constructor(params) {
-    let { internal, pageId, requestInfo, ...coreParams } = params;
-    super({ ...coreParams });
-    this.internal = internal;
-    this.pageId = pageId;
-    this.requestInfo = requestInfo;
-  }
-};
-var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
-  constructor(initialData, weaverse) {
-    super(initialData, weaverse);
-    let { data, ...rest } = initialData;
-    Object.assign(this._store, this._schemaData, data, rest);
-  }
-  get Element() {
-    return super.Element;
-  }
-  get _schemaData() {
-    if (this.Element?.schema) {
-      return generateDataFromSchema(this.Element.schema);
-    }
-    return {};
-  }
-};
-react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
-
 Object.defineProperty(exports, "isBrowser", {
   enumerable: true,
   get: function () { return react.isBrowser; }
@@ -739,13 +664,7 @@ exports.WeaverseClient = WeaverseClient;
 exports.WeaverseHydrogen = WeaverseHydrogen;
 exports.WeaverseHydrogenItem = WeaverseHydrogenItem;
 exports.WeaverseHydrogenRoot = WeaverseHydrogenRoot;
-exports.generateDataFromSchema = generateDataFromSchema;
-exports.getPreviewData = getPreviewData;
-exports.getRequestQueries = getRequestQueries;
 exports.getSelectedProductOptions = getSelectedProductOptions;
-exports.getWeaverseConfigs = getWeaverseConfigs;
-exports.recursivelyAddDataItem = recursivelyAddDataItem;
-exports.resizeShopifyImage = resizeShopifyImage;
 exports.useThemeSettings = useThemeSettings;
 exports.withWeaverse = withWeaverse;
 //# sourceMappingURL=index.js.map