@webstudio-is/react-sdk 0.68.0 → 0.69.0

package/src/components/image.tsx

@@ -1,32 +1,18 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import {
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  forwardRef,
+  useMemo,
+} from "react";
+import {
+  Image as WebstudioImage,
+  createImageLoader,
+} from "@webstudio-is/image";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../props";
+import { getParams } from "../app/params";
 
 export const defaultTag = "img";
 
-// quality and optimize can be overwritten and used by asset transform
-// Or we need and additional way to pass them upper level
-type ImageProps = ComponentProps<typeof defaultTag>;
-
-export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
-  (imageProps, ref) => {
-    return (
-      <img
-        {...imageProps}
-        src={imageProps.src || imagePlaceholderSvg}
-        ref={ref}
-      />
-    );
-  }
-);
-
-Image.defaultProps = {
-  src: "",
-  width: "",
-  height: "",
-  alt: "",
-};
-
-Image.displayName = "Image";
-
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"
@@ -50,3 +36,45 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
+
+type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
+
+export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
+
+    const loader = useMemo(() => {
+      const params = getParams();
+      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
+
+    const src = asset?.name ?? props.src;
+
+    if (asset == null || loader == null) {
+      return (
+        <img key={src} {...props} src={src || imagePlaceholderSvg} ref={ref} />
+      );
+    }
+
+    return (
+      <WebstudioImage
+        /**
+         * `key` is needed to recreate the image in case of asset change in builder,
+         * this gives immediate feedback when an asset is changed.
+         * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
+         * (we change aspectRatio CSS prop on asset change)
+         *
+         * In non-builder mode, key on images are usually also a good idea,
+         * prevents showing outdated images on route change.
+         **/
+        key={src}
+        {...props}
+        loader={loader}
+        src={src}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.displayName = "Image";

package/src/components/image.ws.tsx

@@ -34,11 +34,15 @@ export const meta: WsComponentMeta = {
   icon: ImageIcon,
   states: defaultStates,
   presetStyle,
+  order: 0,
 };
 
+// "loader" is our internal prop not intended to show up in the props panel
+const { loader, ...publicProps } = props;
+
 export const propsMeta: WsComponentPropsMeta = {
   props: {
-    ...props,
+    ...publicProps,
     src: {
       type: "string",
       control: "file",

package/src/components/index.ts

@@ -1,5 +1,4 @@
 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 HtmlEmbedMeta } from "./html-embed.ws";
@@ -106,22 +105,6 @@ export const defaultMetas: Record<string, WsComponentMeta> = {
   Checkbox: CheckboxMeta,
 };
 
-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;
-};
-
 // @todo this list should not be hardcoded!
 export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   Slot: SlotMetaPropsMeta,
@@ -158,34 +141,3 @@ export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta,
 };
-
-type RegisteredComponents = Partial<{
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  [name in ComponentName]: {};
-}>;
-
-export let registeredComponents: RegisteredComponents | undefined;
-
-/**
- *  @todo: Allow register any component.
- * Now we can register only existings Components, as all our type system would
- * break otherwise, see getComponent etc. So its overwriteComponent now
- **/
-export const registerComponents = (components: RegisteredComponents) => {
-  registeredComponents = components;
-};
-
-export const canAcceptComponent = (
-  parentComponent: string,
-  childComponent: string
-) => {
-  const parentMeta = getComponentMeta(parentComponent);
-  const childMeta = getComponentMeta(childComponent);
-  if (parentMeta?.type !== "container" || childMeta === undefined) {
-    return false;
-  }
-  return (
-    childMeta.acceptedParents === undefined ||
-    childMeta.acceptedParents.includes(parentComponent)
-  );
-};

package/src/components/input.ws.tsx

@@ -19,6 +19,7 @@ export const meta: WsComponentMeta = {
   label: "Text Input",
   icon: FormTextFieldIcon,
   presetStyle,
+  order: 3,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },

package/src/components/label.ws.tsx

@@ -23,7 +23,14 @@ export const meta: WsComponentMeta = {
   icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Form Label" }],
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Form Label" }],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

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

@@ -26,6 +26,7 @@ export const meta: WsComponentMeta = {
   icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle,
+  order: 2,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/link.ws.tsx

@@ -29,6 +29,7 @@ export const meta: WsComponentMeta = {
   label: "Link Text",
   icon: LinkIcon,
   presetStyle,
+  order: 1,
   states: [
     ...defaultStates,
     {
@@ -41,7 +42,13 @@ export const meta: WsComponentMeta = {
       label: "Current page",
     },
   ],
-  children: [{ type: "text", value: "Link text you can edit" }],
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [{ type: "text", value: "Link text you can edit" }],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

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

@@ -14,14 +14,21 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "general",
   type: "rich-text",
-  acceptedParents: ["List"],
+  requiredAncestors: ["List"],
   label: "List Item",
   icon: ListItemIcon,
-  children: [{ type: "text", value: "List Item you can edit" }],
   states: defaultStates,
   presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [{ type: "text", value: "List Item you can edit" }],
+    },
+  ],
+  order: 4,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/list.ws.tsx

@@ -43,13 +43,13 @@ const presetStyle = {
 } satisfies PresetStyle<ListTag>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "general",
   type: "container",
   label: "List",
   icon: ListIcon,
   states: defaultStates,
   presetStyle,
-  children: [],
+  order: 3,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/paragraph.ws.tsx

@@ -14,13 +14,20 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Paragraph",
   icon: TextAlignLeftIcon,
-  children: [{ type: "text", value: "Pragraph you can edit" }],
   states: defaultStates,
   presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }],
+    },
+  ],
+  order: 2,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

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

@@ -23,14 +23,20 @@ export const meta: WsComponentMeta = {
   icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
-  children: [
-    { type: "instance", component: "RadioButton", props: [], children: [] },
+  template: [
     {
       type: "instance",
-      component: "TextBlock",
-      label: "Radio Label",
-      props: [],
-      children: [{ type: "text", value: "Radio" }],
+      component: "RadioButtonField",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Radio Label",
+          props: [],
+          children: [{ type: "text", value: "Radio" }],
+        },
+      ],
     },
   ],
 };

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

