@weaverse/core 0.7.67 → 0.7.68

package/dist/index.d.ts

@@ -90,7 +90,7 @@ type GridSize = {
     rowSpan: number;
     colSpan: number;
 };
-type ToolbarAction = "general-settings" | "settings-level-2" | "duplicate" | "delete" | "copy-styles" | "paste-styles" | "move-up" | "move-down" | "next-slide" | "prev-slide" | "change-background" | "toggle-visibility" | "more-actions";
+type ToolbarAction = "general-settings" | "settings-level-2" | "text-presets" | "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;

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -55,6 +59,7 @@ function merge(target, source) {
 
 // src/utils/styles.ts
 var stichesUtils = {
+  // Abbreviated margin properties
   m: (value) => ({
     margin: value
   }),
@@ -78,10 +83,12 @@ var stichesUtils = {
     marginTop: value,
     marginBottom: value
   }),
+  // A property for applying width/height together
   size: (value) => ({
     width: value,
     height: value
   }),
+  // Abbreviated padding properties
   px: (value) => ({
     paddingLeft: value,
     paddingRight: value
@@ -146,22 +153,69 @@ var WeaverseItemStore = class {
   }
 };
 var Weaverse = class {
+  /**
+   * 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 } = {}) {
+    /**
+     * For storing, registering element React component from Weaverse or created by user/developer
+     */
     this.elementInstances = /* @__PURE__ */ new Map();
+    /**
+     * list of element/items store to provide data, handle state update, state sharing, etc.
+     */
     this.itemInstances = /* @__PURE__ */ new Map();
+    /**
+     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @type {string}
+     */
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
     this.projectKey = "";
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     */
     this.projectData = {
       rootId: "",
       items: [],
       script: { css: "", js: "" }
     };
+    /**
+     * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     * @type {Map<string, (data: any) => void>}
+     */
     this.listeners = /* @__PURE__ */ new Set();
+    /**
+     * 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}
+     */
     this.isDesignMode = false;
+    /**
+     * Check whether the sdk is in preview mode or not
+     * @type {boolean}
+     */
     this.isPreviewMode = false;
+    /**
+     * Use in element to optionally render special HTML for hydration
+     * @type {boolean}
+     */
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
+      // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width
+      // tablet: "(max-width: 1023.98px)", // to set css for tablet, {'@tablet' : { // css }},
       mobile: "(max-width: 767.98px)"
     };
     this.initStitches = () => {
@@ -183,6 +237,22 @@ var Weaverse = class {
     this.initStitches();
     this.initProjectItemData();
   }
+  // initialized = false
+  // initializeData = (data: InitializeData) => {
+  //   if (!this.initialized) {
+  //     let { data: pageData, published, id, projectKey, studioUrl } = data
+  //     this.projectKey = projectKey || this.projectKey
+  //     this.appUrl = studioUrl || this.appUrl
+  //     this.projectData = { ...pageData, pageId: id }
+  //     this.isDesignMode = !published
+  //     this.initProjectItemData()
+  //     if (this.isDesignMode) {
+  //       this.triggerUpdate()
+  //       this.loadStudio()
+  //     }
+  //   }
+  //   this.initialized = true
+  // }
   loadStudio(version) {
     setTimeout(() => {
       if (isIframe && this.isDesignMode && !this.studioBridge) {
@@ -202,6 +272,10 @@ var Weaverse = class {
       }
     }, 2e3);
   }
+  /**
+   * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+   * @param element {WeaverseElement} custom React Component
+   */
   registerElement(element) {
     if (element?.type) {
       if (this.elementInstances.has(element.type)) {
@@ -221,6 +295,12 @@ var Weaverse = class {
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
   }
+  /**
+   * Fetch data from Weaverse API (https://weaverse.io/api/v1/project/: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 = globalThis.fetch,
     appUrl,

package/dist/index.mjs

@@ -18,6 +18,7 @@ function merge(target, source) {
 
 // src/utils/styles.ts
 var stichesUtils = {
+  // Abbreviated margin properties
   m: (value) => ({
     margin: value
   }),
@@ -41,10 +42,12 @@ var stichesUtils = {
     marginTop: value,
     marginBottom: value
   }),
+  // A property for applying width/height together
   size: (value) => ({
     width: value,
     height: value
   }),
+  // Abbreviated padding properties
   px: (value) => ({
     paddingLeft: value,
     paddingRight: value
@@ -109,22 +112,69 @@ var WeaverseItemStore = class {
   }
 };
 var Weaverse = class {
+  /**
+   * 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 } = {}) {
+    /**
+     * For storing, registering element React component from Weaverse or created by user/developer
+     */
     this.elementInstances = /* @__PURE__ */ new Map();
+    /**
+     * list of element/items store to provide data, handle state update, state sharing, etc.
+     */
     this.itemInstances = /* @__PURE__ */ new Map();
+    /**
+     * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+     * @type {string}
+     */
     this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
+    /**
+     * Weaverse project key to access project data via API
+     * @type {string}
+     */
     this.projectKey = "";
+    /**
+     * Weaverse project data, by default, user can provide project data via React Component:
+     * <WeaverseRoot defaultData={projectData} /> it will be used to server-side rendering
+     */
     this.projectData = {
       rootId: "",
       items: [],
       script: { css: "", js: "" }
     };
+    /**
+     * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
+     * @type {Map<string, (data: any) => void>}
+     */
     this.listeners = /* @__PURE__ */ new Set();
+    /**
+     * 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}
+     */
     this.isDesignMode = false;
+    /**
+     * Check whether the sdk is in preview mode or not
+     * @type {boolean}
+     */
     this.isPreviewMode = false;
+    /**
+     * Use in element to optionally render special HTML for hydration
+     * @type {boolean}
+     */
     this.ssrMode = false;
     this.mediaBreakPoints = {
       desktop: "all",
+      // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width
+      // tablet: "(max-width: 1023.98px)", // to set css for tablet, {'@tablet' : { // css }},
       mobile: "(max-width: 767.98px)"
     };
     this.initStitches = () => {
@@ -146,6 +196,22 @@ var Weaverse = class {
     this.initStitches();
     this.initProjectItemData();
   }
+  // initialized = false
+  // initializeData = (data: InitializeData) => {
+  //   if (!this.initialized) {
+  //     let { data: pageData, published, id, projectKey, studioUrl } = data
+  //     this.projectKey = projectKey || this.projectKey
+  //     this.appUrl = studioUrl || this.appUrl
+  //     this.projectData = { ...pageData, pageId: id }
+  //     this.isDesignMode = !published
+  //     this.initProjectItemData()
+  //     if (this.isDesignMode) {
+  //       this.triggerUpdate()
+  //       this.loadStudio()
+  //     }
+  //   }
+  //   this.initialized = true
+  // }
   loadStudio(version) {
     setTimeout(() => {
       if (isIframe && this.isDesignMode && !this.studioBridge) {
@@ -165,6 +231,10 @@ var Weaverse = class {
       }
     }, 2e3);
   }
+  /**
+   * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+   * @param element {WeaverseElement} custom React Component
+   */
   registerElement(element) {
     if (element?.type) {
       if (this.elementInstances.has(element.type)) {
@@ -184,6 +254,12 @@ var Weaverse = class {
   triggerUpdate() {
     this.listeners.forEach((fn) => fn());
   }
+  /**
+   * Fetch data from Weaverse API (https://weaverse.io/api/v1/project/: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 = globalThis.fetch,
     appUrl,

package/package.json

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