@webstudio-is/react-sdk 0.7.1 → 0.7.3

package/lib/components/text-block.stories.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+/// <reference types="react" />
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;
-export declare const TextBlock: ComponentStory<React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>>;
+export declare const TextBlock: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=text-block.stories.d.ts.map

package/lib/components/text-block.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-block.stories.d.ts","sourceRoot":"","sources":["../../src/components/text-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAItE,wBAI8C;AAM9C,eAAO,MAAM,SAAS,gOAAoB,CAAC"}
+{"version":3,"file":"text-block.stories.d.ts","sourceRoot":"","sources":["../../src/components/text-block.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAGtE,wBAG8C;AAM9C,eAAO,MAAM,SAAS,kRAAoB,CAAC"}

package/lib/components/text-block.stories.js

@@ -1,19 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextBlock = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const text_block_1 = require("./text-block");
-const text_block_props_json_1 = __importDefault(require("./text-block.props.json"));
-exports.default = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextBlock as TextBlockPrimitive } from "./text-block";
+export default {
     title: "Components/TextBlock",
-    component: text_block_1.TextBlock,
-    argTypes: text_block_props_json_1.default,
+    component: TextBlockPrimitive,
 };
-const Template = (args) => ((0, jsx_runtime_1.jsx)(text_block_1.TextBlock, { ...args }));
-exports.TextBlock = Template.bind({});
-exports.TextBlock.args = {
+const Template = (args) => (_jsx(TextBlockPrimitive, { ...args }));
+export const TextBlock = Template.bind({});
+TextBlock.args = {
     children: "text",
 };

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

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const text_block_1 = require("./text-block");
+import { TextIcon } from "@webstudio-is/icons";
+import { TextBlock } from "./text-block";
 const defaultStyle = {
     minHeight: {
         type: "unit",
@@ -10,8 +8,8 @@ const defaultStyle = {
     },
 };
 const meta = {
-    Icon: icons_1.TextIcon,
-    Component: text_block_1.TextBlock,
+    Icon: TextIcon,
+    Component: TextBlock,
     defaultStyle,
     canAcceptChildren: false,
     isContentEditable: true,
@@ -20,4 +18,4 @@ const meta = {
     label: "Text Block",
     children: ["Block of text you can edit"],
 };
-exports.default = meta;
+export default meta;

package/lib/css/breakpoints.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialBreakpoints = void 0;
-exports.initialBreakpoints = [
+export const initialBreakpoints = [
     { label: "Mobile", minWidth: 360 },
     { label: "Tablet", minWidth: 768 },
     { label: "Laptop", minWidth: 1024 },

package/lib/css/categories.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.propertyCategoryMap = exports.categories = void 0;
 const layout = [
     "display",
     // Flex
@@ -182,7 +179,7 @@ const other = [
     "userSelect",
     "pointerEvents",
 ];
-exports.categories = {
+export const categories = {
     layout: {
         label: "Layout",
         properties: layout,
@@ -219,11 +216,11 @@ exports.categories = {
     },
     other: { label: "Other", properties: other, moreFrom: "" },
 };
-exports.propertyCategoryMap = {};
+export const propertyCategoryMap = {};
 let category;
-for (category in exports.categories) {
-    for (const property of exports.categories[category].properties) {
+for (category in categories) {
+    for (const property of categories[category].properties) {
         // We are widening the type here
-        exports.propertyCategoryMap[property] = category;
+        propertyCategoryMap[property] = category;
     }
 }

package/lib/css/get-browser-style.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrowserStyle = void 0;
-const detect_font_1 = require("detect-font");
-const css_data_1 = require("@webstudio-is/css-data");
-const unitRegex = new RegExp(`${css_data_1.units.join("|")}`);
+import { detectFont } from "detect-font";
+import { properties, units } from "@webstudio-is/css-data";
+const unitRegex = new RegExp(`${units.join("|")}`);
 // @todo use a parser
 const parseValue = (property, value) => {
     const number = parseFloat(value);
@@ -17,7 +14,7 @@ const parseValue = (property, value) => {
         };
     }
     if (number === 0) {
-        return css_data_1.properties[property].initial;
+        return properties[property].initial;
     }
     return {
         type: "unit",
@@ -25,13 +22,13 @@ const parseValue = (property, value) => {
         value: number,
     };
 };
-const getBrowserStyle = (element) => {
+export const getBrowserStyle = (element) => {
     const browserStyle = {};
     if (element === undefined)
         return browserStyle;
     let knownProperty;
     const computedStyle = getComputedStyle(element);
-    for (knownProperty in css_data_1.properties) {
+    for (knownProperty in properties) {
         if (knownProperty in computedStyle === false)
             continue;
         // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
@@ -41,8 +38,7 @@ const getBrowserStyle = (element) => {
     // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
     browserStyle.fontFamily = {
         type: "fontFamily",
-        value: [(0, detect_font_1.detectFont)(element)],
+        value: [detectFont(element)],
     };
     return browserStyle;
 };
-exports.getBrowserStyle = getBrowserStyle;

package/lib/css/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("./get-browser-style"), exports);
-__exportStar(require("./categories"), exports);
-__exportStar(require("./breakpoints"), exports);
+export * from "./get-browser-style";
+export * from "./categories";
+export * from "./breakpoints";

package/lib/db/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("./types"), exports);
-__exportStar(require("./instance"), exports);
+export * from "./types";
+export * from "./instance";

package/lib/db/instance.js

@@ -1,21 +1,17 @@
-"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");
-const toBaseInstance = (instance) => {
+import { CssRule } from "@webstudio-is/css-data";
+import { z } from "zod";
+export const toBaseInstance = (instance) => {
     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),
+export const Instance = z.lazy(() => z.object({
+    id: z.string(),
+    component: z.string(),
+    children: z.array(z.union([Instance, z.string()])),
+    cssRules: z.array(CssRule),
 })
 // @todo can't figure out how to make component to be z.enum(Object.keys(components))
 );

package/lib/db/types.d.ts

@@ -5,6 +5,12 @@ export declare type Tree = {
     id: string;
     root: Instance;
 };
+export declare type Props = {
+    props: string;
+    id: string;
+    instanceId: string;
+    treeId: string;
+};
 export declare type InstanceProps = Omit<DbInstanceProps, "props"> & {
     props: Array<UserProp>;
 };

package/lib/db/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/db/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,oBAAY,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,oBAAY,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IAC3D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/db/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,oBAAY,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,oBAAY,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IAC3D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CACxB,CAAC"}

package/lib/db/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./css";
 export * from "./tree";
 export * as components from "./components";
-export * as componentsMeta from "./components/meta";
+export * from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,cAAc,MAAM,mBAAmB,CAAC;AACpD,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -1,37 +1,8 @@
-"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 __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.componentsMeta = exports.components = void 0;
-__exportStar(require("./css"), exports);
-__exportStar(require("./tree"), exports);
-exports.components = __importStar(require("./components"));
-exports.componentsMeta = __importStar(require("./components/meta"));
-__exportStar(require("./user-props"), exports);
-__exportStar(require("./pubsub"), exports);
-__exportStar(require("./db"), exports);
-__exportStar(require("./remix"), exports);
+export * from "./css";
+export * from "./tree";
+export * as components from "./components";
+export * from "./components/meta";
+export * from "./user-props";
+export * from "./pubsub";
+export * from "./db";
+export * from "./remix";

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 }));