@@ -24,6 +24,7 @@ export const meta: WsComponentMeta = {
   label: "Radio Input",
   icon: RadioCheckedIcon,
   presetStyle,
+  order: 5,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },

package/src/components/rich-text-link.ws.tsx

@@ -7,7 +7,7 @@ const { category, ...linkMetaRest } = linkMeta;
 export const meta: WsComponentMeta = {
   ...linkMetaRest,
   type: "rich-text-child",
-  children: [],
+  template: [],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/separator.ws.tsx

@@ -47,7 +47,7 @@ export const meta: WsComponentMeta = {
   icon: DashIcon,
   states: defaultStates,
   presetStyle,
-  children: [],
+  order: 5,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/slot.ws.ts

@@ -6,6 +6,8 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Slot",
   icon: SlotComponentIcon,
+  stylable: false,
+  order: 6,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/text-block.tsx

@@ -1,10 +1,21 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import {
+  createElement,
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
 
 export const defaultTag = "div";
 
-export const TextBlock = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag>
->((props, ref) => <div {...props} ref={ref} />);
+// We don't want to enable all tags because Box is usually a container and we have specific components for many tags.
+type Props = ComponentProps<typeof defaultTag> & {
+  tag?: "div" | "span" | "figcaption";
+};
+
+export const TextBlock = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
 
 TextBlock.displayName = "TextBlock";

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

@@ -20,15 +20,23 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Text Block",
   icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Block of text you can edit" }],
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }],
+    },
+  ],
+  order: 0,
 };
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["tag"],
 };

package/src/components/textarea.ws.tsx

@@ -23,6 +23,7 @@ export const meta: WsComponentMeta = {
   label: "Text Area",
   icon: FormTextAreaIcon,
   presetStyle,
+  order: 4,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },

package/src/embed-template.ts

