@weaverse/hydrogen 1.0.24 → 1.0.25

package/dist/index.d.ts

@@ -1,22 +1,52 @@
 import { Weaverse } from '@weaverse/core';
-import { LoaderArgs } from '@remix-run/server-runtime';
+import { LoaderArgs } from '@shopify/remix-oxygen';
 
-type WeaverseHydrogenConfigs = {
-    projectId: string;
-    weaverseHost: string;
-    components: {
-        [key: string]: any;
-    };
+/**
+ * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
+ */
+declare module '@shopify/remix-oxygen' {
+    interface AppLoadContext {
+        waitUntil: ExecutionContext['waitUntil'];
+        session: TODO;
+        storefront: TODO;
+        env: TODO;
+    }
+}
+type WeaverseComponentsType = {
+    [key: string]: any;
 };
+type TODO = any;
 
 declare let useStudio: (weaverseCore: Weaverse) => void;
 
-declare function weaverseLoader({ request, context, params }: LoaderArgs, weaverseConfig: WeaverseHydrogenConfigs): Promise<any>;
-
-declare let useWeaverseHydrogen: (weaverseHydrogenConfigs: WeaverseHydrogenConfigs, data: any) => Weaverse;
-declare let WeaverseHydrogenRoot: ({ configs, data, }: {
-    configs: WeaverseHydrogenConfigs;
+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 & {
     data: any;
+    config: {
+        projectId: string;
+        weaverseHost: string;
+    };
+};
+declare function weaverseLoader({ request, context: { env, storefront, waitUntil }, context, params, }: LoaderArgs, components: {
+    [key: string]: {
+        [key: string]: any;
+        loader?: (loaderArgs: WeaverseComponentLoaderArgs) => Promise<any>;
+    };
+}): Promise<any>;
+
+declare let WeaverseHydrogenRoot: ({ components, data, }: {
+    components: WeaverseComponentsType;
+    data: {
+        [key: string]: any;
+        weaverseData: any;
+    };
 }) => JSX.Element;
 
-export { WeaverseHydrogenRoot, useStudio, useWeaverseHydrogen, weaverseLoader };
+export { WeaverseComponentLoaderArgs, WeaverseHydrogenRoot, fetchWithServerCache, hashKey, useStudio, weaverseLoader };

package/dist/index.js

@@ -31,8 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
+  fetchWithServerCache: () => fetchWithServerCache,
+  hashKey: () => hashKey,
   useStudio: () => useStudio,
-  useWeaverseHydrogen: () => useWeaverseHydrogen,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
@@ -43,7 +44,6 @@ var import_react = require("react");
 var useStudio = (weaverseCore) => {
   (0, import_react.useEffect)(() => {
     if (weaverseCore.isDesignMode && import_core.isIframe && !window.weaverseStudioInitialized) {
-      console.log("useStudio", weaverseCore);
       window.weaverseStudioInitialized = true;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
@@ -60,75 +60,167 @@ var useStudio = (weaverseCore) => {
 };
 
 // src/index.tsx
-var import_react2 = __toESM(require("react"));
-var import_react3 = require("@weaverse/react");
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@weaverse/react");
 
-// src/weaverse-loader.ts
-async function weaverseLoader({ request, context, params }, weaverseConfig) {
-  let fetchBody = {
-    projectId: weaverseConfig.projectId,
-    url: request.url
-  };
-  let response = await fetch(
-    `${weaverseConfig.weaverseHost}/api/public/project`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(fetchBody)
-    }
-  ).then((res) => res.json());
-  return {
-    weaversePageData: response
-  };
-}
-
-// src/index.tsx
-var createHydrogenRootContext = (configs, elements = {}) => {
-  let rootContext = (0, import_react3.createRootContext)(configs);
-  Object.keys(elements).forEach((key) => {
-    rootContext.registerElement(elements[key]);
-  });
-  return rootContext;
-};
-var useWeaverseHydrogen = (weaverseHydrogenConfigs, data) => {
-  let weaversePageData = data?.weaverseData?.weaversePageData;
-  let { components, ...rest } = weaverseHydrogenConfigs;
-  let weaverse = createHydrogenRootContext({
-    ...rest,
-    data: weaversePageData,
-    pageId: weaversePageData?.pageId,
+// src/context.ts
+var import_react2 = require("@weaverse/react");
+var createWeaverseHydrogenContext = ({
+  weaverseData: { pageData, config } = {
+    pageData: {},
+    config: {}
+  }
+}, components) => {
+  let weaverse = (0, import_react2.createRootContext)({
+    ...config,
+    data: pageData,
+    pageId: pageData?.pageId,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
-  Object.keys(components).forEach((key) => {
-    let component = components[key];
+  Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
-      type: components[key]?.schema?.type || key,
+      type: component?.schema?.type || key,
       Component: component?.default,
       schema: component?.schema,
       defaultCss: component?.css,
       permanentCss: component?.permanentCss
     });
   });
-  useStudio(weaverse);
   return weaverse;
 };
+
+// src/weaverse-loader.ts
+var import_hydrogen = require("@shopify/hydrogen");
+function hashKey(queryKey) {
+  const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
+  let hash = "";
+  for (const key of rawKeys) {
+    if (key != null) {
+      if (typeof key === "object") {
+        if (!!key.body && typeof key.body === "string") {
+          hash += key.body;
+        } else {
+          hash += JSON.stringify(key);
+        }
+      } else {
+        hash += key;
+      }
+    }
+  }
+  return hash;
+}
+var fetchWithServerCache = async ({
+  url,
+  options = {},
+  storefront,
+  waitUntil
+}) => {
+  const cacheUrl = new URL(url);
+  cacheUrl.pathname = "/cache" + cacheUrl.pathname + hashKey([options.body]);
+  const cacheKey = new Request(cacheUrl.toString());
+  let response = await storefront.cache.match(cacheKey);
+  if (!response) {
+    let cacheControl = (0, import_hydrogen.generateCacheControlHeader)({
+      ...(0, import_hydrogen.CacheShort)()
+    });
+    console.log("fetchWithServerCache", cacheControl);
+    response = await fetch(url, {
+      ...options,
+      headers: {
+        "cache-control": cacheControl,
+        ...options.headers
+      }
+    });
+    waitUntil?.(storefront.cache.put(cacheKey, response.clone()));
+  }
+  return response;
+};
+async function weaverseLoader({
+  request,
+  context: { env, storefront, waitUntil },
+  context,
+  params
+}, components) {
+  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 {};
+  }
+  let config = {
+    projectId,
+    weaverseHost
+  };
+  let fetchBody = {
+    projectId,
+    url: request.url
+  };
+  try {
+    let pageData = await fetchWithServerCache({
+      url: `${weaverseHost}/api/public/project`,
+      options: {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(fetchBody)
+      },
+      storefront,
+      waitUntil
+    }).then((r) => r.json()).catch((err) => {
+      console.error(err);
+      return {};
+    });
+    if (pageData?.items) {
+      let items = pageData.items;
+      pageData.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
+              })
+            };
+          }
+          return item;
+        })
+      );
+    }
+    return {
+      pageData,
+      config,
+      components: {}
+    };
+  } catch (err) {
+    console.error(err);
+    return {};
+  }
+}
+
+// src/index.tsx
 var WeaverseHydrogenRoot = ({
-  configs,
+  components,
   data
 }) => {
-  let weaverse = useWeaverseHydrogen(configs, data);
+  let weaverse = createWeaverseHydrogenContext(data, components);
+  useStudio(weaverse);
   if (!weaverse?.data) {
-    return /* @__PURE__ */ import_react2.default.createElement("div", null, "404");
+    return /* @__PURE__ */ import_react3.default.createElement("div", null, "404");
   }
-  return /* @__PURE__ */ import_react2.default.createElement(import_react3.WeaverseRoot, { context: weaverse });
+  return /* @__PURE__ */ import_react3.default.createElement(import_react4.WeaverseRoot, { context: weaverse });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,
+  fetchWithServerCache,
+  hashKey,
   useStudio,
-  useWeaverseHydrogen,
   weaverseLoader
 });

