@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/src/css/style-rules.test.ts

@@ -0,0 +1,147 @@
+import { test, expect } from "@jest/globals";
+import type {
+  Styles,
+  StyleSourceSelections,
+} from "@webstudio-is/project-build";
+import { getStyleRules } from "./style-rules";
+
+test("compute styles from different style sources", () => {
+  const styles: Styles = new Map([
+    [
+      "styleSource1:a:width",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource1",
+        property: "width",
+        value: { type: "unit", value: 10, unit: "px" },
+      },
+    ],
+    [
+      "styleSource2:a:display",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource2",
+        property: "display",
+        value: { type: "keyword", value: "block" },
+      },
+    ],
+    [
+      "styleSource4:a:color",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource4",
+        property: "color",
+        value: { type: "keyword", value: "green" },
+      },
+    ],
+    [
+      "styleSource4:a:width",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource4",
+        property: "width",
+        value: { type: "keyword", value: "min-content" },
+      },
+    ],
+    [
+      "styleSource3:a:color",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource3",
+        property: "color",
+        value: { type: "keyword", value: "red" },
+      },
+    ],
+    [
+      "styleSource5:b:color",
+      {
+        breakpointId: "b",
+        styleSourceId: "styleSource5",
+        property: "color",
+        value: { type: "keyword", value: "orange" },
+      },
+    ],
+    [
+      "styleSource6:a:color",
+      {
+        breakpointId: "a",
+        styleSourceId: "styleSource6",
+        property: "color",
+        value: { type: "keyword", value: "blue" },
+      },
+    ],
+  ]);
+  const styleSourceSelections: StyleSourceSelections = new Map([
+    [
+      "instance1",
+      {
+        instanceId: "instance1",
+        values: ["styleSource1"],
+      },
+    ],
+    [
+      "instance2",
+      {
+        instanceId: "instance2",
+        values: ["styleSource4", "styleSource5", "styleSource3"],
+      },
+    ],
+    [
+      "instance3",
+      {
+        instanceId: "instance3",
+        values: ["styleSource6"],
+      },
+    ],
+  ]);
+
+  expect(getStyleRules(styles, styleSourceSelections)).toMatchInlineSnapshot(`
+    [
+      {
+        "breakpointId": "a",
+        "instanceId": "instance1",
+        "style": {
+          "width": {
+            "type": "unit",
+            "unit": "px",
+            "value": 10,
+          },
+        },
+      },
+      {
+        "breakpointId": "a",
+        "instanceId": "instance2",
+        "style": {
+          "color": {
+            "type": "keyword",
+            "value": "red",
+          },
+          "width": {
+            "type": "keyword",
+            "value": "min-content",
+          },
+        },
+      },
+      {
+        "breakpointId": "b",
+        "instanceId": "instance2",
+        "style": {
+          "color": {
+            "type": "keyword",
+            "value": "orange",
+          },
+        },
+      },
+      {
+        "breakpointId": "a",
+        "instanceId": "instance3",
+        "style": {
+          "color": {
+            "type": "keyword",
+            "value": "blue",
+          },
+        },
+      },
+    ]
+  `);
+});

package/src/css/style-rules.ts

@@ -0,0 +1,66 @@
+import type { Style } from "@webstudio-is/css-data";
+import type {
+  Breakpoint,
+  StyleDecl,
+  Styles,
+  StyleSource,
+  StyleSourceSelections,
+} from "@webstudio-is/project-build";
+
+type StyleRule = {
+  instanceId: string;
+  breakpointId: string;
+  style: Style;
+};
+
+/**
+ * Merge styles from different style sources
+ * and group by instance and breakpoint
+ */
+export const getStyleRules = (
+  styles: Styles,
+  styleSourceSelections: StyleSourceSelections
+) => {
+  if (styles === undefined || styleSourceSelections === undefined) {
+    return [];
+  }
+  const stylesByStyleSourceId = new Map<StyleSource["id"], StyleDecl[]>();
+  for (const styleDecl of styles.values()) {
+    const { styleSourceId } = styleDecl;
+    let styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+    // instance can be undefined when style is from other tree
+    if (styleSourceStyles === undefined) {
+      styleSourceStyles = [];
+      stylesByStyleSourceId.set(styleSourceId, styleSourceStyles);
+    }
+    styleSourceStyles.push(styleDecl);
+  }
+
+  const styleRules: StyleRule[] = [];
+  for (const { instanceId, values } of styleSourceSelections.values()) {
+    const styleRuleByBreakpointId = new Map<Breakpoint["id"], StyleRule>();
+
+    for (const styleSourceId of values) {
+      const styleSourceStyles = stylesByStyleSourceId.get(styleSourceId);
+      // instance can be undefined when style is from other tree
+      if (styleSourceStyles === undefined) {
+        continue;
+      }
+      for (const { breakpointId, property, value } of styleSourceStyles) {
+        let styleRule = styleRuleByBreakpointId.get(breakpointId);
+        if (styleRule === undefined) {
+          styleRule = {
+            instanceId,
+            breakpointId,
+            style: {},
+          };
+          styleRuleByBreakpointId.set(breakpointId, styleRule);
+        }
+        styleRule.style[property] = value;
+      }
+    }
+    styleRules.push(...styleRuleByBreakpointId.values());
+  }
+
+  return styleRules;
+};

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,13 @@
 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 { Asset } from "@webstudio-is/asset-uploader";
