@webstudio-is/react-sdk 0.49.0 → 0.51.0

package/src/context.tsx

@@ -1,11 +1,13 @@
 import { type ReadableAtom, atom } from "nanostores";
 import { createContext } from "react";
-import type { Assets, PropsByInstanceId } from "./props";
+import type { Assets, Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
 }>({
   propsByInstanceIdStore: atom(new Map()),
   assetsStore: atom(new Map()),
+  pagesStore: atom(new Map()),
 });

package/src/index.ts

@@ -10,7 +10,8 @@ export {
   customComponentMetas,
   customComponentPropsMetas,
 } from "./app/custom-components";
-export type {
-  WsComponentPropsMeta,
-  WsComponentMeta,
-} from "./components/component-type";
+export {
+  type WsComponentPropsMeta,
+  type WsComponentMeta,
+  componentCategories,
+} from "./components/component-meta";

package/src/props.test.ts

@@ -0,0 +1,95 @@
+import { describe, test, expect } from "@jest/globals";
+import { resolveUrlProp, type Pages, type PropsByInstanceId } from "./props";
+import type { Page, Prop } from "@webstudio-is/project-build";
+
+const unique = () => Math.random().toString();
+
+describe("resolveUrlProp", () => {
+  const instanceId = unique();
+
+  const page1: Page = {
+    id: unique(),
+    path: `/${unique()}`,
+    name: "",
+    title: "",
+    meta: {},
+    rootInstanceId: "0",
+  };
+
+  const page2: Page = {
+    id: unique(),
+    path: `/${unique()}`,
+    name: "",
+    title: "",
+    meta: {},
+    rootInstanceId: "0",
+  };
+
+  const pageByIdProp: Prop = {
+    type: "page",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: page1.id,
+  };
+
+  const pageByPathProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: page2.path,
+  };
+
+  const arbitraryUrlProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: unique(),
+  };
+
+  const propsByInstanceId: PropsByInstanceId = new Map([
+    [instanceId, [pageByIdProp, pageByPathProp, arbitraryUrlProp]],
+  ]);
+
+  const pages: Pages = new Map([
+    [page1.id, page1],
+    [page2.id, page2],
+  ]);
+
+  test("if instanceId is unknown returns undefined", () => {
+    expect(
+      resolveUrlProp("unknown", pageByIdProp.name, propsByInstanceId, pages)
+    ).toBeUndefined();
+  });
+
+  test("if prop name is unknown returns undefined", () => {
+    expect(
+      resolveUrlProp(instanceId, "unknown", propsByInstanceId, pages)
+    ).toBeUndefined();
+  });
+
+  test("page by id", () => {
+    expect(
+      resolveUrlProp(instanceId, pageByIdProp.name, propsByInstanceId, pages)
+    ).toBe(page1);
+  });
+
+  test("page by path", () => {
+    expect(
+      resolveUrlProp(instanceId, pageByPathProp.name, propsByInstanceId, pages)
+    ).toBe(page2);
+  });
+
+  test("arbitrary url", () => {
+    expect(
+      resolveUrlProp(
+        instanceId,
+        arbitraryUrlProp.name,
+        propsByInstanceId,
+        pages
+      )
+    ).toBe(arbitraryUrlProp.value);
+  });
+});

package/src/props.ts

@@ -1,13 +1,15 @@
 import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import type { Instance, Prop, Props } from "@webstudio-is/project-build";
+import type { Instance, Page, Prop, Props } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { ReactSdkContext } from "./context";
+import { idAttribute } from "./tree/webstudio-component";
 
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 
 export type Assets = Map<Asset["id"], Asset>;
+export type Pages = Map<Page["id"], Page>;
 
 export const getPropsByInstanceId = (props: Props) => {
   const propsByInstanceId: PropsByInstanceId = new Map();
@@ -39,7 +41,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   return instancePropsObject;
 };
 
-// this utility is be used for image component in both builder and preview
+// this utility is used for image component in both builder and preview
 // so need to optimize rerenders with computed
 export const usePropAsset = (instanceId: Instance["id"], name: string) => {
   const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
@@ -49,7 +51,7 @@ export const usePropAsset = (instanceId: Instance["id"], name: string) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === undefined) {
-          return undefined;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -63,3 +65,57 @@ export const usePropAsset = (instanceId: Instance["id"], name: string) => {
   const asset = useStore(assetStore);
   return asset;
 };
+
+export const resolveUrlProp = (
+  instanceId: Instance["id"],
+  name: string,
+  propsByInstanceId: PropsByInstanceId,
+  pages: Pages
+): Page | string | undefined => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === undefined) {
+    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;
+  }
+};
+
+// this utility is used for link component in both builder and preview
+// so need to optimize rerenders with computed
+export const usePropUrl = (instanceId: Instance["id"], name: string) => {
+  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);
+};
+
+export const getInstanceIdFromComponentProps = (
+  props: Record<string, unknown>
+) => {
+  return props[idAttribute] as string;
+};

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

@@ -4,15 +4,18 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Instance } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
-import type { Assets, PropsByInstanceId } from "../props";
+import type { Assets, Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
+type InstanceSelector = Instance["id"][];
+
 export const createElementsTree = ({
   sandbox,
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent,
 }: {
@@ -20,17 +23,21 @@ export const createElementsTree = ({
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: 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: [
       <Fragment key="children">
         {children}
@@ -42,17 +49,21 @@ export const createElementsTree = ({
     getComponent,
   });
   return (
-    <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
-      {body}
+    <ReactSdkContext.Provider
+      value={{ propsByInstanceIdStore, assetsStore, pagesStore }}
+    >
+      {root}
     </ReactSdkContext.Provider>
   );
 };
 
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent,
 }: {
+  instanceSelector: InstanceSelector;
   children: Instance["children"];
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
@@ -63,13 +74,16 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
+    const childInstanceSelector = [child.id, ...instanceSelector];
     const children = createInstanceChildrenElements({
+      instanceSelector: childInstanceSelector,
       children: child.children,
       Component,
       getComponent,
     });
     const element = createInstanceElement({
       instance: child,
+      instanceSelector: childInstanceSelector,
       Component,
       children,
       getComponent,
@@ -82,20 +96,24 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent,
 }: {
   instance: Instance;
+  instanceSelector: InstanceSelector;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;
   getComponent: GetComponent;
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent,
-  };
-
-  return <Component {...props} />;
+  return (
+    <Component
+      key={instance.id}
+      instance={instance}
+      instanceSelector={instanceSelector}
+      getComponent={getComponent}
+    >
+      {children}
+    </Component>
+  );
 };

package/src/tree/root.ts

@@ -18,6 +18,7 @@ import type { GetComponent } from "../components/components-utils";
 
 export type Data = {
   page: Page;
+  pages: Array<Page>;
   build: Build;
   assets: Array<Asset>;
   params?: Params;
@@ -86,6 +87,7 @@ export 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/src/tree/webstudio-component.tsx

@@ -28,6 +28,7 @@ export const renderWebstudioComponentChildren = (
 
 type WebstudioComponentProps = {
   instance: Instance;
+  instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   getComponent: GetComponent;
 };

package/lib/components/component-type.js

@@ -1,20 +0,0 @@
-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 WsComponentMeta = z.object({
-  type: z.enum([
-    "body",
-    "container",
-    "control",
-    "embed",
-    "rich-text",
-    "rich-text-child"
-  ]),
-  label: z.string(),
-  Icon: z.any(),
-  presetStyle: z.optional(z.any()),
-  children: z.optional(z.array(z.string()))
-});