@weaverse/core 0.2.4 → 0.3.2

package/README.md

@@ -1,115 +0,0 @@
-# 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/index.d.ts

@@ -1,3 +1,131 @@
-import { ProjectDataItemType, ProjectDataType, Weaverse, WeaverseItemStore, WeaverseType } from './core';
-import { isBrowser, isIframe, isReactNative } from './utils';
-export { Weaverse, WeaverseType, WeaverseItemStore, ProjectDataType, ProjectDataItemType, isBrowser, isReactNative, isIframe };
+import Stitches from '@stitches/core/types/stitches';
+
+interface ProjectDataItemType {
+    type: string;
+    name?: string;
+    id: string | number;
+    description?: string;
+    childIds?: Array<string | number>;
+    css?: {
+        [key: string]: string;
+    };
+}
+interface ProjectDataType {
+    items: ProjectDataItemType[];
+    rootId: string | number;
+}
+declare type WeaverseType = {
+    [key: string]: any;
+    appUrl?: string;
+    projectKey?: string;
+    projectData?: ProjectDataType;
+};
+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?: any;
+    /**
+     * 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;
+    listen(callback: any): void;
+    loadStudio(): void;
+    subscribe(fn: any): void;
+    unsubscribe(fn: any): void;
+    triggerUpdate(): void;
+    /**
+     * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/:projectKey)
+     * @param fetch {fetch} custom fetch function, pass in custom fetch function if you want to use your own fetch function
+     */
+    fetchProjectData(fetch?: typeof globalThis.fetch): Promise<any>;
+    /**
+     * fetch and update the project data, then trigger update to re-render the WeaverseRoot
+     */
+    updateProjectData(): void;
+    triggerEditorUpdate(type?: string): void;
+    initProjectItemData(): void;
+    addItem(item: any): WeaverseItemStore;
+}
+/**
+ * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
+ * @param itemData {ProjectDataItemType} Weaverse item data
+ * @param weaverse {Weaverse} Weaverse instance
+ * Usage:
+ * ```jsx
+ * useEffect(() => {
+ *     let handleUpdate = (update: any) => {
+ *       setData({...update})
+ *     }
+ *     itemInstance.subscribe(handleUpdate)
+ *     return () => {
+ *       itemInstance.unsubscribe(handleUpdate)
+ *     }
+ *   }, [])
+ *   ```
+ */
+declare class WeaverseItemStore {
+    data: any;
+    listeners: Set<any>;
+    Component: any;
+    ref: any;
+    constructor(itemData: any, weaverse: Weaverse);
+    setData: (data: any) => void;
+    subscribe: (fn: any) => void;
+    unsubscribe: (fn: any) => void;
+    triggerUpdate: () => void;
+}
+
+declare const isReactNative: boolean;
+declare const isBrowser: boolean;
+declare const isIframe: boolean;
+
+export { ProjectDataItemType, ProjectDataType, Weaverse, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.js

@@ -1,8 +1,201 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 
-'use strict'
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Weaverse: () => Weaverse,
+  WeaverseItemStore: () => WeaverseItemStore,
+  isBrowser: () => isBrowser,
+  isIframe: () => isIframe,
+  isReactNative: () => isReactNative
+});
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./core.cjs.production.min.js')
-} else {
-  module.exports = require('./core.cjs.development.js')
-}
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
+// src/core.ts
+var stitches = __toESM(require("@stitches/core"));
+var Weaverse = class {
+  constructor({ appUrl, projectKey, projectData } = {}) {
+    this.elementInstances = /* @__PURE__ */ new Map();
+    this.itemInstances = /* @__PURE__ */ new Map();
+    this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
+    this.projectKey = "";
+    this.projectData = {
+      items: [],
+      rootId: 0
+    };
+    this.listeners = /* @__PURE__ */ new Set();
+    this.isEditor = false;
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+  registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  }
+  init() {
+    this.stitchesInstance = stitches.createStitches({
+      prefix: "weaverse",
+      media: {
+        bp1: "(min-width: 640px)",
+        bp2: "(max-width: 768px)",
+        bp3: "(min-width: 1024px)"
+      }
+    });
+    this.loadStudio();
+  }
+  listen(callback) {
+    if (window.addEventListener) {
+      window.addEventListener("message", callback, false);
+    } else {
+      window.attachEvent("onmessage", callback);
+    }
+  }
+  loadStudio() {
+    if (isIframe) {
+      console.log("Weaverse SDK is initializing...", isIframe);
+      let initStudio = () => {
+        let StudioBridge = window.WeaverseStudioBridge;
+        this.studioBridge = new StudioBridge(this);
+        this.studioBridge.subscribeMessageEvent();
+        this.triggerUpdate();
+        console.log("studio bridge initialized", this.studioBridge);
+      };
+      window.addEventListener("load", () => {
+        window.addEventListener("message", (e) => {
+          var _a;
+          if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
+            console.log("studio message", e.data);
+            this.isEditor = true;
+            if (!window.WeaverseStudioBridge) {
+              const studioBridgeScript = document.createElement("script");
+              studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=1`;
+              studioBridgeScript.onload = initStudio;
+              document.body.appendChild(studioBridgeScript);
+            } else {
+              initStudio();
+            }
+          }
+        });
+      });
+    }
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+  }
+  unsubscribe(fn) {
+    this.listeners.delete(fn);
+  }
+  triggerUpdate() {
+    this.listeners.forEach((fn) => fn());
+    this.triggerEditorUpdate();
+  }
+  fetchProjectData(fetch = globalThis.fetch) {
+    console.log("fetching project data...");
+    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
+  }
+  updateProjectData() {
+    if (this.projectKey) {
+      this.fetchProjectData().then((data) => {
+        if (data) {
+          this.projectData = data;
+          this.initProjectItemData();
+          this.triggerUpdate();
+        }
+      }).catch((err) => {
+        console.error(err);
+      });
+    }
+  }
+  triggerEditorUpdate(type = "weaverse.workspace.init") {
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor(type, {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
+    }
+  }
+  initProjectItemData() {
+    let data = this.projectData;
+    if (data.items) {
+      data.items.forEach((item) => {
+        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this);
+        this.itemInstances.set(item.id, itemStore);
+      });
+    }
+  }
+  addItem(item) {
+    let itemStore = new WeaverseItemStore(item, this);
+    this.itemInstances.set(item.id, itemStore);
+    return itemStore;
+  }
+};
+var WeaverseItemStore = class {
+  constructor(itemData = {}, weaverse) {
+    this.data = {};
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ref = {
+      current: null
+    };
+    this.setData = (data) => {
+      this.data = Object.assign(this.data, data);
+      this.triggerUpdate();
+    };
+    this.subscribe = (fn) => {
+      this.listeners.add(fn);
+    };
+    this.unsubscribe = (fn) => {
+      this.listeners.delete(fn);
+    };
+    this.triggerUpdate = () => {
+      this.listeners.forEach((fn) => {
+        return fn(this.data);
+      });
+    };
+    this.data = itemData;
+    let { type, id } = itemData;
+    if (type && id) {
+      this.Component = weaverse.elementInstances.get(type);
+    }
+  }
+};
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Weaverse,
+  WeaverseItemStore,
+  isBrowser,
+  isIframe,
+  isReactNative
+});

package/dist/index.mjs

@@ -0,0 +1,161 @@
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
+// src/core.ts
+import * as stitches from "@stitches/core";
+var Weaverse = class {
+  constructor({ appUrl, projectKey, projectData } = {}) {
+    this.elementInstances = /* @__PURE__ */ new Map();
+    this.itemInstances = /* @__PURE__ */ new Map();
+    this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
+    this.projectKey = "";
+    this.projectData = {
+      items: [],
+      rootId: 0
+    };
+    this.listeners = /* @__PURE__ */ new Set();
+    this.isEditor = false;
+    this.appUrl = appUrl || this.appUrl;
+    this.projectKey = projectKey || this.projectKey;
+    projectData && (this.projectData = projectData);
+    this.init();
+  }
+  registerElement(name, element) {
+    this.elementInstances.set(name, element);
+  }
+  init() {
+    this.stitchesInstance = stitches.createStitches({
+      prefix: "weaverse",
+      media: {
+        bp1: "(min-width: 640px)",
+        bp2: "(max-width: 768px)",
+        bp3: "(min-width: 1024px)"
+      }
+    });
+    this.loadStudio();
+  }
+  listen(callback) {
+    if (window.addEventListener) {
+      window.addEventListener("message", callback, false);
+    } else {
+      window.attachEvent("onmessage", callback);
+    }
+  }
+  loadStudio() {
+    if (isIframe) {
+      console.log("Weaverse SDK is initializing...", isIframe);
+      let initStudio = () => {
+        let StudioBridge = window.WeaverseStudioBridge;
+        this.studioBridge = new StudioBridge(this);
+        this.studioBridge.subscribeMessageEvent();
+        this.triggerUpdate();
+        console.log("studio bridge initialized", this.studioBridge);
+      };
+      window.addEventListener("load", () => {
+        window.addEventListener("message", (e) => {
+          var _a;
+          if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
+            console.log("studio message", e.data);
+            this.isEditor = true;
+            if (!window.WeaverseStudioBridge) {
+              const studioBridgeScript = document.createElement("script");
+              studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=1`;
+              studioBridgeScript.onload = initStudio;
+              document.body.appendChild(studioBridgeScript);
+            } else {
+              initStudio();
+            }
+          }
+        });
+      });
+    }
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+  }
+  unsubscribe(fn) {
+    this.listeners.delete(fn);
+  }
+  triggerUpdate() {
+    this.listeners.forEach((fn) => fn());
+    this.triggerEditorUpdate();
+  }
+  fetchProjectData(fetch = globalThis.fetch) {
+    console.log("fetching project data...");
+    return fetch(this.appUrl + `/api/public/${this.projectKey}`).then((r) => r.json()).catch(console.error);
+  }
+  updateProjectData() {
+    if (this.projectKey) {
+      this.fetchProjectData().then((data) => {
+        if (data) {
+          this.projectData = data;
+          this.initProjectItemData();
+          this.triggerUpdate();
+        }
+      }).catch((err) => {
+        console.error(err);
+      });
+    }
+  }
+  triggerEditorUpdate(type = "weaverse.workspace.init") {
+    if (this.isEditor && this.studioBridge) {
+      this.studioBridge.sendMessageToEditor(type, {
+        projectData: this.projectData,
+        projectKey: this.projectKey,
+        appUrl: this.appUrl
+      });
+    }
+  }
+  initProjectItemData() {
+    let data = this.projectData;
+    if (data.items) {
+      data.items.forEach((item) => {
+        let itemStore = this.itemInstances.get(item.id) || new WeaverseItemStore(item, this);
+        this.itemInstances.set(item.id, itemStore);
+      });
+    }
+  }
+  addItem(item) {
+    let itemStore = new WeaverseItemStore(item, this);
+    this.itemInstances.set(item.id, itemStore);
+    return itemStore;
+  }
+};
+var WeaverseItemStore = class {
+  constructor(itemData = {}, weaverse) {
+    this.data = {};
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ref = {
+      current: null
+    };
+    this.setData = (data) => {
+      this.data = Object.assign(this.data, data);
+      this.triggerUpdate();
+    };
+    this.subscribe = (fn) => {
+      this.listeners.add(fn);
+    };
+    this.unsubscribe = (fn) => {
+      this.listeners.delete(fn);
+    };
+    this.triggerUpdate = () => {
+      this.listeners.forEach((fn) => {
+        return fn(this.data);
+      });
+    };
+    this.data = itemData;
+    let { type, id } = itemData;
+    if (type && id) {
+      this.Component = weaverse.elementInstances.get(type);
+    }
+  }
+};
+export {
+  Weaverse,
+  WeaverseItemStore,
+  isBrowser,
+  isIframe,
+  isReactNative
+};

package/package.json

@@ -1,8 +1,9 @@
 {
-  "version": "0.2.4",
+  "version": "0.3.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "module": "dist/index.mjs",
   "publishConfig": {
     "access": "public"
   },
@@ -13,48 +14,14 @@
     "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"
+    "start": "npm run dev",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch",
+    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist"
   },
   "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"
+    "@stitches/core": "^1.2.7",
+    "uuid": "^8.3.2"
   }
 }