@weaverse/hydrogen 1.1.4 → 1.1.5

package/dist/index.d.mts

@@ -175,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 = {
@@ -197,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;
@@ -233,7 +226,6 @@ declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseThemeConfigs: WeaverseThemeConfigs;
     }
 }
 
@@ -249,20 +241,12 @@ declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promi
 
 declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], countries: Localizations, loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function WeaverseStudio(): React.JSX.Element | 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;
 
 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;
+declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, ...themeConfigs }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-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 };
+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

@@ -175,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 = {
@@ -197,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;
@@ -233,7 +226,6 @@ declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseThemeConfigs: WeaverseThemeConfigs;
     }
 }
 
@@ -249,20 +241,12 @@ declare function fetchWithServerCache(params: FetchWithServerCacheParams): Promi
 
 declare function weaverseLoader(args: LoaderArgs, components: HydrogenComponent[], countries: Localizations, loaderConfigs?: WeaverseLoaderConfigs): Promise<WeaverseLoaderData | null>;
 
-declare function WeaverseStudio(): React.JSX.Element | 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;
 
 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;
+declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, ...themeConfigs }: WeaverseHydrogenRootProps): React.JSX.Element;
 
-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 };
+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

@@ -32,18 +32,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
-  WeaverseStudio: () => WeaverseStudio,
   fetchWithServerCache: () => fetchWithServerCache,
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
-  studioCheck: () => studioCheck,
   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
@@ -72,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,
@@ -90,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]);
@@ -138,13 +142,6 @@ function getRequestQueries(request) {
     {}
   );
 }
-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, countries, loaderConfigs) {
@@ -230,40 +227,6 @@ async function withLoaderData(items, components, configs, args) {
   );
 }
 
-// src/studio.tsx
-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");
-    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_react6.default.createElement(
-        "script",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `window.__weaverseThemeConfigs = ${JSON.stringify(
-              configs
-            )}`
-          }
-        }
-      ));
-    }));
-  }
-  return null;
-}
-
 // src/hydrogen-wrappers.ts
 var import_hydrogen2 = require("@shopify/hydrogen");
 function getSelectedProductOptions(request) {
@@ -274,9 +237,9 @@ function getSelectedProductOptions(request) {
 }
 
 // src/hooks/use-theme-settings.ts
-var import_react7 = require("@weaverse/react");
+var import_react5 = require("@weaverse/react");
 function useThemeSettings() {
-  let weaverse = (0, import_react7.useWeaverse)();
+  let weaverse = (0, import_react5.useWeaverse)();
   let settings = weaverse?.internal?.project?.config?.theme;
   let updateSettings = (newSettings) => {
     weaverse.internal.project.config.theme = Object.assign(
@@ -291,32 +254,26 @@ function useThemeSettings() {
 
 // 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!" }
@@ -324,19 +281,17 @@ 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 = {
   WeaverseHydrogenRoot,
-  WeaverseStudio,
   fetchWithServerCache,
   getRequestQueries,
   getSelectedProductOptions,
-  studioCheck,
   useThemeSettings,
   weaverseLoader,
   ...require("@weaverse/react")

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/index.tsx
-import { Await as Await2, useLoaderData as useLoaderData2 } from "@remix-run/react";
+import { Await, useLoaderData } from "@remix-run/react";
 import { WeaverseRoot } from "@weaverse/react";
-import React2, { Suspense as Suspense2 } 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]);
@@ -96,13 +102,6 @@ function getRequestQueries(request) {
     {}
   );
 }
-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, countries, loaderConfigs) {
@@ -188,40 +187,6 @@ async function withLoaderData(items, components, configs, args) {
   );
 }
 
-// src/studio.tsx
-import { Await, useLoaderData, useLocation } from "@remix-run/react";
-import React, { Suspense } from "react";
-function WeaverseStudio() {
-  let { search } = useLocation();
-  let { weaverseThemeConfigs } = useLoaderData();
-  if (weaverseThemeConfigs instanceof Promise) {
-    let params = new URLSearchParams(search);
-    let weaverseHost = params.get("weaverseHost");
-    let weaverseVersion = params.get("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",
-        {
-          src: `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`,
-          async: true
-        }
-      ), /* @__PURE__ */ React.createElement(
-        "script",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `window.__weaverseThemeConfigs = ${JSON.stringify(
-              configs
-            )}`
-          }
-        }
-      ));
-    }));
-  }
-  return null;
-}
-
 // src/hydrogen-wrappers.ts
 import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
 function getSelectedProductOptions(request) {
@@ -249,32 +214,26 @@ function useThemeSettings() {
 
 // src/index.tsx
 function WeaverseHydrogenRoot({
-  components,
-  errorComponent: ErrorComponent
+  errorComponent: ErrorComponent,
+  ...themeConfigs
 }) {
-  let data = useLoaderData2();
-  let weaverseDataFromLoader = data?.weaverseData;
-  if (weaverseDataFromLoader) {
-    if (weaverseDataFromLoader instanceof Promise) {
-      return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense2, null, /* @__PURE__ */ React2.createElement(Await2, { resolve: weaverseDataFromLoader }, (resolvedData) => {
-        return /* @__PURE__ */ React2.createElement(
+  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,
-            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!" }
@@ -282,18 +241,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__ */ React2.createElement(WeaverseRoot, { context: weaverse });
+  useStudio(weaverse, countries, themeSchema);
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 }
 export {
   WeaverseHydrogenRoot,
-  WeaverseStudio,
   fetchWithServerCache,
   getRequestQueries,
   getSelectedProductOptions,
-  studioCheck,
   useThemeSettings,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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.4",
+    "@weaverse/react": "1.1.5",
     "react-error-boundary": "^4.0.10"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.2"
   }
-}
+}