@weaverse/hydrogen 2.8.4 → 2.8.5

package/dist/index.d.mts

@@ -57,6 +57,7 @@ declare class WeaverseClient {
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
+    generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
 }

package/dist/index.d.ts

@@ -57,6 +57,7 @@ declare class WeaverseClient {
     constructor(args: WeaverseClientArgs);
     fetchWithCache: <T>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
+    generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
 }

package/dist/index.js

@@ -38,15 +38,15 @@ __export(src_exports, {
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
-  useChildInstances: () => import_react16.useChildInstances,
-  useItemInstance: () => import_react16.useItemInstance,
-  useParentInstance: () => import_react16.useParentInstance,
+  useChildInstances: () => import_react14.useChildInstances,
+  useItemInstance: () => import_react14.useItemInstance,
+  useParentInstance: () => import_react14.useParentInstance,
   useThemeSettings: () => useThemeSettings,
-  useWeaverse: () => import_react16.useWeaverse,
+  useWeaverse: () => import_react14.useWeaverse,
   withWeaverse: () => withWeaverse
 });
 module.exports = __toCommonJS(src_exports);
-var import_react16 = require("@weaverse/react");
+var import_react14 = 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_react13 = require("@remix-run/react");
-var import_react14 = require("@weaverse/react");
-var import_react15 = __toESM(require("react"));
+var import_react11 = require("@remix-run/react");
+var import_react12 = require("@weaverse/react");
+var import_react13 = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
@@ -174,41 +174,19 @@ function useThemeSettings() {
 }
 
 // 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]);
-}
+var import_react10 = require("react");
 
 // src/hooks/use-studio.ts
