@webstudio-is/react-sdk 0.65.0 → 0.66.0

package/lib/components/code.ws.js

@@ -1,4 +1,4 @@
-import { CodeIcon } from "@webstudio-is/icons";
+import { CodeIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -34,7 +34,7 @@ const meta = {
   category: "general",
   type: "rich-text",
   label: "Code",
-  Icon: CodeIcon,
+  icon: CodeIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]

package/lib/components/component-meta.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
-import { WsEmbedTemplate } from "../embed-template";
+import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
 const WsComponentPropsMeta = z.object({
   props: z.record(PropMeta),
   initialProps: z.array(z.string()).optional()
@@ -40,8 +40,8 @@ const WsComponentMeta = z.object({
   ]),
   acceptedParents: z.optional(z.array(z.string())),
   label: z.string(),
-  Icon: z.function(),
-  presetStyle: z.optional(z.any()),
+  icon: z.string(),
+  presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),
   children: z.optional(WsEmbedTemplate)
 });

package/lib/components/components-utils.js

@@ -1,46 +1,5 @@
 import * as components from "./components";
 import { registeredComponents } from "./index";
-const componentNames = Object.keys({
-  Slot: 1,
-  Fragment: 1,
-  Box: 1,
-  Body: 1,
-  TextBlock: 1,
-  Heading: 1,
-  Paragraph: 1,
-  Link: 1,
-  LinkBlock: 1,
-  RichTextLink: 1,
-  Span: 1,
-  Bold: 1,
-  Italic: 1,
-  Superscript: 1,
-  Subscript: 1,
-  Button: 1,
-  Input: 1,
-  Form: 1,
-  Image: 1,
-  Blockquote: 1,
-  List: 1,
-  ListItem: 1,
-  Separator: 1,
-  Code: 1,
-  Label: 1,
-  SuccessMessage: 1,
-  ErrorMessage: 1,
-  Textarea: 1,
-  RadioButtonField: 1,
-  RadioButton: 1,
-  CheckboxField: 1,
-  Checkbox: 1
-});
-const getComponentNames = () => {
-  const uniqueNames = /* @__PURE__ */ new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {})
-  ]);
-  return Array.from(uniqueNames);
-};
 const getComponent = (name) => {
   return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
 };
@@ -51,6 +10,5 @@ const createGetComponent = (comps) => {
 };
 export {
   createGetComponent,
-  getComponent,
-  getComponentNames
+  getComponent
 };

package/lib/components/components.js

@@ -1,5 +1,6 @@
 import { Slot } from "./slot";
 import { Fragment } from "./fragment";
+import { Html } from "./html";
 import { Body } from "./body";
 import { Box } from "./box";
 import { TextBlock } from "./text-block";
@@ -43,6 +44,7 @@ export {
   Form,
   Fragment,
   Heading,
+  Html,
   Image,
   Input,
   Italic,

package/lib/components/error-message.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/error-message.props";
 import { div } from "../css/normalize";
 const presetStyle = {
@@ -7,7 +7,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Error Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/form.ws.js

@@ -1,4 +1,4 @@
-import { FormIcon } from "@webstudio-is/icons";
+import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "../css/normalize";
 import {
   defaultStates
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/lib/components/fragment.ws.js

@@ -1,7 +1,7 @@
 const meta = {
   type: "container",
   label: "Fragment",
-  Icon: () => null
+  icon: ""
 };
 const propsMeta = {
   props: {}

package/lib/components/heading.ws.js

@@ -1,4 +1,4 @@
-import { HeadingIcon } from "@webstudio-is/icons";
+import { HeadingIcon } from "@webstudio-is/icons/svg";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import {
   defaultStates
@@ -16,7 +16,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
-  Icon: HeadingIcon,
+  icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
   states: defaultStates,
   presetStyle

package/lib/components/html.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef
+} from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { ReactSdkContext } from "../context";
+const ExecutableHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || code === void 0) {
+      return;
+    }
+    const range = document.createRange();
+    range.setStart(container, 0);
+    const fragment = range.createContextualFragment(code);
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    container.append(fragment);
+  }, [code]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: mergeRefs(innerRef, containerRef),
+      style: { display: "contents" }
+    }
+  );
+};
+const InnerHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: innerRef,
+      style: { display: "contents" },
+      dangerouslySetInnerHTML: { __html: props.code ?? "" }
+    }
+  );
+};
+const Placeholder = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Paste html into "Code" prop' });
+};
+const Html = forwardRef((props, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  const { code, executeScriptInCanvas, ...rest } = props;
+  if (code === void 0 || code.trim().length === 0) {
+    return /* @__PURE__ */ jsx(Placeholder, { innerRef: ref, ...rest });
+  }
+  if (renderer === "canvas" && executeScriptInCanvas === true) {
+    return /* @__PURE__ */ jsx(ExecutableHtml, { innerRef: ref, code, ...rest });
+  }
+  return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
+});
+Html.displayName = "Html";
+export {
+  Html
+};

