@weaverse/core 1.0.18 → 1.0.19

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as Stitches from '@stitches/core';
-import { ForwardRefExoticComponent, RefObject } from 'react';
+import { RefObject, ForwardRefExoticComponent } from 'react';
 import Stitches$1 from '@stitches/core/types/stitches';
 
 declare let stitchesUtils: {
@@ -40,6 +40,127 @@ declare let stitchesUtils: {
     };
 };
 
+/**
+ * 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}
+     */
+    weaverseHost: string;
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
+    projectId: string;
+    /**
+     * 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
+     * @type {Map<string, (data: any) => void>}
+     */
+    listeners: Set<any>;
+    /**
+     * 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
+     * @type {boolean}
+     */
+    isDesignMode: boolean;
+    /**
+     * Check the platform, shopify-section or react-ssr(hydrogen)
+     */
+    platformType: PlatformTypeEnum;
+    /**
+     * Check whether the sdk is in preview mode or not
+     * @type {boolean}
+     */
+    isPreviewMode: 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;
+    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({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas, platformType, }?: WeaverseType);
+    init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, }?: WeaverseType): 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;
+    setProjectData(data: WeaverseProjectDataType): void;
+    initProjectItemData(): void;
+}
+
 interface WeaverseProjectDataType {
     items: ElementData[];
     rootId: string;
@@ -53,7 +174,7 @@ interface BreakPoints {
     mobile: string;
     desktop: string;
 }
-type PlatformTypeEnum = "shopify-section" | "react-ssr";
+type PlatformTypeEnum = "shopify-section" | "shopify-hydrogen" | "nextjs";
 interface WeaverseType {
     mediaBreakPoints?: BreakPoints;
     weaverseHost?: string;
@@ -203,132 +324,13 @@ interface DataSortInputConfigs {
 type InputType = "color" | "datepicker" | "image" | "range" | "select" | "children-sort" | "data-sort" | "switch" | "text" | "textarea" | "toggle-group" | "position" | "product" | "product-list" | "product-swatches" | "text-editor" | "custom.html" | "instagram" | "collection-list" | "collection" | "article-list" | "map-autocomplete";
 declare global {
     interface Window {
-        WeaverseStudioBridge: any;
+        createWeaverseStudioBridge: (weaverse: Weaverse) => any;
+        weaverseStudioInitialized: boolean;
         Blinkloader: any;
     }
 }
 
-/**
- * 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}
-     */
-    weaverseHost: string;
-    /**
-     * Weaverse project key to access project data via API
-     * @type {string}
-     */
-    projectId: string;
-    /**
-     * 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
-     * @type {Map<string, (data: any) => void>}
-     */
-    listeners: Set<any>;
-    /**
-     * 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
-     * @type {boolean}
-     */
-    isDesignMode: boolean;
-    /**
-     * Check the platform, shopify-section or react-ssr(hydrogen)
-     */
-    platformType: PlatformTypeEnum;
-    /**
-     * Check whether the sdk is in preview mode or not
-     * @type {boolean}
-     */
-    isPreviewMode: 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;
-    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({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas, platformType, }?: WeaverseType);
-    init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, }?: WeaverseType): void;
-    loadStudio(version?: string): 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;
-    setProjectData(data: WeaverseProjectDataType): void;
-    initProjectItemData(): void;
-}
+declare let loadScript: (src: string) => Promise<unknown>;
 
 declare let isReactNative: boolean;
 declare let isBrowser: boolean;
@@ -342,4 +344,4 @@ 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, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, PlatformTypeEnum, RangeInputConfigs, SelectInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, merge };
+export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ChildrenSortInputConfigs, DataSortInputConfigs, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, 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/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   isBrowser: () => isBrowser,
   isIframe: () => isIframe,
   isReactNative: () => isReactNative,
+  loadScript: () => loadScript,
   merge: () => merge
 });
 module.exports = __toCommonJS(src_exports);
@@ -42,6 +43,18 @@ module.exports = __toCommonJS(src_exports);
 // src/core.ts
 var stitches = __toESM(require("@stitches/core"));
 
