@weaverse/hydrogen 1.1.16 → 1.1.19

package/dist/index.js

@@ -28,26 +28,352 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  WeaverseClient: () => WeaverseClient,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
-  fetchWithServerCache: () => fetchWithServerCache,
+  createContentSecurityPolicy: () => createContentSecurityPolicy,
+  createWeaverseClient: () => createWeaverseClient,
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
-  useThemeSettings: () => useThemeSettings,
-  weaverseLoader: () => weaverseLoader
+  getWeaverseConfigs: () => getWeaverseConfigs,
+  getWeaverseCsp: () => getWeaverseCsp,
+  useThemeSettings: () => useThemeSettings
 });
 module.exports = __toCommonJS(src_exports);
-var import_react6 = require("@remix-run/react");
-var import_react7 = require("@weaverse/react");
-var import_react8 = __toESM(require("react"));
+__reExport(src_exports, require("@weaverse/react"), module.exports);
+
+// src/client.ts
+var import_hydrogen = require("@shopify/hydrogen");
+
+// package.json
+var package_default = {
+  version: "1.1.19",
+  license: "MIT",
+  main: "dist/index.js",
+  typings: "dist/index.d.ts",
+  module: "dist/index.mjs",
+  publishConfig: {
+    access: "public"
+  },
+  files: [
+    "dist/*"
+  ],
+  engines: {
+    node: ">=10"
+  },
+  scripts: {
+    start: "npm run dev",
+    dev: "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external @remix-run/react,@shopify/hydrogen",
+    build: "tsup src/index.ts --format esm,cjs --dts --outDir dist --external @remix-run/react,@shopify/hydrogen",
+    clean: "rimraf dist",
+    prepublish: "npm run build"
+  },
+  peerDependencies: {
+    react: ">=18",
+    "react-dom": ">=18"
+  },
+  prettier: {
+    printWidth: 80,
+    semi: false,
+    singleQuote: true
+  },
+  name: "@weaverse/hydrogen",
+  author: "Weaverse Team",
+  dependencies: {
+    "@remix-run/react": "1.19.1",
+    "@shopify/hydrogen": "2023.7.7",
+    "@weaverse/react": "1.1.19",
+    "react-error-boundary": "^4.0.11"
+  },
+  devDependencies: {
+    "@shopify/remix-oxygen": "^1.1.4"
+  }
+};
+
+// src/utils.ts
+function getRequestQueries(request) {
+  let url = new URL(request.url);
+  return Array.from(url.searchParams.entries()).reduce(
+    (q, [k, v]) => {
+      q[k] = v === "true" ? true : v === "false" ? false : v;
+      return q;
+    },
+    {}
+  );
+}
+function getWeaverseConfigs(request, env) {
+  let queries = getRequestQueries(request);
+  let {
+    WEAVERSE_PROJECT_ID,
+    WEAVERSE_HOST,
+    PUBLIC_STORE_DOMAIN,
+    PUBLIC_STOREFRONT_API_TOKEN
+  } = env || {};
+  let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
+  return {
+    projectId: weaverseProjectId || WEAVERSE_PROJECT_ID || "",
+    weaverseHost: weaverseHost || WEAVERSE_HOST || "https://weaverse.io",
+    weaverseVersion: weaverseVersion || "",
+    isDesignMode: isDesignMode || false,
+    publicEnv: {
+      PUBLIC_STORE_DOMAIN,
+      PUBLIC_STOREFRONT_API_TOKEN
+    }
+  };
+}
+function getWeaverseCsp(request) {
+  let url = new URL(request.url);
+  let weaverseHost = url.searchParams.get("weaverseHost");
+  let weaverseHosts = ["https://*.weaverse.io"];
+  if (weaverseHost) {
+    weaverseHosts.push(weaverseHost);
+  }
+  return {
+    frameAncestors: weaverseHosts,
+    defaultSrc: [
+      "'self'",
+      "https://cdn.shopify.com",
+      "https://shopify.com",
+      "https://*.youtube.com",
+      ...weaverseHosts
+    ],
+    styleSrc: [
+      "'self'",
+      "'unsafe-inline'",
+      "https://cdn.shopify.com",
+      ...weaverseHosts
+    ]
+  };
+}
+
+// src/client.ts
+var WeaverseClient = class {
+  constructor(args) {
+    this.API = "api/public/project";
+    this.clientVersion = package_default.version;
+    this.fetchWithCache = (url, options) => {
+      let cacheKey = [url, options.body];
+      let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
+      let res = this.withCache(cacheKey, strategy, async () => {
+        let response = await fetch(url, reqInit);
+        if (!response.ok) {
+          throw new Error("Something went wrong. Skipping cache.");
+        }
+        return await response.json();
+      });
+      return res;
+    };
+    this.loadThemeSettings = async (strategy) => {
+      let { API, configs } = this;
+      let { weaverseHost, projectId } = configs;
+      let res = await this.fetchWithCache(
+        `${weaverseHost}/${API}/${projectId}/configs`,
+        { strategy }
+      );
+      let data = null;
+      if (res.ok) {
+        data = res.payload;
+        if (this.configs.isDesignMode) {
+          data = {
+            ...data,
+            schema: this.themeSchema,
+            countries: this.countries,
+            publicEnv: this.configs.publicEnv
+          };
+        }
+      }
+      return data;
+    };
+    this.loadPage = async (args, configs = {}) => {
+      return new Promise(async (resolve, reject) => {
+        try {
+          let { request, params } = args;
+          let { strategy, ...pageLoadParams } = configs;
+          let body = {
+            ...this.basePageRequestBody,
+            params: pageLoadParams,
+            url: request.url
+          };
+          let reqInit = {
+            method: "POST",
+            body: JSON.stringify(body)
+          };
+          let url = `${this.configs.weaverseHost}/api/public/project`;
+          let payload;
+          if (this.configs.isDesignMode) {
+            payload = await fetch(url, reqInit).then((res) => res.json());
+          } else {
+            payload = await this.fetchWithCache(url, {
+              ...reqInit,
+              strategy
+            });
+          }
+          let { page, project, pageAssignment } = payload;
+          if (!page || !project || !pageAssignment) {
+            return reject(
+              new Error(
+                // @ts-ignore
+                payload?.error || "Invalid Weaverse project payload!"
+              )
+            );
+          }
+          if (page?.items) {
+            let items = page.items;
+            page.items = await Promise.all(
+              items.map((item) => this.execComponentLoader(item, args))
+            );
+          }
+          let data = {
+            page,
+            project,
+            pageAssignment,
+            configs: {
+              ...this.basePageConfigs,
+              requestInfo: {
+                params,
+                i18n: this.storefront.i18n,
+                queries: getRequestQueries(request),
+                pathname: new URL(request.url).pathname,
+                search: new URL(request.url).search
+              }
+            }
+          };
+          return resolve(data);
+        } catch (err) {
+          console.log(`\u274C [Weaverse page]`, err);
+          reject(err);
+        }
+      });
+    };
+    this.execComponentLoader = async (item, args) => {
+      let schema = this.components.find(
+        ({ schema: schema2 }) => schema2?.type === item.type
+      );
+      let { loader } = schema || {};
+      if (loader && typeof loader === "function") {
+        try {
+          return {
+            ...item,
+            loaderData: await loader({
+              itemData: item,
+              ...args
+            })
+          };
+        } catch (err) {
+          console.log(`\u274C [Weaverse item loader]`, item.id, err);
+          return item;
+        }
+      }
+      return item;
+    };
+    let { configs, storefront, components, countries, withCache, themeSchema } = args;
+    this.storefront = storefront;
+    this.components = components;
+    this.countries = countries;
+    this.themeSchema = themeSchema;
+    this.configs = configs;
+    this.withCache = withCache;
+    this.basePageConfigs = {
+      projectId: configs.projectId,
+      weaverseHost: configs.weaverseHost,
+      weaverseVersion: configs.weaverseVersion,
+      isDesignMode: configs.isDesignMode
+    };
+    this.basePageRequestBody = {
+      countries,
+      isDesignMode: this.configs.isDesignMode,
+      i18n: storefront.i18n,
+      projectId: this.configs.projectId
+    };
+  }
+};
+function createWeaverseClient(args) {
+  return new WeaverseClient(args);
+}
+
+// src/hooks/use-theme-settings.ts
+var import_react = require("@remix-run/react");
+var import_react2 = require("@weaverse/react");
+var import_react3 = require("react");
+var settings = null;
+var listeners = [];
+var themeSettingsStore = {
+  updateThemeSettings(newSettings) {
+    settings = { ...settings, ...newSettings };
+    emitChange();
+  },
+  subscribe(listener) {
+    listeners = [...listeners, listener];
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  },
+  getSnapshot() {
+    return settings;
+  },
+  getServerSnapshot() {
+    return settings;
+  }
+};
+function emitChange() {
+  for (let listener of listeners) {
+    listener();
+  }
+}
+if (import_react2.isBrowser) {
+  window.__weaverseThemeSettingsStore = themeSettingsStore;
+}
+function useThemeSettings() {
+  let settings2 = (0, import_react3.useSyncExternalStore)(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  let { weaverseTheme } = (0, import_react.useLoaderData)();
+  (0, import_react3.useEffect)(() => {
+    if (weaverseTheme) {
+      let settings3 = weaverseTheme.theme;
+      if (settings3) {
+        themeSettingsStore.updateThemeSettings(settings3);
+      }
+    } else {
+      console.warn(
+        `'weaverseTheme' should be returned from root loader in order to get global settings from 'useThemeSettings'.`
+      );
+    }
+  }, [weaverseTheme]);
+  return settings2;
+}
+
+// src/wrappers.ts
+var import_hydrogen2 = require("@shopify/hydrogen");
+var import_hydrogen3 = require("@shopify/hydrogen");
+function getSelectedProductOptions(request) {
+  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+function createContentSecurityPolicy(request, directives) {
+  let weaverseDirectives = getWeaverseCsp(request);
+  return (0, import_hydrogen3.createContentSecurityPolicy)({
+    ...directives,
+    ...weaverseDirectives
+  });
+}
+
+// src/WeaverseHydrogenRoot.tsx
+var import_react8 = require("@remix-run/react");
+var import_react9 = require("@weaverse/react");
+var import_react10 = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
-var import_react = require("@weaverse/react");
+var import_react4 = require("@weaverse/react");
 function createCachedWeaverseInstance(init) {
-  if (import_react.isBrowser) {
+  if (import_react4.isBrowser) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
@@ -55,13 +381,13 @@ function createCachedWeaverseInstance(init) {
       return pathname === init.requestInfo.pathname && search === init.requestInfo.search && __cachedId === init.data.__cachedId;
     });
     if (!weaverse) {
-      weaverse = new import_react.Weaverse(init);
+      weaverse = new import_react4.Weaverse(init);
       window.__weaverses.push(weaverse);
       console.log("\u{1F4BF} Weaverse", weaverse);
     }
     return weaverse;
   }
-  return new import_react.Weaverse(init);
+  return new import_react4.Weaverse(init);
 }
 function createWeaverseInstance(weaverseData, components) {
   let { page, configs, project, pageAssignment } = weaverseData || {};
@@ -84,15 +410,17 @@ function createWeaverseInstance(weaverseData, components) {
 }
 
 // src/hooks/use-studio.ts
-var import_react2 = require("@remix-run/react");
-var import_react3 = require("@weaverse/react");
-var import_react4 = require("react");
-function useStudio(weaverse, countries, schema, publicEnv) {
-  let navigate = (0, import_react2.useNavigate)();
-  let { revalidate } = (0, import_react2.useRevalidator)();
+var import_react5 = require("@remix-run/react");
+var import_react6 = require("@weaverse/react");
+var import_react7 = require("react");
+function useStudio(weaverse) {
+  let { weaverseTheme } = (0, import_react5.useRouteLoaderData)("root");
+  let navigate = (0, import_react5.useNavigate)();
+  let { revalidate } = (0, import_react5.useRevalidator)();
+  let { countries, schema, publicEnv } = weaverseTheme || {};
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = import_react3.isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  (0, import_react4.useEffect)(() => {
+  let isStudio = import_react6.isIframe && isDesignMode && weaverseHost && weaverseVersion;
+  (0, import_react7.useEffect)(() => {
     if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -105,213 +433,51 @@ function useStudio(weaverse, countries, schema, publicEnv) {
       if (window.weaverseStudio) {
         window.weaverseStudio.init(weaverse);
       } else {
-        (0, import_react3.loadScript)(
-          `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`
-        );
+        let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
+        (0, import_react6.loadScript)(studioSrc);
       }
     }
   }, [weaverse]);
 }
 
-// src/index.tsx
-__reExport(src_exports, require("@weaverse/react"), module.exports);
-
-// src/fetch.ts
-var import_hydrogen = require("@shopify/hydrogen");
-async function fetchWithServerCache(params) {
-  let { url, options = {}, context } = params;
-  let { storefront } = context;
-  let withCache = (0, import_hydrogen.createWithCache)(storefront);
-  let cacheKey = [url, options.body];
-  let data = await withCache(cacheKey, storefront.CacheShort(), async () => {
-    let response = await fetch(url, options);
-    if (!response.ok)
-      throw new Error("Something went wrong. Skipping cache.");
-    return await response.json();
-  });
-  return data;
-}
-
-// src/utils.ts
-function getRequestQueries(request) {
-  let url = new URL(request.url);
-  return Array.from(url.searchParams.entries()).reduce(
-    (q, [k, v]) => {
-      q[k] = v === "true" ? true : v === "false" ? false : v;
-      return q;
-    },
-    {}
-  );
-}
-
-// src/loader.ts
-async function weaverseLoader(args, components, countries, loaderConfigs) {
-  return new Promise(async (resolve, reject) => {
-    try {
-      let { request, context, params } = args;
-      let queries = getRequestQueries(request);
-      let {
-        WEAVERSE_PROJECT_ID,
-        WEAVERSE_HOST,
-        PUBLIC_STORE_DOMAIN,
-        PUBLIC_STOREFRONT_API_TOKEN
-      } = context?.env || {};
-      let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
-      let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
-      weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
-      if (!projectId) {
-        return reject(
-          new Error(
-            `Missing Weaverse project's id. Try adding WEAVERSE_PROJECT_ID to your .env file then restart the server.`
-          )
-        );
-      }
-      let i18n = context?.storefront?.i18n;
-      let reqBody = {
-        isDesignMode,
-        i18n,
-        countries,
-        projectId,
-        loaderConfigs,
-        url: request.url
-      };
-      let url = `${weaverseHost}/api/public/project`;
-      let payload;
-      if (isDesignMode) {
-        payload = await fetch(url, {
-          method: "POST",
-          body: JSON.stringify(reqBody)
-        }).then((res) => res.json());
-      } else {
-        payload = await fetchWithServerCache({
-          url,
-          options: { method: "POST", body: JSON.stringify(reqBody) },
-          context
-        });
-      }
-      let { page, project, pageAssignment } = payload;
-      if (!page || !project || !pageAssignment) {
-        return reject(
-          new Error(
-            // @ts-ignore
-            payload?.error || "Invalid Weaverse project payload!"
-          )
-        );
-      }
-      let configs = {
-        projectId,
-        weaverseHost,
-        weaverseVersion,
-        isDesignMode,
-        requestInfo: {
-          i18n,
-          params,
-          queries,
-          pathname: new URL(request.url).pathname,
-          search: new URL(request.url).search
-        }
-      };
-      if (page?.items) {
-        let items = page.items;
-        page.items = await withLoaderData(items, components, configs, args);
-      }
-      if (isDesignMode) {
-        configs.publicEnv = {
-          PUBLIC_STORE_DOMAIN,
-          PUBLIC_STOREFRONT_API_TOKEN
-        };
-      }
-      return resolve({ page, configs, project, pageAssignment });
-    } catch (err) {
-      console.log(`\u274C Error fetching project data: ${err?.toString()}`);
-      reject(err);
-    }
-  });
-}
-async function withLoaderData(items, components, configs, args) {
-  return await Promise.all(
-    items.map(async (itemData) => {
-      let type = itemData.type;
-      let { loader } = components.find(({ schema }) => schema?.type === type) || {};
-      if (loader && typeof loader === "function") {
-        try {
-          return {
-            ...itemData,
-            loaderData: await loader({
-              itemData,
-              configs,
-              ...args
-            })
-          };
-        } catch (err) {
-          console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
-          return itemData;
-        }
-      }
-      return itemData;
-    })
-  );
-}
-
-// src/hydrogen-wrappers.ts
-var import_hydrogen2 = require("@shopify/hydrogen");
-function getSelectedProductOptions(request) {
-  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
-  return options.filter(
-    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
-  );
-}
-
-// src/hooks/use-theme-settings.ts
-var import_react5 = require("@weaverse/react");
-function useThemeSettings() {
-  let weaverse = (0, import_react5.useWeaverse)();
-  let settings = weaverse?.internal?.project?.config?.theme;
-  return settings;
-}
-
-// src/index.tsx
+// src/WeaverseHydrogenRoot.tsx
 function WeaverseHydrogenRoot({
   errorComponent: ErrorComponent,
-  ...themeConfigs
+  components
 }) {
-  let data = (0, import_react6.useLoaderData)();
-  let weaverseData = data?.weaverseData;
-  if (weaverseData) {
-    if (weaverseData instanceof Promise) {
-      return /* @__PURE__ */ import_react8.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react8.default.createElement(import_react8.Suspense, null, /* @__PURE__ */ import_react8.default.createElement(import_react6.Await, { resolve: weaverseData }, (resolvedData) => {
-        return /* @__PURE__ */ import_react8.default.createElement(
-          RenderWeaverseRoot,
-          {
-            weaverseData: resolvedData,
-            ...themeConfigs
-          }
-        );
+  let loaderData = (0, import_react8.useLoaderData)();
+  let data = loaderData?.weaverseData;
+  if (data) {
+    if (data instanceof Promise) {
+      return /* @__PURE__ */ import_react10.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react10.default.createElement(import_react10.Suspense, null, /* @__PURE__ */ import_react10.default.createElement(import_react8.Await, { resolve: data }, (resolvedData) => {
+        return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data: resolvedData, components });
       })));
     }
-    return /* @__PURE__ */ import_react8.default.createElement(RenderWeaverseRoot, { weaverseData, ...themeConfigs });
+    return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data, components });
   }
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
     }
   );
 }
-function RenderWeaverseRoot(props) {
-  let { weaverseData, components, countries, themeSchema } = props;
-  let weaverse = createWeaverseInstance(weaverseData, components);
-  let { publicEnv } = weaverseData.configs;
-  useStudio(weaverse, countries, themeSchema, publicEnv);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react7.WeaverseRoot, { context: weaverse });
+function RenderRoot(props) {
+  let { data, components } = props;
+  let weaverse = createWeaverseInstance(data, components);
+  useStudio(weaverse);
+  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  WeaverseClient,
   WeaverseHydrogenRoot,
-  fetchWithServerCache,
+  createContentSecurityPolicy,
+  createWeaverseClient,
   getRequestQueries,
   getSelectedProductOptions,
+  getWeaverseConfigs,
+  getWeaverseCsp,
   useThemeSettings,
-  weaverseLoader,
   ...require("@weaverse/react")
 });