@weaverse/core 0.2.4 → 0.3.0

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,127 @@
-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[];
+}
+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;
+    loadStudio(): void;
+    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)
+ *     }
+ *   }, [])
+ *   ```
+ */
+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,214 @@
+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 __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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'
+// ../../node_modules/tsup/assets/cjs_shims.js
+var init_cjs_shims = __esm({
+  "../../node_modules/tsup/assets/cjs_shims.js"() {
+  }
+});
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./core.cjs.production.min.js')
-} else {
-  module.exports = require('./core.cjs.development.js')
-}
+// src/utils/fetch.js
+var require_fetch = __commonJS({
+  "src/utils/fetch.js"(exports, module2) {
+    init_cjs_shims();
+    function r(m) {
+      return m && m.default || m;
+    }
+    module2.exports = globalThis.fetch = globalThis.fetch || (typeof process == "undefined" ? r(require("unfetch")) : function(url, opts) {
+      return r(require("node-fetch"))(String(url).replace(/^\/\//g, "https://"), opts);
+    });
+  }
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Weaverse: () => Weaverse,
+  WeaverseItemStore: () => WeaverseItemStore,
+  isBrowser: () => isBrowser,
+  isIframe: () => isIframe,
+  isReactNative: () => isReactNative
+});
+init_cjs_shims();
+
+// src/core.ts
+init_cjs_shims();
+var import_fetch = __toESM(require_fetch());
+
+// src/utils/index.ts
+init_cjs_shims();
+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: []
+    };
+    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();
+  }
+  loadStudio() {
+    if (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("message", (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
+          this.isEditor = true;
+          if (!window.WeaverseStudioBridge) {
+            const studioBridgeScript = document.createElement("script");
+            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
+            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() {
+    return (0, import_fetch.default)(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.initItemData();
+          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
+      });
+    }
+  }
+  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);
+      });
+    }
+  }
+};
+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 } = itemData;
+    if (type) {
+      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,202 @@
+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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __reExport = (target, module, copyDefault, desc) => {
+  if (module && typeof module === "object" || typeof module === "function") {
+    for (let key of __getOwnPropNames(module))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module[key], enumerable: !(desc = __getOwnPropDesc(module, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", !isNodeMode && module && module.__esModule ? { get: () => module.default, enumerable: true } : { value: module, enumerable: true })), module);
+};
+
+// ../../node_modules/tsup/assets/esm_shims.js
+var init_esm_shims = __esm({
+  "../../node_modules/tsup/assets/esm_shims.js"() {
+  }
+});
+
+// src/utils/fetch.js
+var require_fetch = __commonJS({
+  "src/utils/fetch.js"(exports, module) {
+    init_esm_shims();
+    function r(m) {
+      return m && m.default || m;
+    }
+    module.exports = globalThis.fetch = globalThis.fetch || (typeof process == "undefined" ? r(__require("unfetch")) : function(url, opts) {
+      return r(__require("node-fetch"))(String(url).replace(/^\/\//g, "https://"), opts);
+    });
+  }
+});
+
+// src/index.ts
+init_esm_shims();
+
+// src/core.ts
+init_esm_shims();
+var import_fetch = __toESM(require_fetch());
+
+// src/utils/index.ts
+init_esm_shims();
+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: []
+    };
+    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();
+  }
+  loadStudio() {
+    if (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("message", (e) => {
+        var _a;
+        if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.editor.ready") {
+          this.isEditor = true;
+          if (!window.WeaverseStudioBridge) {
+            const studioBridgeScript = document.createElement("script");
+            studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
+            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() {
+    return (0, import_fetch.default)(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.initItemData();
+          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
+      });
+    }
+  }
+  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);
+      });
+    }
+  }
+};
+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 } = itemData;
+    if (type) {
+      this.Component = weaverse.elementInstances.get(type);
+    }
+  }
+};
+export {
+  Weaverse,
+  WeaverseItemStore,
+  isBrowser,
+  isIframe,
+  isReactNative
+};