@@ -10,6 +10,7 @@ import {
   Breakpoint,
 } from "@webstudio-is/project-build";
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-data";
+import type { Simplify } from "type-fest";
 
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -43,13 +44,20 @@ const EmbedTemplateProp = z.union([
 
 type EmbedTemplateProp = z.infer<typeof EmbedTemplateProp>;
 
-export const EmbedTemplateStyleDecl = z.object({
+const EmbedTemplateStyleDeclRaw = z.object({
   state: z.optional(z.string()),
-  property: z.string() as z.ZodType<StyleProperty>,
+  property: z.string(),
   value: StyleValue,
 });
 
-export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
+export type EmbedTemplateStyleDecl = Simplify<
+  Omit<z.infer<typeof EmbedTemplateStyleDeclRaw>, "property"> & {
+    property: StyleProperty;
+  }
+>;
+
+export const EmbedTemplateStyleDecl =
+  EmbedTemplateStyleDeclRaw as z.ZodType<EmbedTemplateStyleDecl>;
 
 export type EmbedTemplateInstance = {
   type: "instance";

package/src/index.ts

@@ -5,16 +5,13 @@ export * from "./pubsub";
 export * from "./app";
 export * from "./components/components";
 export * from "./components/components-utils";
-export {
-  customComponents,
-  customComponentMetas,
-  customComponentPropsMetas,
-} from "./app/custom-components";
 export {
   type WsComponentPropsMeta,
   type WsComponentMeta,
   type ComponentState,
+  type PresetStyle,
   componentCategories,
   stateCategories,
 } from "./components/component-meta";
 export * from "./embed-template";
+export { usePropUrl, getInstanceIdFromComponentProps } from "./props";

package/src/props.test.ts

@@ -31,7 +31,6 @@ describe("resolveUrlProp", () => {
     id: unique(),
     name: unique(),
     type: "image",
-    location: "REMOTE",
     projectId,
     format: "png",
     size: 100000,

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

@@ -3,7 +3,7 @@ import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Instance, Instances } from "@webstudio-is/project-build";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
@@ -18,7 +18,7 @@ export const createElementsTree = ({
   assetsStore,
   pagesStore,
   Component,
-  getComponent,
+  components,
 }: {
   renderer?: "canvas";
   instances: Instances;
@@ -27,7 +27,7 @@ export const createElementsTree = ({
   assetsStore: ReadableAtom<Assets>;
   pagesStore: ReadableAtom<Pages>;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
-  getComponent: GetComponent;
+  components: Components;
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === undefined) {
@@ -40,7 +40,7 @@ export const createElementsTree = ({
     instanceSelector: rootInstanceSelector,
     Component,
     children: rootInstance.children,
-    getComponent,
+    components,
   });
   const root = createInstanceElement({
     Component,
@@ -53,7 +53,7 @@ export const createElementsTree = ({
         <Scripts />
       </Fragment>,
     ],
-    getComponent,
+    components,
   });
   return (
     <ReactSdkContext.Provider
@@ -69,13 +69,13 @@ const createInstanceChildrenElements = ({
   instanceSelector,
   children,
   Component,
-  getComponent,
+  components,
 }: {
   instances: Instances;
   instanceSelector: InstanceSelector;
   children: Instance["children"];
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
-  getComponent: GetComponent;
+  components: Components;
 }) => {
   const elements = [];
   for (const child of children) {
@@ -93,14 +93,14 @@ const createInstanceChildrenElements = ({
       instanceSelector: childInstanceSelector,
       children: childInstance.children,
       Component,
-      getComponent,
+      components,
     });
     const element = createInstanceElement({
       instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children,
-      getComponent,
+      components,
     });
     elements.push(element);
   }
@@ -112,20 +112,20 @@ const createInstanceElement = ({
   instance,
   instanceSelector,
   children = [],
-  getComponent,
+  components,
 }: {
   instance: Instance;
   instanceSelector: InstanceSelector;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;
-  getComponent: GetComponent;
+  components: Components;
 }) => {
   return (
     <Component
       key={instance.id}
       instance={instance}
       instanceSelector={instanceSelector}
-      getComponent={getComponent}
+      components={components}
     >
       {children}
     </Component>

package/src/tree/root.ts

@@ -4,11 +4,9 @@ import type { Build, Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
 import { WebstudioComponent } from "./webstudio-component";
-import { registerComponents } from "../components";
-import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams, type Params } from "../app/params";
 import { getPropsByInstanceId } from "../props";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 
 export type Data = {
   page: Page;
@@ -25,18 +23,15 @@ export type RootPropsData = Omit<Data, "build"> & {
 type RootProps = {
   data: RootPropsData;
   Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
-  customComponents?: Parameters<typeof registerComponents>[0];
-  getComponent: GetComponent;
+  components: Components;
 };
 
 export const InstanceRoot = ({
   data,
   Component,
-  customComponents = defaultCustomComponents,
-  getComponent,
+  components,
 }: RootProps): JSX.Element | null => {
   setParams(data.params);
-  registerComponents(customComponents);
   return createElementsTree({
     instances: new Map(data.build.instances),
     rootInstanceId: data.page.rootInstanceId,
@@ -46,6 +41,6 @@ export const InstanceRoot = ({
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? WebstudioComponent,
-    getComponent,
+    components,
   });
 };

package/src/tree/webstudio-component.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from "react";
 import type { Instance } from "@webstudio-is/project-build";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 import { useInstanceProps } from "../props";
 
 const renderText = (text: string): Array<JSX.Element> => {
@@ -30,14 +30,14 @@ type WebstudioComponentProps = {
   instance: Instance;
   instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
-  getComponent: GetComponent;
+  components: Components;
 };
 
 export const WebstudioComponent = ({
   instance,
   instanceSelector,
   children,
-  getComponent,
+  components,
   ...rest
 }: WebstudioComponentProps) => {
   const instanceProps = useInstanceProps(instance.id);
@@ -47,7 +47,7 @@ export const WebstudioComponent = ({
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component,
   };
-  const Component = getComponent(instance.component);
+  const Component = components.get(instance.component);
   if (Component === undefined) {
     return <></>;
   }