@weaverse/hydrogen 1.1.3 → 1.1.4

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;
@@ -213,11 +222,18 @@ 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;
+        __weaverseThemeConfigs: WeaverseThemeConfigs;
     }
 }
 
@@ -231,17 +247,22 @@ 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 WeaverseStudio(): React.JSX.Element | null;
 
-declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
+declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
+/**
+ * Check if the request is from Weaverse Studio.
+ * @param request Request
+ * @returns boolean
+ */
+declare function studioCheck(request: Request): boolean;
 
-type StudioProps = {
-    themeSchema: HydrogenThemeSchema;
-};
-declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
 
 declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: 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, WeaverseStudio, WeaverseThemeConfigs, fetchWithServerCache, getRequestQueries, getSelectedProductOptions, studioCheck, 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;
@@ -213,11 +222,18 @@ 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;
+        __weaverseThemeConfigs: WeaverseThemeConfigs;
     }
 }
 
@@ -231,17 +247,22 @@ 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 WeaverseStudio(): React.JSX.Element | null;
 
-declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
+declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
+/**
+ * Check if the request is from Weaverse Studio.
+ * @param request Request
+ * @returns boolean
+ */
+declare function studioCheck(request: Request): boolean;
 
-type StudioProps = {
-    themeSchema: HydrogenThemeSchema;
-};
-declare function HydrogenStudio({ themeSchema }: StudioProps): React.JSX.Element | null;
+declare function getSelectedProductOptions(request: Request): _shopify_hydrogen_react_storefront_api_types.SelectedOptionInput[];
+
+declare function useThemeSettings(): (Record<string, any> | ((newSettings: any) => void))[];
 
 declare function WeaverseHydrogenRoot({ components, errorComponent: ErrorComponent, }: 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, WeaverseStudio, WeaverseThemeConfigs, fetchWithServerCache, getRequestQueries, getSelectedProductOptions, studioCheck, useThemeSettings, weaverseLoader };

package/dist/index.js

@@ -31,10 +31,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
-  HydrogenStudio: () => HydrogenStudio,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
+  WeaverseStudio: () => WeaverseStudio,
   fetchWithServerCache: () => fetchWithServerCache,
+  getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
+  studioCheck: () => studioCheck,
   useThemeSettings: () => useThemeSettings,
   weaverseLoader: () => weaverseLoader
 });
@@ -111,26 +113,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(
@@ -141,66 +138,22 @@ 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")
+function studioCheck(request) {
+  let queries = getRequestQueries(request);
+  let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
+  return Boolean(
+    isDesignMode && weaverseProjectId && weaverseHost && weaverseVersion
   );
 }
 
 // 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 +161,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 +181,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,39 +205,90 @@ async function weaverseLoader(args, components, loaderConfigs) {
     }
   });
 }
+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/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";
+var import_react5 = require("@remix-run/react");
+var import_react6 = __toESM(require("react"));
+function WeaverseStudio() {
+  let { search } = (0, import_react5.useLocation)();
+  let { weaverseThemeConfigs } = (0, import_react5.useLoaderData)();
+  if (weaverseThemeConfigs instanceof Promise) {
+    let params = new URLSearchParams(search);
     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(
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.Suspense, null, /* @__PURE__ */ import_react6.default.createElement(import_react5.Await, { resolve: weaverseThemeConfigs }, (configs) => {
+      if (!configs)
+        return null;
+      return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(
         "script",
         {
           src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
           async: true
         }
-      ), /* @__PURE__ */ import_react7.default.createElement(
+      ), /* @__PURE__ */ import_react6.default.createElement(
         "script",
         {
           dangerouslySetInnerHTML: {
-            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
-              themeSchema
+            __html: `window.__weaverseThemeConfigs = ${JSON.stringify(
+              configs
             )}`
           }
         }
       ));
-    }
+    }));
   }
   return null;
 }
 
+// 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_react7 = require("@weaverse/react");
+function useThemeSettings() {
+  let weaverse = (0, import_react7.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,
@@ -349,10 +331,12 @@ function RenderWeaverseRoot(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  HydrogenStudio,
   WeaverseHydrogenRoot,
+  WeaverseStudio,
   fetchWithServerCache,
+  getRequestQueries,
   getSelectedProductOptions,
+  studioCheck,
   useThemeSettings,
   weaverseLoader,
   ...require("@weaverse/react")

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/index.tsx
-import { Await, useLoaderData } from "@remix-run/react";
+import { Await as Await2, useLoaderData as useLoaderData2 } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React2, { Suspense } from "react";
+import React2, { Suspense as Suspense2 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 // src/context.ts
@@ -70,27 +70,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(
@@ -101,66 +96,22 @@ 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")
+function studioCheck(request) {
+  let queries = getRequestQueries(request);
+  let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
+  return Boolean(
+    isDesignMode && weaverseProjectId && weaverseHost && weaverseVersion
   );
 }
 
 // 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 +119,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 +139,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,18 +163,44 @@ async function weaverseLoader(args, components, loaderConfigs) {
     }
   });
 }
+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/studio.tsx
-import { useLocation } from "@remix-run/react";
-import React from "react";
-function HydrogenStudio({ themeSchema }) {
+import { Await, useLoaderData, useLocation } from "@remix-run/react";
+import React, { Suspense } from "react";
+function WeaverseStudio() {
   let { search } = useLocation();
-  let params = new URLSearchParams(search);
-  if (params) {
-    let isDesignMode = params.get("isDesignMode") === "true";
+  let { weaverseThemeConfigs } = useLoaderData();
+  if (weaverseThemeConfigs instanceof Promise) {
+    let params = new URLSearchParams(search);
     let weaverseHost = params.get("weaverseHost");
     let weaverseVersion = params.get("weaverseVersion");
-    if (isDesignMode && weaverseHost && weaverseVersion) {
+    return /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: weaverseThemeConfigs }, (configs) => {
+      if (!configs)
+        return null;
       return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         "script",
         {
@@ -256,27 +211,52 @@ function HydrogenStudio({ themeSchema }) {
         "script",
         {
           dangerouslySetInnerHTML: {
-            __html: `window.__weaverseHydrogenThemeSchema = ${JSON.stringify(
-              themeSchema
+            __html: `window.__weaverseThemeConfigs = ${JSON.stringify(
+              configs
             )}`
           }
         }
       ));
-    }
+    }));
   }
   return null;
 }
 
+// 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
 }) {
-  let data = useLoaderData();
+  let data = useLoaderData2();
   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(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense2, null, /* @__PURE__ */ React2.createElement(Await2, { resolve: weaverseDataFromLoader }, (resolvedData) => {
         return /* @__PURE__ */ React2.createElement(
           RenderWeaverseRoot,
           {
@@ -308,10 +288,12 @@ function RenderWeaverseRoot(props) {
   return /* @__PURE__ */ React2.createElement(WeaverseRoot, { context: weaverse });
 }
 export {
-  HydrogenStudio,
   WeaverseHydrogenRoot,
+  WeaverseStudio,
   fetchWithServerCache,
+  getRequestQueries,
   getSelectedProductOptions,
+  studioCheck,
   useThemeSettings,
   weaverseLoader
 };

package/package.json

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