@webstudio-is/react-sdk 0.8.0 → 0.10.0

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

@@ -1,44 +1,44 @@
 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);
-    const parsedUnit = unitRegex.exec(value);
-    if (value === "rgba(0, 0, 0, 0)")
-        value = "transparent";
-    if (isNaN(number) || parsedUnit === null) {
-        return {
-            type: "keyword",
-            value,
-        };
-    }
-    if (number === 0) {
-        return properties[property].initial;
-    }
+  const number = parseFloat(value);
+  const parsedUnit = unitRegex.exec(value);
+  if (value === "rgba(0, 0, 0, 0)")
+    value = "transparent";
+  if (isNaN(number) || parsedUnit === null) {
     return {
-        type: "unit",
-        unit: parsedUnit[0],
-        value: number,
+      type: "keyword",
+      value
     };
+  }
+  if (number === 0 && property in properties) {
+    return properties[property].initial;
+  }
+  return {
+    type: "unit",
+    unit: parsedUnit[0],
+    value: number
+  };
 };
-export const getBrowserStyle = (element) => {
-    const browserStyle = {};
-    if (element === undefined)
-        return browserStyle;
-    let knownProperty;
-    const computedStyle = getComputedStyle(element);
-    for (knownProperty in properties) {
-        if (knownProperty in computedStyle === false)
-            continue;
-        // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
-        const computedValue = computedStyle[knownProperty];
-        browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-    }
-    // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
-    browserStyle.fontFamily = {
-        type: "fontFamily",
-        value: [detectFont(element)],
-    };
+const getBrowserStyle = (element) => {
+  const browserStyle = {};
+  if (element === void 0)
     return browserStyle;
+  let knownProperty;
+  const computedStyle = getComputedStyle(element);
+  for (knownProperty in properties) {
+    if (knownProperty in computedStyle === false)
+      continue;
+    const computedValue = computedStyle[knownProperty];
+    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
+  }
+  browserStyle.fontFamily = {
+    type: "fontFamily",
+    value: [detectFont(element)]
+  };
+  return browserStyle;
+};
+export {
+  getBrowserStyle
 };

package/lib/db/instance.js

@@ -1,17 +1,21 @@
 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,
-    };
+const toBaseInstance = (instance) => {
+  return {
+    id: instance.id,
+    component: instance.component,
+    cssRules: instance.cssRules
+  };
 };
-export const Instance = z.lazy(() => z.object({
+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))
+    cssRules: z.array(CssRule)
+  })
 );
+export {
+  Instance,
+  toBaseInstance
+};

package/lib/db/types.js

@@ -1 +0,0 @@
-export {};

package/lib/index.js

@@ -1,8 +1,15 @@
 export * from "./css";
 export * from "./tree";
-export * as components from "./components";
-export * from "./components/meta";
+export * from "./components";
 export * from "./user-props";
 export * from "./pubsub";
 export * from "./db";
-export * from "./remix";
+export * from "./app";
+import {
+  customComponents,
+  customComponentsMeta
+} from "./app/custom-components";
+export {
+  customComponents,
+  customComponentsMeta
+};

package/lib/pubsub/create.js

@@ -1,59 +1,55 @@
 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 = mitt();
-    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 = useRef(null);
-            const publishCallback = 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) {
-            useEffect(() => {
-                emitter.on(type, onAction);
-                return () => {
-                    emitter.off(type, onAction);
-                };
-            }, [type, onAction]);
+const createPubsub = () => {
+  const emitter = mitt();
+  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 = useRef(null);
+      const publishCallback = useCallback(
+        (action) => {
+          const element = iframeRef.current;
+          if (element?.contentWindow == null)
+            return;
+          element.contentWindow.postMessage(action, "*");
+          window.postMessage(action, "*");
         },
-        useSubscribeAll(onAction) {
-            useEffect(() => {
-                emitter.on("*", onAction);
-                return () => {
-                    emitter.off("*", onAction);
-                };
-            }, [onAction]);
-        },
-    };
+        [iframeRef]
+      );
+      return [publishCallback, iframeRef];
+    },
+    useSubscribe(type, onAction) {
+      useEffect(() => {
+        emitter.on(type, onAction);
+        return () => {
+          emitter.off(type, onAction);
+        };
+      }, [type, onAction]);
+    },
+    useSubscribeAll(onAction) {
+      useEffect(() => {
+        emitter.on("*", onAction);
+        return () => {
+          emitter.off("*", onAction);
+        };
+      }, [onAction]);
+    }
+  };
+};
+export {
+  createPubsub
 };

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

