@weaverse/core 0.3.2 → 0.3.5

package/dist/index.d.ts

@@ -1,5 +1,33 @@
 import Stitches from '@stitches/core/types/stitches';
 
+declare type InspectorComponentType = "textarea" | "color";
+declare type WeaverseElementInspector = {
+    binding: 'data' | 'style';
+    key: string;
+    componentType: InspectorComponentType;
+};
+declare type WeaverseElementSetting = {
+    tab: string;
+    label: string;
+    inspectors: WeaverseElementInspector[];
+};
+declare type WeaverseElement = {
+    Component: any;
+    schema: {
+        title: string;
+        type: string;
+        settings: WeaverseElementSetting[];
+    };
+};
+declare type WeaverseElementMap = {
+    [key: string]: WeaverseElement;
+};
+declare global {
+    interface Window {
+        WeaverseStudioBridge: any;
+    }
+}
+
 interface ProjectDataItemType {
     type: string;
     name?: string;
@@ -20,12 +48,40 @@ declare type WeaverseType = {
     projectKey?: string;
     projectData?: ProjectDataType;
 };
+/**
+ * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
+ * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param weaverse {Weaverse} Weaverse instance
+ * Usage:
+ * ```jsx
+ * useEffect(() => {
+ *     let handleUpdate = (update: any) => {
+ *       setData({...update})
+ *     }
+ *     itemInstance.subscribe(handleUpdate)
+ *     return () => {
+ *       itemInstance.unsubscribe(handleUpdate)
+ *     }
+ *   }, [])
+ *   ```
+ */
+declare class WeaverseItemStore {
+    data: any;
+    listeners: Set<any>;
+    Component: any;
+    ref: any;
+    constructor(itemData: any, weaverse: Weaverse);
+    setData: (data: any) => void;
+    subscribe: (fn: any) => void;
+    unsubscribe: (fn: any) => void;
+    triggerUpdate: () => void;
+}
 declare class Weaverse {
     /**
      * For storing, registering element React component from Weaverse or created by user/developer
      * @type {Map<string, React.Component>}
      */
-    elementInstances: Map<string, any>;
+    elementInstances: Map<string, WeaverseElement>;
     /**
      * list of element/items store to provide data, handle state update, state sharing, etc.
      * @type {Map<string, any>}
@@ -63,6 +119,7 @@ declare class Weaverse {
      */
     stitchesInstance: Stitches | any;
     studioBridge?: any;
+    static WeaverseItemStore: typeof WeaverseItemStore;
     /**
      * constructor
      * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
@@ -75,9 +132,8 @@ declare class Weaverse {
      * @param name {string} unique name of the custom React Component
      * @param element {React.Component} custom React Component
      */
-    registerElement(name: string, element: any): void;
+    registerElement(element: WeaverseElement): void;
     init(): void;
-    listen(callback: any): void;
     loadStudio(): void;
     subscribe(fn: any): void;
     unsubscribe(fn: any): void;
@@ -91,41 +147,11 @@ declare class Weaverse {
      * fetch and update the project data, then trigger update to re-render the WeaverseRoot
      */
     updateProjectData(): void;
-    triggerEditorUpdate(type?: string): void;
     initProjectItemData(): void;
-    addItem(item: any): WeaverseItemStore;
-}
-/**
- * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
- * @param itemData {ProjectDataItemType} Weaverse item data
- * @param weaverse {Weaverse} Weaverse instance
- * Usage:
- * ```jsx
- * useEffect(() => {
- *     let handleUpdate = (update: any) => {
- *       setData({...update})
- *     }
- *     itemInstance.subscribe(handleUpdate)
- *     return () => {
- *       itemInstance.unsubscribe(handleUpdate)
- *     }
- *   }, [])
- *   ```
- */
-declare class WeaverseItemStore {
-    data: any;
-    listeners: Set<any>;
-    Component: any;
-    ref: any;
-    constructor(itemData: any, weaverse: Weaverse);
-    setData: (data: any) => void;
-    subscribe: (fn: any) => void;
-    unsubscribe: (fn: any) => void;
-    triggerUpdate: () => void;
 }
 
 declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { ProjectDataItemType, ProjectDataType, Weaverse, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+export { InspectorComponentType, ProjectDataItemType, ProjectDataType, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
@@ -35,6 +28,7 @@ __export(src_exports, {
   isIframe: () => isIframe,
   isReactNative: () => isReactNative
 });
+module.exports = __toCommonJS(src_exports);
 
 // src/utils/index.ts
 var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
@@ -43,6 +37,36 @@ var isIframe = isBrowser && window.top !== window.self;
 
 // src/core.ts
 var stitches = __toESM(require("@stitches/core"));
+var WeaverseItemStore = class {
+  constructor(itemData = {}, weaverse) {
+    this.data = {};
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ref = {
+      current: null
+    };
+    this.setData = (data) => {
+      this.data = Object.assign(this.data, data);
+      this.triggerUpdate();
+    };
+    this.subscribe = (fn) => {
+      this.listeners.add(fn);
+    };
+    this.unsubscribe = (fn) => {
+      this.listeners.delete(fn);
+    };
+    this.triggerUpdate = () => {
+      this.listeners.forEach((fn) => {
+        return fn(this.data);
+      });
+    };
+    this.data = itemData;
+    let { type, id } = itemData;
+    if (type && id) {
+      this.Component = weaverse.elementInstances.get(type);
+      weaverse.itemInstances.set(id, this);
+    }
+  }
+};
 var Weaverse = class {
   constructor({ appUrl, projectKey, projectData } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
@@ -60,12 +84,17 @@ var Weaverse = class {
     projectData && (this.projectData = projectData);
     this.init();
   }
-  registerElement(name, element) {
-    this.elementInstances.set(name, element);
+  registerElement(element) {
+    var _a;
+    if ((_a = element == null ? void 0 : element.schema) == null ? void 0 : _a.type) {
+      this.elementInstances.set(element.schema.type, element);
+    } else {
+      throw new Error("Weaverse: registerElement: schema.type is required");
+    }
   }
   init() {
     this.stitchesInstance = stitches.createStitches({
-      prefix: "weaverse",
+      prefix: "we",
       media: {
         bp1: "(min-width: 640px)",
         bp2: "(max-width: 768px)",
@@ -74,39 +103,28 @@ var Weaverse = class {
     });
     this.loadStudio();
   }
-  listen(callback) {
-    if (window.addEventListener) {
-      window.addEventListener("message", callback, false);
-    } else {
-      window.attachEvent("onmessage", callback);
-    }
-  }
   loadStudio() {
     if (isIframe) {
-      console.log("Weaverse SDK is initializing...", isIframe);
-      let initStudio = () => {
-        let StudioBridge = window.WeaverseStudioBridge;
-        this.studioBridge = new StudioBridge(this);
-        this.studioBridge.subscribeMessageEvent();
-        this.triggerUpdate();
-        console.log("studio bridge initialized", this.studioBridge);
-      };
-      window.addEventListener("load", () => {
-        window.addEventListener("message", (e) => {
-          var _a;
-          if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
-            console.log("studio message", e.data);
-            this.isEditor = true;
-            if (!window.WeaverseStudioBridge) {
-              const studioBridgeScript = document.createElement("script");
-              studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=1`;
-              studioBridgeScript.onload = initStudio;
-              document.body.appendChild(studioBridgeScript);
-            } else {
-              initStudio();
-            }
+      window.addEventListener("message", (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
+          let initStudio = () => {
+            let StudioBridge = window.WeaverseStudioBridge;
+            this.studioBridge = new StudioBridge(this);
+            this.studioBridge.subscribeMessageEvent();
+            this.triggerUpdate();
+          };
+          this.isEditor = true;
+          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();
           }
-        });
+        }
       });
     }
   }
@@ -118,10 +136,15 @@ var Weaverse = class {
   }
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
-    this.triggerEditorUpdate();
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor("weaverse.editor.updateProject", {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
+    }
   }
   fetchProjectData(fetch = globalThis.fetch) {
-    console.log("fetching project data...");
     return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
   }
   updateProjectData() {
@@ -137,60 +160,18 @@ var Weaverse = class {
       });
     }
   }
-  triggerEditorUpdate(type = "weaverse.workspace.init") {
-    if (this.isEditor && this.studioBridge) {
-      this.studioBridge.sendMessageToEditor(type, {
-        projectData: this.projectData,
-        projectKey: this.projectKey,
-        appUrl: this.appUrl
-      });
-    }
-  }
   initProjectItemData() {
     let data = this.projectData;
     if (data.items) {
       data.items.forEach((item) => {
-        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this);
-        this.itemInstances.set(item.id, itemStore);
-      });
-    }
-  }
-  addItem(item) {
-    let itemStore = new WeaverseItemStore(item, this);
-    this.itemInstances.set(item.id, itemStore);
-    return itemStore;
-  }
-};
-var WeaverseItemStore = class {
-  constructor(itemData = {}, weaverse) {
-    this.data = {};
-    this.listeners = /* @__PURE__ */ new Set();
-    this.ref = {
-      current: null
-    };
-    this.setData = (data) => {
-      this.data = Object.assign(this.data, data);
-      this.triggerUpdate();
-    };
-    this.subscribe = (fn) => {
-      this.listeners.add(fn);
-    };
-    this.unsubscribe = (fn) => {
-      this.listeners.delete(fn);
-    };
-    this.triggerUpdate = () => {
-      this.listeners.forEach((fn) => {
-        return fn(this.data);
+        if (!this.itemInstances.get(item.id)) {
+          new WeaverseItemStore(item, this);
+        }
       });
-    };
-    this.data = itemData;
-    let { type, id } = itemData;
-    if (type && id) {
-      this.Component = weaverse.elementInstances.get(type);
     }
   }
 };
-module.exports = __toCommonJS(src_exports);
+Weaverse.WeaverseItemStore = WeaverseItemStore;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Weaverse,

package/dist/index.mjs

@@ -5,6 +5,36 @@ var isIframe = isBrowser && window.top !== window.self;
 
 // src/core.ts
 import * as stitches from "@stitches/core";
+var WeaverseItemStore = class {
+  constructor(itemData = {}, weaverse) {
+    this.data = {};
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ref = {
+      current: null
+    };
+    this.setData = (data) => {
+      this.data = Object.assign(this.data, data);
+      this.triggerUpdate();
+    };
+    this.subscribe = (fn) => {
+      this.listeners.add(fn);
+    };
+    this.unsubscribe = (fn) => {
+      this.listeners.delete(fn);
+    };
+    this.triggerUpdate = () => {
+      this.listeners.forEach((fn) => {
+        return fn(this.data);
+      });
+    };
+    this.data = itemData;
+    let { type, id } = itemData;
+    if (type && id) {
+      this.Component = weaverse.elementInstances.get(type);
+      weaverse.itemInstances.set(id, this);
+    }
+  }
+};
 var Weaverse = class {
   constructor({ appUrl, projectKey, projectData } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
@@ -22,12 +52,17 @@ var Weaverse = class {
     projectData && (this.projectData = projectData);
     this.init();
   }
-  registerElement(name, element) {
-    this.elementInstances.set(name, element);
+  registerElement(element) {
+    var _a;
+    if ((_a = element == null ? void 0 : element.schema) == null ? void 0 : _a.type) {
+      this.elementInstances.set(element.schema.type, element);
+    } else {
+      throw new Error("Weaverse: registerElement: schema.type is required");
+    }
   }
   init() {
     this.stitchesInstance = stitches.createStitches({
-      prefix: "weaverse",
+      prefix: "we",
       media: {
         bp1: "(min-width: 640px)",
         bp2: "(max-width: 768px)",
@@ -36,39 +71,28 @@ var Weaverse = class {
     });
     this.loadStudio();
   }
-  listen(callback) {
-    if (window.addEventListener) {
-      window.addEventListener("message", callback, false);
-    } else {
-      window.attachEvent("onmessage", callback);
-    }
-  }
   loadStudio() {
     if (isIframe) {
-      console.log("Weaverse SDK is initializing...", isIframe);
-      let initStudio = () => {
-        let StudioBridge = window.WeaverseStudioBridge;
-        this.studioBridge = new StudioBridge(this);
-        this.studioBridge.subscribeMessageEvent();
-        this.triggerUpdate();
-        console.log("studio bridge initialized", this.studioBridge);
-      };
-      window.addEventListener("load", () => {
-        window.addEventListener("message", (e) => {
-          var _a;
-          if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
-            console.log("studio message", e.data);
-            this.isEditor = true;
-            if (!window.WeaverseStudioBridge) {
-              const studioBridgeScript = document.createElement("script");
-              studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=1`;
-              studioBridgeScript.onload = initStudio;
-              document.body.appendChild(studioBridgeScript);
-            } else {
-              initStudio();
-            }
+      window.addEventListener("message", (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
+          let initStudio = () => {
+            let StudioBridge = window.WeaverseStudioBridge;
+            this.studioBridge = new StudioBridge(this);
+            this.studioBridge.subscribeMessageEvent();
+            this.triggerUpdate();
+          };
+          this.isEditor = true;
+          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();
           }
-        });
+        }
       });
     }
   }
@@ -80,10 +104,15 @@ var Weaverse = class {
   }
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
-    this.triggerEditorUpdate();
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor("weaverse.editor.updateProject", {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
+    }
   }
   fetchProjectData(fetch = globalThis.fetch) {
-    console.log("fetching project data...");
     return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
   }
   updateProjectData() {
@@ -99,59 +128,18 @@ var Weaverse = class {
       });
     }
   }
-  triggerEditorUpdate(type = "weaverse.workspace.init") {
-    if (this.isEditor && this.studioBridge) {
-      this.studioBridge.sendMessageToEditor(type, {
-        projectData: this.projectData,
-        projectKey: this.projectKey,
-        appUrl: this.appUrl
-      });
-    }
-  }
   initProjectItemData() {
     let data = this.projectData;
     if (data.items) {
       data.items.forEach((item) => {
-        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this);
-        this.itemInstances.set(item.id, itemStore);
-      });
-    }
-  }
-  addItem(item) {
-    let itemStore = new WeaverseItemStore(item, this);
-    this.itemInstances.set(item.id, itemStore);
-    return itemStore;
-  }
-};
-var WeaverseItemStore = class {
-  constructor(itemData = {}, weaverse) {
-    this.data = {};
-    this.listeners = /* @__PURE__ */ new Set();
-    this.ref = {
-      current: null
-    };
-    this.setData = (data) => {
-      this.data = Object.assign(this.data, data);
-      this.triggerUpdate();
-    };
-    this.subscribe = (fn) => {
-      this.listeners.add(fn);
-    };
-    this.unsubscribe = (fn) => {
-      this.listeners.delete(fn);
-    };
-    this.triggerUpdate = () => {
-      this.listeners.forEach((fn) => {
-        return fn(this.data);
+        if (!this.itemInstances.get(item.id)) {
+          new WeaverseItemStore(item, this);
+        }
       });
-    };
-    this.data = itemData;
-    let { type, id } = itemData;
-    if (type && id) {
-      this.Component = weaverse.elementInstances.get(type);
     }
   }
 };
+Weaverse.WeaverseItemStore = WeaverseItemStore;
 export {
   Weaverse,
   WeaverseItemStore,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.2",
+  "version": "0.3.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -16,12 +16,12 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch",
-    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist"
+    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist",
+    "prepublish": "npm run build"
   },
   "name": "@weaverse/core",
   "author": "Paul",
   "dependencies": {
-    "@stitches/core": "^1.2.7",
-    "uuid": "^8.3.2"
+    "@stitches/core": "^1.2.7"
   }
 }