@webstudio-is/react-sdk 0.57.0 → 0.58.0

package/src/props.test.ts

@@ -56,6 +56,22 @@ describe("resolveUrlProp", () => {
     value: page1.id,
   };
 
+  const instnaceIdProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId: unique(),
+    name: "id",
+    value: unique(),
+  };
+
+  const pageSectionProp: Prop = {
+    type: "page",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId },
+  };
+
   const pageByPathProp: Prop = {
     type: "string",
     id: unique(),
@@ -73,7 +89,17 @@ describe("resolveUrlProp", () => {
   };
 
   const props: PropsByInstanceId = new Map([
-    [instanceId, [pageByIdProp, pageByPathProp, arbitraryUrlProp, assetProp]],
+    [
+      instanceId,
+      [
+        pageByIdProp,
+        pageByPathProp,
+        arbitraryUrlProp,
+        assetProp,
+        pageSectionProp,
+      ],
+    ],
+    [instnaceIdProp.instanceId, [instnaceIdProp]],
   ]);
 
   const pages: Pages = new Map([
@@ -116,6 +142,15 @@ describe("resolveUrlProp", () => {
     });
   });
 
+  test("section on a page", () => {
+    expect(resolveUrlProp(instanceId, pageSectionProp.name, stores)).toEqual({
+      type: "page",
+      page: page1,
+      instanceId: instnaceIdProp.instanceId,
+      hash: instnaceIdProp.value,
+    });
+  });
+
   test("arbitrary url", () => {
     expect(resolveUrlProp(instanceId, arbitraryUrlProp.name, stores)).toEqual({
       type: "string",

package/src/props.ts

@@ -32,7 +32,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   const instancePropsObject: Record<Prop["name"], Prop["value"]> = {};
   if (instanceProps) {
     for (const prop of instanceProps) {
-      if (prop.type !== "asset") {
+      if (prop.type !== "asset" && prop.type !== "page") {
         instancePropsObject[prop.name] = prop.value;
       }
     }
@@ -74,7 +74,12 @@ export const resolveUrlProp = (
     assets,
   }: { props: PropsByInstanceId; pages: Pages; assets: Assets }
 ):
-  | { type: "page"; page: Page }
+  | {
+      type: "page";
+      page: Page;
+      instanceId?: Instance["id"];
+      hash?: string;
+    }
   | { type: "asset"; asset: Asset }
   | { type: "string"; url: string }
   | undefined => {
@@ -88,8 +93,30 @@ export const resolveUrlProp = (
     }
 
     if (prop.type === "page") {
-      const page = pages.get(prop.value);
-      return page && { type: "page", page };
+      if (typeof prop.value === "string") {
+        const page = pages.get(prop.value);
+        return page && { type: "page", page };
+      }
+
+      const { instanceId, pageId } = prop.value;
+
+      const page = pages.get(pageId);
+
+      if (page === undefined) {
+        return;
+      }
+
+      const idProp = props.get(instanceId)?.find((prop) => prop.name === "id");
+
+      return {
+        type: "page",
+        page,
+        instanceId,
+        hash:
+          idProp === undefined || idProp.type !== "string"
+            ? undefined
+            : idProp.value,
+      };
     }
 
     if (prop.type === "string") {
@@ -115,7 +142,7 @@ export const resolveUrlProp = (
 export const usePropUrl = (instanceId: Instance["id"], name: string) => {
   const { propsByInstanceIdStore, pagesStore, assetsStore } =
     useContext(ReactSdkContext);
-  const pageStore = useMemo(
+  const store = useMemo(
     () =>
       computed(
         [propsByInstanceIdStore, pagesStore, assetsStore],
@@ -124,7 +151,7 @@ export const usePropUrl = (instanceId: Instance["id"], name: string) => {
       ),
     [propsByInstanceIdStore, pagesStore, assetsStore, instanceId, name]
   );
-  return useStore(pageStore);
+  return useStore(store);
 };
 
 export const getInstanceIdFromComponentProps = (