@webstudio-is/react-sdk 0.51.0 → 0.52.0

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.ts

@@ -2,13 +2,11 @@ import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 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) => {

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, Pages, PropsByInstanceId } from "../props";
+import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 

package/src/tree/webstudio-component.tsx

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

package/lib/cjs/css/categories.cjs

@@ -1,250 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var categories_exports = {};
-__export(categories_exports, {
-  categories: () => categories,
-  propertyCategoryMap: () => propertyCategoryMap
-});
-module.exports = __toCommonJS(categories_exports);
-const layout = [
-  "display",
-  // Flex
-  "flexDirection",
-  "flexWrap",
-  // Flex or grid
-  "alignItems",
-  "justifyContent",
-  "alignContent",
-  // Grid
-  "justifyItems",
-  "rowGap",
-  "columnGap",
-  "gridAutoFlow",
-  "gridAutoRows",
-  "gridAutoColumns",
-  "gridTemplateColumns",
-  "gridTemplateRows",
-  "gridTemplateAreas"
-];
-const flexChild = [
-  "flexShrink",
-  "flexGrow",
-  "flexBasis",
-  "alignSelf",
-  "order"
-];
-const gridChild = [
-  "gridRowEnd",
-  "gridRowStart",
-  "gridColumnStart",
-  "gridColumnEnd",
-  "alignSelf",
-  "justifySelf",
-  "order"
-];
-const space = [
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft"
-];
-const size = [
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "overflow",
-  "objectFit",
-  "objectPosition",
-  "aspectRatio"
-];
-const position = [
-  "position",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "zIndex",
-  "float",
-  "clear"
-];
-const typography = [
-  "fontFamily",
-  "fontWeight",
-  "fontSize",
-  "lineHeight",
-  "color",
-  "textAlign",
-  "fontStyle",
-  "textDecorationColor",
-  "textDecorationLine",
-  "textDecorationStyle",
-  "letterSpacing",
-  "textIndent",
-  "columnCount",
-  "columnGap",
-  "columnRuleStyle",
-  "columnRuleWidth",
-  "columnRuleColor",
-  "textTransform",
-  "direction",
-  "whiteSpace",
-  "textShadow",
-  // More
-  "fontSizeAdjust",
-  "fontStretch",
-  "fontVariant",
-  "textAlignLast",
-  "textJustify",
-  "textOverflow",
-  "textSizeAdjust",
-  "verticalAlign",
-  "wordSpacing",
-  "wordBreak",
-  "wordWrap"
-];
-const backgrounds = [
-  "backgroundAttachment",
-  "backgroundClip",
-  "backgroundColor",
-  "backgroundImage",
-  "backgroundOrigin",
-  "backgroundPosition",
-  "backgroundRepeat",
-  "backgroundSize",
-  "backgroundBlendMode"
-];
-const borders = [
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-  "borderTopStyle",
-  "borderRightStyle",
-  "borderBottomStyle",
-  "borderLeftStyle",
-  "borderTopColor",
-  "borderRightColor",
-  "borderBottomColor",
-  "borderLeftColor",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  // More
-  "borderImageSlice",
-  "borderImageWidth",
-  "borderImageOutset",
-  "borderImageRepeat",
-  "borderImageSource"
-];
-const effects = [
-  "mixBlendMode",
-  "opacity",
-  "outlineColor",
-  "outlineOffset",
-  "outlineStyle",
-  "outlineWidth",
-  "boxShadow",
-  "transform",
-  "filter",
-  "backdropFilter",
-  "cursor",
-  // More
-  "animationDelay",
-  "animationDirection",
-  "animationDuration",
-  "animationFillMode",
-  "animationIterationCount",
-  "animationName",
-  "animationPlayState",
-  "animationTimingFunction",
-  "transitionDelay",
-  "transitionDuration",
-  "transitionProperty",
-  "transitionTimingFunction"
-];
-const other = [
-  "resize",
-  "clip",
-  "visibility",
-  "boxSizing",
-  "content",
-  "quotes",
-  "counterReset",
-  "counterIncrement",
-  "inlineSize",
-  "blockSize",
-  "minInlineSize",
-  "minBlockSize",
-  "maxInlineSize",
-  "maxBlockSize",
-  "userSelect",
-  "pointerEvents"
-];
-const categories = {
-  layout: {
-    label: "Layout",
-    properties: layout,
-    moreFrom: ""
-  },
-  flexChild: {
-    label: "Flex Child",
-    properties: flexChild,
-    moreFrom: ""
-  },
-  gridChild: {
-    label: "Grid Child",
-    properties: gridChild,
-    moreFrom: ""
-  },
-  space: { label: "Space", properties: space, moreFrom: "" },
-  size: { label: "Size", properties: size, moreFrom: "" },
-  position: { label: "Position", properties: position, moreFrom: "" },
-  typography: {
-    label: "Typography",
-    properties: typography,
-    moreFrom: "fontSizeAdjust"
-  },
-  backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
-  borders: {
-    label: "Borders",
-    properties: borders,
-    moreFrom: "borderImageSlice"
-  },
-  effects: {
-    label: "Effects",
-    properties: effects,
-    moreFrom: "animationDelay"
-  },
-  other: { label: "Other", properties: other, moreFrom: "" }
-};
-const propertyCategoryMap = {};
-let category;
-for (category in categories) {
-  for (const property of categories[category].properties) {
-    propertyCategoryMap[property] = category;
-  }
-}

