@weaverse/core 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -12,7 +12,7 @@ declare type WeaverseElementSchema = {
     title: string;
     type: string;
     settings: WeaverseElementSetting[];
-    toolbar: TODO;
+    toolbar?: TODO;
     data?: TODO;
 };
 declare type WeaverseElementSetting = {
@@ -21,10 +21,10 @@ declare type WeaverseElementSetting = {
     inspectors: WeaverseElementInspector[];
 };
 declare type WeaverseElementInspector = {
-    binding: "data" | "style";
+    binding?: "data" | "style";
     key?: string;
     label?: string;
-    type?: InspectorInputType;
+    type: InspectorInputType;
     options?: InspectorOption[];
     default?: TODO;
 };
@@ -32,7 +32,7 @@ declare type InspectorOption = {
     value: TODO;
     label: string;
 };
-declare type InspectorInputType = "alignment" | "color" | "switch" | "textarea" | "select";
+declare type InspectorInputType = "alignment" | "color" | "switch" | "spacing" | "textarea" | "select" | "grid" | "flex";
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
@@ -81,11 +81,14 @@ declare type WeaverseType = {
  *   ```
  */
 declare class WeaverseItemStore {
-    data: any;
     listeners: Set<any>;
-    Element: WeaverseElement;
     ref: any;
+    weaverse: Weaverse;
     constructor(itemData: any, weaverse: Weaverse);
+    _data: any;
+    get Element(): WeaverseElement;
+    set data(data: any);
+    get data(): any;
     setData: (data: any) => any;
     subscribe: (fn: any) => void;
     unsubscribe: (fn: any) => void;
@@ -162,8 +165,14 @@ declare class Weaverse {
     /**
      * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)
      * @param fetch {fetch} custom fetch function, pass in custom fetch function if you want to use your own fetch function
+     * @param appUrl
+     * @param projectKey
      */
-    fetchProjectData(fetch?: typeof globalThis.fetch): Promise<any>;
+    static fetchProjectData({ fetch, appUrl, projectKey, }: {
+        fetch?: any;
+        appUrl?: string;
+        projectKey?: string;
+    }): any;
     /**
      * fetch and update the project data, then trigger update to re-render the WeaverseRoot
      */

package/dist/index.js

@@ -53,11 +53,11 @@ var isIframe = isBrowser && window.top !== window.self;
 var stitches = __toESM(require("@stitches/core"));
 var WeaverseItemStore = class {
   constructor(itemData = {}, weaverse) {
-    this.data = {};
     this.listeners = /* @__PURE__ */ new Set();
     this.ref = {
       current: null
     };
+    this._data = {};
     this.setData = (data) => {
       this.data = Object.assign(this.data, data);
       this.triggerUpdate();
@@ -74,17 +74,25 @@ var WeaverseItemStore = class {
         return fn(this.data);
       });
     };
-    var _a;
     let { type, id } = itemData;
-    this.Element = weaverse.elementInstances.get(type);
-    if (id) {
-      let defaultData = (_a = this.Element.schema) == null ? void 0 : _a.data;
+    this.weaverse = weaverse;
+    if (id && type) {
       weaverse.itemInstances.set(id, this);
-      this.data = __spreadValues(__spreadValues(__spreadValues({}, this.Element.Component.defaultProps), defaultData), itemData);
+      this.data = __spreadValues({}, itemData);
     }
   }
+  get Element() {
+    return this.weaverse.elementInstances.get(this._data.type);
+  }
+  set data(data) {
+    this._data = __spreadValues(__spreadValues({}, this.data), data);
+  }
+  get data() {
+    var _a, _b, _c, _d;
+    return __spreadValues(__spreadValues(__spreadValues({}, (_b = (_a = this.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps), (_d = (_c = this.Element) == null ? void 0 : _c.schema) == null ? void 0 : _d.data), this._data);
+  }
 };
-var Weaverse = class {
+var _Weaverse = class {
   constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
@@ -103,8 +111,17 @@ var Weaverse = class {
     };
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
-        prefix: "we",
-        media: this.mediaBreakPoints
+        prefix: "weaverse",
+        media: this.mediaBreakPoints,
+        theme: {
+          sizes: {
+            rowSize: "48px",
+            columns: 16
+          },
+          space: {
+            gap: "8px"
+          }
+        }
       });
     };
     this.appUrl = appUrl || this.appUrl;
@@ -124,29 +141,25 @@ var Weaverse = class {
   init() {
     this.initStitches();
     this.loadStudio();
+    this.initProjectItemData();
   }
   loadStudio() {
     if (isIframe) {
-      window.addEventListener("message", (e) => {
-        var _a;
-        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
-          this.isEditor = true;
-          let initStudio = () => {
-            this.studioBridge = new window.WeaverseStudioBridge(this);
-            this.studioBridge.subscribeMessageEvent();
-            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();
-          }
-        }
-      });
+      this.isEditor = true;
+      let initStudio = () => {
+        this.studioBridge = new window.WeaverseStudioBridge(this);
+        this.studioBridge.subscribeMessageEvent();
+        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) {
@@ -165,12 +178,16 @@ var Weaverse = class {
       });
     }
   }
-  fetchProjectData(fetch = globalThis.fetch) {
-    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
+  static fetchProjectData({
+    fetch = globalThis.fetch,
+    appUrl,
+    projectKey
+  }) {
+    return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
   }
   updateProjectData() {
     if (this.projectKey) {
-      this.fetchProjectData().then((data) => {
+      _Weaverse.fetchProjectData({ appUrl: this.appUrl, projectKey: this.projectKey }).then((data) => {
         if (data) {
           this.projectData = data;
           this.initProjectItemData();
@@ -192,6 +209,7 @@ var Weaverse = class {
     }
   }
 };
+var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -24,11 +24,11 @@ var isIframe = isBrowser && window.top !== window.self;
 import * as stitches from "@stitches/core";
 var WeaverseItemStore = class {
   constructor(itemData = {}, weaverse) {
-    this.data = {};
     this.listeners = /* @__PURE__ */ new Set();
     this.ref = {
       current: null
     };
+    this._data = {};
     this.setData = (data) => {
       this.data = Object.assign(this.data, data);
       this.triggerUpdate();
@@ -45,17 +45,25 @@ var WeaverseItemStore = class {
         return fn(this.data);
       });
     };
-    var _a;
     let { type, id } = itemData;
-    this.Element = weaverse.elementInstances.get(type);
-    if (id) {
-      let defaultData = (_a = this.Element.schema) == null ? void 0 : _a.data;
+    this.weaverse = weaverse;
+    if (id && type) {
       weaverse.itemInstances.set(id, this);
-      this.data = __spreadValues(__spreadValues(__spreadValues({}, this.Element.Component.defaultProps), defaultData), itemData);
+      this.data = __spreadValues({}, itemData);
     }
   }
+  get Element() {
+    return this.weaverse.elementInstances.get(this._data.type);
+  }
+  set data(data) {
+    this._data = __spreadValues(__spreadValues({}, this.data), data);
+  }
+  get data() {
+    var _a, _b, _c, _d;
+    return __spreadValues(__spreadValues(__spreadValues({}, (_b = (_a = this.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps), (_d = (_c = this.Element) == null ? void 0 : _c.schema) == null ? void 0 : _d.data), this._data);
+  }
 };
-var Weaverse = class {
+var _Weaverse = class {
   constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
@@ -74,8 +82,17 @@ var Weaverse = class {
     };
     this.initStitches = () => {
       this.stitchesInstance = stitches.createStitches({
-        prefix: "we",
-        media: this.mediaBreakPoints
+        prefix: "weaverse",
+        media: this.mediaBreakPoints,
+        theme: {
+          sizes: {
+            rowSize: "48px",
+            columns: 16
+          },
+          space: {
+            gap: "8px"
+          }
+        }
       });
     };
     this.appUrl = appUrl || this.appUrl;
@@ -95,29 +112,25 @@ var Weaverse = class {
   init() {
     this.initStitches();
     this.loadStudio();
+    this.initProjectItemData();
   }
   loadStudio() {
     if (isIframe) {
-      window.addEventListener("message", (e) => {
-        var _a;
-        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
-          this.isEditor = true;
-          let initStudio = () => {
-            this.studioBridge = new window.WeaverseStudioBridge(this);
-            this.studioBridge.subscribeMessageEvent();
-            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();
-          }
-        }
-      });
+      this.isEditor = true;
+      let initStudio = () => {
+        this.studioBridge = new window.WeaverseStudioBridge(this);
+        this.studioBridge.subscribeMessageEvent();
+        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) {
@@ -136,12 +149,16 @@ var Weaverse = class {
       });
     }
   }
-  fetchProjectData(fetch = globalThis.fetch) {
-    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
+  static fetchProjectData({
+    fetch = globalThis.fetch,
+    appUrl,
+    projectKey
+  }) {
+    return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
   }
   updateProjectData() {
     if (this.projectKey) {
-      this.fetchProjectData().then((data) => {
+      _Weaverse.fetchProjectData({ appUrl: this.appUrl, projectKey: this.projectKey }).then((data) => {
         if (data) {
           this.projectData = data;
           this.initProjectItemData();
@@ -163,6 +180,7 @@ var Weaverse = class {
     }
   }
 };
+var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 export {
   Weaverse,

package/package.json

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