@@ -1,50 +1,76 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, 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,
-        onChangeChildren,
-    });
-    const body = createInstanceElement({
-        Component,
-        instance,
+const createElementsTree = ({
+  sandbox,
+  instance,
+  Component,
+  onChangeChildren
+}) => {
+  const children = createInstanceChildrenElements({
+    Component,
+    children: instance.children,
+    onChangeChildren
+  });
+  const body = createInstanceElement({
+    Component,
+    instance,
+    children: [
+      /* @__PURE__ */ jsxs(Fragment, {
         children: [
-            _jsxs(Fragment, { children: [children, sandbox && _jsx(SessionStoragePolyfill, {}), _jsx(ScrollRestoration, {}), _jsx(Scripts, {})] }, "children"),
-        ],
-    });
-    return body;
+          children,
+          sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
+          /* @__PURE__ */ jsx(ScrollRestoration, {}),
+          /* @__PURE__ */ jsx(Scripts, {})
+        ]
+      }, "children")
+    ]
+  });
+  return body;
 };
-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 /* @__PURE__ */ jsx(Component, {
+    ...props
+  });
 };
-const createInstanceElement = ({ Component, instance, children = [], onChangeChildren, }) => {
-    const props = {
-        instance,
-        children,
-        key: instance.id,
-        onChangeChildren,
-    };
-    return _jsx(Component, { ...props });
+export {
+  createElementsTree
 };

package/lib/tree/root.js

@@ -1,13 +1,25 @@
 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");
-    }
-    useAllUserProps(data.props);
-    return createElementsTree({
-        instance: data.tree.root,
-        Component: Component ?? WrapperComponent,
-    });
+import { registerComponents } from "../components";
+import { customComponents as defaultCustomComponents } from "../app/custom-components";
+import { setParams } from "../app/params";
+const InstanceRoot = ({
+  data,
+  Component,
+  customComponents = defaultCustomComponents
+}) => {
+  if (data.tree === null) {
+    throw new Error("Tree is null");
+  }
+  useAllUserProps(data.props);
+  setParams(data.params ?? null);
+  registerComponents(customComponents);
+  return createElementsTree({
+    instance: data.tree.root,
+    Component: Component ?? WrapperComponent
+  });
+};
+export {
+  InstanceRoot
 };

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

@@ -1,35 +1,42 @@
-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 () {
-    try {
-        const key = "__session_storage_availability_test__";
-        sessionStorage.setItem(key, "test"); // test
-        sessionStorage.removeItem(key); // cleanup
-    }
-    catch (error) {
-        alert('It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647');
-        const data = new Map();
-        Object.defineProperty(window, "sessionStorage", {
-            value: {
-                setItem: (key, val) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`);
-                    data.set(key, String(val));
-                },
-                getItem: (key) => {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`);
-                    return data.get(key);
-                },
-                removeItem: (key) => {
-                    data.delete(key);
-                },
-                clear: () => {
-                    data.clear();
-                },
-            },
-        });
-    }
+import { jsx } from "react/jsx-runtime";
+const polyfill = function() {
+  try {
+    const key = "__session_storage_availability_test__";
+    sessionStorage.setItem(key, "test");
+    sessionStorage.removeItem(key);
+  } catch (error) {
+    alert(
+      'It looks like you have disabled cookies in your browser. Webstudio designer may not work properly.\n\nTo enable cookies, go to "Setting" > "Privacy and security" > "Cookies and other site data", and make sure neither "Block all cookies" nor "Block third-party cookies" are selected.\n\nRead more at https://support.google.com/chrome/answer/95647'
+    );
+    const data = /* @__PURE__ */ new Map();
+    Object.defineProperty(window, "sessionStorage", {
+      value: {
+        setItem: (key, val) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${error.message}". A polyfill is used to set value of "${key}". The value will be lost when the page is reloaded.`
+          );
+          data.set(key, String(val));
+        },
+        getItem: (key) => {
+          console.warn(
+            `Session storage is unavailable due to Error "${error.message}". A polyfill is used to get value of "${key}". The value will be undefined if the page was reloaded after it was set.`
+          );
+          return data.get(key);
+        },
+        removeItem: (key) => {
+          data.delete(key);
+        },
+        clear: () => {
+          data.clear();
+        }
+      }
+    });
+  }
 }.toString();
-export const SessionStoragePolyfill = () => (_jsx("script", { dangerouslySetInnerHTML: { __html: `(${polyfill})()` }, suppressHydrationWarning: true }));
+const SessionStoragePolyfill = () => /* @__PURE__ */ jsx("script", {
+  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+  suppressHydrationWarning: true
+});
+export {
+  SessionStoragePolyfill
+};

