@weaverse/hydrogen 1.0.38 → 1.0.40

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
-import { Weaverse } from '@weaverse/core';
-import { LoaderArgs } from '@shopify/remix-oxygen';
+import React, { ForwardRefExoticComponent } from 'react';
+import { ElementSchema, WeaverseElement } from '@weaverse/react';
+import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
 
 /**
  * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
  */
+type TODO = any;
 declare module '@shopify/remix-oxygen' {
     interface AppLoadContext {
         waitUntil: ExecutionContext['waitUntil'];
@@ -13,42 +14,54 @@ declare module '@shopify/remix-oxygen' {
         env: TODO;
     }
 }
-type WeaverseComponentsType = {
-    [key: string]: any;
-};
-type TODO = any;
-
-declare let useStudio: (weaverseCore: Weaverse) => void;
-
-type QueryKey = string | readonly unknown[];
-declare function hashKey(queryKey: QueryKey): string;
-declare let fetchWithServerCache: ({ url, options, storefront, waitUntil, }: {
-    url: string;
-    options: RequestInit | Request;
-    storefront: any;
-    waitUntil?: any;
-}) => Promise<any>;
-type WeaverseComponentLoaderArgs = LoaderArgs & {
+type WeaverseLoaderArgs = LoaderArgs & {
     data: any;
     config: {
         projectId: string;
         weaverseHost: string;
     };
 };
-declare function getRequestQueries<T = Record<string, string>>(request: Request): T;
-declare function weaverseLoader({ request, context: { env, storefront, waitUntil }, context, params, }: LoaderArgs, components: {
-    [key: string]: {
-        [key: string]: any;
-        loader?: (loaderArgs: WeaverseComponentLoaderArgs) => Promise<any>;
-    };
-}): Promise<any>;
+interface HydrogenComponentSchema extends ElementSchema {
+    isSection?: boolean;
+}
+interface HydrogenComponentProps<T = unknown> extends WeaverseElement {
+    loaderData?: T;
+    children?: React.JSX.Element[];
+}
+interface HydrogenComponent<T = HydrogenComponentProps> {
+    default: ForwardRefExoticComponent<T>;
+    schema: ElementSchema;
+    loader?: (args: WeaverseLoaderArgs) => Promise<unknown>;
+}
+type HydrogenPageConfigs = {
+    projectId: string;
+    weaverseHost: string;
+    isDesignMode?: boolean;
+    [key: string]: any;
+};
+interface HydrogenPageData {
+    page: any;
+    configs: HydrogenPageConfigs;
+}
 
-declare let WeaverseHydrogenRoot: ({ components, data, }: {
-    components: WeaverseComponentsType;
+/**
+ * Fetch with server cache requires a storefront.cache instance which is Cloudflare Cache and a waitUntil function, otherwise it will just fetch the url.
+ */
+declare let fetchWithServerCache: ({ url, options, context, }: {
+    url: string;
+    options?: Request | RequestInit | undefined;
+    context: AppLoadContext;
+}) => Promise<any>;
+
+declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent>): Promise<HydrogenPageData | null>;
+
+interface WeaverseHydrogenRootProps {
+    components: Record<string, HydrogenComponent>;
     data: {
+        weaverseData: HydrogenPageData;
         [key: string]: any;
-        weaverseData: any;
     };
-}) => React.JSX.Element;
+}
+declare let WeaverseHydrogenRoot: (props: WeaverseHydrogenRootProps) => React.JSX.Element;
 
-export { WeaverseComponentLoaderArgs, WeaverseHydrogenRoot, fetchWithServerCache, getRequestQueries, hashKey, useStudio, weaverseLoader };
+export { HydrogenComponent, HydrogenComponentProps, HydrogenComponentSchema, HydrogenPageConfigs, HydrogenPageData, TODO, WeaverseHydrogenRoot, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };

package/dist/index.js

@@ -32,9 +32,6 @@ var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   fetchWithServerCache: () => fetchWithServerCache,
-  getRequestQueries: () => getRequestQueries,
-  hashKey: () => hashKey,
-  useStudio: () => useStudio,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
@@ -43,7 +40,7 @@ var import_react4 = __toESM(require("react"));
 
 // src/context.ts
 var import_react = require("@weaverse/react");
-var createCachedWeaverseContext = (init) => {
+function createCachedContext(init) {
   if (import_react.isBrowser && init.pageId) {
     window.__weaverses = window.__weaverses || {};
     if (!window.__weaverses[init.pageId]) {
@@ -52,26 +49,25 @@ var createCachedWeaverseContext = (init) => {
     return window.__weaverses[init.pageId];
   }
   return (0, import_react.createRootContext)(init);
-};
-var createWeaverseHydrogenContext = ({ weaverseData }, components) => {
-  let { pageData = {}, config = {} } = weaverseData || {};
-  let weaverse = createCachedWeaverseContext({
-    ...config,
-    data: pageData,
-    pageId: pageData?.id,
+}
+function createWeaverseHydrogenContext({ weaverseData }, components) {
+  let { page = {}, configs = {} } = weaverseData || {};
+  let weaverse = createCachedContext({
+    ...configs,
+    data: page,
+    pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      schema: component?.schema,
-      defaultCss: component?.css,
-      permanentCss: component?.permanentCss
+      schema: component?.schema
+      // defaultCss: component?.css,
     });
   });
   return weaverse;
-};
+}
 
 // ../../node_modules/@stitches/core/dist/index.mjs
 var t = "colors";
@@ -736,9 +732,9 @@ var Weaverse = class {
 };
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 
-// src/utils.ts
+// src/hooks/use-studio.ts
 var import_react2 = require("react");
-var useStudio = (weaverseCore) => {
+function useStudio(weaverseCore) {
   (0, import_react2.useEffect)(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
@@ -753,14 +749,16 @@ var useStudio = (weaverseCore) => {
         }
       );
     }
-    setTimeout(() => {
+    window.requestAnimationFrame(() => {
       window.__weaverse = weaverseCore;
-    }, 1);
+    });
   }, []);
-};
+}
 
