@weaverse/hydrogen 1.1.0 → 1.1.1

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
 import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
+import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare let STORE_PAGES: {
     INDEX: string;
@@ -69,10 +70,19 @@ interface HydrogenComponentProps<L = any> extends WeaverseElement {
     loaderData?: L;
     children?: React.JSX.Element[];
 }
+type I18nLocale = {
+    country: string;
+    currency: string;
+    language: string;
+    label: string;
+    pathPrefix: string;
+};
 type WeaverseLoaderRequestInfo = {
     params: any;
     pathname: string;
     search: string;
+    queries: Record<string, string | boolean>;
+    i18n: I18nLocale;
 };
 interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances' | 'elementInstances' | 'registerElement' | 'data'> {
     itemInstances: Map<string | number, HydrogenComponentInstance>;
@@ -129,7 +139,7 @@ interface HydrogenComponent<T extends HydrogenComponentProps = any> {
 type HydrogenPageConfigs = {
     projectId: string;
     weaverseHost: string;
-    version?: string;
+    weaverseVersion?: string;
     isDesignMode?: boolean;
     requestInfo: WeaverseLoaderRequestInfo;
     [key: string]: any;
@@ -178,7 +188,12 @@ type NavigateOptions = {
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
-    themeSchema: HydrogenThemeSchema;
+    errorComponent: React.FC<{
+        error: {
+            message: string;
+            stack?: string;
+        };
+    }>;
 }
 type HydrogenThemeInfo = {
     name: string;
@@ -198,8 +213,13 @@ type WeaverseLoaderConfigs = {
     locale?: string;
     handle?: string;
 };
-
-declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+declare global {
+    interface Window {
+        __weaverse: WeaverseHydrogen;
+        __weaverses: WeaverseHydrogen[];
+        __weaverseHydrogenThemeSchema: HydrogenThemeSchema;
+    }
+}
 
 type FetchWithServerCacheParams = {
     url: string;
@@ -211,8 +231,17 @@ type FetchWithServerCacheParams = {
  */
 declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promise<any>;
 
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+
 declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function WeaverseHydrogenRoot(props: WeaverseHydrogenRootProps): React.JSX.Element;
+type StudioProps = {
+    themeSchema: HydrogenThemeSchema;
+};
+declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+
+declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, useThemeSettings, weaverseLoader };
+export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenStudio, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, getSelectedProductOptions, useThemeSettings, weaverseLoader };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
 import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
+import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare let STORE_PAGES: {
     INDEX: string;
@@ -69,10 +70,19 @@ interface HydrogenComponentProps<L = any> extends WeaverseElement {
     loaderData?: L;
     children?: React.JSX.Element[];
 }
+type I18nLocale = {
+    country: string;
+    currency: string;
+    language: string;
+    label: string;
+    pathPrefix: string;
+};
 type WeaverseLoaderRequestInfo = {
     params: any;
     pathname: string;
     search: string;
+    queries: Record<string, string | boolean>;
+    i18n: I18nLocale;
 };
 interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances' | 'elementInstances' | 'registerElement' | 'data'> {
     itemInstances: Map<string | number, HydrogenComponentInstance>;
@@ -129,7 +139,7 @@ interface HydrogenComponent<T extends HydrogenComponentProps = any> {
 type HydrogenPageConfigs = {
     projectId: string;
     weaverseHost: string;
-    version?: string;
+    weaverseVersion?: string;
     isDesignMode?: boolean;
     requestInfo: WeaverseLoaderRequestInfo;
     [key: string]: any;
@@ -178,7 +188,12 @@ type NavigateOptions = {
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
-    themeSchema: HydrogenThemeSchema;
+    errorComponent: React.FC<{
+        error: {
+            message: string;
+            stack?: string;
+        };
+    }>;
 }
 type HydrogenThemeInfo = {
     name: string;
@@ -198,8 +213,13 @@ type WeaverseLoaderConfigs = {
     locale?: string;
     handle?: string;
 };
-
-declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+declare global {
+    interface Window {
+        __weaverse: WeaverseHydrogen;
+        __weaverses: WeaverseHydrogen[];
+        __weaverseHydrogenThemeSchema: HydrogenThemeSchema;
+    }
+}
 
 type FetchWithServerCacheParams = {
     url: string;
@@ -211,8 +231,17 @@ type FetchWithServerCacheParams = {
  */
 declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promise<any>;
 
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+
 declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function WeaverseHydrogenRoot(props: WeaverseHydrogenRootProps): React.JSX.Element;
+type StudioProps = {
+    themeSchema: HydrogenThemeSchema;
+};
+declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+
+declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, useThemeSettings, weaverseLoader };
+export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenStudio, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, getSelectedProductOptions, useThemeSettings, weaverseLoader };

package/dist/index.js

@@ -31,25 +31,33 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  HydrogenStudio: () => HydrogenStudio,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   fetchWithServerCache: () => fetchWithServerCache,
+  getSelectedProductOptions: () => getSelectedProductOptions,
   useThemeSettings: () => useThemeSettings,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
-var import_react6 = require("@weaverse/react");
-var import_react7 = __toESM(require("react"));
+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");
 function createCachedWeaverseInstance(init) {
   if (import_react.isBrowser) {
-    window.__weaverses = window.__weaverses || {};
-    let { pathname } = init.requestInfo;
-    if (!window.__weaverses[pathname]) {
-      window.__weaverses[pathname] = new import_react.Weaverse(init);
+    window.__weaverses = window.__weaverses || [];
+    let weaverse = window.__weaverses.find((w) => {
+      let { pathname, search } = w.requestInfo;
+      return pathname === init.requestInfo.pathname && search === init.requestInfo.search;
+    });
+    if (!weaverse) {
+      weaverse = new import_react.Weaverse(init);
+      window.__weaverses.push(weaverse);
     }
-    return window.__weaverses[pathname];
+    return weaverse;
   }
   return new import_react.Weaverse(init);
 }
@@ -77,59 +85,29 @@ function createWeaverseInstance(weaverseData, components) {
 }
 
 // src/hooks/use-studio.ts
-var import_react2 = require("@weaverse/react");
-var import_react3 = require("react");
-var import_react4 = require("@remix-run/react");
-function useStudio(weaverse, themeSchema) {
-  let revalidator = (0, import_react4.useRevalidator)();
-  let navigate = (0, import_react4.useNavigate)();
-  console.log("revalidator", revalidator);
-  (0, import_react3.useEffect)(() => {
-    let initialized = checkStudioInitialized(weaverse);
-    if (import_react2.isIframe && weaverse.isDesignMode && !initialized) {
-      window.__initializedWeaverseStudios[weaverse.pageId] = true;
-      weaverse.internal.themeSchema = themeSchema;
-      weaverse.internal.navigate = navigate;
-      weaverse.internal.revalidator = revalidator;
-      let host = weaverse.weaverseHost;
-      let version = weaverse.weaverseVersion || Date.now();
-      (0, import_react2.loadScript)(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
-        () => {
-          window?.createWeaverseStudioBridge(weaverse);
-          setTimeout(() => {
-            weaverse.triggerUpdate();
-          }, 2e3);
-        }
-      );
+var import_react2 = require("@remix-run/react");
+var import_react3 = require("@weaverse/react");
+var import_react4 = require("react");
+function useStudio(weaverse) {
+  let navigate = (0, import_react2.useNavigate)();
+  let revalidator = (0, import_react2.useRevalidator)();
+  (0, import_react4.useEffect)(() => {
+    if (import_react3.isIframe && weaverse.isDesignMode) {
+      weaverse.internal = {
+        ...weaverse.internal,
+        navigate,
+        revalidator
+      };
+      window.__weaverse = weaverse;
+      if (window.weaverseStudio) {
+        window.weaverseStudio.init(weaverse);
+      }
     }
-    window.__weaverse = weaverse;
   }, [weaverse]);
 }
-function checkStudioInitialized(weaverseInit) {
-  window.__initializedWeaverseStudios = window.__initializedWeaverseStudios || {};
-  let { pageId } = weaverseInit;
-  let initialized = window.__initializedWeaverseStudios?.[pageId];
-  if (initialized) {
-    return true;
-  }
-  return false;
-}
 
-// src/hooks/use-theme-setting.ts
-var import_react5 = require("@weaverse/react");
-function useThemeSettings() {
-  let weaverse = (0, import_react5.useWeaverse)();
-  let settings = weaverse?.internal?.project?.config?.theme;
-  let updateSettings = (newSettings) => {
-    weaverse.internal.project.config.theme = Object.assign(
-      {},
-      settings,
-      newSettings
-    );
-    weaverse.triggerUpdate();
-  };
-  return [settings, updateSettings];
-}
+// src/index.tsx
+__reExport(src_exports, require("@weaverse/react"), module.exports);
 
 // src/fetch.ts
 var import_hydrogen = require("@shopify/hydrogen");
@@ -189,121 +167,192 @@ async function fetchWithServerCache(params) {
   return response;
 }
 
+// src/hooks/use-theme-settings.ts
+var import_react5 = require("@weaverse/react");
+function useThemeSettings() {
+  let weaverse = (0, import_react5.useWeaverse)();
+  let settings = weaverse?.internal?.project?.config?.theme;
+  let updateSettings = (newSettings) => {
+    weaverse.internal.project.config.theme = Object.assign(
+      {},
+      settings,
+      newSettings
+    );
+    weaverse.triggerUpdate();
+  };
+  return [settings, updateSettings];
+}
+
+// src/hydrogen-wrappers.ts
+var import_hydrogen2 = require("@shopify/hydrogen");
+function getSelectedProductOptions(request) {
+  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+
 // src/loader.ts
 async function weaverseLoader(args, components, loaderConfigs) {
-  try {
-    let { request, context, params } = args;
-    let queries = getRequestQueries(request);
-    let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
-    let { weaverseProjectId, weaverseHost } = queries;
-    let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
-    weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
-    if (!projectId) {
-      throw new Error("Missing project id");
-    }
-    let configs = {
-      projectId,
-      weaverseHost,
-      ...queries,
-      requestInfo: {
-        params,
-        pathname: new URL(request.url).pathname,
-        search: new URL(request.url).search
+  return new Promise(async (resolve, reject) => {
+    try {
+      let { request, context, params } = args;
+      let i18n = context?.storefront?.i18n;
+      let queries = getRequestQueries(request);
+      let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
+      let { weaverseProjectId, weaverseHost, weaverseVersion, isDesignMode } = queries;
+      let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
+      weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
+      if (!projectId) {
+        throw new Error(
+          `Missing Weaverse project's id. Try adding WEAVERSE_PROJECT_ID to your .env file then restart the server.`
+        );
       }
-    };
-    let res = await fetchWithServerCache({
-      url: `${weaverseHost}/api/public/project`,
-      options: {
-        method: "POST",
-        body: JSON.stringify({
-          projectId,
-          url: request.url,
-          i18n: context?.storefront?.i18n,
-          loaderConfigs
-        })
-      },
-      context
-    });
-    let payload = await res.json();
-    let { page, project, pageAssignment } = payload;
-    if (!page || !project || !pageAssignment) {
-      throw new Error(payload?.error || "Invalid payload");
-    }
-    if (page?.items) {
-      let items = page.items;
-      page.items = await Promise.all(
-        items.map(async (itemData) => {
-          let type = itemData.type;
-          let { loader } = components.find(({ schema }) => schema?.type === type) || {};
-          if (loader && typeof loader === "function") {
-            try {
-              return {
-                ...itemData,
-                loaderData: await loader({
-                  itemData,
-                  configs,
-                  ...args
-                })
-              };
-            } catch (err) {
-              console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
-              return itemData;
+      let configs = {
+        projectId,
+        weaverseHost,
+        weaverseVersion,
+        isDesignMode,
+        requestInfo: {
+          i18n,
+          params,
+          queries,
+          pathname: new URL(request.url).pathname,
+          search: new URL(request.url).search
+        }
+      };
+      let res = await fetchWithServerCache({
+        url: `${weaverseHost}/api/public/project`,
+        options: {
+          method: "POST",
+          body: JSON.stringify({
+            i18n,
+            projectId,
+            loaderConfigs,
+            url: request.url
+          })
+        },
+        context
+      });
+      let payload = await res.json();
+      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(async (itemData) => {
+            let type = itemData.type;
+            let { loader } = components.find(({ schema }) => schema?.type === type) || {};
+            if (loader && typeof loader === "function") {
+              try {
+                return {
+                  ...itemData,
+                  loaderData: await loader({
+                    itemData,
+                    configs,
+                    ...args
+                  })
+                };
+              } catch (err) {
+                console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
+                return itemData;
+              }
             }
+            return itemData;
+          })
+        );
+      }
+      resolve({ page, configs, project, pageAssignment });
+    } catch (err) {
+      console.log(`\u274C Error fetching project data: ${err?.toString()}`);
+      reject(err);
+    }
+  });
+}
+
+// src/studio.tsx
+var import_react6 = require("@remix-run/react");
+var import_react7 = __toESM(require("react"));
+function HydrogenStudio({ themeSchema }) {
+  let { search } = (0, import_react6.useLocation)();
+  let params = new URLSearchParams(search);
+  if (params) {
+    let isDesignMode = params.get("isDesignMode") === "true";
+    let weaverseHost = params.get("weaverseHost");
+    let weaverseVersion = params.get("weaverseVersion");
+    if (isDesignMode && weaverseHost && weaverseVersion) {
+      return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+        "script",
+        {
+          src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
+          async: true
+        }
+      ), /* @__PURE__ */ import_react7.default.createElement(
+        "script",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
+              themeSchema
+            )}`
           }
-          return itemData;
-        })
-      );
+        }
+      ));
     }
-    return { page, configs, project, pageAssignment };
-  } catch (err) {
-    console.log(`\u274C Error fetching project data: ${err?.toString()}`);
-    return null;
   }
+  return null;
 }
 
 // src/index.tsx
-__reExport(src_exports, require("@weaverse/react"), module.exports);
-var import_react8 = require("@remix-run/react");
-function WeaverseHydrogenRoot(props) {
-  let loaderData = (0, import_react8.useLoaderData)();
-  console.log("loaderData111", loaderData);
-  let weaverseDataFromLoader = loaderData?.weaverseData;
-  let { components, themeSchema } = props;
+function WeaverseHydrogenRoot({
+  components,
+  errorComponent: ErrorComponent
+}) {
+  let data = (0, import_react8.useLoaderData)();
+  let weaverseDataFromLoader = data?.weaverseData;
   if (weaverseDataFromLoader) {
     if (weaverseDataFromLoader instanceof Promise) {
-      return /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, null, /* @__PURE__ */ import_react7.default.createElement(import_react8.Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
-        console.log("resolvedData", resolvedData);
-        return /* @__PURE__ */ import_react7.default.createElement(
+      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: weaverseDataFromLoader }, (resolvedData) => {
+        return /* @__PURE__ */ import_react10.default.createElement(
           RenderWeaverseRoot,
           {
-            components,
-            themeSchema,
-            weaverseData: resolvedData
+            weaverseData: resolvedData,
+            components
           }
         );
-      }));
+      })));
     }
-    return /* @__PURE__ */ import_react7.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(
       RenderWeaverseRoot,
       {
-        components,
-        themeSchema,
-        weaverseData: weaverseDataFromLoader
+        weaverseData: weaverseDataFromLoader,
+        components
       }
     );
   }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "none" } }, "No weaverseData return from Remix loader!");
+  return /* @__PURE__ */ import_react10.default.createElement(
+    ErrorComponent,
+    {
+      error: { message: "No Weaverse data return from route loader!" }
+    }
+  );
 }
-var RenderWeaverseRoot = (props) => {
-  let { components, themeSchema, weaverseData } = props;
+function RenderWeaverseRoot(props) {
+  let { components, weaverseData } = props;
   let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse, themeSchema);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react6.WeaverseRoot, { context: weaverse });
-};
+  useStudio(weaverse);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  HydrogenStudio,
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  getSelectedProductOptions,
   useThemeSettings,
   weaverseLoader,
   ...require("@weaverse/react")

package/dist/index.mjs

@@ -1,17 +1,23 @@
 // src/index.tsx
+import { Await, useLoaderData } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React, { Suspense } from "react";
+import React2, { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
 import { Weaverse, isBrowser } from "@weaverse/react";
 function createCachedWeaverseInstance(init) {
   if (isBrowser) {
-    window.__weaverses = window.__weaverses || {};
-    let { pathname } = init.requestInfo;
-    if (!window.__weaverses[pathname]) {
-      window.__weaverses[pathname] = new Weaverse(init);
+    window.__weaverses = window.__weaverses || [];
+    let weaverse = window.__weaverses.find((w) => {
+      let { pathname, search } = w.requestInfo;
+      return pathname === init.requestInfo.pathname && search === init.requestInfo.search;
+    });
+    if (!weaverse) {
+      weaverse = new Weaverse(init);
+      window.__weaverses.push(weaverse);
     }
-    return window.__weaverses[pathname];
+    return weaverse;
   }
   return new Weaverse(init);
 }
@@ -39,59 +45,29 @@ function createWeaverseInstance(weaverseData, components) {
 }
 
 // src/hooks/use-studio.ts
-import { isIframe, loadScript } from "@weaverse/react";
+import { useNavigate, useRevalidator } from "@remix-run/react";
+import { isIframe } from "@weaverse/react";
 import { useEffect } from "react";
-import { useRevalidator, useNavigate } from "@remix-run/react";
-function useStudio(weaverse, themeSchema) {
-  let revalidator = useRevalidator();
+function useStudio(weaverse) {
   let navigate = useNavigate();
-  console.log("revalidator", revalidator);
+  let revalidator = useRevalidator();
   useEffect(() => {
-    let initialized = checkStudioInitialized(weaverse);
-    if (isIframe && weaverse.isDesignMode && !initialized) {
-      window.__initializedWeaverseStudios[weaverse.pageId] = true;
-      weaverse.internal.themeSchema = themeSchema;
-      weaverse.internal.navigate = navigate;
-      weaverse.internal.revalidator = revalidator;
-      let host = weaverse.weaverseHost;
-      let version = weaverse.weaverseVersion || Date.now();
-      loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
-        () => {
-          window?.createWeaverseStudioBridge(weaverse);
-          setTimeout(() => {
-            weaverse.triggerUpdate();
-          }, 2e3);
-        }
-      );
+    if (isIframe && weaverse.isDesignMode) {
+      weaverse.internal = {
+        ...weaverse.internal,
+        navigate,
+        revalidator
+      };
+      window.__weaverse = weaverse;
+      if (window.weaverseStudio) {
+        window.weaverseStudio.init(weaverse);
+      }
     }
-    window.__weaverse = weaverse;
   }, [weaverse]);
 }
-function checkStudioInitialized(weaverseInit) {
-  window.__initializedWeaverseStudios = window.__initializedWeaverseStudios || {};
-  let { pageId } = weaverseInit;
-  let initialized = window.__initializedWeaverseStudios?.[pageId];
-  if (initialized) {
-    return true;
-  }
-  return false;
-}
 
-// src/hooks/use-theme-setting.ts
-import { useWeaverse } from "@weaverse/react";
-function useThemeSettings() {
-  let weaverse = useWeaverse();
-  let settings = weaverse?.internal?.project?.config?.theme;
-  let updateSettings = (newSettings) => {
-    weaverse.internal.project.config.theme = Object.assign(
-      {},
-      settings,
-      newSettings
-    );
-    weaverse.triggerUpdate();
-  };
-  return [settings, updateSettings];
-}
+// src/index.tsx
+export * from "@weaverse/react";
 
 // src/fetch.ts
 import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
@@ -151,120 +127,191 @@ async function fetchWithServerCache(params) {
   return response;
 }
 
+// src/hooks/use-theme-settings.ts
+import { useWeaverse } from "@weaverse/react";
+function useThemeSettings() {
+  let weaverse = useWeaverse();
+  let settings = weaverse?.internal?.project?.config?.theme;
+  let updateSettings = (newSettings) => {
+    weaverse.internal.project.config.theme = Object.assign(
+      {},
+      settings,
+      newSettings
+    );
+    weaverse.triggerUpdate();
+  };
+  return [settings, updateSettings];
+}
+
+// src/hydrogen-wrappers.ts
+import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
+function getSelectedProductOptions(request) {
+  let options = hydrogen_getSelectedProductOptions(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+
 // src/loader.ts
 async function weaverseLoader(args, components, loaderConfigs) {
-  try {
-    let { request, context, params } = args;
-    let queries = getRequestQueries(request);
-    let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
-    let { weaverseProjectId, weaverseHost } = queries;
-    let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
-    weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
-    if (!projectId) {
-      throw new Error("Missing project id");
-    }
-    let configs = {
-      projectId,
-      weaverseHost,
-      ...queries,
-      requestInfo: {
-        params,
-        pathname: new URL(request.url).pathname,
-        search: new URL(request.url).search
+  return new Promise(async (resolve, reject) => {
+    try {
+      let { request, context, params } = args;
+      let i18n = context?.storefront?.i18n;
+      let queries = getRequestQueries(request);
+      let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
+      let { weaverseProjectId, weaverseHost, weaverseVersion, isDesignMode } = queries;
+      let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
+      weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
+      if (!projectId) {
+        throw new Error(
+          `Missing Weaverse project's id. Try adding WEAVERSE_PROJECT_ID to your .env file then restart the server.`
+        );
       }
-    };
-    let res = await fetchWithServerCache({
-      url: `${weaverseHost}/api/public/project`,
-      options: {
-        method: "POST",
-        body: JSON.stringify({
-          projectId,
-          url: request.url,
-          i18n: context?.storefront?.i18n,
-          loaderConfigs
-        })
-      },
-      context
-    });
-    let payload = await res.json();
-    let { page, project, pageAssignment } = payload;
-    if (!page || !project || !pageAssignment) {
-      throw new Error(payload?.error || "Invalid payload");
-    }
-    if (page?.items) {
-      let items = page.items;
-      page.items = await Promise.all(
-        items.map(async (itemData) => {
-          let type = itemData.type;
-          let { loader } = components.find(({ schema }) => schema?.type === type) || {};
-          if (loader && typeof loader === "function") {
-            try {
-              return {
-                ...itemData,
-                loaderData: await loader({
-                  itemData,
-                  configs,
-                  ...args
-                })
-              };
-            } catch (err) {
-              console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
-              return itemData;
+      let configs = {
+        projectId,
+        weaverseHost,
+        weaverseVersion,
+        isDesignMode,
+        requestInfo: {
+          i18n,
+          params,
+          queries,
+          pathname: new URL(request.url).pathname,
+          search: new URL(request.url).search
+        }
+      };
+      let res = await fetchWithServerCache({
+        url: `${weaverseHost}/api/public/project`,
+        options: {
+          method: "POST",
+          body: JSON.stringify({
+            i18n,
+            projectId,
+            loaderConfigs,
+            url: request.url
+          })
+        },
+        context
+      });
+      let payload = await res.json();
+      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(async (itemData) => {
+            let type = itemData.type;
+            let { loader } = components.find(({ schema }) => schema?.type === type) || {};
+            if (loader && typeof loader === "function") {
+              try {
+                return {
+                  ...itemData,
+                  loaderData: await loader({
+                    itemData,
+                    configs,
+                    ...args
+                  })
+                };
+              } catch (err) {
+                console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
+                return itemData;
+              }
             }
+            return itemData;
+          })
+        );
+      }
+      resolve({ page, configs, project, pageAssignment });
+    } catch (err) {
+      console.log(`\u274C Error fetching project data: ${err?.toString()}`);
+      reject(err);
+    }
+  });
+}
+
+// src/studio.tsx
+import { useLocation } from "@remix-run/react";
+import React from "react";
+function HydrogenStudio({ themeSchema }) {
+  let { search } = useLocation();
+  let params = new URLSearchParams(search);
+  if (params) {
+    let isDesignMode = params.get("isDesignMode") === "true";
+    let weaverseHost = params.get("weaverseHost");
+    let weaverseVersion = params.get("weaverseVersion");
+    if (isDesignMode && weaverseHost && weaverseVersion) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "script",
+        {
+          src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
+          async: true
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "script",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
+              themeSchema
+            )}`
           }
-          return itemData;
-        })
-      );
+        }
+      ));
     }
-    return { page, configs, project, pageAssignment };
-  } catch (err) {
-    console.log(`\u274C Error fetching project data: ${err?.toString()}`);
-    return null;
   }
+  return null;
 }
 
 // src/index.tsx
-export * from "@weaverse/react";
-import { Await, useLoaderData } from "@remix-run/react";
-function WeaverseHydrogenRoot(props) {
-  let loaderData = useLoaderData();
-  console.log("loaderData111", loaderData);
-  let weaverseDataFromLoader = loaderData?.weaverseData;
-  let { components, themeSchema } = props;
+function WeaverseHydrogenRoot({
+  components,
+  errorComponent: ErrorComponent
+}) {
+  let data = useLoaderData();
+  let weaverseDataFromLoader = data?.weaverseData;
   if (weaverseDataFromLoader) {
     if (weaverseDataFromLoader instanceof Promise) {
-      return /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
-        console.log("resolvedData", resolvedData);
-        return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense, null, /* @__PURE__ */ React2.createElement(Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
+        return /* @__PURE__ */ React2.createElement(
           RenderWeaverseRoot,
           {
-            components,
-            themeSchema,
-            weaverseData: resolvedData
+            weaverseData: resolvedData,
+            components
           }
         );
-      }));
+      })));
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React2.createElement(
       RenderWeaverseRoot,
       {
-        components,
-        themeSchema,
-        weaverseData: weaverseDataFromLoader
+        weaverseData: weaverseDataFromLoader,
+        components
       }
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, "No weaverseData return from Remix loader!");
+  return /* @__PURE__ */ React2.createElement(
+    ErrorComponent,
+    {
+      error: { message: "No Weaverse data return from route loader!" }
+    }
+  );
 }
-var RenderWeaverseRoot = (props) => {
-  let { components, themeSchema, weaverseData } = props;
+function RenderWeaverseRoot(props) {
+  let { components, weaverseData } = props;
   let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse, themeSchema);
-  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
-};
+  useStudio(weaverse);
+  return /* @__PURE__ */ React2.createElement(WeaverseRoot, { context: weaverse });
+}
 export {
+  HydrogenStudio,
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  getSelectedProductOptions,
   useThemeSettings,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,8 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.1",
-    "@weaverse/react": "1.1.0"
+    "@weaverse/react": "1.1.1",
+    "react-error-boundary": "^4.0.10"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.2"