@weaverse/core 0.7.71 → 1.0.0

package/dist/index.d.ts

@@ -40,7 +40,7 @@ declare let stichesUtils: {
     };
 };
 
-interface ProjectDataType {
+interface WeaverseProjectDataType {
     items: ElementData[];
     rootId: string;
     script: {
@@ -55,11 +55,12 @@ interface BreakPoints {
 }
 interface WeaverseType {
     mediaBreakPoints?: BreakPoints;
-    appUrl?: string;
-    projectKey?: string;
-    projectData?: ProjectDataType;
+    weaverseHost?: string;
+    projectId?: string;
+    data?: WeaverseProjectDataType;
     isDesignMode?: boolean;
     ssrMode?: boolean;
+    elementSchemas?: ElementSchema[];
 }
 interface WeaverseElement {
     Component: ForwardRefExoticComponent<any>;
@@ -250,17 +251,17 @@ declare class Weaverse {
      * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
      * @type {string}
      */
-    appUrl: string;
+    weaverseHost: string;
     /**
      * Weaverse project key to access project data via API
      * @type {string}
      */
-    projectKey: string;
+    projectId: 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
+     * <WeaverseRoot data={data} /> it will be used to server-side rendering
      */
-    projectData: ProjectDataType;
+    data: WeaverseProjectDataType;
     /**
      * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
      * @type {Map<string, (data: any) => void>}
@@ -288,19 +289,21 @@ declare class Weaverse {
      */
     stitchesInstance: Stitches$1 | any;
     studioBridge?: any;
+    elementSchemas?: ElementSchema[];
     static WeaverseItemStore: typeof WeaverseItemStore;
     mediaBreakPoints: BreakPoints;
     /**
      * 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.
+     * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @param projectId {string} Weaverse project key to access project data via API
+     * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
      * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
      * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
      * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
+     * @param elementSchemas {Array<ElementSchema>} List of element schemas
      */
-    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType);
-    init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
+    constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }?: WeaverseType);
+    init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
     initialized: boolean;
     initializeData: (data: any) => void;
     loadStudio(version?: string): void;
@@ -313,18 +316,7 @@ declare class Weaverse {
     subscribe(fn: any): void;
     unsubscribe(fn: any): void;
     triggerUpdate(): void;
-    /**
-     * Fetch data from Weaverse API (https://weaverse.io/api/v1/project/:projectKey)
-     * @param fetch {fetch} custom fetch function, pass in custom fetch function if you want to use your own fetch function
-     * @param appUrl
-     * @param projectKey
-     */
-    static fetchProjectData({ fetch, appUrl, projectKey, }: {
-        fetch?: any;
-        appUrl?: string;
-        projectKey?: string;
-    }): any;
-    setProjectData(projectData: ProjectDataType): void;
+    setProjectData(data: WeaverseProjectDataType): void;
     initProjectItemData(): void;
 }
 
@@ -340,4 +332,4 @@ declare function merge(target: Record<string, any>, source: Record<string, any>)
     [x: string]: any;
 };
 
-export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, ProjectDataType, RangeInputConfigs, SelectInputConfigs, SortableInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative, merge };
+export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, RangeInputConfigs, SelectInputConfigs, SortableInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, merge };

package/dist/index.js

