@webstudio-is/react-sdk 0.49.0 → 0.51.0

package/lib/cjs/components/fragment.ws.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fragment_ws_exports = {};
+__export(fragment_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(fragment_ws_exports);
+const meta = {
+  type: "container",
+  label: "Fragment",
+  Icon: () => null
+};
+const propsMeta = {
+  props: {}
+};

package/lib/cjs/components/heading.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_heading = require("./__generated__/heading.props");
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: import_icons.HeadingIcon,

package/lib/cjs/components/image.cjs

@@ -26,11 +26,14 @@ var import_react = require("react");
 const defaultTag = "img";
 const Image = (0, import_react.forwardRef)(
   (imageProps, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
-      ...imageProps,
-      src: imageProps.src || imagePlaceholderSvg,
-      ref
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        ...imageProps,
+        src: imageProps.src || imagePlaceholderSvg,
+        ref
+      }
+    );
   }
 );
 Image.defaultProps = {

package/lib/cjs/components/image.ws.cjs

@@ -25,17 +25,21 @@ module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_image = require("./__generated__/image.props");
 const presetStyle = {
+  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
   maxWidth: {
     type: "unit",
     unit: "%",
     value: 100
   },
+  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
   display: {
     type: "keyword",
     value: "block"
   }
 };
 const meta = {
+  category: "media",
   type: "embed",
   label: "Image",
   Icon: import_icons.ImageIcon,

package/lib/cjs/components/index.cjs

@@ -27,6 +27,8 @@ __export(components_exports, {
 });
 module.exports = __toCommonJS(components_exports);
 var import_generate_arg_types = require("@webstudio-is/generate-arg-types");
+var import_slot = require("./slot.ws");
+var import_fragment = require("./fragment.ws");
 var import_body = require("./body.ws");
 var import_box = require("./box.ws");
 var import_text_block = require("./text-block.ws");
@@ -49,6 +51,8 @@ var import_list = require("./list.ws");
 var import_list_item = require("./list-item.ws");
 var import_separator = require("./separator.ws");
 var import_code = require("./code.ws");
+var import_slot2 = require("./slot.ws");
+var import_fragment2 = require("./fragment.ws");
 var import_body2 = require("./body.ws");
 var import_box2 = require("./box.ws");
 var import_text_block2 = require("./text-block.ws");
@@ -72,6 +76,8 @@ var import_list_item2 = require("./list-item.ws");
 var import_separator2 = require("./separator.ws");
 var import_code2 = require("./code.ws");
 const defaultMetas = {
+  Slot: import_slot.meta,
+  Fragment: import_fragment.meta,
   Box: import_box.meta,
   Body: import_body.meta,
   TextBlock: import_text_block.meta,
@@ -107,6 +113,8 @@ const registerComponentMetas = (overrides) => {
   currentMetas = result;
 };
 const defaultPropsMetasRaw = {
+  Slot: import_slot2.propsMeta,
+  Fragment: import_fragment2.propsMeta,
   Box: import_box2.propsMeta,
   Body: import_body2.propsMeta,
   TextBlock: import_text_block2.propsMeta,

package/lib/cjs/components/input.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "input";
-const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
-  ...props,
-  ref
-}));
+const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...props, ref }));
 Input.displayName = "Input";

package/lib/cjs/components/input.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_input = require("./__generated__/input.props");
 const meta = {
+  category: "forms",
   type: "control",
   label: "Input",
   Icon: import_icons.InputIcon

package/lib/cjs/components/italic.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(italic_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "i";
-const Italic = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", {
-  ...props,
-  ref
-}));
+const Italic = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { ...props, ref }));
 Italic.displayName = "Italic";

package/lib/cjs/components/link-block.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(link_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
-const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, {
-  ...props,
-  ref
-}));
+const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";

package/lib/cjs/components/link-block.ws.cjs

