@webstudio-is/react-sdk 0.49.0 → 0.51.0

package/lib/components/list-item.ws.js

@@ -1,6 +1,7 @@
 import { ListItemIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list-item.props";
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,

package/lib/components/list.ws.js

@@ -15,6 +15,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "container",
   label: "List",
   Icon: ListIcon,

package/lib/components/paragraph.js

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

package/lib/components/paragraph.ws.js

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

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

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

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

@@ -1,13 +1,17 @@
 import { props } from "./__generated__/rich-text-link.props";
-import { meta as linkMeta, propsMeta as propsLinkMeta } from "./link.ws";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
+const { category, ...linkMetaRest } = linkMeta;
 const meta = {
-  ...linkMeta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: []
 };
 const propsMeta = {
-  ...propsLinkMeta,
-  props
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  }
 };
 export {
   meta,

package/lib/components/separator.ws.js

@@ -15,6 +15,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "embed",
   label: "Separator",
   Icon: DashIcon,

package/lib/components/slot.js

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

package/lib/components/slot.ws.js

@@ -0,0 +1,14 @@
+import { SlotComponentIcon } from "@webstudio-is/icons";
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  Icon: SlotComponentIcon
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/span.js

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

package/lib/components/subscript.js

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

package/lib/components/superscript.js

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

package/lib/components/text-block.js

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

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

@@ -8,6 +8,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,

package/lib/context.js

@@ -2,7 +2,8 @@ import { atom } from "nanostores";
 import { createContext } from "react";
 const ReactSdkContext = createContext({
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
-  assetsStore: atom(/* @__PURE__ */ new Map())
+  assetsStore: atom(/* @__PURE__ */ new Map()),
+  pagesStore: atom(/* @__PURE__ */ new Map())
 });
 export {
   ReactSdkContext

package/lib/css/categories.js

@@ -1,10 +1,13 @@
 const layout = [
   "display",
+  // Flex
   "flexDirection",
   "flexWrap",
+  // Flex or grid
   "alignItems",
   "justifyContent",
   "alignContent",
+  // Grid
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -85,6 +88,7 @@ const typography = [
   "direction",
   "whiteSpace",
   "textShadow",
+  // More
   "fontSizeAdjust",
   "fontStretch",
   "fontVariant",
@@ -125,6 +129,7 @@ const borders = [
   "borderRightWidth",
   "borderBottomWidth",
   "borderLeftWidth",
+  // More
   "borderImageSlice",
   "borderImageWidth",
   "borderImageOutset",
@@ -143,6 +148,7 @@ const effects = [
   "filter",
   "backdropFilter",
   "cursor",
+  // More
   "animationDelay",
   "animationDirection",
   "animationDuration",

package/lib/index.js

@@ -10,7 +10,11 @@ import {
   customComponentMetas,
   customComponentPropsMetas
 } from "./app/custom-components";
+import {
+  componentCategories
+} from "./components/component-meta";
 export {
+  componentCategories,
   customComponentMetas,
   customComponentPropsMetas,
   customComponents

package/lib/props.js

@@ -2,6 +2,7 @@ import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { ReactSdkContext } from "./context";
+import { idAttribute } from "./tree/webstudio-component";
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -36,7 +37,7 @@ const usePropAsset = (instanceId, name) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
-          return void 0;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -50,8 +51,48 @@ const usePropAsset = (instanceId, name) => {
   const asset = useStore(assetStore);
   return asset;
 };
+const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+    return;
+  }
+};
+const usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore } = useContext(ReactSdkContext);
+  const pageStore = useMemo(
+    () => computed(
+      [propsByInstanceIdStore, pagesStore],
+      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+    ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return useStore(pageStore);
+};
+const getInstanceIdFromComponentProps = (props) => {
+  return props[idAttribute];
+};
 export {
+  getInstanceIdFromComponentProps,
   getPropsByInstanceId,
+  resolveUrlProp,
   useInstanceProps,
-  usePropAsset
+  usePropAsset,
+  usePropUrl
 };

package/lib/pubsub/create.js

@@ -14,10 +14,16 @@ const createPubsub = () => {
     );
   }
   return {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
     publish(action) {
       window.parent.postMessage(action, "*");
       window.postMessage(action, "*");
     },
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
     usePublish() {
       const iframeRef = useRef(null);
       const publishCallback = useCallback(
@@ -33,6 +39,9 @@ const createPubsub = () => {
       );
       return [publishCallback, iframeRef];
     },
+    /**
+     * To subscribe a message event on the current window.
+     */
     useSubscribe(type, onAction) {
       useEffect(() => {
         emitter.on(type, onAction);

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

@@ -8,35 +8,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__ */ jsxs(Fragment, {
-        children: [
-          children,
-          sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
-          /* @__PURE__ */ jsx(ScrollRestoration, {}),
-          /* @__PURE__ */ jsx(Scripts, {})
-        ]
-      }, "children")
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
+        /* @__PURE__ */ jsx(ScrollRestoration, {}),
+        /* @__PURE__ */ jsx(Scripts, {})
+      ] }, "children")
     ],
     getComponent
   });
-  return /* @__PURE__ */ jsx(ReactSdkContext.Provider, {
-    value: { propsByInstanceIdStore, assetsStore },
-    children: body
-  });
+  return /* @__PURE__ */ jsx(
+    ReactSdkContext.Provider,
+    {
+      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      children: root
+    }
+  );
 };
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent
@@ -47,13 +53,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
@@ -65,18 +74,20 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent
-  };
-  return /* @__PURE__ */ jsx(Component, {
-    ...props
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      getComponent,
+      children
+    },
+    instance.id
+  );
 };
 export {
   createElementsTree

package/lib/tree/root.js

@@ -52,6 +52,7 @@ const InstanceRoot = ({
       getPropsByInstanceId(new Map(data.build.props))
     ),
     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
   });

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

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

