@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/lib/cjs/db/instance.cjs

@@ -1,21 +1,41 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Instance = exports.toBaseInstance = void 0;
-const css_data_1 = require("@webstudio-is/css-data");
-const zod_1 = require("zod");
+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 instance_exports = {};
+__export(instance_exports, {
+  Instance: () => Instance,
+  toBaseInstance: () => toBaseInstance
+});
+module.exports = __toCommonJS(instance_exports);
+var import_css_data = require("@webstudio-is/css-data");
+var import_zod = require("zod");
 const toBaseInstance = (instance) => {
-    return {
-        id: instance.id,
-        component: instance.component,
-        cssRules: instance.cssRules,
-    };
+  return {
+    id: instance.id,
+    component: instance.component,
+    cssRules: instance.cssRules
+  };
 };
-exports.toBaseInstance = toBaseInstance;
-exports.Instance = zod_1.z.lazy(() => zod_1.z.object({
-    id: zod_1.z.string(),
-    component: zod_1.z.string(),
-    children: zod_1.z.array(zod_1.z.union([exports.Instance, zod_1.z.string()])),
-    cssRules: zod_1.z.array(css_data_1.CssRule),
-})
-// @todo can't figure out how to make component to be z.enum(Object.keys(components))
+const Instance = import_zod.z.lazy(
+  () => import_zod.z.object({
+    id: import_zod.z.string(),
+    component: import_zod.z.string(),
+    children: import_zod.z.array(import_zod.z.union([Instance, import_zod.z.string()])),
+    cssRules: import_zod.z.array(import_css_data.CssRule)
+  })
 );

package/lib/cjs/db/types.cjs

@@ -1,2 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/cjs/index.cjs

@@ -1,37 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+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 __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.components = void 0;
-__exportStar(require("./css"), exports);
-__exportStar(require("./tree"), exports);
-exports.components = __importStar(require("./components"));
-__exportStar(require("./components/meta"), exports);
-__exportStar(require("./user-props"), exports);
-__exportStar(require("./pubsub"), exports);
-__exportStar(require("./db"), exports);
-__exportStar(require("./remix"), exports);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  customComponents: () => import_custom_components.customComponents,
+  customComponentsMeta: () => import_custom_components.customComponentsMeta
+});
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./css"), module.exports);
+__reExport(src_exports, require("./tree"), module.exports);
+__reExport(src_exports, require("./components"), module.exports);
+__reExport(src_exports, require("./user-props"), module.exports);
+__reExport(src_exports, require("./pubsub"), module.exports);
+__reExport(src_exports, require("./db"), module.exports);
+__reExport(src_exports, require("./app"), module.exports);
+var import_custom_components = require("./app/custom-components");

package/lib/cjs/pubsub/create.cjs

@@ -1,66 +1,81 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPubsub = void 0;
-const mitt_1 = __importDefault(require("mitt"));
-const react_1 = require("react");
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var create_exports = {};
+__export(create_exports, {
+  createPubsub: () => createPubsub
+});
+module.exports = __toCommonJS(create_exports);
+var import_mitt = __toESM(require("mitt"), 1);
+var import_react = require("react");
 const createPubsub = () => {
-    // `mitt` has a somewhat annoying overload for `*` type that makes it hard to wrap in a generic context
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const emitter = (0, mitt_1.default)();
-    if (typeof window === "object") {
-        window.addEventListener("message", (event) => {
-            // @todo this has no type safety built in, could be anything from any source.
-            // we could potentially maintain a list of valid event types at runtime
-            // at the very least we could add a brand property or something to our events
-            if (typeof event.data?.type === "string") {
-                emitter.emit(event.data.type, event.data.payload);
-            }
-        }, false);
-    }
-    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, react_1.useRef)(null);
-            const publishCallback = (0, react_1.useCallback)((action) => {
-                const element = iframeRef.current;
-                if (element?.contentWindow == null)
-                    return;
-                element.contentWindow.postMessage(action, "*");
-                window.postMessage(action, "*");
-            }, [iframeRef]);
-            return [publishCallback, iframeRef];
+  const emitter = (0, import_mitt.default)();
+  if (typeof window === "object") {
+    window.addEventListener(
+      "message",
+      (event) => {
+        if (typeof event.data?.type === "string") {
+          emitter.emit(event.data.type, event.data.payload);
+        }
+      },
+      false
+    );
+  }
+  return {
+    publish(action) {
+      window.parent.postMessage(action, "*");
+      window.postMessage(action, "*");
+    },
+    usePublish() {
+      const iframeRef = (0, import_react.useRef)(null);
+      const publishCallback = (0, import_react.useCallback)(
+        (action) => {
+          const element = iframeRef.current;
+          if (element?.contentWindow == null)
+            return;
+          element.contentWindow.postMessage(action, "*");
+          window.postMessage(action, "*");
         },
-        /**
-         * To subscribe a message event on the current window.
-         */
-        useSubscribe(type, onAction) {
-            (0, react_1.useEffect)(() => {
-                emitter.on(type, onAction);
-                return () => {
-                    emitter.off(type, onAction);
-                };
-            }, [type, onAction]);
-        },
-        useSubscribeAll(onAction) {
-            (0, react_1.useEffect)(() => {
-                emitter.on("*", onAction);
-                return () => {
-                    emitter.off("*", onAction);
-                };
-            }, [onAction]);
-        },
-    };
+        [iframeRef]
+      );
+      return [publishCallback, iframeRef];
+    },
+    useSubscribe(type, onAction) {
+      (0, import_react.useEffect)(() => {
+        emitter.on(type, onAction);
+        return () => {
+          emitter.off(type, onAction);
+        };
+      }, [type, onAction]);
+    },
+    useSubscribeAll(onAction) {
+      (0, import_react.useEffect)(() => {
+        emitter.on("*", onAction);
+        return () => {
+          emitter.off("*", onAction);
+        };
+      }, [onAction]);
+    }
+  };
 };