@@ -24,6 +24,7 @@ __export(link_block_ws_exports, {
 module.exports = __toCommonJS(link_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_link_block = require("./__generated__/link-block.props");
+var import_link = require("./link.ws");
 const presetStyle = {
   boxSizing: {
     type: "keyword",
@@ -35,12 +36,16 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: import_icons.BoxLinkIcon,
   presetStyle
 };
 const propsMeta = {
-  props: import_link_block.props,
-  initialProps: ["href", "target", "prefetch"]
+  props: {
+    ...import_link_block.props,
+    href: import_link.propsMeta.props.href
+  },
+  initialProps: import_link.propsMeta.initialProps
 };

package/lib/cjs/components/link.cjs

@@ -23,13 +23,16 @@ __export(link_exports, {
 module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const Link = (0, import_react.forwardRef)(
-  ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+var import_props = require("../props");
+const Link = (0, import_react.forwardRef)((props, ref) => {
+  const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
       ...props,
-      href,
+      href: typeof href === "string" ? href : href?.path,
       ref
-    });
-  }
-);
+    }
+  );
+});
 Link.displayName = "Link";

package/lib/cjs/components/link.ws.cjs

@@ -36,6 +36,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Link Text",
   Icon: import_icons.Link2Icon,
@@ -43,6 +44,13 @@ const meta = {
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props: import_link.props,
+  props: {
+    ...import_link.props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
+    }
+  },
   initialProps: ["href", "target", "prefetch"]
 };

package/lib/cjs/components/list-item.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(list_item_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_list_item = require("./__generated__/list-item.props");
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: import_icons.ListItemIcon,

package/lib/cjs/components/list.ws.cjs

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "container",
   label: "List",
   Icon: import_icons.ListIcon,

package/lib/cjs/components/paragraph.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(paragraph_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "p";
-const Paragraph = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-  ...props,
-  ref
-}));
+const Paragraph = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props, ref }));
 Paragraph.displayName = "Paragraph";

package/lib/cjs/components/paragraph.ws.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_paragraph = require("./__generated__/paragraph.props");
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,

package/lib/cjs/components/rich-text-link.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(rich_text_link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
-const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, {
-  ...props,
-  ref
-}));
+const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 RichTextLink.displayName = "RichTextLink";

package/lib/cjs/components/rich-text-link.ws.cjs

@@ -24,12 +24,16 @@ __export(rich_text_link_ws_exports, {
 module.exports = __toCommonJS(rich_text_link_ws_exports);
 var import_rich_text_link = require("./__generated__/rich-text-link.props");
 var import_link = require("./link.ws");
+const { category, ...linkMetaRest } = import_link.meta;
 const meta = {
-  ...import_link.meta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: []
 };
 const propsMeta = {
-  ...import_link.propsMeta,
-  props: import_rich_text_link.props
+  initialProps: import_link.propsMeta.initialProps,
+  props: {
+    ...import_rich_text_link.props,
+    href: import_link.propsMeta.props.href
+  }
 };

package/lib/cjs/components/separator.ws.cjs

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "embed",
   label: "Separator",
   Icon: import_icons.DashIcon,

package/lib/cjs/components/slot.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slot_exports = {};
+__export(slot_exports, {
+  Slot: () => Slot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Slot = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      style: { display: props.children ? "contents" : "block" }
+    }
+  );
+});
+Slot.displayName = "Slot";

package/lib/cjs/components/slot.ws.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slot_ws_exports = {};
+__export(slot_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(slot_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  Icon: import_icons.SlotComponentIcon
+};
+const propsMeta = {
+  props: {}
+};

package/lib/cjs/components/span.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(span_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "span";
-const Span = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-  ...props,
-  ref
-}));
+const Span = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props, ref }));
 Span.displayName = "Span";

package/lib/cjs/components/subscript.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(subscript_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "sub";
-const Subscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", {
-  ...props,
-  ref
-}));
+const Subscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";

package/lib/cjs/components/superscript.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(superscript_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "sup";
-const Superscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", {
-  ...props,
-  ref
-}));
+const Superscript = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", { ...props, ref }));
 Superscript.displayName = "Bold";

package/lib/cjs/components/text-block.cjs

@@ -24,8 +24,5 @@ module.exports = __toCommonJS(text_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "div";
-const TextBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-  ...props,
-  ref
-}));
+const TextBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref }));
 TextBlock.displayName = "TextBlock";

package/lib/cjs/components/text-block.ws.cjs

@@ -32,6 +32,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Text Block",
   Icon: import_icons.TextIcon,

package/lib/cjs/context.cjs

@@ -25,5 +25,6 @@ var import_nanostores = require("nanostores");
 var import_react = require("react");
 const ReactSdkContext = (0, import_react.createContext)({
   propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
+  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
+  pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
 });

package/lib/cjs/css/categories.cjs

@@ -24,11 +24,14 @@ __export(categories_exports, {
 module.exports = __toCommonJS(categories_exports);
 const layout = [
   "display",
+  // Flex
   "flexDirection",
   "flexWrap",
+  // Flex or grid
   "alignItems",
   "justifyContent",
   "alignContent",
+  // Grid
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -109,6 +112,7 @@ const typography = [
   "direction",
   "whiteSpace",
   "textShadow",
+  // More
   "fontSizeAdjust",
   "fontStretch",
   "fontVariant",
@@ -149,6 +153,7 @@ const borders = [
   "borderRightWidth",
   "borderBottomWidth",
   "borderLeftWidth",
+  // More
   "borderImageSlice",
   "borderImageWidth",
   "borderImageOutset",
@@ -167,6 +172,7 @@ const effects = [
   "filter",
   "backdropFilter",
   "cursor",
+  // More
   "animationDelay",
   "animationDirection",
   "animationDuration",

package/lib/cjs/index.cjs

@@ -19,6 +19,7 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "defau
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  componentCategories: () => import_component_meta.componentCategories,
   customComponentMetas: () => import_custom_components.customComponentMetas,
   customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
   customComponents: () => import_custom_components.customComponents
@@ -32,3 +33,4 @@ __reExport(src_exports, require("./app"), module.exports);
 __reExport(src_exports, require("./components/components"), module.exports);
 __reExport(src_exports, require("./components/components-utils"), module.exports);
 var import_custom_components = require("./app/custom-components");
+var import_component_meta = require("./components/component-meta");

package/lib/cjs/props.cjs

@@ -18,15 +18,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
+  getInstanceIdFromComponentProps: () => getInstanceIdFromComponentProps,
   getPropsByInstanceId: () => getPropsByInstanceId,
+  resolveUrlProp: () => resolveUrlProp,
   useInstanceProps: () => useInstanceProps,
-  usePropAsset: () => usePropAsset
+  usePropAsset: () => usePropAsset,
+  usePropUrl: () => usePropUrl
 });
 module.exports = __toCommonJS(props_exports);
 var import_react = require("react");
 var import_nanostores = require("nanostores");
 var import_react2 = require("@nanostores/react");
 var import_context = require("./context");
+var import_webstudio_component = require("./tree/webstudio-component");
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -61,7 +65,7 @@ const usePropAsset = (instanceId, name) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
-          return void 0;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -75,3 +79,40 @@ const usePropAsset = (instanceId, name) => {
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };
+const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+    return;
+  }
+};
+const usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const pageStore = (0, import_react.useMemo)(
+    () => (0, import_nanostores.computed)(
+      [propsByInstanceIdStore, pagesStore],
+      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+    ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return (0, import_react2.useStore)(pageStore);
+};
+const getInstanceIdFromComponentProps = (props) => {
+  return props[import_webstudio_component.idAttribute];
+};

package/lib/cjs/pubsub/create.cjs

@@ -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
 ));
@@ -43,10 +47,16 @@ const createPubsub = () => {
     );
   }
   return {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
     publish(action) {
       window.parent.postMessage(action, "*");
       window.postMessage(action, "*");
     },
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
     usePublish() {
       const iframeRef = (0, import_react.useRef)(null);
       const publishCallback = (0, import_react.useCallback)(
@@ -62,6 +72,9 @@ const createPubsub = () => {
       );
       return [publishCallback, iframeRef];
     },
+    /**
+     * To subscribe a message event on the current window.
+     */
     useSubscribe(type, onAction) {
       (0, import_react.useEffect)(() => {
         emitter.on(type, onAction);