@webstudio-is/react-sdk 0.36.0 → 0.41.0

package/src/components/__generated__/button.props.ts

@@ -120,7 +120,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -422,7 +422,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/code.props.ts

@@ -104,7 +104,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["inline", "list", "none", "both"],
   },
@@ -406,7 +406,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/form.props.ts

@@ -111,7 +111,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -413,7 +413,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/heading.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/image.props.ts

@@ -144,7 +144,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -446,7 +446,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/input.props.ts

@@ -141,7 +141,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -443,7 +443,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/italic.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/link.props.ts

@@ -10,7 +10,13 @@ export const props: Record<string, PropMeta> = {
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
   rel: { required: false, control: "text", type: "string" },
-  target: { required: false, control: "text", type: "string" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "self",
+    options: ["self", "blank", "parent", "top"],
+  },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,
@@ -127,7 +133,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -429,7 +435,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },
@@ -459,4 +465,10 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"],
+  },
 };

package/src/components/__generated__/list-item.props.ts

@@ -104,7 +104,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -406,7 +406,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/list.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },
@@ -439,7 +439,7 @@ export const props: Record<string, PropMeta> = {
   start: { required: false, control: "number", type: "number" },
   type: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["a", "i", "1", "A", "I"],
   },

package/src/components/__generated__/paragraph.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/rich-text-link.props.ts

@@ -5,12 +5,17 @@ export const props: Record<string, PropMeta> = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   download: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string", defaultValue: "" },
+  href: { required: false, control: "text", type: "string" },
   hrefLang: { required: false, control: "text", type: "string" },
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
   rel: { required: false, control: "text", type: "string" },
-  target: { required: false, control: "text", type: "string" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["self", "blank", "parent", "top"],
+  },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,
@@ -127,7 +132,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -429,7 +434,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },
@@ -459,4 +464,10 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"],
+  },
 };

package/src/components/__generated__/separator.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/span.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/subscript.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/superscript.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/__generated__/text-block.props.ts

@@ -103,7 +103,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"],
   },
@@ -405,7 +405,7 @@ export const props: Record<string, PropMeta> = {
     description:
       "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"],
   },

package/src/components/link.tsx

@@ -1,9 +1,18 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+// @todo props that come from remix link, shouldn't be here at all
+// - prefetch should be only on remix component and it already is
+// - props meta should be generated from Remix link
+type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
+  href?: string;
+  target?: "self" | "blank" | "parent" | "top";
+  prefetch?: "none" | "intent" | "render";
+};
 
 export const Link = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => <a {...props} href={href} ref={ref} />
+  ({ href = "", target = "self", ...props }, ref) => {
+    return <a {...props} target={`_${target}`} href={href} ref={ref} />;
+  }
 );
 
 Link.displayName = "Link";

package/src/components/link.ws.tsx

@@ -24,5 +24,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["href"],
+  initialProps: ["href", "target", "prefetch"],
 };

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

@@ -1,9 +1,10 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { Link } from "./link";
 
-type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+type Props = ComponentProps<typeof Link>;
 
-export const RichTextLink = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => <a {...props} href={href} ref={ref} />
-);
+export const RichTextLink = forwardRef<ElementRef<"a">, Props>((props, ref) => (
+  <Link {...props} ref={ref} />
+));
 
 RichTextLink.displayName = "RichTextLink";

package/src/tree/root.ts

@@ -1,10 +1,11 @@
 import type { ComponentProps } from "react";
 import { atom } from "nanostores";
 import type {
+  Build,
   Instance,
   Instances,
   InstancesItem,
-  Tree,
+  Page,
 } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
@@ -16,7 +17,8 @@ import { getPropsByInstanceId } from "../props";
 import type { GetComponent } from "../components/components-utils";
 
 export type Data = {
-  tree: Tree | null;
+  page: Page;
+  build: Build;
   assets: Array<Asset>;
   params?: Params;
 };
@@ -28,7 +30,10 @@ type RootProps = {
   getComponent: GetComponent;
 };
 
-const denormalizeTree = (instances: Instances) => {
+const denormalizeTree = (
+  instances: Instances,
+  rootInstanceId: Instance["id"]
+) => {
   const convertTree = (instance: InstancesItem) => {
     const legacyInstance: Instance = {
       type: "instance",
@@ -48,7 +53,11 @@ const denormalizeTree = (instances: Instances) => {
     }
     return legacyInstance;
   };
-  return convertTree(Array.from(instances.values())[0]);
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === undefined) {
+    return undefined;
+  }
+  return convertTree(rootInstance);
 };
 
 export const InstanceRoot = ({
@@ -57,18 +66,20 @@ export const InstanceRoot = ({
   customComponents = defaultCustomComponents,
   getComponent,
 }: RootProps): JSX.Element | null => {
-  if (data.tree === null) {
-    throw new Error("Tree is null");
-  }
-
   setParams(data.params ?? null);
 
   registerComponents(customComponents);
-
+  const instance = denormalizeTree(
+    new Map(data.build.instances),
+    data.page.rootInstanceId
+  );
+  if (instance === undefined) {
+    return null;
+  }
   return createElementsTree({
-    instance: denormalizeTree(new Map(data.tree.instances)),
+    instance,
     propsByInstanceIdStore: atom(
-      getPropsByInstanceId(new Map(data.tree.props))
+      getPropsByInstanceId(new Map(data.build.props))
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     Component: Component ?? WebstudioComponent,