@webstudio-is/react-sdk 0.65.0 → 0.66.0

package/src/components/html.tsx

@@ -0,0 +1,96 @@
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  type ForwardedRef,
+} from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { ReactSdkContext } from "../context";
+
+type Props = {
+  code: string;
+  executeScriptInCanvas: boolean;
+};
+
+type ChildProps = {
+  innerRef: ForwardedRef<HTMLDivElement>;
+  // code can be actually undefined when prop is not provided
+  code?: string;
+};
+
+/**
+ * Scripts are executed when rendered client side.
+ * Necessary on canvas which does not have server rendering.
+ */
+const ExecutableHtml = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || code === undefined) {
+      return;
+    }
+    // the trick to execute inserted scripts
+    // https://ghinda.net/article/script-tags
+    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 (
+    <div
+      {...rest}
+      ref={mergeRefs(innerRef, containerRef)}
+      style={{ display: "contents" }}
+    />
+  );
+};
+
+/**
+ * Scripts are executed when rendered server side
+ */
+const InnerHtml = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={innerRef}
+      style={{ display: "contents" }}
+      dangerouslySetInnerHTML={{ __html: props.code ?? "" }}
+    />
+  );
+};
+
+const Placeholder = (props: ChildProps) => {
+  const { code, innerRef, ...rest } = props;
+  return (
+    <div ref={innerRef} {...rest} style={{ padding: "20px" }}>
+      {'Paste html into "Code" prop'}
+    </div>
+  );
+};
+
+export const Html = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  const { code, executeScriptInCanvas, ...rest } = props;
+
+  // code can be actually undefined when prop is not provided
+  if (code === undefined || code.trim().length === 0) {
+    return <Placeholder innerRef={ref} {...rest} />;
+  }
+
+  if (renderer === "canvas" && executeScriptInCanvas === true) {
+    return <ExecutableHtml innerRef={ref} code={code} {...rest} />;
+  }
+
+  return <InnerHtml innerRef={ref} code={code} {...rest} />;
+});
+
+Html.displayName = "Html";

package/src/components/html.ws.ts

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

package/src/components/image.ws.tsx

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

package/src/components/index.ts

@@ -1,8 +1,8 @@
-import { PropMeta } from "@webstudio-is/generate-arg-types";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import type { ComponentName } from "./components-utils";
 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";
@@ -37,6 +37,7 @@ import { meta as CheckboxMeta } from "./checkbox.ws";
 // these are huge JSON objects that we want to be tree-shaken when not used!
 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";
@@ -69,9 +70,10 @@ import { propsMeta as CheckboxFieldPropsMeta } from "./checkbox-field.ws";
 import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 
 // @todo this list should not be hardcoded!