package/lib/css/categories.js

@@ -1,230 +0,0 @@
-const layout = [
-  "display",
-  // Flex
-  "flexDirection",
-  "flexWrap",
-  // Flex or grid
-  "alignItems",
-  "justifyContent",
-  "alignContent",
-  // Grid
-  "justifyItems",
-  "rowGap",
-  "columnGap",
-  "gridAutoFlow",
-  "gridAutoRows",
-  "gridAutoColumns",
-  "gridTemplateColumns",
-  "gridTemplateRows",
-  "gridTemplateAreas"
-];
-const flexChild = [
-  "flexShrink",
-  "flexGrow",
-  "flexBasis",
-  "alignSelf",
-  "order"
-];
-const gridChild = [
-  "gridRowEnd",
-  "gridRowStart",
-  "gridColumnStart",
-  "gridColumnEnd",
-  "alignSelf",
-  "justifySelf",
-  "order"
-];
-const space = [
-  "marginTop",
-  "marginRight",
-  "marginBottom",
-  "marginLeft",
-  "paddingTop",
-  "paddingRight",
-  "paddingBottom",
-  "paddingLeft"
-];
-const size = [
-  "width",
-  "height",
-  "minWidth",
-  "minHeight",
-  "maxWidth",
-  "maxHeight",
-  "overflow",
-  "objectFit",
-  "objectPosition",
-  "aspectRatio"
-];
-const position = [
-  "position",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "zIndex",
-  "float",
-  "clear"
-];
-const typography = [
-  "fontFamily",
-  "fontWeight",
-  "fontSize",
-  "lineHeight",
-  "color",
-  "textAlign",
-  "fontStyle",
-  "textDecorationColor",
-  "textDecorationLine",
-  "textDecorationStyle",
-  "letterSpacing",
-  "textIndent",
-  "columnCount",
-  "columnGap",
-  "columnRuleStyle",
-  "columnRuleWidth",
-  "columnRuleColor",
-  "textTransform",
-  "direction",
-  "whiteSpace",
-  "textShadow",
-  // More
-  "fontSizeAdjust",
-  "fontStretch",
-  "fontVariant",
-  "textAlignLast",
-  "textJustify",
-  "textOverflow",
-  "textSizeAdjust",
-  "verticalAlign",
-  "wordSpacing",
-  "wordBreak",
-  "wordWrap"
-];
-const backgrounds = [
-  "backgroundAttachment",
-  "backgroundClip",
-  "backgroundColor",
-  "backgroundImage",
-  "backgroundOrigin",
-  "backgroundPosition",
-  "backgroundRepeat",
-  "backgroundSize",
-  "backgroundBlendMode"
-];
-const borders = [
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-  "borderTopStyle",
-  "borderRightStyle",
-  "borderBottomStyle",
-  "borderLeftStyle",
-  "borderTopColor",
-  "borderRightColor",
-  "borderBottomColor",
-  "borderLeftColor",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  // More
-  "borderImageSlice",
-  "borderImageWidth",
-  "borderImageOutset",
-  "borderImageRepeat",
-  "borderImageSource"
-];
-const effects = [
-  "mixBlendMode",
-  "opacity",
-  "outlineColor",
-  "outlineOffset",
-  "outlineStyle",
-  "outlineWidth",
-  "boxShadow",
-  "transform",
-  "filter",
-  "backdropFilter",
-  "cursor",
-  // More
-  "animationDelay",
-  "animationDirection",
-  "animationDuration",
-  "animationFillMode",
-  "animationIterationCount",
-  "animationName",
-  "animationPlayState",
-  "animationTimingFunction",
-  "transitionDelay",
-  "transitionDuration",
-  "transitionProperty",
-  "transitionTimingFunction"
-];
-const other = [
-  "resize",
-  "clip",
-  "visibility",
-  "boxSizing",
-  "content",
-  "quotes",
-  "counterReset",
-  "counterIncrement",
-  "inlineSize",
-  "blockSize",
-  "minInlineSize",
-  "minBlockSize",
-  "maxInlineSize",
-  "maxBlockSize",
-  "userSelect",
-  "pointerEvents"
-];
-const categories = {
-  layout: {
-    label: "Layout",
-    properties: layout,
-    moreFrom: ""
-  },
-  flexChild: {
-    label: "Flex Child",
-    properties: flexChild,
-    moreFrom: ""
-  },
-  gridChild: {
-    label: "Grid Child",
-    properties: gridChild,
-    moreFrom: ""
-  },
-  space: { label: "Space", properties: space, moreFrom: "" },
-  size: { label: "Size", properties: size, moreFrom: "" },
-  position: { label: "Position", properties: position, moreFrom: "" },
-  typography: {
-    label: "Typography",
-    properties: typography,
-    moreFrom: "fontSizeAdjust"
-  },
-  backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
-  borders: {
-    label: "Borders",
-    properties: borders,
-    moreFrom: "borderImageSlice"
-  },
-  effects: {
-    label: "Effects",
-    properties: effects,
-    moreFrom: "animationDelay"
-  },
-  other: { label: "Other", properties: other, moreFrom: "" }
-};
-const propertyCategoryMap = {};
-let category;
-for (category in categories) {
-  for (const property of categories[category].properties) {
-    propertyCategoryMap[property] = category;
-  }
-}
-export {
-  categories,
-  propertyCategoryMap
-};