@weaverse/react 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Paul Phan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+TODO: update readme

package/dist/core.d.ts

@@ -0,0 +1,45 @@
+export interface ProjectDataItemType {
+    type: string;
+    name: string;
+    id: string | number;
+}
+export interface ProjectDataType {
+    items: ProjectDataItemType[];
+}
+export declare class Weaverse {
+    elementInstances: Map<string, any>;
+    itemInstances: Map<string | number, WeaverseItemStore>;
+    appUrl: string;
+    projectKey: string;
+    projectData: ProjectDataType;
+    listeners: Set<any>;
+    isEditor: boolean;
+    currentFrameSubscription: any;
+    constructor({ appUrl, projectKey, projectData }?: {
+        appUrl?: string;
+        projectKey?: string;
+        projectData?: ProjectDataType;
+    });
+    registerElement(name: string, element: any): void;
+    init(): void;
+    subscribe(fn: any): void;
+    unsubscribe(fn: any): void;
+    triggerUpdate(): void;
+    fetchProjectData(): Promise<any>;
+    updateProjectData(): void;
+    subscribeMessageEvent(): any;
+    triggerEditorUpdate(type?: string): void;
+    handleMessageEvent: (e: MessageEvent) => void;
+    initItemData(): void;
+}
+export declare class WeaverseItemStore {
+    data: any;
+    listeners: Set<any>;
+    Component: any;
+    constructor(itemData: any, weaverse: Weaverse);
+    setData: (data: any) => void;
+    subscribe: (fn: any) => void;
+    unsubscribe: (fn: any) => void;
+    triggerUpdate: () => void;
+    useSubscription: (fn: any) => void;
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Weaverse } from './core';
+declare const WeaverseRoot: ({ context, defaultData }: {
+    context: Weaverse;
+    defaultData: any;
+}) => JSX.Element;
+export { Weaverse, WeaverseRoot };

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./sdk-react.cjs.production.min.js')
+} else {
+  module.exports = require('./sdk-react.cjs.development.js')
+}

package/dist/sdk-react.cjs.development.js

@@ -0,0 +1,350 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var fetch = _interopDefault(require('isomorphic-unfetch'));
+var Elements = _interopDefault(require('@weaverse/elements'));
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative';
+var isBrowser = typeof window !== 'undefined' && !isReactNative;
+
+// TODO: Implement Weaverse SDK class
+var Weaverse = /*#__PURE__*/function () {
+  function Weaverse(_temp) {
+    var _this = this;
+
+    var _ref = _temp === void 0 ? {} : _temp,
+        appUrl = _ref.appUrl,
+        projectKey = _ref.projectKey,
+        projectData = _ref.projectData;
+
+    this.elementInstances = new Map();
+    this.itemInstances = new Map();
+    this.appUrl = 'http://localhost:3000';
+    this.projectKey = '';
+    this.projectData = {
+      items: []
+    };
+    this.listeners = new Set();
+    this.isEditor = false;
+
+    this.handleMessageEvent = function (e) {
+      var _e$data, _e$data$type;
+
+      if ((_e$data = e.data) != null && (_e$data$type = _e$data.type) != null && _e$data$type.startsWith('weaverse.')) {
+        var type = e.data.type;
+
+        switch (type) {
+          case 'weaverse.editor.ready':
+            _this.isEditor = true;
+            break;
+
+          case 'weaverse.editor.update':
+            var payload = e.data.payload;
+            var itemId = payload.itemId,
+                background = payload.background;
+
+            var instance = _this.itemInstances.get(itemId);
+
+            if (instance) {
+              instance.setData({
+                style: {
+                  background: background
+                }
+              });
+            }
+
+        }
+      }
+    };
+
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+
+  var _proto = Weaverse.prototype;
+
+  _proto.registerElement = function registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  };
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    Object.keys(Elements).forEach(function (key) {
+      var _Elements$key, _Elements$key$configs;
+
+      // @ts-ignore
+      ((_Elements$key = Elements[key]) == null ? void 0 : (_Elements$key$configs = _Elements$key.configs) == null ? void 0 : _Elements$key$configs.type) && _this2.registerElement(Elements[key].configs.type, Elements[key]);
+    });
+    this.subscribeMessageEvent();
+  };
+
+  _proto.subscribe = function subscribe(fn) {
+    this.listeners.add(fn);
+  };
+
+  _proto.unsubscribe = function unsubscribe(fn) {
+    this.listeners["delete"](fn);
+  };
+
+  _proto.triggerUpdate = function triggerUpdate() {
+    this.listeners.forEach(function (fn) {
+      return fn();
+    });
+    this.triggerEditorUpdate();
+  };
+
+  _proto.fetchProjectData = function fetchProjectData() {
+    return fetch(this.appUrl + ("/api/public/" + this.projectKey)).then(function (r) {
+      return r.json();
+    });
+  };
+
+  _proto.updateProjectData = function updateProjectData() {
+    var _this3 = this;
+
+    if (this.projectKey) {
+      this.fetchProjectData().then(function (data) {
+        if (data) {
+          _this3.projectData = data;
+
+          _this3.initItemData();
+
+          _this3.triggerUpdate();
+        }
+      })["catch"](function (err) {
+        console.error(err);
+      });
+    }
+  };
+
+  _proto.subscribeMessageEvent = function subscribeMessageEvent() {
+    var _this4 = this;
+
+    if (typeof this.currentFrameSubscription === 'function') {
+      this.currentFrameSubscription();
+    }
+
+    isBrowser && window.addEventListener('message', this.handleMessageEvent);
+
+    this.currentFrameSubscription = function () {
+      isBrowser && window.removeEventListener('message', _this4.handleMessageEvent);
+    };
+
+    return this.currentFrameSubscription;
+  };
+
+  _proto.triggerEditorUpdate = function triggerEditorUpdate(type) {
+    if (type === void 0) {
+      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
+        }
+      }, '*');
+    }
+  };
+
+  _proto.initItemData = function initItemData() {
+    var _this5 = this;
+
+    var data = this.projectData;
+
+    if (data.items) {
+      data.items.forEach(function (item) {
+        var itemStore = _this5.itemInstances.get(item.id) || new WeaverseItemStore(item, _this5);
+
+        _this5.itemInstances.set(item.id, itemStore);
+      });
+    }
+  };
+
+  return Weaverse;
+}();
+var WeaverseItemStore = function WeaverseItemStore(itemData, weaverse) {
+  var _this6 = this;
+
+  if (itemData === void 0) {
+    itemData = {};
+  }
+
+  this.data = {};
+  this.listeners = new Set();
+
+  this.setData = function (data) {
+    _this6.data = Object.assign(_this6.data, data);
+
+    _this6.triggerUpdate();
+  };
+
+  this.subscribe = function (fn) {
+    _this6.listeners.add(fn);
+  };
+
+  this.unsubscribe = function (fn) {
+    _this6.listeners["delete"](fn);
+  };
+
+  this.triggerUpdate = function () {
+    _this6.listeners.forEach(function (fn) {
+      return fn(_this6.data);
+    });
+  };
+
+  this.useSubscription = function (fn) {
+    React.useEffect(function () {
+      _this6.subscribe(fn);
+
+      return function () {
+        _this6.unsubscribe(fn);
+      };
+    }, []);
+  };
+
+  this.data = itemData;
+  var _itemData = itemData,
+      type = _itemData.type;
+
+  if (type) {
+    this.Component = weaverse.elementInstances.get(type);
+  }
+};
+
+var _excluded = ["id", "type", "childIds"];
+
+var WeaverseRoot = function WeaverseRoot(_ref) {
+  var _context$projectData, _context$projectData$;
+
+  var context = _ref.context,
+      defaultData = _ref.defaultData;
+
+  var _React$useState = React.useState(context.projectData),
+      setData = _React$useState[1];
+
+  React.useEffect(function () {
+    var handleUpdate = function handleUpdate() {
+      setData(context.projectData);
+    };
+
+    context.subscribe(handleUpdate);
+    context.updateProjectData();
+    return function () {
+      context.unsubscribe(handleUpdate);
+    };
+  }, []);
+
+  if (!((_context$projectData = context.projectData) != null && (_context$projectData$ = _context$projectData.items) != null && _context$projectData$.length) && defaultData) {
+    context.projectData = defaultData;
+    context.initItemData();
+  }
+
+  return React.createElement(RenderItem, {
+    itemId: 0,
+    context: context
+  });
+};
+
+var Item = function Item(_ref2) {
+  var itemInstance = _ref2.itemInstance,
+      elementInstances = _ref2.elementInstances,
+      context = _ref2.context;
+
+  var _React$useState2 = React.useState(itemInstance.data),
+      data = _React$useState2[0],
+      setData = _React$useState2[1];
+
+  var id = data.id,
+      type = data.type,
+      childIds = data.childIds,
+      rest = _objectWithoutPropertiesLoose(data, _excluded);
+
+  var useSubscription = itemInstance.useSubscription;
+  useSubscription(function (update) {
+    console.log('update', update);
+    setData(_extends({}, update));
+  });
+  var Component = elementInstances.get(type);
+
+  if (Component) {
+    return React.createElement(Component, Object.assign({
+      key: id,
+      "data-wv-id": id
+    }, rest), Array.isArray(childIds) && childIds.map(function (childId) {
+      return React.createElement(RenderItem, {
+        key: childId,
+        itemId: childId,
+        context: context
+      });
+    }));
+  }
+
+  return null;
+};
+
+var RenderItem = function RenderItem(_ref3) {
+  var itemId = _ref3.itemId,
+      context = _ref3.context;
+  var itemInstances = context.itemInstances,
+      elementInstances = context.elementInstances;
+  var itemInstance = itemInstances.get(itemId);
+
+  if (itemInstance) {
+    return React.createElement(Item, {
+      itemInstance: itemInstance,
+      elementInstances: elementInstances,
+      context: context
+    });
+  }
+
+  return React.createElement(React.Fragment, null);
+};
+
+exports.Weaverse = Weaverse;
+exports.WeaverseRoot = WeaverseRoot;
+//# sourceMappingURL=sdk-react.cjs.development.js.map

package/dist/sdk-react.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk-react.cjs.development.js","sources":["../src/utils/index.ts","../src/core.ts","../src/index.tsx"],"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\nimport fetch from 'isomorphic-unfetch'\nimport Elements from '@weaverse/elements'\nimport {useEffect} from 'react'\nimport {isBrowser} from './utils'\n\n\nexport interface ProjectDataItemType {\n\ttype: string\n\tname: string\n\tid: string | number\n}\n\nexport interface ProjectDataType {\n\titems: ProjectDataItemType[]\n}\n\nexport class Weaverse {\n\telementInstances = new Map<string, any>()\n\titemInstances = new Map<string | number, WeaverseItemStore>()\n\tappUrl: string = 'http://localhost:3000'\n\tprojectKey: string = ''\n\tprojectData: ProjectDataType = {\n\t\titems: []\n\t}\n\tlisteners: Set<any> = new Set()\n\tisEditor = false\n\tcurrentFrameSubscription: any\n\n\tconstructor({\n\t\t\t\t\tappUrl,\n\t\t\t\t\tprojectKey,\n\t\t\t\t\tprojectData\n\t\t\t\t}: { appUrl?: string, projectKey?: string, projectData?: ProjectDataType } = {}) {\n\t\tthis.appUrl = appUrl || this.appUrl\n\t\tthis.projectKey = projectKey || this.projectKey\n\t\tprojectData && (this.projectData = projectData)\n\t\tthis.init()\n\t}\n\n\tregisterElement(name: string, element: any) {\n\t\tthis.elementInstances.set(name, element)\n\t}\n\n\tinit() {\n\t\tObject.keys(Elements).forEach(key => {\n\t\t\t// @ts-ignore\n\t\t\tElements[key]?.configs?.type && this.registerElement(Elements[key].configs.type, Elements[key])\n\t\t})\n\t\tthis.subscribeMessageEvent()\n\t}\n\n\tsubscribe(fn: any) {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe(fn: any) {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate() {\n\t\tthis.listeners.forEach(fn => fn())\n\t\tthis.triggerEditorUpdate()\n\t}\n\n\tfetchProjectData() {\n\t\treturn fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())\n\t}\n\n\tupdateProjectData() {\n\t\tif (this.projectKey) {\n\t\t\tthis.fetchProjectData().then(data => {\n\t\t\t\tif (data) {\n\t\t\t\t\tthis.projectData = data\n\t\t\t\t\tthis.initItemData()\n\t\t\t\t\tthis.triggerUpdate()\n\t\t\t\t}\n\t\t\t}).catch(err => {\n\t\t\t\tconsole.error(err)\n\t\t\t})\n\t\t}\n\t}\n\n\tsubscribeMessageEvent() {\n\t\tif (typeof this.currentFrameSubscription === 'function') {\n\t\t\tthis.currentFrameSubscription()\n\t\t}\n\t\tisBrowser && window.addEventListener('message', this.handleMessageEvent)\n\t\tthis.currentFrameSubscription = () => {\n\t\t\tisBrowser && window.removeEventListener('message', this.handleMessageEvent)\n\t\t}\n\t\treturn this.currentFrameSubscription\n\t}\n\n\ttriggerEditorUpdate(type = 'weaverse.workspace.init') {\n\t\tif (this.isEditor) {\n\t\t\twindow.top?.postMessage({\n\t\t\t\ttype, payload: {\n\t\t\t\t\tprojectKey: this.projectKey,\n\t\t\t\t\tprojectData: this.projectData\n\t\t\t\t}\n\t\t\t}, '*')\n\t\t}\n\t}\n\n\thandleMessageEvent = (e: MessageEvent) => {\n\t\tif (e.data?.type?.startsWith('weaverse.')) {\n\t\t\tlet type = e.data.type\n\t\t\tswitch (type) {\n\t\t\t\tcase 'weaverse.editor.ready':\n\t\t\t\t\tthis.isEditor = true\n\t\t\t\t\tbreak\n\t\t\t\tcase 'weaverse.editor.update':\n\t\t\t\t\tlet {payload} = e.data\n\t\t\t\t\tlet {itemId, background} = payload\n\t\t\t\t\tlet instance = this.itemInstances.get(itemId)\n\t\t\t\t\tif (instance) {\n\t\t\t\t\t\tinstance.setData({\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tbackground\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tinitItemData() {\n\t\tlet data = this.projectData\n\t\tif (data.items) {\n\t\t\tdata.items.forEach(item => {\n\t\t\t\tlet itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n\t\t\t\tthis.itemInstances.set(item.id, itemStore)\n\t\t\t})\n\t\t}\n\t}\n}\n\nexport class WeaverseItemStore {\n\tdata: any = {}\n\tlisteners: Set<any> = new Set()\n\tComponent: any\n\n\tconstructor(itemData: any = {}, weaverse: Weaverse) {\n\t\tthis.data = itemData\n\t\tlet {type} = itemData\n\t\tif (type) {\n\t\t\tthis.Component = weaverse.elementInstances.get(type)\n\t\t}\n\t}\n\n\tsetData = (data: any) => {\n\t\tthis.data = Object.assign(this.data, data)\n\t\tthis.triggerUpdate()\n\t}\n\n\tsubscribe = (fn: any) => {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe = (fn: any) => {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate = () => {\n\t\tthis.listeners.forEach(fn => {\n\t\t\treturn fn(this.data)\n\t\t})\n\t}\n\n\tuseSubscription = (fn: any) => {\n\t\tuseEffect(() => {\n\t\t\tthis.subscribe(fn)\n\t\t\treturn () => {\n\t\t\t\tthis.unsubscribe(fn)\n\t\t\t}\n\t\t}, [])\n\t}\n\n\n\t// addItem(item: any) {\n\t// \tthis.items.push(item)\n\t// \tthis.triggerUpdate()\n\t// }\n\t//\n\t// removeItem(item: any) {\n\t// \tthis.items = this.items.filter(i => i !== item)\n\t// \tthis.triggerUpdate()\n\t// }\n}","import * as React from 'react'\nimport {useEffect} from 'react'\nimport {Weaverse} from './core'\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = React.useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData(context.projectData)\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  return <RenderItem itemId={0} context={context}/>\n\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: any) => {\n  let [data, setData] = React.useState<any>(itemInstance.data)\n  let {id, type, childIds, ...rest} = data\n\n  let {useSubscription} = itemInstance\n  useSubscription((update: any) => {\n    console.log('update', update)\n    setData({...update})\n  })\n  let Component = elementInstances.get(type)\n  if (Component) {\n    return <Component key={id} data-wv-id={id} {...rest}>\n      {Array.isArray(childIds)\n      && childIds.map(childId =>\n          <RenderItem\n              key={childId}\n              itemId={childId}\n              context={context}\n          />\n      )}\n    </Component>\n  }\n  return null\n}\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {Weaverse, WeaverseRoot}\n"],"names":["isReactNative","navigator","product","isBrowser","window","Weaverse","appUrl","projectKey","projectData","Map","items","Set","e","data","type","startsWith","isEditor","payload","itemId","background","instance","itemInstances","get","setData","style","init","registerElement","name","element","elementInstances","set","Object","keys","Elements","forEach","key","configs","subscribeMessageEvent","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","updateProjectData","initItemData","err","console","error","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","top","postMessage","item","itemStore","id","WeaverseItemStore","itemData","weaverse","assign","useEffect","Component","WeaverseRoot","context","defaultData","React","handleUpdate","length","RenderItem","Item","itemInstance","childIds","rest","useSubscription","update","log","Array","isArray","map","childId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,IAAMA,aAAa,GAAG,OAAOC,SAAP,KAAqB,QAArB,IAAiCA,SAAS,CAACC,OAAV,KAAsB,aAA7E;AACA,IAAMC,SAAS,GAAG,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAACJ,aAApD;;ACDP;AACA,IAgBaK,QAAb;AAYC;;;kCAIgF;QAH5EC,cAAAA;QACAC,kBAAAA;QACAC,mBAAAA;;AAdJ,yBAAA,GAAmB,IAAIC,GAAJ,EAAnB;AACA,sBAAA,GAAgB,IAAIA,GAAJ,EAAhB;AACA,eAAA,GAAiB,uBAAjB;AACA,mBAAA,GAAqB,EAArB;AACA,oBAAA,GAA+B;AAC9BC,MAAAA,KAAK,EAAE;AADuB,KAA/B;AAGA,kBAAA,GAAsB,IAAIC,GAAJ,EAAtB;AACA,iBAAA,GAAW,KAAX;;AA+EA,2BAAA,GAAqB,UAACC,CAAD;;;AACpB,qBAAIA,CAAC,CAACC,IAAN,6BAAI,QAAQC,IAAZ,aAAI,aAAcC,UAAd,CAAyB,WAAzB,CAAJ,EAA2C;AAC1C,YAAID,IAAI,GAAGF,CAAC,CAACC,IAAF,CAAOC,IAAlB;;AACA,gBAAQA,IAAR;AACC,eAAK,uBAAL;AACC,YAAA,KAAI,CAACE,QAAL,GAAgB,IAAhB;AACA;;AACD,eAAK,wBAAL;AACC,gBAAKC,OAAL,GAAgBL,CAAC,CAACC,IAAlB,CAAKI,OAAL;AACA,gBAAKC,MAAL,GAA2BD,OAA3B,CAAKC,MAAL;AAAA,gBAAaC,UAAb,GAA2BF,OAA3B,CAAaE,UAAb;;AACA,gBAAIC,QAAQ,GAAG,KAAI,CAACC,aAAL,CAAmBC,GAAnB,CAAuBJ,MAAvB,CAAf;;AACA,gBAAIE,QAAJ,EAAc;AACbA,cAAAA,QAAQ,CAACG,OAAT,CAAiB;AAChBC,gBAAAA,KAAK,EAAE;AACNL,kBAAAA,UAAU,EAAVA;AADM;AADS,eAAjB;AAKA;;AAdH;AAgBA;AACD,KApBD;;AAvEC,SAAKb,MAAL,GAAcA,MAAM,IAAI,KAAKA,MAA7B;AACA,SAAKC,UAAL,GAAkBA,UAAU,IAAI,KAAKA,UAArC;AACAC,IAAAA,WAAW,KAAK,KAAKA,WAAL,GAAmBA,WAAxB,CAAX;AACA,SAAKiB,IAAL;AACA;;AArBF;;AAAA,SAuBCC,eAvBD,GAuBC,yBAAgBC,IAAhB,EAA8BC,OAA9B;AACC,SAAKC,gBAAL,CAAsBC,GAAtB,CAA0BH,IAA1B,EAAgCC,OAAhC;AACA,GAzBF;;AAAA,SA2BCH,IA3BD,GA2BC;;;AACCM,IAAAA,MAAM,CAACC,IAAP,CAAYC,QAAZ,EAAsBC,OAAtB,CAA8B,UAAAC,GAAG;;;AAChC;AACA,wBAAAF,QAAQ,CAACE,GAAD,CAAR,4DAAeC,OAAf,2CAAwBtB,IAAxB,KAAgC,MAAI,CAACY,eAAL,CAAqBO,QAAQ,CAACE,GAAD,CAAR,CAAcC,OAAd,CAAsBtB,IAA3C,EAAiDmB,QAAQ,CAACE,GAAD,CAAzD,CAAhC;AACA,KAHD;AAIA,SAAKE,qBAAL;AACA,GAjCF;;AAAA,SAmCCC,SAnCD,GAmCC,mBAAUC,EAAV;AACC,SAAKC,SAAL,CAAeC,GAAf,CAAmBF,EAAnB;AACA,GArCF;;AAAA,SAuCCG,WAvCD,GAuCC,qBAAYH,EAAZ;AACC,SAAKC,SAAL,WAAsBD,EAAtB;AACA,GAzCF;;AAAA,SA2CCI,aA3CD,GA2CC;AACC,SAAKH,SAAL,CAAeN,OAAf,CAAuB,UAAAK,EAAE;AAAA,aAAIA,EAAE,EAAN;AAAA,KAAzB;AACA,SAAKK,mBAAL;AACA,GA9CF;;AAAA,SAgDCC,gBAhDD,GAgDC;AACC,WAAOC,KAAK,CAAC,KAAKxC,MAAL,qBAA6B,KAAKC,UAAlC,CAAD,CAAL,CAAsDwC,IAAtD,CAA2D,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,EAAJ;AAAA,KAA5D,CAAP;AACA,GAlDF;;AAAA,SAoDCC,iBApDD,GAoDC;;;AACC,QAAI,KAAK3C,UAAT,EAAqB;AACpB,WAAKsC,gBAAL,GAAwBE,IAAxB,CAA6B,UAAAlC,IAAI;AAChC,YAAIA,IAAJ,EAAU;AACT,UAAA,MAAI,CAACL,WAAL,GAAmBK,IAAnB;;AACA,UAAA,MAAI,CAACsC,YAAL;;AACA,UAAA,MAAI,CAACR,aAAL;AACA;AACD,OAND,WAMS,UAAAS,GAAG;AACXC,QAAAA,OAAO,CAACC,KAAR,CAAcF,GAAd;AACA,OARD;AASA;AACD,GAhEF;;AAAA,SAkECf,qBAlED,GAkEC;;;AACC,QAAI,OAAO,KAAKkB,wBAAZ,KAAyC,UAA7C,EAAyD;AACxD,WAAKA,wBAAL;AACA;;AACDpD,IAAAA,SAAS,IAAIC,MAAM,CAACoD,gBAAP,CAAwB,SAAxB,EAAmC,KAAKC,kBAAxC,CAAb;;AACA,SAAKF,wBAAL,GAAgC;AAC/BpD,MAAAA,SAAS,IAAIC,MAAM,CAACsD,mBAAP,CAA2B,SAA3B,EAAsC,MAAI,CAACD,kBAA3C,CAAb;AACA,KAFD;;AAGA,WAAO,KAAKF,wBAAZ;AACA,GA3EF;;AAAA,SA6ECX,mBA7ED,GA6EC,6BAAoB9B,IAApB;QAAoBA;AAAAA,MAAAA,OAAO;;;AAC1B,QAAI,KAAKE,QAAT,EAAmB;AAAA;;AAClB,qBAAAZ,MAAM,CAACuD,GAAP,iCAAYC,WAAZ,CAAwB;AACvB9C,QAAAA,IAAI,EAAJA,IADuB;AACjBG,QAAAA,OAAO,EAAE;AACdV,UAAAA,UAAU,EAAE,KAAKA,UADH;AAEdC,UAAAA,WAAW,EAAE,KAAKA;AAFJ;AADQ,OAAxB,EAKG,GALH;AAMA;AACD,GAtFF;;AAAA,SA8GC2C,YA9GD,GA8GC;;;AACC,QAAItC,IAAI,GAAG,KAAKL,WAAhB;;AACA,QAAIK,IAAI,CAACH,KAAT,EAAgB;AACfG,MAAAA,IAAI,CAACH,KAAL,CAAWwB,OAAX,CAAmB,UAAA2B,IAAI;AACtB,YAAIC,SAAS,GAAG,MAAI,CAACzC,aAAL,CAAmBC,GAAnB,CAAuBuC,IAAI,CAACE,EAA5B,KAAmC,IAAIC,iBAAJ,CAAsBH,IAAtB,EAA4B,MAA5B,CAAnD;;AACA,QAAA,MAAI,CAACxC,aAAL,CAAmBS,GAAnB,CAAuB+B,IAAI,CAACE,EAA5B,EAAgCD,SAAhC;AACA,OAHD;AAIA;AACD,GAtHF;;AAAA;AAAA;AAyHA,IAAaE,iBAAb,GAKC,2BAAYC,QAAZ,EAAgCC,QAAhC;;;MAAYD;AAAAA,IAAAA,WAAgB;;;AAJ5B,WAAA,GAAY,EAAZ;AACA,gBAAA,GAAsB,IAAItD,GAAJ,EAAtB;;AAWA,cAAA,GAAU,UAACE,IAAD;AACT,IAAA,MAAI,CAACA,IAAL,GAAYkB,MAAM,CAACoC,MAAP,CAAc,MAAI,CAACtD,IAAnB,EAAyBA,IAAzB,CAAZ;;AACA,IAAA,MAAI,CAAC8B,aAAL;AACA,GAHD;;AAKA,gBAAA,GAAY,UAACJ,EAAD;AACX,IAAA,MAAI,CAACC,SAAL,CAAeC,GAAf,CAAmBF,EAAnB;AACA,GAFD;;AAIA,kBAAA,GAAc,UAACA,EAAD;AACb,IAAA,MAAI,CAACC,SAAL,WAAsBD,EAAtB;AACA,GAFD;;AAIA,oBAAA,GAAgB;AACf,IAAA,MAAI,CAACC,SAAL,CAAeN,OAAf,CAAuB,UAAAK,EAAE;AACxB,aAAOA,EAAE,CAAC,MAAI,CAAC1B,IAAN,CAAT;AACA,KAFD;AAGA,GAJD;;AAMA,sBAAA,GAAkB,UAAC0B,EAAD;AACjB6B,IAAAA,eAAS,CAAC;AACT,MAAA,MAAI,CAAC9B,SAAL,CAAeC,EAAf;;AACA,aAAO;AACN,QAAA,MAAI,CAACG,WAAL,CAAiBH,EAAjB;AACA,OAFD;AAGA,KALQ,EAKN,EALM,CAAT;AAMA,GAPD;;AA1BC,OAAK1B,IAAL,GAAYoD,QAAZ;AACA,kBAAaA,QAAb;AAAA,MAAKnD,IAAL,aAAKA,IAAL;;AACA,MAAIA,IAAJ,EAAU;AACT,SAAKuD,SAAL,GAAiBH,QAAQ,CAACrC,gBAAT,CAA0BP,GAA1B,CAA8BR,IAA9B,CAAjB;AACA;AACD,CAXF;;;AC1IA;AAIA,IAAMwD,YAAY,GAAG,SAAfA,YAAe;;;MAAEC,eAAAA;MAASC,mBAAAA;;AAC9B,wBAAkBC,cAAA,CAAoBF,OAAO,CAAC/D,WAA5B,CAAlB;AAAA,MAAOe,OAAP;;AACA6C,EAAAA,eAAS,CAAC;AACR,QAAIM,YAAY,GAAG,SAAfA,YAAe;AACjBnD,MAAAA,OAAO,CAACgD,OAAO,CAAC/D,WAAT,CAAP;AACD,KAFD;;AAGA+D,IAAAA,OAAO,CAACjC,SAAR,CAAkBoC,YAAlB;AACAH,IAAAA,OAAO,CAACrB,iBAAR;AAEA,WAAO;AACLqB,MAAAA,OAAO,CAAC7B,WAAR,CAAoBgC,YAApB;AACD,KAFD;AAGD,GAVQ,EAUN,EAVM,CAAT;;AAWA,MAAI,0BAACH,OAAO,CAAC/D,WAAT,sCAAC,qBAAqBE,KAAtB,aAAC,sBAA4BiE,MAA7B,KAAuCH,WAA3C,EAAwD;AACtDD,IAAAA,OAAO,CAAC/D,WAAR,GAAsBgE,WAAtB;AACAD,IAAAA,OAAO,CAACpB,YAAR;AACD;;AACD,SAAOsB,mBAAA,CAACG,UAAD;AAAY1D,IAAAA,MAAM,EAAE;AAAGqD,IAAAA,OAAO,EAAEA;GAAhC,CAAP;AAED,CAnBD;;AAsBA,IAAMM,IAAI,GAAG,SAAPA,IAAO;MAAEC,qBAAAA;MAAcjD,yBAAAA;MAAkB0C,gBAAAA;;AAC7C,yBAAsBE,cAAA,CAAoBK,YAAY,CAACjE,IAAjC,CAAtB;AAAA,MAAKA,IAAL;AAAA,MAAWU,OAAX;;AACA,MAAKwC,EAAL,GAAoClD,IAApC,CAAKkD,EAAL;AAAA,MAASjD,IAAT,GAAoCD,IAApC,CAASC,IAAT;AAAA,MAAeiE,QAAf,GAAoClE,IAApC,CAAekE,QAAf;AAAA,MAA4BC,IAA5B,iCAAoCnE,IAApC;;AAEA,MAAKoE,eAAL,GAAwBH,YAAxB,CAAKG,eAAL;AACAA,EAAAA,eAAe,CAAC,UAACC,MAAD;AACd7B,IAAAA,OAAO,CAAC8B,GAAR,CAAY,QAAZ,EAAsBD,MAAtB;AACA3D,IAAAA,OAAO,cAAK2D,MAAL,EAAP;AACD,GAHc,CAAf;AAIA,MAAIb,SAAS,GAAGxC,gBAAgB,CAACP,GAAjB,CAAqBR,IAArB,CAAhB;;AACA,MAAIuD,SAAJ,EAAe;AACb,WAAOI,mBAAA,CAACJ,SAAD;AAAWlC,MAAAA,GAAG,EAAE4B;oBAAgBA;OAAQiB,KAAxC,EACJI,KAAK,CAACC,OAAN,CAAcN,QAAd,KACEA,QAAQ,CAACO,GAAT,CAAa,UAAAC,OAAO;AAAA,aACnBd,mBAAA,CAACG,UAAD;AACIzC,QAAAA,GAAG,EAAEoD;AACLrE,QAAAA,MAAM,EAAEqE;AACRhB,QAAAA,OAAO,EAAEA;OAHb,CADmB;AAAA,KAApB,CAFE,CAAP;AAUD;;AACD,SAAO,IAAP;AACD,CAvBD;;AAwBA,IAAMK,UAAU,GAAG,SAAbA,UAAa;MAAE1D,eAAAA;MAAQqD,gBAAAA;AAC3B,MAAKlD,aAAL,GAAwCkD,OAAxC,CAAKlD,aAAL;AAAA,MAAoBQ,gBAApB,GAAwC0C,OAAxC,CAAoB1C,gBAApB;AACA,MAAIiD,YAAY,GAAGzD,aAAa,CAACC,GAAd,CAAkBJ,MAAlB,CAAnB;;AACA,MAAI4D,YAAJ,EAAkB;AAChB,WAAOL,mBAAA,CAACI,IAAD;AAAMC,MAAAA,YAAY,EAAEA;AAAcjD,MAAAA,gBAAgB,EAAEA;AAAkB0C,MAAAA,OAAO,EAAEA;KAA/E,CAAP;AACD;;AACD,SAAOE,mBAAA,eAAA,MAAA,CAAP;AACD,CAPD;;;;;"}

package/dist/sdk-react.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=t(require("isomorphic-unfetch")),i=t(require("@weaverse/elements"));function r(){return(r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}var s="object"==typeof navigator&&"ReactNative"===navigator.product,a="undefined"!=typeof window&&!s,c=function(){function t(t){var e=this,n=void 0===t?{}:t,i=n.appUrl,r=n.projectKey,s=n.projectData;this.elementInstances=new Map,this.itemInstances=new Map,this.appUrl="http://localhost:3000",this.projectKey="",this.projectData={items:[]},this.listeners=new Set,this.isEditor=!1,this.handleMessageEvent=function(t){var n,i;if(null!=(n=t.data)&&null!=(i=n.type)&&i.startsWith("weaverse."))switch(t.data.type){case"weaverse.editor.ready":e.isEditor=!0;break;case"weaverse.editor.update":var r=t.data.payload,s=r.background,a=e.itemInstances.get(r.itemId);a&&a.setData({style:{background:s}})}},this.appUrl=i||this.appUrl,this.projectKey=r||this.projectKey,s&&(this.projectData=s),this.init()}var e=t.prototype;return e.registerElement=function(t,e){this.elementInstances.set(t,e)},e.init=function(){var t=this;Object.keys(i).forEach((function(e){var n,r;(null==(n=i[e])||null==(r=n.configs)?void 0:r.type)&&t.registerElement(i[e].configs.type,i[e])})),this.subscribeMessageEvent()},e.subscribe=function(t){this.listeners.add(t)},e.unsubscribe=function(t){this.listeners.delete(t)},e.triggerUpdate=function(){this.listeners.forEach((function(t){return t()})),this.triggerEditorUpdate()},e.fetchProjectData=function(){return n(this.appUrl+"/api/public/"+this.projectKey).then((function(t){return t.json()}))},e.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)}))},e.subscribeMessageEvent=function(){var t=this;return"function"==typeof this.currentFrameSubscription&&this.currentFrameSubscription(),a&&window.addEventListener("message",this.handleMessageEvent),this.currentFrameSubscription=function(){a&&window.removeEventListener("message",t.handleMessageEvent)},this.currentFrameSubscription},e.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}},"*"))},e.initItemData=function(){var t=this,e=this.projectData;e.items&&e.items.forEach((function(e){var n=t.itemInstances.get(e.id)||new o(e,t);t.itemInstances.set(e.id,n)}))},t}(),o=function(t,n){var i=this;void 0===t&&(t={}),this.data={},this.listeners=new Set,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.useSubscription=function(t){e.useEffect((function(){return i.subscribe(t),function(){i.unsubscribe(t)}}),[])},this.data=t;var r=t.type;r&&(this.Component=n.elementInstances.get(r))},u=["id","type","childIds"],p=function(t){var n=t.itemInstance,i=t.elementInstances,s=t.context,a=e.useState(n.data),c=a[0],o=a[1],p=c.id,d=c.type,h=c.childIds,f=function(t,e){if(null==t)return{};var n,i,r={},s=Object.keys(t);for(i=0;i<s.length;i++)e.indexOf(n=s[i])>=0||(r[n]=t[n]);return r}(c,u);(0,n.useSubscription)((function(t){console.log("update",t),o(r({},t))}));var v=i.get(d);return v?e.createElement(v,Object.assign({key:p,"data-wv-id":p},f),Array.isArray(h)&&h.map((function(t){return e.createElement(l,{key:t,itemId:t,context:s})}))):null},l=function(t){var n=t.context,i=n.elementInstances,r=n.itemInstances.get(t.itemId);return r?e.createElement(p,{itemInstance:r,elementInstances:i,context:n}):e.createElement(e.Fragment,null)};exports.Weaverse=c,exports.WeaverseRoot=function(t){var n,i,r=t.context,s=t.defaultData,a=e.useState(r.projectData)[1];return e.useEffect((function(){var t=function(){a(r.projectData)};return r.subscribe(t),r.updateProjectData(),function(){r.unsubscribe(t)}}),[]),null!=(n=r.projectData)&&null!=(i=n.items)&&i.length||!s||(r.projectData=s,r.initItemData()),e.createElement(l,{itemId:0,context:r})};
+//# sourceMappingURL=sdk-react.cjs.production.min.js.map

package/dist/sdk-react.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk-react.cjs.production.min.js","sources":["../src/utils/index.ts","../src/core.ts","../src/index.tsx"],"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\nimport fetch from 'isomorphic-unfetch'\nimport Elements from '@weaverse/elements'\nimport {useEffect} from 'react'\nimport {isBrowser} from './utils'\n\n\nexport interface ProjectDataItemType {\n\ttype: string\n\tname: string\n\tid: string | number\n}\n\nexport interface ProjectDataType {\n\titems: ProjectDataItemType[]\n}\n\nexport class Weaverse {\n\telementInstances = new Map<string, any>()\n\titemInstances = new Map<string | number, WeaverseItemStore>()\n\tappUrl: string = 'http://localhost:3000'\n\tprojectKey: string = ''\n\tprojectData: ProjectDataType = {\n\t\titems: []\n\t}\n\tlisteners: Set<any> = new Set()\n\tisEditor = false\n\tcurrentFrameSubscription: any\n\n\tconstructor({\n\t\t\t\t\tappUrl,\n\t\t\t\t\tprojectKey,\n\t\t\t\t\tprojectData\n\t\t\t\t}: { appUrl?: string, projectKey?: string, projectData?: ProjectDataType } = {}) {\n\t\tthis.appUrl = appUrl || this.appUrl\n\t\tthis.projectKey = projectKey || this.projectKey\n\t\tprojectData && (this.projectData = projectData)\n\t\tthis.init()\n\t}\n\n\tregisterElement(name: string, element: any) {\n\t\tthis.elementInstances.set(name, element)\n\t}\n\n\tinit() {\n\t\tObject.keys(Elements).forEach(key => {\n\t\t\t// @ts-ignore\n\t\t\tElements[key]?.configs?.type && this.registerElement(Elements[key].configs.type, Elements[key])\n\t\t})\n\t\tthis.subscribeMessageEvent()\n\t}\n\n\tsubscribe(fn: any) {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe(fn: any) {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate() {\n\t\tthis.listeners.forEach(fn => fn())\n\t\tthis.triggerEditorUpdate()\n\t}\n\n\tfetchProjectData() {\n\t\treturn fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())\n\t}\n\n\tupdateProjectData() {\n\t\tif (this.projectKey) {\n\t\t\tthis.fetchProjectData().then(data => {\n\t\t\t\tif (data) {\n\t\t\t\t\tthis.projectData = data\n\t\t\t\t\tthis.initItemData()\n\t\t\t\t\tthis.triggerUpdate()\n\t\t\t\t}\n\t\t\t}).catch(err => {\n\t\t\t\tconsole.error(err)\n\t\t\t})\n\t\t}\n\t}\n\n\tsubscribeMessageEvent() {\n\t\tif (typeof this.currentFrameSubscription === 'function') {\n\t\t\tthis.currentFrameSubscription()\n\t\t}\n\t\tisBrowser && window.addEventListener('message', this.handleMessageEvent)\n\t\tthis.currentFrameSubscription = () => {\n\t\t\tisBrowser && window.removeEventListener('message', this.handleMessageEvent)\n\t\t}\n\t\treturn this.currentFrameSubscription\n\t}\n\n\ttriggerEditorUpdate(type = 'weaverse.workspace.init') {\n\t\tif (this.isEditor) {\n\t\t\twindow.top?.postMessage({\n\t\t\t\ttype, payload: {\n\t\t\t\t\tprojectKey: this.projectKey,\n\t\t\t\t\tprojectData: this.projectData\n\t\t\t\t}\n\t\t\t}, '*')\n\t\t}\n\t}\n\n\thandleMessageEvent = (e: MessageEvent) => {\n\t\tif (e.data?.type?.startsWith('weaverse.')) {\n\t\t\tlet type = e.data.type\n\t\t\tswitch (type) {\n\t\t\t\tcase 'weaverse.editor.ready':\n\t\t\t\t\tthis.isEditor = true\n\t\t\t\t\tbreak\n\t\t\t\tcase 'weaverse.editor.update':\n\t\t\t\t\tlet {payload} = e.data\n\t\t\t\t\tlet {itemId, background} = payload\n\t\t\t\t\tlet instance = this.itemInstances.get(itemId)\n\t\t\t\t\tif (instance) {\n\t\t\t\t\t\tinstance.setData({\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tbackground\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tinitItemData() {\n\t\tlet data = this.projectData\n\t\tif (data.items) {\n\t\t\tdata.items.forEach(item => {\n\t\t\t\tlet itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n\t\t\t\tthis.itemInstances.set(item.id, itemStore)\n\t\t\t})\n\t\t}\n\t}\n}\n\nexport class WeaverseItemStore {\n\tdata: any = {}\n\tlisteners: Set<any> = new Set()\n\tComponent: any\n\n\tconstructor(itemData: any = {}, weaverse: Weaverse) {\n\t\tthis.data = itemData\n\t\tlet {type} = itemData\n\t\tif (type) {\n\t\t\tthis.Component = weaverse.elementInstances.get(type)\n\t\t}\n\t}\n\n\tsetData = (data: any) => {\n\t\tthis.data = Object.assign(this.data, data)\n\t\tthis.triggerUpdate()\n\t}\n\n\tsubscribe = (fn: any) => {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe = (fn: any) => {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate = () => {\n\t\tthis.listeners.forEach(fn => {\n\t\t\treturn fn(this.data)\n\t\t})\n\t}\n\n\tuseSubscription = (fn: any) => {\n\t\tuseEffect(() => {\n\t\t\tthis.subscribe(fn)\n\t\t\treturn () => {\n\t\t\t\tthis.unsubscribe(fn)\n\t\t\t}\n\t\t}, [])\n\t}\n\n\n\t// addItem(item: any) {\n\t// \tthis.items.push(item)\n\t// \tthis.triggerUpdate()\n\t// }\n\t//\n\t// removeItem(item: any) {\n\t// \tthis.items = this.items.filter(i => i !== item)\n\t// \tthis.triggerUpdate()\n\t// }\n}","import * as React from 'react'\nimport {useEffect} from 'react'\nimport {Weaverse} from './core'\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = React.useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData(context.projectData)\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  return <RenderItem itemId={0} context={context}/>\n\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: any) => {\n  let [data, setData] = React.useState<any>(itemInstance.data)\n  let {id, type, childIds, ...rest} = data\n\n  let {useSubscription} = itemInstance\n  useSubscription((update: any) => {\n    console.log('update', update)\n    setData({...update})\n  })\n  let Component = elementInstances.get(type)\n  if (Component) {\n    return <Component key={id} data-wv-id={id} {...rest}>\n      {Array.isArray(childIds)\n      && childIds.map(childId =>\n          <RenderItem\n              key={childId}\n              itemId={childId}\n              context={context}\n          />\n      )}\n    </Component>\n  }\n  return null\n}\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {Weaverse, WeaverseRoot}\n"],"names":["isReactNative","navigator","product","isBrowser","window","Weaverse","appUrl","projectKey","projectData","Map","items","Set","e","data","_e$data","type","_e$data$type","startsWith","_this","isEditor","payload","background","instance","itemInstances","get","itemId","setData","style","this","init","registerElement","name","element","elementInstances","set","Object","keys","Elements","forEach","key","configs","_this2","subscribeMessageEvent","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","updateProjectData","_this3","initItemData","err","console","error","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","_this4","top","postMessage","item","itemStore","_this5","id","WeaverseItemStore","itemData","weaverse","_this6","assign","useEffect","Component","Item","itemInstance","context","React","childIds","rest","useSubscription","update","log","Array","isArray","map","childId","RenderItem","defaultData","handleUpdate","_context$projectData","_context$projectData$","length"],"mappings":"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"}

package/dist/sdk-react.esm.js

@@ -0,0 +1,343 @@
+import { useEffect, useState, createElement, Fragment } from 'react';
+import fetch from 'isomorphic-unfetch';
+import Elements from '@weaverse/elements';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative';
+var isBrowser = typeof window !== 'undefined' && !isReactNative;
+
+// TODO: Implement Weaverse SDK class
+var Weaverse = /*#__PURE__*/function () {
+  function Weaverse(_temp) {
+    var _this = this;
+
+    var _ref = _temp === void 0 ? {} : _temp,
+        appUrl = _ref.appUrl,
+        projectKey = _ref.projectKey,
+        projectData = _ref.projectData;
+
+    this.elementInstances = new Map();
+    this.itemInstances = new Map();
+    this.appUrl = 'http://localhost:3000';
+    this.projectKey = '';
+    this.projectData = {
+      items: []
+    };
+    this.listeners = new Set();
+    this.isEditor = false;
+
+    this.handleMessageEvent = function (e) {
+      var _e$data, _e$data$type;
+
+      if ((_e$data = e.data) != null && (_e$data$type = _e$data.type) != null && _e$data$type.startsWith('weaverse.')) {
+        var type = e.data.type;
+
+        switch (type) {
+          case 'weaverse.editor.ready':
+            _this.isEditor = true;
+            break;
+
+          case 'weaverse.editor.update':
+            var payload = e.data.payload;
+            var itemId = payload.itemId,
+                background = payload.background;
+
+            var instance = _this.itemInstances.get(itemId);
+
+            if (instance) {
+              instance.setData({
+                style: {
+                  background: background
+                }
+              });
+            }
+
+        }
+      }
+    };
+
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+
+  var _proto = Weaverse.prototype;
+
+  _proto.registerElement = function registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  };
+
+  _proto.init = function init() {
+    var _this2 = this;
+
+    Object.keys(Elements).forEach(function (key) {
+      var _Elements$key, _Elements$key$configs;
+
+      // @ts-ignore
+      ((_Elements$key = Elements[key]) == null ? void 0 : (_Elements$key$configs = _Elements$key.configs) == null ? void 0 : _Elements$key$configs.type) && _this2.registerElement(Elements[key].configs.type, Elements[key]);
+    });
+    this.subscribeMessageEvent();
+  };
+
+  _proto.subscribe = function subscribe(fn) {
+    this.listeners.add(fn);
+  };
+
+  _proto.unsubscribe = function unsubscribe(fn) {
+    this.listeners["delete"](fn);
+  };
+
+  _proto.triggerUpdate = function triggerUpdate() {
+    this.listeners.forEach(function (fn) {
+      return fn();
+    });
+    this.triggerEditorUpdate();
+  };
+
+  _proto.fetchProjectData = function fetchProjectData() {
+    return fetch(this.appUrl + ("/api/public/" + this.projectKey)).then(function (r) {
+      return r.json();
+    });
+  };
+
+  _proto.updateProjectData = function updateProjectData() {
+    var _this3 = this;
+
+    if (this.projectKey) {
+      this.fetchProjectData().then(function (data) {
+        if (data) {
+          _this3.projectData = data;
+
+          _this3.initItemData();
+
+          _this3.triggerUpdate();
+        }
+      })["catch"](function (err) {
+        console.error(err);
+      });
+    }
+  };
+
+  _proto.subscribeMessageEvent = function subscribeMessageEvent() {
+    var _this4 = this;
+
+    if (typeof this.currentFrameSubscription === 'function') {
+      this.currentFrameSubscription();
+    }
+
+    isBrowser && window.addEventListener('message', this.handleMessageEvent);
+
+    this.currentFrameSubscription = function () {
+      isBrowser && window.removeEventListener('message', _this4.handleMessageEvent);
+    };
+
+    return this.currentFrameSubscription;
+  };
+
+  _proto.triggerEditorUpdate = function triggerEditorUpdate(type) {
+    if (type === void 0) {
+      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
+        }
+      }, '*');
+    }
+  };
+
+  _proto.initItemData = function initItemData() {
+    var _this5 = this;
+
+    var data = this.projectData;
+
+    if (data.items) {
+      data.items.forEach(function (item) {
+        var itemStore = _this5.itemInstances.get(item.id) || new WeaverseItemStore(item, _this5);
+
+        _this5.itemInstances.set(item.id, itemStore);
+      });
+    }
+  };
+
+  return Weaverse;
+}();
+var WeaverseItemStore = function WeaverseItemStore(itemData, weaverse) {
+  var _this6 = this;
+
+  if (itemData === void 0) {
+    itemData = {};
+  }
+
+  this.data = {};
+  this.listeners = new Set();
+
+  this.setData = function (data) {
+    _this6.data = Object.assign(_this6.data, data);
+
+    _this6.triggerUpdate();
+  };
+
+  this.subscribe = function (fn) {
+    _this6.listeners.add(fn);
+  };
+
+  this.unsubscribe = function (fn) {
+    _this6.listeners["delete"](fn);
+  };
+
+  this.triggerUpdate = function () {
+    _this6.listeners.forEach(function (fn) {
+      return fn(_this6.data);
+    });
+  };
+
+  this.useSubscription = function (fn) {
+    useEffect(function () {
+      _this6.subscribe(fn);
+
+      return function () {
+        _this6.unsubscribe(fn);
+      };
+    }, []);
+  };
+
+  this.data = itemData;
+  var _itemData = itemData,
+      type = _itemData.type;
+
+  if (type) {
+    this.Component = weaverse.elementInstances.get(type);
+  }
+};
+
+var _excluded = ["id", "type", "childIds"];
+
+var WeaverseRoot = function WeaverseRoot(_ref) {
+  var _context$projectData, _context$projectData$;
+
+  var context = _ref.context,
+      defaultData = _ref.defaultData;
+
+  var _React$useState = useState(context.projectData),
+      setData = _React$useState[1];
+
+  useEffect(function () {
+    var handleUpdate = function handleUpdate() {
+      setData(context.projectData);
+    };
+
+    context.subscribe(handleUpdate);
+    context.updateProjectData();
+    return function () {
+      context.unsubscribe(handleUpdate);
+    };
+  }, []);
+
+  if (!((_context$projectData = context.projectData) != null && (_context$projectData$ = _context$projectData.items) != null && _context$projectData$.length) && defaultData) {
+    context.projectData = defaultData;
+    context.initItemData();
+  }
+
+  return createElement(RenderItem, {
+    itemId: 0,
+    context: context
+  });
+};
+
+var Item = function Item(_ref2) {
+  var itemInstance = _ref2.itemInstance,
+      elementInstances = _ref2.elementInstances,
+      context = _ref2.context;
+
+  var _React$useState2 = useState(itemInstance.data),
+      data = _React$useState2[0],
+      setData = _React$useState2[1];
+
+  var id = data.id,
+      type = data.type,
+      childIds = data.childIds,
+      rest = _objectWithoutPropertiesLoose(data, _excluded);
+
+  var useSubscription = itemInstance.useSubscription;
+  useSubscription(function (update) {
+    console.log('update', update);
+    setData(_extends({}, update));
+  });
+  var Component = elementInstances.get(type);
+
+  if (Component) {
+    return createElement(Component, Object.assign({
+      key: id,
+      "data-wv-id": id
+    }, rest), Array.isArray(childIds) && childIds.map(function (childId) {
+      return createElement(RenderItem, {
+        key: childId,
+        itemId: childId,
+        context: context
+      });
+    }));
+  }
+
+  return null;
+};
+
+var RenderItem = function RenderItem(_ref3) {
+  var itemId = _ref3.itemId,
+      context = _ref3.context;
+  var itemInstances = context.itemInstances,
+      elementInstances = context.elementInstances;
+  var itemInstance = itemInstances.get(itemId);
+
+  if (itemInstance) {
+    return createElement(Item, {
+      itemInstance: itemInstance,
+      elementInstances: elementInstances,
+      context: context
+    });
+  }
+
+  return createElement(Fragment, null);
+};
+
+export { Weaverse, WeaverseRoot };
+//# sourceMappingURL=sdk-react.esm.js.map

package/dist/sdk-react.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdk-react.esm.js","sources":["../src/utils/index.ts","../src/core.ts","../src/index.tsx"],"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\nimport fetch from 'isomorphic-unfetch'\nimport Elements from '@weaverse/elements'\nimport {useEffect} from 'react'\nimport {isBrowser} from './utils'\n\n\nexport interface ProjectDataItemType {\n\ttype: string\n\tname: string\n\tid: string | number\n}\n\nexport interface ProjectDataType {\n\titems: ProjectDataItemType[]\n}\n\nexport class Weaverse {\n\telementInstances = new Map<string, any>()\n\titemInstances = new Map<string | number, WeaverseItemStore>()\n\tappUrl: string = 'http://localhost:3000'\n\tprojectKey: string = ''\n\tprojectData: ProjectDataType = {\n\t\titems: []\n\t}\n\tlisteners: Set<any> = new Set()\n\tisEditor = false\n\tcurrentFrameSubscription: any\n\n\tconstructor({\n\t\t\t\t\tappUrl,\n\t\t\t\t\tprojectKey,\n\t\t\t\t\tprojectData\n\t\t\t\t}: { appUrl?: string, projectKey?: string, projectData?: ProjectDataType } = {}) {\n\t\tthis.appUrl = appUrl || this.appUrl\n\t\tthis.projectKey = projectKey || this.projectKey\n\t\tprojectData && (this.projectData = projectData)\n\t\tthis.init()\n\t}\n\n\tregisterElement(name: string, element: any) {\n\t\tthis.elementInstances.set(name, element)\n\t}\n\n\tinit() {\n\t\tObject.keys(Elements).forEach(key => {\n\t\t\t// @ts-ignore\n\t\t\tElements[key]?.configs?.type && this.registerElement(Elements[key].configs.type, Elements[key])\n\t\t})\n\t\tthis.subscribeMessageEvent()\n\t}\n\n\tsubscribe(fn: any) {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe(fn: any) {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate() {\n\t\tthis.listeners.forEach(fn => fn())\n\t\tthis.triggerEditorUpdate()\n\t}\n\n\tfetchProjectData() {\n\t\treturn fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())\n\t}\n\n\tupdateProjectData() {\n\t\tif (this.projectKey) {\n\t\t\tthis.fetchProjectData().then(data => {\n\t\t\t\tif (data) {\n\t\t\t\t\tthis.projectData = data\n\t\t\t\t\tthis.initItemData()\n\t\t\t\t\tthis.triggerUpdate()\n\t\t\t\t}\n\t\t\t}).catch(err => {\n\t\t\t\tconsole.error(err)\n\t\t\t})\n\t\t}\n\t}\n\n\tsubscribeMessageEvent() {\n\t\tif (typeof this.currentFrameSubscription === 'function') {\n\t\t\tthis.currentFrameSubscription()\n\t\t}\n\t\tisBrowser && window.addEventListener('message', this.handleMessageEvent)\n\t\tthis.currentFrameSubscription = () => {\n\t\t\tisBrowser && window.removeEventListener('message', this.handleMessageEvent)\n\t\t}\n\t\treturn this.currentFrameSubscription\n\t}\n\n\ttriggerEditorUpdate(type = 'weaverse.workspace.init') {\n\t\tif (this.isEditor) {\n\t\t\twindow.top?.postMessage({\n\t\t\t\ttype, payload: {\n\t\t\t\t\tprojectKey: this.projectKey,\n\t\t\t\t\tprojectData: this.projectData\n\t\t\t\t}\n\t\t\t}, '*')\n\t\t}\n\t}\n\n\thandleMessageEvent = (e: MessageEvent) => {\n\t\tif (e.data?.type?.startsWith('weaverse.')) {\n\t\t\tlet type = e.data.type\n\t\t\tswitch (type) {\n\t\t\t\tcase 'weaverse.editor.ready':\n\t\t\t\t\tthis.isEditor = true\n\t\t\t\t\tbreak\n\t\t\t\tcase 'weaverse.editor.update':\n\t\t\t\t\tlet {payload} = e.data\n\t\t\t\t\tlet {itemId, background} = payload\n\t\t\t\t\tlet instance = this.itemInstances.get(itemId)\n\t\t\t\t\tif (instance) {\n\t\t\t\t\t\tinstance.setData({\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\tbackground\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tinitItemData() {\n\t\tlet data = this.projectData\n\t\tif (data.items) {\n\t\t\tdata.items.forEach(item => {\n\t\t\t\tlet itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this)\n\t\t\t\tthis.itemInstances.set(item.id, itemStore)\n\t\t\t})\n\t\t}\n\t}\n}\n\nexport class WeaverseItemStore {\n\tdata: any = {}\n\tlisteners: Set<any> = new Set()\n\tComponent: any\n\n\tconstructor(itemData: any = {}, weaverse: Weaverse) {\n\t\tthis.data = itemData\n\t\tlet {type} = itemData\n\t\tif (type) {\n\t\t\tthis.Component = weaverse.elementInstances.get(type)\n\t\t}\n\t}\n\n\tsetData = (data: any) => {\n\t\tthis.data = Object.assign(this.data, data)\n\t\tthis.triggerUpdate()\n\t}\n\n\tsubscribe = (fn: any) => {\n\t\tthis.listeners.add(fn)\n\t}\n\n\tunsubscribe = (fn: any) => {\n\t\tthis.listeners.delete(fn)\n\t}\n\n\ttriggerUpdate = () => {\n\t\tthis.listeners.forEach(fn => {\n\t\t\treturn fn(this.data)\n\t\t})\n\t}\n\n\tuseSubscription = (fn: any) => {\n\t\tuseEffect(() => {\n\t\t\tthis.subscribe(fn)\n\t\t\treturn () => {\n\t\t\t\tthis.unsubscribe(fn)\n\t\t\t}\n\t\t}, [])\n\t}\n\n\n\t// addItem(item: any) {\n\t// \tthis.items.push(item)\n\t// \tthis.triggerUpdate()\n\t// }\n\t//\n\t// removeItem(item: any) {\n\t// \tthis.items = this.items.filter(i => i !== item)\n\t// \tthis.triggerUpdate()\n\t// }\n}","import * as React from 'react'\nimport {useEffect} from 'react'\nimport {Weaverse} from './core'\n\nconst WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n  let [, setData] = React.useState<any>(context.projectData)\n  useEffect(() => {\n    let handleUpdate = () => {\n      setData(context.projectData)\n    }\n    context.subscribe(handleUpdate)\n    context.updateProjectData()\n\n    return () => {\n      context.unsubscribe(handleUpdate)\n    }\n  }, [])\n  if (!context.projectData?.items?.length && defaultData) {\n    context.projectData = defaultData\n    context.initItemData()\n  }\n  return <RenderItem itemId={0} context={context}/>\n\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: any) => {\n  let [data, setData] = React.useState<any>(itemInstance.data)\n  let {id, type, childIds, ...rest} = data\n\n  let {useSubscription} = itemInstance\n  useSubscription((update: any) => {\n    console.log('update', update)\n    setData({...update})\n  })\n  let Component = elementInstances.get(type)\n  if (Component) {\n    return <Component key={id} data-wv-id={id} {...rest}>\n      {Array.isArray(childIds)\n      && childIds.map(childId =>\n          <RenderItem\n              key={childId}\n              itemId={childId}\n              context={context}\n          />\n      )}\n    </Component>\n  }\n  return null\n}\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n  let {itemInstances, elementInstances} = context\n  let itemInstance = itemInstances.get(itemId)\n  if (itemInstance) {\n    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n  }\n  return <></>\n}\n\nexport {Weaverse, WeaverseRoot}\n"],"names":["isReactNative","navigator","product","isBrowser","window","Weaverse","appUrl","projectKey","projectData","Map","items","Set","e","data","type","startsWith","isEditor","payload","itemId","background","instance","itemInstances","get","setData","style","init","registerElement","name","element","elementInstances","set","Object","keys","Elements","forEach","key","configs","subscribeMessageEvent","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","updateProjectData","initItemData","err","console","error","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","top","postMessage","item","itemStore","id","WeaverseItemStore","itemData","weaverse","assign","useEffect","Component","WeaverseRoot","context","defaultData","React","handleUpdate","length","RenderItem","Item","itemInstance","childIds","rest","useSubscription","update","log","Array","isArray","map","childId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,IAAMA,aAAa,GAAG,OAAOC,SAAP,KAAqB,QAArB,IAAiCA,SAAS,CAACC,OAAV,KAAsB,aAA7E;AACA,IAAMC,SAAS,GAAG,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAACJ,aAApD;;ACDP;AACA,IAgBaK,QAAb;AAYC;;;kCAIgF;QAH5EC,cAAAA;QACAC,kBAAAA;QACAC,mBAAAA;;AAdJ,yBAAA,GAAmB,IAAIC,GAAJ,EAAnB;AACA,sBAAA,GAAgB,IAAIA,GAAJ,EAAhB;AACA,eAAA,GAAiB,uBAAjB;AACA,mBAAA,GAAqB,EAArB;AACA,oBAAA,GAA+B;AAC9BC,MAAAA,KAAK,EAAE;AADuB,KAA/B;AAGA,kBAAA,GAAsB,IAAIC,GAAJ,EAAtB;AACA,iBAAA,GAAW,KAAX;;AA+EA,2BAAA,GAAqB,UAACC,CAAD;;;AACpB,qBAAIA,CAAC,CAACC,IAAN,6BAAI,QAAQC,IAAZ,aAAI,aAAcC,UAAd,CAAyB,WAAzB,CAAJ,EAA2C;AAC1C,YAAID,IAAI,GAAGF,CAAC,CAACC,IAAF,CAAOC,IAAlB;;AACA,gBAAQA,IAAR;AACC,eAAK,uBAAL;AACC,YAAA,KAAI,CAACE,QAAL,GAAgB,IAAhB;AACA;;AACD,eAAK,wBAAL;AACC,gBAAKC,OAAL,GAAgBL,CAAC,CAACC,IAAlB,CAAKI,OAAL;AACA,gBAAKC,MAAL,GAA2BD,OAA3B,CAAKC,MAAL;AAAA,gBAAaC,UAAb,GAA2BF,OAA3B,CAAaE,UAAb;;AACA,gBAAIC,QAAQ,GAAG,KAAI,CAACC,aAAL,CAAmBC,GAAnB,CAAuBJ,MAAvB,CAAf;;AACA,gBAAIE,QAAJ,EAAc;AACbA,cAAAA,QAAQ,CAACG,OAAT,CAAiB;AAChBC,gBAAAA,KAAK,EAAE;AACNL,kBAAAA,UAAU,EAAVA;AADM;AADS,eAAjB;AAKA;;AAdH;AAgBA;AACD,KApBD;;AAvEC,SAAKb,MAAL,GAAcA,MAAM,IAAI,KAAKA,MAA7B;AACA,SAAKC,UAAL,GAAkBA,UAAU,IAAI,KAAKA,UAArC;AACAC,IAAAA,WAAW,KAAK,KAAKA,WAAL,GAAmBA,WAAxB,CAAX;AACA,SAAKiB,IAAL;AACA;;AArBF;;AAAA,SAuBCC,eAvBD,GAuBC,yBAAgBC,IAAhB,EAA8BC,OAA9B;AACC,SAAKC,gBAAL,CAAsBC,GAAtB,CAA0BH,IAA1B,EAAgCC,OAAhC;AACA,GAzBF;;AAAA,SA2BCH,IA3BD,GA2BC;;;AACCM,IAAAA,MAAM,CAACC,IAAP,CAAYC,QAAZ,EAAsBC,OAAtB,CAA8B,UAAAC,GAAG;;;AAChC;AACA,wBAAAF,QAAQ,CAACE,GAAD,CAAR,4DAAeC,OAAf,2CAAwBtB,IAAxB,KAAgC,MAAI,CAACY,eAAL,CAAqBO,QAAQ,CAACE,GAAD,CAAR,CAAcC,OAAd,CAAsBtB,IAA3C,EAAiDmB,QAAQ,CAACE,GAAD,CAAzD,CAAhC;AACA,KAHD;AAIA,SAAKE,qBAAL;AACA,GAjCF;;AAAA,SAmCCC,SAnCD,GAmCC,mBAAUC,EAAV;AACC,SAAKC,SAAL,CAAeC,GAAf,CAAmBF,EAAnB;AACA,GArCF;;AAAA,SAuCCG,WAvCD,GAuCC,qBAAYH,EAAZ;AACC,SAAKC,SAAL,WAAsBD,EAAtB;AACA,GAzCF;;AAAA,SA2CCI,aA3CD,GA2CC;AACC,SAAKH,SAAL,CAAeN,OAAf,CAAuB,UAAAK,EAAE;AAAA,aAAIA,EAAE,EAAN;AAAA,KAAzB;AACA,SAAKK,mBAAL;AACA,GA9CF;;AAAA,SAgDCC,gBAhDD,GAgDC;AACC,WAAOC,KAAK,CAAC,KAAKxC,MAAL,qBAA6B,KAAKC,UAAlC,CAAD,CAAL,CAAsDwC,IAAtD,CAA2D,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,EAAJ;AAAA,KAA5D,CAAP;AACA,GAlDF;;AAAA,SAoDCC,iBApDD,GAoDC;;;AACC,QAAI,KAAK3C,UAAT,EAAqB;AACpB,WAAKsC,gBAAL,GAAwBE,IAAxB,CAA6B,UAAAlC,IAAI;AAChC,YAAIA,IAAJ,EAAU;AACT,UAAA,MAAI,CAACL,WAAL,GAAmBK,IAAnB;;AACA,UAAA,MAAI,CAACsC,YAAL;;AACA,UAAA,MAAI,CAACR,aAAL;AACA;AACD,OAND,WAMS,UAAAS,GAAG;AACXC,QAAAA,OAAO,CAACC,KAAR,CAAcF,GAAd;AACA,OARD;AASA;AACD,GAhEF;;AAAA,SAkECf,qBAlED,GAkEC;;;AACC,QAAI,OAAO,KAAKkB,wBAAZ,KAAyC,UAA7C,EAAyD;AACxD,WAAKA,wBAAL;AACA;;AACDpD,IAAAA,SAAS,IAAIC,MAAM,CAACoD,gBAAP,CAAwB,SAAxB,EAAmC,KAAKC,kBAAxC,CAAb;;AACA,SAAKF,wBAAL,GAAgC;AAC/BpD,MAAAA,SAAS,IAAIC,MAAM,CAACsD,mBAAP,CAA2B,SAA3B,EAAsC,MAAI,CAACD,kBAA3C,CAAb;AACA,KAFD;;AAGA,WAAO,KAAKF,wBAAZ;AACA,GA3EF;;AAAA,SA6ECX,mBA7ED,GA6EC,6BAAoB9B,IAApB;QAAoBA;AAAAA,MAAAA,OAAO;;;AAC1B,QAAI,KAAKE,QAAT,EAAmB;AAAA;;AAClB,qBAAAZ,MAAM,CAACuD,GAAP,iCAAYC,WAAZ,CAAwB;AACvB9C,QAAAA,IAAI,EAAJA,IADuB;AACjBG,QAAAA,OAAO,EAAE;AACdV,UAAAA,UAAU,EAAE,KAAKA,UADH;AAEdC,UAAAA,WAAW,EAAE,KAAKA;AAFJ;AADQ,OAAxB,EAKG,GALH;AAMA;AACD,GAtFF;;AAAA,SA8GC2C,YA9GD,GA8GC;;;AACC,QAAItC,IAAI,GAAG,KAAKL,WAAhB;;AACA,QAAIK,IAAI,CAACH,KAAT,EAAgB;AACfG,MAAAA,IAAI,CAACH,KAAL,CAAWwB,OAAX,CAAmB,UAAA2B,IAAI;AACtB,YAAIC,SAAS,GAAG,MAAI,CAACzC,aAAL,CAAmBC,GAAnB,CAAuBuC,IAAI,CAACE,EAA5B,KAAmC,IAAIC,iBAAJ,CAAsBH,IAAtB,EAA4B,MAA5B,CAAnD;;AACA,QAAA,MAAI,CAACxC,aAAL,CAAmBS,GAAnB,CAAuB+B,IAAI,CAACE,EAA5B,EAAgCD,SAAhC;AACA,OAHD;AAIA;AACD,GAtHF;;AAAA;AAAA;AAyHA,IAAaE,iBAAb,GAKC,2BAAYC,QAAZ,EAAgCC,QAAhC;;;MAAYD;AAAAA,IAAAA,WAAgB;;;AAJ5B,WAAA,GAAY,EAAZ;AACA,gBAAA,GAAsB,IAAItD,GAAJ,EAAtB;;AAWA,cAAA,GAAU,UAACE,IAAD;AACT,IAAA,MAAI,CAACA,IAAL,GAAYkB,MAAM,CAACoC,MAAP,CAAc,MAAI,CAACtD,IAAnB,EAAyBA,IAAzB,CAAZ;;AACA,IAAA,MAAI,CAAC8B,aAAL;AACA,GAHD;;AAKA,gBAAA,GAAY,UAACJ,EAAD;AACX,IAAA,MAAI,CAACC,SAAL,CAAeC,GAAf,CAAmBF,EAAnB;AACA,GAFD;;AAIA,kBAAA,GAAc,UAACA,EAAD;AACb,IAAA,MAAI,CAACC,SAAL,WAAsBD,EAAtB;AACA,GAFD;;AAIA,oBAAA,GAAgB;AACf,IAAA,MAAI,CAACC,SAAL,CAAeN,OAAf,CAAuB,UAAAK,EAAE;AACxB,aAAOA,EAAE,CAAC,MAAI,CAAC1B,IAAN,CAAT;AACA,KAFD;AAGA,GAJD;;AAMA,sBAAA,GAAkB,UAAC0B,EAAD;AACjB6B,IAAAA,SAAS,CAAC;AACT,MAAA,MAAI,CAAC9B,SAAL,CAAeC,EAAf;;AACA,aAAO;AACN,QAAA,MAAI,CAACG,WAAL,CAAiBH,EAAjB;AACA,OAFD;AAGA,KALQ,EAKN,EALM,CAAT;AAMA,GAPD;;AA1BC,OAAK1B,IAAL,GAAYoD,QAAZ;AACA,kBAAaA,QAAb;AAAA,MAAKnD,IAAL,aAAKA,IAAL;;AACA,MAAIA,IAAJ,EAAU;AACT,SAAKuD,SAAL,GAAiBH,QAAQ,CAACrC,gBAAT,CAA0BP,GAA1B,CAA8BR,IAA9B,CAAjB;AACA;AACD,CAXF;;;AC1IA;AAIA,IAAMwD,YAAY,GAAG,SAAfA,YAAe;;;MAAEC,eAAAA;MAASC,mBAAAA;;AAC9B,wBAAkBC,QAAA,CAAoBF,OAAO,CAAC/D,WAA5B,CAAlB;AAAA,MAAOe,OAAP;;AACA6C,EAAAA,SAAS,CAAC;AACR,QAAIM,YAAY,GAAG,SAAfA,YAAe;AACjBnD,MAAAA,OAAO,CAACgD,OAAO,CAAC/D,WAAT,CAAP;AACD,KAFD;;AAGA+D,IAAAA,OAAO,CAACjC,SAAR,CAAkBoC,YAAlB;AACAH,IAAAA,OAAO,CAACrB,iBAAR;AAEA,WAAO;AACLqB,MAAAA,OAAO,CAAC7B,WAAR,CAAoBgC,YAApB;AACD,KAFD;AAGD,GAVQ,EAUN,EAVM,CAAT;;AAWA,MAAI,0BAACH,OAAO,CAAC/D,WAAT,sCAAC,qBAAqBE,KAAtB,aAAC,sBAA4BiE,MAA7B,KAAuCH,WAA3C,EAAwD;AACtDD,IAAAA,OAAO,CAAC/D,WAAR,GAAsBgE,WAAtB;AACAD,IAAAA,OAAO,CAACpB,YAAR;AACD;;AACD,SAAOsB,aAAA,CAACG,UAAD;AAAY1D,IAAAA,MAAM,EAAE;AAAGqD,IAAAA,OAAO,EAAEA;GAAhC,CAAP;AAED,CAnBD;;AAsBA,IAAMM,IAAI,GAAG,SAAPA,IAAO;MAAEC,qBAAAA;MAAcjD,yBAAAA;MAAkB0C,gBAAAA;;AAC7C,yBAAsBE,QAAA,CAAoBK,YAAY,CAACjE,IAAjC,CAAtB;AAAA,MAAKA,IAAL;AAAA,MAAWU,OAAX;;AACA,MAAKwC,EAAL,GAAoClD,IAApC,CAAKkD,EAAL;AAAA,MAASjD,IAAT,GAAoCD,IAApC,CAASC,IAAT;AAAA,MAAeiE,QAAf,GAAoClE,IAApC,CAAekE,QAAf;AAAA,MAA4BC,IAA5B,iCAAoCnE,IAApC;;AAEA,MAAKoE,eAAL,GAAwBH,YAAxB,CAAKG,eAAL;AACAA,EAAAA,eAAe,CAAC,UAACC,MAAD;AACd7B,IAAAA,OAAO,CAAC8B,GAAR,CAAY,QAAZ,EAAsBD,MAAtB;AACA3D,IAAAA,OAAO,cAAK2D,MAAL,EAAP;AACD,GAHc,CAAf;AAIA,MAAIb,SAAS,GAAGxC,gBAAgB,CAACP,GAAjB,CAAqBR,IAArB,CAAhB;;AACA,MAAIuD,SAAJ,EAAe;AACb,WAAOI,aAAA,CAACJ,SAAD;AAAWlC,MAAAA,GAAG,EAAE4B;oBAAgBA;OAAQiB,KAAxC,EACJI,KAAK,CAACC,OAAN,CAAcN,QAAd,KACEA,QAAQ,CAACO,GAAT,CAAa,UAAAC,OAAO;AAAA,aACnBd,aAAA,CAACG,UAAD;AACIzC,QAAAA,GAAG,EAAEoD;AACLrE,QAAAA,MAAM,EAAEqE;AACRhB,QAAAA,OAAO,EAAEA;OAHb,CADmB;AAAA,KAApB,CAFE,CAAP;AAUD;;AACD,SAAO,IAAP;AACD,CAvBD;;AAwBA,IAAMK,UAAU,GAAG,SAAbA,UAAa;MAAE1D,eAAAA;MAAQqD,gBAAAA;AAC3B,MAAKlD,aAAL,GAAwCkD,OAAxC,CAAKlD,aAAL;AAAA,MAAoBQ,gBAApB,GAAwC0C,OAAxC,CAAoB1C,gBAApB;AACA,MAAIiD,YAAY,GAAGzD,aAAa,CAACC,GAAd,CAAkBJ,MAAlB,CAAnB;;AACA,MAAI4D,YAAJ,EAAkB;AAChB,WAAOL,aAAA,CAACI,IAAD;AAAMC,MAAAA,YAAY,EAAEA;AAAcjD,MAAAA,gBAAgB,EAAEA;AAAkB0C,MAAAA,OAAO,EAAEA;KAA/E,CAAP;AACD;;AACD,SAAOE,aAAA,SAAA,MAAA,CAAP;AACD,CAPD;;;;"}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export declare const isReactNative: boolean;
+export declare const isBrowser: boolean;
+export declare const isIframe: boolean;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "version": "0.1.4",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch --name sdk-react",
+    "dev": "tsdx watch --name sdk-react",
+    "build": "tsdx build --name sdk-react",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build --name sdk-react",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "@weaverse/elements": "^0.1.1",
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@weaverse/react",
+  "author": "Paul Phan",
+  "module": "dist/sdk-react.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/sdk-react.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/sdk-react.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^7.0.4",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@weaverse/elements": "^0.1.4",
+    "husky": "^7.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "size-limit": "^7.0.4",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
+  },
+  "dependencies": {
+    "isomorphic-unfetch": "^3.1.0"
+  }
+}

package/src/core.ts

@@ -0,0 +1,190 @@
+// TODO: Implement Weaverse SDK class
+import fetch from 'isomorphic-unfetch'
+import Elements from '@weaverse/elements'
+import {useEffect} from 'react'
+import {isBrowser} from './utils'
+
+
+export interface ProjectDataItemType {
+	type: string
+	name: string
+	id: string | number
+}
+
+export interface ProjectDataType {
+	items: ProjectDataItemType[]
+}
+
+export class Weaverse {
+	elementInstances = new Map<string, any>()
+	itemInstances = new Map<string | number, WeaverseItemStore>()
+	appUrl: string = 'http://localhost:3000'
+	projectKey: string = ''
+	projectData: ProjectDataType = {
+		items: []
+	}
+	listeners: Set<any> = new Set()
+	isEditor = false
+	currentFrameSubscription: any
+
+	constructor({
+					appUrl,
+					projectKey,
+					projectData
+				}: { appUrl?: string, projectKey?: string, projectData?: ProjectDataType } = {}) {
+		this.appUrl = appUrl || this.appUrl
+		this.projectKey = projectKey || this.projectKey
+		projectData && (this.projectData = projectData)
+		this.init()
+	}
+
+	registerElement(name: string, element: any) {
+		this.elementInstances.set(name, element)
+	}
+
+	init() {
+		Object.keys(Elements).forEach(key => {
+			// @ts-ignore
+			Elements[key]?.configs?.type && this.registerElement(Elements[key].configs.type, Elements[key])
+		})
+		this.subscribeMessageEvent()
+	}
+
+	subscribe(fn: any) {
+		this.listeners.add(fn)
+	}
+
+	unsubscribe(fn: any) {
+		this.listeners.delete(fn)
+	}
+
+	triggerUpdate() {
+		this.listeners.forEach(fn => fn())
+		this.triggerEditorUpdate()
+	}
+
+	fetchProjectData() {
+		return fetch(this.appUrl + `/api/public/${this.projectKey}`).then(r => r.json())
+	}
+
+	updateProjectData() {
+		if (this.projectKey) {
+			this.fetchProjectData().then(data => {
+				if (data) {
+					this.projectData = data
+					this.initItemData()
+					this.triggerUpdate()
+				}
+			}).catch(err => {
+				console.error(err)
+			})
+		}
+	}
+
+	subscribeMessageEvent() {
+		if (typeof this.currentFrameSubscription === 'function') {
+			this.currentFrameSubscription()
+		}
+		isBrowser && window.addEventListener('message', this.handleMessageEvent)
+		this.currentFrameSubscription = () => {
+			isBrowser && window.removeEventListener('message', this.handleMessageEvent)
+		}
+		return this.currentFrameSubscription
+	}
+
+	triggerEditorUpdate(type = 'weaverse.workspace.init') {
+		if (this.isEditor) {
+			window.top?.postMessage({
+				type, payload: {
+					projectKey: this.projectKey,
+					projectData: this.projectData
+				}
+			}, '*')
+		}
+	}
+
+	handleMessageEvent = (e: MessageEvent) => {
+		if (e.data?.type?.startsWith('weaverse.')) {
+			let type = e.data.type
+			switch (type) {
+				case 'weaverse.editor.ready':
+					this.isEditor = true
+					break
+				case 'weaverse.editor.update':
+					let {payload} = e.data
+					let {itemId, background} = payload
+					let instance = this.itemInstances.get(itemId)
+					if (instance) {
+						instance.setData({
+							style: {
+								background
+							}
+						})
+					}
+			}
+		}
+	}
+
+	initItemData() {
+		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)
+			})
+		}
+	}
+}
+
+export class WeaverseItemStore {
+	data: any = {}
+	listeners: Set<any> = new Set()
+	Component: any
+
+	constructor(itemData: any = {}, weaverse: Weaverse) {
+		this.data = itemData
+		let {type} = itemData
+		if (type) {
+			this.Component = weaverse.elementInstances.get(type)
+		}
+	}
+
+	setData = (data: any) => {
+		this.data = Object.assign(this.data, data)
+		this.triggerUpdate()
+	}
+
+	subscribe = (fn: any) => {
+		this.listeners.add(fn)
+	}
+
+	unsubscribe = (fn: any) => {
+		this.listeners.delete(fn)
+	}
+
+	triggerUpdate = () => {
+		this.listeners.forEach(fn => {
+			return fn(this.data)
+		})
+	}
+
+	useSubscription = (fn: any) => {
+		useEffect(() => {
+			this.subscribe(fn)
+			return () => {
+				this.unsubscribe(fn)
+			}
+		}, [])
+	}
+
+
+	// addItem(item: any) {
+	// 	this.items.push(item)
+	// 	this.triggerUpdate()
+	// }
+	//
+	// removeItem(item: any) {
+	// 	this.items = this.items.filter(i => i !== item)
+	// 	this.triggerUpdate()
+	// }
+}

package/src/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import {useEffect} from 'react'
+import {Weaverse} from './core'
+
+const WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {
+  let [, setData] = React.useState<any>(context.projectData)
+  useEffect(() => {
+    let handleUpdate = () => {
+      setData(context.projectData)
+    }
+    context.subscribe(handleUpdate)
+    context.updateProjectData()
+
+    return () => {
+      context.unsubscribe(handleUpdate)
+    }
+  }, [])
+  if (!context.projectData?.items?.length && defaultData) {
+    context.projectData = defaultData
+    context.initItemData()
+  }
+  return <RenderItem itemId={0} context={context}/>
+
+}
+
+
+const Item = ({itemInstance, elementInstances, context}: any) => {
+  let [data, setData] = React.useState<any>(itemInstance.data)
+  let {id, type, childIds, ...rest} = data
+
+  let {useSubscription} = itemInstance
+  useSubscription((update: any) => {
+    console.log('update', update)
+    setData({...update})
+  })
+  let Component = elementInstances.get(type)
+  if (Component) {
+    return <Component key={id} data-wv-id={id} {...rest}>
+      {Array.isArray(childIds)
+      && childIds.map(childId =>
+          <RenderItem
+              key={childId}
+              itemId={childId}
+              context={context}
+          />
+      )}
+    </Component>
+  }
+  return null
+}
+const RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {
+  let {itemInstances, elementInstances} = context
+  let itemInstance = itemInstances.get(itemId)
+  if (itemInstance) {
+    return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>
+  }
+  return <></>
+}
+
+export {Weaverse, WeaverseRoot}

package/src/types.d.ts

@@ -0,0 +1,13 @@
+import {ReactChild} from 'react'
+
+export interface HWSDKConfig {
+    initialData?: any
+    token?: string
+    projectId?: string
+    hydrate?: boolean
+    apiUrl?: string
+}
+
+export interface HWProps extends HWSDKConfig {
+    children?: ReactChild;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export const isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative'
+export const isBrowser = typeof window !== 'undefined' && !isReactNative
+export const isIframe = isBrowser && window.top !== window.self

package/src/utils/toHash.js

@@ -0,0 +1,23 @@
+const toAlphabeticChar = (/** @type {number} */ code) => String.fromCharCode(code + (code > 25 ? 39 : 97))
+
+const toAlphabeticName = (/** @type {number} */ code) => {
+	let name = ''
+	let x
+
+	for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toAlphabeticChar(x % 52) + name
+
+	return toAlphabeticChar(x % 52) + name
+}
+
+const toPhash = (/** @type {number} */ h, /** @type {string} */ x) => {
+	let i = x.length
+	while (i) h = (h * 33) ^ x.charCodeAt(--i)
+	return h
+}
+
+export const toHash = (/** @type {object} */ value) => toAlphabeticName(
+	toPhash(
+		5381,
+		JSON.stringify(value)
+	) >>> 0
+)