@weaverse/core 0.2.3 → 0.2.4

package/dist/core.cjs.development.js

@@ -170,11 +170,25 @@ var Weaverse = /*#__PURE__*/function () {
   ;
 
   _proto.updateProjectData = function updateProjectData() {
+    var _this2 = this;
 
-    console.log('this.projectData', this.projectData);
-    this.initItemData();
-    this.triggerUpdate();
-    return;
+    // console.log('this.projectData', this.projectData)
+    // this.initItemData()
+    // this.triggerUpdate()
+    // return
+    if (this.projectKey) {
+      this.fetchProjectData().then(function (data) {
+        if (data) {
+          _this2.projectData = data;
+
+          _this2.initItemData();
+
+          _this2.triggerUpdate();
+        }
+      })["catch"](function (err) {
+        console.error(err);
+      });
+    }
   };
 
   _proto.triggerEditorUpdate = function triggerEditorUpdate(type) {
@@ -182,16 +196,12 @@ var Weaverse = /*#__PURE__*/function () {
       type = 'weaverse.workspace.init';
     }
 
-    if (this.isEditor) {
-      var _window$top;
-
-      (_window$top = window.top) == null ? void 0 : _window$top.postMessage({
-        type: type,
-        payload: {
-          projectKey: this.projectKey,
-          projectData: this.projectData
-        }
-      }, '*');
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor(type, {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
     }
   };
 

package/dist/core.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs.development.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    console.log('this.projectData', this.projectData)\n    this.initItemData()\n    this.triggerUpdate()\n    return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor) {\n      window.top?.postMessage({\n        type, payload: {\n          projectKey: this.projectKey,\n          projectData: this.projectData\n        }\n      }, '*')\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","process","items","Set","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","postMessage","payload","item","itemStore","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","Object","assign","Component"],"mappings":"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"}
+{"version":3,"file":"core.cjs.development.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    // console.log('this.projectData', this.projectData)\n    // this.initItemData()\n    // this.triggerUpdate()\n    // return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor && this.studioBridge) {\n      this.studioBridge.sendMessageToEditor(type, {\n        projectData: this.projectData,\n        projectKey: this.projectKey,\n        appUrl: this.appUrl\n      })\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","process","items","Set","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","err","sendMessageToEditor","item","itemStore","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","Object","assign","Component"],"mappings":"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"}

package/dist/core.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("isomorphic-unfetch"))&&"object"==typeof t&&"default"in t?t.default:t;require("process");var i="object"==typeof navigator&&"ReactNative"===navigator.product,s="undefined"!=typeof window&&!i,r=s&&window.top!==window.self,n=require("@stitches/core"),a=function(){function t(t){var e=void 0===t?{}:t,i=e.appUrl,s=e.projectKey,r=e.projectData;this.elementInstances=new Map,this.itemInstances=new Map,this.appUrl="https://weaverse.io",this.projectKey="",this.projectData={items:[]},this.listeners=new Set,this.isEditor=!1,this.appUrl=i||this.appUrl,this.projectKey=s||this.projectKey,r&&(this.projectData=r),this.init()}var i=t.prototype;return i.registerElement=function(t,e){this.elementInstances.set(t,e)},i.init=function(){this.stitchesInstance=n.createStitches({prefix:"weaverse",media:{bp1:"(min-width: 640px)",bp2:"(max-width: 768px)",bp3:"(min-width: 1024px)"}}),this.loadStudio()},i.loadStudio=function(){var t=this;if(r){var e=function(){var e=window.WeaverseStudioBridge;t.studioBridge=new e(t),t.studioBridge.subscribeMessageEvent(),t.triggerUpdate(),console.log("studio bridge initialized",t.studioBridge)};window.addEventListener("message",(function(i){var s;if("weaverse.editor.ready"===(null==(s=i.data)?void 0:s.type))if(t.isEditor=!0,window.WeaverseStudioBridge)e();else{var r=document.createElement("script");r.src=t.appUrl+"/assets/studio/studio-bridge.js",r.onload=e,document.body.appendChild(r)}}))}},i.subscribe=function(t){this.listeners.add(t)},i.unsubscribe=function(t){this.listeners.delete(t)},i.triggerUpdate=function(){this.listeners.forEach((function(t){return t()})),this.triggerEditorUpdate()},i.fetchProjectData=function(){return e(this.appUrl+"/api/public/"+this.projectKey).then((function(t){return t.json()})).catch(console.error)},i.updateProjectData=function(){console.log("this.projectData",this.projectData),this.initItemData(),this.triggerUpdate()},i.triggerEditorUpdate=function(t){var e;void 0===t&&(t="weaverse.workspace.init"),this.isEditor&&(null==(e=window.top)||e.postMessage({type:t,payload:{projectKey:this.projectKey,projectData:this.projectData}},"*"))},i.initItemData=function(){var t=this,e=this.projectData;e.items&&e.items.forEach((function(e){var i=t.itemInstances.get(e.id)||new o(e,t);t.itemInstances.set(e.id,i)}))},t}(),o=function(t,e){var i=this;void 0===t&&(t={}),this.data={},this.listeners=new Set,this.ref={current:null},this.setData=function(t){i.data=Object.assign(i.data,t),i.triggerUpdate()},this.subscribe=function(t){i.listeners.add(t)},this.unsubscribe=function(t){i.listeners.delete(t)},this.triggerUpdate=function(){i.listeners.forEach((function(t){return t(i.data)}))},this.data=t;var s=t.type;s&&(this.Component=e.elementInstances.get(s))};exports.Weaverse=a,exports.WeaverseItemStore=o,exports.isBrowser=s,exports.isIframe=r,exports.isReactNative=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("isomorphic-unfetch"))&&"object"==typeof t&&"default"in t?t.default:t;require("process");var i="object"==typeof navigator&&"ReactNative"===navigator.product,s="undefined"!=typeof window&&!i,r=s&&window.top!==window.self,n=require("@stitches/core"),a=function(){function t(t){var e=void 0===t?{}:t,i=e.appUrl,s=e.projectKey,r=e.projectData;this.elementInstances=new Map,this.itemInstances=new Map,this.appUrl="https://weaverse.io",this.projectKey="",this.projectData={items:[]},this.listeners=new Set,this.isEditor=!1,this.appUrl=i||this.appUrl,this.projectKey=s||this.projectKey,r&&(this.projectData=r),this.init()}var i=t.prototype;return i.registerElement=function(t,e){this.elementInstances.set(t,e)},i.init=function(){this.stitchesInstance=n.createStitches({prefix:"weaverse",media:{bp1:"(min-width: 640px)",bp2:"(max-width: 768px)",bp3:"(min-width: 1024px)"}}),this.loadStudio()},i.loadStudio=function(){var t=this;if(r){var e=function(){var e=window.WeaverseStudioBridge;t.studioBridge=new e(t),t.studioBridge.subscribeMessageEvent(),t.triggerUpdate(),console.log("studio bridge initialized",t.studioBridge)};window.addEventListener("message",(function(i){var s;if("weaverse.editor.ready"===(null==(s=i.data)?void 0:s.type))if(t.isEditor=!0,window.WeaverseStudioBridge)e();else{var r=document.createElement("script");r.src=t.appUrl+"/assets/studio/studio-bridge.js",r.onload=e,document.body.appendChild(r)}}))}},i.subscribe=function(t){this.listeners.add(t)},i.unsubscribe=function(t){this.listeners.delete(t)},i.triggerUpdate=function(){this.listeners.forEach((function(t){return t()})),this.triggerEditorUpdate()},i.fetchProjectData=function(){return e(this.appUrl+"/api/public/"+this.projectKey).then((function(t){return t.json()})).catch(console.error)},i.updateProjectData=function(){var t=this;this.projectKey&&this.fetchProjectData().then((function(e){e&&(t.projectData=e,t.initItemData(),t.triggerUpdate())})).catch((function(t){console.error(t)}))},i.triggerEditorUpdate=function(t){void 0===t&&(t="weaverse.workspace.init"),this.isEditor&&this.studioBridge&&this.studioBridge.sendMessageToEditor(t,{projectData:this.projectData,projectKey:this.projectKey,appUrl:this.appUrl})},i.initItemData=function(){var t=this,e=this.projectData;e.items&&e.items.forEach((function(e){var i=t.itemInstances.get(e.id)||new o(e,t);t.itemInstances.set(e.id,i)}))},t}(),o=function(t,e){var i=this;void 0===t&&(t={}),this.data={},this.listeners=new Set,this.ref={current:null},this.setData=function(t){i.data=Object.assign(i.data,t),i.triggerUpdate()},this.subscribe=function(t){i.listeners.add(t)},this.unsubscribe=function(t){i.listeners.delete(t)},this.triggerUpdate=function(){i.listeners.forEach((function(t){return t(i.data)}))},this.data=t;var s=t.type;s&&(this.Component=e.elementInstances.get(s))};exports.Weaverse=a,exports.WeaverseItemStore=o,exports.isBrowser=s,exports.isIframe=r,exports.isReactNative=i;
 //# sourceMappingURL=core.cjs.production.min.js.map