-exports.createPubsub = createPubsub;

package/lib/cjs/pubsub/index.cjs

@@ -1,17 +1,18 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./create"), exports);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pubsub_exports = {};
+module.exports = __toCommonJS(pubsub_exports);
+__reExport(pubsub_exports, require("./create"), module.exports);

package/lib/cjs/tree/create-elements-tree.cjs

@@ -1,54 +1,96 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createElementsTree = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@remix-run/react");
-const session_storage_polyfill_1 = require("./session-storage-polyfill");
-const createElementsTree = ({ sandbox, instance, Component, onChangeChildren, }) => {
-    const children = createInstanceChildrenElements({
-        Component,
-        children: instance.children,
-        onChangeChildren,
-    });
-    const body = createInstanceElement({
-        Component,
-        instance,
+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 create_elements_tree_exports = {};
+__export(create_elements_tree_exports, {
+  createElementsTree: () => createElementsTree
+});
+module.exports = __toCommonJS(create_elements_tree_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@remix-run/react");
+var import_session_storage_polyfill = require("./session-storage-polyfill");
+const createElementsTree = ({
+  sandbox,
+  instance,
+  Component,
+  onChangeChildren
+}) => {
+  const children = createInstanceChildrenElements({
+    Component,
+    children: instance.children,
+    onChangeChildren
+  });
+  const body = createInstanceElement({
+    Component,
+    instance,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
         children: [
-            (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [children, sandbox && (0, jsx_runtime_1.jsx)(session_storage_polyfill_1.SessionStoragePolyfill, {}), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {}), (0, jsx_runtime_1.jsx)(react_2.Scripts, {})] }, "children"),
-        ],
-    });
-    return body;
+          children,
+          sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
+        ]
+      }, "children")
+    ]
+  });
+  return body;
 };
-exports.createElementsTree = createElementsTree;
-const createInstanceChildrenElements = ({ children, Component, onChangeChildren, }) => {
-    const elements = [];
-    for (const child of children) {
-        if (typeof child === "string") {
-            elements.push(child);
-            continue;
-        }
-        const children = createInstanceChildrenElements({
-            children: child.children,
-            Component,
-            onChangeChildren,
-        });
-        const element = createInstanceElement({
-            instance: child,
-            Component,
-            onChangeChildren,
-            children,
-        });
-        elements.push(element);
+const createInstanceChildrenElements = ({
+  children,
+  Component,
+  onChangeChildren
+}) => {
+  const elements = [];
+  for (const child of children) {
+    if (typeof child === "string") {
+      elements.push(child);
+      continue;
     }
-    return elements;
+    const children2 = createInstanceChildrenElements({
+      children: child.children,
+      Component,
+      onChangeChildren
+    });
+    const element = createInstanceElement({
+      instance: child,
+      Component,
+      onChangeChildren,
+      children: children2
+    });
+    elements.push(element);
+  }
+  return elements;
 };
-const createInstanceElement = ({ Component, instance, children = [], onChangeChildren, }) => {
-    const props = {
-        instance,
-        children,
-        key: instance.id,
-        onChangeChildren,
-    };
-    return (0, jsx_runtime_1.jsx)(Component, { ...props });
+const createInstanceElement = ({
+  Component,
+  instance,
+  children = [],
+  onChangeChildren
+}) => {
+  const props = {
+    instance,
+    children,
+    key: instance.id,
+    onChangeChildren
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+    ...props
+  });
 };

package/lib/cjs/tree/index.cjs

@@ -1,19 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./create-elements-tree"), exports);
-__exportStar(require("./root"), exports);
-__exportStar(require("./wrapper-component"), exports);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tree_exports = {};
+module.exports = __toCommonJS(tree_exports);
+__reExport(tree_exports, require("./create-elements-tree"), module.exports);
+__reExport(tree_exports, require("./root"), module.exports);
+__reExport(tree_exports, require("./wrapper-component"), module.exports);

package/lib/cjs/tree/root.cjs

@@ -1,17 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstanceRoot = void 0;
-const user_props_1 = require("../user-props/");
-const create_elements_tree_1 = require("./create-elements-tree");
-const wrapper_component_1 = require("./wrapper-component");
-const InstanceRoot = ({ data, Component, }) => {
-    if (data.tree === null) {
-        throw new Error("Tree is null");
-    }
-    (0, user_props_1.useAllUserProps)(data.props);
-    return (0, create_elements_tree_1.createElementsTree)({
-        instance: data.tree.root,
-        Component: Component ?? wrapper_component_1.WrapperComponent,
-    });
+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 root_exports = {};
+__export(root_exports, {
+  InstanceRoot: () => InstanceRoot
+});
+module.exports = __toCommonJS(root_exports);
+var import_user_props = require("../user-props/");
+var import_create_elements_tree = require("./create-elements-tree");
+var import_wrapper_component = require("./wrapper-component");
+var import_components = require("../components");
+var import_custom_components = require("../app/custom-components");
+var import_params = require("../app/params");
+const InstanceRoot = ({
+  data,
+  Component,
+  customComponents = import_custom_components.customComponents
+}) => {
+  if (data.tree === null) {
+    throw new Error("Tree is null");
+  }
+  (0, import_user_props.useAllUserProps)(data.props);
+  (0, import_params.setParams)(data.params ?? null);
+  (0, import_components.registerComponents)(customComponents);
+  return (0, import_create_elements_tree.createElementsTree)({
+    instance: data.tree.root,
+    Component: Component ?? import_wrapper_component.WrapperComponent
+  });
 };
-exports.InstanceRoot = InstanceRoot;