@weaverse/core 0.6.24 → 0.6.26

package/dist/index.d.ts

@@ -48,6 +48,13 @@ interface ProjectDataType {
         css: string;
         js: string;
     };
+    pageId?: string;
+}
+interface InitializeData {
+    id: string;
+    handle: string;
+    data: ProjectDataType;
+    published: boolean;
 }
 interface WeaverseType {
     mediaBreakPoints?: any;
@@ -122,7 +129,7 @@ declare type BasicGroup = {
     label: string;
     inputs: BasicInput[];
 };
-declare type AdvancedInput = "alignment" | "background" | "border" | "countdown" | "dimensions" | "form" | "instagram" | "product" | "spacing" | "visibility";
+declare type AdvancedInput = "alignment" | "background" | "border" | "countdown" | "dimensions" | "form" | "product" | "spacing" | "visibility";
 interface BasicInput {
     type: InputType;
     label: string;
@@ -133,10 +140,14 @@ interface BasicInput {
     options?: {
         value: string;
         label: string;
+        icon?: string;
     }[];
+    min?: number;
+    max?: number;
+    step?: number;
     conditions?: TODO[];
 }
-declare type InputType = "select" | "radio" | "range" | "button" | "image" | "color" | "text" | "switch" | "textarea";
+declare type InputType = "color" | "image" | "instagram" | "range" | "select" | "switch" | "text" | "textarea" | "toggle-group";
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
@@ -211,6 +222,13 @@ declare class Weaverse {
      * @type {Map<string, (data: any) => void>}
      */
     listeners: Set<any>;
+    /**
+     * check whether the sdk is isDesignMode or not
+     * if isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI
+     * else render the preview UI, plain HTML + CSS + React hydrate
+     * @type {boolean}
+     */
+    isDesignMode: boolean;
     /**
      * Use in element to optionally render special HTML for hydration
      * @type {boolean}
@@ -232,16 +250,19 @@ declare class Weaverse {
      * @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 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
      */
-    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, ssrMode }?: WeaverseType);
+    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType);
+    init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
+    initialized: boolean;
+    initializeData: (data: InitializeData) => void;
     loadStudio(): void;
     /**
      * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
      * @param element {WeaverseElement} custom React Component
      */
     registerElement(element: WeaverseElement): void;
-    init(): void;
     initStitches: () => void;
     subscribe(fn: any): void;
     unsubscribe(fn: any): void;
@@ -261,7 +282,6 @@ declare class Weaverse {
     /**
      * fetch and update the project data, then trigger update to re-render the WeaverseRoot
      */
-    updateProjectData(): void;
     initProjectItemData(): void;
 }
 
