@weaverse/hydrogen 1.1.17 → 1.1.20

package/dist/index.mjs

@@ -1,13 +1,336 @@
-// src/index.tsx
-import { Await, useLoaderData } from "@remix-run/react";
+// src/index.ts
+export * from "@weaverse/react";
+
+// src/client.ts
+import "@shopify/hydrogen";
+
+// package.json
+var package_default = {
+  version: "1.1.20",
+  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.20",
+    "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
+import { useLoaderData } from "@remix-run/react";
+import { isBrowser } from "@weaverse/react";
+import { useEffect, useSyncExternalStore } from "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 (isBrowser) {
+  window.__weaverseThemeSettingsStore = themeSettingsStore;
+}
+function useThemeSettings() {
+  let settings2 = useSyncExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  let { weaverseTheme } = useLoaderData();
+  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
+import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
+import { createContentSecurityPolicy as hydrogen_createContentSecurityPolicy } from "@shopify/hydrogen";
+function getSelectedProductOptions(request) {
+  let options = hydrogen_getSelectedProductOptions(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+function createContentSecurityPolicy(request, directives) {
+  let weaverseDirectives = getWeaverseCsp(request);
+  return hydrogen_createContentSecurityPolicy({
+    ...directives,
+    ...weaverseDirectives
+  });
+}
+
+// src/WeaverseHydrogenRoot.tsx
+import { Await, useLoaderData as useLoaderData2 } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
 import React, { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
-import { Weaverse, isBrowser } from "@weaverse/react";
+import { Weaverse, isBrowser as isBrowser2 } from "@weaverse/react";
 function createCachedWeaverseInstance(init) {
-  if (isBrowser) {
+  if (isBrowser2) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
@@ -44,15 +367,21 @@ function createWeaverseInstance(weaverseData, components) {
 }
 
 // src/hooks/use-studio.ts
-import { useNavigate, useRevalidator } from "@remix-run/react";
+import {
+  useNavigate,
+  useRevalidator,
+  useRouteLoaderData
+} from "@remix-run/react";
 import { isIframe, loadScript } from "@weaverse/react";
-import { useEffect } from "react";
-function useStudio(weaverse, countries, schema, publicEnv) {
+import { useEffect as useEffect2 } from "react";
+function useStudio(weaverse) {
+  let { weaverseTheme } = useRouteLoaderData("root");
   let navigate = useNavigate();
   let { revalidate } = useRevalidator();
+  let { countries, schema, publicEnv } = weaverseTheme || {};
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
   let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  useEffect(() => {
+  useEffect2(() => {
     if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -65,211 +394,55 @@ function useStudio(weaverse, countries, schema, publicEnv) {
       if (window.weaverseStudio) {
         window.weaverseStudio.init(weaverse);
       } else {
-        loadScript(
-          `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`
-        );
+        let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
+        loadScript(studioSrc);
       }
     }
   }, [weaverse]);
 }
 
-// src/index.tsx
-export * from "@weaverse/react";
-
-// src/fetch.ts
-import { createWithCache } from "@shopify/hydrogen";
-async function fetchWithServerCache(params) {
-  let { url, options = {}, context } = params;
-  let { storefront } = context;
-  let withCache = 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
-import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
-function getSelectedProductOptions(request) {
-  let options = hydrogen_getSelectedProductOptions(request);
-  return options.filter(
-    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
-  );
-}
-
-// src/hooks/use-theme-settings.ts
-import { useWeaverse } from "@weaverse/react";
-function useThemeSettings() {
-  let weaverse = useWeaverse();
-  let settings = weaverse?.internal?.project?.config?.theme;
-  return settings;
-}
-
-// src/index.tsx
+// src/WeaverseHydrogenRoot.tsx
 function WeaverseHydrogenRoot({
   errorComponent: ErrorComponent,
-  ...themeConfigs
+  components
 }) {
-  let data = useLoaderData();
-  let weaverseData = data?.weaverseData;
-  if (weaverseData) {
-    if (weaverseData instanceof Promise) {
-      return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: weaverseData }, (resolvedData) => {
-        return /* @__PURE__ */ React.createElement(
-          RenderWeaverseRoot,
-          {
-            weaverseData: resolvedData,
-            ...themeConfigs
-          }
-        );
-      })));
+  let loaderData = useLoaderData2();
+  let data = loaderData?.weaverseData;
+  if (data) {
+    if (data instanceof Promise) {
+      return /* @__PURE__ */ React.createElement(
+        ErrorBoundary,
+        {
+          fallbackRender: ErrorComponent || (() => /* @__PURE__ */ React.createElement(React.Fragment, null, "An error occurred!"))
+        },
+        /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
+        }))
+      );
     }
-    return /* @__PURE__ */ React.createElement(RenderWeaverseRoot, { weaverseData, ...themeConfigs });
+    return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
   }
-  return /* @__PURE__ */ React.createElement(
+  return ErrorComponent ? /* @__PURE__ */ React.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
     }
-  );
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, "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);
+function RenderRoot(props) {
+  let { data, components } = props;
+  let weaverse = createWeaverseInstance(data, components);
+  useStudio(weaverse);
   return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 }
 export {
+  WeaverseClient,
   WeaverseHydrogenRoot,
-  fetchWithServerCache,
+  createContentSecurityPolicy,
+  createWeaverseClient,
   getRequestQueries,
   getSelectedProductOptions,
-  useThemeSettings,
-  weaverseLoader
+  getWeaverseConfigs,
+  getWeaverseCsp,
+  useThemeSettings
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.17",
+  "version": "1.1.20",
   "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 @remix-run/react,@shopify/hydrogen",
-    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external @remix-run/react,@shopify/hydrogen",
+    "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"
   },
@@ -32,9 +32,9 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@remix-run/react": "1.19.3",
+    "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.7",
-    "@weaverse/react": "1.1.17",
+    "@weaverse/react": "1.1.20",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {