@weaverse/core 0.6.3 → 0.6.6

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import Stitches from '@stitches/core/types/stitches';
+import { RefObject } from 'react';
 
 declare type TODO = any;
 declare type WeaverseElementMap = {
@@ -8,13 +9,23 @@ declare type WeaverseElement = {
     Component: TODO;
     schema: WeaverseElementSchema;
 };
+declare type WeaverseElementCatalog = {
+    name: string;
+    icon?: string;
+    group?: 'essential' | 'composition' | 'other';
+};
 declare type WeaverseElementSchema = {
     title?: string;
     type: string;
     settings?: WeaverseElementInput[];
     styles?: WeaverseElementInput[];
     toolbar?: TODO;
-    data?: TODO;
+    data?: WeaverseElementData;
+    catalog?: WeaverseElementCatalog;
+};
+declare type WeaverseElementData = {
+    id: string;
+    [key: string]: any;
 };
 declare type WeaverseElementInput = {
     label?: string;
@@ -29,6 +40,7 @@ declare type WeaverseElementInput = {
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
+        weaverseShopifyProducts: TODO;
     }
 }
 
@@ -46,16 +58,13 @@ interface ProjectDataType {
     items: ProjectDataItemType[];
     rootId: string | number;
 }
-declare type MediaBreakpoints = {
-    tablet: string;
-    mobile: string;
-};
 declare type WeaverseType = {
-    [key: string]: any;
+    mediaBreakPoints?: any;
     appUrl?: string;
     projectKey?: string;
     projectData?: ProjectDataType;
     isDesignMode?: boolean;
+    ssrMode?: boolean;
 };
 /**
  * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
@@ -76,8 +85,9 @@ declare type WeaverseType = {
  */
 declare class WeaverseItemStore {
     listeners: Set<any>;
-    ref: any;
+    ref: RefObject<HTMLElement>;
     weaverse: Weaverse;
+    stitchesClass: string;
     constructor(itemData: any, weaverse: Weaverse);
     _data: any;
     get Element(): WeaverseElement;
@@ -126,6 +136,11 @@ declare class Weaverse {
      * @type {boolean}
      */
     isDesignMode: boolean;
+    /**
+     * Use in element to optionally render special HTML for hydration
+     * @type {boolean}
+     */
+    ssrMode: boolean;
     /**
      * stitches instance for handling CSS stylesheet, media, theme for Weaverse project
      */
@@ -142,8 +157,10 @@ declare class Weaverse {
      * @param projectKey {string} Weaverse project key to access project data via API
      * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
      * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
+     * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
+     * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
      */
-    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode }?: WeaverseType);
+    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType);
     /**
      * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
      * @param element {WeaverseElement} custom React Component
@@ -151,7 +168,6 @@ declare class Weaverse {
     registerElement(element: WeaverseElement): void;
     init(): void;
     initStitches: () => void;
-    loadStudio(): void;
     subscribe(fn: any): void;
     unsubscribe(fn: any): void;
     triggerUpdate(): void;
@@ -177,4 +193,4 @@ declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { MediaBreakpoints, ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementInput, WeaverseElementMap, WeaverseElementSchema, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+export { ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementCatalog, WeaverseElementData, WeaverseElementInput, WeaverseElementMap, WeaverseElementSchema, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.js

@@ -44,19 +44,15 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/utils/index.ts
-var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
-var isBrowser = typeof window !== "undefined" && !isReactNative;
-var isIframe = isBrowser && window.top !== window.self;
-
 // src/core.ts
 var stitches = __toESM(require("@stitches/core"));
 var WeaverseItemStore = class {
-  constructor(itemData = {}, weaverse) {
+  constructor(itemData, weaverse) {
     this.listeners = /* @__PURE__ */ new Set();
     this.ref = {
       current: null
     };
+    this.stitchesClass = "";
     this._data = {};
     this.setData = (data) => {
       this.data = Object.assign(this.data, data);
@@ -93,7 +89,7 @@ var WeaverseItemStore = class {
   }
 };
 var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode } = {}) {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -104,6 +100,7 @@ var _Weaverse = class {
     };
     this.listeners = /* @__PURE__ */ new Set();
     this.isDesignMode = false;
+    this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
@@ -111,22 +108,14 @@ var _Weaverse = class {
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
         prefix: "weaverse",
-        media: this.mediaBreakPoints,
-        theme: {
-          sizes: {
-            rowSize: "48px",
-            columns: 16
-          },
-          space: {
-            gap: "8px"
-          }
-        }
+        media: this.mediaBreakPoints
       });
     };
     this.appUrl = appUrl || this.appUrl;
     this.projectKey = projectKey || this.projectKey;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
     this.isDesignMode = isDesignMode || this.isDesignMode;