package/dist/core.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs.production.min.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    console.log('this.projectData', this.projectData)\n    this.initItemData()\n    this.triggerUpdate()\n    return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor) {\n      window.top?.postMessage({\n        type, payload: {\n          projectKey: this.projectKey,\n          projectData: this.projectData\n        }\n      }, '*')\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","items","Set","this","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","_this","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","postMessage","payload","item","itemStore","_this3","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","_this4","Object","assign","Component"],"mappings":"oLAAaA,EAAqC,iBAAdC,WAAgD,gBAAtBA,UAAUC,QAC3DC,EAA8B,oBAAXC,SAA2BJ,EAC9CK,EAAWF,GAAaC,OAAOE,MAAQF,OAAOG,KCOvDC,EAAWC,QAAQ,kBA2BVC,4CAqDmD,KAAjDC,IAAAA,OAAQC,IAAAA,WAAYC,IAAAA,kCAhDd,IAAIC,uBAKP,IAAIA,gBAKgE,sCAK/D,oBAKU,CAC7BC,MAAO,mBAMa,IAAIC,mBAOf,OAeJL,OAASA,GAAUM,KAAKN,YACxBC,WAAaA,GAAcK,KAAKL,WACrCC,IAAgBI,KAAKJ,YAAcA,QAC9BK,kCAQPC,gBAAA,SAAgBC,EAAcC,QACvBC,iBAAiBC,IAAIH,EAAMC,MAGlCH,KAAA,gBAEOM,iBAAmBhB,EAASiB,eAC/B,CACEC,OAAQ,WACRC,MAAO,CACLC,IAAK,qBACLC,IAAK,qBACLC,IAAK,8BAINC,gBAGPA,WAAA,yBACM1B,EAAU,KACR2B,EAAa,eACXC,EAAe7B,OAAO8B,qBAC1BC,EAAKC,aAAe,IAAIH,EAAaE,GACrCA,EAAKC,aAAaC,wBAClBF,EAAKG,gBACLC,QAAQC,IAAI,4BAA6BL,EAAKC,eAEhDhC,OAAOqC,iBAAiB,WAAW,SAAAC,YACZ,oCAAjBA,EAAEC,eAAMC,SACVT,EAAKU,UAAW,EACXzC,OAAO8B,qBAOVF,QAPgC,KAE1Bc,EAAqBC,SAASC,cAAc,UAClDF,EAAmBG,IAASd,EAAKxB,yCACjCmC,EAAmBI,OAASlB,EAC5Be,SAASI,KAAKC,YAAYN,WASpCO,UAAA,SAAUC,QACHC,UAAUC,IAAIF,MAGrBG,YAAA,SAAYH,QACLC,iBAAiBD,MAGxBhB,cAAA,gBACOiB,UAAUG,SAAQ,SAAAJ,UAAMA,YACxBK,yBAMPC,iBAAA,kBACSC,EAAM5C,KAAKN,sBAAwBM,KAAKL,YAAckD,MAAK,SAAAC,UAAKA,EAAEC,gBAAczB,QAAQ0B,UAMjGC,kBAAA,WACE3B,QAAQC,IAAI,mBAAoBvB,KAAKJ,kBAChCsD,oBACA7B,mBAgBPqB,oBAAA,SAAoBf,kBAAAA,IAAAA,EAAO,2BACrB3B,KAAK4B,oBACPzC,OAAOE,QAAK8D,YAAY,CACtBxB,KAAAA,EAAMyB,QAAS,CACbzD,WAAYK,KAAKL,WACjBC,YAAaI,KAAKJ,cAEnB,SAIPsD,aAAA,sBACMxB,EAAO1B,KAAKJ,YACZ8B,EAAK5B,OACP4B,EAAK5B,MAAM2C,SAAQ,SAAAY,OACbC,EAAYC,EAAKC,cAAcC,IAAIJ,EAAKK,KAAO,IAAIC,EAAkBN,EAAME,GAC/EA,EAAKC,cAAclD,IAAI+C,EAAKK,GAAIJ,YAuB3BK,EAQX,SAAYC,EAAoBC,uBAApBD,IAAAA,EAAgB,cAPhB,kBACU,IAAI7D,aAEf,CACT+D,QAAS,mBAWD,SAACpC,GACTqC,EAAKrC,KAAOsC,OAAOC,OAAOF,EAAKrC,KAAMA,GACrCqC,EAAK1C,gCAGK,SAACgB,GACX0B,EAAKzB,UAAUC,IAAIF,qBAGP,SAACA,GACb0B,EAAKzB,iBAAiBD,uBAGR,WACd0B,EAAKzB,UAAUG,SAAQ,SAAAJ,UACdA,EAAG0B,EAAKrC,eAtBZA,KAAOkC,MACPjC,EAAQiC,EAARjC,KACDA,SACGuC,UAAYL,EAASxD,iBAAiBoD,IAAI9B"}
+{"version":3,"file":"core.cjs.production.min.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    // console.log('this.projectData', this.projectData)\n    // this.initItemData()\n    // this.triggerUpdate()\n    // return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor && this.studioBridge) {\n      this.studioBridge.sendMessageToEditor(type, {\n        projectData: this.projectData,\n        projectKey: this.projectKey,\n        appUrl: this.appUrl\n      })\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","items","Set","this","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","_this","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","_this2","initItemData","err","sendMessageToEditor","item","itemStore","_this3","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","_this4","Object","assign","Component"],"mappings":"oLAAaA,EAAqC,iBAAdC,WAAgD,gBAAtBA,UAAUC,QAC3DC,EAA8B,oBAAXC,SAA2BJ,EAC9CK,EAAWF,GAAaC,OAAOE,MAAQF,OAAOG,KCOvDC,EAAWC,QAAQ,kBA2BVC,4CAqDmD,KAAjDC,IAAAA,OAAQC,IAAAA,WAAYC,IAAAA,kCAhDd,IAAIC,uBAKP,IAAIA,gBAKgE,sCAK/D,oBAKU,CAC7BC,MAAO,mBAMa,IAAIC,mBAOf,OAeJL,OAASA,GAAUM,KAAKN,YACxBC,WAAaA,GAAcK,KAAKL,WACrCC,IAAgBI,KAAKJ,YAAcA,QAC9BK,kCAQPC,gBAAA,SAAgBC,EAAcC,QACvBC,iBAAiBC,IAAIH,EAAMC,MAGlCH,KAAA,gBAEOM,iBAAmBhB,EAASiB,eAC/B,CACEC,OAAQ,WACRC,MAAO,CACLC,IAAK,qBACLC,IAAK,qBACLC,IAAK,8BAINC,gBAGPA,WAAA,yBACM1B,EAAU,KACR2B,EAAa,eACXC,EAAe7B,OAAO8B,qBAC1BC,EAAKC,aAAe,IAAIH,EAAaE,GACrCA,EAAKC,aAAaC,wBAClBF,EAAKG,gBACLC,QAAQC,IAAI,4BAA6BL,EAAKC,eAEhDhC,OAAOqC,iBAAiB,WAAW,SAAAC,YACZ,oCAAjBA,EAAEC,eAAMC,SACVT,EAAKU,UAAW,EACXzC,OAAO8B,qBAOVF,QAPgC,KAE1Bc,EAAqBC,SAASC,cAAc,UAClDF,EAAmBG,IAASd,EAAKxB,yCACjCmC,EAAmBI,OAASlB,EAC5Be,SAASI,KAAKC,YAAYN,WASpCO,UAAA,SAAUC,QACHC,UAAUC,IAAIF,MAGrBG,YAAA,SAAYH,QACLC,iBAAiBD,MAGxBhB,cAAA,gBACOiB,UAAUG,SAAQ,SAAAJ,UAAMA,YACxBK,yBAMPC,iBAAA,kBACSC,EAAM5C,KAAKN,sBAAwBM,KAAKL,YAAckD,MAAK,SAAAC,UAAKA,EAAEC,gBAAczB,QAAQ0B,UAMjGC,kBAAA,sBAKMjD,KAAKL,iBACFgD,mBAAmBE,MAAK,SAAAnB,GACvBA,IACFwB,EAAKtD,YAAc8B,EACnBwB,EAAKC,eACLD,EAAK7B,2BAEA,SAAA+B,GACP9B,QAAQ0B,MAAMI,SAMpBV,oBAAA,SAAoBf,YAAAA,IAAAA,EAAO,2BACrB3B,KAAK4B,UAAY5B,KAAKmB,mBACnBA,aAAakC,oBAAoB1B,EAAM,CAC1C/B,YAAaI,KAAKJ,YAClBD,WAAYK,KAAKL,WACjBD,OAAQM,KAAKN,YAKnByD,aAAA,sBACMzB,EAAO1B,KAAKJ,YACZ8B,EAAK5B,OACP4B,EAAK5B,MAAM2C,SAAQ,SAAAa,OACbC,EAAYC,EAAKC,cAAcC,IAAIJ,EAAKK,KAAO,IAAIC,EAAkBN,EAAME,GAC/EA,EAAKC,cAAcnD,IAAIgD,EAAKK,GAAIJ,YAuB3BK,EAQX,SAAYC,EAAoBC,uBAApBD,IAAAA,EAAgB,cAPhB,kBACU,IAAI9D,aAEf,CACTgE,QAAS,mBAWD,SAACrC,GACTsC,EAAKtC,KAAOuC,OAAOC,OAAOF,EAAKtC,KAAMA,GACrCsC,EAAK3C,gCAGK,SAACgB,GACX2B,EAAK1B,UAAUC,IAAIF,qBAGP,SAACA,GACb2B,EAAK1B,iBAAiBD,uBAGR,WACd2B,EAAK1B,UAAUG,SAAQ,SAAAJ,UACdA,EAAG2B,EAAKtC,eAtBZA,KAAOmC,MACPlC,EAAQkC,EAARlC,KACDA,SACGwC,UAAYL,EAASzD,iBAAiBqD,IAAI/B"}

