@weaverse/hydrogen 1.0.44 → 1.0.46

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

@@ -59,12 +59,15 @@ function createWeaverseHydrogenContext({ weaverseData }, components) {
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
+  weaverse.elementInstances.clear();
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      schema: component?.schema
-      // defaultCss: component?.css,
+      // @ts-ignore
+      schema: component?.schema,
+      // @ts-ignore
+      template: component?.template
     });
   });
   return weaverse;
@@ -545,13 +548,16 @@ 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.setData = (data) => {
-      this.data = Object.assign(this.data, data);
+    this._store = { id: "", type: "" };
+    this.setData = (update) => {
+      if (this.platformType === "shopify-hydrogen") {
+        this.data = update;
+      } else {
+        this.data = Object.assign(this.data, update);
+      }
       this.triggerUpdate();
       return this.data;
     };
@@ -568,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;
@@ -583,17 +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(data) {
-    this._data = { ...this.data, ...data };
+  set 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._store = { ...this.data, ...update };
+    }
   }
   get data() {
-    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 };
+    let defaultProps = { ...this.Element?.Component?.defaultProps };
+    if (this.platformType === "shopify-hydrogen") {
+      return {
+        ...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 };
+    }
   }
 };
 var Weaverse = class {
@@ -608,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";
@@ -651,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();
   }
   /**
@@ -716,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) => {

package/dist/index.mjs

@@ -22,12 +22,15 @@ function createWeaverseHydrogenContext({ weaverseData }, components) {
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
+  weaverse.elementInstances.clear();
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      schema: component?.schema
-      // defaultCss: component?.css,
+      // @ts-ignore
+      schema: component?.schema,
+      // @ts-ignore
+      template: component?.template
     });
   });
   return weaverse;
@@ -508,13 +511,16 @@ 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.setData = (data) => {
-      this.data = Object.assign(this.data, data);
+    this._store = { id: "", type: "" };
+    this.setData = (update) => {
+      if (this.platformType === "shopify-hydrogen") {
+        this.data = update;
+      } else {
+        this.data = Object.assign(this.data, update);
+      }
       this.triggerUpdate();
       return this.data;
     };
@@ -531,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;
@@ -546,17 +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(data) {
-    this._data = { ...this.data, ...data };
+  set 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._store = { ...this.data, ...update };
+    }
   }
   get data() {
-    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 };
+    let defaultProps = { ...this.Element?.Component?.defaultProps };
+    if (this.platformType === "shopify-hydrogen") {
+      return {
+        ...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 };
+    }
   }
 };
 var Weaverse = class {
@@ -571,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";
@@ -614,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();
   }
   /**
@@ -679,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) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.44",
+  "version": "1.0.46",
   "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.44"
+    "@shopify/hydrogen": "2023.4.3",
+    "@weaverse/react": "1.0.46"
   },
   "devDependencies": {
-    "@shopify/remix-oxygen": "^1.0.6"
+    "@shopify/remix-oxygen": "^1.0.7"
   }
 }