+    this.ssrMode = ssrMode || this.ssrMode;
     projectData && (this.projectData = projectData);
     this.init();
   }
@@ -140,27 +129,9 @@ var _Weaverse = class {
   }
   init() {
     this.initStitches();
-    this.loadStudio();
     this.initProjectItemData();
     this.updateProjectData();
   }
-  loadStudio() {
-    if (this.isDesignMode && isIframe) {
-      let initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-      };
-      if (!window.WeaverseStudioBridge) {
-        const studioBridgeScript = document.createElement("script");
-        studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
-        studioBridgeScript.type = "module";
-        studioBridgeScript.onload = initStudio;
-        document.body.appendChild(studioBridgeScript);
-      } else {
-        initStudio();
-      }
-    }
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -203,6 +174,11 @@ var _Weaverse = class {
 };
 var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
+
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Weaverse,

package/dist/index.mjs

@@ -15,19 +15,15 @@ var __spreadValues = (a, b) => {
   return a;
 };
 
-// src/utils/index.ts
-var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
-var isBrowser = typeof window !== "undefined" && !isReactNative;
-var isIframe = isBrowser && window.top !== window.self;
-
 // src/core.ts
 import * as stitches from "@stitches/core";
 var WeaverseItemStore = class {
-  constructor(itemData = {}, weaverse) {
+  constructor(itemData, weaverse) {
     this.listeners = /* @__PURE__ */ new Set();
     this.ref = {
       current: null
     };
+    this.stitchesClass = "";
     this._data = {};
     this.setData = (data) => {
       this.data = Object.assign(this.data, data);
@@ -64,7 +60,7 @@ var WeaverseItemStore = class {
   }
 };
 var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode } = {}) {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -75,6 +71,7 @@ var _Weaverse = class {
     };
     this.listeners = /* @__PURE__ */ new Set();
     this.isDesignMode = false;
+    this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
@@ -82,22 +79,14 @@ var _Weaverse = class {
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
         prefix: "weaverse",
-        media: this.mediaBreakPoints,
-        theme: {
-          sizes: {
-            rowSize: "48px",
-            columns: 16
-          },
-          space: {
-            gap: "8px"
-          }
-        }
+        media: this.mediaBreakPoints
       });
     };
     this.appUrl = appUrl || this.appUrl;
     this.projectKey = projectKey || this.projectKey;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
     this.isDesignMode = isDesignMode || this.isDesignMode;
+    this.ssrMode = ssrMode || this.ssrMode;
     projectData && (this.projectData = projectData);
     this.init();
   }
@@ -111,27 +100,9 @@ var _Weaverse = class {
   }
   init() {
     this.initStitches();
-    this.loadStudio();
     this.initProjectItemData();
     this.updateProjectData();
   }
-  loadStudio() {
-    if (this.isDesignMode && isIframe) {
-      let initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-      };
-      if (!window.WeaverseStudioBridge) {
-        const studioBridgeScript = document.createElement("script");
-        studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
-        studioBridgeScript.type = "module";
-        studioBridgeScript.onload = initStudio;
-        document.body.appendChild(studioBridgeScript);
-      } else {
-        initStudio();
-      }
-    }
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -174,6 +145,11 @@ var _Weaverse = class {
 };
 var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
+
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
 export {
   Weaverse,
   WeaverseItemStore,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.6.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",