package/dist/core.esm.js

@@ -164,11 +164,25 @@ var Weaverse = /*#__PURE__*/function () {
   ;
 
   _proto.updateProjectData = function updateProjectData() {
+    var _this2 = this;
 
-    console.log('this.projectData', this.projectData);
-    this.initItemData();
-    this.triggerUpdate();
-    return;
+    // console.log('this.projectData', this.projectData)
+    // this.initItemData()
+    // this.triggerUpdate()
+    // return
+    if (this.projectKey) {
+      this.fetchProjectData().then(function (data) {
+        if (data) {
+          _this2.projectData = data;
+
+          _this2.initItemData();
+
+          _this2.triggerUpdate();
+        }
+      })["catch"](function (err) {
+        console.error(err);
+      });
+    }
   };
 
   _proto.triggerEditorUpdate = function triggerEditorUpdate(type) {
@@ -176,16 +190,12 @@ var Weaverse = /*#__PURE__*/function () {
       type = 'weaverse.workspace.init';
     }
 
-    if (this.isEditor) {
-      var _window$top;
-
-      (_window$top = window.top) == null ? void 0 : _window$top.postMessage({
-        type: type,
-        payload: {
-          projectKey: this.projectKey,
-          projectData: this.projectData
-        }
-      }, '*');
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor(type, {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
     }
   };
 

package/dist/core.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.esm.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    console.log('this.projectData', this.projectData)\n    this.initItemData()\n    this.triggerUpdate()\n    return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor) {\n      window.top?.postMessage({\n        type, payload: {\n          projectKey: this.projectKey,\n          projectData: this.projectData\n        }\n      }, '*')\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","process","NODE_ENV","items","Set","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","postMessage","payload","item","itemStore","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","Object","assign","Component"],"mappings":"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"}
+{"version":3,"file":"core.esm.js","sources":["../src/utils/index.ts","../src/core.ts"],"sourcesContent":["export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'\nexport const isBrowser = typeof window !== 'undefined' && !isReactNative\nexport const isIframe = isBrowser && window.top !== window.self","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\nimport fetch from 'isomorphic-unfetch'\nimport * as process from 'process'\nimport Stitches from '@stitches/core/types/stitches'\nimport {isIframe} from './utils'\n// stitches problem, we should use require instead of import\n// using stitches core only for framework-agnostic code\nlet stitches = require('@stitches/core')\n\n\nexport interface ProjectDataItemType {\n  type: string\n  name?: string\n  id: string | number\n  description?: string\n  childIds?: Array<string | number>\n  css?: {\n    [key: string]: string\n  }\n}\n\nexport interface ProjectDataType {\n  items: ProjectDataItemType[]\n}\n\n\nexport type WeaverseType = {\n  [key: string]: any\n  appUrl?: string,\n  projectKey?: string,\n  projectData?: ProjectDataType\n}\n\n\nexport class Weaverse {\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   * @type {Map<string, React.Component>}\n   */\n  elementInstances = new Map<string, any>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\n   * @type {Map<string, any>}\n   */\n  itemInstances = new Map<string | number, WeaverseItemStore>()\n  /**\n   * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @type {string}\n   */\n  appUrl: string = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io'\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectKey: string = ''\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering\n   */\n  projectData: ProjectDataType = {\n    items: []\n  }\n  /**\n   * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n   * @type {Map<string, (data: any) => void>}\n   */\n  listeners: Set<any> = new Set()\n  /**\n   * check whether the sdk is inEditor or not\n   * if isEditor is true, it means the sdk is inEditor mode, render the editor UI\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isEditor = false\n  /**\n   * stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n\n  /**\n   * constructor\n   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectKey {string} Weaverse project key to access project data via API\n   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   */\n  constructor({appUrl, projectKey, projectData}: WeaverseType = {}) {\n    this.appUrl = appUrl || this.appUrl\n    this.projectKey = projectKey || this.projectKey\n    projectData && (this.projectData = projectData)\n    this.init()\n  }\n\n  /**\n   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param name {string} unique name of the custom React Component\n   * @param element {React.Component} custom React Component\n   */\n  registerElement(name: string, element: any) {\n    this.elementInstances.set(name, element)\n  }\n\n  init() {\n    // init the stitches instance\n    this.stitchesInstance = stitches.createStitches(\n      {\n        prefix: 'weaverse',\n        media: {\n          bp1: '(min-width: 640px)',\n          bp2: '(max-width: 768px)',\n          bp3: '(min-width: 1024px)'\n        }\n      }\n    )\n    this.loadStudio()\n  }\n\n  loadStudio() {\n    if (isIframe) {\n      let initStudio = () => {\n        let StudioBridge = window.WeaverseStudioBridge\n        this.studioBridge = new StudioBridge(this)\n        this.studioBridge.subscribeMessageEvent()\n        this.triggerUpdate()\n        console.log('studio bridge initialized', this.studioBridge)\n      }\n      window.addEventListener('message', e => {\n        if (e.data?.type === 'weaverse.editor.ready') {\n          this.isEditor = true\n          if (!window.WeaverseStudioBridge) {\n            // load studio bridge script by url: https://weaverse.io/assets/studio/studio-bridge.js\n            const studioBridgeScript = document.createElement('script')\n            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`\n            studioBridgeScript.onload = initStudio\n            document.body.appendChild(studioBridgeScript)\n          } else {\n            initStudio()\n          }\n        }\n      })\n    }\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach(fn => fn())\n    this.triggerEditorUpdate()\n  }\n\n  /**\n   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)\n   */\n  fetchProjectData() {\n    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json()).catch(console.error)\n  }\n\n  /**\n   * fetch and update the project data, then trigger update to re-render the WeaverseRoot\n   */\n  updateProjectData() {\n    // console.log('this.projectData', this.projectData)\n    // this.initItemData()\n    // this.triggerUpdate()\n    // return\n    if (this.projectKey) {\n      this.fetchProjectData().then(data => {\n        if (data) {\n          this.projectData = data\n          this.initItemData()\n          this.triggerUpdate()\n        }\n      }).catch(err => {\n        console.error(err)\n      })\n    }\n  }\n\n\n  triggerEditorUpdate(type = 'weaverse.workspace.init') {\n    if (this.isEditor && this.studioBridge) {\n      this.studioBridge.sendMessageToEditor(type, {\n        projectData: this.projectData,\n        projectKey: this.projectKey,\n        appUrl: this.appUrl\n      })\n    }\n  }\n\n  initItemData() {\n    let data = this.projectData\n    if (data.items) {\n      data.items.forEach(item => {\n        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n        this.itemInstances.set(item.id, itemStore)\n      })\n    }\n  }\n}\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ProjectDataItemType} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * Usage:\n * ```jsx\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n *   }, [])\n *   ```\n */\nexport class WeaverseItemStore {\n  data: any = {}\n  listeners: Set<any> = new Set()\n  Component: any\n  ref: any = {\n    current: null\n  }\n\n  constructor(itemData: any = {}, weaverse: Weaverse) {\n    this.data = itemData\n    let {type} = itemData\n    if (type) {\n      this.Component = weaverse.elementInstances.get(type)\n    }\n  }\n\n  setData = (data: any) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n  }\n\n  subscribe = (fn: any) => {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe = (fn: any) => {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate = () => {\n    this.listeners.forEach(fn => {\n      return fn(this.data)\n    })\n  }\n}"],"names":["isReactNative","navigator","product","isBrowser","window","isIframe","top","self","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","process","NODE_ENV","items","Set","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","initStudio","StudioBridge","WeaverseStudioBridge","studioBridge","subscribeMessageEvent","triggerUpdate","console","log","addEventListener","e","data","type","isEditor","studioBridgeScript","document","createElement","src","onload","body","appendChild","subscribe","fn","listeners","add","unsubscribe","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","err","sendMessageToEditor","item","itemStore","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","Object","assign","Component"],"mappings":"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"}

package/package.json

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