@weaverse/hydrogen 1.0.45 → 1.0.47

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
-import { ElementSchema, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
+import { ElementData, ElementSchema, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
 
 /**
@@ -22,21 +22,45 @@ type WeaverseLoaderArgs = LoaderArgs & {
         weaverseHost: string;
     };
 };
+interface HydrogenComponentData extends Omit<ElementData, 'childIds' | 'css'> {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    deletedAt: string;
+    parentId: string;
+    children: {
+        id: string;
+    }[];
+    loaderData: unknown;
+    data: Record<string, unknown>;
+}
 type ComponentFlags = Partial<Record<'isSection', boolean>>;
 interface HydrogenComponentSchema extends Omit<ElementSchema, 'parentTypes' | 'flags'> {
     flags?: ComponentFlags;
+    childTypes?: string[];
 }
-interface HydrogenComponentProps<T = unknown> extends WeaverseElement {
-    loaderData?: T;
+interface HydrogenComponentProps<D = unknown, L = unknown> extends WeaverseElement {
+    data: D & {
+        className?: string;
+    };
+    loaderData?: L;
     children?: React.JSX.Element[];
 }
 interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances'> {
     itemInstances: Map<string | number, HydrogenComponentInstance>;
 }
-interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags'> {
+type HydrogenComponentTemplate = any;
+interface HydrogenElement {
+    Component: ForwardRefExoticComponent<any>;
+    type: string;
+    schema?: HydrogenComponentSchema;
+    template?: HydrogenComponentTemplate;
+}
+interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags' | 'data' | 'Element'> {
     get _element(): HTMLElement | null;
     get _flags(): ComponentFlags;
-    get Element(): WeaverseElement | undefined;
+    get Element(): HydrogenElement | undefined;
+    get data(): HydrogenComponentData;
 }
 interface HydrogenComponent<T = HydrogenComponentProps> {
     default: ForwardRefExoticComponent<T>;
@@ -75,4 +99,4 @@ interface WeaverseHydrogenRootProps {
 }
 declare let WeaverseHydrogenRoot: (props: WeaverseHydrogenRootProps) => React.JSX.Element;
 
-export { ComponentFlags, HydrogenComponent, HydrogenComponentInstance, HydrogenComponentProps, HydrogenComponentSchema, HydrogenPageConfigs, HydrogenPageData, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };
+export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentProps, HydrogenComponentSchema, HydrogenComponentTemplate, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };

package/dist/index.js

@@ -65,7 +65,9 @@ function createWeaverseHydrogenContext({ weaverseData }, components) {
       type: component?.schema?.type || key,
       Component: component?.default,
       // @ts-ignore
-      schema: component?.schema
+      schema: component?.schema,
+      // @ts-ignore
+      template: component?.template
     });
   });
   return weaverse;
@@ -546,14 +548,12 @@ var stitchesUtils = {
 var WeaverseItemStore = class {
   constructor(itemData, weaverse) {
     this.listeners = /* @__PURE__ */ new Set();
-    this.ref = {
-      current: null
-    };
+    this.ref = { current: null };
+    this.platformType = "shopify-section";
     this.stitchesClass = "";
-    this._data = { id: "", type: "" };
+    this._store = { id: "", type: "" };
     this.setData = (update) => {
-      let platformType = this.weaverse.platformType;
-      if (platformType === "shopify-hydrogen") {
+      if (this.platformType === "shopify-hydrogen") {
         this.data = update;
       } else {
         this.data = Object.assign(this.data, update);
@@ -574,13 +574,14 @@ var WeaverseItemStore = class {
     };
     let { type, id } = itemData;
     this.weaverse = weaverse;
+    this.platformType = weaverse.platformType;
     if (id && type) {
       weaverse.itemInstances.set(id, this);
-      this.data = { ...itemData };
+      this._store = { ...itemData };
     }
   }
   get _id() {
-    return this._data.id;
+    return this._store.id;
   }
   get _element() {
     return this.ref.current;
@@ -589,31 +590,33 @@ var WeaverseItemStore = class {
     return this.Element?.schema?.flags || {};
   }
   get Element() {
-    return this.weaverse.elementInstances.get(this._data.type);
+    return this.weaverse.elementInstances.get(this._store.type);
   }
   set data(update) {
-    let platformType = this.weaverse.platformType;
-    if (platformType === "shopify-hydrogen") {
-      this._data.data = merge(this.data, update);
+    if (this.platformType === "shopify-hydrogen") {
+      let { children, ...rest } = update;
+      if (children) {
+        this._store.children = children;
+      }
+      this._store.data = merge(this._store.data, rest);
     } else {
-      this._data = { ...this.data, ...update };
+      this._store = { ...this.data, ...update };
     }
   }
   get data() {
-    let platformType = this.weaverse.platformType;
-    if (platformType === "shopify-hydrogen") {
-      let defaultData2 = { ...this.Element?.Component?.defaultProps };
+    let defaultProps = { ...this.Element?.Component?.defaultProps };
+    if (this.platformType === "shopify-hydrogen") {
       return {
-        ...this._data,
-        ...defaultData2,
-        ...this._data.data
+        ...this._store,
+        data: { ...defaultProps?.data, ...this._store.data }
       };
+    } else {
+      let defaultCss = this.Element?.defaultCss || {};
+      let currentCss = this._store.css || {};
+      let css = merge(defaultCss, currentCss);
+      let extraData = this.Element?.extraData;
+      return { ...defaultProps, ...extraData, ...this._store, css };
     }
-    let defaultCss = this.Element?.defaultCss || {};
-    let currentCss = this._data.css || {};
-    let css = merge(defaultCss, currentCss);
-    let defaultData = { ...this.Element?.Component?.defaultProps, ...this.Element?.extraData || {} };
-    return { ...defaultData, ...this._data, css };
   }
 };
 var Weaverse = class {
@@ -628,18 +631,7 @@ var Weaverse = class {
    * @param elementSchemas {Array<ElementSchema>} List of element schemas
    * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
    */
-  constructor({
-    weaverseHost,
-    weaverseVersion,
-    projectId,
-    data,
-    mediaBreakPoints,
-    isDesignMode,
-    ssrMode,
-    elementSchemas,
-    platformType,
-    pageId
-  } = {}) {
+  constructor(params = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.weaverseHost = "https://studio.weaverse.io";
@@ -671,42 +663,11 @@ var Weaverse = class {
         ...externalConfig
       });
     };
-    this.init({
-      weaverseHost,
-      weaverseVersion,
-      projectId,
-      data,
-      platformType,
-      mediaBreakPoints,
-      isDesignMode,
-      ssrMode,
-      elementSchemas,
-      pageId
+    Object.entries(params).forEach(([k2, v2]) => {
+      let key = k2;
+      this[key] = v2 || this[key];
     });
-  }
-  init({
-    weaverseHost,
-    weaverseVersion,
-    elementSchemas,
-    platformType,
-    projectId,
-    data,
-    mediaBreakPoints,
-    isDesignMode,
-    ssrMode,
-    pageId
-  } = {}) {
-    this.elementSchemas = elementSchemas || this.elementSchemas;
-    this.weaverseHost = weaverseHost || this.weaverseHost;
-    this.weaverseVersion = weaverseVersion || this.weaverseVersion;
-    this.projectId = projectId || this.projectId;
-    this.pageId = pageId || this.pageId;
-    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
-    this.isDesignMode = isDesignMode || this.isDesignMode;
-    this.ssrMode = ssrMode || this.ssrMode;
-    this.platformType = platformType || this.platformType;
-    this.data = data || this.data;
-    this.initProjectItemData();
+    this.initProject();
     this.initStitches();
   }
   /**
@@ -736,12 +697,20 @@ var Weaverse = class {
       item.triggerUpdate();
     });
   }
+  /**
+   * When applying new template,
+   * we need to reset the project data and re-initialize the project item data
+   * @param data {WeaverseProjectDataType}
+   */
   setProjectData(data) {
     this.data = data;
-    this.initProjectItemData();
+    this.initProject();
     this.triggerUpdate();
   }
-  initProjectItemData() {
+  /**
+   * Create new WeaverseItemStore instance for each item in project data
+   */
+  initProject() {
     const data = this.data;
     if (data?.items) {
       data.items.forEach((item) => {
@@ -910,24 +879,8 @@ var WeaverseHydrogenRoot = (props) => {
   useStudio(weaverse);
   if (!weaverse?.data)
     return /* @__PURE__ */ import_react4.default.createElement("div", null, "No Weaverse data!");
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react3.WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ import_react4.default.createElement(StitchesStyle, { weaverse }));
+  return /* @__PURE__ */ import_react4.default.createElement(import_react3.WeaverseRoot, { context: weaverse });
 };
-var StitchesStyle = (0, import_react4.memo)(
-  ({ weaverse }) => {
-    return /* @__PURE__ */ import_react4.default.createElement(
-      "style",
-      {
-        id: "stitches",
-        key: "stitches",
-        suppressHydrationWarning: true,
-        dangerouslySetInnerHTML: {
-          __html: weaverse.stitchesInstance?.getCssText() || ""
-        }
-      }
-    );
-  },
-  () => true
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.tsx
 import { WeaverseRoot } from "@weaverse/react";
-import React, { memo } from "react";
+import React from "react";
 
 // src/context.ts
 import { createRootContext, isBrowser } from "@weaverse/react";
@@ -28,7 +28,9 @@ function createWeaverseHydrogenContext({ weaverseData }, components) {
       type: component?.schema?.type || key,
       Component: component?.default,
       // @ts-ignore
-      schema: component?.schema
+      schema: component?.schema,
+      // @ts-ignore
+      template: component?.template
     });
   });
   return weaverse;
@@ -509,14 +511,12 @@ var stitchesUtils = {
 var WeaverseItemStore = class {
   constructor(itemData, weaverse) {
     this.listeners = /* @__PURE__ */ new Set();
-    this.ref = {
-      current: null
-    };
+    this.ref = { current: null };
+    this.platformType = "shopify-section";
     this.stitchesClass = "";
-    this._data = { id: "", type: "" };
+    this._store = { id: "", type: "" };
     this.setData = (update) => {
-      let platformType = this.weaverse.platformType;
-      if (platformType === "shopify-hydrogen") {
+      if (this.platformType === "shopify-hydrogen") {
         this.data = update;
       } else {
         this.data = Object.assign(this.data, update);
@@ -537,13 +537,14 @@ var WeaverseItemStore = class {
     };
     let { type, id } = itemData;
     this.weaverse = weaverse;
+    this.platformType = weaverse.platformType;
     if (id && type) {
       weaverse.itemInstances.set(id, this);
-      this.data = { ...itemData };
+      this._store = { ...itemData };
     }
   }
   get _id() {
-    return this._data.id;
+    return this._store.id;
   }
   get _element() {
     return this.ref.current;
@@ -552,31 +553,33 @@ var WeaverseItemStore = class {
     return this.Element?.schema?.flags || {};
   }
   get Element() {
-    return this.weaverse.elementInstances.get(this._data.type);
+    return this.weaverse.elementInstances.get(this._store.type);
   }
   set data(update) {
-    let platformType = this.weaverse.platformType;
-    if (platformType === "shopify-hydrogen") {
-      this._data.data = merge(this.data, update);
+    if (this.platformType === "shopify-hydrogen") {
+      let { children, ...rest } = update;
+      if (children) {
+        this._store.children = children;
+      }
+      this._store.data = merge(this._store.data, rest);
     } else {
-      this._data = { ...this.data, ...update };
+      this._store = { ...this.data, ...update };
     }
   }
   get data() {
-    let platformType = this.weaverse.platformType;
-    if (platformType === "shopify-hydrogen") {
-      let defaultData2 = { ...this.Element?.Component?.defaultProps };
+    let defaultProps = { ...this.Element?.Component?.defaultProps };
+    if (this.platformType === "shopify-hydrogen") {
       return {
-        ...this._data,
-        ...defaultData2,
-        ...this._data.data
+        ...this._store,
+        data: { ...defaultProps?.data, ...this._store.data }
       };
+    } else {
+      let defaultCss = this.Element?.defaultCss || {};
+      let currentCss = this._store.css || {};
+      let css = merge(defaultCss, currentCss);
+      let extraData = this.Element?.extraData;
+      return { ...defaultProps, ...extraData, ...this._store, css };
     }
-    let defaultCss = this.Element?.defaultCss || {};
-    let currentCss = this._data.css || {};
-    let css = merge(defaultCss, currentCss);
-    let defaultData = { ...this.Element?.Component?.defaultProps, ...this.Element?.extraData || {} };
-    return { ...defaultData, ...this._data, css };
   }
 };
 var Weaverse = class {
@@ -591,18 +594,7 @@ var Weaverse = class {
    * @param elementSchemas {Array<ElementSchema>} List of element schemas
    * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
    */
-  constructor({
-    weaverseHost,
-    weaverseVersion,
-    projectId,
-    data,
-    mediaBreakPoints,
-    isDesignMode,
-    ssrMode,
-    elementSchemas,
-    platformType,
-    pageId
-  } = {}) {
+  constructor(params = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.weaverseHost = "https://studio.weaverse.io";
@@ -634,42 +626,11 @@ var Weaverse = class {
         ...externalConfig
       });
     };
-    this.init({
-      weaverseHost,
-      weaverseVersion,
-      projectId,
-      data,
-      platformType,
-      mediaBreakPoints,
-      isDesignMode,
-      ssrMode,
-      elementSchemas,
-      pageId
+    Object.entries(params).forEach(([k2, v2]) => {
+      let key = k2;
+      this[key] = v2 || this[key];
     });
-  }
-  init({
-    weaverseHost,
-    weaverseVersion,
-    elementSchemas,
-    platformType,
-    projectId,
-    data,
-    mediaBreakPoints,
-    isDesignMode,
-    ssrMode,
-    pageId
-  } = {}) {
-    this.elementSchemas = elementSchemas || this.elementSchemas;
-    this.weaverseHost = weaverseHost || this.weaverseHost;
-    this.weaverseVersion = weaverseVersion || this.weaverseVersion;
-    this.projectId = projectId || this.projectId;
-    this.pageId = pageId || this.pageId;
-    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
-    this.isDesignMode = isDesignMode || this.isDesignMode;
-    this.ssrMode = ssrMode || this.ssrMode;
-    this.platformType = platformType || this.platformType;
-    this.data = data || this.data;
-    this.initProjectItemData();
+    this.initProject();
     this.initStitches();
   }
   /**
@@ -699,12 +660,20 @@ var Weaverse = class {
       item.triggerUpdate();
     });
   }
+  /**
+   * When applying new template,
+   * we need to reset the project data and re-initialize the project item data
+   * @param data {WeaverseProjectDataType}
+   */
   setProjectData(data) {
     this.data = data;
-    this.initProjectItemData();
+    this.initProject();
     this.triggerUpdate();
   }
-  initProjectItemData() {
+  /**
+   * Create new WeaverseItemStore instance for each item in project data
+   */
+  initProject() {
     const data = this.data;
     if (data?.items) {
       data.items.forEach((item) => {
@@ -873,24 +842,8 @@ var WeaverseHydrogenRoot = (props) => {
   useStudio(weaverse);
   if (!weaverse?.data)
     return /* @__PURE__ */ React.createElement("div", null, "No Weaverse data!");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ React.createElement(StitchesStyle, { weaverse }));
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 };
-var StitchesStyle = memo(
-  ({ weaverse }) => {
-    return /* @__PURE__ */ React.createElement(
-      "style",
-      {
-        id: "stitches",
-        key: "stitches",
-        suppressHydrationWarning: true,
-        dangerouslySetInnerHTML: {
-          __html: weaverse.stitchesInstance?.getCssText() || ""
-        }
-      }
-    );
-  },
-  () => true
-);
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.45",
+  "version": "1.0.47",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,10 +32,10 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@shopify/hydrogen": "2023.4.1",
-    "@weaverse/react": "1.0.45"
+    "@shopify/hydrogen": "2023.4.3",
+    "@weaverse/react": "1.0.47"
   },
   "devDependencies": {
-    "@shopify/remix-oxygen": "^1.0.6"
+    "@shopify/remix-oxygen": "^1.0.7"
   }
 }