+// src/utils/load-script.ts
+var loadScript = (src) => {
+  return new Promise((resolve, reject) => {
+    let script = document.createElement("script");
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    script.defer = true;
+    document.body.appendChild(script);
+  });
+};
+
 // src/utils/index.ts
 var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
 var isBrowser = typeof window !== "undefined" && !isReactNative;
@@ -263,42 +276,6 @@ var Weaverse = class {
     this.initProjectItemData();
     this.initStitches();
   }
-  // initialized = false
-  // initializeData = (data: any) => {
-  //   if (!this.initialized) {
-  //     let { data: d, isDesignMode, id, projectId, weaverseHost } = data
-  //     this.projectId = projectId || this.projectId
-  //     this.weaverseHost = weaverseHost || this.weaverseHost
-  //     this.data = { ...d, pageId: id }
-  //     this.isDesignMode = isDesignMode
-  //     this.initProjectItemData()
-  //     if (this.isDesignMode) {
-  //       this.triggerUpdate()
-  //       this.loadStudio()
-  //     }
-  //   }
-  //   this.initialized = true
-  // }
-  loadStudio(version) {
-    if (isIframe && this.isDesignMode && !this.studioBridge) {
-      const initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-        clearInterval(i);
-      };
-      let i = setInterval(() => {
-        if (!window.WeaverseStudioBridge) {
-          let studioBridgeScript = document.createElement("script");
-          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`;
-          studioBridgeScript.type = "module";
-          studioBridgeScript.onload = initStudio;
-          document.body.appendChild(studioBridgeScript);
-        } else {
-          initStudio();
-        }
-      }, 2e3);
-    }
-  }
   /**
    * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
    * @param element {WeaverseElement} custom React Component
@@ -346,5 +323,6 @@ Weaverse.WeaverseItemStore = WeaverseItemStore;
   isBrowser,
   isIframe,
   isReactNative,
+  loadScript,
   merge
 });

package/dist/index.mjs

@@ -1,6 +1,18 @@
 // src/core.ts
 import * as stitches from "@stitches/core";
 
+// src/utils/load-script.ts
+var loadScript = (src) => {
+  return new Promise((resolve, reject) => {
+    let script = document.createElement("script");
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    script.defer = true;
+    document.body.appendChild(script);
+  });
+};
+
 // src/utils/index.ts
 var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
 var isBrowser = typeof window !== "undefined" && !isReactNative;
@@ -222,42 +234,6 @@ var Weaverse = class {
     this.initProjectItemData();
     this.initStitches();
   }
-  // initialized = false
-  // initializeData = (data: any) => {
-  //   if (!this.initialized) {
-  //     let { data: d, isDesignMode, id, projectId, weaverseHost } = data
-  //     this.projectId = projectId || this.projectId
-  //     this.weaverseHost = weaverseHost || this.weaverseHost
-  //     this.data = { ...d, pageId: id }
-  //     this.isDesignMode = isDesignMode
-  //     this.initProjectItemData()
-  //     if (this.isDesignMode) {
-  //       this.triggerUpdate()
-  //       this.loadStudio()
-  //     }
-  //   }
-  //   this.initialized = true
-  // }
-  loadStudio(version) {
-    if (isIframe && this.isDesignMode && !this.studioBridge) {
-      const initStudio = () => {
-        this.studioBridge = new window.WeaverseStudioBridge(this);
-        this.triggerUpdate();
-        clearInterval(i);
-      };
-      let i = setInterval(() => {
-        if (!window.WeaverseStudioBridge) {
-          let studioBridgeScript = document.createElement("script");
-          studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`;
-          studioBridgeScript.type = "module";
-          studioBridgeScript.onload = initStudio;
-          document.body.appendChild(studioBridgeScript);
-        } else {
-          initStudio();
-        }
-      }, 2e3);
-    }
-  }
   /**
    * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
    * @param element {WeaverseElement} custom React Component
@@ -304,5 +280,6 @@ export {
   isBrowser,
   isIframe,
   isReactNative,
+  loadScript,
   merge
 };

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "1.0.18",
+  "version": "1.0.19",
   "license": "MIT",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "publishConfig": {
     "access": "public"