@weaverse/core 0.6.22 → 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;
@@ -70,8 +77,9 @@ interface ElementCatalog {
     name: string;
     icon?: string;
     group?: CatalogGroup;
+    data?: ElementData[];
 }
-declare type FlagType = "draggable" | "resizable" | "sortable";
+declare type FlagType = "draggable" | "resizable" | "sortable" | "droppable";
 declare type ElementFlags = Partial<Record<FlagType, boolean>>;
 declare type ToolbarAction = "duplicate" | "delete" | "edit-button" | "insert-link" | "select-template" | "copy-styles" | "paste-styles";
 interface ChildElement {
@@ -90,7 +98,7 @@ interface ElementSchema {
     gridSize?: GridSize;
     inspector?: ElementInspector;
     toolbar?: (ToolbarAction | ToolbarAction[])[];
-    subElements?: ChildElement[];
+    childElements?: ChildElement[];
     catalog?: ElementCatalog;
     flags?: ElementFlags;
 }
@@ -121,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;
@@ -132,14 +140,19 @@ 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" | "input" | "switch" | "textarea";
+declare type InputType = "color" | "image" | "instagram" | "range" | "select" | "switch" | "text" | "textarea" | "toggle-group";
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
         weaverseShopifyProducts: TODO;
+        weaverseGlobalSettings: TODO;
     }
 }
 
@@ -241,13 +254,15 @@ declare class Weaverse {
      * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
      */
     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;
@@ -267,7 +282,6 @@ declare class Weaverse {
     /**
      * fetch and update the project data, then trigger update to re-render the WeaverseRoot
      */
-    updateProjectData(): void;
     initProjectItemData(): void;
 }
 
@@ -275,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,7 +144,7 @@ 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 {
+var Weaverse = class {
   constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
@@ -159,37 +162,55 @@ var _Weaverse = class {
       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() {
-    if (this.isDesignMode && isIframe) {
-      const initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-      };
-      if (!window.WeaverseStudioBridge) {
-        const studioBridgeScript = document.createElement("script");
-        studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
-        studioBridgeScript.type = "module";
-        studioBridgeScript.onload = initStudio;
-        document.body.appendChild(studioBridgeScript);
-      } else {
-        initStudio();
+    setTimeout(() => {
+      if (isIframe && this.isDesignMode && !this.studioBridge) {
+        const initStudio = () => {
+          this.studioBridge = new window.WeaverseStudioBridge(this);
+          this.triggerUpdate();
+        };
+        if (!window.WeaverseStudioBridge) {
+          const studioBridgeScript = document.createElement("script");
+          studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
+          studioBridgeScript.type = "module";
+          studioBridgeScript.onload = initStudio;
+          document.body.appendChild(studioBridgeScript);
+        } else {
+          initStudio();
+        }
       }
-    }
+    }, 2e3);
   }
   registerElement(element) {
     if (element == null ? void 0 : element.type) {
@@ -201,13 +222,6 @@ var _Weaverse = class {
       throw new Error("Weaverse: registerElement: `type` is required");
     }
   }
-  init() {
-    this.initStitches();
-    this.initProjectItemData();
-    setTimeout(() => {
-      this.loadStudio();
-    }, 1e3);
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -222,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) {
@@ -230,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);
@@ -254,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,7 +115,7 @@ 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 {
+var Weaverse = class {
   constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
     this.elementInstances = /* @__PURE__ */ new Map();
     this.itemInstances = /* @__PURE__ */ new Map();
@@ -130,37 +133,55 @@ var _Weaverse = class {
       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() {
-    if (this.isDesignMode && isIframe) {
-      const initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-      };
-      if (!window.WeaverseStudioBridge) {
-        const studioBridgeScript = document.createElement("script");
-        studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
-        studioBridgeScript.type = "module";
-        studioBridgeScript.onload = initStudio;
-        document.body.appendChild(studioBridgeScript);
-      } else {
-        initStudio();
+    setTimeout(() => {
+      if (isIframe && this.isDesignMode && !this.studioBridge) {
+        const initStudio = () => {
+          this.studioBridge = new window.WeaverseStudioBridge(this);
+          this.triggerUpdate();
+        };
+        if (!window.WeaverseStudioBridge) {
+          const studioBridgeScript = document.createElement("script");
+          studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
+          studioBridgeScript.type = "module";
+          studioBridgeScript.onload = initStudio;
+          document.body.appendChild(studioBridgeScript);
+        } else {
+          initStudio();
+        }
       }
-    }
+    }, 2e3);
   }
   registerElement(element) {
     if (element == null ? void 0 : element.type) {
@@ -172,13 +193,6 @@ var _Weaverse = class {
       throw new Error("Weaverse: registerElement: `type` is required");
     }
   }
-  init() {
-    this.initStitches();
-    this.initProjectItemData();
-    setTimeout(() => {
-      this.loadStudio();
-    }, 1e3);
-  }
   subscribe(fn) {
     this.listeners.add(fn);
   }
@@ -193,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) {
@@ -201,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);
@@ -225,7 +225,6 @@ var _Weaverse = class {
     }
   }
 };
-var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 export {
   Weaverse,

package/package.json

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