@weaverse/core 0.6.21 → 0.6.24

package/dist/index.d.ts

@@ -1,98 +1,153 @@
-import { CSSProperties } from '@stitches/core';
 import { ForwardRefExoticComponent, RefObject } from 'react';
-import Stitches from '@stitches/core/types/stitches';
+import * as Stitches from '@stitches/core';
+import Stitches$1 from '@stitches/core/types/stitches';
 
+declare const stichesUtils: {
+    m: (value: string) => {
+        margin: string;
+    };
+    mt: (value: string) => {
+        marginTop: string;
+    };
+    mr: (value: string) => {
+        marginRight: string;
+    };
+    mb: (value: string) => {
+        marginBottom: string;
+    };
+    ml: (value: string) => {
+        marginLeft: string;
+    };
+    mx: (value: string) => {
+        marginLeft: string;
+        marginRight: string;
+    };
+    my: (value: string) => {
+        marginTop: string;
+        marginBottom: string;
+    };
+    size: (value: string) => {
+        width: string;
+        height: string;
+    };
+    px: (value: string) => {
+        paddingLeft: string;
+        paddingRight: string;
+    };
+    py: (value: string) => {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+};
+
+declare type TODO = any;
 interface ProjectDataType {
-    items: WeaverseElementData[];
+    items: ElementData[];
     rootId: string;
     script: {
         css: string;
         js: string;
     };
 }
-declare type WeaverseType = {
+interface WeaverseType {
     mediaBreakPoints?: any;
     appUrl?: string;
     projectKey?: string;
     projectData?: ProjectDataType;
     isDesignMode?: boolean;
     ssrMode?: boolean;
-};
-declare type TODO = any;
-declare type WeaverseElementMap = {
-    [key: string]: WeaverseElement;
-};
+}
 declare type WeaverseElement = {
     Component: ForwardRefExoticComponent<any>;
     type: string;
-    schema?: WeaverseElementSchema;
+    schema?: ElementSchema;
 };
+interface ElementsMap {
+    [key: string]: WeaverseElement;
+}
 declare type CatalogGroup = "essential" | "composition" | "other";
-declare type WeaverseElementCatalog = {
+interface ElementCatalog {
     name: string;
     icon?: string;
     group?: CatalogGroup;
-};
-declare type ElementFlags = "draggable" | "resizable" | "sortable";
-declare type WeaverseElementFlags = {
-    [key in ElementFlags]?: boolean;
-};
+    data?: ElementData[];
+}
+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";
-declare type WeaverseChildElement = {
+interface ChildElement {
     label: string;
     selector: string;
+}
+declare type ParentType = "container" | "layout" | "root";
+declare type GridSize = {
+    rowSpan: number;
+    colSpan: number;
 };
-declare type ElementParentType = "container" | "layout" | "root";
-declare type WeaverseElementSchema = {
-    type: string;
-    parentType: ElementParentType;
+interface ElementSchema {
     title: string;
+    type: string;
+    parentType: ParentType;
+    gridSize?: GridSize;
     inspector?: ElementInspector;
     toolbar?: (ToolbarAction | ToolbarAction[])[];
-    subElements?: WeaverseChildElement[];
-    catalog?: WeaverseElementCatalog;
-    flags?: WeaverseElementFlags;
-};
-declare type WeaverseElementData = {
+    childElements?: ChildElement[];
+    catalog?: ElementCatalog;
+    flags?: ElementFlags;
+}
+interface ElementData {
     id: string;
     type: string;
-    childIds?: (string | number)[] | undefined;
-    css?: WeaverseElementCSS;
+    childIds?: (string | number)[];
+    css?: ElementCSS;
     [key: string]: any;
+}
+declare type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stichesUtils, string | number>>;
+declare type ChildElementCSS = Partial<{
+    [selector: string]: WeaverseCSSProperties & ChildElementCSS;
+}>;
+interface ElementCSS {
+    "@desktop"?: WeaverseCSSProperties | ChildElementCSS;
+    "@mobile"?: WeaverseCSSProperties | ChildElementCSS;
+}
+interface ElementInspector {
+    settings?: (AdvancedGroup | BasicGroup)[];
+    styles?: (AdvancedGroup | BasicGroup)[];
+}
+declare type AdvancedGroup = {
+    type: AdvancedInput;
 };
-declare type WeaverseElementCSS = {
-    "@desktop"?: CSSProperties | {
-        [key: string]: CSSProperties;
-    };
-    "@mobile"?: CSSProperties | {
-        [key: string]: CSSProperties;
-    };
-};
-declare type ElementInspector = {
-    settings?: InspectorInput[];
-    styles?: InspectorInput[];
+declare type BasicGroup = {
+    type: "basic";
+    label: string;
+    inputs: BasicInput[];
 };
-declare type InspectorInput = {
+declare type AdvancedInput = "alignment" | "background" | "border" | "countdown" | "dimensions" | "form" | "instagram" | "product" | "spacing" | "visibility";
+interface BasicInput {
     type: InputType;
-    label?: string;
-    name?: string;
+    label: string;
+    name: string;
     defaultValue?: string;
+    placeholder?: string;
     helpText?: string;
-    options?: TODO[];
+    options?: {
+        value: string;
+        label: string;
+    }[];
     conditions?: TODO[];
-    [key: string]: TODO;
-};
-declare type InputType = "select" | "checkbox" | "radio" | "range" | "button" | "image" | "file" | "hidden" | "alignment" | "color" | "dimensions" | "flex" | "grid" | "input" | "switch" | "spacing" | "textarea" | "visibility" | "border" | "background" | "typography" | "shadow" | "position" | "overflow" | "display" | "other";
+}
+declare type InputType = "select" | "radio" | "range" | "button" | "image" | "color" | "text" | "switch" | "textarea";
 declare global {
     interface Window {
         WeaverseStudioBridge: TODO;
         weaverseShopifyProducts: TODO;
+        weaverseGlobalSettings: TODO;
     }
 }
 
 /**
  * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
- * @param itemData {WeaverseElementData} Weaverse item data
+ * @param itemData {ElementData} Weaverse item data
  * @param weaverse {Weaverse} Weaverse instance
  * @example
  * useEffect(() => {
@@ -110,15 +165,15 @@ declare class WeaverseItemStore {
     ref: RefObject<HTMLElement>;
     weaverse: Weaverse;
     stitchesClass: string;
-    _data: WeaverseElementData;
-    _flags: WeaverseElementFlags;
-    constructor(itemData: WeaverseElementData, weaverse: Weaverse);
+    _data: ElementData;
+    _flags: ElementFlags;
+    constructor(itemData: ElementData, weaverse: Weaverse);
     get _id(): string;
     get _element(): HTMLElement | null;
     get Element(): WeaverseElement | undefined;
-    set data(data: Omit<WeaverseElementData, "id" | "type">);
-    get data(): WeaverseElementData;
-    setData: (data: Omit<WeaverseElementData, "id" | "type">) => WeaverseElementData;
+    set data(data: Omit<ElementData, "id" | "type">);
+    get data(): ElementData;
+    setData: (data: Omit<ElementData, "id" | "type">) => ElementData;
     subscribe: (fn: any) => void;
     unsubscribe: (fn: any) => void;
     triggerUpdate: () => void;
@@ -156,13 +211,6 @@ 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}
@@ -171,7 +219,7 @@ declare class Weaverse {
     /**
      * stitches instance for handling CSS stylesheet, media, theme for Weaverse project
      */
-    stitchesInstance: Stitches | any;
+    stitchesInstance: Stitches$1 | any;
     studioBridge?: any;
     static WeaverseItemStore: typeof WeaverseItemStore;
     mediaBreakPoints: {
@@ -184,10 +232,9 @@ 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, isDesignMode, ssrMode }?: WeaverseType);
+    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, ssrMode }?: WeaverseType);
     loadStudio(): void;
     /**
      * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
@@ -222,4 +269,4 @@ declare const isReactNative: boolean;
 declare const isBrowser: boolean;
 declare const isIframe: boolean;
 
-export { CatalogGroup, ElementFlags, ElementInspector, ElementParentType, InputType, InspectorInput, ProjectDataType, TODO, ToolbarAction, Weaverse, WeaverseChildElement, WeaverseElement, WeaverseElementCSS, WeaverseElementCatalog, WeaverseElementData, WeaverseElementFlags, WeaverseElementMap, WeaverseElementSchema, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
+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 };

package/dist/index.js

@@ -47,6 +47,11 @@ module.exports = __toCommonJS(src_exports);
 // src/core.ts
 var stitches = __toESM(require("@stitches/core"));
 
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
 // src/utils/styles.ts
 var stichesUtils = {
   m: (value) => ({
@@ -86,11 +91,6 @@ var stichesUtils = {
   })
 };
 
-// src/utils/index.ts
-var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
-var isBrowser = typeof window !== "undefined" && !isReactNative;
-var isIframe = isBrowser && window.top !== window.self;
-
 // src/core.ts
 var WeaverseItemStore = class {
   constructor(itemData, weaverse) {
@@ -142,7 +142,7 @@ var WeaverseItemStore = class {
   }
 };
 var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, 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,7 +153,6 @@ var _Weaverse = class {
       script: { css: "", js: "" }
     };
     this.listeners = /* @__PURE__ */ new Set();
-    this.isDesignMode = false;
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
@@ -169,30 +168,34 @@ var _Weaverse = class {
     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();
   }
   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) {
+        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) {
+      if (this.elementInstances.has(element.type)) {
+        throw new Error(`Weaverse: Element '${element.type}' already registered`);
+      }
       this.elementInstances.set(element == null ? void 0 : element.type, element);
     } else {
       throw new Error("Weaverse: registerElement: `type` is required");
@@ -201,9 +204,6 @@ var _Weaverse = class {
   init() {
     this.initStitches();
     this.initProjectItemData();
-    setTimeout(() => {
-      this.loadStudio();
-    }, 1e3);
   }
   subscribe(fn) {
     this.listeners.add(fn);

package/dist/index.mjs

@@ -18,6 +18,11 @@ var __spreadValues = (a, b) => {
 // src/core.ts
 import * as stitches from "@stitches/core";
 
+// src/utils/index.ts
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser && window.top !== window.self;
+
 // src/utils/styles.ts
 var stichesUtils = {
   m: (value) => ({
@@ -57,11 +62,6 @@ var stichesUtils = {
   })
 };
 
-// src/utils/index.ts
-var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
-var isBrowser = typeof window !== "undefined" && !isReactNative;
-var isIframe = isBrowser && window.top !== window.self;
-
 // src/core.ts
 var WeaverseItemStore = class {
   constructor(itemData, weaverse) {
@@ -113,7 +113,7 @@ var WeaverseItemStore = class {
   }
 };
 var _Weaverse = class {
-  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
+  constructor({ appUrl, projectKey, projectData, mediaBreakPoints, 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,7 +124,6 @@ var _Weaverse = class {
       script: { css: "", js: "" }
     };
     this.listeners = /* @__PURE__ */ new Set();
-    this.isDesignMode = false;
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
@@ -140,30 +139,34 @@ var _Weaverse = class {
     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();
   }
   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) {
+        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) {
+      if (this.elementInstances.has(element.type)) {
+        throw new Error(`Weaverse: Element '${element.type}' already registered`);
+      }
       this.elementInstances.set(element == null ? void 0 : element.type, element);
     } else {
       throw new Error("Weaverse: registerElement: `type` is required");
@@ -172,9 +175,6 @@ var _Weaverse = class {
   init() {
     this.initStitches();
     this.initProjectItemData();
-    setTimeout(() => {
-      this.loadStudio();
-    }, 1e3);
   }
   subscribe(fn) {
     this.listeners.add(fn);

package/package.json

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