package/lib/tree/wrapper-component.js

@@ -1,25 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import * as components from "../components";
+import { getComponent } from "../components";
 import { useUserProps } from "../user-props/use-user-props";
 const renderText = (text) => {
-    const lines = text.split("\n");
-    return lines.map((line, index) => (_jsxs(Fragment, { children: [line, index < lines.length - 1 ? _jsx("br", {}) : null] }, index)));
+  const lines = text.split("\n");
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      line,
+      index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+    ]
+  }, index));
 };
-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)
-        return;
-    return children.map((child) => {
-        return typeof child === "string" ? renderText(child) : child;
-    });
+const renderWrapperComponentChildren = (children) => {
+  if (children === void 0 || children.length === 0)
+    return;
+  return children.map((child) => {
+    return typeof child === "string" ? renderText(child) : child;
+  });
 };
-export const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
-children, ...rest }) => {
-    const { Component } = components[instance.component];
-    const userProps = useUserProps(instance.id);
-    const props = { ...userProps, ...rest, [idAttribute]: instance.id };
-    return (_jsx(Component, { ...props, children: renderWrapperComponentChildren(children) }));
+const WrapperComponent = ({
+  instance,
+  onChangeChildren,
+  children,
+  ...rest
+}) => {
+  const Component = getComponent(instance.component);
+  const userProps = useUserProps(instance.id);
+  const props = { ...userProps, ...rest, [idAttribute]: instance.id };
+  return /* @__PURE__ */ jsx(Component, {
+    ...props,
+    children: renderWrapperComponentChildren(children)
+  });
+};
+const idAttribute = "data-ws-id";
+export {
+  WrapperComponent,
+  idAttribute,
+  renderWrapperComponentChildren
 };
-export const idAttribute = "data-ws-id";

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

@@ -1,17 +1,19 @@
 import { useRef } from "react";
 import { createValueContainer, useValue } from "react-nano-state";
-export const allUserPropsContainer = createValueContainer({});
-export const useAllUserProps = (initialUserProps) => {
-    // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
-    const ref = 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
-        allUserPropsContainer.value = propsMap;
-        ref.current = true;
+const allUserPropsContainer = createValueContainer({});
+const useAllUserProps = (initialUserProps) => {
+  const ref = useRef(false);
+  if (ref.current === false && initialUserProps !== void 0) {
+    const propsMap = {};
+    for (const props of initialUserProps) {
+      propsMap[props.instanceId] = props;
     }
-    return useValue(allUserPropsContainer);
+    allUserPropsContainer.value = propsMap;
+    ref.current = true;
+  }
+  return useValue(allUserPropsContainer);
+};
+export {
+  allUserPropsContainer,
+  useAllUserProps
 };

package/lib/user-props/schema.js

@@ -1,30 +1,34 @@
 import { z } from "zod";
-const UserPropDb = z.object({
-    id: z.string(),
-    prop: z.string(),
-    value: z.union([z.string(), z.boolean()]),
-    assetId: z.optional(z.string()),
-    required: z.optional(z.boolean()),
-});
-export const UserDbProps = z.array(UserPropDb);
-const UserUserProp = z
-    .object({
-    id: z.string(),
-    prop: z.string(),
-    value: z.union([z.string(), z.boolean()]),
-    // We are not interested in Props data does any other props on asset exists
-    asset: z.optional(z.object({ id: z.string() })),
-    required: z.optional(z.boolean()),
-})
-    .transform(({ id, prop, value, asset, required }) => {
-    // Check with infer that we are transforming to UserPropDb
-    const res = {
-        id,
-        prop,
-        value,
-        assetId: asset?.id,
-        required,
-    };
-    return res;
-});
-export const UserUserProps = z.array(UserUserProp);
+import { Asset } from "@webstudio-is/asset-uploader";
+const baseUserProps = {
+  id: z.string(),
+  prop: z.string(),
+  required: z.optional(z.boolean())
+};
+const UserProp = z.discriminatedUnion("type", [
+  z.object({
+    ...baseUserProps,
+    type: z.literal("number"),
+    value: z.number()
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("string"),
+    value: z.string()
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("boolean"),
+    value: z.boolean()
+  }),
+  z.object({
+    ...baseUserProps,
+    type: z.literal("asset"),
+    value: Asset
+  })
+]);
+const UserProps = z.array(UserProp);
+export {
+  UserProp,
+  UserProps
+};

package/lib/user-props/types.js

@@ -1 +0,0 @@
-export {};