@weaverse/core 0.7.71 → 1.0.1

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as Stitches from '@stitches/core';
 import { ForwardRefExoticComponent, RefObject } from 'react';
 import Stitches$1 from '@stitches/core/types/stitches';
 
-declare let stichesUtils: {
+declare let stitchesUtils: {
     m: (value: string) => {
         margin: string;
     };
@@ -40,7 +40,7 @@ declare let stichesUtils: {
     };
 };
 
-interface ProjectDataType {
+interface WeaverseProjectDataType {
     items: ElementData[];
     rootId: string;
     script: {
@@ -53,13 +53,16 @@ interface BreakPoints {
     mobile: string;
     desktop: string;
 }
+type PlatformTypeEnum = "shopify-section" | "react-ssr";
 interface WeaverseType {
     mediaBreakPoints?: BreakPoints;
-    appUrl?: string;
-    projectKey?: string;
-    projectData?: ProjectDataType;
+    weaverseHost?: string;
+    projectId?: string;
+    data?: WeaverseProjectDataType;
     isDesignMode?: boolean;
     ssrMode?: boolean;
+    elementSchemas?: ElementSchema[];
+    platformType?: PlatformTypeEnum;
 }
 interface WeaverseElement {
     Component: ForwardRefExoticComponent<any>;
@@ -109,7 +112,7 @@ interface ElementData {
     css?: ElementCSS;
     [key: string]: any;
 }
-type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stichesUtils, string | number>>;
+type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stitchesUtils, string | number>>;
 type ChildElementCSS = Partial<{
     [selector: string]: WeaverseCSSProperties & ChildElementCSS;
 }>;
@@ -250,17 +253,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>}
@@ -273,6 +276,10 @@ declare class Weaverse {
      * @type {boolean}
      */
     isDesignMode: boolean;
+    /**
+     * Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    platformType: PlatformTypeEnum;
     /**
      * Check whether the sdk is in preview mode or not
      * @type {boolean}
@@ -288,19 +295,22 @@ 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
+     * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
      */
-    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, platformType }?: WeaverseType);
+    init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
     initialized: boolean;
     initializeData: (data: any) => void;
     loadStudio(version?: string): void;
@@ -313,18 +323,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 +339,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, PlatformTypeEnum, RangeInputConfigs, SelectInputConfigs, SortableInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, merge };

package/dist/index.js

@@ -58,7 +58,7 @@ function merge(target, source) {
 }
 
 // src/utils/styles.ts
-var stichesUtils = {
+var stitchesUtils = {
   // Abbreviated margin properties
   m: (value) => ({
     margin: value
@@ -155,14 +155,25 @@ 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
+   * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
    */
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({
+    weaverseHost,
+    projectId,
+    data,
+    mediaBreakPoints,
+    isDesignMode,
+    ssrMode,
+    elementSchemas,
+    platformType
+  } = {}) {
     /**
      * For storing, registering element React component from Weaverse or created by user/developer
      */
@@ -175,17 +186,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: "" }
@@ -202,6 +213,10 @@ var Weaverse = class {
      * @type {boolean}
      */
     this.isDesignMode = false;
+    /**
+     * Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    this.platformType = "shopify-section";
     /**
      * Check whether the sdk is in preview mode or not
      * @type {boolean}
@@ -221,14 +236,13 @@ var Weaverse = class {
     this.initialized = false;
     this.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();
           this.triggerUpdate();
           this.loadStudio();
         }
@@ -239,34 +253,34 @@ var Weaverse = class {
       this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
         prefix: "weaverse",
         media: this.mediaBreakPoints,
-        utils: stichesUtils
+        utils: stitchesUtils
       });
     };
-    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+    this.init({ weaverseHost, projectId, data, platformType, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
   }
-  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
+  init({ weaverseHost, elementSchemas, platformType, 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.initStitches();
+    this.platformType = platformType || this.platformType;
+    this.data = data || this.data;
     this.initProjectItemData();
+    this.initStitches();
   }
   loadStudio(version) {
-    console.log("load studio");
     if (isIframe && this.isDesignMode && !this.studioBridge) {
       const initStudio = () => {
         this.studioBridge = new window.WeaverseStudioBridge(this);
         this.triggerUpdate();
-        console.log("Studio loaded", this);
         clearInterval(i);
       };
       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 +313,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

@@ -17,7 +17,7 @@ function merge(target, source) {
 }
 
 // src/utils/styles.ts
-var stichesUtils = {
+var stitchesUtils = {
   // Abbreviated margin properties
   m: (value) => ({
     margin: value
@@ -114,14 +114,25 @@ 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
+   * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
    */
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({
+    weaverseHost,
+    projectId,
+    data,
+    mediaBreakPoints,
+    isDesignMode,
+    ssrMode,
+    elementSchemas,
+    platformType
+  } = {}) {
     /**
      * For storing, registering element React component from Weaverse or created by user/developer
      */
@@ -134,17 +145,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: "" }
@@ -161,6 +172,10 @@ var Weaverse = class {
      * @type {boolean}
      */
     this.isDesignMode = false;
+    /**
+     * Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    this.platformType = "shopify-section";
     /**
      * Check whether the sdk is in preview mode or not
      * @type {boolean}
@@ -180,14 +195,13 @@ var Weaverse = class {
     this.initialized = false;
     this.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();
           this.triggerUpdate();
           this.loadStudio();
         }
@@ -198,34 +212,34 @@ var Weaverse = class {
       this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
         prefix: "weaverse",
         media: this.mediaBreakPoints,
-        utils: stichesUtils
+        utils: stitchesUtils
       });
     };
-    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+    this.init({ weaverseHost, projectId, data, platformType, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
   }
-  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
+  init({ weaverseHost, elementSchemas, platformType, 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.initStitches();
+    this.platformType = platformType || this.platformType;
+    this.data = data || this.data;
     this.initProjectItemData();
+    this.initStitches();
   }
   loadStudio(version) {
-    console.log("load studio");
     if (isIframe && this.isDesignMode && !this.studioBridge) {
       const initStudio = () => {
         this.studioBridge = new window.WeaverseStudioBridge(this);
         this.triggerUpdate();
-        console.log("Studio loaded", this);
         clearInterval(i);
       };
       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 +272,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/package.json

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