@weaverse/core 0.6.24 → 0.6.28

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,49 @@ 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, projectKey } = data;
+        this.projectKey = projectKey || this.projectKey;
+        this.projectData = __spreadProps(__spreadValues({}, pageData), { pageId: id });
+        this.isDesignMode = !published;
+        this.initProjectItemData();
+        if (this.isDesignMode) {
+          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 +225,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 +239,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 +246,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 +257,6 @@ var _Weaverse = class {
     }
   }
 };
-var Weaverse = _Weaverse;
 Weaverse.WeaverseItemStore = WeaverseItemStore;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/package.json

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

package/dist/index.d.ts

@@ -1,272 +0,0 @@
-import { ForwardRefExoticComponent, RefObject } from 'react';
-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: ElementData[];
-    rootId: string;
-    script: {
-        css: string;
-        js: string;
-    };
-}
-interface WeaverseType {
-    mediaBreakPoints?: any;
-    appUrl?: string;
-    projectKey?: string;
-    projectData?: ProjectDataType;
-    isDesignMode?: boolean;
-    ssrMode?: boolean;
-}
-declare type WeaverseElement = {
-    Component: ForwardRefExoticComponent<any>;
-    type: string;
-    schema?: ElementSchema;
-};
-interface ElementsMap {
-    [key: string]: WeaverseElement;
-}
-declare type CatalogGroup = "essential" | "composition" | "other";
-interface ElementCatalog {
-    name: string;
-    icon?: string;
-    group?: CatalogGroup;
-    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";
-interface ChildElement {
-    label: string;
-    selector: string;
-}
-declare type ParentType = "container" | "layout" | "root";
-declare type GridSize = {
-    rowSpan: number;
-    colSpan: number;
-};
-interface ElementSchema {
-    title: string;
-    type: string;
-    parentType: ParentType;
-    gridSize?: GridSize;
-    inspector?: ElementInspector;
-    toolbar?: (ToolbarAction | ToolbarAction[])[];
-    childElements?: ChildElement[];
-    catalog?: ElementCatalog;
-    flags?: ElementFlags;
-}
-interface ElementData {
-    id: string;
-    type: string;
-    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 BasicGroup = {
-    type: "basic";
-    label: string;
-    inputs: BasicInput[];
-};
-declare type AdvancedInput = "alignment" | "background" | "border" | "countdown" | "dimensions" | "form" | "instagram" | "product" | "spacing" | "visibility";
-interface BasicInput {
-    type: InputType;
-    label: string;
-    name: string;
-    defaultValue?: string;
-    placeholder?: string;
-    helpText?: string;
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    conditions?: TODO[];
-}
-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 {ElementData} Weaverse item data
- * @param weaverse {Weaverse} Weaverse instance
- * @example
- * useEffect(() => {
- *     let handleUpdate = (update: any) => {
- *       setData({...update})
- *     }
- *     itemInstance.subscribe(handleUpdate)
- *     return () => {
- *       itemInstance.unsubscribe(handleUpdate)
- *     }
- * }, [])
- */
-declare class WeaverseItemStore {
-    listeners: Set<any>;
-    ref: RefObject<HTMLElement>;
-    weaverse: Weaverse;
-    stitchesClass: string;
-    _data: ElementData;
-    _flags: ElementFlags;
-    constructor(itemData: ElementData, weaverse: Weaverse);
-    get _id(): string;
-    get _element(): HTMLElement | null;
-    get Element(): WeaverseElement | undefined;
-    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;
-}
-declare class Weaverse {
-    /**
-     * The `weaverse-content-root` element of Weaverse SDK
-     */
-    contentRootElement: HTMLElement | undefined;
-    /**
-     * For storing, registering element React component from Weaverse or created by user/developer
-     */
-    elementInstances: Map<string, WeaverseElement>;
-    /**
-     * list of element/items store to provide data, handle state update, state sharing, etc.
-     */
-    itemInstances: Map<string | number, WeaverseItemStore>;
-    /**
-     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
-     * @type {string}
-     */
-    appUrl: string;
-    /**
-     * Weaverse project key to access project data via API
-     * @type {string}
-     */
-    projectKey: 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
-     */
-    projectData: ProjectDataType;
-    /**
-     * storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
-     * @type {Map<string, (data: any) => void>}
-     */
-    listeners: Set<any>;
-    /**
-     * Use in element to optionally render special HTML for hydration
-     * @type {boolean}
-     */
-    ssrMode: boolean;
-    /**
-     * stitches instance for handling CSS stylesheet, media, theme for Weaverse project
-     */
-    stitchesInstance: Stitches$1 | any;
-    studioBridge?: any;
-    static WeaverseItemStore: typeof WeaverseItemStore;
-    mediaBreakPoints: {
-        desktop: string;
-        mobile: string;
-    };
-    /**
-     * 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 mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
-     * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
-     */
-    constructor({ appUrl, projectKey, projectData, mediaBreakPoints, ssrMode }?: WeaverseType);
-    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;
-    triggerUpdate(): void;
-    /**
-     * fetch data from Weaverse API (https://weaverse.io/api/v1/projects/: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;
-    /**
-     * fetch and update the project data, then trigger update to re-render the WeaverseRoot
-     */
-    updateProjectData(): void;
-    initProjectItemData(): void;
-}
-
-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 };

package/dist/index.mjs

@@ -1,233 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
-// 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) => ({
-    margin: value
-  }),
-  mt: (value) => ({
-    marginTop: value
-  }),
-  mr: (value) => ({
-    marginRight: value
-  }),
-  mb: (value) => ({
-    marginBottom: value
-  }),
-  ml: (value) => ({
-    marginLeft: value
-  }),
-  mx: (value) => ({
-    marginLeft: value,
-    marginRight: value
-  }),
-  my: (value) => ({
-    marginTop: value,
-    marginBottom: value
-  }),
-  size: (value) => ({
-    width: value,
-    height: value
-  }),
-  px: (value) => ({
-    paddingLeft: value,
-    paddingRight: value
-  }),
-  py: (value) => ({
-    paddingTop: value,
-    paddingBottom: value
-  })
-};
-
-// src/core.ts
-var WeaverseItemStore = class {
-  constructor(itemData, weaverse) {
-    this.listeners = /* @__PURE__ */ new Set();
-    this.ref = {
-      current: null
-    };
-    this.stitchesClass = "";
-    this._data = { id: "", type: "" };
-    this._flags = {};
-    this.setData = (data) => {
-      this.data = Object.assign(this.data, data);
-      this.triggerUpdate();
-      return this.data;
-    };
-    this.subscribe = (fn) => {
-      this.listeners.add(fn);
-    };
-    this.unsubscribe = (fn) => {
-      this.listeners.delete(fn);
-    };
-    this.triggerUpdate = () => {
-      this.listeners.forEach((fn) => {
-        return fn(this.data);
-      });
-    };
-    let { type, id } = itemData;
-    this.weaverse = weaverse;
-    if (id && type) {
-      weaverse.itemInstances.set(id, this);
-      this.data = __spreadValues({}, itemData);
-    }
-  }
-  get _id() {
-    return this._data.id;
-  }
-  get _element() {
-    return this.ref.current;
-  }
-  get Element() {
-    return this.weaverse.elementInstances.get(this._data.type);
-  }
-  set data(data) {
-    this._data = __spreadValues(__spreadValues({}, this.data), data);
-  }
-  get data() {
-    var _a, _b;
-    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 } = {}) {
-    this.elementInstances = /* @__PURE__ */ new Map();
-    this.itemInstances = /* @__PURE__ */ new Map();
-    this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
-    this.projectKey = "";
-    this.projectData = {
-      rootId: "",
-      items: [],
-      script: { css: "", js: "" }
-    };
-    this.listeners = /* @__PURE__ */ new Set();
-    this.ssrMode = false;
-    this.mediaBreakPoints = {
-      desktop: "all",
-      mobile: "(max-width: 767.98px)"
-    };
-    this.initStitches = () => {
-      this.stitchesInstance = stitches.createStitches({
-        prefix: "weaverse",
-        media: this.mediaBreakPoints,
-        utils: stichesUtils
-      });
-    };
-    this.appUrl = appUrl || this.appUrl;
-    this.projectKey = projectKey || this.projectKey;
-    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
-    this.ssrMode = ssrMode || this.ssrMode;
-    projectData && (this.projectData = projectData);
-    this.init();
-  }
-  loadStudio() {
-    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");
-    }
-  }
-  init() {
-    this.initStitches();
-    this.initProjectItemData();
-  }
-  subscribe(fn) {
-    this.listeners.add(fn);
-  }
-  unsubscribe(fn) {
-    this.listeners.delete(fn);
-  }
-  triggerUpdate() {
-    this.listeners.forEach((fn) => fn());
-  }
-  static fetchProjectData({
-    fetch = globalThis.fetch,
-    appUrl,
-    projectKey
-  }) {
-    console.log("Weaverse: fetchProjectData", appUrl, projectKey);
-    return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
-  }
-  setProjectData(projectData) {
-    this.projectData = projectData;
-    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) {
-      data.items.forEach((item) => {
-        if (!this.itemInstances.get(item.id)) {
-          new WeaverseItemStore(item, this);
-        }
-      });
-    }
-  }
-};
-var Weaverse = _Weaverse;
-Weaverse.WeaverseItemStore = WeaverseItemStore;
-export {
-  Weaverse,
-  WeaverseItemStore,
-  isBrowser,
-  isIframe,
-  isReactNative
-};