@weaverse/hydrogen 1.1.3 → 1.1.5

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
 import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
+import { LanguageCode, CountryCode, CurrencyCode } from '@shopify/hydrogen/storefront-api-types';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare let STORE_PAGES: {
@@ -21,6 +22,13 @@ declare let STORE_PAGES: {
     CUSTOM: string;
 };
 
+type Locale = {
+    language: LanguageCode;
+    country: CountryCode;
+    label: string;
+    currency: CurrencyCode;
+};
+type Localizations = Record<string, Locale>;
 type TODO = any;
 declare module '@shopify/remix-oxygen' {
     interface AppLoadContext {
@@ -29,6 +37,7 @@ declare module '@shopify/remix-oxygen' {
         storefront: TODO;
         env: TODO;
         cart: TODO;
+        withCache?: TODO;
     }
 }
 type WeaverseLoaderArgs = LoaderArgs & {
@@ -70,11 +79,7 @@ interface HydrogenComponentProps<L = any> extends WeaverseElement {
     loaderData?: L;
     children?: React.JSX.Element[];
 }
-type I18nLocale = {
-    country: string;
-    currency: string;
-    language: string;
-    label: string;
+type I18nLocale = Locale & {
     pathPrefix: string;
 };
 type WeaverseLoaderRequestInfo = {
@@ -108,8 +113,12 @@ type HydrogenProjectType = {
     config: HydrogenProjectConfig;
     [key: string]: any;
 };
+type WeaverseThemeConfigs = {
+    schema: HydrogenThemeSchema;
+    countries: Localizations;
+};
 type WeaverseInternal = {
-    themeSchema: HydrogenThemeSchema;
+    themeConfigs: WeaverseThemeConfigs;
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
@@ -166,17 +175,8 @@ type HydrogenPageData = {
 type RelativeRoutingType = 'route' | 'path';
 type To = string | Partial<Path>;
 type Path = {
-    /**
-     * A URL pathname, beginning with a /.
-     */
     pathname: string;
-    /**
-     * A URL search string, beginning with a ?.
-     */
     search: string;
-    /**
-     * A URL fragment identifier, beginning with a #.
-     */
     hash: string;
 };
 type NavigateOptions = {
@@ -188,6 +188,8 @@ type NavigateOptions = {
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
+    countries: Localizations;
+    themeSchema: HydrogenThemeSchema;
     errorComponent: React.FC<{
         error: {
             message: string;
@@ -213,11 +215,17 @@ type WeaverseLoaderConfigs = {
     locale?: string;
     handle?: string;
 };
+type FetchProjectRequestBody = {
+    projectId: string;
+    url: string;
+    countries: Localizations;
+    i18n?: I18nLocale;
+    loaderConfigs?: WeaverseLoaderConfigs;
+};
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseHydrogenThemeSchema: HydrogenThemeSchema;
     }
 }
 
@@ -231,17 +239,14 @@ type FetchWithServerCacheParams = {
  */
 declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promise<any>;
 
-declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], countries: Localizations, loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
 
-declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
 
-type StudioProps = {
-    themeSchema: HydrogenThemeSchema;
-};
-declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
 
-declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: WeaverseHydrogenRootProps): React.JSX.Element;
+declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, ...themeConfigs }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenStudio, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, getSelectedProductOptions, useThemeSettings, weaverseLoader };
+export { FetchProjectRequestBody, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, WeaverseThemeConfigs, fetchWithServerCache, getRequestQueries, getSelectedProductOptions, useThemeSettings, weaverseLoader };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
 import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
+import { LanguageCode, CountryCode, CurrencyCode } from '@shopify/hydrogen/storefront-api-types';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
 declare let STORE_PAGES: {
@@ -21,6 +22,13 @@ declare let STORE_PAGES: {
     CUSTOM: string;
 };
 
+type Locale = {
+    language: LanguageCode;
+    country: CountryCode;
+    label: string;
+    currency: CurrencyCode;
+};
+type Localizations = Record<string, Locale>;
 type TODO = any;
 declare module '@shopify/remix-oxygen' {
     interface AppLoadContext {
@@ -29,6 +37,7 @@ declare module '@shopify/remix-oxygen' {
         storefront: TODO;
         env: TODO;
         cart: TODO;
+        withCache?: TODO;
     }
 }
 type WeaverseLoaderArgs = LoaderArgs & {
@@ -70,11 +79,7 @@ interface HydrogenComponentProps<L = any> extends WeaverseElement {
     loaderData?: L;
     children?: React.JSX.Element[];
 }
-type I18nLocale = {
-    country: string;
-    currency: string;
-    language: string;
-    label: string;
+type I18nLocale = Locale & {
     pathPrefix: string;
 };
 type WeaverseLoaderRequestInfo = {
@@ -108,8 +113,12 @@ type HydrogenProjectType = {
     config: HydrogenProjectConfig;
     [key: string]: any;
 };
+type WeaverseThemeConfigs = {
+    schema: HydrogenThemeSchema;
+    countries: Localizations;
+};
 type WeaverseInternal = {
-    themeSchema: HydrogenThemeSchema;
+    themeConfigs: WeaverseThemeConfigs;
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
@@ -166,17 +175,8 @@ type HydrogenPageData = {
 type RelativeRoutingType = 'route' | 'path';
 type To = string | Partial<Path>;
 type Path = {
-    /**
-     * A URL pathname, beginning with a /.
-     */
     pathname: string;
-    /**
-     * A URL search string, beginning with a ?.
-     */
     search: string;
-    /**
-     * A URL fragment identifier, beginning with a #.
-     */
     hash: string;
 };
 type NavigateOptions = {
@@ -188,6 +188,8 @@ type NavigateOptions = {
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
+    countries: Localizations;
+    themeSchema: HydrogenThemeSchema;
     errorComponent: React.FC<{
         error: {
             message: string;
@@ -213,11 +215,17 @@ type WeaverseLoaderConfigs = {
     locale?: string;
     handle?: string;
 };
+type FetchProjectRequestBody = {
+    projectId: string;
+    url: string;
+    countries: Localizations;
+    i18n?: I18nLocale;
+    loaderConfigs?: WeaverseLoaderConfigs;
+};
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseHydrogenThemeSchema: HydrogenThemeSchema;
     }
 }
 
@@ -231,17 +239,14 @@ type FetchWithServerCacheParams = {
  */
 declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promise<any>;
 
-declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
+declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], countries: Localizations, loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
 
-declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
 
-type StudioProps = {
-    themeSchema: HydrogenThemeSchema;
-};
-declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
 
-declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: WeaverseHydrogenRootProps): React.JSX.Element;
+declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, ...themeConfigs }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-export { HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenStudio, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, InspectorGroup, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, fetchWithServerCache, getSelectedProductOptions, useThemeSettings, weaverseLoader };
+export { FetchProjectRequestBody, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, NavigateFunction, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseStorefrontData, WeaverseThemeConfigs, fetchWithServerCache, getRequestQueries, getSelectedProductOptions, useThemeSettings, weaverseLoader };

package/dist/index.js

@@ -31,17 +31,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
-  HydrogenStudio: () => HydrogenStudio,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   fetchWithServerCache: () => fetchWithServerCache,
+  getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   useThemeSettings: () => useThemeSettings,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
-var import_react8 = require("@remix-run/react");
-var import_react9 = require("@weaverse/react");
-var import_react10 = __toESM(require("react"));
+var import_react6 = require("@remix-run/react");
+var import_react7 = require("@weaverse/react");
+var import_react8 = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
@@ -70,10 +70,9 @@ function createWeaverseInstance(weaverseData, components) {
     ...configs,
     data: page || {},
     pageId: page?.id,
-    platformType: "shopify-hydrogen"
+    platformType: "shopify-hydrogen",
+    internal: { project, pageAssignment }
   });
-  weaverse.internal.project = project;
-  weaverse.internal.pageAssignment = pageAssignment;
   components.forEach((comp) => {
     weaverse.registerElement({
       type: comp?.schema?.type,
@@ -88,19 +87,26 @@ function createWeaverseInstance(weaverseData, components) {
 var import_react2 = require("@remix-run/react");
 var import_react3 = require("@weaverse/react");
 var import_react4 = require("react");
-function useStudio(weaverse) {
+function useStudio(weaverse, countries, schema) {
   let navigate = (0, import_react2.useNavigate)();
   let revalidator = (0, import_react2.useRevalidator)();
+  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
+  let isStudio = import_react3.isIframe && isDesignMode && weaverseHost && weaverseVersion;
   (0, import_react4.useEffect)(() => {
-    if (import_react3.isIframe && weaverse.isDesignMode) {
+    if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
         navigate,
-        revalidator
+        revalidator,
+        themeConfigs: { schema, countries }
       };
       window.__weaverse = weaverse;
       if (window.weaverseStudio) {
         window.weaverseStudio.init(weaverse);
+      } else {
+        (0, import_react3.loadScript)(
+          `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`
+        );
       }
     }
   }, [weaverse]);
@@ -111,26 +117,21 @@ __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 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;
-}
 function getRequestQueries(request) {
   let url = new URL(request.url);
   return Array.from(url.searchParams.entries()).reduce(
@@ -142,65 +143,14 @@ function getRequestQueries(request) {
   );
 }
 
-// src/fetch.ts
-var cacheControl = (0, import_hydrogen.generateCacheControlHeader)((0, import_hydrogen.CacheShort)());
-async function fetchWithServerCache(params) {
-  let { url, options = {}, context } = params;
-  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]);
-  let cacheKey = new Request(cacheUrl.toString());
-  let response = await storefront.cache.match(cacheKey);
-  if (!response) {
-    response = await fetch(url, {
-      ...options,
-      headers: {
-        "cache-control": cacheControl,
-        ...options.headers
-      }
-    });
-    waitUntil?.(storefront.cache.put(cacheKey, response.clone()));
-  }
-  return response;
-}
-
-// 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;
-  let updateSettings = (newSettings) => {
-    weaverse.internal.project.config.theme = Object.assign(
-      {},
-      settings,
-      newSettings
-    );
-    weaverse.triggerUpdate();
-  };
-  return [settings, updateSettings];
-}
-
-// 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/loader.ts
-async function weaverseLoader(args, components, loaderConfigs) {
+async function weaverseLoader(args, components, countries, loaderConfigs) {
   return new Promise(async (resolve, reject) => {
     try {
       let { request, context, params } = args;
-      let i18n = context?.storefront?.i18n;
       let queries = getRequestQueries(request);
       let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
-      let { weaverseProjectId, weaverseHost, weaverseVersion, isDesignMode } = queries;
+      let { weaverseProjectId, weaverseHost } = queries;
       let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
       weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
       if (!projectId) {
@@ -208,33 +158,19 @@ async function weaverseLoader(args, components, loaderConfigs) {
           `Missing Weaverse project's id. Try adding WEAVERSE_PROJECT_ID to your .env file then restart the server.`
         );
       }
-      let configs = {
+      let i18n = context?.storefront?.i18n;
+      let reqBody = {
+        i18n,
+        countries,
         projectId,
-        weaverseHost,
-        weaverseVersion,
-        isDesignMode,
-        requestInfo: {
-          i18n,
-          params,
-          queries,
-          pathname: new URL(request.url).pathname,
-          search: new URL(request.url).search
-        }
+        loaderConfigs,
+        url: request.url
       };
-      let res = await fetchWithServerCache({
+      let payload = await fetchWithServerCache({
         url: `${weaverseHost}/api/public/project`,
-        options: {
-          method: "POST",
-          body: JSON.stringify({
-            i18n,
-            projectId,
-            loaderConfigs,
-            url: request.url
-          })
-        },
+        options: { method: "POST", body: JSON.stringify(reqBody) },
         context
       });
-      let payload = await res.json();
       let { page, project, pageAssignment } = payload;
       if (!page || !project || !pageAssignment) {
         throw new Error(
@@ -242,30 +178,22 @@ async function weaverseLoader(args, components, loaderConfigs) {
           payload?.error || "Invalid Weaverse project payload!"
         );
       }
+      let configs = {
+        projectId,
+        weaverseHost,
+        weaverseVersion: queries.weaverseVersion,
+        isDesignMode: queries.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 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;
-          })
-        );
+        page.items = await withLoaderData(items, components, configs, args);
       }
       resolve({ page, configs, project, pageAssignment });
     } catch (err) {
@@ -274,67 +202,78 @@ async function weaverseLoader(args, components, loaderConfigs) {
     }
   });
 }
-
-// src/studio.tsx
-var import_react6 = require("@remix-run/react");
-var import_react7 = __toESM(require("react"));
-function HydrogenStudio({ themeSchema }) {
-  let { search } = (0, import_react6.useLocation)();
-  let params = new URLSearchParams(search);
-  if (params) {
-    let isDesignMode = params.get("isDesignMode") === "true";
-    let weaverseHost = params.get("weaverseHost");
-    let weaverseVersion = params.get("weaverseVersion");
-    if (isDesignMode && weaverseHost && weaverseVersion) {
-      return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
-        "script",
-        {
-          src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
-          async: true
+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;
         }
-      ), /* @__PURE__ */ import_react7.default.createElement(
-        "script",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
-              themeSchema
-            )}`
-          }
-        }
-      ));
-    }
-  }
-  return null;
+      }
+      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;
+  let updateSettings = (newSettings) => {
+    weaverse.internal.project.config.theme = Object.assign(
+      {},
+      settings,
+      newSettings
+    );
+    weaverse.triggerUpdate();
+  };
+  return [settings, updateSettings];
 }
 
 // src/index.tsx
 function WeaverseHydrogenRoot({
-  components,
-  errorComponent: ErrorComponent
+  errorComponent: ErrorComponent,
+  ...themeConfigs
 }) {
-  let data = (0, import_react8.useLoaderData)();
-  let weaverseDataFromLoader = data?.weaverseData;
-  if (weaverseDataFromLoader) {
-    if (weaverseDataFromLoader 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: weaverseDataFromLoader }, (resolvedData) => {
-        return /* @__PURE__ */ import_react10.default.createElement(
+  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,
-            components
+            ...themeConfigs
           }
         );
       })));
     }
-    return /* @__PURE__ */ import_react10.default.createElement(
-      RenderWeaverseRoot,
-      {
-        weaverseData: weaverseDataFromLoader,
-        components
-      }
-    );
+    return /* @__PURE__ */ import_react8.default.createElement(RenderWeaverseRoot, { weaverseData, ...themeConfigs });
   }
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
@@ -342,16 +281,16 @@ function WeaverseHydrogenRoot({
   );
 }
 function RenderWeaverseRoot(props) {
-  let { components, weaverseData } = props;
+  let { weaverseData, components, countries, themeSchema } = props;
   let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
+  useStudio(weaverse, countries, themeSchema);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react7.WeaverseRoot, { context: weaverse });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HydrogenStudio,
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  getRequestQueries,
   getSelectedProductOptions,
   useThemeSettings,
   weaverseLoader,

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/index.tsx
 import { Await, useLoaderData } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React2, { Suspense } from "react";
+import React, { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
@@ -30,10 +30,9 @@ function createWeaverseInstance(weaverseData, components) {
     ...configs,
     data: page || {},
     pageId: page?.id,
-    platformType: "shopify-hydrogen"
+    platformType: "shopify-hydrogen",
+    internal: { project, pageAssignment }
   });
-  weaverse.internal.project = project;
-  weaverse.internal.pageAssignment = pageAssignment;
   components.forEach((comp) => {
     weaverse.registerElement({
       type: comp?.schema?.type,
@@ -46,21 +45,28 @@ function createWeaverseInstance(weaverseData, components) {
 
 // src/hooks/use-studio.ts
 import { useNavigate, useRevalidator } from "@remix-run/react";
-import { isIframe } from "@weaverse/react";
+import { isIframe, loadScript } from "@weaverse/react";
 import { useEffect } from "react";
-function useStudio(weaverse) {
+function useStudio(weaverse, countries, schema) {
   let navigate = useNavigate();
   let revalidator = useRevalidator();
+  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
+  let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
   useEffect(() => {
-    if (isIframe && weaverse.isDesignMode) {
+    if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
         navigate,
-        revalidator
+        revalidator,
+        themeConfigs: { schema, countries }
       };
       window.__weaverse = weaverse;
       if (window.weaverseStudio) {
         window.weaverseStudio.init(weaverse);
+      } else {
+        loadScript(
+          `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`
+        );
       }
     }
   }, [weaverse]);
@@ -70,27 +76,22 @@ function useStudio(weaverse) {
 export * from "@weaverse/react";
 
 // src/fetch.ts
-import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
+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 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;
-}
 function getRequestQueries(request) {
   let url = new URL(request.url);
   return Array.from(url.searchParams.entries()).reduce(
@@ -102,65 +103,14 @@ function getRequestQueries(request) {
   );
 }
 
-// src/fetch.ts
-var cacheControl = generateCacheControlHeader(CacheShort());
-async function fetchWithServerCache(params) {
-  let { url, options = {}, context } = params;
-  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]);
-  let cacheKey = new Request(cacheUrl.toString());
-  let response = await storefront.cache.match(cacheKey);
-  if (!response) {
-    response = await fetch(url, {
-      ...options,
-      headers: {
-        "cache-control": cacheControl,
-        ...options.headers
-      }
-    });
-    waitUntil?.(storefront.cache.put(cacheKey, response.clone()));
-  }
-  return response;
-}
-
-// src/hooks/use-theme-settings.ts
-import { useWeaverse } from "@weaverse/react";
-function useThemeSettings() {
-  let weaverse = useWeaverse();
-  let settings = weaverse?.internal?.project?.config?.theme;
-  let updateSettings = (newSettings) => {
-    weaverse.internal.project.config.theme = Object.assign(
-      {},
-      settings,
-      newSettings
-    );
-    weaverse.triggerUpdate();
-  };
-  return [settings, updateSettings];
-}
-
-// 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/loader.ts
-async function weaverseLoader(args, components, loaderConfigs) {
+async function weaverseLoader(args, components, countries, loaderConfigs) {
   return new Promise(async (resolve, reject) => {
     try {
       let { request, context, params } = args;
-      let i18n = context?.storefront?.i18n;
       let queries = getRequestQueries(request);
       let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
-      let { weaverseProjectId, weaverseHost, weaverseVersion, isDesignMode } = queries;
+      let { weaverseProjectId, weaverseHost } = queries;
       let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
       weaverseHost = weaverseHost || WEAVERSE_HOST || "https://weaverse.io";
       if (!projectId) {
@@ -168,33 +118,19 @@ async function weaverseLoader(args, components, loaderConfigs) {
           `Missing Weaverse project's id. Try adding WEAVERSE_PROJECT_ID to your .env file then restart the server.`
         );
       }
-      let configs = {
+      let i18n = context?.storefront?.i18n;
+      let reqBody = {
+        i18n,
+        countries,
         projectId,
-        weaverseHost,
-        weaverseVersion,
-        isDesignMode,
-        requestInfo: {
-          i18n,
-          params,
-          queries,
-          pathname: new URL(request.url).pathname,
-          search: new URL(request.url).search
-        }
+        loaderConfigs,
+        url: request.url
       };
-      let res = await fetchWithServerCache({
+      let payload = await fetchWithServerCache({
         url: `${weaverseHost}/api/public/project`,
-        options: {
-          method: "POST",
-          body: JSON.stringify({
-            i18n,
-            projectId,
-            loaderConfigs,
-            url: request.url
-          })
-        },
+        options: { method: "POST", body: JSON.stringify(reqBody) },
         context
       });
-      let payload = await res.json();
       let { page, project, pageAssignment } = payload;
       if (!page || !project || !pageAssignment) {
         throw new Error(
@@ -202,30 +138,22 @@ async function weaverseLoader(args, components, loaderConfigs) {
           payload?.error || "Invalid Weaverse project payload!"
         );
       }
+      let configs = {
+        projectId,
+        weaverseHost,
+        weaverseVersion: queries.weaverseVersion,
+        isDesignMode: queries.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 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;
-          })
-        );
+        page.items = await withLoaderData(items, components, configs, args);
       }
       resolve({ page, configs, project, pageAssignment });
     } catch (err) {
@@ -234,67 +162,78 @@ async function weaverseLoader(args, components, loaderConfigs) {
     }
   });
 }
-
-// src/studio.tsx
-import { useLocation } from "@remix-run/react";
-import React from "react";
-function HydrogenStudio({ themeSchema }) {
-  let { search } = useLocation();
-  let params = new URLSearchParams(search);
-  if (params) {
-    let isDesignMode = params.get("isDesignMode") === "true";
-    let weaverseHost = params.get("weaverseHost");
-    let weaverseVersion = params.get("weaverseVersion");
-    if (isDesignMode && weaverseHost && weaverseVersion) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
-          async: true
-        }
-      ), /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
-              themeSchema
-            )}`
-          }
+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 null;
+      }
+      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;
+  let updateSettings = (newSettings) => {
+    weaverse.internal.project.config.theme = Object.assign(
+      {},
+      settings,
+      newSettings
+    );
+    weaverse.triggerUpdate();
+  };
+  return [settings, updateSettings];
 }
 
 // src/index.tsx
 function WeaverseHydrogenRoot({
-  components,
-  errorComponent: ErrorComponent
+  errorComponent: ErrorComponent,
+  ...themeConfigs
 }) {
   let data = useLoaderData();
-  let weaverseDataFromLoader = data?.weaverseData;
-  if (weaverseDataFromLoader) {
-    if (weaverseDataFromLoader instanceof Promise) {
-      return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense, null, /* @__PURE__ */ React2.createElement(Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
-        return /* @__PURE__ */ React2.createElement(
+  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,
-            components
+            ...themeConfigs
           }
         );
       })));
     }
-    return /* @__PURE__ */ React2.createElement(
-      RenderWeaverseRoot,
-      {
-        weaverseData: weaverseDataFromLoader,
-        components
-      }
-    );
+    return /* @__PURE__ */ React.createElement(RenderWeaverseRoot, { weaverseData, ...themeConfigs });
   }
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
@@ -302,15 +241,15 @@ function WeaverseHydrogenRoot({
   );
 }
 function RenderWeaverseRoot(props) {
-  let { components, weaverseData } = props;
+  let { weaverseData, components, countries, themeSchema } = props;
   let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse);
-  return /* @__PURE__ */ React2.createElement(WeaverseRoot, { context: weaverse });
+  useStudio(weaverse, countries, themeSchema);
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 }
 export {
-  HydrogenStudio,
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  getRequestQueries,
   getSelectedProductOptions,
   useThemeSettings,
   weaverseLoader

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.1",
-    "@weaverse/react": "1.1.3",
+    "@weaverse/react": "1.1.5",
     "react-error-boundary": "^4.0.10"
   },
   "devDependencies": {