@weaverse/hydrogen 1.0.23 → 1.0.25

package/dist/index.d.ts

@@ -1,20 +1,52 @@
-import { Weaverse, WeaverseType, WeaverseElement } from '@weaverse/core';
-import { LoaderArgs } from '@remix-run/server-runtime';
+import { Weaverse } from '@weaverse/core';
+import { LoaderArgs } from '@shopify/remix-oxygen';
 
-type WHFetchConfigs = {
-    weaverseHost?: string;
-    projectId: string;
-    url: URL;
+/**
+ * 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;
 };
-declare let fetchPageData: ({ weaverseHost, projectId, url, }: WHFetchConfigs) => Promise<any>;
+type TODO = any;
+
 declare let useStudio: (weaverseCore: Weaverse) => void;
 
-declare function weaverseLoader({ request, context, params, }: LoaderArgs): Promise<any>;
+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 createHydrogenRootContext: (configs: WeaverseType, elements?: {
-    [key: string]: WeaverseElement;
-}) => Weaverse;
-declare let createWeaverseHydrogenContext: (configs: WeaverseType) => Weaverse;
-declare let WeaverseHydrogenRoot: () => JSX.Element;
+declare let WeaverseHydrogenRoot: ({ components, data, }: {
+    components: WeaverseComponentsType;
+    data: {
+        [key: string]: any;
+        weaverseData: any;
+    };
+}) => JSX.Element;
 
-export { WHFetchConfigs, WeaverseHydrogenRoot, createHydrogenRootContext, createWeaverseHydrogenContext, fetchPageData, useStudio, weaverseLoader };
+export { WeaverseComponentLoaderArgs, WeaverseHydrogenRoot, fetchWithServerCache, hashKey, useStudio, weaverseLoader };

package/dist/index.js

@@ -31,44 +31,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
-  createHydrogenRootContext: () => createHydrogenRootContext,
-  createWeaverseHydrogenContext: () => createWeaverseHydrogenContext,
-  fetchPageData: () => fetchPageData,
+  fetchWithServerCache: () => fetchWithServerCache,
+  hashKey: () => hashKey,
   useStudio: () => useStudio,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/elements/index.ts
-var elements = {};
-var elements_default = elements;
-
-// src/index.tsx
-var import_core2 = require("@weaverse/core");
-
 // src/utils.ts
 var import_core = require("@weaverse/core");
 var import_react = require("react");
-var fetchPageData = async ({
-  weaverseHost = "https://studio.weaverse.io",
-  projectId,
-  url
-}) => {
-  let handle = url.pathname;
-  let isDesignMode = url.searchParams.get("isDesignMode") === "true";
-  let data = await fetch(weaverseHost + "/api/public/project", {
-    method: "POST",
-    body: JSON.stringify({
-      projectId,
-      handle,
-      isDesignMode
-    })
-  }).then((res) => res.json()).catch((e) => {
-    console.error(e);
-    return {};
-  });
-  return { ...data, weaverseHost, isDesignMode };
-};
 var useStudio = (weaverseCore) => {
   (0, import_react.useEffect)(() => {
     if (weaverseCore.isDesignMode && import_core.isIframe && !window.weaverseStudioInitialized) {
@@ -88,48 +60,167 @@ var useStudio = (weaverseCore) => {
 };
 
 // src/index.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
+var import_react4 = require("@weaverse/react");
+
+// 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.entries(components).forEach(([key, component]) => {
+    weaverse.registerElement({
+      type: component?.schema?.type || key,
+      Component: component?.default,
+      schema: component?.schema,
+      defaultCss: component?.css,
+      permanentCss: component?.permanentCss
+    });
+  });
+  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
-}) {
-  return {
-    foo: "bar"
+}, 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 createHydrogenRootContext = (configs, elements2 = {}) => {
-  let rootContext = new import_core2.Weaverse(configs);
-  Object.keys(elements2).forEach((key) => {
-    rootContext.registerElement(elements2[key]);
-  });
-  return rootContext;
-};
-var createWeaverseHydrogenContext = (configs) => {
-  let context = createHydrogenRootContext(configs);
-  Object.keys(elements_default).forEach((key) => {
-    context.registerElement(elements_default[key]);
-  });
-  return context;
-};
-var WeaverseHydrogenRoot = () => {
-  let weaverse = createHydrogenRootContext({
-    isDesignMode: true,
-    platformType: "shopify-hydrogen"
-  });
+var WeaverseHydrogenRoot = ({
+  components,
+  data
+}) => {
+  let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse);
-  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
+  if (!weaverse?.data) {
+    return /* @__PURE__ */ import_react3.default.createElement("div", null, "404");
+  }
+  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,
-  createHydrogenRootContext,
-  createWeaverseHydrogenContext,
-  fetchPageData,
+  fetchWithServerCache,
+  hashKey,
   useStudio,
   weaverseLoader
 });

package/dist/index.mjs

@@ -1,33 +1,6 @@
-// src/elements/index.ts
-var elements = {};
-var elements_default = elements;
-
-// src/index.tsx
-import { Weaverse } from "@weaverse/core";
-
 // src/utils.ts
 import { isIframe, loadScript } from "@weaverse/core";
 import { useEffect } from "react";
-var fetchPageData = async ({
-  weaverseHost = "https://studio.weaverse.io",
-  projectId,
-  url
-}) => {
-  let handle = url.pathname;
-  let isDesignMode = url.searchParams.get("isDesignMode") === "true";
-  let data = await fetch(weaverseHost + "/api/public/project", {
-    method: "POST",
-    body: JSON.stringify({
-      projectId,
-      handle,
-      isDesignMode
-    })
-  }).then((res) => res.json()).catch((e) => {
-    console.error(e);
-    return {};
-  });
-  return { ...data, weaverseHost, isDesignMode };
-};
 var useStudio = (weaverseCore) => {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
@@ -48,46 +21,168 @@ var useStudio = (weaverseCore) => {
 
 // src/index.tsx
 import React from "react";
+import { WeaverseRoot } from "@weaverse/react";
+
+// 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.entries(components).forEach(([key, component]) => {
+    weaverse.registerElement({
+      type: component?.schema?.type || key,
+      Component: component?.default,
+      schema: component?.schema,
+      defaultCss: component?.css,
+      permanentCss: component?.permanentCss
+    });
+  });
+  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
-}) {
-  return {
-    foo: "bar"
+}, 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 createHydrogenRootContext = (configs, elements2 = {}) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(elements2).forEach((key) => {
-    rootContext.registerElement(elements2[key]);
-  });
-  return rootContext;
-};
-var createWeaverseHydrogenContext = (configs) => {
-  let context = createHydrogenRootContext(configs);
-  Object.keys(elements_default).forEach((key) => {
-    context.registerElement(elements_default[key]);
-  });
-  return context;
-};
-var WeaverseHydrogenRoot = () => {
-  let weaverse = createHydrogenRootContext({
-    isDesignMode: true,
-    platformType: "shopify-hydrogen"
-  });
+var WeaverseHydrogenRoot = ({
+  components,
+  data
+}) => {
+  let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
+  if (!weaverse?.data) {
+    return /* @__PURE__ */ React.createElement("div", null, "404");
+  }
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 };
 export {
   WeaverseHydrogenRoot,
-  createHydrogenRootContext,
-  createWeaverseHydrogenContext,
-  fetchPageData,
+  fetchWithServerCache,
+  hashKey,
   useStudio,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.23",
+  "version": "1.0.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,8 +15,8 @@
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external react @shopify/hydrogen",
-    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external react @shopify/hydrogen",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external react",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external react",
     "clean": "rimraf dist",
     "prepublish": "npm run build"
   },
@@ -32,7 +32,11 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "1.0.23",
-    "@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"
   }
 }