@weaverse/hydrogen 1.0.50 → 1.0.52

package/dist/index.d.ts

@@ -32,7 +32,7 @@ interface HydrogenComponentData extends Omit<ElementData, 'childIds' | 'css'> {
     loaderData: unknown;
     data: Record<string, unknown>;
 }
-type ComponentFlags = Partial<Record<string, boolean>>;
+type ComponentFlags = Partial<Record<'isSection', boolean>>;
 interface HydrogenComponentSchema extends Omit<ElementSchema, 'parentTypes' | 'flags' | 'inspector'> {
     flags?: ComponentFlags;
     childTypes?: string[];
@@ -67,6 +67,7 @@ interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags' | '
     get _flags(): ComponentFlags;
     get Element(): HydrogenElement | undefined;
     get data(): HydrogenComponentData;
+    _store: HydrogenComponentData;
 }
 interface HydrogenComponent<T = HydrogenComponentProps> {
     default: ForwardRefExoticComponent<T>;
@@ -83,6 +84,8 @@ type HydrogenPageConfigs = {
 interface HydrogenPageData {
     page: any;
     configs: HydrogenPageConfigs;
+    project: any;
+    pageTemplate: any;
 }
 type WeaverseHydrogenLoaderData = {
     weaverseData?: HydrogenPageData;
@@ -94,6 +97,11 @@ interface WeaverseHydrogenRootProps {
     themeSchema?: InspectorGroup[];
 }
 
+declare let useThemeSetting: () => {
+    themeSetting: any;
+    updateThemeSetting: (settings: any) => void;
+};
+
 /**
  * Fetch with server cache requires a storefront.cache instance which is Cloudflare Cache and a waitUntil function, otherwise it will just fetch the url.
  */
@@ -107,4 +115,4 @@ declare function weaverseLoader(args: LoaderArgs, components: Record<string, Hyd
 
 declare let WeaverseHydrogenRoot: (props: WeaverseHydrogenRootProps) => React.JSX.Element;
 
-export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, InspectorGroup, TODO, WeaverseHydrogen, WeaverseHydrogenLoaderData, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };
+export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, InspectorGroup, TODO, WeaverseHydrogen, WeaverseHydrogenLoaderData, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseLoaderArgs, fetchWithServerCache, useThemeSetting, weaverseLoader };

package/dist/index.js

@@ -33,11 +33,12 @@ var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   fetchWithServerCache: () => fetchWithServerCache,
+  useThemeSetting: () => useThemeSetting,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
-var import_react3 = require("@weaverse/react");
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("@weaverse/react");
+var import_react5 = __toESM(require("react"));
 
 // src/context.ts
 var import_react = require("@weaverse/react");
@@ -57,13 +58,15 @@ function createCachedContext(init) {
 }
 function createWeaverseHydrogenContext(data, components) {
   let weaverseData = data?.weaverseData || {};
-  let { page = {}, configs = {} } = weaverseData;
+  let { page = {}, configs = {}, project, pageTemplate } = weaverseData;
   let weaverse = createCachedContext({
     ...configs,
     data: page,
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
+  weaverse.internal.project = project;
+  weaverse.internal.pageTemplate = pageTemplate;
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
@@ -623,6 +626,7 @@ var Weaverse2 = class {
     this.weaverseVersion = "";
     this.projectId = "";
     this.pageId = "";
+    this.internal = {};
     this.data = {
       rootId: "",
       items: [],
@@ -714,7 +718,8 @@ function useStudio(weaverseCore, themeSchema) {
   (0, import_react2.useEffect)(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
-      weaverseCore.themeSchema = themeSchema;
+      console.log("themeSchema", themeSchema);
+      weaverseCore.internal.themeSchema = themeSchema;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
       loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -730,6 +735,22 @@ function useStudio(weaverseCore, themeSchema) {
   }, [weaverseCore]);
 }
 
+// src/hooks/use-theme-setting.ts
+var import_react3 = require("@weaverse/react");
+var useThemeSetting = () => {
+  let weaverseCore = (0, import_react3.useWeaverse)();
+  let themeSetting = weaverseCore?.internal?.project?.config?.theme;
+  let updateThemeSetting = (settings) => {
+    weaverseCore.internal.project.config.theme = Object.assign(
+      {},
+      themeSetting,
+      settings
+    );
+    weaverseCore.triggerUpdate();
+  };
+  return { themeSetting, updateThemeSetting };
+};
+
 // src/fetch.ts
 var import_hydrogen = require("@shopify/hydrogen");
 
@@ -813,7 +834,7 @@ async function weaverseLoader(args, components) {
   try {
     let projectAPI = `${weaverseHost}/api/public/project`;
     let url = request.url;
-    let page = await fetchWithServerCache({
+    let { page, project, pageTemplateAssignment } = await fetchWithServerCache({
       url: projectAPI,
       options: {
         method: "POST",
@@ -824,6 +845,7 @@ async function weaverseLoader(args, components) {
       console.log(`\u274C Error fetching project data: ${err?.toString()}`);
       return {};
     });
+    console.log("page", { page, project, pageTemplateAssignment });
     if (page?.items) {
       let items = page.items;
       page.items = await Promise.all(
@@ -850,7 +872,7 @@ async function weaverseLoader(args, components) {
         })
       );
     }
-    return { page, configs };
+    return { page, configs, project, pageTemplate: pageTemplateAssignment };
   } catch (err) {
     console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
     return null;
@@ -861,13 +883,16 @@ async function weaverseLoader(args, components) {
 __reExport(src_exports, require("@weaverse/react"), module.exports);
 var WeaverseHydrogenRoot = (props) => {
   let { components, data, themeSchema } = props;
+  console.log("WeaverseHydrogenRoot", props);
   let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse, themeSchema);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react3.WeaverseRoot, { context: weaverse });
+  return /* @__PURE__ */ import_react5.default.createElement(import_react4.WeaverseRoot, { context: weaverse });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
-  weaverseLoader
+  useThemeSetting,
+  weaverseLoader,
+  ...require("@weaverse/react")
 });

package/dist/index.mjs

@@ -20,13 +20,15 @@ function createCachedContext(init) {
 }
 function createWeaverseHydrogenContext(data, components) {
   let weaverseData = data?.weaverseData || {};
-  let { page = {}, configs = {} } = weaverseData;
+  let { page = {}, configs = {}, project, pageTemplate } = weaverseData;
   let weaverse = createCachedContext({
     ...configs,
     data: page,
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
+  weaverse.internal.project = project;
+  weaverse.internal.pageTemplate = pageTemplate;
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
@@ -586,6 +588,7 @@ var Weaverse2 = class {
     this.weaverseVersion = "";
     this.projectId = "";
     this.pageId = "";
+    this.internal = {};
     this.data = {
       rootId: "",
       items: [],
@@ -677,7 +680,8 @@ function useStudio(weaverseCore, themeSchema) {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
-      weaverseCore.themeSchema = themeSchema;
+      console.log("themeSchema", themeSchema);
+      weaverseCore.internal.themeSchema = themeSchema;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
       loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -693,6 +697,22 @@ function useStudio(weaverseCore, themeSchema) {
   }, [weaverseCore]);
 }
 
+// src/hooks/use-theme-setting.ts
+import { useWeaverse } from "@weaverse/react";
+var useThemeSetting = () => {
+  let weaverseCore = useWeaverse();
+  let themeSetting = weaverseCore?.internal?.project?.config?.theme;
+  let updateThemeSetting = (settings) => {
+    weaverseCore.internal.project.config.theme = Object.assign(
+      {},
+      themeSetting,
+      settings
+    );
+    weaverseCore.triggerUpdate();
+  };
+  return { themeSetting, updateThemeSetting };
+};
+
 // src/fetch.ts
 import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
 
@@ -776,7 +796,7 @@ async function weaverseLoader(args, components) {
   try {
     let projectAPI = `${weaverseHost}/api/public/project`;
     let url = request.url;
-    let page = await fetchWithServerCache({
+    let { page, project, pageTemplateAssignment } = await fetchWithServerCache({
       url: projectAPI,
       options: {
         method: "POST",
@@ -787,6 +807,7 @@ async function weaverseLoader(args, components) {
       console.log(`\u274C Error fetching project data: ${err?.toString()}`);
       return {};
     });
+    console.log("page", { page, project, pageTemplateAssignment });
     if (page?.items) {
       let items = page.items;
       page.items = await Promise.all(
@@ -813,7 +834,7 @@ async function weaverseLoader(args, components) {
         })
       );
     }
-    return { page, configs };
+    return { page, configs, project, pageTemplate: pageTemplateAssignment };
   } catch (err) {
     console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
     return null;
@@ -824,6 +845,7 @@ async function weaverseLoader(args, components) {
 export * from "@weaverse/react";
 var WeaverseHydrogenRoot = (props) => {
   let { components, data, themeSchema } = props;
+  console.log("WeaverseHydrogenRoot", props);
   let weaverse = createWeaverseHydrogenContext(data, components);
   useStudio(weaverse, themeSchema);
   return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
@@ -831,5 +853,6 @@ var WeaverseHydrogenRoot = (props) => {
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  useThemeSetting,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.50",
+  "version": "1.0.52",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -33,7 +33,7 @@
   "author": "Weaverse Team",
   "dependencies": {
     "@shopify/hydrogen": "2023.4.5",
-    "@weaverse/react": "1.0.50"
+    "@weaverse/react": "1.0.52"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.1"