-// src/weaverse-loader.ts
+// src/fetch.ts
 var import_hydrogen = require("@shopify/hydrogen");
+
+// src/utils.ts
 function hashKey(queryKey) {
   const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
   let hash = "";
@@ -779,16 +777,31 @@ function hashKey(queryKey) {
   }
   return hash;
 }
+function getRequestQueries(request) {
+  let url = new URL(request.url);
+  return Array.from(url.searchParams.entries()).reduce(
+    (q, [k2, v2]) => {
+      q[k2] = v2 === "true" ? true : v2 === "false" ? false : v2;
+      return q;
+    },
+    {}
+  );
+}
+
+// src/fetch.ts
 var cacheControl = (0, import_hydrogen.generateCacheControlHeader)((0, import_hydrogen.CacheShort)());
 var fetchWithServerCache = async ({
   url,
   options = {},
-  storefront,
-  waitUntil
+  context
 }) => {
-  const cacheUrl = new URL(url);
+  let { storefront, waitUntil } = context;
+  if (!storefront?.cache || !waitUntil) {
+    return fetch(url, options);
+  }
+  let cacheUrl = new URL(url);
   cacheUrl.pathname = "/cache" + cacheUrl.pathname + hashKey([options.body]);
-  const cacheKey = new Request(cacheUrl.toString());
+  let cacheKey = new Request(cacheUrl.toString());
   let response = await storefront.cache.match(cacheKey);
   if (!response) {
     response = await fetch(url, {
@@ -802,95 +815,78 @@ var fetchWithServerCache = async ({
   }
   return response;
 };
-function getRequestQueries(request) {
-  let url = new URL(request.url);
-  return Array.from(url.searchParams.entries()).reduce(
-    (q, [k2, v2]) => {
-      q[k2] = v2 === "true" ? true : v2 === "false" ? false : v2;
-      return q;
-    },
-    {}
-  );
-}
-async function weaverseLoader({
-  request,
-  context: { env, storefront, waitUntil },
-  context,
-  params
-}, components) {
+
+// src/loader.ts
+async function weaverseLoader(args, components) {
+  let { request, context, params } = args;
+  let { env } = context;
   let queries = getRequestQueries(request);
   let projectId = env?.WEAVERSE_PROJECT_ID;
   let weaverseHost = env?.WEAVERSE_HOST;
   if (!projectId || !weaverseHost) {
-    console.error("WEAVERSE_PROJECT_ID or WEAVERSE_HOST is not set!");
-    return {};
+    console.log("\u274C Missing `WEAVERSE_PROJECT_ID` or `WEAVERSE_HOST`!");
+    return null;
   }
-  let config = {
+  let configs = {
     projectId,
     weaverseHost,
     ...queries
   };
   try {
-    let pageData = await fetchWithServerCache({
+    let page = await fetchWithServerCache({
       url: `${weaverseHost}/api/public/project`,
       options: {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
         body: JSON.stringify({
           projectId,
           url: request.url
         })
       },
-      storefront,
-      waitUntil
+      context
     }).then((r2) => r2.json()).catch((err) => {
-      console.log(`\u274C Error fetching page data: ${err?.toString()}`);
+      console.log(`\u274C Error fetching project data: ${err?.toString()}`);
       return {};
     });
-    if (pageData?.items) {
-      let items = pageData.items;
-      pageData.items = await Promise.all(
+    if (page?.items) {
+      let items = page.items;
+      page.items = await Promise.all(
         items.map(async (item) => {
           let loader = components[item.type]?.loader;
-          if (loader) {
-            return {
-              ...item,
-              ...await loader({
-                data: item,
-                context,
-                params,
-                request,
-                config
-              })
-            };
+          if (loader && typeof loader === "function") {
+            try {
+              return {
+                ...item,
+                loaderData: await loader({
+                  data: item,
+                  context,
+                  params,
+                  request,
+                  config: configs
+                })
+              };
+            } catch (err) {
+              console.log(`\u274C Loader run failed! Item: ${item}: ${err}`);
+              return item;
+            }
           }
           return item;
         })
       );
     }
-    return {
-      pageData,
-      config,
-      components: {}
-    };
+    return { page, configs };
   } catch (err) {
-    console.error(err);
-    return {};
+    console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
+    return null;
   }
 }
 
 // src/index.tsx
-var WeaverseHydrogenRoot = ({
-  components,
-  data
-}) => {
+var WeaverseHydrogenRoot = (props) => {
+  let { components, data } = props;
   let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse);
-  if (!weaverse?.data) {
-    return /* @__PURE__ */ import_react4.default.createElement("div", null, "404");
-  }
+  if (!weaverse?.data)
+    return /* @__PURE__ */ import_react4.default.createElement("div", null, "No Weaverse data!");
   return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react3.WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ import_react4.default.createElement(StitchesStyle, { weaverse }));
 };
 var StitchesStyle = (0, import_react4.memo)(
@@ -913,8 +909,5 @@ var StitchesStyle = (0, import_react4.memo)(
 0 && (module.exports = {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
-  getRequestQueries,
-  hashKey,
-  useStudio,
   weaverseLoader
 });

package/dist/index.mjs

@@ -4,7 +4,7 @@ import React, { memo } from "react";
 
 // src/context.ts
 import { createRootContext, isBrowser } from "@weaverse/react";
-var createCachedWeaverseContext = (init) => {
+function createCachedContext(init) {
   if (isBrowser && init.pageId) {
     window.__weaverses = window.__weaverses || {};
     if (!window.__weaverses[init.pageId]) {
@@ -13,26 +13,25 @@ var createCachedWeaverseContext = (init) => {
     return window.__weaverses[init.pageId];
   }
   return createRootContext(init);
-};
-var createWeaverseHydrogenContext = ({ weaverseData }, components) => {
-  let { pageData = {}, config = {} } = weaverseData || {};
-  let weaverse = createCachedWeaverseContext({
-    ...config,
-    data: pageData,
-    pageId: pageData?.id,
+}
+function createWeaverseHydrogenContext({ weaverseData }, components) {
+  let { page = {}, configs = {} } = weaverseData || {};
+  let weaverse = createCachedContext({
+    ...configs,
+    data: page,
+    pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      schema: component?.schema,
-      defaultCss: component?.css,
-      permanentCss: component?.permanentCss
+      schema: component?.schema
+      // defaultCss: component?.css,
     });
   });
   return weaverse;
-};
+}
 
 // ../../node_modules/@stitches/core/dist/index.mjs
 var t = "colors";
@@ -697,9 +696,9 @@ var Weaverse = class {
 };
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 
-// src/utils.ts
+// src/hooks/use-studio.ts
 import { useEffect } from "react";
-var useStudio = (weaverseCore) => {
+function useStudio(weaverseCore) {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
@@ -714,14 +713,16 @@ var useStudio = (weaverseCore) => {
         }
       );
     }
-    setTimeout(() => {
+    window.requestAnimationFrame(() => {
       window.__weaverse = weaverseCore;
-    }, 1);
+    });
   }, []);
-};
+}
 
-// src/weaverse-loader.ts
+// src/fetch.ts
 import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
+
+// src/utils.ts
 function hashKey(queryKey) {
   const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
   let hash = "";
@@ -740,16 +741,31 @@ function hashKey(queryKey) {
   }
   return hash;
 }
+function getRequestQueries(request) {
+  let url = new URL(request.url);
+  return Array.from(url.searchParams.entries()).reduce(
+    (q, [k2, v2]) => {
+      q[k2] = v2 === "true" ? true : v2 === "false" ? false : v2;
+      return q;
+    },
+    {}
+  );
+}
+
+// src/fetch.ts
 var cacheControl = generateCacheControlHeader(CacheShort());
 var fetchWithServerCache = async ({
   url,
   options = {},
-  storefront,
-  waitUntil
+  context
 }) => {
-  const cacheUrl = new URL(url);
+  let { storefront, waitUntil } = context;
+  if (!storefront?.cache || !waitUntil) {
+    return fetch(url, options);
+  }
+  let cacheUrl = new URL(url);
   cacheUrl.pathname = "/cache" + cacheUrl.pathname + hashKey([options.body]);
-  const cacheKey = new Request(cacheUrl.toString());
+  let cacheKey = new Request(cacheUrl.toString());
   let response = await storefront.cache.match(cacheKey);
   if (!response) {
     response = await fetch(url, {
@@ -763,95 +779,78 @@ var fetchWithServerCache = async ({
   }
   return response;
 };
-function getRequestQueries(request) {
-  let url = new URL(request.url);
-  return Array.from(url.searchParams.entries()).reduce(
-    (q, [k2, v2]) => {
-      q[k2] = v2 === "true" ? true : v2 === "false" ? false : v2;
-      return q;
-    },
-    {}
-  );
-}
-async function weaverseLoader({
-  request,
-  context: { env, storefront, waitUntil },
-  context,
-  params
-}, components) {
+
+// src/loader.ts
+async function weaverseLoader(args, components) {
+  let { request, context, params } = args;
+  let { env } = context;
   let queries = getRequestQueries(request);
   let projectId = env?.WEAVERSE_PROJECT_ID;
   let weaverseHost = env?.WEAVERSE_HOST;
   if (!projectId || !weaverseHost) {
-    console.error("WEAVERSE_PROJECT_ID or WEAVERSE_HOST is not set!");
-    return {};
+    console.log("\u274C Missing `WEAVERSE_PROJECT_ID` or `WEAVERSE_HOST`!");
+    return null;
   }
-  let config = {
+  let configs = {
     projectId,
     weaverseHost,
     ...queries
   };
   try {
-    let pageData = await fetchWithServerCache({
+    let page = await fetchWithServerCache({
       url: `${weaverseHost}/api/public/project`,
       options: {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
         body: JSON.stringify({
           projectId,
           url: request.url
         })
       },
-      storefront,
-      waitUntil
+      context
     }).then((r2) => r2.json()).catch((err) => {
-      console.log(`\u274C Error fetching page data: ${err?.toString()}`);
+      console.log(`\u274C Error fetching project data: ${err?.toString()}`);
       return {};
     });
-    if (pageData?.items) {
-      let items = pageData.items;
-      pageData.items = await Promise.all(
+    if (page?.items) {
+      let items = page.items;
+      page.items = await Promise.all(
         items.map(async (item) => {
           let loader = components[item.type]?.loader;
-          if (loader) {
-            return {
-              ...item,
-              ...await loader({
-                data: item,
-                context,
-                params,
-                request,
-                config
-              })
-            };
+          if (loader && typeof loader === "function") {
+            try {
+              return {
+                ...item,
+                loaderData: await loader({
+                  data: item,
+                  context,
+                  params,
+                  request,
+                  config: configs
+                })
+              };
+            } catch (err) {
+              console.log(`\u274C Loader run failed! Item: ${item}: ${err}`);
+              return item;
+            }
           }
           return item;
         })
       );
     }
-    return {
-      pageData,
-      config,
-      components: {}
-    };
+    return { page, configs };
   } catch (err) {
-    console.error(err);
-    return {};
+    console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
+    return null;
   }
 }
 
 // src/index.tsx
-var WeaverseHydrogenRoot = ({
-  components,
-  data
-}) => {
+var WeaverseHydrogenRoot = (props) => {
+  let { components, data } = props;
   let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse);
-  if (!weaverse?.data) {
-    return /* @__PURE__ */ React.createElement("div", null, "404");
-  }
+  if (!weaverse?.data)
+    return /* @__PURE__ */ React.createElement("div", null, "No Weaverse data!");
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ React.createElement(StitchesStyle, { weaverse }));
 };
 var StitchesStyle = memo(
@@ -873,8 +872,5 @@ var StitchesStyle = memo(
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
-  getRequestQueries,
-  hashKey,
-  useStudio,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.38",
+  "version": "1.0.40",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -33,7 +33,7 @@
   "author": "Weaverse Team",
   "dependencies": {
     "@shopify/hydrogen": "2023.4.0",
-    "@weaverse/react": "1.0.38"
+    "@weaverse/react": "1.0.40"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.0.5"