@webstudio-is/react-sdk 0.5.0 → 0.6.1

package/lib/css/units.js

@@ -31,5 +31,5 @@ exports.units = [
     "vmin",
     "vw",
     "x",
-    "%",
+    "%"
 ];

package/lib/db/instance.d.ts

@@ -1,11 +1,14 @@
 import { z } from "zod";
 import * as components from "../components";
 import { type CssRule } from "../css";
-export declare type Instance = {
+export declare type BaseInstance = {
     id: string;
     component: keyof typeof components;
-    children: Array<Instance | string>;
     cssRules: Array<CssRule>;
 };
+export declare type Instance = BaseInstance & {
+    children: Array<Instance | string>;
+};
+export declare const toBaseInstance: (instance: Instance) => BaseInstance;
 export declare const InstanceSchema: z.ZodType<Instance, z.ZodTypeDef, Instance>;
 //# sourceMappingURL=instance.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAErD,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,cAAc,6CASH,CAAC"}
+{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/db/instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,UAAU,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,QAAQ,CAAC;AAIrD,oBAAY,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,OAAO,UAAU,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,QAAQ,GAAG,YAAY,GAAG;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,aAAc,QAAQ,KAAG,YAMnD,CAAC;AAEF,eAAO,MAAM,cAAc,6CASH,CAAC"}

package/lib/db/instance.js

@@ -1,8 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InstanceSchema = void 0;
+exports.InstanceSchema = exports.toBaseInstance = void 0;
 const zod_1 = require("zod");
 const css_1 = require("../css");
+const toBaseInstance = (instance) => {
+    return {
+        id: instance.id,
+        component: instance.component,
+        cssRules: instance.cssRules,
+    };
+};
+exports.toBaseInstance = toBaseInstance;
 exports.InstanceSchema = zod_1.z.lazy(() => zod_1.z.object({
     id: zod_1.z.string(),
     component: zod_1.z.string(),

package/lib/db/types.d.ts

@@ -1,4 +1,4 @@
-import type { InstanceProps as DbInstanceProps, Project, User, Breakpoints, Asset } from "@prisma/client";
+import type { InstanceProps as DbInstanceProps } from "@webstudio-is/prisma-client";
 import type { UserProp } from "../user-props";
 import type { Instance } from "./instance";
 export declare type Tree = {
@@ -8,5 +8,4 @@ export declare type Tree = {
 export declare type InstanceProps = Omit<DbInstanceProps, "props"> & {
     props: Array<UserProp>;
 };
-export type { DbInstanceProps, Project, User, Breakpoints, Asset };
 //# sourceMappingURL=types.d.ts.map

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,EACV,aAAa,IAAI,eAAe,EAChC,OAAO,EACP,IAAI,EACJ,WAAW,EACX,KAAK,EACN,MAAM,gBAAgB,CAAC;AACxB,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;AAEF,YAAY,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,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,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IAC3D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CACxB,CAAC"}

package/lib/index.d.ts

@@ -6,4 +6,5 @@ export * as componentsMeta from "./components/meta";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
+export * from "./canvas";
 //# sourceMappingURL=index.d.ts.map

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,cAAc,YAAY,CAAC;AAC3B,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,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,UAAU,CAAC"}

package/lib/index.js

@@ -35,3 +35,4 @@ exports.componentsMeta = __importStar(require("./components/meta"));
 __exportStar(require("./user-props"), exports);
 __exportStar(require("./pubsub"), exports);
 __exportStar(require("./db"), exports);
+__exportStar(require("./canvas"), exports);

package/lib/pubsub/create.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const createPubsub: <PublishMap>() => {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
+    publish<Type extends keyof PublishMap>(action: undefined extends PublishMap[Type] ? {
+        type: Type;
+        payload?: PublishMap[Type] | undefined;
+    } : {
+        type: Type;
+        payload: PublishMap[Type];
+    }): void;
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
+    usePublish(): readonly [<Type_1 extends keyof PublishMap>(action: undefined extends PublishMap[Type_1] ? {
+        type: Type_1;
+        payload?: PublishMap[Type_1] | undefined;
+    } : {
+        type: Type_1;
+        payload: PublishMap[Type_1];
+    }) => void, import("react").MutableRefObject<HTMLIFrameElement | null>];
+    /**
+     * To subscribe a message event on the current window.
+     */
+    useSubscribe<Type_2 extends keyof PublishMap>(type: Type_2, onAction: (payload: PublishMap[Type_2]) => void): void;
+};
+//# sourceMappingURL=create.d.ts.map

package/lib/pubsub/create.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../src/pubsub/create.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;IA0BrB;;OAEG;;;;;;;;IAMH;;OAEG;;;;;;;;IAeH;;OAEG;2GAGwC,IAAI;CAUlD,CAAC"}

package/lib/pubsub/create.js

@@ -0,0 +1,58 @@
+"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 = () => {
+    // `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];
+        },
+        /**
+         * 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]);
+        },
+    };
+};
+exports.createPubsub = createPubsub;

package/lib/pubsub/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./publish";
-export * from "./subscribe";
+export * from "./create";
 //# sourceMappingURL=index.d.ts.map

package/lib/pubsub/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pubsub/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/lib/pubsub/index.js

@@ -14,5 +14,4 @@ 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("./publish"), exports);
-__exportStar(require("./subscribe"), exports);
+__exportStar(require("./create"), exports);

package/lib/stitches/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/stitches/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAET,KAAK,GAAG,EACR,GAAG,IAAI,SAAS,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAOzC,eAAO,MAAM,eAAe,WAK3B,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,OAAO,SAExB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;AAEpB,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,MAAM,UAAU,CAAC,SAO5D,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/stitches/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,KAAK,GAAG,EACR,GAAG,IAAI,SAAS,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAQzC,eAAO,MAAM,eAAe,WAK3B,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,OAAO,SAExB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,OAAO,EAAE,KAAK,GAAG,EAAE,CAAC;AAEpB,eAAO,MAAM,UAAU,QAAO,MAE7B,CAAC;AAEF,eAAO,MAAM,cAAc,gBAAiB,MAAM,UAAU,CAAC,SAO5D,CAAC"}

package/lib/stitches/css.js

@@ -5,6 +5,7 @@ const core_1 = require("@stitches/core");
 Object.defineProperty(exports, "globalCss", { enumerable: true, get: function () { return core_1.globalCss; } });
 let media = {};
 // @todo needs fixing
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 let stitches;
 const getCachedConfig = () => {
     if (stitches === undefined) {

package/lib/stitches/to-css.js

@@ -18,11 +18,10 @@ const toCss = (cssRules, breakpoints) => {
         breakpointsMap[breakpoint.id] = breakpoint.minWidth;
     }
     const sortedCssRules = [...cssRules].sort((ruleA, ruleB) => {
-        var _a, _b;
         // If a rule references a breakpoint that was not found in breakpoints,
         // we must have removed the breakpoint and now we fall back to 0.
-        const maxWidthA = (_a = breakpointsMap[ruleA.breakpoint]) !== null && _a !== void 0 ? _a : 0;
-        const maxWidthB = (_b = breakpointsMap[ruleB.breakpoint]) !== null && _b !== void 0 ? _b : 0;
+        const maxWidthA = breakpointsMap[ruleA.breakpoint] ?? 0;
+        const maxWidthB = breakpointsMap[ruleB.breakpoint] ?? 0;
         return maxWidthA - maxWidthB;
     });
     for (const cssRule of sortedCssRules) {

package/lib/tree/create-elements-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-elements-tree.d.ts","sourceRoot":"","sources":["../../src/tree/create-elements-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,oBAAY,eAAe,GAAG,KAAK,CAC/B,MAAM,GAEN;IAAE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAEpC;IACE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjC,cAAc,EAAE,IAAI,CAAC;CACtB,CACJ,CAAC;AAEF,oBAAY,gBAAgB,GAAG,CAAC,MAAM,EAAE;IACtC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,eAAe,CAAC;CAC1B,KAAK,IAAI,CAAC;AAEX,eAAO,MAAM,kBAAkB;cAMnB,QAAQ;iBACL,MAAM,UAAU,CAAC;uBACX,qBAAqB,KAAK,WAAW;;MAEtD,WAwBH,CAAC"}
+{"version":3,"file":"create-elements-tree.d.ts","sourceRoot":"","sources":["../../src/tree/create-elements-tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,oBAAY,eAAe,GAAG,KAAK,CAC/B,MAAM,GAEN;IAAE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAEpC;IACE,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;IACjC,cAAc,EAAE,IAAI,CAAC;CACtB,CACJ,CAAC;AAEF,oBAAY,gBAAgB,GAAG,CAAC,MAAM,EAAE;IACtC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,eAAe,CAAC;CAC1B,KAAK,IAAI,CAAC;AAEX,eAAO,MAAM,kBAAkB;cAMnB,QAAQ;iBACL,MAAM,UAAU,CAAC;uBACX,qBAAqB,KAAK,WAAW;;iBAsBzD,CAAC"}

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

@@ -2,20 +2,52 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createElementsTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const stitches_1 = require("../stitches");
+const react_2 = require("@remix-run/react");
 const createElementsTree = ({ instance, breakpoints, Component, onChangeChildren, }) => {
-    const children = [];
-    for (const child of instance.children) {
-        const element = typeof child === "string"
-            ? child
-            : (0, exports.createElementsTree)({
-                instance: child,
-                breakpoints,
-                Component,
-                onChangeChildren,
-            });
-        children.push(element);
+    const children = createInstanceChildrenElements({
+        Component,
+        children: instance.children,
+        breakpoints,
+        onChangeChildren,
+    });
+    const body = createInstanceElement({
+        Component,
+        instance,
+        children: [
+            (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {}), (0, jsx_runtime_1.jsx)(react_2.Scripts, {})] }, "children"),
+        ],
+        breakpoints,
+    });
+    return body;
+};
+exports.createElementsTree = createElementsTree;
+const createInstanceChildrenElements = ({ children, breakpoints, Component, onChangeChildren, }) => {
+    const elements = [];
+    for (const child of children) {
+        if (typeof child === "string") {
+            elements.push(child);
+            continue;
+        }
+        const children = createInstanceChildrenElements({
+            children: child.children,
+            breakpoints,
+            Component,
+            onChangeChildren,
+        });
+        const element = createInstanceElement({
+            instance: child,
+            breakpoints,
+            Component,
+            onChangeChildren,
+            children,
+        });
+        elements.push(element);
     }
+    return elements;
+};
+const createInstanceElement = ({ Component, instance, children = [], breakpoints, onChangeChildren, }) => {
     const props = {
         instance,
         children,
@@ -25,4 +57,3 @@ const createElementsTree = ({ instance, breakpoints, Component, onChangeChildren
     };
     return (0, jsx_runtime_1.jsx)(Component, { ...props });
 };
-exports.createElementsTree = createElementsTree;

package/lib/tree/root.d.ts

@@ -11,6 +11,6 @@ declare type RootProps = {
     data: Data;
     Component?: (props: WrapperComponentProps) => JSX.Element;
 };
-export declare const Root: ({ data, Component }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, Component, }: RootProps) => JSX.Element | null;
 export {};
 //# sourceMappingURL=root.d.ts.map

package/lib/tree/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,cAIvB,CAAC;AAEH,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,IAAI,wBAAyB,SAAS,KAAG,WAAW,GAAG,IAYnE,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/tree/root.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,cAIvB,CAAC;AAEH,aAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,YAAY,yBAGtB,SAAS,KAAG,WAAW,GAAG,IAY5B,CAAC"}

package/lib/tree/root.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Root = exports.globalStyles = void 0;
+exports.InstanceRoot = exports.globalStyles = void 0;
 const user_props_1 = require("../user-props/");
 const stitches_1 = require("../stitches");
 const create_elements_tree_1 = require("./create-elements-tree");
 const wrapper_component_1 = require("./wrapper-component");
 exports.globalStyles = (0, stitches_1.globalCss)({
-    body: {
-        margin: 0,
+    html: {
+        height: "100%",
     },
 });
-const Root = ({ data, Component }) => {
+const InstanceRoot = ({ data, Component, }) => {
     if (data.tree === null) {
         throw new Error("Tree is null");
     }
@@ -20,7 +20,7 @@ const Root = ({ data, Component }) => {
     return (0, create_elements_tree_1.createElementsTree)({
         instance: data.tree.root,
         breakpoints: data.breakpoints,
-        Component: Component !== null && Component !== void 0 ? Component : wrapper_component_1.WrapperComponent,
+        Component: Component ?? wrapper_component_1.WrapperComponent,
     });
 };
-exports.Root = Root;
+exports.InstanceRoot = InstanceRoot;

package/lib/tree/wrapper-component.js

@@ -43,10 +43,10 @@ const renderWrapperComponentChildren = (children) => {
     });
 };
 exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
-const WrapperComponent = ({ instance, css, onChangeChildren, // prevent it from passing to primitives
+const WrapperComponent = ({ instance, css, onChangeChildren, // prevent it from passing to sdk component
 children, ...rest }) => {
     const className = (0, react_1.useMemo)(() => (0, stitches_1.css)(css)(), [css]);
-    const Component = components[instance.component];
+    const { Component } = components[instance.component];
     const userProps = (0, use_user_props_1.useUserProps)(instance.id);
     return ((0, jsx_runtime_1.jsx)(Component, { ...userProps, ...rest, id: instance.id, className: className, children: (0, exports.renderWrapperComponentChildren)(children) }));
 };

package/lib/user-props/all-user-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"all-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/all-user-props.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,oBAAY,YAAY,GAAG;IAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa,CAAA;CAAE,CAAC;AAEnE,eAAO,MAAM,qBAAqB,yDAAyC,CAAC;AAE5E,eAAO,MAAM,eAAe,sBAAuB,MAAM,aAAa,CAAC,sEAWtE,CAAC"}
+{"version":3,"file":"all-user-props.d.ts","sourceRoot":"","sources":["../../src/user-props/all-user-props.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,oBAAY,YAAY,GAAG;IAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa,CAAA;CAAE,CAAC;AAEnE,eAAO,MAAM,qBAAqB,yDAAyC,CAAC;AAE5E,eAAO,MAAM,eAAe,sBAAuB,MAAM,aAAa,CAAC,sEAatE,CAAC"}

package/lib/user-props/all-user-props.js

@@ -5,16 +5,17 @@ const react_1 = require("react");
 const react_nano_state_1 = require("react-nano-state");
 exports.allUserPropsContainer = (0, react_nano_state_1.createValueContainer)({});
 const useAllUserProps = (initialUserProps) => {
-    (0, react_1.useMemo)(() => {
-        if (initialUserProps === undefined)
-            return;
+    // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
+    const ref = (0, react_1.useRef)(false);
+    if (ref.current === false && initialUserProps !== undefined) {
         const propsMap = {};
         for (const props of initialUserProps) {
             propsMap[props.instanceId] = props;
         }
         //We don't need to trigger rerender when setting the initial value
         exports.allUserPropsContainer.value = propsMap;
-    }, []);
+        ref.current = true;
+    }
     return (0, react_nano_state_1.useValue)(exports.allUserPropsContainer);
 };
 exports.useAllUserProps = useAllUserProps;

package/lib/user-props/use-user-props.js

@@ -8,7 +8,7 @@ const all_user_props_1 = require("./all-user-props");
  * up to date with props panel.
  */
 const useUserProps = (instanceId) => {
-    const [allUserProps, setAllUserProps] = (0, all_user_props_1.useAllUserProps)();
+    const [allUserProps] = (0, all_user_props_1.useAllUserProps)();
     const propsData = allUserProps[instanceId];
     const initialUserProps = (0, react_1.useMemo)(() => {
         if (propsData === undefined)

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "scripts": {
     "dev": "tsup src/index.ts --format esm,cjs --watch --out-dir=lib",
     "build": "yarn build:mdn-data && yarn build:args && yarn build:lib",
-    "build:mdn-data": "node --experimental-loader esbuild-node-loader ./bin/mdn-data.ts ./src/css",
-    "build:args": "node --experimental-loader esbuild-node-loader ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx'",
-    "build:prisma": "prisma format && prisma generate",
+    "build:mdn-data": "tsx ./bin/mdn-data.ts ./src/css",
+    "build:args": "tsx ./bin/generate-arg-types.ts './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx'",
     "typecheck": "tsc --noEmit",
     "build:lib": "rm -fr lib && tsc",
-    "postinstall": "prisma generate",
     "test": "jest",
-    "checks": "yarn typecheck && yarn test",
+    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
+    "checks": "yarn typecheck && yarn lint && yarn test",
     "prepublishOnly": "yarn checks && yarn build:lib",
     "storybook:run": "start-storybook -p 6006",
     "storybook:build": "build-storybook"
   },
   "devDependencies": {
     "@babel/core": "^7.17.12",
+    "@esbuild-kit/esm-loader": "^2.4.2",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
     "@storybook/addon-actions": "^6.5.6",
@@ -34,19 +34,20 @@
     "@types/css-tree": "^1.0.7",
     "@types/fs-extra": "^9.0.13",
     "@types/node": "^17.0.21",
+    "@webstudio-is/jest-config": "*",
+    "@webstudio-is/prisma-client": "*",
     "babel-loader": "^8.2.5",
     "camelcase": "^6.3.0",
     "css-tree": "^2.1.0",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
-    "esbuild-node-loader": "^0.8.0",
-    "@webstudio-is/jest-config": "*",
     "mdn-data": "2.0.23",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "tsup": "^6.1.3",
-    "typescript": "^4.6.2"
+    "tsx": "^3.9.0",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
@@ -56,13 +57,12 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@prisma/client": "^3.10.0",
     "@stitches/core": "^1.2.7",
+    "@webstudio-is/icons": "*",
+    "@webstudio-is/jest-config": "*",
     "immer": "^9.0.12",
     "mitt": "^3.0.0",
-    "prisma": "^3.10.0",
     "react-nano-state": "^0.4.0",
-    "@webstudio-is/jest-config": "*",
     "zod": "^3.17.3"
   },
   "main": "lib/index.js",
@@ -70,8 +70,7 @@
   "files": [
     "lib/*",
     "README.md",
-    "!*.test.*",
-    "prisma/*"
+    "!*.test.*"
   ],
   "license": "MIT",
   "private": false

package/lib/prisma.server.d.ts

@@ -1,3 +0,0 @@
-export { PrismaClient, Prisma } from "@prisma/client";
-export { PrismaClientKnownRequestError } from "@prisma/client/runtime";
-//# sourceMappingURL=prisma.server.d.ts.map

package/lib/prisma.server.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prisma.server.d.ts","sourceRoot":"","sources":["../src/prisma.server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/prisma.server.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PrismaClientKnownRequestError = exports.Prisma = exports.PrismaClient = void 0;
-var client_1 = require("@prisma/client");
-Object.defineProperty(exports, "PrismaClient", { enumerable: true, get: function () { return client_1.PrismaClient; } });
-Object.defineProperty(exports, "Prisma", { enumerable: true, get: function () { return client_1.Prisma; } });
-var runtime_1 = require("@prisma/client/runtime");
-Object.defineProperty(exports, "PrismaClientKnownRequestError", { enumerable: true, get: function () { return runtime_1.PrismaClientKnownRequestError; } });

package/lib/pubsub/publish.d.ts

@@ -1,17 +0,0 @@
-import { MutableRefObject } from "react";
-declare type Action<Type, Payload> = {
-    type: Type;
-    payload?: Payload;
-};
-export declare type Publish = <Type, Payload = undefined>(action: Action<Type, Payload>) => void;
-declare type UsePublish = [Publish, MutableRefObject<HTMLIFrameElement | null>];
-/**
- * To publish a postMessage event on the iframe and parent window from the parent window.
- */
-export declare const usePublish: () => UsePublish;
-/**
- * To publish a postMessage event on the current window and parent window from the iframe.
- */
-export declare const publish: <Type extends string, Payload = undefined>(action: Action<Type, Payload>) => void;
-export {};
-//# sourceMappingURL=publish.d.ts.map

package/lib/pubsub/publish.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"publish.d.ts","sourceRoot":"","sources":["../../src/pubsub/publish.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9D,aAAK,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,oBAAY,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAC9C,MAAM,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,KAC1B,IAAI,CAAC;AAEV,aAAK,UAAU,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC;AAExE;;GAEG;AACH,eAAO,MAAM,UAAU,kBAYtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,mFAKnB,CAAC"}

package/lib/pubsub/publish.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.publish = exports.usePublish = void 0;
-const react_1 = require("react");
-/**
- * To publish a postMessage event on the iframe and parent window from the parent window.
- */
-const usePublish = () => {
-    const iframeRef = (0, react_1.useRef)(null);
-    const publishCallback = (0, react_1.useCallback)((action) => {
-        const element = iframeRef.current;
-        if ((element === null || element === void 0 ? void 0 : element.contentWindow) == null)
-            return;
-        element.contentWindow.postMessage(action, "*");
-        window.postMessage(action, "*");
-    }, [iframeRef]);
-    return [publishCallback, iframeRef];
-};
-exports.usePublish = usePublish;
-/**
- * To publish a postMessage event on the current window and parent window from the iframe.
- */
-const publish = (action) => {
-    window.parent.postMessage(action, "*");
-    window.postMessage(action, "*");
-};
-exports.publish = publish;

package/lib/pubsub/subscribe.d.ts

@@ -1,8 +0,0 @@
-declare type Events = Record<string, any>;
-export declare const emitter: import("mitt").Emitter<Events>;
-/**
- * To subscribe a message event on the current window.
- */
-export declare const useSubscribe: <Type extends string, Payload = undefined>(type: Type, onAction: (payload: Payload) => void) => void;
-export {};
-//# sourceMappingURL=subscribe.d.ts.map

package/lib/pubsub/subscribe.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"subscribe.d.ts","sourceRoot":"","sources":["../../src/pubsub/subscribe.ts"],"names":[],"mappings":"AAOA,aAAK,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAElC,eAAO,MAAM,OAAO,gCAAiB,CAAC;AAgBtC;;GAEG;AACH,eAAO,MAAM,YAAY,yFAES,IAAI,SAQrC,CAAC"}

package/lib/pubsub/subscribe.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSubscribe = exports.emitter = void 0;
-const mitt_1 = __importDefault(require("mitt"));
-const react_1 = require("react");
-exports.emitter = (0, mitt_1.default)();
-if (typeof window === "object") {
-    window.addEventListener("message", (event) => {
-        var _a;
-        // @todo this has no type safety built in, could be anything from any source.
-        // we could potentially maintain a list of valid event types, but see prior contra points.
-        if (typeof ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === "string") {
-            exports.emitter.emit(event.data.type, event.data.payload);
-        }
-    }, false);
-}
-/**
- * To subscribe a message event on the current window.
- */
-const useSubscribe = (type, onAction) => {
-    (0, react_1.useEffect)(() => {
-        exports.emitter.on(type, onAction);
-        return () => {
-            exports.emitter.off(type, onAction);
-        };
-    }, [type, onAction]);
-};
-exports.useSubscribe = useSubscribe;