@webstudio-is/react-sdk 0.7.2 → 0.8.0

package/lib/pubsub/create.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPubsub = void 0;
-const mitt_1 = __importDefault(require("mitt"));
-const react_1 = require("react");
-const createPubsub = () => {
+import mitt from "mitt";
+import { useCallback, useEffect, useRef } from "react";
+export 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)();
+    const emitter = mitt();
     if (typeof window === "object") {
         window.addEventListener("message", (event) => {
             // @todo this has no type safety built in, could be anything from any source.
@@ -32,8 +26,8 @@ const createPubsub = () => {
          * 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 iframeRef = useRef(null);
+            const publishCallback = useCallback((action) => {
                 const element = iframeRef.current;
                 if (element?.contentWindow == null)
                     return;
@@ -46,7 +40,7 @@ const createPubsub = () => {
          * To subscribe a message event on the current window.
          */
         useSubscribe(type, onAction) {
-            (0, react_1.useEffect)(() => {
+            useEffect(() => {
                 emitter.on(type, onAction);
                 return () => {
                     emitter.off(type, onAction);
@@ -54,7 +48,7 @@ const createPubsub = () => {
             }, [type, onAction]);
         },
         useSubscribeAll(onAction) {
-            (0, react_1.useEffect)(() => {
+            useEffect(() => {
                 emitter.on("*", onAction);
                 return () => {
                     emitter.off("*", onAction);
@@ -63,4 +57,3 @@ const createPubsub = () => {
         },
     };
 };
-exports.createPubsub = createPubsub;

package/lib/pubsub/index.js

@@ -1,17 +1 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./create"), exports);
+export * from "./create";

package/lib/remix/handle-request.server.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleRequest = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const server_1 = require("react-dom/server");
-const react_1 = require("@remix-run/react");
-const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
-    const markup = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(react_1.RemixServer, { context: remixContext, url: request.url }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "@remix-run/react";
+export const handleRequest = (request, responseStatusCode, responseHeaders, remixContext) => {
+    const markup = renderToString(_jsx(RemixServer, { context: remixContext, url: request.url }));
     responseHeaders.set("Content-Type", "text/html");
     return new Response(`<!DOCTYPE html>${markup}`, {
         status: responseStatusCode,
         headers: responseHeaders,
     });
 };
-exports.handleRequest = handleRequest;

package/lib/remix/index.js

@@ -1,18 +1,2 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./root"), exports);
-__exportStar(require("./handle-request.server"), exports);
+export * from "./root";
+export * from "./handle-request.server";

package/lib/remix/root.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Root = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@remix-run/react");
-const remix_utils_1 = require("remix-utils");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Links, Meta, Outlet as DefaultOutlet } from "@remix-run/react";
+import { DynamicLinks } from "remix-utils";
 /**
  * We are using Outlet prop from index layout when user renders site from a subdomain.
  */
-const Root = ({ Outlet = react_1.Outlet, }) => {
-    return ((0, jsx_runtime_1.jsxs)("html", { lang: "en", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(remix_utils_1.DynamicLinks, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {})] }), (0, jsx_runtime_1.jsx)(Outlet, {})] }));
+export const Root = ({ Outlet = DefaultOutlet, }) => {
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width,initial-scale=1" }), _jsx("link", { rel: "icon", href: "/favicon.ico", type: "image/x-icon" }), _jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _jsx(Meta, {}), _jsx(DynamicLinks, {}), _jsx(Links, {})] }), _jsx(Outlet, {})] }));
 };
-exports.Root = Root;

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

@@ -1,11 +1,8 @@
-"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, }) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Scripts, ScrollRestoration } from "@remix-run/react";
+import { SessionStoragePolyfill } from "./session-storage-polyfill";
+export const createElementsTree = ({ sandbox, instance, Component, onChangeChildren, }) => {
     const children = createInstanceChildrenElements({
         Component,
         children: instance.children,
@@ -15,12 +12,11 @@ const createElementsTree = ({ sandbox, instance, Component, onChangeChildren, })
         Component,
         instance,
         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"),
+            _jsxs(Fragment, { children: [children, sandbox && _jsx(SessionStoragePolyfill, {}), _jsx(ScrollRestoration, {}), _jsx(Scripts, {})] }, "children"),
         ],
     });
     return body;
 };
-exports.createElementsTree = createElementsTree;
 const createInstanceChildrenElements = ({ children, Component, onChangeChildren, }) => {
     const elements = [];
     for (const child of children) {
@@ -50,5 +46,5 @@ const createInstanceElement = ({ Component, instance, children = [], onChangeChi
         key: instance.id,
         onChangeChildren,
     };
-    return (0, jsx_runtime_1.jsx)(Component, { ...props });
+    return _jsx(Component, { ...props });
 };

package/lib/tree/index.js

@@ -1,19 +1,3 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./create-elements-tree"), exports);
-__exportStar(require("./root"), exports);
-__exportStar(require("./wrapper-component"), exports);
+export * from "./create-elements-tree";
+export * from "./root";
+export * from "./wrapper-component";

package/lib/tree/root.js

@@ -1,17 +1,13 @@
-"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, }) => {
+import { useAllUserProps } from "../user-props/";
+import { createElementsTree } from "./create-elements-tree";
+import { WrapperComponent } from "./wrapper-component";
+export 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)({
+    useAllUserProps(data.props);
+    return createElementsTree({
         instance: data.tree.root,
-        Component: Component ?? wrapper_component_1.WrapperComponent,
+        Component: Component ?? WrapperComponent,
     });
 };
-exports.InstanceRoot = InstanceRoot;

package/lib/tree/session-storage-polyfill.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionStoragePolyfill = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "react/jsx-runtime";
 // This is a temporary work around for https://github.com/remix-run/remix/issues/3659
 // The code is based on this discussion https://bugs.chromium.org/p/chromium/issues/detail?id=357625
 const polyfill = function () {
@@ -35,5 +32,4 @@ const polyfill = function () {
         });
     }
 }.toString();
-const SessionStoragePolyfill = () => ((0, jsx_runtime_1.jsx)("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
-exports.SessionStoragePolyfill = SessionStoragePolyfill;
+export const SessionStoragePolyfill = () => (_jsx("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));

package/lib/tree/wrapper-component.js

@@ -1,38 +1,12 @@
-"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 __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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.idAttribute = exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const components = __importStar(require("../components"));
-const use_user_props_1 = require("../user-props/use-user-props");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import * as components from "../components";
+import { useUserProps } from "../user-props/use-user-props";
 const renderText = (text) => {
     const lines = text.split("\n");
-    return lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [line, index < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, index)));
+    return lines.map((line, index) => (_jsxs(Fragment, { children: [line, index < lines.length - 1 ? _jsx("br", {}) : null] }, index)));
 };
-const renderWrapperComponentChildren = (children) => {
+export const renderWrapperComponentChildren = (children) => {
     // Some elements like input can't have children
     // @todo needs to be made impossible to drag element into input
     if (children === undefined || children.length === 0)
@@ -41,13 +15,11 @@ const renderWrapperComponentChildren = (children) => {
         return typeof child === "string" ? renderText(child) : child;
     });
 };
-exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
-const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
+export const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
 children, ...rest }) => {
     const { Component } = components[instance.component];
-    const userProps = (0, use_user_props_1.useUserProps)(instance.id);
-    const props = { ...userProps, ...rest, [exports.idAttribute]: instance.id };
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, children: (0, exports.renderWrapperComponentChildren)(children) }));
+    const userProps = useUserProps(instance.id);
+    const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+    return (_jsx(Component, { ...props, children: renderWrapperComponentChildren(children) }));
 };
-exports.WrapperComponent = WrapperComponent;
-exports.idAttribute = "data-ws-id";
+export const idAttribute = "data-ws-id";