@weaverse/core 0.6.33 → 0.7.0

package/dist/index.d.ts

@@ -0,0 +1,293 @@
+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;
+    };
+    pageId?: string;
+}
+interface InitializeData {
+    id: string;
+    handle: string;
+    data: ProjectDataType;
+    published: boolean;
+    projectKey?: 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" | "product" | "spacing" | "visibility";
+interface BasicInput {
+    type: InputType;
+    label: string;
+    name: string;
+    defaultValue?: string;
+    placeholder?: string;
+    helpText?: string;
+    options?: {
+        value: string;
+        label: string;
+        icon?: string;
+    }[];
+    min?: number;
+    max?: number;
+    step?: number;
+    conditions?: TODO[];
+}
+declare type InputType = "color" | "image" | "instagram" | "range" | "select" | "switch" | "text" | "textarea" | "toggle-group";
+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>;
+    /**
+     * 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}
+     */
+    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 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);
+    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;
+    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
+     */
+    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, InitializeData, InputType, ParentType, ProjectDataType, TODO, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };

package/dist/index.mjs

@@ -0,0 +1,218 @@
+// 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 = { ...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 = { ...this.data, ...data };
+  }
+  get data() {
+    var _a, _b;
+    return { ...(_b = (_a = this.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps, ...this._data };
+  }
+};
+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";
+    this.projectKey = "";
+    this.projectData = {
+      rootId: "",
+      items: [],
+      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 = { ...pageData, pageId: id };
+        this.isDesignMode = !published;
+        this.initProjectItemData();
+        if (this.isDesignMode) {
+          this.triggerUpdate();
+          this.loadStudio();
+        }
+      }
+      this.initialized = true;
+    };
+    this.initStitches = () => {
+      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;
+    this.projectData = projectData || this.projectData;
+    this.initStitches();
+    this.initProjectItemData();
+  }
+  loadStudio() {
+    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) {
+      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");
+    }
+  }
+  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
+  }) {
+    return fetch(appUrl + `/api/public/${projectKey}`).then((r) => r.json()).catch(console.error);
+  }
+  setProjectData(projectData) {
+    this.projectData = projectData;
+    this.initProjectItemData();
+    this.triggerUpdate();
+  }
+  initProjectItemData() {
+    const data = this.projectData;
+    if (data == null ? void 0 : data.items) {
+      data.items.forEach((item) => {
+        if (!this.itemInstances.get(item.id)) {
+          new WeaverseItemStore(item, this);
+        }
+      });
+    }
+  }
+};
+Weaverse.WeaverseItemStore = WeaverseItemStore;
+export {
+  Weaverse,
+  WeaverseItemStore,
+  isBrowser,
+  isIframe,
+  isReactNative
+};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.33",
+  "version": "0.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -8,7 +8,7 @@
     "access": "public"
   },
   "files": [
-    "dist/"
+    "dist/*"
   ],
   "engines": {
     "node": ">=10"