@weaverse/hydrogen 2.8.0 → 2.8.1

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
@@ -106,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 = [];
@@ -125,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
@@ -164,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
@@ -172,20 +173,42 @@ 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 { pathname, search } = (0, import_react7.useLocation)();
-  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;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -194,43 +217,39 @@ function useStudio(weaverse) {
         themeSettingsStore
       };
       let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-      (0, import_react8.loadScript)(studioSrc).then(() => {
+      (0, import_react10.loadScript)(studioSrc).then(() => {
         window.weaverseStudio?.init(weaverse);
       }).catch(console.error);
     }
   }, [pathname, search]);
 }
 
-// src/pixel.tsx
-var import_react10 = __toESM(require("react"));
-function 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" } });
-}
-function 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!" }
@@ -241,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
@@ -263,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.8.0",
+  version: "2.8.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -301,7 +319,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.0",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -518,9 +536,7 @@ var WeaverseClient = class {
         }
         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,
@@ -530,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
@@ -546,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 {
@@ -575,7 +592,7 @@ 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;
@@ -592,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,
@@ -601,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
@@ -72,17 +72,18 @@ function createWeaverseInstance(weaverseData, components) {
 var ThemeProvider = createContext(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
 
-// src/hooks/use-studio.ts
-import { useLocation, useNavigate, useRevalidator } from "@remix-run/react";
-import { 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 = [];
@@ -138,20 +139,42 @@ 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 } = useLocation();
+  let { pathname, search } = useLocation2();
   let navigate = useNavigate();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  useEffect(() => {
+  useEffect2(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -167,21 +190,17 @@ function useStudio(weaverse) {
   }, [pathname, search]);
 }
 
-// src/pixel.tsx
-import React2 from "react";
-function 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" } });
-}
-function 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
@@ -190,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!" }
@@ -207,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
@@ -229,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.8.0",
+  version: "2.8.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -267,7 +285,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.0",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -484,9 +502,7 @@ var WeaverseClient = class {
         }
         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,
@@ -496,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
@@ -512,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 {

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.8.0",
+  "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.8.0",
+    "@weaverse/react": "2.8.1",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {