@weaverse/hydrogen 2.7.4 → 2.8.1

package/dist/index.d.mts

@@ -140,7 +140,6 @@ type WeaverseLoaderRequestInfo = {
 };
 type WeaverseStorefrontData = {
     id?: string;
-    __cachedId?: string;
     rootId: string;
     name: string;
     items: HydrogenComponentData[];
@@ -227,9 +226,9 @@ interface WeaverseLoaderData {
 }
 interface HydrogenPageData extends WeaverseProjectDataType {
     id: string;
-    pageId: string;
     name: string;
     items: HydrogenComponentData[];
+    __cacheId?: string;
     [key: string]: any;
 }
 interface WeaverseHydrogenRootProps {
@@ -273,6 +272,7 @@ type FetchProjectPayload = {
     page: HydrogenPageData;
     project: HydrogenProjectType;
     pageAssignment: HydrogenPageAssignment;
+    error?: string;
 };
 type HydrogenThemeEnv = {
     WEAVERSE_PROJECT_ID: string;
@@ -310,7 +310,7 @@ type WeaverseArticle = WeaverseResourcePickerData;
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
-        __weaverses: WeaverseHydrogen[];
+        __weaverses: Record<string, WeaverseHydrogen>;
     }
 }
 

package/dist/index.d.ts

@@ -140,7 +140,6 @@ type WeaverseLoaderRequestInfo = {
 };
 type WeaverseStorefrontData = {
     id?: string;
-    __cachedId?: string;
     rootId: string;
     name: string;
     items: HydrogenComponentData[];
@@ -227,9 +226,9 @@ interface WeaverseLoaderData {
 }
 interface HydrogenPageData extends WeaverseProjectDataType {
     id: string;
-    pageId: string;
     name: string;
     items: HydrogenComponentData[];
+    __cacheId?: string;
     [key: string]: any;
 }
 interface WeaverseHydrogenRootProps {
@@ -273,6 +272,7 @@ type FetchProjectPayload = {
     page: HydrogenPageData;
     project: HydrogenProjectType;
     pageAssignment: HydrogenPageAssignment;
+    error?: string;
 };
 type HydrogenThemeEnv = {
     WEAVERSE_PROJECT_ID: string;
@@ -310,7 +310,7 @@ type WeaverseArticle = WeaverseResourcePickerData;
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
-        __weaverses: WeaverseHydrogen[];
+        __weaverses: Record<string, WeaverseHydrogen>;
     }
 }
 

package/dist/index.js

@@ -38,15 +38,15 @@ __export(src_exports, {
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
-  useChildInstances: () => import_react14.useChildInstances,
-  useItemInstance: () => import_react14.useItemInstance,
-  useParentInstance: () => import_react14.useParentInstance,
+  useChildInstances: () => import_react16.useChildInstances,
+  useItemInstance: () => import_react16.useItemInstance,
+  useParentInstance: () => import_react16.useParentInstance,
   useThemeSettings: () => useThemeSettings,
-  useWeaverse: () => import_react14.useWeaverse,
+  useWeaverse: () => import_react16.useWeaverse,
   withWeaverse: () => withWeaverse
 });
 module.exports = __toCommonJS(src_exports);
-var import_react14 = require("@weaverse/react");
+var import_react16 = require("@weaverse/react");
 
 // src/components/main.tsx
 var main_exports = {};
@@ -69,9 +69,9 @@ var schema = {
 var defaultComponents = [main_exports];
 
 // src/WeaverseHydrogenRoot.tsx
-var import_react11 = require("@remix-run/react");
-var import_react12 = require("@weaverse/react");
-var import_react13 = __toESM(require("react"));
+var import_react13 = require("@remix-run/react");
+var import_react14 = require("@weaverse/react");
+var import_react15 = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
@@ -79,17 +79,13 @@ var import_react2 = require("@weaverse/react");
 var import_react3 = require("react");
 function createCachedWeaverseInstance(params, components) {
   if (import_react2.isBrowser) {
-    window.__weaverses = window.__weaverses || [];
-    let weaverse = window.__weaverses.find((w) => {
-      let { pathname } = w.requestInfo;
-      return pathname === params.requestInfo.pathname;
-    });
+    window.__weaverses = window.__weaverses || {};
+    let weaverse = window.__weaverses[params.pageId];
     if (!weaverse) {
       weaverse = new WeaverseHydrogen(params, components);
-      window.__weaverses.push(weaverse);
+      window.__weaverses[params.pageId] = weaverse;
     } else if (weaverse.isDesignMode) {
-      weaverse.requestInfo = params.requestInfo;
-      weaverse.setProjectData(params.data);
+      window.weaverseStudio?.refresh(params);
     }
     return weaverse;
   }
@@ -110,17 +106,18 @@ function createWeaverseInstance(weaverseData, components) {
 var ThemeProvider = (0, import_react3.createContext)(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
 
-// src/hooks/use-studio.ts
-var import_react7 = require("@remix-run/react");
-var import_react8 = require("@weaverse/react");
-var import_react9 = require("react");
+// src/hooks/use-theme-settings.ts
+var import_react5 = require("react");
+var import_react6 = require("@weaverse/react");
 
 // src/hooks/use-theme-context.ts
-var import_react6 = require("react");
+var import_react4 = require("react");
+function useThemeContext() {
+  let themeContext = (0, import_react4.useContext)(ThemeProvider);
+  return themeContext || new ThemeSettingsStore({ theme: {} });
+}
 
 // src/hooks/use-theme-settings.ts
-var import_react4 = require("react");
-var import_react5 = require("@weaverse/react");
 var ThemeSettingsStore = class _ThemeSettingsStore {
   static settings = null;
   listeners = [];
@@ -129,7 +126,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
   publicEnv;
   constructor(data) {
     let { theme, countries, schema: schema2, publicEnv } = data || {};
-    if (import_react5.isBrowser && _ThemeSettingsStore.settings) {
+    if (import_react6.isBrowser && _ThemeSettingsStore.settings) {
       _ThemeSettingsStore.settings = {
         ...theme,
         ..._ThemeSettingsStore.settings
@@ -168,7 +165,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
 };
 function useThemeSettings() {
   let themeSettingsStore = useThemeContext();
-  let settings = (0, import_react4.useSyncExternalStore)(
+  let settings = (0, import_react5.useSyncExternalStore)(
     themeSettingsStore.subscribe,
     themeSettingsStore.getSnapshot,
     themeSettingsStore.getServerSnapshot
@@ -176,68 +173,83 @@ function useThemeSettings() {
   return settings;
 }
 
-// src/hooks/use-theme-context.ts
-function useThemeContext() {
-  let themeContext = (0, import_react6.useContext)(ThemeProvider);
-  return themeContext || new ThemeSettingsStore({ theme: {} });
+// src/Effect.tsx
+var import_react12 = require("react");
+
+// src/hooks/use-pixel.ts
+var import_react7 = require("react");
+var import_react8 = require("@remix-run/react");
+var fetchingKey = "";
+function usePixel(context) {
+  let { projectId, pageId, weaverseHost, isDesignMode } = context;
+  let location = (0, import_react8.useLocation)();
+  (0, import_react7.useEffect)(() => {
+    if (isDesignMode || !projectId || !pageId || !weaverseHost)
+      return;
+    let currentKey = `${projectId}-${pageId}-${location.pathname}`;
+    if (fetchingKey === currentKey)
+      return;
+    fetchingKey = currentKey;
+    let url = `${weaverseHost}/api/public/px`;
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.send(JSON.stringify({ projectId, pageId }));
+  }, [location]);
 }
 
 // src/hooks/use-studio.ts
+var import_react9 = require("@remix-run/react");
+var import_react10 = require("@weaverse/react");
+var import_react11 = require("react");
 function useStudio(weaverse) {
-  let { revalidate } = (0, import_react7.useRevalidator)();
-  let navigate = (0, import_react7.useNavigate)();
+  let { revalidate } = (0, import_react9.useRevalidator)();
+  let { pathname, search } = (0, import_react9.useLocation)();
+  let navigate = (0, import_react9.useNavigate)();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = import_react8.isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  (0, import_react9.useEffect)(() => {
-    if (isStudio) {
+  (0, import_react11.useEffect)(() => {
+    if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
         navigate,
         revalidate,
         themeSettingsStore
       };
-      window.__weaverse = weaverse;
-      if (window.weaverseStudio) {
-        window.weaverseStudio.init(weaverse);
-      } else {
-        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        (0, import_react8.loadScript)(studioSrc);
-      }
+      let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
+      (0, import_react10.loadScript)(studioSrc).then(() => {
+        window.weaverseStudio?.init(weaverse);
+      }).catch(console.error);
     }
-  }, [weaverse.requestInfo]);
+  }, [pathname, search]);
 }
 
-// src/pixel.tsx
-var import_react10 = __toESM(require("react"));
-var Pixel = ({ baseUrl, projectId, pageId }) => {
-  const url = `${baseUrl}/api/public/px?projectId=${projectId}&pageId=${pageId}`;
-  return /* @__PURE__ */ import_react10.default.createElement("img", { src: url, alt: "weaverse pixel", style: { display: "none" } });
-};
-var WeaversePixel = ({ context }) => {
-  let { projectId, pageId, weaverseHost, isDesignMode } = context;
-  if (isDesignMode || !projectId || !pageId || !weaverseHost)
+// src/Effect.tsx
+var WeaverseEffect = (0, import_react12.memo)(
+  ({ context }) => {
+    useStudio(context);
+    usePixel(context);
     return null;
-  return /* @__PURE__ */ import_react10.default.createElement(Pixel, { baseUrl: weaverseHost, projectId, pageId });
-};
+  }
+);
 
 // src/WeaverseHydrogenRoot.tsx
-var WeaverseHydrogenRoot = (0, import_react13.memo)(
+var WeaverseHydrogenRoot = (0, import_react15.memo)(
   ({
     errorComponent: ErrorComponent = FallbackError,
     components
   }) => {
-    let loaderData = (0, import_react11.useLoaderData)();
+    let loaderData = (0, import_react13.useLoaderData)();
     let data = loaderData?.weaverseData;
     if (data) {
       if (data instanceof Promise) {
-        return /* @__PURE__ */ import_react13.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react13.default.createElement(import_react13.Suspense, null, /* @__PURE__ */ import_react13.default.createElement(import_react11.Await, { resolve: data }, (resolvedData) => {
-          return /* @__PURE__ */ import_react13.default.createElement(RenderRoot, { data: resolvedData, components });
+        return /* @__PURE__ */ import_react15.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react15.default.createElement(import_react15.Suspense, null, /* @__PURE__ */ import_react15.default.createElement(import_react13.Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ import_react15.default.createElement(RenderRoot, { data: resolvedData, components });
         })));
       }
-      return /* @__PURE__ */ import_react13.default.createElement(RenderRoot, { data, components });
+      return /* @__PURE__ */ import_react15.default.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ import_react13.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       ErrorComponent,
       {
         error: { message: "No Weaverse data return from route loader!" }
@@ -248,18 +260,17 @@ var WeaverseHydrogenRoot = (0, import_react13.memo)(
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
-  useStudio(weaverse);
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(import_react12.WeaverseRoot, { context: weaverse }), /* @__PURE__ */ import_react13.default.createElement(WeaversePixel, { context: weaverse }));
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(import_react14.WeaverseRoot, { context: weaverse }), /* @__PURE__ */ import_react15.default.createElement(WeaverseEffect, { context: weaverse }));
 }
 function withWeaverse(Component) {
   return (props) => {
-    let loaderData = (0, import_react11.useRouteLoaderData)("root");
+    let loaderData = (0, import_react13.useRouteLoaderData)("root");
     let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
-    return /* @__PURE__ */ import_react13.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react13.default.createElement(Component, { ...props }));
+    return /* @__PURE__ */ import_react15.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react15.default.createElement(Component, { ...props }));
   };
 }
 function FallbackError({ error }) {
-  return /* @__PURE__ */ import_react13.default.createElement("div", null, error?.message || "An unexpected error occurred");
+  return /* @__PURE__ */ import_react15.default.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
 // src/weaverse-client.ts
@@ -270,7 +281,7 @@ var package_default = {
   name: "@weaverse/hydrogen",
   author: "Weaverse Team",
   description: "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  version: "2.7.4",
+  version: "2.8.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -308,7 +319,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.7.4",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -513,18 +524,19 @@ var WeaverseClient = class {
             strategy
           });
         }
+        if (payload?.error) {
+          throw new Error(payload?.error);
+        }
         let { page, project, pageAssignment } = payload;
-        if (!page || !project || !pageAssignment) {
-          throw new Error(
-            // @ts-ignore
-            payload?.error || "Invalid Weaverse project payload!"
-          );
+        if (!project) {
+          throw new Error(`Weaverse project not found. Id: ${projectId}`);
+        }
+        if (!page) {
+          throw new Error(`No Weaverse page assigned to this url.`);
         }
         if (page?.items) {
           let items = page.items;
-          page.items = await Promise.all(
-            items.map((item) => this.execComponentLoader(item))
-          );
+          page.items = await Promise.all(items.map(this.execComponentLoader));
         }
         let data = {
           page,
@@ -534,6 +546,7 @@ 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
@@ -550,7 +563,7 @@ var WeaverseClient = class {
   execComponentLoader = async (item) => {
     let { data = {}, type, id } = item;
     let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
-    let { loader } = schema2 || {};
+    let loader = schema2?.loader;
     if (loader && typeof loader === "function") {
       try {
         return {
@@ -579,12 +592,13 @@ function getSelectedProductOptions(request) {
 }
 
 // src/index.ts
-var WeaverseHydrogen = class extends import_react14.Weaverse {
+var WeaverseHydrogen = class extends import_react16.Weaverse {
   platformType = "shopify-hydrogen";
   pageId;
   internal;
   requestInfo;
   constructor(params, components) {
+    console.log("\u{1F4BF} New WeaverseHydrogen", params);
     let { internal, pageId, requestInfo, ...coreParams } = params;
     super({ ...coreParams, ItemConstructor: WeaverseHydrogenItem });
     this.internal = internal;
@@ -595,7 +609,7 @@ var WeaverseHydrogen = class extends import_react14.Weaverse {
   }
   registerComponents = (components) => {
     components.forEach((comp) => {
-      import_react14.Weaverse.registerElement({
+      import_react16.Weaverse.registerElement({
         type: comp?.schema?.type,
         Component: comp?.default,
         schema: comp?.schema,
@@ -604,7 +618,7 @@ var WeaverseHydrogen = class extends import_react14.Weaverse {
     });
   };
 };
-var WeaverseHydrogenItem = class extends import_react14.WeaverseItemStore {
+var WeaverseHydrogenItem = class extends import_react16.WeaverseItemStore {
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
     let { data, ...rest } = initialData;

package/dist/index.mjs

@@ -37,7 +37,7 @@ var defaultComponents = [main_exports];
 // src/WeaverseHydrogenRoot.tsx
 import { Await, useLoaderData, useRouteLoaderData } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React3, { memo, Suspense } from "react";
+import React2, { memo as memo2, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
@@ -45,17 +45,13 @@ import { isBrowser } from "@weaverse/react";
 import { createContext } from "react";
 function createCachedWeaverseInstance(params, components) {
   if (isBrowser) {
-    window.__weaverses = window.__weaverses || [];
-    let weaverse = window.__weaverses.find((w) => {
-      let { pathname } = w.requestInfo;
-      return pathname === params.requestInfo.pathname;
-    });
+    window.__weaverses = window.__weaverses || {};
+    let weaverse = window.__weaverses[params.pageId];
     if (!weaverse) {
       weaverse = new WeaverseHydrogen(params, components);
-      window.__weaverses.push(weaverse);
+      window.__weaverses[params.pageId] = weaverse;
     } else if (weaverse.isDesignMode) {
-      weaverse.requestInfo = params.requestInfo;
-      weaverse.setProjectData(params.data);
+      window.weaverseStudio?.refresh(params);
     }
     return weaverse;
   }
@@ -76,17 +72,18 @@ function createWeaverseInstance(weaverseData, components) {
 var ThemeProvider = createContext(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
 
-// src/hooks/use-studio.ts
-import { useNavigate, useRevalidator } from "@remix-run/react";
-import { isIframe, loadScript } from "@weaverse/react";
-import { useEffect } from "react";
+// src/hooks/use-theme-settings.ts
+import { useSyncExternalStore } from "react";
+import { isBrowser as isBrowser2 } from "@weaverse/react";
 
 // src/hooks/use-theme-context.ts
 import { useContext } from "react";
+function useThemeContext() {
+  let themeContext = useContext(ThemeProvider);
+  return themeContext || new ThemeSettingsStore({ theme: {} });
+}
 
 // src/hooks/use-theme-settings.ts
-import { useSyncExternalStore } from "react";
-import { isBrowser as isBrowser2 } from "@weaverse/react";
 var ThemeSettingsStore = class _ThemeSettingsStore {
   static settings = null;
   listeners = [];
@@ -142,53 +139,68 @@ function useThemeSettings() {
   return settings;
 }
 
-// src/hooks/use-theme-context.ts
-function useThemeContext() {
-  let themeContext = useContext(ThemeProvider);
-  return themeContext || new ThemeSettingsStore({ theme: {} });
+// src/Effect.tsx
+import { memo } from "react";
+
+// src/hooks/use-pixel.ts
+import { useEffect } from "react";
+import { useLocation } from "@remix-run/react";
+var fetchingKey = "";
+function usePixel(context) {
+  let { projectId, pageId, weaverseHost, isDesignMode } = context;
+  let location = useLocation();
+  useEffect(() => {
+    if (isDesignMode || !projectId || !pageId || !weaverseHost)
+      return;
+    let currentKey = `${projectId}-${pageId}-${location.pathname}`;
+    if (fetchingKey === currentKey)
+      return;
+    fetchingKey = currentKey;
+    let url = `${weaverseHost}/api/public/px`;
+    let xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.send(JSON.stringify({ projectId, pageId }));
+  }, [location]);
 }
 
 // src/hooks/use-studio.ts
+import { useLocation as useLocation2, useNavigate, useRevalidator } from "@remix-run/react";
+import { loadScript } from "@weaverse/react";
+import { useEffect as useEffect2 } from "react";
 function useStudio(weaverse) {
   let { revalidate } = useRevalidator();
+  let { pathname, search } = useLocation2();
   let navigate = useNavigate();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  useEffect(() => {
-    if (isStudio) {
+  useEffect2(() => {
+    if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
         navigate,
         revalidate,
         themeSettingsStore
       };
-      window.__weaverse = weaverse;
-      if (window.weaverseStudio) {
-        window.weaverseStudio.init(weaverse);
-      } else {
-        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        loadScript(studioSrc);
-      }
+      let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
+      loadScript(studioSrc).then(() => {
+        window.weaverseStudio?.init(weaverse);
+      }).catch(console.error);
     }
-  }, [weaverse.requestInfo]);
+  }, [pathname, search]);
 }
 
-// src/pixel.tsx
-import React2 from "react";
-var Pixel = ({ baseUrl, projectId, pageId }) => {
-  const url = `${baseUrl}/api/public/px?projectId=${projectId}&pageId=${pageId}`;
-  return /* @__PURE__ */ React2.createElement("img", { src: url, alt: "weaverse pixel", style: { display: "none" } });
-};
-var WeaversePixel = ({ context }) => {
-  let { projectId, pageId, weaverseHost, isDesignMode } = context;
-  if (isDesignMode || !projectId || !pageId || !weaverseHost)
+// src/Effect.tsx
+var WeaverseEffect = memo(
+  ({ context }) => {
+    useStudio(context);
+    usePixel(context);
     return null;
-  return /* @__PURE__ */ React2.createElement(Pixel, { baseUrl: weaverseHost, projectId, pageId });
-};
+  }
+);
 
 // src/WeaverseHydrogenRoot.tsx
-var WeaverseHydrogenRoot = memo(
+var WeaverseHydrogenRoot = memo2(
   ({
     errorComponent: ErrorComponent = FallbackError,
     components
@@ -197,13 +209,13 @@ var WeaverseHydrogenRoot = memo(
     let data = loaderData?.weaverseData;
     if (data) {
       if (data instanceof Promise) {
-        return /* @__PURE__ */ React3.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React3.createElement(Suspense, null, /* @__PURE__ */ React3.createElement(Await, { resolve: data }, (resolvedData) => {
-          return /* @__PURE__ */ React3.createElement(RenderRoot, { data: resolvedData, components });
+        return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense, null, /* @__PURE__ */ React2.createElement(Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ React2.createElement(RenderRoot, { data: resolvedData, components });
         })));
       }
-      return /* @__PURE__ */ React3.createElement(RenderRoot, { data, components });
+      return /* @__PURE__ */ React2.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React2.createElement(
       ErrorComponent,
       {
         error: { message: "No Weaverse data return from route loader!" }
@@ -214,18 +226,17 @@ var WeaverseHydrogenRoot = memo(
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
-  useStudio(weaverse);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(WeaverseRoot, { context: weaverse }), /* @__PURE__ */ React3.createElement(WeaversePixel, { context: weaverse }));
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(WeaverseRoot, { context: weaverse }), /* @__PURE__ */ React2.createElement(WeaverseEffect, { context: weaverse }));
 }
 function withWeaverse(Component) {
   return (props) => {
     let loaderData = useRouteLoaderData("root");
     let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
-    return /* @__PURE__ */ React3.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React3.createElement(Component, { ...props }));
+    return /* @__PURE__ */ React2.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React2.createElement(Component, { ...props }));
   };
 }
 function FallbackError({ error }) {
-  return /* @__PURE__ */ React3.createElement("div", null, error?.message || "An unexpected error occurred");
+  return /* @__PURE__ */ React2.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
 // src/weaverse-client.ts
@@ -236,7 +247,7 @@ var package_default = {
   name: "@weaverse/hydrogen",
   author: "Weaverse Team",
   description: "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  version: "2.7.4",
+  version: "2.8.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -274,7 +285,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.7.4",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -479,18 +490,19 @@ var WeaverseClient = class {
             strategy
           });
         }
+        if (payload?.error) {
+          throw new Error(payload?.error);
+        }
         let { page, project, pageAssignment } = payload;
-        if (!page || !project || !pageAssignment) {
-          throw new Error(
-            // @ts-ignore
-            payload?.error || "Invalid Weaverse project payload!"
-          );
+        if (!project) {
+          throw new Error(`Weaverse project not found. Id: ${projectId}`);
+        }
+        if (!page) {
+          throw new Error(`No Weaverse page assigned to this url.`);
         }
         if (page?.items) {
           let items = page.items;
-          page.items = await Promise.all(
-            items.map((item) => this.execComponentLoader(item))
-          );
+          page.items = await Promise.all(items.map(this.execComponentLoader));
         }
         let data = {
           page,
@@ -500,6 +512,7 @@ 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
@@ -516,7 +529,7 @@ var WeaverseClient = class {
   execComponentLoader = async (item) => {
     let { data = {}, type, id } = item;
     let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
-    let { loader } = schema2 || {};
+    let loader = schema2?.loader;
     if (loader && typeof loader === "function") {
       try {
         return {
@@ -551,6 +564,7 @@ var WeaverseHydrogen = class extends Weaverse {
   internal;
   requestInfo;
   constructor(params, components) {
+    console.log("\u{1F4BF} New WeaverseHydrogen", params);
     let { internal, pageId, requestInfo, ...coreParams } = params;
     super({ ...coreParams, ItemConstructor: WeaverseHydrogenItem });
     this.internal = internal;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "description": "Components, hooks, and utilities for building Shopify Hydrogen websites with Weaverse",
-  "version": "2.7.4",
+  "version": "2.8.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -40,7 +40,7 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@weaverse/react": "2.7.4",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {