@weaverse/core 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Paul
+
+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,115 @@
+# TSDX User Guide
+
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with
+what’s here and how to use it.
+
+> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
+
+> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`.
+
+To run TSDX, use:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`
+.
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields
+in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`.
+
+### Bundle Analysis
+
+[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library
+with `npm run size` and visualize the bundle with `npm run analyze`.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```txt
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+### Rollup
+
+TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats
+and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your
+needs.
+
+## Continuous Integration
+
+### GitHub Actions
+
+Two actions are added by default:
+
+- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
+- `size` which comments cost comparison of your library on every pull request
+  using [`size-limit`](https://github.com/ai/size-limit)
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know
+that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant)
+and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are
+found.
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split
+inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so
+that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using [np](https://github.com/sindresorhus/np).

package/dist/core.cjs.development.js

@@ -0,0 +1,348 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var fetch = _interopDefault(require('isomorphic-unfetch'));
+require('process');
+
+var isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative';
+var isBrowser = typeof window !== 'undefined' && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
+/**
+ * When the editor is ready, we'll load this studio-bridge code.
+ * This is for processing data between the editor and the workspace project.
+ * It will not load in production mode or not running when the editor is not detected/ready.
+ */
+
+var StudioBridge = /*#__PURE__*/function () {
+  function StudioBridge(weaverse) {
+    var _this = this;
+
+    /**
+     * handle the message event from editor(parent window)
+     * the message type will start with "weavers.",
+     * when an item got message to update, get the item instance and setData to it
+     * @param event {MessageEvent}
+     */
+    this.handleMessageEvent = function (event) {
+      var _event$data, _event$data$type;
+
+      if ((_event$data = event.data) != null && (_event$data$type = _event$data.type) != null && _event$data$type.startsWith('weaverse.')) {
+        var type = event.data.type;
+
+        switch (type) {
+          case 'weaverse.editor.ready':
+            _this.weaverse.isEditor = true;
+            break;
+
+          case 'weaverse.editor.update':
+            var payload = event.data.payload;
+            var itemId = payload.itemId,
+                background = payload.background;
+
+            var instance = _this.weaverse.itemInstances.get(itemId);
+
+            if (instance) {
+              instance.setData({
+                css: {
+                  background: background
+                }
+              });
+            }
+
+        }
+      }
+    };
+
+    this.handleMouseDown = function (e) {
+      console.log('handleMouseDown', e);
+
+      _this.sendMessageToEditor('weaverse.editor.mouseDown', {});
+    };
+
+    this.weaverse = weaverse;
+    this.handleProps = {
+      onMouseDownCapture: this.handleMouseDown.bind(this)
+    };
+  }
+  /**
+   * subscribe to window message event from editor(parent window), and handle the message event
+   */
+
+
+  var _proto = StudioBridge.prototype;
+
+  _proto.subscribeMessageEvent = function subscribeMessageEvent() {
+    var _this2 = this;
+
+    if (typeof this.currentFrameSubscription === 'function') {
+      this.currentFrameSubscription();
+    }
+
+    isBrowser && window.addEventListener('message', this.handleMessageEvent);
+
+    this.currentFrameSubscription = function () {
+      isBrowser && window.removeEventListener('message', _this2.handleMessageEvent);
+    };
+
+    return this.currentFrameSubscription;
+  };
+
+  _proto.sendMessageToEditor = function sendMessageToEditor(type, payload) {
+    isBrowser && window.parent.postMessage({
+      type: type,
+      payload: payload
+    }, '*');
+  };
+
+  return StudioBridge;
+}();
+
+// TODO: Implement Weaverse SDK class
+// using stitches core only for framework-agnostic code
+
+var stitches = /*#__PURE__*/require('@stitches/core');
+
+var Weaverse = /*#__PURE__*/function () {
+  /**
+   * constructor
+   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+   * @param projectKey {string} Weaverse project key to access project data via API
+   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
+   */
+  function Weaverse(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        appUrl = _ref.appUrl,
+        projectKey = _ref.projectKey,
+        projectData = _ref.projectData;
+
+    /**
+     * For storing, registering element React component from Weaverse or created by user/developer
+     * @type {Map<string, React.Component>}
+     */
+    this.elementInstances = new Map();
+    /**
+     * list of element/items store to provide data, handle state update, state sharing, etc.
+     * @type {Map<string, any>}
+     */
+
+    this.itemInstances = new Map();
+    /**
+     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @type {string}
+     */
+
+    this.appUrl =  'http://localhost:3000' ;
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
+
+    this.projectKey = '';
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     */
+
+    this.projectData = {
+      items: []
+    };
+    /**
+     * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     * @type {Map<string, (data: any) => void>}
+     */
+
+    this.listeners = new Set();
+    /**
+     * check whether the sdk is inEditor or not
+     * if isEditor is true, it means the sdk is inEditor mode, render the editor UI
+     * else render the preview UI, plain HTML + CSS + React hydrate
+     * @type {boolean}
+     */
+
+    this.isEditor = false;
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+  /**
+   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+   * @param name {string} unique name of the custom React Component
+   * @param element {React.Component} custom React Component
+   */
+
+
+  var _proto = Weaverse.prototype;
+
+  _proto.registerElement = function registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  };
+
+  _proto.init = function init() {
+    // init the stitches instance
+    this.stitchesInstance = stitches.createStitches({
+      prefix: 'weaverse',
+      media: {
+        bp1: '(min-width: 640px)',
+        bp2: '(max-width: 768px)',
+        bp3: '(min-width: 1024px)'
+      }
+    });
+  };
+
+  _proto.loadStudio = function loadStudio() {
+    console.log('"development"', "development"); // only load studio bridge if it's in editor mode
+
+    {
+      // TODO: separate studio bridge into a separate package
+      // in development mode, we should use localhost:3000 as appUrl
+      // this.appUrl = 'http://localhost:3000'
+      // let StudioBridge = require('./studio-bridge')
+      this.studioBridge = new StudioBridge(this);
+      console.log('Weaverse: init studio bridge', this.studioBridge);
+      this.studioBridge.subscribeMessageEvent();
+      return true;
+    }
+  };
+
+  _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();
+  }
+  /**
+   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)
+   */
+  ;
+
+  _proto.fetchProjectData = function fetchProjectData() {
+    return fetch(this.appUrl + ("/api/public/" + this.projectKey)).then(function (r) {
+      return r.json();
+    })["catch"](console.error);
+  }
+  /**
+   * fetch and update the project data, then trigger update to re-render the WeaverseRoot
+   */
+  ;
+
+  _proto.updateProjectData = function updateProjectData() {
+
+    console.log('this.projectData', this.projectData);
+    this.initItemData();
+    this.triggerUpdate();
+    return;
+  };
+
+  _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 _this2 = this;
+
+    var data = this.projectData;
+
+    if (data.items) {
+      data.items.forEach(function (item) {
+        var itemStore = _this2.itemInstances.get(item.id) || new WeaverseItemStore(item, _this2);
+
+        _this2.itemInstances.set(item.id, itemStore);
+      });
+    }
+  };
+
+  return Weaverse;
+}();
+/**
+ * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
+ * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param weaverse {Weaverse} Weaverse instance
+ * Usage:
+ * ```jsx
+ * useEffect(() => {
+ *     let handleUpdate = (update: any) => {
+ *       setData({...update})
+ *     }
+ *     itemInstance.subscribe(handleUpdate)
+ *     return () => {
+ *       itemInstance.unsubscribe(handleUpdate)
+ *     }
+ *   }, [])
+ *   ```
+ */
+
+var WeaverseItemStore = function WeaverseItemStore(itemData, weaverse) {
+  var _this3 = this;
+
+  if (itemData === void 0) {
+    itemData = {};
+  }
+
+  this.data = {};
+  this.listeners = new Set();
+  this.ref = {
+    current: null
+  };
+
+  this.setData = function (data) {
+    _this3.data = Object.assign(_this3.data, data);
+
+    _this3.triggerUpdate();
+  };
+
+  this.subscribe = function (fn) {
+    _this3.listeners.add(fn);
+  };
+
+  this.unsubscribe = function (fn) {
+    _this3.listeners["delete"](fn);
+  };
+
+  this.triggerUpdate = function () {
+    _this3.listeners.forEach(function (fn) {
+      return fn(_this3.data);
+    });
+  };
+
+  this.data = itemData;
+  var _itemData = itemData,
+      type = _itemData.type;
+
+  if (type) {
+    this.Component = weaverse.elementInstances.get(type);
+  }
+};
+
+exports.Weaverse = Weaverse;
+exports.WeaverseItemStore = WeaverseItemStore;
+exports.isBrowser = isBrowser;
+exports.isIframe = isIframe;
+exports.isReactNative = isReactNative;
+//# sourceMappingURL=core.cjs.development.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"core.cjs.development.js","sources":["../src/utils/index.ts","../src/studio-bridge.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","import {isBrowser} from './utils'\nimport type {Weaverse} from '.'\n\n/**\n * When the editor is ready, we'll load this studio-bridge code.\n * This is for processing data between the editor and the workspace project.\n * It will not load in production mode or not running when the editor is not detected/ready.\n */\n\nexport class StudioBridge {\n  weaverse: Weaverse\n\n  /**\n   * instance for subscribing to window message, save it to currentFrameSubscription then can remove it when unmount\n   */\n  currentFrameSubscription: any\n  handleProps: any\n  constructor(weaverse: Weaverse) {\n    this.weaverse = weaverse\n    this.handleProps = {\n      onMouseDownCapture: this.handleMouseDown.bind(this)\n    }\n  }\n\n  /**\n   * subscribe to window message event from editor(parent window), and handle the message event\n   */\n  subscribeMessageEvent() {\n    if (typeof this.currentFrameSubscription === 'function') {\n      this.currentFrameSubscription()\n    }\n    isBrowser && window.addEventListener('message', this.handleMessageEvent)\n    this.currentFrameSubscription = () => {\n      isBrowser && window.removeEventListener('message', this.handleMessageEvent)\n    }\n    return this.currentFrameSubscription\n  }\n\n  /**\n   * handle the message event from editor(parent window)\n   * the message type will start with \"weavers.\",\n   * when an item got message to update, get the item instance and setData to it\n   * @param event {MessageEvent}\n   */\n  handleMessageEvent = (event: MessageEvent) => {\n    if (event.data?.type?.startsWith('weaverse.')) {\n      let type = event.data.type\n      switch (type) {\n        case 'weaverse.editor.ready':\n          this.weaverse.isEditor = true\n          break\n        case 'weaverse.editor.update':\n          let {payload} = event.data\n          let {itemId, background} = payload\n          let instance = this.weaverse.itemInstances.get(itemId)\n          if (instance) {\n            instance.setData({\n              css: {\n                background\n              }\n            })\n          }\n      }\n    }\n  }\n\n  sendMessageToEditor(type: string, payload: any) {\n    isBrowser && window.parent.postMessage({type, payload}, '*')\n  }\n\n  handleMouseDown = (e: MouseEvent) => {\n    console.log('handleMouseDown', e)\n    this.sendMessageToEditor('weaverse.editor.mouseDown', {})\n  }\n}\n\n\nexport default StudioBridge","// 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 StudioBridge from './studio-bridge'\nimport Stitches from '@stitches/core/types/stitches'\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?: StudioBridge\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  }\n\n  loadStudio() {\n    console.log('process.env.NODE_ENV', process.env.NODE_ENV)\n    // only load studio bridge if it's in editor mode\n    if (process.env.NODE_ENV !== 'production') {\n      // TODO: separate studio bridge into a separate package\n      // in development mode, we should use localhost:3000 as appUrl\n      // this.appUrl = 'http://localhost:3000'\n      // let StudioBridge = require('./studio-bridge')\n      this.studioBridge = new StudioBridge(this)\n      console.log('Weaverse: init studio bridge', this.studioBridge)\n\n      this.studioBridge.subscribeMessageEvent()\n      return true\n    }\n    return false\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","StudioBridge","weaverse","event","data","type","startsWith","isEditor","payload","itemId","background","instance","itemInstances","get","setData","css","e","console","log","sendMessageToEditor","handleProps","onMouseDownCapture","handleMouseDown","bind","subscribeMessageEvent","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","parent","postMessage","stitches","require","Weaverse","appUrl","projectKey","projectData","Map","process","items","Set","init","registerElement","name","element","elementInstances","set","stitchesInstance","createStitches","prefix","media","bp1","bp2","bp3","loadStudio","studioBridge","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","item","itemStore","id","WeaverseItemStore","itemData","current","Object","assign","Component"],"mappings":"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"}

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

@@ -0,0 +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"),o=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)"}})},i.loadStudio=function(){return console.log('"production"',"production"),!1},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 a(e,t);t.itemInstances.set(e.id,i)}))},t}(),a=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=o,exports.WeaverseItemStore=a,exports.isBrowser=s,exports.isIframe=r,exports.isReactNative=i;
+//# sourceMappingURL=core.cjs.production.min.js.map

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

@@ -0,0 +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 StudioBridge from './studio-bridge'\nimport Stitches from '@stitches/core/types/stitches'\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?: StudioBridge\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  }\n\n  loadStudio() {\n    console.log('process.env.NODE_ENV', process.env.NODE_ENV)\n    // only load studio bridge if it's in editor mode\n    if (process.env.NODE_ENV !== 'production') {\n      // TODO: separate studio bridge into a separate package\n      // in development mode, we should use localhost:3000 as appUrl\n      // this.appUrl = 'http://localhost:3000'\n      // let StudioBridge = require('./studio-bridge')\n      this.studioBridge = new StudioBridge(this)\n      console.log('Weaverse: init studio bridge', this.studioBridge)\n\n      this.studioBridge.subscribeMessageEvent()\n      return true\n    }\n    return false\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","console","log","process","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","type","isEditor","postMessage","payload","data","item","itemStore","_this2","itemInstances","get","id","WeaverseItemStore","itemData","weaverse","current","_this3","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,4BAMbC,WAAA,kBACEC,QAAQC,IAAI,eAAwBC,eAa7B,KAGTC,UAAA,SAAUC,QACHC,UAAUC,IAAIF,MAGrBG,YAAA,SAAYH,QACLC,iBAAiBD,MAGxBI,cAAA,gBACOH,UAAUI,SAAQ,SAAAL,UAAMA,YACxBM,yBAMPC,iBAAA,kBACSC,EAAM3B,KAAKN,sBAAwBM,KAAKL,YAAciC,MAAK,SAAAC,UAAKA,EAAEC,gBAAcf,QAAQgB,UAMjGC,kBAAA,WACEjB,QAAQC,IAAI,mBAAoBhB,KAAKJ,kBAChCqC,oBACAV,mBAgBPE,oBAAA,SAAoBS,kBAAAA,IAAAA,EAAO,2BACrBlC,KAAKmC,oBACPhD,OAAOE,QAAK+C,YAAY,CACtBF,KAAAA,EAAMG,QAAS,CACb1C,WAAYK,KAAKL,WACjBC,YAAaI,KAAKJ,cAEnB,SAIPqC,aAAA,sBACMK,EAAOtC,KAAKJ,YACZ0C,EAAKxC,OACPwC,EAAKxC,MAAM0B,SAAQ,SAAAe,OACbC,EAAYC,EAAKC,cAAcC,IAAIJ,EAAKK,KAAO,IAAIC,EAAkBN,EAAME,GAC/EA,EAAKC,cAAcpC,IAAIiC,EAAKK,GAAIJ,YAuB3BK,EAQX,SAAYC,EAAoBC,uBAApBD,IAAAA,EAAgB,cAPhB,kBACU,IAAI/C,aAEf,CACTiD,QAAS,mBAWD,SAACV,GACTW,EAAKX,KAAOY,OAAOC,OAAOF,EAAKX,KAAMA,GACrCW,EAAK1B,gCAGK,SAACJ,GACX8B,EAAK7B,UAAUC,IAAIF,qBAGP,SAACA,GACb8B,EAAK7B,iBAAiBD,uBAGR,WACd8B,EAAK7B,UAAUI,SAAQ,SAAAL,UACdA,EAAG8B,EAAKX,eAtBZA,KAAOQ,MACPZ,EAAQY,EAARZ,KACDA,SACGkB,UAAYL,EAAS1C,iBAAiBsC,IAAIT"}

package/dist/core.d.ts

@@ -0,0 +1,121 @@
+import StudioBridge from './studio-bridge';
+import Stitches from '@stitches/core/types/stitches';
+export interface ProjectDataItemType {
+    type: string;
+    name?: string;
+    id: string | number;
+    description?: string;
+    childIds?: Array<string | number>;
+    css?: {
+        [key: string]: string;
+    };
+}
+export interface ProjectDataType {
+    items: ProjectDataItemType[];
+}
+export declare type WeaverseType = {
+    [key: string]: any;
+    appUrl?: string;
+    projectKey?: string;
+    projectData?: ProjectDataType;
+};
+export declare class Weaverse {
+    /**
+     * For storing, registering element React component from Weaverse or created by user/developer
+     * @type {Map<string, React.Component>}
+     */
+    elementInstances: Map<string, any>;
+    /**
+     * list of element/items store to provide data, handle state update, state sharing, etc.
+     * @type {Map<string, any>}
+     */
+    itemInstances: Map<string | number, WeaverseItemStore>;
+    /**
+     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @type {string}
+     */
+    appUrl: string;
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
+    projectKey: string;
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     */
+    projectData: ProjectDataType;
+    /**
+     * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     * @type {Map<string, (data: any) => void>}
+     */
+    listeners: Set<any>;
+    /**
+     * check whether the sdk is inEditor or not
+     * if isEditor is true, it means the sdk is inEditor mode, render the editor UI
+     * else render the preview UI, plain HTML + CSS + React hydrate
+     * @type {boolean}
+     */
+    isEditor: boolean;
+    /**
+     * stitches instance for handling CSS stylesheet, media, theme for Weaverse project
+     */
+    stitchesInstance: Stitches | any;
+    studioBridge?: StudioBridge;
+    /**
+     * constructor
+     * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @param projectKey {string} Weaverse project key to access project data via API
+     * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
+     */
+    constructor({ appUrl, projectKey, projectData }?: WeaverseType);
+    /**
+     * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+     * @param name {string} unique name of the custom React Component
+     * @param element {React.Component} custom React Component
+     */
+    registerElement(name: string, element: any): void;
+    init(): void;
+    loadStudio(): boolean;
+    subscribe(fn: any): void;
+    unsubscribe(fn: any): void;
+    triggerUpdate(): void;
+    /**
+     * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)
+     */
+    fetchProjectData(): Promise<any>;
+    /**
+     * fetch and update the project data, then trigger update to re-render the WeaverseRoot
+     */
+    updateProjectData(): void;
+    triggerEditorUpdate(type?: string): void;
+    initItemData(): void;
+}
+/**
+ * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
+ * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param weaverse {Weaverse} Weaverse instance
+ * Usage:
+ * ```jsx
+ * useEffect(() => {
+ *     let handleUpdate = (update: any) => {
+ *       setData({...update})
+ *     }
+ *     itemInstance.subscribe(handleUpdate)
+ *     return () => {
+ *       itemInstance.unsubscribe(handleUpdate)
+ *     }
+ *   }, [])
+ *   ```
+ */
+export declare class WeaverseItemStore {
+    data: any;
+    listeners: Set<any>;
+    Component: any;
+    ref: any;
+    constructor(itemData: any, weaverse: Weaverse);
+    setData: (data: any) => void;
+    subscribe: (fn: any) => void;
+    unsubscribe: (fn: any) => void;
+    triggerUpdate: () => void;
+}

package/dist/core.esm.js

@@ -0,0 +1,340 @@
+import fetch from 'isomorphic-unfetch';
+import { env } from 'process';
+
+var isReactNative = typeof navigator === 'object' && navigator.product === 'ReactNative';
+var isBrowser = typeof window !== 'undefined' && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
+/**
+ * When the editor is ready, we'll load this studio-bridge code.
+ * This is for processing data between the editor and the workspace project.
+ * It will not load in production mode or not running when the editor is not detected/ready.
+ */
+
+var StudioBridge = /*#__PURE__*/function () {
+  function StudioBridge(weaverse) {
+    var _this = this;
+
+    /**
+     * handle the message event from editor(parent window)
+     * the message type will start with "weavers.",
+     * when an item got message to update, get the item instance and setData to it
+     * @param event {MessageEvent}
+     */
+    this.handleMessageEvent = function (event) {
+      var _event$data, _event$data$type;
+
+      if ((_event$data = event.data) != null && (_event$data$type = _event$data.type) != null && _event$data$type.startsWith('weaverse.')) {
+        var type = event.data.type;
+
+        switch (type) {
+          case 'weaverse.editor.ready':
+            _this.weaverse.isEditor = true;
+            break;
+
+          case 'weaverse.editor.update':
+            var payload = event.data.payload;
+            var itemId = payload.itemId,
+                background = payload.background;
+
+            var instance = _this.weaverse.itemInstances.get(itemId);
+
+            if (instance) {
+              instance.setData({
+                css: {
+                  background: background
+                }
+              });
+            }
+
+        }
+      }
+    };
+
+    this.handleMouseDown = function (e) {
+      console.log('handleMouseDown', e);
+
+      _this.sendMessageToEditor('weaverse.editor.mouseDown', {});
+    };
+
+    this.weaverse = weaverse;
+    this.handleProps = {
+      onMouseDownCapture: this.handleMouseDown.bind(this)
+    };
+  }
+  /**
+   * subscribe to window message event from editor(parent window), and handle the message event
+   */
+
+
+  var _proto = StudioBridge.prototype;
+
+  _proto.subscribeMessageEvent = function subscribeMessageEvent() {
+    var _this2 = this;
+
+    if (typeof this.currentFrameSubscription === 'function') {
+      this.currentFrameSubscription();
+    }
+
+    isBrowser && window.addEventListener('message', this.handleMessageEvent);
+
+    this.currentFrameSubscription = function () {
+      isBrowser && window.removeEventListener('message', _this2.handleMessageEvent);
+    };
+
+    return this.currentFrameSubscription;
+  };
+
+  _proto.sendMessageToEditor = function sendMessageToEditor(type, payload) {
+    isBrowser && window.parent.postMessage({
+      type: type,
+      payload: payload
+    }, '*');
+  };
+
+  return StudioBridge;
+}();
+
+// TODO: Implement Weaverse SDK class
+// using stitches core only for framework-agnostic code
+
+var stitches = /*#__PURE__*/require('@stitches/core');
+
+var Weaverse = /*#__PURE__*/function () {
+  /**
+   * constructor
+   * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+   * @param projectKey {string} Weaverse project key to access project data via API
+   * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
+   */
+  function Weaverse(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        appUrl = _ref.appUrl,
+        projectKey = _ref.projectKey,
+        projectData = _ref.projectData;
+
+    /**
+     * For storing, registering element React component from Weaverse or created by user/developer
+     * @type {Map<string, React.Component>}
+     */
+    this.elementInstances = new Map();
+    /**
+     * list of element/items store to provide data, handle state update, state sharing, etc.
+     * @type {Map<string, any>}
+     */
+
+    this.itemInstances = new Map();
+    /**
+     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @type {string}
+     */
+
+    this.appUrl = env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://weaverse.io';
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
+
+    this.projectKey = '';
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     */
+
+    this.projectData = {
+      items: []
+    };
+    /**
+     * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     * @type {Map<string, (data: any) => void>}
+     */
+
+    this.listeners = new Set();
+    /**
+     * check whether the sdk is inEditor or not
+     * if isEditor is true, it means the sdk is inEditor mode, render the editor UI
+     * else render the preview UI, plain HTML + CSS + React hydrate
+     * @type {boolean}
+     */
+
+    this.isEditor = false;
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+  /**
+   * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+   * @param name {string} unique name of the custom React Component
+   * @param element {React.Component} custom React Component
+   */
+
+
+  var _proto = Weaverse.prototype;
+
+  _proto.registerElement = function registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  };
+
+  _proto.init = function init() {
+    // init the stitches instance
+    this.stitchesInstance = stitches.createStitches({
+      prefix: 'weaverse',
+      media: {
+        bp1: '(min-width: 640px)',
+        bp2: '(max-width: 768px)',
+        bp3: '(min-width: 1024px)'
+      }
+    });
+  };
+
+  _proto.loadStudio = function loadStudio() {
+    console.log('process.env.NODE_ENV', env.NODE_ENV); // only load studio bridge if it's in editor mode
+
+    if (env.NODE_ENV !== 'production') {
+      // TODO: separate studio bridge into a separate package
+      // in development mode, we should use localhost:3000 as appUrl
+      // this.appUrl = 'http://localhost:3000'
+      // let StudioBridge = require('./studio-bridge')
+      this.studioBridge = new StudioBridge(this);
+      console.log('Weaverse: init studio bridge', this.studioBridge);
+      this.studioBridge.subscribeMessageEvent();
+      return true;
+    }
+
+    return false;
+  };
+
+  _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();
+  }
+  /**
+   * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)
+   */
+  ;
+
+  _proto.fetchProjectData = function fetchProjectData() {
+    return fetch(this.appUrl + ("/api/public/" + this.projectKey)).then(function (r) {
+      return r.json();
+    })["catch"](console.error);
+  }
+  /**
+   * fetch and update the project data, then trigger update to re-render the WeaverseRoot
+   */
+  ;
+
+  _proto.updateProjectData = function updateProjectData() {
+
+    console.log('this.projectData', this.projectData);
+    this.initItemData();
+    this.triggerUpdate();
+    return;
+  };
+
+  _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 _this2 = this;
+
+    var data = this.projectData;
+
+    if (data.items) {
+      data.items.forEach(function (item) {
+        var itemStore = _this2.itemInstances.get(item.id) || new WeaverseItemStore(item, _this2);
+
+        _this2.itemInstances.set(item.id, itemStore);
+      });
+    }
+  };
+
+  return Weaverse;
+}();
+/**
+ * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
+ * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param weaverse {Weaverse} Weaverse instance
+ * Usage:
+ * ```jsx
+ * useEffect(() => {
+ *     let handleUpdate = (update: any) => {
+ *       setData({...update})
+ *     }
+ *     itemInstance.subscribe(handleUpdate)
+ *     return () => {
+ *       itemInstance.unsubscribe(handleUpdate)
+ *     }
+ *   }, [])
+ *   ```
+ */
+
+var WeaverseItemStore = function WeaverseItemStore(itemData, weaverse) {
+  var _this3 = this;
+
+  if (itemData === void 0) {
+    itemData = {};
+  }
+
+  this.data = {};
+  this.listeners = new Set();
+  this.ref = {
+    current: null
+  };
+
+  this.setData = function (data) {
+    _this3.data = Object.assign(_this3.data, data);
+
+    _this3.triggerUpdate();
+  };
+
+  this.subscribe = function (fn) {
+    _this3.listeners.add(fn);
+  };
+
+  this.unsubscribe = function (fn) {
+    _this3.listeners["delete"](fn);
+  };
+
+  this.triggerUpdate = function () {
+    _this3.listeners.forEach(function (fn) {
+      return fn(_this3.data);
+    });
+  };
+
+  this.data = itemData;
+  var _itemData = itemData,
+      type = _itemData.type;
+
+  if (type) {
+    this.Component = weaverse.elementInstances.get(type);
+  }
+};
+
+export { Weaverse, WeaverseItemStore, isBrowser, isIframe, isReactNative };
+//# sourceMappingURL=core.esm.js.map

package/dist/core.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.esm.js","sources":["../src/utils/index.ts","../src/studio-bridge.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","import {isBrowser} from './utils'\nimport type {Weaverse} from '.'\n\n/**\n * When the editor is ready, we'll load this studio-bridge code.\n * This is for processing data between the editor and the workspace project.\n * It will not load in production mode or not running when the editor is not detected/ready.\n */\n\nexport class StudioBridge {\n  weaverse: Weaverse\n\n  /**\n   * instance for subscribing to window message, save it to currentFrameSubscription then can remove it when unmount\n   */\n  currentFrameSubscription: any\n  handleProps: any\n  constructor(weaverse: Weaverse) {\n    this.weaverse = weaverse\n    this.handleProps = {\n      onMouseDownCapture: this.handleMouseDown.bind(this)\n    }\n  }\n\n  /**\n   * subscribe to window message event from editor(parent window), and handle the message event\n   */\n  subscribeMessageEvent() {\n    if (typeof this.currentFrameSubscription === 'function') {\n      this.currentFrameSubscription()\n    }\n    isBrowser && window.addEventListener('message', this.handleMessageEvent)\n    this.currentFrameSubscription = () => {\n      isBrowser && window.removeEventListener('message', this.handleMessageEvent)\n    }\n    return this.currentFrameSubscription\n  }\n\n  /**\n   * handle the message event from editor(parent window)\n   * the message type will start with \"weavers.\",\n   * when an item got message to update, get the item instance and setData to it\n   * @param event {MessageEvent}\n   */\n  handleMessageEvent = (event: MessageEvent) => {\n    if (event.data?.type?.startsWith('weaverse.')) {\n      let type = event.data.type\n      switch (type) {\n        case 'weaverse.editor.ready':\n          this.weaverse.isEditor = true\n          break\n        case 'weaverse.editor.update':\n          let {payload} = event.data\n          let {itemId, background} = payload\n          let instance = this.weaverse.itemInstances.get(itemId)\n          if (instance) {\n            instance.setData({\n              css: {\n                background\n              }\n            })\n          }\n      }\n    }\n  }\n\n  sendMessageToEditor(type: string, payload: any) {\n    isBrowser && window.parent.postMessage({type, payload}, '*')\n  }\n\n  handleMouseDown = (e: MouseEvent) => {\n    console.log('handleMouseDown', e)\n    this.sendMessageToEditor('weaverse.editor.mouseDown', {})\n  }\n}\n\n\nexport default StudioBridge","// 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 StudioBridge from './studio-bridge'\nimport Stitches from '@stitches/core/types/stitches'\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?: StudioBridge\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  }\n\n  loadStudio() {\n    console.log('process.env.NODE_ENV', process.env.NODE_ENV)\n    // only load studio bridge if it's in editor mode\n    if (process.env.NODE_ENV !== 'production') {\n      // TODO: separate studio bridge into a separate package\n      // in development mode, we should use localhost:3000 as appUrl\n      // this.appUrl = 'http://localhost:3000'\n      // let StudioBridge = require('./studio-bridge')\n      this.studioBridge = new StudioBridge(this)\n      console.log('Weaverse: init studio bridge', this.studioBridge)\n\n      this.studioBridge.subscribeMessageEvent()\n      return true\n    }\n    return false\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","StudioBridge","weaverse","event","data","type","startsWith","isEditor","payload","itemId","background","instance","itemInstances","get","setData","css","e","console","log","sendMessageToEditor","handleProps","onMouseDownCapture","handleMouseDown","bind","subscribeMessageEvent","currentFrameSubscription","addEventListener","handleMessageEvent","removeEventListener","parent","postMessage","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","studioBridge","subscribe","fn","listeners","add","unsubscribe","triggerUpdate","forEach","triggerEditorUpdate","fetchProjectData","fetch","then","r","json","error","updateProjectData","initItemData","item","itemStore","id","WeaverseItemStore","itemData","current","Object","assign","Component"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { ProjectDataItemType, ProjectDataType, Weaverse, WeaverseItemStore, WeaverseType } from './core';
+import { isBrowser, isIframe, isReactNative } from './utils';
+export { Weaverse, WeaverseType, WeaverseItemStore, ProjectDataType, ProjectDataItemType, isBrowser, isReactNative, isIframe };

package/dist/index.js

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

package/dist/studio-bridge.d.ts

@@ -0,0 +1,29 @@
+import type { Weaverse } from '.';
+/**
+ * When the editor is ready, we'll load this studio-bridge code.
+ * This is for processing data between the editor and the workspace project.
+ * It will not load in production mode or not running when the editor is not detected/ready.
+ */
+export declare class StudioBridge {
+    weaverse: Weaverse;
+    /**
+     * instance for subscribing to window message, save it to currentFrameSubscription then can remove it when unmount
+     */
+    currentFrameSubscription: any;
+    handleProps: any;
+    constructor(weaverse: Weaverse);
+    /**
+     * subscribe to window message event from editor(parent window), and handle the message event
+     */
+    subscribeMessageEvent(): any;
+    /**
+     * handle the message event from editor(parent window)
+     * the message type will start with "weavers.",
+     * when an item got message to update, get the item instance and setData to it
+     * @param event {MessageEvent}
+     */
+    handleMessageEvent: (event: MessageEvent) => void;
+    sendMessageToEditor(type: string, payload: any): void;
+    handleMouseDown: (e: MouseEvent) => void;
+}
+export default StudioBridge;

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,60 @@
+{
+  "version": "0.2.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "dev": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@weaverse/core",
+  "author": "Paul",
+  "module": "dist/core.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/core.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/core.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "dependencies": {
+    "@stitches/core": "^1.2.6",
+    "isomorphic-unfetch": "^3.1.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "size-limit": "^7.0.8",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.5"
+  }
+}