@webstudio-is/react-sdk 0.28.0 → 0.30.0

package/src/components/body.ws.tsx

@@ -1,5 +1,5 @@
 import { BodyIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/body.props.json";
 
 const presetStyle = {
@@ -52,12 +52,13 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "body",
   label: "Body",
   Icon: BodyIcon,
-  props: props as MetaProps,
   presetStyle,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/bold.ws.tsx

@@ -1,12 +1,13 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/bold.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Bold Text",
   Icon: FontBoldIcon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/box.ws.ts

@@ -1,5 +1,5 @@
 import { SquareIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/box.props.json";
 
 const presetStyle = {
@@ -9,12 +9,14 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "container",
   label: "Box",
   Icon: SquareIcon,
   presetStyle,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["tag"],
+});

package/src/components/button.ws.tsx

@@ -1,13 +1,15 @@
 import { ButtonIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/button.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Button",
   Icon: ButtonIcon,
   children: ["Button text you can edit"],
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["type"],
+});

package/src/components/component-type.ts

@@ -2,8 +2,16 @@ import { z } from "zod";
 import type { FunctionComponent } from "react";
 import type { IconProps } from "@webstudio-is/icons";
 import type { Style } from "@webstudio-is/css-data";
+import { PropMeta } from "@webstudio-is/generate-arg-types";
 
-export type MetaProps = Partial<z.infer<typeof Props>>;
+// props are separated from the rest of the meta
+// so they can be exported separately and potentially tree-shaken
+export const WsComponentPropsMeta = z.object({
+  props: z.record(PropMeta),
+  initialProps: z.array(z.string()).optional(),
+});
+
+export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
 
 export type WsComponentMeta = {
   /**
@@ -25,67 +33,19 @@ export type WsComponentMeta = {
   Icon: FunctionComponent<IconProps>;
   presetStyle?: Style;
   children?: Array<string>;
-  props: MetaProps;
-  initialProps?: Array<string>;
 };
 
-const Props = z.record(
-  z.union([
-    z.object({
-      type: z.literal("number"),
-      required: z.boolean(),
-      defaultValue: z.number().nullable(),
-    }),
-
-    z.object({
-      type: z.literal("text"),
-      required: z.boolean(),
-      defaultValue: z.string().nullable(),
-    }),
-
-    z.object({
-      type: z.literal("color"),
-      required: z.boolean(),
-      defaultValue: z.string().nullable(),
-    }),
-
-    z.object({
-      type: z.literal("boolean"),
-      required: z.boolean(),
-      defaultValue: z.boolean().nullable(),
-    }),
-
-    z.object({
-      type: z.enum([
-        "radio",
-        "inline-radio",
-        "check",
-        "inline-check",
-        "multi-select",
-        "select",
-      ]),
-      required: z.boolean(),
-      options: z.array(z.string()),
-      defaultValue: z.string().nullable(),
-    }),
-  ])
-);
-
-export const WsComponentMeta = z.lazy(() =>
-  z.object({
-    type: z.enum([
-      "body",
-      "container",
-      "control",
-      "embed",
-      "rich-text",
-      "rich-text-child",
-    ]),
-    label: z.string(),
-    Icon: z.any(),
-    presetStyle: z.optional(z.any()),
-    children: z.optional(z.array(z.string())),
-    props: Props,
-    initialProps: z.optional(z.array(z.string())),
-  })
-);
+export const WsComponentMeta = z.object({
+  type: z.enum([
+    "body",
+    "container",
+    "control",
+    "embed",
+    "rich-text",
+    "rich-text-child",
+  ]),
+  label: z.string(),
+  Icon: z.any(),
+  presetStyle: z.optional(z.any()),
+  children: z.optional(z.array(z.string())),
+});

package/src/components/form.ws.tsx

@@ -1,5 +1,5 @@
 import { FormIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/form.props.json";
 
 const presetStyle = {
@@ -14,12 +14,13 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
   presetStyle,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/heading.ws.tsx

@@ -1,13 +1,15 @@
 import { HeadingIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/heading.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
   children: ["Heading you can edit"],
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["tag"],
+});

package/src/components/image.ws.tsx

@@ -1,5 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/image.props.json";
 
 const presetStyle = {
@@ -17,13 +17,17 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
   presetStyle,
-  props: props as MetaProps,
-  initialProps: ["src", "width", "height", "alt", "loading"],
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props: {
+    ...props,
+    src: { ...props.src, control: "file-image", name: "Source" },
+  },
+  initialProps: ["src", "width", "height", "alt", "loading"],
+});

package/src/components/index.test.ts

@@ -1,29 +1,7 @@
-import { test, expect } from "@jest/globals";
-import {
-  getComponentNames,
-  getComponentMeta,
-  getComponentMetaProps,
-  registerComponentsMeta,
-} from "./index";
+import { test } from "@jest/globals";
+import { getComponentNames, getComponentMeta } from "./index";
 import { WsComponentMeta } from "./component-type";
 
 test.each(getComponentNames())("validating meta definition of %s", (name) => {
   WsComponentMeta.parse(getComponentMeta(name));
 });
-
-test("defaultValue will be used from Native Component", () => {
-  registerComponentsMeta({
-    Image: {
-      props: {
-        src: {
-          defaultValue: null,
-          required: false,
-          type: "text",
-        },
-      },
-    },
-  });
-
-  const props = getComponentMetaProps("Image");
-  expect(props?.src?.defaultValue).toEqual("");
-});

package/src/components/index.ts

@@ -1,19 +1,40 @@
-import BodyMeta from "./body.ws";
-import BoxMeta from "./box.ws";
-import TextBlockMeta from "./text-block.ws";
-import HeadingMeta from "./heading.ws";
-import ParagraphMeta from "./paragraph.ws";
-import LinkMeta from "./link.ws";
-import RichTextLinkMeta from "./rich-text-link.ws";
-import SpanMeta from "./span.ws";
-import BoldMeta from "./bold.ws";
-import ItalicMeta from "./italic.ws";
-import SuperscriptMeta from "./superscript.ws";
-import SubscriptMeta from "./subscript.ws";
-import ButtonMeta from "./button.ws";
-import InputMeta from "./input.ws";
-import FormMeta from "./form.ws";
-import ImageMeta from "./image.ws";
+import { PropMeta } from "@webstudio-is/generate-arg-types";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+
+import { meta as BodyMeta } from "./body.ws";
+import { meta as BoxMeta } from "./box.ws";
+import { meta as TextBlockMeta } from "./text-block.ws";
+import { meta as HeadingMeta } from "./heading.ws";
+import { meta as ParagraphMeta } from "./paragraph.ws";
+import { meta as LinkMeta } from "./link.ws";
+import { meta as RichTextLinkMeta } from "./rich-text-link.ws";
+import { meta as SpanMeta } from "./span.ws";
+import { meta as BoldMeta } from "./bold.ws";
+import { meta as ItalicMeta } from "./italic.ws";
+import { meta as SuperscriptMeta } from "./superscript.ws";
+import { meta as SubscriptMeta } from "./subscript.ws";
+import { meta as ButtonMeta } from "./button.ws";
+import { meta as InputMeta } from "./input.ws";
+import { meta as FormMeta } from "./form.ws";
+import { meta as ImageMeta } from "./image.ws";
+
+// these are huge JSON objects that we want to be tree-shaken when not used!
+import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
+import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
+import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
+import { propsMeta as HeadingMetaPropsMeta } from "./heading.ws";
+import { propsMeta as ParagraphMetaPropsMeta } from "./paragraph.ws";
+import { propsMeta as LinkMetaPropsMeta } from "./link.ws";
+import { propsMeta as RichTextLinkMetaPropsMeta } from "./rich-text-link.ws";
+import { propsMeta as SpanMetaPropsMeta } from "./span.ws";
+import { propsMeta as BoldMetaPropsMeta } from "./bold.ws";
+import { propsMeta as ItalicMetaPropsMeta } from "./italic.ws";
+import { propsMeta as SuperscriptMetaPropsMeta } from "./superscript.ws";
+import { propsMeta as SubscriptMetaPropsMeta } from "./subscript.ws";
+import { propsMeta as ButtonMetaPropsMeta } from "./button.ws";
+import { propsMeta as InputMetaPropsMeta } from "./input.ws";
+import { propsMeta as FormMetaPropsMeta } from "./form.ws";
+import { propsMeta as ImageMetaPropsMeta } from "./image.ws";
 
 import { Body } from "./body";
 import { Box } from "./box";
@@ -32,9 +53,7 @@ import { Input } from "./input";
 import { Form } from "./form";
 import { Image } from "./image";
 
-import type { WsComponentMeta, MetaProps } from "./component-type";
-
-const meta = {
+const defaultMetas: Record<string, WsComponentMeta> = {
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -51,9 +70,79 @@ const meta = {
   Input: InputMeta,
   Form: FormMeta,
   Image: ImageMeta,
-} as const;
+};
+
+let currentMetas = defaultMetas;
+
+export const getComponentMeta = (name: string): WsComponentMeta | undefined => {
+  return currentMetas[name];
+};
+
+export const registerComponentMetas = (
+  overrides: Record<string, Partial<WsComponentMeta>>
+) => {
+  const result: typeof currentMetas = {};
+  for (const name of Object.keys(defaultMetas)) {
+    result[name] = { ...defaultMetas[name], ...overrides[name] };
+  }
+  currentMetas = result;
+};
+
+const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
+  Box: BoxMetaPropsMeta,
+  Body: BodyMetaPropsMeta,
+  TextBlock: TextBlockMetaPropsMeta,
+  Heading: HeadingMetaPropsMeta,
+  Paragraph: ParagraphMetaPropsMeta,
+  Link: LinkMetaPropsMeta,
+  RichTextLink: RichTextLinkMetaPropsMeta,
+  Span: SpanMetaPropsMeta,
+  Bold: BoldMetaPropsMeta,
+  Italic: ItalicMetaPropsMeta,
+  Superscript: SuperscriptMetaPropsMeta,
+  Subscript: SubscriptMetaPropsMeta,
+  Button: ButtonMetaPropsMeta,
+  Input: InputMetaPropsMeta,
+  Form: FormMetaPropsMeta,
+  Image: ImageMetaPropsMeta,
+};
+
+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];
+};
 
-const components = {
+export const registerComponentPropsMetas = (
+  metas: Record<string, WsComponentPropsMeta>
+) => {
+  registeredPropsMetas = metas;
+  currentPropsMetas = undefined;
+};
+
+const defaultComponents = {
   Box,
   Body,
   TextBlock,
@@ -72,20 +161,15 @@ const components = {
   Image,
 } as const;
 
-export type ComponentName = keyof typeof components;
+export type ComponentName = keyof typeof defaultComponents;
 type RegisteredComponents = Partial<{
   // eslint-disable-next-line @typescript-eslint/ban-types
-  [p in ComponentName]: {};
-}>;
-
-type RegisteredComponentsMeta = Partial<{
-  [p in ComponentName]: Partial<WsComponentMeta>;
+  [name in ComponentName]: {};
 }>;
 
 let registeredComponents: RegisteredComponents | null = null;
-let registeredComponentsMeta: RegisteredComponentsMeta | null = null;
 
-const componentNames = Object.keys(components) as ComponentName[];
+const componentNames = Object.keys(defaultComponents) as ComponentName[];
 
 export const getComponentNames = (): ComponentName[] => {
   const uniqueNames = new Set([
@@ -96,60 +180,14 @@ export const getComponentNames = (): ComponentName[] => {
   return [...uniqueNames.values()] as ComponentName[];
 };
 
-export const getComponentMeta = (name: string): undefined | WsComponentMeta => {
-  const componentMeta = meta[name as ComponentName];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return {
-      ...componentMeta,
-      ...registeredComponentsMeta[name as ComponentName],
-    };
-  }
-
-  return componentMeta;
-};
-
 export const getComponent = (
   name: string
-): undefined | typeof components[ComponentName] => {
+): undefined | typeof defaultComponents[ComponentName] => {
   return registeredComponents != null && name in registeredComponents
     ? (registeredComponents[
         name as ComponentName
-      ] as typeof components[ComponentName])
-    : components[name as ComponentName];
-};
-
-export const getComponentMetaProps = (name: string): undefined | MetaProps => {
-  const componentMeta = meta[name as ComponentName];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    const registeredComponentMeta =
-      registeredComponentsMeta[name as ComponentName];
-    const allMetaPropKeys = new Set([
-      ...Object.keys(componentMeta?.props ?? {}),
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ...Object.keys(registeredComponentMeta!.props!),
-    ]);
-
-    const props: MetaProps = {};
-    /**
-     * Merge props, taking non null defaultValue and required=true from meta
-     **/
-    for (const key of allMetaPropKeys.values()) {
-      props[key] = {
-        ...componentMeta?.props[key],
-        ...registeredComponentMeta?.props?.[key],
-        defaultValue:
-          registeredComponentMeta?.props?.[key]?.defaultValue ??
-          componentMeta?.props[key]?.defaultValue ??
-          null,
-        required:
-          registeredComponentMeta?.props?.[key]?.required ||
-          componentMeta?.props[key]?.required,
-      } as MetaProps[string];
-    }
-    return props;
-  }
-
-  return componentMeta?.props;
+      ] as typeof defaultComponents[ComponentName])
+    : defaultComponents[name as ComponentName];
 };
 
 /**
@@ -161,8 +199,44 @@ export const registerComponents = (components: RegisteredComponents) => {
   registeredComponents = components;
 };
 
-export const registerComponentsMeta = (
-  componentsMeta: RegisteredComponentsMeta
+const computeProps = (
+  defaults: WsComponentPropsMeta,
+  overrides: Partial<WsComponentPropsMeta>
 ) => {
-  registeredComponentsMeta = componentsMeta;
+  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?.type.required && initialProps.includes(name) === false
+        )
+        .map(([name]) => name)
+    : [];
+
+  // order of initialProps must be preserved
+  return [...initialProps, ...requiredProps];
 };

package/src/components/input.ws.tsx

@@ -1,12 +1,13 @@
 import { InputIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/input.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "control",
   label: "Input",
   Icon: InputIcon,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/italic.ws.tsx

@@ -1,5 +1,5 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/italic.props.json";
 
 const presetStyle = {
@@ -9,12 +9,13 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: FontItalicIcon,
   presetStyle,
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});

package/src/components/link.ws.tsx

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/link.props.json";
 
 const presetStyle = {
@@ -14,13 +14,15 @@ const presetStyle = {
   },
 } as const;
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Link",
   Icon: Link2Icon,
   presetStyle,
   children: ["Link text you can edit"],
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["href"],
+});

package/src/components/paragraph.ws.tsx

@@ -1,13 +1,14 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, MetaProps } from "./component-type";
+import { type WsComponentMeta, WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/paragraph.props.json";
 
-const meta: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
   children: ["Pragraph you can edit"],
-  props: props as MetaProps,
 };
 
-export default meta;
+export const propsMeta = WsComponentPropsMeta.parse({
+  props,
+});