@weaverse/core 0.4.0 → 0.4.4

package/dist/index.d.ts

@@ -1,16 +1,19 @@
 import Stitches from '@stitches/core/types/stitches';
 
+declare type TODO = any;
 declare type WeaverseElementMap = {
     [key: string]: WeaverseElement;
 };
 declare type WeaverseElement = {
-    Component: any;
+    Component: TODO;
     schema: WeaverseElementSchema;
 };
 declare type WeaverseElementSchema = {
     title: string;
     type: string;
     settings: WeaverseElementSetting[];
+    toolbar?: TODO;
+    data?: TODO;
 };
 declare type WeaverseElementSetting = {
     tab: string;
@@ -18,15 +21,21 @@ declare type WeaverseElementSetting = {
     inspectors: WeaverseElementInspector[];
 };
 declare type WeaverseElementInspector = {
-    binding: 'data' | 'style';
-    key: string;
-    label: string;
+    binding?: "data" | "style";
+    key?: string;
+    label?: string;
     type: InspectorInputType;
+    options?: InspectorOption[];
+    default?: TODO;
+};
+declare type InspectorOption = {
+    value: TODO;
+    label: string;
 };
-declare type InspectorInputType = "alignment" | "color" | "switch" | "textarea";
+declare type InspectorInputType = "alignment" | "color" | "switch" | "spacing" | "textarea" | "select" | "grid" | "flex";
 declare global {
     interface Window {
-        WeaverseStudioBridge: any;
+        WeaverseStudioBridge: TODO;
     }
 }
 
@@ -72,12 +81,15 @@ declare type WeaverseType = {
  *   ```
  */
 declare class WeaverseItemStore {
-    data: any;
     listeners: Set<any>;
-    Component: any;
     ref: any;
+    weaverse: Weaverse;
     constructor(itemData: any, weaverse: Weaverse);
-    setData: (data: any) => void;
+    _data: any;
+    get Element(): WeaverseElement;
+    set data(data: any);
+    get data(): any;
+    setData: (data: any) => any;
     subscribe: (fn: any) => void;
     unsubscribe: (fn: any) => void;
     triggerUpdate: () => void;
@@ -153,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
      */
@@ -166,4 +184,4 @@ declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { InspectorInputType, MediaBreakpoints, ProjectDataItemType, ProjectDataType, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+export { InspectorInputType, InspectorOption, MediaBreakpoints, ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -39,14 +53,15 @@ 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();
+      return this.data;
     };
     this.subscribe = (fn) => {
       this.listeners.add(fn);
@@ -59,15 +74,25 @@ var WeaverseItemStore = class {
         return fn(this.data);
       });
     };
-    this.data = itemData;
     let { type, id } = itemData;
-    if (type && id) {
-      this.Component = weaverse.elementInstances.get(type);
+    this.weaverse = weaverse;
+    if (id && type) {
       weaverse.itemInstances.set(id, this);
+      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();
@@ -86,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;
@@ -107,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) {
@@ -148,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();
@@ -175,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

@@ -1,3 +1,20 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
 // src/utils/index.ts
 var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
 var isBrowser = typeof window !== "undefined" && !isReactNative;
@@ -7,14 +24,15 @@ 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();
+      return this.data;
     };
     this.subscribe = (fn) => {
       this.listeners.add(fn);
@@ -27,15 +45,25 @@ var WeaverseItemStore = class {
         return fn(this.data);
       });
     };
-    this.data = itemData;
     let { type, id } = itemData;
-    if (type && id) {
-      this.Component = weaverse.elementInstances.get(type);
+    this.weaverse = weaverse;
+    if (id && type) {
       weaverse.itemInstances.set(id, this);
+      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();
@@ -54,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;
@@ -75,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) {
@@ -116,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();
@@ -143,6 +180,7 @@ var Weaverse = class {
     }
   }
 };
+var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 export {
   Weaverse,

package/package.json

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