@@ -155,14 +155,15 @@ var WeaverseItemStore = class {
 var Weaverse = class {
   /**
    * 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.
+   * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+   * @param projectId {string} Weaverse project key to access project data via API
+   * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
    * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
    * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
    * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
+   * @param elementSchemas {Array<ElementSchema>} List of element schemas
    */
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas } = {}) {
     /**
      * For storing, registering element React component from Weaverse or created by user/developer
      */
@@ -175,17 +176,17 @@ var Weaverse = class {
      * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
      * @type {string}
      */
-    this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
+    this.weaverseHost = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
     /**
      * Weaverse project key to access project data via API
      * @type {string}
      */
-    this.projectKey = "";
+    this.projectId = "";
     /**
      * Weaverse project data, by default, user can provide project data via React Component:
-     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     * <WeaverseRoot data={data} /> it will be used to server-side rendering
      */
-    this.projectData = {
+    this.data = {
       rootId: "",
       items: [],
       script: { css: "", js: "" }
@@ -220,12 +221,13 @@ var Weaverse = class {
     };
     this.initialized = false;
     this.initializeData = (data) => {
+      console.log("initializeData", data);
       if (!this.initialized) {
-        let { projectData, published, id, projectKey, studioUrl } = data;
-        this.projectKey = projectKey || this.projectKey;
-        this.appUrl = studioUrl || this.appUrl;
-        this.projectData = { ...projectData, pageId: id };
-        this.isDesignMode = !published;
+        let { data: d, isDesignMode, id, projectId, weaverseHost } = data;
+        this.projectId = projectId || this.projectId;
+        this.weaverseHost = weaverseHost || this.weaverseHost;
+        this.data = { ...d, pageId: id };
+        this.isDesignMode = isDesignMode;
         this.initProjectItemData();
         if (this.isDesignMode) {
           this.initStitches();
@@ -242,15 +244,16 @@ var Weaverse = class {
         utils: stichesUtils
       });
     };
-    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+    this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
   }
-  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
+  init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+    this.elementSchemas = elementSchemas || this.elementSchemas;
+    this.weaverseHost = weaverseHost || this.weaverseHost;
+    this.projectId = projectId || this.projectId;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
     this.isDesignMode = isDesignMode || this.isDesignMode;
     this.ssrMode = ssrMode || this.ssrMode;
-    this.projectData = projectData || this.projectData;
+    this.data = data || this.data;
     this.initStitches();
     this.initProjectItemData();
   }
@@ -266,7 +269,7 @@ var Weaverse = class {
       let i = setInterval(() => {
         if (!window.WeaverseStudioBridge) {
           let studioBridgeScript = document.createElement("script");
-          studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?v=${version}`;
+          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`;
           studioBridgeScript.type = "module";
           studioBridgeScript.onload = initStudio;
           document.body.appendChild(studioBridgeScript);
@@ -299,26 +302,13 @@ var Weaverse = class {
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
   }
-  /**
-   * Fetch data from Weaverse API (https://weaverse.io/api/v1/project/:projectKey)
-   * @param fetch {fetch} custom fetch function, pass in custom fetch function if you want to use your own fetch function
-   * @param appUrl
-   * @param projectKey
-   */
-  static fetchProjectData({
-    fetch = globalThis.fetch,
-    appUrl,
-    projectKey
-  }) {
-    return fetch(appUrl + `/api/public/project/${projectKey}`).then((res) => res.json()).catch((err) => console.log("Error fetching project data:", err));
-  }
-  setProjectData(projectData) {
-    this.projectData = projectData;
+  setProjectData(data) {
+    this.data = data;
     this.initProjectItemData();
     this.triggerUpdate();
   }
   initProjectItemData() {
-    const data = this.projectData;
+    const data = this.data;
     if (data?.items) {
       data.items.forEach((item) => {
         if (!this.itemInstances.get(item.id)) {

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/core.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["export * from \"./types\"\nexport * from \"./core\"\nexport * from \"./utils\"\n","// 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.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n  BreakPoints,\n  ElementData,\n  ElementFlags,\n  WeaverseProjectDataType,\n  WeaverseElement,\n  WeaverseType,\n  ElementSchema\n} from './types'\nimport { isIframe, merge } from \"./utils\"\nimport { stichesUtils } from \"./utils/styles\"\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ElementData} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * @example\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n * }, [])\n */\nexport class WeaverseItemStore {\n  listeners: Set<any> = new Set()\n  ref: RefObject<HTMLElement> = {\n    current: null,\n  }\n  weaverse: Weaverse\n  stitchesClass = \"\"\n  _data: ElementData = { id: \"\", type: \"\" }\n  _flags: ElementFlags = {}\n\n  constructor(itemData: ElementData, weaverse: Weaverse) {\n    let { type, id } = itemData\n    this.weaverse = weaverse\n    if (id && type) {\n      weaverse.itemInstances.set(id, this)\n      this.data = { ...itemData }\n    }\n  }\n\n  get _id() {\n    return this._data.id\n  }\n  get _element() {\n    return this.ref.current\n  }\n\n  get Element() {\n    return this.weaverse.elementInstances.get(this._data.type!)\n  }\n\n  set data(data: Omit<ElementData, \"id\" | \"type\">) {\n    this._data = { ...this.data, ...data }\n  }\n\n  get data(): ElementData {\n    let defaultCss = this.Element?.defaultCss || {}\n    let currentCss = this._data.css || {}\n    let css = merge(defaultCss, currentCss)\n    let defaultData = { ...this.Element?.Component?.defaultProps }\n    return { ...defaultData, ...this._data, css }\n  }\n\n  setData = (data: Omit<ElementData, \"id\" | \"type\">) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n    return this.data\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}\n\nexport class Weaverse {\n  /**\n   * The `weaverse-content-root` element of Weaverse SDK\n   */\n  contentRootElement: HTMLElement | undefined\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   */\n  elementInstances = new Map<string, WeaverseElement>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\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  weaverseHost: string = process.env.NODE_ENV === \"development\" ? \"http://localhost:3000\" : \"https://studio.weaverse.io\"\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectId = \"\"\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot data={data} /> it will be used to server-side rendering\n   */\n  data: WeaverseProjectDataType = {\n    rootId: \"\",\n    items: [],\n    script: { css: \"\", js: \"\" },\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 in editor or not.\n   * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isDesignMode = false\n\n  /**\n   * Check whether the sdk is in preview mode or not\n   * @type {boolean}\n   */\n  isPreviewMode = false\n\n  /**\n   * Use in element to optionally render special HTML for hydration\n   * @type {boolean}\n   */\n  ssrMode = false\n  /**\n   * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n  elementSchemas?: ElementSchema[]\n  static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n  mediaBreakPoints: BreakPoints = {\n    desktop: \"all\",\n    // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n    // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n    mobile: \"(max-width: 767.98px)\",\n  }\n\n  /**\n   * constructor\n   * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectId {string} Weaverse project key to access project data via API\n   * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n   * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n   * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n   * @param elementSchemas {Array<ElementSchema>} List of element schemas\n   */\n  constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }: WeaverseType = {}) {\n    this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas })\n  }\n\n  init({ weaverseHost,elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }: WeaverseType = {}) {\n    this.elementSchemas = elementSchemas || this.elementSchemas\n    this.weaverseHost = weaverseHost || this.weaverseHost\n    this.projectId = projectId || this.projectId\n    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n    this.isDesignMode = isDesignMode || this.isDesignMode\n    this.ssrMode = ssrMode || this.ssrMode\n    this.data = data || this.data\n    this.initStitches()\n    this.initProjectItemData()\n  }\n\n  initialized = false\n  initializeData = (data: any) => {\n    console.log(\"initializeData\", data)\n    if (!this.initialized) {\n      let { data: d, isDesignMode, id, projectId, weaverseHost } = data\n      this.projectId = projectId || this.projectId\n      this.weaverseHost = weaverseHost || this.weaverseHost\n      this.data = { ...d, pageId: id }\n      this.isDesignMode = isDesignMode\n      this.initProjectItemData()\n      if (this.isDesignMode) {\n        this.initStitches()\n        this.triggerUpdate()\n        this.loadStudio()\n      }\n    }\n    this.initialized = true\n  }\n\n  loadStudio(version?: string) {\n    console.log(\"load studio\")\n    if (isIframe && this.isDesignMode && !this.studioBridge) {\n      const initStudio = () => {\n        this.studioBridge = new window.WeaverseStudioBridge(this)\n        // Make event listeners from studio work\n        this.triggerUpdate()\n        console.log(\"Studio loaded\", this)\n        clearInterval(i)\n      }\n      let i = setInterval(() => {\n        if (!window.WeaverseStudioBridge) {\n          // Studio bridge script source -> https://weaverse.io/assets/studio/studio-bridge.js\n          let studioBridgeScript = document.createElement(\"script\")\n          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`\n          studioBridgeScript.type = \"module\"\n          studioBridgeScript.onload = initStudio\n          document.body.appendChild(studioBridgeScript)\n        } else {\n          initStudio()\n        }\n      }, 2000)\n    }\n  }\n\n  /**\n   * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param element {WeaverseElement} custom React Component\n   */\n  registerElement(element: WeaverseElement) {\n    if (element?.type) {\n      if (this.elementInstances.has(element.type)) {\n        throw new Error(`Weaverse: Element '${element.type}' already registered`)\n      }\n      this.elementInstances.set(element?.type, element)\n    } else {\n      throw new Error(\"Weaverse: registerElement: `type` is required\")\n    }\n  }\n\n  initStitches = () => {\n    this.stitchesInstance =\n      this.stitchesInstance ||\n      stitches.createStitches({\n        prefix: \"weaverse\",\n        media: this.mediaBreakPoints,\n        utils: stichesUtils,\n      })\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach((fn) => fn())\n  }\n\n\n  setProjectData(data: WeaverseProjectDataType) {\n    this.data = data\n    this.initProjectItemData()\n    this.triggerUpdate()\n  }\n\n  initProjectItemData() {\n    const data = this.data\n    if (data?.items) {\n      data.items.forEach((item) => {\n        if (!this.itemInstances.get(item.id as string | number)) {\n          new WeaverseItemStore(item, this)\n        }\n      })\n    }\n  }\n}\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n  let t = { ...(target || {}) }\n  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n  for (let key of Object.keys(source)) {\n    if (source[key] instanceof Object && !Array.isArray(source[key])) {\n      Object.assign(source[key], merge(t[key], source[key]))\n    }\n  }\n\n  // Join `target` and modified `source`\n  Object.assign(t || {}, source)\n  return t\n}\n","export let stichesUtils = {\n  // Abbreviated margin properties\n  m: (value: string) => ({\n    margin: value,\n  }),\n  mt: (value: string) => ({\n    marginTop: value,\n  }),\n  mr: (value: string) => ({\n    marginRight: value,\n  }),\n  mb: (value: string) => ({\n    marginBottom: value,\n  }),\n  ml: (value: string) => ({\n    marginLeft: value,\n  }),\n  mx: (value: string) => ({\n    marginLeft: value,\n    marginRight: value,\n  }),\n  my: (value: string) => ({\n    marginTop: value,\n    marginBottom: value,\n  }),\n\n  // A property for applying width/height together\n  size: (value: string) => ({\n    width: value,\n    height: value,\n  }),\n  // Abbreviated padding properties\n  px: (value: string) => ({\n    paddingLeft: value,\n    paddingRight: value,\n  }),\n  py: (value: string) => ({\n    paddingTop: value,\n    paddingBottom: value,\n  }),\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -114,14 +114,15 @@ var WeaverseItemStore = class {
 var Weaverse = class {
   /**
    * 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.
+   * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+   * @param projectId {string} Weaverse project key to access project data via API
+   * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
    * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
    * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
    * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
+   * @param elementSchemas {Array<ElementSchema>} List of element schemas
    */
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas } = {}) {
     /**
      * For storing, registering element React component from Weaverse or created by user/developer
      */
@@ -134,17 +135,17 @@ var Weaverse = class {
      * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
      * @type {string}
      */
-    this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
+    this.weaverseHost = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
     /**
      * Weaverse project key to access project data via API
      * @type {string}
      */
-    this.projectKey = "";
+    this.projectId = "";
     /**
      * Weaverse project data, by default, user can provide project data via React Component:
-     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     * <WeaverseRoot data={data} /> it will be used to server-side rendering
      */
-    this.projectData = {
+    this.data = {
       rootId: "",
       items: [],
       script: { css: "", js: "" }
@@ -179,12 +180,13 @@ var Weaverse = class {
     };
     this.initialized = false;
     this.initializeData = (data) => {
+      console.log("initializeData", data);
       if (!this.initialized) {
-        let { projectData, published, id, projectKey, studioUrl } = data;
-        this.projectKey = projectKey || this.projectKey;
-        this.appUrl = studioUrl || this.appUrl;
-        this.projectData = { ...projectData, pageId: id };
-        this.isDesignMode = !published;
+        let { data: d, isDesignMode, id, projectId, weaverseHost } = data;
+        this.projectId = projectId || this.projectId;
+        this.weaverseHost = weaverseHost || this.weaverseHost;
+        this.data = { ...d, pageId: id };
+        this.isDesignMode = isDesignMode;
         this.initProjectItemData();
         if (this.isDesignMode) {
           this.initStitches();
@@ -201,15 +203,16 @@ var Weaverse = class {
         utils: stichesUtils
       });
     };
-    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+    this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
   }
-  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
+  init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+    this.elementSchemas = elementSchemas || this.elementSchemas;
+    this.weaverseHost = weaverseHost || this.weaverseHost;
+    this.projectId = projectId || this.projectId;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
     this.isDesignMode = isDesignMode || this.isDesignMode;
     this.ssrMode = ssrMode || this.ssrMode;
-    this.projectData = projectData || this.projectData;
+    this.data = data || this.data;
     this.initStitches();
     this.initProjectItemData();
   }
@@ -225,7 +228,7 @@ var Weaverse = class {
       let i = setInterval(() => {
         if (!window.WeaverseStudioBridge) {
           let studioBridgeScript = document.createElement("script");
-          studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?v=${version}`;
+          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`;
           studioBridgeScript.type = "module";
           studioBridgeScript.onload = initStudio;
           document.body.appendChild(studioBridgeScript);
@@ -258,26 +261,13 @@ var Weaverse = class {
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
   }
-  /**
-   * Fetch data from Weaverse API (https://weaverse.io/api/v1/project/:projectKey)
-   * @param fetch {fetch} custom fetch function, pass in custom fetch function if you want to use your own fetch function
-   * @param appUrl
-   * @param projectKey
-   */
-  static fetchProjectData({
-    fetch = globalThis.fetch,
-    appUrl,
-    projectKey
-  }) {
-    return fetch(appUrl + `/api/public/project/${projectKey}`).then((res) => res.json()).catch((err) => console.log("Error fetching project data:", err));
-  }
-  setProjectData(projectData) {
-    this.projectData = projectData;
+  setProjectData(data) {
+    this.data = data;
     this.initProjectItemData();
     this.triggerUpdate();
   }
   initProjectItemData() {
-    const data = this.projectData;
+    const data = this.data;
     if (data?.items) {
       data.items.forEach((item) => {
         if (!this.itemInstances.get(item.id)) {

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["// 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.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n  BreakPoints,\n  ElementData,\n  ElementFlags,\n  WeaverseProjectDataType,\n  WeaverseElement,\n  WeaverseType,\n  ElementSchema\n} from './types'\nimport { isIframe, merge } from \"./utils\"\nimport { stichesUtils } from \"./utils/styles\"\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ElementData} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * @example\n * useEffect(() => {\n *     let handleUpdate = (update: any) => {\n *       setData({...update})\n *     }\n *     itemInstance.subscribe(handleUpdate)\n *     return () => {\n *       itemInstance.unsubscribe(handleUpdate)\n *     }\n * }, [])\n */\nexport class WeaverseItemStore {\n  listeners: Set<any> = new Set()\n  ref: RefObject<HTMLElement> = {\n    current: null,\n  }\n  weaverse: Weaverse\n  stitchesClass = \"\"\n  _data: ElementData = { id: \"\", type: \"\" }\n  _flags: ElementFlags = {}\n\n  constructor(itemData: ElementData, weaverse: Weaverse) {\n    let { type, id } = itemData\n    this.weaverse = weaverse\n    if (id && type) {\n      weaverse.itemInstances.set(id, this)\n      this.data = { ...itemData }\n    }\n  }\n\n  get _id() {\n    return this._data.id\n  }\n  get _element() {\n    return this.ref.current\n  }\n\n  get Element() {\n    return this.weaverse.elementInstances.get(this._data.type!)\n  }\n\n  set data(data: Omit<ElementData, \"id\" | \"type\">) {\n    this._data = { ...this.data, ...data }\n  }\n\n  get data(): ElementData {\n    let defaultCss = this.Element?.defaultCss || {}\n    let currentCss = this._data.css || {}\n    let css = merge(defaultCss, currentCss)\n    let defaultData = { ...this.Element?.Component?.defaultProps }\n    return { ...defaultData, ...this._data, css }\n  }\n\n  setData = (data: Omit<ElementData, \"id\" | \"type\">) => {\n    this.data = Object.assign(this.data, data)\n    this.triggerUpdate()\n    return this.data\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}\n\nexport class Weaverse {\n  /**\n   * The `weaverse-content-root` element of Weaverse SDK\n   */\n  contentRootElement: HTMLElement | undefined\n  /**\n   * For storing, registering element React component from Weaverse or created by user/developer\n   */\n  elementInstances = new Map<string, WeaverseElement>()\n  /**\n   * list of element/items store to provide data, handle state update, state sharing, etc.\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  weaverseHost: string = process.env.NODE_ENV === \"development\" ? \"http://localhost:3000\" : \"https://studio.weaverse.io\"\n  /**\n   * Weaverse project key to access project data via API\n   * @type {string}\n   */\n  projectId = \"\"\n  /**\n   * Weaverse project data, by default, user can provide project data via React Component:\n   * <WeaverseRoot data={data} /> it will be used to server-side rendering\n   */\n  data: WeaverseProjectDataType = {\n    rootId: \"\",\n    items: [],\n    script: { css: \"\", js: \"\" },\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 in editor or not.\n   * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n   * else render the preview UI, plain HTML + CSS + React hydrate\n   * @type {boolean}\n   */\n  isDesignMode = false\n\n  /**\n   * Check whether the sdk is in preview mode or not\n   * @type {boolean}\n   */\n  isPreviewMode = false\n\n  /**\n   * Use in element to optionally render special HTML for hydration\n   * @type {boolean}\n   */\n  ssrMode = false\n  /**\n   * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n   */\n  stitchesInstance: Stitches | any\n\n  studioBridge?: any\n  elementSchemas?: ElementSchema[]\n  static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n  mediaBreakPoints: BreakPoints = {\n    desktop: \"all\",\n    // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n    // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n    mobile: \"(max-width: 767.98px)\",\n  }\n\n  /**\n   * constructor\n   * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n   * @param projectId {string} Weaverse project key to access project data via API\n   * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n   * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n   * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n   * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n   * @param elementSchemas {Array<ElementSchema>} List of element schemas\n   */\n  constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }: WeaverseType = {}) {\n    this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas })\n  }\n\n  init({ weaverseHost,elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }: WeaverseType = {}) {\n    this.elementSchemas = elementSchemas || this.elementSchemas\n    this.weaverseHost = weaverseHost || this.weaverseHost\n    this.projectId = projectId || this.projectId\n    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n    this.isDesignMode = isDesignMode || this.isDesignMode\n    this.ssrMode = ssrMode || this.ssrMode\n    this.data = data || this.data\n    this.initStitches()\n    this.initProjectItemData()\n  }\n\n  initialized = false\n  initializeData = (data: any) => {\n    console.log(\"initializeData\", data)\n    if (!this.initialized) {\n      let { data: d, isDesignMode, id, projectId, weaverseHost } = data\n      this.projectId = projectId || this.projectId\n      this.weaverseHost = weaverseHost || this.weaverseHost\n      this.data = { ...d, pageId: id }\n      this.isDesignMode = isDesignMode\n      this.initProjectItemData()\n      if (this.isDesignMode) {\n        this.initStitches()\n        this.triggerUpdate()\n        this.loadStudio()\n      }\n    }\n    this.initialized = true\n  }\n\n  loadStudio(version?: string) {\n    console.log(\"load studio\")\n    if (isIframe && this.isDesignMode && !this.studioBridge) {\n      const initStudio = () => {\n        this.studioBridge = new window.WeaverseStudioBridge(this)\n        // Make event listeners from studio work\n        this.triggerUpdate()\n        console.log(\"Studio loaded\", this)\n        clearInterval(i)\n      }\n      let i = setInterval(() => {\n        if (!window.WeaverseStudioBridge) {\n          // Studio bridge script source -> https://weaverse.io/assets/studio/studio-bridge.js\n          let studioBridgeScript = document.createElement(\"script\")\n          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`\n          studioBridgeScript.type = \"module\"\n          studioBridgeScript.onload = initStudio\n          document.body.appendChild(studioBridgeScript)\n        } else {\n          initStudio()\n        }\n      }, 2000)\n    }\n  }\n\n  /**\n   * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n   * @param element {WeaverseElement} custom React Component\n   */\n  registerElement(element: WeaverseElement) {\n    if (element?.type) {\n      if (this.elementInstances.has(element.type)) {\n        throw new Error(`Weaverse: Element '${element.type}' already registered`)\n      }\n      this.elementInstances.set(element?.type, element)\n    } else {\n      throw new Error(\"Weaverse: registerElement: `type` is required\")\n    }\n  }\n\n  initStitches = () => {\n    this.stitchesInstance =\n      this.stitchesInstance ||\n      stitches.createStitches({\n        prefix: \"weaverse\",\n        media: this.mediaBreakPoints,\n        utils: stichesUtils,\n      })\n  }\n\n  subscribe(fn: any) {\n    this.listeners.add(fn)\n  }\n\n  unsubscribe(fn: any) {\n    this.listeners.delete(fn)\n  }\n\n  triggerUpdate() {\n    this.listeners.forEach((fn) => fn())\n  }\n\n\n  setProjectData(data: WeaverseProjectDataType) {\n    this.data = data\n    this.initProjectItemData()\n    this.triggerUpdate()\n  }\n\n  initProjectItemData() {\n    const data = this.data\n    if (data?.items) {\n      data.items.forEach((item) => {\n        if (!this.itemInstances.get(item.id as string | number)) {\n          new WeaverseItemStore(item, this)\n        }\n      })\n    }\n  }\n}\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n  let t = { ...(target || {}) }\n  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n  for (let key of Object.keys(source)) {\n    if (source[key] instanceof Object && !Array.isArray(source[key])) {\n      Object.assign(source[key], merge(t[key], source[key]))\n    }\n  }\n\n  // Join `target` and modified `source`\n  Object.assign(t || {}, source)\n  return t\n}\n","export let stichesUtils = {\n  // Abbreviated margin properties\n  m: (value: string) => ({\n    margin: value,\n  }),\n  mt: (value: string) => ({\n    marginTop: value,\n  }),\n  mr: (value: string) => ({\n    marginRight: value,\n  }),\n  mb: (value: string) => ({\n    marginBottom: value,\n  }),\n  ml: (value: string) => ({\n    marginLeft: value,\n  }),\n  mx: (value: string) => ({\n    marginLeft: value,\n    marginRight: value,\n  }),\n  my: (value: string) => ({\n    marginTop: value,\n    marginBottom: value,\n  }),\n\n  // A property for applying width/height together\n  size: (value: string) => ({\n    width: value,\n    height: value,\n  }),\n  // Abbreviated padding properties\n  px: (value: string) => ({\n    paddingLeft: value,\n    paddingRight: value,\n  }),\n  py: (value: string) => ({\n    paddingTop: value,\n    paddingBottom: value,\n  }),\n}\n"],"mappings":"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","names":[]}

package/package.json

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