+import type { Instance, Page, Prop, Props } from "@webstudio-is/project-build";
 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 +39,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 +49,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 +63,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/pubsub/create.ts

@@ -1,5 +1,6 @@
-import mitt from "mitt";
+import { createNanoEvents } from "nanoevents";
 import { useCallback, useEffect, useRef } from "react";
+import { batchUpdate } from "./raf-queue";
 
 export const createPubsub = <PublishMap>() => {
   type Action<Type extends keyof PublishMap> =
@@ -7,9 +8,8 @@ export const createPubsub = <PublishMap>() => {
       ? { type: Type; payload?: PublishMap[Type] }
       : { type: Type; payload: PublishMap[Type] };
 
-  // `mitt` has a somewhat annoying overload for `*` type that makes it hard to wrap in a generic context
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const emitter = mitt<Record<any, any>>();
+  const emitter = createNanoEvents<Record<any, any>>();
 
   if (typeof window === "object") {
     window.addEventListener(
@@ -19,7 +19,8 @@ export const createPubsub = <PublishMap>() => {
         // we could potentially maintain a list of valid event types at runtime
         // at the very least we could add a brand property or something to our events
         if (typeof event.data?.type === "string") {
-          emitter.emit(event.data.type, event.data.payload);
+          // Execute all updates within a single batch to improve performance
+          batchUpdate(() => emitter.emit(event.data.type, event.data.payload));
         }
       },
       false
@@ -62,47 +63,15 @@ export const createPubsub = <PublishMap>() => {
       onAction: (payload: PublishMap[Type]) => void
     ) {
       useEffect(() => {
-        emitter.on(type, onAction);
-        return () => {
-          emitter.off(type, onAction);
-        };
+        return emitter.on(type, onAction);
       }, [type, onAction]);
     },
 
-    useSubscribeAll(
-      onAction: <Type extends keyof PublishMap>(
-        type: Type,
-        payload: PublishMap[Type]
-      ) => void
-    ) {
-      useEffect(() => {
-        emitter.on("*", onAction);
-        return () => {
-          emitter.off("*", onAction);
-        };
-      }, [onAction]);
-    },
-
     subscribe<Type extends keyof PublishMap>(
       type: Type,
       onAction: (payload: PublishMap[Type]) => void
     ) {
-      emitter.on(type, onAction);
-      return () => {
-        emitter.off(type, onAction);
-      };
-    },
-
-    subscribeAll(
-      onAction: <Type extends keyof PublishMap>(
-        type: Type,
-        payload: PublishMap[Type]
-      ) => void
-    ) {
-      emitter.on("*", onAction);
-      return () => {
-        emitter.off("*", onAction);
-      };
+      return emitter.on(type, onAction);
     },
   };
 };

package/src/pubsub/raf-queue.ts

@@ -0,0 +1,31 @@
+import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
+
+type Task = () => void;
+
+let handle: ReturnType<typeof requestAnimationFrame> | undefined;
+let updateQueue: Task[] = [];
+
+const processUpdates = (updates: Task[]) => {
+  // Prior to React v18, updates not called within React event handlers would not be batched
+  // To ensure all updates are batched into a single React update, we wrap them in a batchedUpdates callback
+  batchedUpdates(() => {
+    for (const update of updates) {
+      update();
+    }
+  });
+};
+
+export const batchUpdate = (update: () => void) => {
+  updateQueue.push(update);
+
+  if (handle !== undefined) {
+    return;
+  }
+
+  handle = requestAnimationFrame(() => {
+    const updates = updateQueue;
+    updateQueue = [];
+    handle = undefined;
+    processUpdates(updates);
+  });
+};

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

@@ -1,10 +1,11 @@
 import { type ComponentProps, Fragment } from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
+import type { Assets } from "@webstudio-is/asset-uploader";
 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 { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
@@ -15,6 +16,7 @@ export const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent,
 }: {
@@ -22,6 +24,7 @@ export const createElementsTree = ({
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
@@ -47,7 +50,9 @@ export const createElementsTree = ({
     getComponent,
   });
   return (
-    <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
+    <ReactSdkContext.Provider
+      value={{ propsByInstanceIdStore, assetsStore, pagesStore }}
+    >
       {root}
     </ReactSdkContext.Provider>
   );

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

@@ -35,6 +35,7 @@ type WebstudioComponentProps = {
 
 export const WebstudioComponent = ({
   instance,
+  instanceSelector,
   children,
   getComponent,
   ...rest