@webstudio-is/react-sdk 0.49.0 → 0.51.0

package/lib/cjs/tree/create-elements-tree.cjs

@@ -31,35 +31,41 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent
 }) => {
+  const rootInstanceSelector = [instance.id];
   const children = createInstanceChildrenElements({
+    instanceSelector: rootInstanceSelector,
     Component,
     children: instance.children,
     getComponent
   });
-  const body = createInstanceElement({
+  const root = createInstanceElement({
     Component,
     instance,
+    instanceSelector: rootInstanceSelector,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-        children: [
-          children,
-          sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
-        ]
-      }, "children")
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        children,
+        sandbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_session_storage_polyfill.SessionStoragePolyfill, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.ScrollRestoration, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
+      ] }, "children")
     ],
     getComponent
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, {
-    value: { propsByInstanceIdStore, assetsStore },
-    children: body
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_context.ReactSdkContext.Provider,
+    {
+      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      children: root
+    }
+  );
 };
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent
@@ -70,13 +76,16 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
+    const childInstanceSelector = [child.id, ...instanceSelector];
     const children2 = createInstanceChildrenElements({
+      instanceSelector: childInstanceSelector,
       children: child.children,
       Component,
       getComponent
     });
     const element = createInstanceElement({
       instance: child,
+      instanceSelector: childInstanceSelector,
       Component,
       children: children2,
       getComponent
@@ -88,16 +97,18 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    ...props
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      getComponent,
+      children
+    },
+    instance.id
+  );
 };

package/lib/cjs/tree/root.cjs

@@ -75,6 +75,7 @@ const InstanceRoot = ({
       (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
+    pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? import_webstudio_component.WebstudioComponent,
     getComponent
   });

package/lib/cjs/tree/session-storage-polyfill.cjs

@@ -56,7 +56,10 @@ const polyfill = function() {
     });
   }
 }.toString();
-const SessionStoragePolyfill = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", {
-  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
-  suppressHydrationWarning: true
-});
+const SessionStoragePolyfill = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "script",
+  {
+    dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+    suppressHydrationWarning: true
+  }
+);

package/lib/cjs/tree/webstudio-component.cjs

@@ -30,12 +30,10 @@ var import_react = require("react");
 var import_props = require("../props");
 const renderText = (text) => {
   const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-    children: [
-      line,
-      index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
-    ]
-  }, index));
+  return lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    line,
+    index < lines.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}) : null
+  ] }, index));
 };
 const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
@@ -62,10 +60,7 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    ...props,
-    children: renderWebstudioComponentChildren(children)
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, children: renderWebstudioComponentChildren(children) });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";

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

@@ -0,0 +1,4 @@
+const props = {};
+export {
+  props
+};

package/lib/components/__generated__/link-block.props.js

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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: "" },
-  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" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -0,0 +1,4 @@
+const props = {};
+export {
+  props
+};

package/lib/components/blockquote.ws.js

@@ -39,6 +39,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,

