@webstudio-is/react-sdk 0.36.0 → 0.41.0

package/lib/components/__generated__/box.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/button.props.js

@@ -113,7 +113,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -376,7 +376,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/code.props.js

@@ -97,7 +97,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -360,7 +360,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/form.props.js

@@ -104,7 +104,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -367,7 +367,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/heading.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/image.props.js

@@ -137,7 +137,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -400,7 +400,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/input.props.js

@@ -134,7 +134,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -397,7 +397,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/italic.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/link.props.js

@@ -8,7 +8,13 @@ const props = {
   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,
@@ -120,7 +126,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -383,7 +389,7 @@ const props = {
   "aria-sort": {
     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"]
   },
@@ -410,6 +416,12 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"]
   }
 };
 export {

package/lib/components/__generated__/list-item.props.js

@@ -97,7 +97,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -360,7 +360,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/list.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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"]
   },
@@ -391,7 +391,7 @@ const props = {
   start: { required: false, control: "number", type: "number" },
   type: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["a", "i", "1", "A", "I"]
   },

package/lib/components/__generated__/paragraph.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/rich-text-link.props.js

@@ -3,12 +3,17 @@ const props = {
   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,
@@ -120,7 +125,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -383,7 +388,7 @@ const props = {
   "aria-sort": {
     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"]
   },
@@ -410,6 +415,12 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"]
   }
 };
 export {

package/lib/components/__generated__/separator.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/span.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/subscript.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/superscript.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/__generated__/text-block.props.js

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     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"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     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/lib/components/link.js

@@ -1,11 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const Link = forwardRef(
-  ({ href = "", ...props }, ref) => /* @__PURE__ */ jsx("a", {
-    ...props,
-    href,
-    ref
-  })
+  ({ href = "", target = "self", ...props }, ref) => {
+    return /* @__PURE__ */ jsx("a", {
+      ...props,
+      target: `_${target}`,
+      href,
+      ref
+    });
+  }
 );
 Link.displayName = "Link";
 export {

package/lib/components/link.ws.js

@@ -20,7 +20,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["href"]
+  initialProps: ["href", "target", "prefetch"]
 };
 export {
   meta,

package/lib/components/rich-text-link.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const RichTextLink = forwardRef(
-  ({ href = "", ...props }, ref) => /* @__PURE__ */ jsx("a", {
-    ...props,
-    href,
-    ref
-  })
-);
+import { Link } from "./link";
+const RichTextLink = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, {
+  ...props,
+  ref
+}));
 RichTextLink.displayName = "RichTextLink";
 export {
   RichTextLink

package/lib/tree/root.js

@@ -5,7 +5,7 @@ import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams } from "../app/params";
 import { getPropsByInstanceId } from "../props";
-const denormalizeTree = (instances) => {
+const denormalizeTree = (instances, rootInstanceId) => {
   const convertTree = (instance) => {
     const legacyInstance = {
       type: "instance",
@@ -25,7 +25,11 @@ const denormalizeTree = (instances) => {
     }
     return legacyInstance;
   };
-  return convertTree(Array.from(instances.values())[0]);
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    return void 0;
+  }
+  return convertTree(rootInstance);
 };
 const InstanceRoot = ({
   data,
@@ -33,15 +37,19 @@ const InstanceRoot = ({
   customComponents = defaultCustomComponents,
   getComponent
 }) => {
-  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 === void 0) {
+    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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.36.0",
+  "version": "0.41.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,14 +46,14 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.36.0",
-    "@webstudio-is/css-data": "^0.36.0",
-    "@webstudio-is/css-vars": "^0.36.0",
-    "@webstudio-is/generate-arg-types": "^0.36.0",
-    "@webstudio-is/icons": "^0.36.0",
-    "@webstudio-is/image": "^0.36.0",
-    "@webstudio-is/prisma-client": "^0.36.0",
-    "@webstudio-is/project-build": "^0.36.0"
+    "@webstudio-is/asset-uploader": "^0.41.0",
+    "@webstudio-is/css-data": "^0.41.0",
+    "@webstudio-is/css-vars": "^0.41.0",
+    "@webstudio-is/generate-arg-types": "^0.41.0",
+    "@webstudio-is/icons": "^0.41.0",
+    "@webstudio-is/image": "^0.41.0",
+    "@webstudio-is/prisma-client": "^0.41.0",
+    "@webstudio-is/project-build": "^0.41.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/shared/remix-link.tsx

@@ -6,12 +6,13 @@ import type {
   ForwardRefExoticComponent,
 } from "react";
 import { forwardRef } from "react";
+import type { Link as BaseLink } from "../../../components/link";
 
 const isAbsoluteUrl = (href: string) => {
   try {
     new URL(href);
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 };
@@ -21,7 +22,7 @@ const isAbsoluteUrl = (href: string) => {
 const isAbsoluteUrlRemix = (href: string) =>
   /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
 
-type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+type Props = ComponentProps<typeof BaseLink>;
 
 type Ref = ElementRef<"a">;
 
@@ -41,7 +42,7 @@ export const wrapLinkComponent = (
 
     if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
       return (
-        <a
+        <BaseLink
           {...props}
           href={willRemixTryToTreatAsAbsoluteAndCrash ? "" : href}
           ref={ref}

package/src/components/__generated__/blockquote.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__/body.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__/bold.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__/box.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"],
   },