-const defaultMetas: Record<string, WsComponentMeta> = {
+export const defaultMetas: Record<string, WsComponentMeta> = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
+  Html: HtmlMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -121,9 +123,10 @@ export const registerComponentMetas = (
 };
 
 // @todo this list should not be hardcoded!
-const defaultPropsMetasRaw = {
+export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
+  Html: HtmlMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -154,44 +157,6 @@ const defaultPropsMetasRaw = {
   RadioButton: RadioButtonPropsMeta,
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta,
-} as const;
-
-const defaultPropsMetas: Record<string, WsComponentPropsMeta> =
-  defaultPropsMetasRaw;
-
-let registeredPropsMetas: Record<string, Partial<WsComponentPropsMeta>> = {};
-
-// we start as `undefined` because pre-computing will likely kill tree-shaking
-let currentPropsMetas: Record<string, WsComponentPropsMeta> | undefined =
-  undefined;
-
-export const getComponentPropsMeta = (
-  name: string
-): WsComponentPropsMeta | undefined => {
-  if (currentPropsMetas === undefined) {
-    currentPropsMetas = {};
-    for (const name of Object.keys(defaultPropsMetas)) {
-      const props = computeProps(
-        defaultPropsMetas[name],
-        registeredPropsMetas[name] ?? {}
-      );
-      const initialProps = computeInitialProps(
-        props,
-        defaultPropsMetas[name],
-        registeredPropsMetas[name] ?? {}
-      );
-      currentPropsMetas[name] = { props, initialProps };
-    }
-  }
-
-  return currentPropsMetas[name];
-};
-
-export const registerComponentPropsMetas = (
-  metas: Record<string, WsComponentPropsMeta>
-) => {
-  registeredPropsMetas = metas;
-  currentPropsMetas = undefined;
 };
 
 type RegisteredComponents = Partial<{
@@ -210,48 +175,6 @@ export const registerComponents = (components: RegisteredComponents) => {
   registeredComponents = components;
 };
 
-const computeProps = (
-  defaults: WsComponentPropsMeta,
-  overrides: Partial<WsComponentPropsMeta>
-) => {
-  if (overrides) {
-    const allNames = new Set([
-      ...Object.keys(defaults.props ?? {}),
-      ...Object.keys(overrides?.props ?? {}),
-    ]).values();
-
-    const result: WsComponentPropsMeta["props"] = {};
-    for (const name of allNames) {
-      result[name] = PropMeta.parse({
-        ...defaults.props[name],
-        ...overrides?.props?.[name],
-      });
-    }
-    return result;
-  }
-
-  return defaults.props;
-};
-
-const computeInitialProps = (
-  props: WsComponentPropsMeta["props"],
-  defaults: WsComponentPropsMeta,
-  overrides: Partial<WsComponentPropsMeta>
-): Array<string> => {
-  const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
-  const requiredProps = props
-    ? Object.entries(props)
-        .filter(
-          ([name, value]) =>
-            value?.required && initialProps.includes(name) === false
-        )
-        .map(([name]) => name)
-    : [];
-
-  // order of initialProps must be preserved
-  return [...initialProps, ...requiredProps];
-};
-
 export const canAcceptComponent = (
   parentComponent: string,
   childComponent: string

package/src/components/input.ws.tsx

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

package/src/components/italic.ws.tsx

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

package/src/components/label.ws.tsx

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

package/src/components/link-block.ws.tsx

@@ -1,4 +1,4 @@
-import { LinkBlockIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons/svg";
 import type {
   PresetStyle,
   WsComponentMeta,
@@ -23,7 +23,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: LinkBlockIcon,
+  icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle,
 };

package/src/components/link.ws.tsx

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

package/src/components/list-item.ws.tsx

@@ -1,4 +1,4 @@
-import { ListItemIcon } from "@webstudio-is/icons";
+import { ListItemIcon } from "@webstudio-is/icons/svg";
 import { li } from "../css/normalize";
 import {
   defaultStates,
@@ -18,7 +18,7 @@ export const meta: WsComponentMeta = {
   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/src/components/list.ws.tsx

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

package/src/components/paragraph.ws.tsx

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

package/src/components/radio-button-field.ws.tsx

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

package/src/components/radio-button.ws.tsx

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

package/src/components/separator.ws.tsx

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

package/src/components/slot.ws.ts

@@ -1,11 +1,11 @@
-import { SlotComponentIcon } from "@webstudio-is/icons";
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 
 export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Slot",
-  Icon: SlotComponentIcon,
+  icon: SlotComponentIcon,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/span.ws.tsx

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

package/src/components/subscript.ws.tsx

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

package/src/components/success-message.ws.tsx

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import type {
   WsComponentMeta,
   WsComponentPropsMeta,
@@ -14,7 +14,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Success Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle,
 };
 

package/src/components/superscript.ws.tsx

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

package/src/components/text-block.ws.tsx

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -23,7 +23,7 @@ export const meta: WsComponentMeta = {
   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/src/components/textarea.ws.tsx

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

package/src/context.tsx

@@ -4,6 +4,7 @@ import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
+  renderer?: "canvas";
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;

package/src/css/css.ts

@@ -1,8 +1,7 @@
 import { createCssEngine, type TransformValue } from "@webstudio-is/css-engine";
 import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
-import { getComponentNames } from "../components/components-utils";
-import { getComponentMeta } from "../components";
+import type { WsComponentMeta } from "../components/component-meta";
 import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
 import { getPresetStyleRules, getStyleRules } from "./style-rules";
@@ -12,6 +11,7 @@ type Data = {
   breakpoints?: Build["breakpoints"];
   styles?: Build["styles"];
   styleSourceSelections?: Build["styleSourceSelections"];
+  componentMetas: Map<string, WsComponentMeta>;
 };
 
 type CssOptions = {
@@ -61,9 +61,8 @@ export const generateCssText = (data: Data, options: CssOptions) => {
     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 === undefined) {
       continue;
     }

package/src/css/normalize.ts

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import { borders } from "./presets";
+import { borders, outline } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -37,7 +37,7 @@ const boxSizing = {
  *   box-sizing: border-box;
   }
 */
-const baseStyle = [boxSizing, ...borders] satisfies Styles;
+const baseStyle = [boxSizing, ...borders, ...outline] satisfies Styles;
 
 export const div = baseStyle;
 export const address = baseStyle;

package/src/css/presets.ts

@@ -18,3 +18,10 @@ export const borders: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
+
+export const outline: Styles = [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 1, unit: "px" },
+  },
+];

package/src/tree/create-elements-tree.tsx

@@ -7,23 +7,22 @@ import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 type InstanceSelector = Instance["id"][];
 
 export const createElementsTree = ({
+  renderer,
   instances,
   rootInstanceId,
-  sandbox,
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
   Component,
   getComponent,
 }: {
+  renderer?: "canvas";
   instances: Instances;
   rootInstanceId: Instance["id"];
-  sandbox?: boolean;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
@@ -50,7 +49,6 @@ export const createElementsTree = ({
     children: [
       <Fragment key="children">
         {children}
-        {sandbox && <SessionStoragePolyfill />}
         <ScrollRestoration />
         <Scripts />
       </Fragment>,
@@ -59,7 +57,7 @@ export const createElementsTree = ({
   });
   return (
     <ReactSdkContext.Provider
-      value={{ propsByInstanceIdStore, assetsStore, pagesStore }}
+      value={{ propsByInstanceIdStore, assetsStore, pagesStore, renderer }}
     >
       {root}
     </ReactSdkContext.Provider>