-var import_react9 = require("@remix-run/react");
-var import_react10 = require("@weaverse/react");
-var import_react11 = require("react");
+var import_react7 = require("@remix-run/react");
+var import_react8 = require("@weaverse/react");
+var import_react9 = require("react");
 function useStudio(weaverse) {
-  let { revalidate } = (0, import_react9.useRevalidator)();
-  let { pathname, search } = (0, import_react9.useLocation)();
-  let navigate = (0, import_react9.useNavigate)();
+  let { revalidate } = (0, import_react7.useRevalidator)();
+  let { pathname, search } = (0, import_react7.useLocation)();
+  let navigate = (0, import_react7.useNavigate)();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -217,7 +195,7 @@ function useStudio(weaverse) {
         themeSettingsStore
       };
       let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-      (0, import_react10.loadScript)(studioSrc).then(() => {
+      (0, import_react8.loadScript)(studioSrc).then(() => {
         window.weaverseStudio?.init(weaverse);
       }).catch(console.error);
     }
@@ -225,31 +203,30 @@ function useStudio(weaverse) {
 }
 
 // src/Effect.tsx
-var WeaverseEffect = (0, import_react12.memo)(
+var WeaverseEffect = (0, import_react10.memo)(
   ({ context }) => {
     useStudio(context);
-    usePixel(context);
     return null;
   }
 );
 
 // src/WeaverseHydrogenRoot.tsx
-var WeaverseHydrogenRoot = (0, import_react15.memo)(
+var WeaverseHydrogenRoot = (0, import_react13.memo)(
   ({
     errorComponent: ErrorComponent = FallbackError,
     components
   }) => {
-    let loaderData = (0, import_react13.useLoaderData)();
+    let loaderData = (0, import_react11.useLoaderData)();
     let data = loaderData?.weaverseData;
     if (data) {
       if (data instanceof Promise) {
-        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(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(RenderRoot, { data, components });
+      return /* @__PURE__ */ import_react13.default.createElement(RenderRoot, { data, components });
     }
-    return /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react13.default.createElement(
       ErrorComponent,
       {
         error: { message: "No Weaverse data return from route loader!" }
@@ -260,17 +237,17 @@ var WeaverseHydrogenRoot = (0, import_react15.memo)(
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
-  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 }));
+  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(WeaverseEffect, { context: weaverse }));
 }
 function withWeaverse(Component) {
   return (props) => {
-    let loaderData = (0, import_react13.useRouteLoaderData)("root");
+    let loaderData = (0, import_react11.useRouteLoaderData)("root");
     let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
-    return /* @__PURE__ */ import_react15.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react15.default.createElement(Component, { ...props }));
+    return /* @__PURE__ */ import_react13.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react13.default.createElement(Component, { ...props }));
   };
 }
 function FallbackError({ error }) {
-  return /* @__PURE__ */ import_react15.default.createElement("div", null, error?.message || "An unexpected error occurred");
+  return /* @__PURE__ */ import_react13.default.createElement("div", null, error?.message || "An unexpected error occurred");
 }
 
 // src/weaverse-client.ts
@@ -281,7 +258,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.4",
+  version: "2.8.5",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -319,7 +296,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.4",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -496,6 +473,20 @@ var WeaverseClient = class {
       return null;
     }
   };
+  generateFallbackPage = (message) => {
+    return {
+      id: "fallback" + Date.now(),
+      rootId: "root",
+      name: "Error",
+      items: [
+        {
+          type: "main",
+          id: "main",
+          data: { dangerouslySetInnerHTML: { __html: message } }
+        }
+      ]
+    };
+  };
   loadPage = async (params = {}) => {
     return new Promise(async (resolve, reject) => {
       try {
@@ -532,7 +523,9 @@ var WeaverseClient = class {
           throw new Error(`Weaverse project not found. Id: ${projectId}`);
         }
         if (!page) {
-          throw new Error(`No Weaverse page assigned to this url.`);
+          page = this.generateFallbackPage(
+            `No Weaverse page assigned to this url.1`
+          );
         }
         if (page?.items) {
           let items = page.items;
@@ -592,7 +585,7 @@ function getSelectedProductOptions(request) {
 }
 
 // src/index.ts
-var WeaverseHydrogen = class extends import_react16.Weaverse {
+var WeaverseHydrogen = class extends import_react14.Weaverse {
   platformType = "shopify-hydrogen";
   pageId;
   internal;
@@ -609,7 +602,7 @@ var WeaverseHydrogen = class extends import_react16.Weaverse {
   }
   registerComponents = (components) => {
     components.forEach((comp) => {
-      import_react16.Weaverse.registerElement({
+      import_react14.Weaverse.registerElement({
         type: comp?.schema?.type,
         Component: comp?.default,
         schema: comp?.schema,
@@ -618,7 +611,7 @@ var WeaverseHydrogen = class extends import_react16.Weaverse {
     });
   };
 };
-var WeaverseHydrogenItem = class extends import_react16.WeaverseItemStore {
+var WeaverseHydrogenItem = class extends import_react14.WeaverseItemStore {
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
     let { data, ...rest } = initialData;

package/dist/index.mjs

@@ -142,39 +142,17 @@ function useThemeSettings() {
 // 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 { useLocation, useNavigate, useRevalidator } from "@remix-run/react";
 import { loadScript } from "@weaverse/react";
-import { useEffect as useEffect2 } from "react";
+import { useEffect } from "react";
 function useStudio(weaverse) {
   let { revalidate } = useRevalidator();
-  let { pathname, search } = useLocation2();
+  let { pathname, search } = useLocation();
   let navigate = useNavigate();
   let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  useEffect2(() => {
+  useEffect(() => {
     if (isDesignMode) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -194,7 +172,6 @@ function useStudio(weaverse) {
 var WeaverseEffect = memo(
   ({ context }) => {
     useStudio(context);
-    usePixel(context);
     return null;
   }
 );
@@ -247,7 +224,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.4",
+  version: "2.8.5",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -285,7 +262,7 @@ var package_default = {
     singleQuote: true
   },
   dependencies: {
-    "@weaverse/react": "2.8.4",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -462,6 +439,20 @@ var WeaverseClient = class {
       return null;
     }
   };
+  generateFallbackPage = (message) => {
+    return {
+      id: "fallback" + Date.now(),
+      rootId: "root",
+      name: "Error",
+      items: [
+        {
+          type: "main",
+          id: "main",
+          data: { dangerouslySetInnerHTML: { __html: message } }
+        }
+      ]
+    };
+  };
   loadPage = async (params = {}) => {
     return new Promise(async (resolve, reject) => {
       try {
@@ -498,7 +489,9 @@ var WeaverseClient = class {
           throw new Error(`Weaverse project not found. Id: ${projectId}`);
         }
         if (!page) {
-          throw new Error(`No Weaverse page assigned to this url.`);
+          page = this.generateFallbackPage(
+            `No Weaverse page assigned to this url.1`
+          );
         }
         if (page?.items) {
           let items = page.items;

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.4",
+  "version": "2.8.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -40,10 +40,10 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@weaverse/react": "2.8.4",
+    "@weaverse/react": "2.8.5",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^2.0.1"
   }
-}
+}

package/readme.md

@@ -34,7 +34,7 @@ Initialize the Weaverse Client to establish a connection between your Hydrogen p
 ```typescript
 // <root>/server.ts
 
-import {createWeaverseClient} from '~/weaverse/create-weaverse.server';
+import { createWeaverseClient } from '~/weaverse/create-weaverse.server'
 
 const handleRequest = createRequestHandler({
   // ...
@@ -49,8 +49,7 @@ const handleRequest = createRequestHandler({
     }),
     // ... more app context properties
   }),
-});
-
+})
 ```
 
 ### Data Fetching and Rendering
@@ -60,19 +59,18 @@ Use the Weaverse Client to fetch data such as page content and global theme sett
 ```typescript
 // <root>/app/routes/($locale)._index.tsx
 
-import { json } from '@shopify/remix-oxygen';
-import { type RouteLoaderArgs } from '@weaverse/hydrogen';
+import { json } from '@shopify/remix-oxygen'
+import { type RouteLoaderArgs } from '@weaverse/hydrogen'
 
-export async function loader({context}: RouteLoaderArgs) {
-  let {weaverse} = context;
+export async function loader({ context }: RouteLoaderArgs) {
+  let { weaverse } = context
 
   return json({
     // The key prop for a Weaverse page must always be `weaverseData`
     weaverseData: await weaverse.loadPage(),
     // Additional page data...
-  });
+  })
 }
-
 ```
 
 Implement the `WeaverseHydrogenRoot` component to render the fetched content:
@@ -80,9 +78,9 @@ Implement the `WeaverseHydrogenRoot` component to render the fetched content:
 ```jsx
 // <root>/app/weaverse/index.tsx
 
-import {WeaverseHydrogenRoot} from '@weaverse/hydrogen';
-import {GenericError} from '~/components/GenericError';
-import {components} from './components';
+import { WeaverseHydrogenRoot } from '@weaverse/hydrogen'
+import { GenericError } from '~/components/GenericError'
+import { components } from './components'
 
 export function WeaverseContent() {
   return (
@@ -90,18 +88,16 @@ export function WeaverseContent() {
       components={components}
       errorComponent={GenericError}
     />
-  );
+  )
 }
 
-
 // <root>/app/routes/($locale)._index.tsx
 
-import { WeaverseContent } from '~/weaverse';
+import { WeaverseContent } from '~/weaverse'
 
 export default function Homepage() {
-  return <WeaverseContent />;
+  return <WeaverseContent />
 }
-
 ```
 
 ### Defining Component Schema
@@ -109,7 +105,7 @@ export default function Homepage() {
 Define your component's schema to control its behavior and interactivity within Weaverse Studio:
 
 ```typescript
-import type { HydrogenComponentSchema } from '@weaverse/hydrogen';
+import type { HydrogenComponentSchema } from '@weaverse/hydrogen'
 
 export let schema: HydrogenComponentSchema = {
   title: 'Product Card',
@@ -117,17 +113,13 @@ export let schema: HydrogenComponentSchema = {
   inspector: [
     {
       group: 'Settings',
-      inputs: [] // Defining input settings
-    }
+      inputs: [], // Defining input settings
+    },
   ],
   childTypes: ['image', 'product-title', 'price'],
   presets: {
     type: 'product-card',
-    children: [
-      { type: 'image' },
-      { type: 'product-title' },
-      { type: 'price' },
-    ],
+    children: [{ type: 'image' }, { type: 'product-title' }, { type: 'price' }],
   },
   limit: 3,
   enabledOn: {
@@ -135,8 +127,7 @@ export let schema: HydrogenComponentSchema = {
     groups: ['body'],
   },
   toolbar: ['general-settings', ['duplicate', 'delete']],
-};
-
+}
 ```
 
 ### Customizing Input Settings
@@ -170,4 +161,3 @@ for more details on how to contribute effectively.
 
 This package is created by The Weaverse Team ([https://weaverse.io](https://weaverse.io)) and is licensed under the MIT
 License.
-