package/dist/index.mjs

@@ -4,7 +4,6 @@ import { useEffect } from "react";
 var useStudio = (weaverseCore) => {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
-      console.log("useStudio", weaverseCore);
       window.weaverseStudioInitialized = true;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
@@ -22,65 +21,159 @@ var useStudio = (weaverseCore) => {
 
 // src/index.tsx
 import React from "react";
-import { WeaverseRoot, createRootContext } from "@weaverse/react";
+import { WeaverseRoot } from "@weaverse/react";
 
-// src/weaverse-loader.ts
-async function weaverseLoader({ request, context, params }, weaverseConfig) {
-  let fetchBody = {
-    projectId: weaverseConfig.projectId,
-    url: request.url
-  };
-  let response = await fetch(
-    `${weaverseConfig.weaverseHost}/api/public/project`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(fetchBody)
-    }
-  ).then((res) => res.json());
-  return {
-    weaversePageData: response
-  };
-}
-
-// src/index.tsx
-var createHydrogenRootContext = (configs, elements = {}) => {
-  let rootContext = createRootContext(configs);
-  Object.keys(elements).forEach((key) => {
-    rootContext.registerElement(elements[key]);
-  });
-  return rootContext;
-};
-var useWeaverseHydrogen = (weaverseHydrogenConfigs, data) => {
-  let weaversePageData = data?.weaverseData?.weaversePageData;
-  let { components, ...rest } = weaverseHydrogenConfigs;
-  let weaverse = createHydrogenRootContext({
-    ...rest,
-    data: weaversePageData,
-    pageId: weaversePageData?.pageId,
+// src/context.ts
+import { createRootContext } from "@weaverse/react";
+var createWeaverseHydrogenContext = ({
+  weaverseData: { pageData, config } = {
+    pageData: {},
+    config: {}
+  }
+}, components) => {
+  let weaverse = createRootContext({
+    ...config,
+    data: pageData,
+    pageId: pageData?.pageId,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
-  Object.keys(components).forEach((key) => {
-    let component = components[key];
+  Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
-      type: components[key]?.schema?.type || key,
+      type: component?.schema?.type || key,
       Component: component?.default,
       schema: component?.schema,
       defaultCss: component?.css,
       permanentCss: component?.permanentCss
     });
   });
-  useStudio(weaverse);
   return weaverse;
 };
+
+// src/weaverse-loader.ts
+import {
+  CacheShort,
+  generateCacheControlHeader
+} from "@shopify/hydrogen";
+function hashKey(queryKey) {
+  const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
+  let hash = "";
+  for (const key of rawKeys) {
+    if (key != null) {
+      if (typeof key === "object") {
+        if (!!key.body && typeof key.body === "string") {
+          hash += key.body;
+        } else {
+          hash += JSON.stringify(key);
+        }
+      } else {
+        hash += key;
+      }
+    }
+  }
+  return hash;
+}
+var fetchWithServerCache = async ({
+  url,
+  options = {},
+  storefront,
+  waitUntil
+}) => {
+  const cacheUrl = new URL(url);
+  cacheUrl.pathname = "/cache" + cacheUrl.pathname + hashKey([options.body]);
+  const cacheKey = new Request(cacheUrl.toString());
+  let response = await storefront.cache.match(cacheKey);
+  if (!response) {
+    let cacheControl = generateCacheControlHeader({
+      ...CacheShort()
+    });
+    console.log("fetchWithServerCache", cacheControl);
+    response = await fetch(url, {
+      ...options,
+      headers: {
+        "cache-control": cacheControl,
+        ...options.headers
+      }
+    });
+    waitUntil?.(storefront.cache.put(cacheKey, response.clone()));
+  }
+  return response;
+};
+async function weaverseLoader({
+  request,
+  context: { env, storefront, waitUntil },
+  context,
+  params
+}, components) {
+  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 {};
+  }
+  let config = {
+    projectId,
+    weaverseHost
+  };
+  let fetchBody = {
+    projectId,
+    url: request.url
+  };
+  try {
+    let pageData = await fetchWithServerCache({
+      url: `${weaverseHost}/api/public/project`,
+      options: {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(fetchBody)
+      },
+      storefront,
+      waitUntil
+    }).then((r) => r.json()).catch((err) => {
+      console.error(err);
+      return {};
+    });
+    if (pageData?.items) {
+      let items = pageData.items;
+      pageData.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
+              })
+            };
+          }
+          return item;
+        })
+      );
+    }
+    return {
+      pageData,
+      config,
+      components: {}
+    };
+  } catch (err) {
+    console.error(err);
+    return {};
+  }
+}
+
+// src/index.tsx
 var WeaverseHydrogenRoot = ({
-  configs,
+  components,
   data
 }) => {
-  let weaverse = useWeaverseHydrogen(configs, data);
+  let weaverse = createWeaverseHydrogenContext(data, components);
+  useStudio(weaverse);
   if (!weaverse?.data) {
     return /* @__PURE__ */ React.createElement("div", null, "404");
   }
@@ -88,7 +181,8 @@ var WeaverseHydrogenRoot = ({
 };
 export {
   WeaverseHydrogenRoot,
+  fetchWithServerCache,
+  hashKey,
   useStudio,
-  useWeaverseHydrogen,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.24",
+  "version": "1.0.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,8 +32,11 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/react": "1.0.24",
-    "@weaverse/core": "1.0.24",
-    "@shopify/hydrogen": "2023.1.6"
+    "@shopify/hydrogen": "2023.4.0",
+    "@weaverse/core": "1.0.25",
+    "@weaverse/react": "1.0.25"
+  },
+  "devDependencies": {
+    "@shopify/remix-oxygen": "^1.0.5"
   }
 }