@weaverse/hydrogen 5.0.0 → 5.2.0

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { memo, Suspense, createContext, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useLoaderData, Await, useRevalidator, useNavigation, useLocation, useNavigate, useRouteLoaderData } from 'react-router';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+export * from '@weaverse/schema';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -12,7 +13,52 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/components/main.tsx
+var main_exports = {};
+__export(main_exports, {
+  default: () => main_default,
+  schema: () => schema
+});
+function Main(props) {
+  let { children, dangerouslySetInnerHTML, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      children,
+      dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
+    }
+  );
+}
+var main_default = Main;
+var schema = {
+  type: "main",
+  title: "Main",
+  settings: []
+};
+
+// src/components/index.ts
+var defaultComponents = [main_exports];
+
 // src/utils/index.ts
+var warnedTypes = /* @__PURE__ */ new Set();
+function logOnce(type, message) {
+  if (!warnedTypes.has(type)) {
+    console.warn(message);
+    warnedTypes.add(type);
+  }
+}
+function deepMergeArrays(target, source) {
+  return [...target, ...source];
+}
+function mergeInspectorSettings(settings, inspector, type) {
+  if (!inspector?.length) return settings;
+  if (!settings?.length) return inspector;
+  console.info(
+    `Schema "${type}": Both 'settings' and 'inspector' found. Using 'settings' with 'inspector' as fallback.`
+  );
+  return deepMergeArrays(settings, inspector);
+}
 function getRequestQueries(request) {
   let url = new URL(request.url);
   return Array.from(url.searchParams.entries()).reduce(
@@ -58,9 +104,53 @@ function getWeaverseConfigs(request, env) {
 }
 function generateDataFromSchema(schema2) {
   let data = {};
-  let inspector = schema2?.inspector;
-  if (inspector) {
-    for (let group of inspector) {
+  let inspectorGroups = [];
+  const isComponentSchema = (s) => {
+    return "type" in s && typeof s.type === "string";
+  };
+  if (isComponentSchema(schema2)) {
+    if (schema2.settings) {
+      inspectorGroups = schema2.settings;
+    }
+    if (schema2.inspector) {
+      if (schema2.settings?.length) {
+        inspectorGroups = mergeInspectorSettings(
+          schema2.settings,
+          schema2.inspector,
+          schema2.type || "unknown"
+        );
+      } else {
+        inspectorGroups = schema2.inspector;
+        if (schema2.type) {
+          logOnce(
+            schema2.type,
+            `\u26A0\uFE0F  Schema "${schema2.type}": The 'inspector' property is deprecated. Please use 'settings' instead.`
+          );
+        }
+      }
+    }
+  } else {
+    if (schema2.settings) {
+      inspectorGroups = schema2.settings;
+    }
+    if (schema2.inspector) {
+      if (schema2.settings?.length) {
+        inspectorGroups = mergeInspectorSettings(
+          schema2.settings,
+          schema2.inspector,
+          "Theme Schema"
+        );
+      } else {
+        inspectorGroups = schema2.inspector;
+        logOnce(
+          "ThemeSchema",
+          `\u26A0\uFE0F  Theme Schema: The 'inspector' property is deprecated. Please use 'settings' instead.`
+        );
+      }
+    }
+  }
+  if (inspectorGroups?.length) {
+    for (let group of inspectorGroups) {
       for (let input of group.inputs) {
         let { name, defaultValue } = input;
         if (name && defaultValue !== null && defaultValue !== void 0) {
@@ -132,8 +222,195 @@ function getPreviewData(type, components, weaverseHost) {
     }
   };
 }
+var ThemeSettingsStore = class extends EventEmitter {
+  settings = {};
+  schema;
+  publicEnv;
+  constructor(data) {
+    super();
+    let { theme, schema: schema2, publicEnv } = data || {};
+    this.settings = { ...theme };
+    this.schema = schema2;
+    this.publicEnv = publicEnv;
+    if (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 = useRouteLoaderData("root");
+  if (isBrowser && window.__weaverseThemeSettingsStore) {
+    return window.__weaverseThemeSettingsStore;
+  }
+  return new ThemeSettingsStore(data?.weaverseTheme);
+}
 
-// src/weaverse-client.ts
+// src/utils/use-studio.ts
+function useStudio(weaverse) {
+  let { revalidate } = useRevalidator();
+  let navigation = useNavigation();
+  let { pathname, search } = useLocation();
+  let navigate = useNavigate();
+  let themeSettingsStore = useThemeSettingsStore();
+  let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
+  useEffect(() => {
+    if (navigation.state === "idle") {
+      if (isPreviewMode) {
+        let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
+        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}`;
+        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;
+  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 WeaverseItemStore {
+  constructor(initialData, weaverse) {
+    super(initialData, weaverse);
+    let { data, ...rest } = initialData;
+    if (!this.Element?.schema) {
+      console.error("Element is missing schema or not found!");
+      return;
+    }
+    let schemaData = generateDataFromSchema(this.Element.schema);
+    Object.assign(this._store, schemaData, data, rest);
+  }
+  get Element() {
+    return super.Element;
+  }
+};
+Weaverse.ItemConstructor = WeaverseHydrogenItem;
+var WeaverseHydrogen = class extends 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 (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 = memo(({ context }) => {
+  useStudio(context);
+  return null;
+});
+function RenderRoot(props) {
+  let { data, components } = props;
+  for (let comp of [...components, ...defaultComponents]) {
+    comp?.schema?.type && registerComponent({
+      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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(WeaverseRoot, { context: weaverse }),
+    /* @__PURE__ */ jsx(StudioBridge, { context: weaverse })
+  ] });
+}
+function registerComponent(element) {
+  WeaverseHydrogen.registerElement(element);
+}
+var WeaverseHydrogenRoot = memo(
+  ({
+    components,
+    errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsx("div", { children: error?.message || "An unexpected error occurred" })
+  }) => {
+    let loaderData = useLoaderData();
+    let data = loaderData?.weaverseData;
+    if (data) {
+      if (data instanceof Promise) {
+        return /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsx(RenderRoot, { data: resolvedData, components }) }) }) });
+      }
+      return /* @__PURE__ */ jsx(RenderRoot, { data, components });
+    }
+    return /* @__PURE__ */ jsx(
+      ErrorComponent,
+      {
+        error: { message: "No Weaverse data return from route loader!" }
+      }
+    );
+  }
+);
+var ThemeSettingsProvider = createContext(null);
+ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
+function withWeaverse(Component) {
+  return (props) => {
+    let { settings } = useThemeSettingsStore();
+    return /* @__PURE__ */ jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+  };
+}
+function useThemeSettings() {
+  let themeSettingsStore = useThemeSettingsStore();
+  let settings = useSafeExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
 var API_PATH = "api/public";
 var DEFAULT_CACHE_STRATEGY = {
   maxAge: 10,
@@ -381,224 +658,6 @@ var WeaverseClient = class {
     return item;
   };
 };
-
-// src/components/main.tsx
-var main_exports = {};
-__export(main_exports, {
-  default: () => main_default,
-  schema: () => schema
-});
-function Main(props) {
-  let { children, dangerouslySetInnerHTML, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...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 EventEmitter {
-  settings = {};
-  schema;
-  publicEnv;
-  constructor(data) {
-    super();
-    let { theme, schema: schema2, publicEnv } = data || {};
-    this.settings = { ...theme };
-    this.schema = schema2;
-    this.publicEnv = publicEnv;
-    if (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 = useRouteLoaderData("root");
-  if (isBrowser && window.__weaverseThemeSettingsStore) {
-    return window.__weaverseThemeSettingsStore;
-  }
-  return new ThemeSettingsStore(data?.weaverseTheme);
-}
-
-// src/utils/use-studio.ts
-function useStudio(weaverse) {
-  let { revalidate } = useRevalidator();
-  let navigation = useNavigation();
-  let { pathname, search } = useLocation();
-  let navigate = useNavigate();
-  let themeSettingsStore = useThemeSettingsStore();
-  let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
-  useEffect(() => {
-    if (navigation.state === "idle") {
-      if (isPreviewMode) {
-        let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
-        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}`;
-        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;
-  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 WeaverseItemStore {
-  constructor(initialData, weaverse) {
-    super(initialData, weaverse);
-    let { data, ...rest } = initialData;
-    if (!this.Element?.schema) {
-      console.error("Element is missing schema or not found!");
-      return;
-    }
-    let schemaData = generateDataFromSchema(this.Element.schema);
-    Object.assign(this._store, schemaData, data, rest);
-  }
-  get Element() {
-    return super.Element;
-  }
-};
-Weaverse.ItemConstructor = WeaverseHydrogenItem;
-var WeaverseHydrogen = class extends 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 (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 = memo(({ context }) => {
-  useStudio(context);
-  return null;
-});
-function RenderRoot(props) {
-  let { data, components } = props;
-  for (let comp of [...components, ...defaultComponents]) {
-    comp?.schema?.type && registerComponent({
-      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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(WeaverseRoot, { context: weaverse }),
-    /* @__PURE__ */ jsx(StudioBridge, { context: weaverse })
-  ] });
-}
-function registerComponent(element) {
-  WeaverseHydrogen.registerElement(element);
-}
-var WeaverseHydrogenRoot = memo(
-  ({
-    components,
-    errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsx("div", { children: error?.message || "An unexpected error occurred" })
-  }) => {
-    let loaderData = useLoaderData();
-    let data = loaderData?.weaverseData;
-    if (data) {
-      if (data instanceof Promise) {
-        return /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsx(RenderRoot, { data: resolvedData, components }) }) }) });
-      }
-      return /* @__PURE__ */ jsx(RenderRoot, { data, components });
-    }
-    return /* @__PURE__ */ jsx(
-      ErrorComponent,
-      {
-        error: { message: "No Weaverse data return from route loader!" }
-      }
-    );
-  }
-);
-var ThemeSettingsProvider = createContext(null);
-ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
-function withWeaverse(Component) {
-  return (props) => {
-    let { settings } = useThemeSettingsStore();
-    return /* @__PURE__ */ jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsx(Component, { ...props }) });
-  };
-}
-function useThemeSettings() {
-  let themeSettingsStore = useThemeSettingsStore();
-  let settings = useSafeExternalStore(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  return settings;
-}
-
-// src/index.ts
 function getSelectedProductOptions(request) {
   let options = getSelectedProductOptions$1(request);
   return options.filter(