@@ -269,4 +289,4 @@ declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { AdvancedGroup, AdvancedInput, BasicGroup, BasicInput, CatalogGroup, ChildElement, ChildElementCSS, ElementCSS, ElementCatalog, ElementData, ElementFlags, ElementInspector, ElementSchema, ElementsMap, FlagType, GridSize, InputType, ParentType, ProjectDataType, TODO, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+export { AdvancedGroup, AdvancedInput, BasicGroup, BasicInput, CatalogGroup, ChildElement, ChildElementCSS, ElementCSS, ElementCatalog, ElementData, ElementFlags, ElementInspector, ElementSchema, ElementsMap, FlagType, GridSize, InitializeData, InputType, ParentType, ProjectDataType, TODO, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.js

@@ -1,6 +1,8 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -141,8 +144,8 @@ var WeaverseItemStore = class {
     return __spreadValues(__spreadValues({}, (_b = (_a = this.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps), this._data);
   }
 };
-var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, ssrMode } = {}) {
+var Weaverse = class {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -153,28 +156,46 @@ var _Weaverse = class {
       script: { css: "", js: "" }
     };
     this.listeners = /* @__PURE__ */ new Set();
+    this.isDesignMode = false;
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
     };
+    this.initialized = false;
+    this.initializeData = (data) => {
+      if (!this.initialized) {
+        let { data: pageData, published, id } = data;
+        this.projectData = __spreadProps(__spreadValues({}, pageData), { pageId: id });
+        this.isDesignMode = !published;
+        this.initProjectItemData();
+        this.triggerUpdate();
+        this.loadStudio();
+      }
+      this.initialized = true;
+    };
     this.initStitches = () => {
-      this.stitchesInstance = stitches.createStitches({
+      this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
         prefix: "weaverse",
         media: this.mediaBreakPoints,
         utils: stichesUtils
       });
     };
+    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+  }
+  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.appUrl = appUrl || this.appUrl;
     this.projectKey = projectKey || this.projectKey;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
+    this.isDesignMode = isDesignMode || this.isDesignMode;
     this.ssrMode = ssrMode || this.ssrMode;
-    projectData && (this.projectData = projectData);
-    this.init();
+    this.projectData = projectData || this.projectData;
+    this.initStitches();
+    this.initProjectItemData();
   }
   loadStudio() {
     setTimeout(() => {
-      if (isIframe) {
+      if (isIframe && this.isDesignMode && !this.studioBridge) {
         const initStudio = () => {
           this.studioBridge = new window.WeaverseStudioBridge(this);
           this.triggerUpdate();
@@ -201,10 +222,6 @@ var _Weaverse = class {
       throw new Error("Weaverse: registerElement: `type` is required");
     }
   }
-  init() {
-    this.initStitches();
-    this.initProjectItemData();
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -219,7 +236,6 @@ var _Weaverse = class {
     appUrl,
     projectKey
   }) {
-    console.log("Weaverse: fetchProjectData", appUrl, projectKey);
     return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
   }
   setProjectData(projectData) {
@@ -227,22 +243,9 @@ var _Weaverse = class {
     this.initProjectItemData();
     this.triggerUpdate();
   }
-  updateProjectData() {
-    if (this.projectKey && !this.projectData.rootId) {
-      _Weaverse.fetchProjectData({ appUrl: this.appUrl, projectKey: this.projectKey }).then((data) => {
-        if (data) {
-          this.projectData = data;
-          this.initProjectItemData();
-          this.triggerUpdate();
-        }
-      }).catch((err) => {
-        console.error(err);
-      });
-    }
-  }
   initProjectItemData() {
     const data = this.projectData;
-    if (data.items) {
+    if (data == null ? void 0 : data.items) {
       data.items.forEach((item) => {
         if (!this.itemInstances.get(item.id)) {
           new WeaverseItemStore(item, this);
@@ -251,7 +254,6 @@ var _Weaverse = class {
     }
   }
 };
-var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/core.ts
 import * as stitches from "@stitches/core";
@@ -112,8 +115,8 @@ var WeaverseItemStore = class {
     return __spreadValues(__spreadValues({}, (_b = (_a = this.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps), this._data);
   }
 };
-var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, ssrMode } = {}) {
+var Weaverse = class {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -124,28 +127,46 @@ var _Weaverse = class {
       script: { css: "", js: "" }
     };
     this.listeners = /* @__PURE__ */ new Set();
+    this.isDesignMode = false;
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
       mobile: "(max-width: 767.98px)"
     };
+    this.initialized = false;
+    this.initializeData = (data) => {
+      if (!this.initialized) {
+        let { data: pageData, published, id } = data;
+        this.projectData = __spreadProps(__spreadValues({}, pageData), { pageId: id });
+        this.isDesignMode = !published;
+        this.initProjectItemData();
+        this.triggerUpdate();
+        this.loadStudio();
+      }
+      this.initialized = true;
+    };
     this.initStitches = () => {
-      this.stitchesInstance = stitches.createStitches({
+      this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
         prefix: "weaverse",
         media: this.mediaBreakPoints,
         utils: stichesUtils
       });
     };
+    this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
+  }
+  init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.appUrl = appUrl || this.appUrl;
     this.projectKey = projectKey || this.projectKey;
     this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
+    this.isDesignMode = isDesignMode || this.isDesignMode;
     this.ssrMode = ssrMode || this.ssrMode;
-    projectData && (this.projectData = projectData);
-    this.init();
+    this.projectData = projectData || this.projectData;
+    this.initStitches();
+    this.initProjectItemData();
   }
   loadStudio() {
     setTimeout(() => {
-      if (isIframe) {
+      if (isIframe && this.isDesignMode && !this.studioBridge) {
         const initStudio = () => {
           this.studioBridge = new window.WeaverseStudioBridge(this);
           this.triggerUpdate();
@@ -172,10 +193,6 @@ var _Weaverse = class {
       throw new Error("Weaverse: registerElement: `type` is required");
     }
   }
-  init() {
-    this.initStitches();
-    this.initProjectItemData();
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -190,7 +207,6 @@ var _Weaverse = class {
     appUrl,
     projectKey
   }) {
-    console.log("Weaverse: fetchProjectData", appUrl, projectKey);
     return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
   }
   setProjectData(projectData) {
@@ -198,22 +214,9 @@ var _Weaverse = class {
     this.initProjectItemData();
     this.triggerUpdate();
   }
-  updateProjectData() {
-    if (this.projectKey && !this.projectData.rootId) {
-      _Weaverse.fetchProjectData({ appUrl: this.appUrl, projectKey: this.projectKey }).then((data) => {
-        if (data) {
-          this.projectData = data;
-          this.initProjectItemData();
-          this.triggerUpdate();
-        }
-      }).catch((err) => {
-        console.error(err);
-      });
-    }
-  }
   initProjectItemData() {
     const data = this.projectData;
-    if (data.items) {
+    if (data == null ? void 0 : data.items) {
       data.items.forEach((item) => {
         if (!this.itemInstances.get(item.id)) {
           new WeaverseItemStore(item, this);
@@ -222,7 +225,6 @@ var _Weaverse = class {
     }
   }
 };
-var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 export {
   Weaverse,

package/package.json

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