@webstudio-is/react-sdk 0.65.0 → 0.66.0

package/lib/app/custom-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 { props } from "./__generated__/form.props";
 const presetStyle = {
@@ -11,7 +11,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   presetStyle,
   states: [
     { selector: "[data-state=error]", label: "Error" },

package/lib/app/custom-components/image.js

@@ -3,7 +3,10 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
+import {
+  Image as WebstudioImage,
+  createImageLoader
+} from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
 import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
@@ -11,19 +14,10 @@ const defaultTag = "img";
 const Image = forwardRef(
   (props, ref) => {
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-    const params = getParams();
     const loader = useMemo(() => {
-      if (asset === void 0) {
-        return null;
-      }
-      if (asset.location === "REMOTE") {
-        return loaders.cloudflareImageLoader({
-          resizeOrigin: params.resizeOrigin,
-          cdnUrl: params.assetBaseUrl
-        });
-      }
-      return loaders.localImageLoader({ publicPath: params.assetBaseUrl });
-    }, [asset, params]);
+      const params = getParams();
+      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
     const src = asset?.name ?? props.src;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ jsx(SdkImage, { ...props, src, ref }, src);

package/lib/app/params.js

@@ -1,5 +1,6 @@
 let params;
 const emptyParams = {
+  imageBaseUrl: "/",
   assetBaseUrl: "/"
 };
 const getParams = () => params ?? emptyParams;

package/lib/cjs/app/custom-components/form.ws.js

@@ -22,7 +22,7 @@ __export(form_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(form_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../../css/normalize");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
@@ -35,7 +35,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: import_icons.FormIcon,
+  icon: import_svg.FormIcon,
   presetStyle,
   states: [
     { selector: "[data-state=error]", label: "Error" },

package/lib/cjs/app/custom-components/image.js

@@ -31,19 +31,10 @@ const defaultTag = "img";
 const Image = (0, import_react.forwardRef)(
   (props, ref) => {
     const asset = (0, import_props.usePropAsset)((0, import_props.getInstanceIdFromComponentProps)(props), "src");
-    const params = (0, import_params.getParams)();
     const loader = (0, import_react.useMemo)(() => {
-      if (asset === void 0) {
-        return null;
-      }
-      if (asset.location === "REMOTE") {
-        return import_image.loaders.cloudflareImageLoader({
-          resizeOrigin: params.resizeOrigin,
-          cdnUrl: params.assetBaseUrl
-        });
-      }
-      return import_image.loaders.localImageLoader({ publicPath: params.assetBaseUrl });
-    }, [asset, params]);
+      const params = (0, import_params.getParams)();
+      return (0, import_image.createImageLoader)({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
     const src = asset?.name ?? props.src;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image2.Image, { ...props, src, ref }, src);

package/lib/cjs/app/params.js

@@ -24,6 +24,7 @@ __export(params_exports, {
 module.exports = __toCommonJS(params_exports);
 let params;
 const emptyParams = {
+  imageBaseUrl: "/",
   assetBaseUrl: "/"
 };
 const getParams = () => params ?? emptyParams;

package/lib/cjs/components/__generated__/html.props.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var html_props_exports = {};
+__export(html_props_exports, {
+  props: () => props
+});
+module.exports = __toCommonJS(html_props_exports);
+const props = {
+  code: { required: true, control: "text", type: "string" },
+  executeScriptInCanvas: {
+    required: true,
+    control: "boolean",
+    type: "boolean"
+  }
+};

package/lib/cjs/components/blockquote.ws.js

@@ -22,7 +22,7 @@ __export(blockquote_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(blockquote_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_blockquote = require("./__generated__/blockquote.props");
 const presetStyle = {
@@ -77,7 +77,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Blockquote",
-  Icon: import_icons.BlockquoteIcon,
+  icon: import_svg.BlockquoteIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }]

package/lib/cjs/components/body.ws.js

@@ -22,7 +22,7 @@ __export(body_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(body_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_body = require("./__generated__/body.props");
@@ -56,7 +56,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Body",
-  Icon: import_icons.BodyIcon,
+  icon: import_svg.BodyIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/bold.ws.js

@@ -22,7 +22,7 @@ __export(bold_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(bold_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_bold = require("./__generated__/bold.props");
 var import_normalize = require("../css/normalize");
@@ -32,7 +32,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: import_icons.BoldIcon,
+  icon: import_svg.BoldIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/box.ws.js

@@ -22,7 +22,7 @@ __export(box_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(box_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_box = require("./__generated__/box.props");
 var import_normalize = require("../css/normalize");
@@ -42,7 +42,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Box",
-  Icon: import_icons.BoxIcon,
+  icon: import_svg.BoxIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };

package/lib/cjs/components/button.ws.js

@@ -22,7 +22,7 @@ __export(button_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(button_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_button = require("./__generated__/button.props");
@@ -33,7 +33,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: import_icons.ButtonElementIcon,
+  icon: import_svg.ButtonElementIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/components/checkbox-field.ws.js

@@ -22,7 +22,7 @@ __export(checkbox_field_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(checkbox_field_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_checkbox_field = require("./__generated__/checkbox-field.props");
 var import_normalize = require("../css/normalize");
@@ -36,7 +36,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Checkbox",
-  Icon: import_icons.CheckboxCheckedIcon,
+  icon: import_svg.CheckboxCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [

package/lib/cjs/components/checkbox.ws.js

@@ -22,7 +22,7 @@ __export(checkbox_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(checkbox_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_normalize = require("../css/normalize");
 var import_checkbox = require("./__generated__/checkbox.props");
@@ -38,7 +38,7 @@ const presetStyle = {
 const meta = {
   type: "control",
   label: "Checkbox Input",
-  Icon: import_icons.CheckboxCheckedIcon,
+  icon: import_svg.CheckboxCheckedIcon,
   presetStyle,
   states: [
     ...import_component_meta.defaultStates,

package/lib/cjs/components/code.ws.js

@@ -22,7 +22,7 @@ __export(code_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(code_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_component_meta = require("./component-meta");
 var import_code = require("./code");
 var import_code2 = require("./__generated__/code.props");
@@ -56,7 +56,7 @@ const meta = {
   category: "general",
   type: "rich-text",
   label: "Code",
-  Icon: import_icons.CodeIcon,
+  icon: import_svg.CodeIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]

package/lib/cjs/components/component-meta.js

@@ -66,8 +66,8 @@ const WsComponentMeta = import_zod.z.object({
   ]),
   acceptedParents: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
   label: import_zod.z.string(),
-  Icon: import_zod.z.function(),
-  presetStyle: import_zod.z.optional(import_zod.z.any()),
+  icon: import_zod.z.string(),
+  presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
   states: import_zod.z.optional(import_zod.z.array(ComponentState)),
   children: import_zod.z.optional(import_embed_template.WsEmbedTemplate)
 });

package/lib/cjs/components/components-utils.js

@@ -29,53 +29,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var components_utils_exports = {};
 __export(components_utils_exports, {
   createGetComponent: () => createGetComponent,
-  getComponent: () => getComponent,
-  getComponentNames: () => getComponentNames
+  getComponent: () => getComponent
 });
 module.exports = __toCommonJS(components_utils_exports);
 var components = __toESM(require("./components"), 1);
 var import_index = require("./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(import_index.registeredComponents || {})
-  ]);
-  return Array.from(uniqueNames);
-};
 const getComponent = (name) => {
   return import_index.registeredComponents != null && name in import_index.registeredComponents ? import_index.registeredComponents[name] : components[name];
 };

package/lib/cjs/components/components.js

@@ -30,6 +30,7 @@ __export(components_exports, {
   Form: () => import_form.Form,
   Fragment: () => import_fragment.Fragment,
   Heading: () => import_heading.Heading,
+  Html: () => import_html.Html,
   Image: () => import_image.Image,
   Input: () => import_input.Input,
   Italic: () => import_italic.Italic,
@@ -54,6 +55,7 @@ __export(components_exports, {
 module.exports = __toCommonJS(components_exports);
 var import_slot = require("./slot");
 var import_fragment = require("./fragment");
+var import_html = require("./html");
 var import_body = require("./body");
 var import_box = require("./box");
 var import_text_block = require("./text-block");

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

@@ -22,7 +22,7 @@ __export(error_message_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(error_message_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_error_message = require("./__generated__/error-message.props");
 var import_normalize = require("../css/normalize");
 const presetStyle = {
@@ -31,7 +31,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Error Message",
-  Icon: import_icons.BoxIcon,
+  icon: import_svg.BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/form.ws.js

@@ -22,7 +22,7 @@ __export(form_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(form_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_form = require("./__generated__/form.props");
@@ -36,7 +36,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: import_icons.FormIcon,
+  icon: import_svg.FormIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
   children: [

package/lib/cjs/components/fragment.ws.js

@@ -25,7 +25,7 @@ module.exports = __toCommonJS(fragment_ws_exports);
 const meta = {
   type: "container",
   label: "Fragment",
-  Icon: () => null
+  icon: ""
 };
 const propsMeta = {
   props: {}

package/lib/cjs/components/heading.ws.js

@@ -22,7 +22,7 @@ __export(heading_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(heading_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_heading = require("./__generated__/heading.props");
@@ -38,7 +38,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
-  Icon: import_icons.HeadingIcon,
+  icon: import_svg.HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
   states: import_component_meta.defaultStates,
   presetStyle

package/lib/cjs/components/html.js

@@ -0,0 +1,80 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var html_exports = {};
+__export(html_exports, {
+  Html: () => Html
+});
+module.exports = __toCommonJS(html_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_utils = require("@react-aria/utils");
+var import_context = require("../context");
+const ExecutableHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      ref: (0, import_utils.mergeRefs)(innerRef, containerRef),
+      style: { display: "contents" }
+    }
+  );
+};
+const InnerHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      ref: innerRef,
+      style: { display: "contents" },
+      dangerouslySetInnerHTML: { __html: props.code ?? "" }
+    }
+  );
+};
+const Placeholder = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Paste html into "Code" prop' });
+};
+const Html = (0, import_react.forwardRef)((props, ref) => {
+  const { renderer } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const { code, executeScriptInCanvas, ...rest } = props;
+  if (code === void 0 || code.trim().length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Placeholder, { innerRef: ref, ...rest });
+  }
+  if (renderer === "canvas" && executeScriptInCanvas === true) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExecutableHtml, { innerRef: ref, code, ...rest });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerHtml, { innerRef: ref, code, ...rest });
+});
+Html.displayName = "Html";

package/lib/cjs/components/html.ws.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var html_ws_exports = {};
+__export(html_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(html_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_html = require("./__generated__/html.props");
+const meta = {
+  category: "general",
+  type: "embed",
+  label: "Html",
+  icon: import_svg.CodeIcon
+};
+const propsMeta = {
+  props: {
+    ...import_html.props,
+    code: {
+      required: true,
+      control: "code",
+      type: "string",
+      rows: 10
+    }
+  }
+};

package/lib/cjs/components/image.ws.js

@@ -22,7 +22,7 @@ __export(image_ws_exports, {
   propsMeta: () => propsMeta
 });
 module.exports = __toCommonJS(image_ws_exports);
-var import_icons = require("@webstudio-is/icons");
+var import_svg = require("@webstudio-is/icons/svg");
 var import_normalize = require("../css/normalize");
 var import_component_meta = require("./component-meta");
 var import_image = require("./__generated__/image.props");
@@ -46,7 +46,7 @@ const meta = {
   category: "media",
   type: "embed",
   label: "Image",
-  Icon: import_icons.ImageIcon,
+  icon: import_svg.ImageIcon,
   states: import_component_meta.defaultStates,
   presetStyle
 };