@weaverse/core 1.0.52 → 1.0.53

package/dist/index.d.mts

@@ -0,0 +1,350 @@
+import * as Stitches from '@stitches/core';
+import { ForwardRefExoticComponent, RefObject } from 'react';
+import Stitches$1 from '@stitches/core/types/stitches';
+
+declare let stitchesUtils: {
+    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;
+    };
+};
+
+interface WeaverseProjectDataType {
+    items: ElementData[];
+    rootId: string;
+    script?: {
+        css: string;
+        js: string;
+    };
+    pageId?: string;
+}
+interface BreakPoints {
+    mobile: string;
+    desktop: string;
+}
+type PlatformTypeEnum = "shopify-section" | "shopify-hydrogen" | "nextjs";
+interface WeaverseType {
+    mediaBreakPoints?: BreakPoints;
+    weaverseHost?: string;
+    weaverseVersion?: string;
+    projectId?: string;
+    pageId?: string;
+    data?: WeaverseProjectDataType;
+    isDesignMode?: boolean;
+    ssrMode?: boolean;
+    elementSchemas?: ElementSchema[];
+    platformType?: PlatformTypeEnum;
+}
+interface WeaverseElement {
+    Component: ForwardRefExoticComponent<any>;
+    type: string;
+    schema?: ElementSchema;
+    defaultCss?: ElementCSS;
+    permanentCss?: ElementCSS;
+    extraData?: ElementExtraData;
+}
+type CatalogGroup = "essential" | "composition" | "shopify";
+interface ElementCatalog {
+    name: string;
+    icon?: string;
+    group?: CatalogGroup;
+    data?: ElementDataInCatalog[];
+}
+interface ElementDataInCatalog extends Omit<ElementData, "id"> {
+    id: string | number;
+}
+type FlagType = "draggable" | "resizable" | "sortable" | "ignoreShortcutKeys" | "hasContextMenu" | "isSortableContext" | "mustHaveChildren";
+type ElementFlags = Partial<Record<FlagType, boolean>>;
+type ChildElementSelector = string | string[];
+interface ChildElement {
+    label: string;
+    selector: ChildElementSelector;
+}
+type ParentType = "container" | "layout" | "root" | "product-details" | "product-info" | "slideshow" | "slide";
+type GridSize = {
+    rowSpan: number;
+    colSpan: number;
+};
+type ToolbarAction = "general-settings" | "settings-level-2" | "text-presets" | "ai-assistant" | "scale-text" | "duplicate" | "delete" | "copy-styles" | "paste-styles" | "move-up" | "move-down" | "next-slide" | "prev-slide" | "change-background" | "toggle-visibility" | "more-actions";
+interface ElementSchema {
+    title: string;
+    type: string;
+    parentTypes: 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;
+}
+interface ElementExtraData {
+    [key: string]: unknown;
+}
+type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stitchesUtils, string | number>>;
+type ChildElementCSS = Partial<{
+    [selector: string]: WeaverseCSSProperties & ChildElementCSS;
+}>;
+interface ElementCSS {
+    "@desktop"?: WeaverseCSSProperties | ChildElementCSS;
+    "@mobile"?: WeaverseCSSProperties | ChildElementCSS;
+}
+interface ElementInspector {
+    settings?: (AdvancedGroup | BasicGroup)[];
+    styles?: (AdvancedGroup | BasicGroup)[];
+}
+interface AdvancedGroup {
+    groupType: AdvancedGroupType;
+    useData?: boolean;
+}
+interface BasicGroup {
+    groupType: "basic";
+    groupHeader: string;
+    inputs: BasicInput[];
+}
+type AdvancedGroupType = "border" | "alignment" | "background" | "dimensions" | "spacing" | "typography" | "visibility" | "shadows-and-effects" | "layout-background";
+interface BasicInput<ConfigsType = AdditionalInputConfigs> {
+    type: InputType;
+    label?: string;
+    binding?: "style" | "data";
+    /**
+     * The key of the value of the element data or styles
+     * @example
+     * // Bind to `element.data.title`
+     * name: "title"
+     * // Bind to `element.css["@desktop"].backgroundColor`
+     * name: "backgroundColor"
+     */
+    name?: string;
+    /**
+     * Additional options for inputs that require more configuration
+     */
+    configs?: ConfigsType;
+    /**
+     * Only display if condition matches.
+     *
+     * Format: `dataBindingKey.conditionalOperator.value`
+     *
+     * Supported operators: `eq`, `ne`, `gt`, `gte`, `lt`, `lte`
+     *
+     * @example
+     * `clickAction.eq.openLink`
+     * `clickAction.ne.openLink`
+     * `imagesPerRow.gt.1`
+     */
+    condition?: string;
+    defaultValue: string | number | boolean;
+    placeholder?: string;
+    helpText?: string;
+}
+type AdditionalInputConfigs = SelectInputConfigs | ToggleGroupConfigs | RangeInputConfigs | ChildrenSortInputConfigs | DataSortInputConfigs;
+interface SelectInputConfigs {
+    options?: {
+        value: string;
+        label: string;
+        icon?: string;
+        weight?: string;
+    }[];
+}
+interface ToggleGroupConfigs {
+    options?: {
+        value: string;
+        label: string;
+        icon?: string;
+        weight?: string;
+    }[];
+}
+interface RangeInputConfigs {
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+}
+type SortableItemAction = "add" | "edit" | "duplicate" | "delete" | "toggle-visibility";
+interface ChildrenSortInputConfigs {
+    actions: SortableItemAction[];
+}
+interface DataSortInputConfigs {
+    prop: string;
+    defaultData: object;
+    inspector: string;
+}
+type InputType = "color" | "datepicker" | "image" | "range" | "select" | "children-sort" | "data-sort" | "switch" | "text" | "textarea" | "toggle-group" | "position" | "information" | "product" | "product-list" | "product-swatches" | "text-editor" | "custom.html" | "instagram" | "collection-list" | "collection" | "article-list" | "map-autocomplete";
+declare global {
+    interface Window {
+        weaverseStudioInitialized: boolean;
+        Blinkloader: any;
+        __weaverse: any;
+        __weaverses: {
+            [key: string]: any;
+        };
+        createWeaverseStudioBridge: (weaverse: any) => Promise<any>;
+    }
+}
+
+declare class WeaverseItemStore {
+    weaverse: Weaverse;
+    listeners: Set<(_: ElementData) => void>;
+    ref: RefObject<HTMLElement>;
+    stitchesClass: string;
+    private _store;
+    constructor(itemData: ElementData, weaverse: Weaverse);
+    get _id(): string;
+    get _element(): HTMLElement | null;
+    get _flags(): Partial<Record<FlagType, boolean>>;
+    get Element(): WeaverseElement | undefined;
+    set data(update: Omit<ElementData, "id" | "type">);
+    get data(): ElementData;
+    setData: (update: Omit<ElementData, "id" | "type">) => ElementData;
+    subscribe: (fn: (_: ElementData) => void) => void;
+    unsubscribe: (fn: (_: ElementData) => void) => 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
+     */
+    weaverseHost: string;
+    /**
+     * Weaverse version, it can be used to load the correct version of Weaverse SDK
+     */
+    weaverseVersion: string;
+    /**
+     * Weaverse project key to access project data via API
+     */
+    projectId: string;
+    pageId: string;
+    internal: any;
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot data={data} /> it will be used to server-side rendering
+     */
+    data: WeaverseProjectDataType;
+    /**
+     * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     */
+    listeners: Set<() => void>;
+    /**
+     * Check whether the sdk is in editor 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
+     */
+    isDesignMode: boolean;
+    /**
+     * Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    platformType: PlatformTypeEnum;
+    /**
+     * Check whether the sdk is in preview mode or not
+     */
+    isPreviewMode: boolean;
+    /**
+     * Use in element to optionally render special HTML for hydration
+     */
+    ssrMode: boolean;
+    /**
+     * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project
+     */
+    stitchesInstance: Stitches$1 | any;
+    studioBridge?: any;
+    elementSchemas: ElementSchema[];
+    static WeaverseItemStore: typeof WeaverseItemStore;
+    mediaBreakPoints: BreakPoints;
+    /**
+     * constructor
+     * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @param projectId {string} Weaverse project key to access project data via API
+     * @param data {WeaverseProjectDataType} 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
+     * @param elementSchemas {Array<ElementSchema>} List of element schemas
+     * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    constructor(params?: WeaverseType);
+    /**
+     * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+     * @param element {WeaverseElement} custom React Component
+     */
+    registerElement(element: WeaverseElement): void;
+    initStitches: (externalConfig?: {}) => void;
+    subscribe(fn: any): void;
+    unsubscribe(fn: any): void;
+    triggerUpdate(): void;
+    refreshAllItems(): void;
+    /**
+     * When applying new template,
+     * we need to reset the project data and re-initialize the project item data
+     * @param data {WeaverseProjectDataType}
+     */
+    setProjectData(data: WeaverseProjectDataType): void;
+    /**
+     * Create new WeaverseItemStore instance for each item in project data
+     */
+    initProject(): void;
+}
+
+declare let loadScript: (src: string) => Promise<unknown>;
+
+declare let isReactNative: boolean;
+declare let isBrowser: boolean;
+declare let isIframe: boolean;
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param source
+ */
+declare function merge(target: Record<string, any>, source: Record<string, any>): {
+    [x: string]: any;
+};
+
+export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ChildrenSortInputConfigs, DataSortInputConfigs, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, ElementExtraData, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, PlatformTypeEnum, RangeInputConfigs, SelectInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, loadScript, merge };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.52",
+  "version": "1.0.53",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",