package/lib/components/body.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "body";
-const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", {
-  ...props,
-  ref
-}));
+const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", { ...props, ref }));
 Body.displayName = "Body";
 export {
   Body

package/lib/components/body.ws.js

@@ -50,7 +50,7 @@ const presetStyle = {
   }
 };
 const meta = {
-  type: "body",
+  type: "container",
   label: "Body",
   Icon: BodyIcon,
   presetStyle

package/lib/components/bold.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "b";
-const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", {
-  ...props,
-  ref
-}));
+const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", { ...props, ref }));
 Bold.displayName = "Bold";
 export {
   Bold

package/lib/components/box.ws.js

@@ -7,6 +7,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Box",
   Icon: BoxIcon,

package/lib/components/button.js

@@ -7,12 +7,7 @@ const Button = forwardRef(
     innerText = "Edit Inner Text in Properties",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsx("button", {
-    type,
-    ...props,
-    ref,
-    children: children ? children : innerText
-  })
+  }, ref) => /* @__PURE__ */ jsx("button", { type, ...props, ref, children: children ? children : innerText })
 );
 Button.displayName = "Button";
 export {

package/lib/components/button.ws.js

@@ -1,6 +1,7 @@
 import { ButtonIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/button.props";
 const meta = {
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonIcon

package/lib/components/code.ws.js

@@ -30,6 +30,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Code",
   Icon: CodeIcon,

package/lib/components/component-meta.js

@@ -0,0 +1,34 @@
+import { z } from "zod";
+import { PropMeta } from "@webstudio-is/generate-arg-types";
+const WsComponentPropsMeta = z.object({
+  props: z.record(PropMeta),
+  initialProps: z.array(z.string()).optional()
+});
+const componentCategories = [
+  "general",
+  "typography",
+  "media",
+  "forms"
+];
+const WsComponentMeta = z.object({
+  category: z.enum(componentCategories).optional(),
+  // container - can accept other components with dnd
+  // control - usually form controls like inputs, without children
+  // embed - images, videos or other embeddable components, without children
+  // rich-text - editable text component
+  // rich-text-child - formatted text fragment, not listed in components list
+  type: z.enum([
+    "container",
+    "control",
+    "embed",
+    "rich-text",
+    "rich-text-child"
+  ]),
+  label: z.string(),
+  Icon: z.function(),
+  presetStyle: z.optional(z.any()),
+  children: z.optional(z.array(z.string()))
+});
+export {
+  componentCategories
+};

package/lib/components/components-utils.js

@@ -1,6 +1,8 @@
 import * as components from "./components";
 import { registeredComponents } from "./index";
 const componentNames = Object.keys({
+  Slot: 1,
+  Fragment: 1,
   Box: 1,
   Body: 1,
   TextBlock: 1,

package/lib/components/components.js

@@ -1,3 +1,5 @@
+import { Slot } from "./slot";
+import { Fragment } from "./fragment";
 import { Body } from "./body";
 import { Box } from "./box";
 import { TextBlock } from "./text-block";
@@ -28,6 +30,7 @@ export {
   Button,
   Code,
   Form,
+  Fragment,
   Heading,
   Image,
   Input,
@@ -39,6 +42,7 @@ export {
   Paragraph,
   RichTextLink,
   Separator,
+  Slot,
   Span,
   Subscript,
   Superscript,

package/lib/components/form.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "form";
-const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", {
-  ...props,
-  ref
-}));
+const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", { ...props, ref }));
 Form.displayName = "Form";
 export {
   Form

package/lib/components/form.ws.js

@@ -12,6 +12,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "forms",
   type: "container",
   label: "Form",
   Icon: FormIcon,

package/lib/components/fragment.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Fragment = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, style: { display: "contents" } });
+});
+Fragment.displayName = "Fragment";
+export {
+  Fragment
+};

package/lib/components/fragment.ws.js

@@ -0,0 +1,12 @@
+const meta = {
+  type: "container",
+  label: "Fragment",
+  Icon: () => null
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/heading.ws.js

@@ -1,6 +1,7 @@
 import { HeadingIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/heading.props";
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,

package/lib/components/image.js

@@ -3,11 +3,14 @@ import { forwardRef } from "react";
 const defaultTag = "img";
 const Image = forwardRef(
   (imageProps, ref) => {
-    return /* @__PURE__ */ jsx("img", {
-      ...imageProps,
-      src: imageProps.src || imagePlaceholderSvg,
-      ref
-    });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...imageProps,
+        src: imageProps.src || imagePlaceholderSvg,
+        ref
+      }
+    );
   }
 );
 Image.defaultProps = {

package/lib/components/image.ws.js

@@ -1,17 +1,21 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/image.props";
 const presetStyle = {
+  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
   maxWidth: {
     type: "unit",
     unit: "%",
     value: 100
   },
+  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
   display: {
     type: "keyword",
     value: "block"
   }
 };
 const meta = {
+  category: "media",
   type: "embed",
   label: "Image",
   Icon: ImageIcon,

package/lib/components/index.js

@@ -1,4 +1,6 @@
 import { PropMeta } from "@webstudio-is/generate-arg-types";
+import { meta as SlotMeta } from "./slot.ws";
+import { meta as FragmentMeta } from "./fragment.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -21,6 +23,8 @@ import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
 import { meta as CodeMeta } from "./code.ws";
+import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
+import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -44,6 +48,8 @@ import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
 import { propsMeta as CodePropsMeta } from "./code.ws";
 const defaultMetas = {
+  Slot: SlotMeta,
+  Fragment: FragmentMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -79,6 +85,8 @@ const registerComponentMetas = (overrides) => {
   currentMetas = result;
 };
 const defaultPropsMetasRaw = {
+  Slot: SlotMetaPropsMeta,
+  Fragment: FragmentMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,

package/lib/components/input.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "input";
-const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", {
-  ...props,
-  ref
-}));
+const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, ref }));
 Input.displayName = "Input";
 export {
   Input

package/lib/components/input.ws.js

@@ -1,6 +1,7 @@
 import { InputIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/input.props";
 const meta = {
+  category: "forms",
   type: "control",
   label: "Input",
   Icon: InputIcon

package/lib/components/italic.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "i";
-const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", {
-  ...props,
-  ref
-}));
+const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", { ...props, ref }));
 Italic.displayName = "Italic";
 export {
   Italic

package/lib/components/link-block.js

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

package/lib/components/link-block.ws.js

@@ -1,5 +1,6 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
+import { propsMeta as linkPropsMeta } from "./link.ws";
 const presetStyle = {
   boxSizing: {
     type: "keyword",
@@ -11,14 +12,18 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,
   presetStyle
 };
 const propsMeta = {
-  props,
-  initialProps: ["href", "target", "prefetch"]
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  },
+  initialProps: linkPropsMeta.initialProps
 };
 export {
   meta,

package/lib/components/link.js

@@ -1,14 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const Link = forwardRef(
-  ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ jsx("a", {
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+const Link = forwardRef((props, ref) => {
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
       ...props,
-      href,
+      href: typeof href === "string" ? href : href?.path,
       ref
-    });
-  }
-);
+    }
+  );
+});
 Link.displayName = "Link";
 export {
   Link

package/lib/components/link.ws.js

@@ -12,6 +12,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Link Text",
   Icon: Link2Icon,
@@ -19,7 +20,14 @@ const meta = {
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
+    }
+  },
   initialProps: ["href", "target", "prefetch"]
 };
 export {