package/lib/tree/webstudio-component.js

@@ -3,12 +3,10 @@ import { Fragment as Fragment2 } from "react";
 import { useInstanceProps } from "../props";
 const renderText = (text) => {
   const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, {
-    children: [
-      line,
-      index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-    ]
-  }, index));
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+    line,
+    index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+  ] }, index));
 };
 const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
@@ -35,10 +33,7 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Component, {
-    ...props,
-    children: renderWebstudioComponentChildren(children)
-  });
+  return /* @__PURE__ */ jsx(Component, { ...props, children: renderWebstudioComponentChildren(children) });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "1.12.0",
-    "@remix-run/react": "1.12.0",
-    "@remix-run/server-runtime": "1.12.0",
+    "@remix-run/node": "1.14.3",
+    "@remix-run/react": "1.14.3",
+    "@remix-run/server-runtime": "1.14.3",
     "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "esbuild": "^0.14.25",
-    "esbuild-node-externals": "^1.4.1",
     "jest": "^29.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
-    "tsx": "^3.9.0",
     "typescript": "4.9.5",
     "zod": "^3.19.1",
     "@webstudio-is/jest-config": "^1.0.2",
@@ -44,14 +40,14 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.49.0",
-    "@webstudio-is/css-data": "^0.49.0",
-    "@webstudio-is/css-vars": "^0.49.0",
-    "@webstudio-is/generate-arg-types": "^0.49.0",
-    "@webstudio-is/icons": "^0.49.0",
-    "@webstudio-is/image": "^0.49.0",
-    "@webstudio-is/prisma-client": "^0.49.0",
-    "@webstudio-is/project-build": "^0.49.0"
+    "@webstudio-is/asset-uploader": "^0.51.0",
+    "@webstudio-is/css-data": "^0.51.0",
+    "@webstudio-is/css-vars": "^0.51.0",
+    "@webstudio-is/generate-arg-types": "^0.51.0",
+    "@webstudio-is/icons": "^0.51.0",
+    "@webstudio-is/image": "^0.51.0",
+    "@webstudio-is/prisma-client": "^0.51.0",
+    "@webstudio-is/project-build": "^0.51.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/image.tsx

@@ -1,24 +1,21 @@
 import {
   forwardRef,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithoutRef,
   type ElementRef,
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/webstudio-component";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
 
 const defaultTag = "img";
 
-type Props = ComponentProps<typeof WebstudioImage> & { [idAttribute]: string };
+type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
 
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
-    const componentId = props[idAttribute] as string;
-
-    const asset = usePropAsset(componentId, "src");
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const params = getParams();
 
     const loader = useMemo(() => {

package/src/app/custom-components/index.ts

@@ -3,7 +3,7 @@ import { Link } from "./link";
 import { LinkBlock } from "./link-block";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
-import type { WsComponentPropsMeta } from "../../components/component-type";
+import type { WsComponentPropsMeta } from "../../components/component-meta";
 
 export const customComponents = {
   Image,

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

@@ -1,59 +1,23 @@
-import { Link } from "@remix-run/react";
-import type {
-  ElementRef,
-  ComponentProps,
-  RefAttributes,
-  ForwardRefExoticComponent,
-} from "react";
+import { Link as RemixLink } from "@remix-run/react";
+import type { ComponentPropsWithoutRef } from "react";
 import { forwardRef } from "react";
-import type { Link as BaseLink } from "../../../components/link";
+import type { Link } from "../../../components/link";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 
-const isAbsoluteUrl = (href: string) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Remix's check for absolute URL copied from here:
-// https://github.com/remix-run/react-router/blob/react-router-dom%406.8.0/packages/react-router-dom/index.tsx#L423-L424
-const isAbsoluteUrlRemix = (href: string) =>
-  /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
-
-type Props = ComponentProps<typeof BaseLink>;
-
-type Ref = ElementRef<"a">;
-
-export const wrapLinkComponent = (
-  BaseLink: ForwardRefExoticComponent<Props & RefAttributes<Ref>>
-) => {
-  // We're not actually wrapping BaseLink (no way to wrap with Remix's Link),
-  // but this is still useful because we're making sure that props/ref types are compatible
-  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
+type LinkComponent = typeof Link;
+type LinkProps = ComponentPropsWithoutRef<LinkComponent>;
 
-    // This is a workaround for a bug in Remix: https://github.com/remix-run/remix/issues/5440
-    // It has a buggy absolute URL detection, which gives false positives on value like "//" or "http://"
-    // and causes entire app to crash
-    const willRemixTryToTreatAsAbsoluteAndCrash =
-      isAbsolute === false && isAbsoluteUrlRemix(href);
+export const wrapLinkComponent = (BaseLink: LinkComponent) => {
+  const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return (
-        <BaseLink
-          {...props}
-          href={willRemixTryToTreatAsAbsoluteAndCrash ? "" : href}
-          ref={ref}
-        />
-      );
+    if (typeof href === "string" || href === undefined) {
+      return <BaseLink {...props} ref={ref} />;
     }
 
-    return <Link {...props} to={href} ref={ref} />;
+    return <RemixLink {...props} to={href.path} ref={ref} />;
   });
 
-  // This is the only part that we use from BaseLink at runtime
   Component.displayName = BaseLink.displayName;
 
   return Component;