@weaverse/core 0.6.4 → 0.6.8

package/dist/index.d.ts

@@ -1,6 +1,23 @@
+import { CSSProperties } from '@stitches/core';
 import Stitches from '@stitches/core/types/stitches';
 import { RefObject } from 'react';
 
+interface ProjectDataType {
+    items: WeaverseElementData[];
+    rootId: string | number;
+    script: {
+        css: string;
+        js: string;
+    };
+}
+declare type WeaverseType = {
+    mediaBreakPoints?: any;
+    appUrl?: string;
+    projectKey?: string;
+    projectData?: ProjectDataType;
+    isDesignMode?: boolean;
+    ssrMode?: boolean;
+};
 declare type TODO = any;
 declare type WeaverseElementMap = {
     [key: string]: WeaverseElement;
@@ -20,9 +37,24 @@ declare type WeaverseElementSchema = {
     settings?: WeaverseElementInput[];
     styles?: WeaverseElementInput[];
     toolbar?: TODO;
-    data?: TODO;
+    data?: WeaverseElementData;
     catalog?: WeaverseElementCatalog;
 };
+declare type WeaverseElementData = {
+    id?: string | number;
+    type?: string | undefined;
+    childIds?: (string | number)[] | undefined;
+    css?: WeaverseElementCSS;
+    [key: string]: any;
+};
+declare type WeaverseElementCSS = {
+    '@desktop'?: CSSProperties | {
+        [key: string]: CSSProperties;
+    };
+    '@mobile'?: CSSProperties | {
+        [key: string]: CSSProperties;
+    };
+};
 declare type WeaverseElementInput = {
     label?: string;
     type: 'select' | 'checkbox' | 'radio' | 'range' | 'button' | 'image' | 'file' | 'hidden' | 'alignment' | 'color' | 'dimensions' | 'flex' | 'grid' | 'input' | 'switch' | 'spacing' | 'textarea' | 'visibility' | 'border' | 'background' | 'typography' | 'shadow' | 'position' | 'overflow' | 'display' | 'other';
@@ -36,40 +68,15 @@ declare type WeaverseElementInput = {
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
+        weaverseShopifyProducts: TODO;
     }
 }
 
-interface ProjectDataItemType {
-    type: string;
-    name?: string;
-    id: string | number;
-    description?: string;
-    childIds?: Array<string | number>;
-    css?: {
-        [key: string]: string;
-    };
-}
-interface ProjectDataType {
-    items: ProjectDataItemType[];
-    rootId: string | number;
-}
-declare type MediaBreakpoints = {
-    tablet: string;
-    mobile: string;
-};
-declare type WeaverseType = {
-    [key: string]: any;
-    appUrl?: string;
-    projectKey?: string;
-    projectData?: ProjectDataType;
-    isDesignMode?: boolean;
-};
 /**
  * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
- * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param itemData {WeaverseElementData} Weaverse item data
  * @param weaverse {Weaverse} Weaverse instance
- * Usage:
- * ```jsx
+ * @example
  * useEffect(() => {
  *     let handleUpdate = (update: any) => {
  *       setData({...update})
@@ -78,19 +85,19 @@ declare type WeaverseType = {
  *     return () => {
  *       itemInstance.unsubscribe(handleUpdate)
  *     }
- *   }, [])
- *   ```
+ * }, [])
  */
 declare class WeaverseItemStore {
     listeners: Set<any>;
     ref: RefObject<HTMLElement>;
     weaverse: Weaverse;
-    constructor(itemData: any, weaverse: Weaverse);
-    _data: any;
+    stitchesClass: string;
+    constructor(itemData: WeaverseElementData, weaverse: Weaverse);
+    _data: WeaverseElementData;
     get Element(): WeaverseElement;
-    set data(data: any);
-    get data(): any;
-    setData: (data: any) => any;
+    set data(data: WeaverseElementData);
+    get data(): WeaverseElementData;
+    setData: (data: WeaverseElementData) => WeaverseElementData;
     subscribe: (fn: any) => void;
     unsubscribe: (fn: any) => void;
     triggerUpdate: () => void;
@@ -133,6 +140,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
      */
@@ -149,8 +161,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
@@ -158,7 +172,6 @@ declare class Weaverse {
     registerElement(element: WeaverseElement): void;
     init(): void;
     initStitches: () => void;
-    loadStudio(): void;
     subscribe(fn: any): void;
     unsubscribe(fn: any): void;
     triggerUpdate(): void;
@@ -184,4 +197,4 @@ declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { MediaBreakpoints, ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementCatalog, WeaverseElementInput, WeaverseElementMap, WeaverseElementSchema, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+export { ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementCSS, 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,17 +89,22 @@ 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";
     this.projectKey = "";
     this.projectData = {
       items: [],
-      rootId: 0
+      rootId: 0,
+      script: {
+        css: "",
+        js: ""
+      }
     };
     this.listeners = /* @__PURE__ */ new Set();
     this.isDesignMode = false;
+    this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
@@ -111,25 +112,14 @@ var _Weaverse = class {
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
         prefix: "weaverse",
-        media: this.mediaBreakPoints,
-        theme: {
-          sizes: {
-            "width": "100%",
-            "max-width": "100%",
-            "column-count": "16",
-            "row-count": "12",
-            "row-size": "48px"
-          },
-          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();
   }
@@ -143,27 +133,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);
   }
@@ -206,6 +178,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,17 +60,22 @@ 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";
     this.projectKey = "";
     this.projectData = {
       items: [],
-      rootId: 0
+      rootId: 0,
+      script: {
+        css: "",
+        js: ""
+      }
     };
     this.listeners = /* @__PURE__ */ new Set();
     this.isDesignMode = false;
+    this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
@@ -82,25 +83,14 @@ var _Weaverse = class {
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
         prefix: "weaverse",
-        media: this.mediaBreakPoints,
-        theme: {
-          sizes: {
-            "width": "100%",
-            "max-width": "100%",
-            "column-count": "16",
-            "row-count": "12",
-            "row-size": "48px"
-          },
-          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();
   }
@@ -114,27 +104,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);
   }
@@ -177,6 +149,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.4",
+  "version": "0.6.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",