package/lib/components/html.ws.js

@@ -0,0 +1,23 @@
+import { CodeIcon } from "@webstudio-is/icons/svg";
+import { props } from "./__generated__/html.props";
+const meta = {
+  category: "general",
+  type: "embed",
+  label: "Html",
+  icon: CodeIcon
+};
+const propsMeta = {
+  props: {
+    ...props,
+    code: {
+      required: true,
+      control: "code",
+      type: "string",
+      rows: 10
+    }
+  }
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/image.ws.js

@@ -1,4 +1,4 @@
-import { ImageIcon } from "@webstudio-is/icons";
+import { ImageIcon } from "@webstudio-is/icons/svg";
 import { img } from "../css/normalize";
 import {
   defaultStates
@@ -24,7 +24,7 @@ const meta = {
   category: "media",
   type: "embed",
   label: "Image",
-  Icon: ImageIcon,
+  icon: ImageIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/index.js

@@ -1,6 +1,6 @@
-import { PropMeta } from "@webstudio-is/generate-arg-types";
 import { meta as SlotMeta } from "./slot.ws";
 import { meta as FragmentMeta } from "./fragment.ws";
+import { meta as HtmlMeta } from "./html.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -33,6 +33,7 @@ import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
 import { meta as CheckboxMeta } from "./checkbox.ws";
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
+import { propsMeta as HtmlMetaPropsMeta } from "./html.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -66,6 +67,7 @@ import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 const defaultMetas = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
+  Html: HtmlMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -108,9 +110,10 @@ const registerComponentMetas = (overrides) => {
   }
   currentMetas = result;
 };
-const defaultPropsMetasRaw = {
+const defaultPropsMetas = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
+  Html: HtmlMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -142,59 +145,10 @@ const defaultPropsMetasRaw = {
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta
 };
-const defaultPropsMetas = defaultPropsMetasRaw;
-let registeredPropsMetas = {};
-let currentPropsMetas = void 0;
-const getComponentPropsMeta = (name) => {
-  if (currentPropsMetas === void 0) {
-    currentPropsMetas = {};
-    for (const name2 of Object.keys(defaultPropsMetas)) {
-      const props = computeProps(
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      const initialProps = computeInitialProps(
-        props,
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      currentPropsMetas[name2] = { props, initialProps };
-    }
-  }
-  return currentPropsMetas[name];
-};
-const registerComponentPropsMetas = (metas) => {
-  registeredPropsMetas = metas;
-  currentPropsMetas = void 0;
-};
 let registeredComponents;
 const registerComponents = (components) => {
   registeredComponents = components;
 };
-const computeProps = (defaults, overrides) => {
-  if (overrides) {
-    const allNames = (/* @__PURE__ */ new Set([
-      ...Object.keys(defaults.props ?? {}),
-      ...Object.keys(overrides?.props ?? {})
-    ])).values();
-    const result = {};
-    for (const name of allNames) {
-      result[name] = PropMeta.parse({
-        ...defaults.props[name],
-        ...overrides?.props?.[name]
-      });
-    }
-    return result;
-  }
-  return defaults.props;
-};
-const computeInitialProps = (props, defaults, overrides) => {
-  const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
-  const requiredProps = props ? Object.entries(props).filter(
-    ([name, value]) => value?.required && initialProps.includes(name) === false
-  ).map(([name]) => name) : [];
-  return [...initialProps, ...requiredProps];
-};
 const canAcceptComponent = (parentComponent, childComponent) => {
   const parentMeta = getComponentMeta(parentComponent);
   const childMeta = getComponentMeta(childComponent);
@@ -205,10 +159,10 @@ const canAcceptComponent = (parentComponent, childComponent) => {
 };
 export {
   canAcceptComponent,
+  defaultMetas,
+  defaultPropsMetas,
   getComponentMeta,
-  getComponentPropsMeta,
   registerComponentMetas,
-  registerComponentPropsMetas,
   registerComponents,
   registeredComponents
 };

package/lib/components/input.ws.js

@@ -1,4 +1,4 @@
-import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import { input } from "../css/normalize";
 import {
   defaultStates
@@ -11,7 +11,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Input",
-  Icon: FormTextFieldIcon,
+  icon: FormTextFieldIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/italic.ws.js

@@ -1,4 +1,4 @@
-import { TextItalicIcon } from "@webstudio-is/icons";
+import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -16,7 +16,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: TextItalicIcon,
+  icon: TextItalicIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/label.ws.js

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "rich-text",
   label: "Input Label",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }]

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

@@ -1,4 +1,4 @@
-import { LinkBlockIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import { a } from "../css/normalize";
@@ -15,7 +15,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: LinkBlockIcon,
+  icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle
 };

package/lib/components/link.ws.js

@@ -1,4 +1,4 @@
-import { LinkIcon } from "@webstudio-is/icons";
+import { LinkIcon } from "@webstudio-is/icons/svg";
 import { a } from "../css/normalize";
 import {
   defaultStates
@@ -21,7 +21,7 @@ const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: LinkIcon,
+  icon: LinkIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/list-item.ws.js

@@ -1,4 +1,4 @@
-import { ListItemIcon } from "@webstudio-is/icons";
+import { ListItemIcon } from "@webstudio-is/icons/svg";
 import { li } from "../css/normalize";
 import {
   defaultStates
@@ -12,7 +12,7 @@ const meta = {
   type: "rich-text",
   acceptedParents: ["List"],
   label: "List Item",
-  Icon: ListItemIcon,
+  icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
   states: defaultStates,
   presetStyle

package/lib/components/list.ws.js

@@ -1,4 +1,4 @@
-import { ListIcon } from "@webstudio-is/icons";
+import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -40,7 +40,7 @@ const meta = {
   category: "typography",
   type: "container",
   label: "List",
-  Icon: ListIcon,
+  icon: ListIcon,
   states: defaultStates,
   presetStyle,
   children: []

package/lib/components/paragraph.ws.js

@@ -1,4 +1,4 @@
-import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import { p } from "../css/normalize";
 import {
   defaultStates
@@ -11,7 +11,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
-  Icon: TextAlignLeftIcon,
+  icon: TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
   states: defaultStates,
   presetStyle

package/lib/components/radio-button-field.ws.js

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Radio",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/lib/components/radio-button.ws.js

@@ -1,4 +1,4 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -16,7 +16,7 @@ const presetStyle = {
 const meta = {
   type: "control",
   label: "Radio Input",
-  Icon: RadioCheckedIcon,
+  icon: RadioCheckedIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/separator.ws.js

@@ -1,4 +1,4 @@
-import { DashIcon } from "@webstudio-is/icons";
+import { DashIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -37,7 +37,7 @@ const meta = {
   category: "general",
   type: "embed",
   label: "Separator",
-  Icon: DashIcon,
+  icon: DashIcon,
   states: defaultStates,
   presetStyle,
   children: []

package/lib/components/slot.ws.js

@@ -1,9 +1,9 @@
-import { SlotComponentIcon } from "@webstudio-is/icons";
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
 const meta = {
   category: "general",
   type: "container",
   label: "Slot",
-  Icon: SlotComponentIcon
+  icon: SlotComponentIcon
 };
 const propsMeta = {
   props: {}

package/lib/components/span.ws.js

@@ -1,4 +1,4 @@
-import { PaintBrushIcon } from "@webstudio-is/icons";
+import { PaintBrushIcon } from "@webstudio-is/icons/svg";
 import { span } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: PaintBrushIcon,
+  icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/subscript.ws.js

@@ -1,4 +1,4 @@
-import { SubscriptIcon } from "@webstudio-is/icons";
+import { SubscriptIcon } from "@webstudio-is/icons/svg";
 import { sub } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: SubscriptIcon,
+  icon: SubscriptIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/success-message.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/success-message.props";
 import { div } from "../css/normalize";
 const presetStyle = {
@@ -7,7 +7,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Success Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/superscript.ws.js

@@ -1,4 +1,4 @@
-import { SuperscriptIcon } from "@webstudio-is/icons";
+import { SuperscriptIcon } from "@webstudio-is/icons/svg";
 import { sup } from "../css/normalize";
 import {
   defaultStates
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon,
+  icon: SuperscriptIcon,
   states: defaultStates,
   presetStyle
 };

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

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -17,7 +17,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Block of text you can edit" }]

package/lib/components/textarea.ws.js

@@ -1,4 +1,4 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
 import { textarea } from "../css/normalize";
 import {
   defaultStates
@@ -15,7 +15,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Area",
-  Icon: FormTextAreaIcon,
+  icon: FormTextAreaIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/css/css.js

@@ -1,6 +1,4 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
-import { getComponentNames } from "../components/components-utils";
-import { getComponentMeta } from "../components";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
@@ -37,9 +35,8 @@ const generateCssText = (data, options) => {
   for (const breakpoint of breakpoints.values()) {
     engine.addMediaRule(breakpoint.id, breakpoint);
   }
-  for (const component of getComponentNames()) {
-    const meta = getComponentMeta(component);
-    const presetStyle = meta?.presetStyle;
+  for (const [component, meta] of data.componentMetas) {
+    const presetStyle = meta.presetStyle;
     if (presetStyle === void 0) {
       continue;
     }