@webstudio-is/react-sdk 0.82.0 → 0.83.0

package/src/expression.ts

@@ -252,6 +252,7 @@ export const executeComputingExpressions = (
 
 export const generateEffectfulExpression = (
   code: string,
+  args: Set<string>,
   allowedVariables: Set<string>
 ) => {
   const inputVariables = new Set<string>();
@@ -259,6 +260,9 @@ export const generateEffectfulExpression = (
   validateExpression(code, {
     effectful: true,
     transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
       if (allowedVariables.has(identifier)) {
         if (assignee) {
           outputVariables.add(identifier);
@@ -274,6 +278,9 @@ export const generateEffectfulExpression = (
   // generate code computing all expressions
   let generatedCode = "";
 
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');\n`;
+  }
   for (const id of inputVariables) {
     generatedCode += `let ${id} = _variables.get('${id}');\n`;
   }
@@ -296,17 +303,63 @@ export const generateEffectfulExpression = (
 
 export const executeEffectfulExpression = (
   code: string,
+  args: Map<string, unknown>,
   variables: Map<string, unknown>
 ) => {
   const generatedCode = generateEffectfulExpression(
     code,
+    new Set(args.keys()),
     new Set(variables.keys())
   );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables) as Map<string, unknown>;
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args) as Map<string, unknown>;
   return values;
 };
 
+const computeExpressionDependencies = (
+  expressions: Map<string, string>,
+  expressionId: string,
+  dependencies: Map<string, Set<string>>
+) => {
+  // prevent recalculating expressions over again
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = new Set<string>();
+  const code = expressions.get(expressionId);
+  if (code === undefined) {
+    return parentDeps;
+  }
+  // write before recursive call to avoid infinite cycle
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    },
+  });
+  return parentDeps;
+};
+
+export const computeExpressionsDependencies = (
+  expressions: Map<string, string>
+) => {
+  const dependencies = new Map<string, Set<string>>();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
+
 type Values = Map<string, unknown>;
 
 const dataSourceVariablePrefix = "$ws$dataSource$";

package/src/index.ts

@@ -26,6 +26,7 @@ export {
   executeComputingExpressions,
   generateEffectfulExpression,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   encodeDataSourceVariable,
   encodeVariablesMap,
   decodeDataSourceVariable,

package/src/props.ts

@@ -55,15 +55,20 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
             continue;
           }
           if (prop.type === "action") {
-            instancePropsObject[prop.name] = () => {
+            instancePropsObject[prop.name] = (...args: unknown[]) => {
               // prevent all actions in canvas mode
               if (renderer === "canvas") {
                 return;
               }
               for (const value of prop.value) {
                 if (value.type === "execute") {
+                  const argsMap = new Map<string, unknown>();
+                  for (const [i, name] of value.args.entries()) {
+                    argsMap.set(name, args[i]);
+                  }
                   const newValues = executeEffectfulExpression(
                     value.code,
+                    argsMap,
                     dataSourceValues
                   );
                   setDataSourceValues(newValues);

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

@@ -1,4 +1,8 @@
-import { type ComponentProps, Fragment } from "react";
+import {
+  Fragment,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
 import type { ReadableAtom } from "nanostores";
 import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
@@ -10,7 +14,7 @@ import {
   ReactSdkContext,
 } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
-import type { WebstudioComponent } from "./webstudio-component";
+import type { WebstudioComponentProps } from "./webstudio-component";
 
 type InstanceSelector = Instance["id"][];
 
@@ -36,11 +40,15 @@ export const createElementsTree = ({
   pagesStore: ReadableAtom<Pages>;
   executeEffectfulExpression: (
     expression: string,
+    args: DataSourceValues,
     values: DataSourceValues
   ) => DataSourceValues;
   dataSourceValuesStore: ReadableAtom<DataSourceValues>;
   onDataSourceUpdate: (newValues: DataSourceValues) => void;
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
 }) => {
   const rootInstance = instances.get(rootInstanceId);
@@ -110,7 +118,9 @@ const createInstanceChildrenElements = ({
   instances: Instances;
   instanceSelector: InstanceSelector;
   children: Instance["children"];
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
 }) => {
   const elements = [];
@@ -152,7 +162,9 @@ const createInstanceElement = ({
 }: {
   instance: Instance;
   instanceSelector: InstanceSelector;
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   children?: Array<JSX.Element | string>;
   components: Components;
 }) => {

package/src/tree/root.ts

@@ -1,4 +1,9 @@
-import { useRef, type ComponentProps, useCallback } from "react";
+import {
+  useRef,
+  useCallback,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
 import {
   atom,
   computed,
@@ -8,7 +13,10 @@ import {
 import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
-import { WebstudioComponent } from "./webstudio-component";
+import {
+  WebstudioComponent,
+  type WebstudioComponentProps,
+} from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 import type { Components } from "../components/components-utils";
 import type { Params, DataSourceValues } from "../context";
@@ -30,9 +38,12 @@ type RootProps = {
   executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
   executeEffectfulExpression: (
     expression: string,
+    args: DataSourceValues,
     values: DataSourceValues
   ) => DataSourceValues;
-  Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component?: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
 };
 

package/src/tree/webstudio-component.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, forwardRef } from "react";
 import type { Instance } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 import { useInstanceProps } from "../props";
@@ -26,20 +26,18 @@ export const renderWebstudioComponentChildren = (
   });
 };
 
-type WebstudioComponentProps = {
+export type WebstudioComponentProps = {
   instance: Instance;
   instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   components: Components;
 };
 
-export const WebstudioComponent = ({
-  instance,
-  instanceSelector,
-  children,
-  components,
-  ...rest
-}: WebstudioComponentProps) => {
+// eslint-disable-next-line react/display-name
+export const WebstudioComponent = forwardRef<
+  HTMLElement,
+  WebstudioComponentProps
+>(({ instance, instanceSelector, children, components, ...rest }, ref) => {
   const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
     instance.id
   );
@@ -57,13 +55,42 @@ export const WebstudioComponent = ({
     return <></>;
   }
   return (
-    <Component {...props}>
+    <Component {...props} ref={ref}>
       {renderWebstudioComponentChildren(children)}
     </Component>
   );
+});
+
+export const idAttribute = "data-ws-id" as const;
+export const selectorIdAttribute = "data-ws-selector" as const;
+export const componentAttribute = "data-ws-component" as const;
+export const showAttribute = "data-ws-show" as const;
+export const collapsedAttribute = "data-ws-collapsed" as const;
+
+export type WebstudioAttributes = {
+  [idAttribute]?: string | undefined;
+  [selectorIdAttribute]?: string | undefined;
+  [componentAttribute]?: string | undefined;
+  [showAttribute]?: string | undefined;
+  [collapsedAttribute]?: string | undefined;
 };
 
-export const idAttribute = "data-ws-id";
-export const componentAttribute = "data-ws-component";
-export const showAttribute = "data-ws-show";
-export const collapsedAttribute = "data-ws-collapsed";
+export const splitPropsWithWebstudioAttributes = <
+  P extends WebstudioAttributes,
+>({
+  [idAttribute]: idAttributeValue,
+  [componentAttribute]: componentAttributeValue,
+  [showAttribute]: showAttributeValue,
+  [collapsedAttribute]: collapsedAttributeValue,
+  [selectorIdAttribute]: parentIdAttributeValue,
+  ...props
+}: P): [WebstudioAttributes, Omit<P, keyof WebstudioAttributes>] => [
+  {
+    [idAttribute]: idAttributeValue,
+    [componentAttribute]: componentAttributeValue,
+    [showAttribute]: showAttributeValue,
+    [collapsedAttribute]: collapsedAttributeValue,
+    [selectorIdAttribute]: parentIdAttributeValue,
+  },
+  props,
+];

package/lib/cjs/css/get-browser-style.js

@@ -1,83 +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 get_browser_style_exports = {};
-__export(get_browser_style_exports, {
-  getBrowserStyle: () => getBrowserStyle
-});
-module.exports = __toCommonJS(get_browser_style_exports);
-var import_detect_font = require("detect-font");
-var import_css_data = require("@webstudio-is/css-data");
-var import_css_data2 = require("@webstudio-is/css-data");
-const unitsList = Object.values(import_css_data2.units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-const parseValue = (property, value) => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = import_css_data.keywordValues[property];
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value
-      };
-    }
-    return {
-      type: "unparsed",
-      value
-    };
-  }
-  if (number === 0 && property in import_css_data2.properties) {
-    return import_css_data2.properties[property].initial;
-  }
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number
-    };
-  }
-  return {
-    type: "unit",
-    unit: parsedUnit[0],
-    value: number
-  };
-};
-const getBrowserStyle = (element) => {
-  const browserStyle = {};
-  if (element === void 0) {
-    return browserStyle;
-  }
-  let knownProperty;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in import_css_data2.properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    const computedValue = computedStyle[knownProperty];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [(0, import_detect_font.detectFont)(element)]
-  };
-  return browserStyle;
-};

package/lib/css/get-browser-style.js

@@ -1,65 +0,0 @@
-import { detectFont } from "detect-font";
-import {
-  keywordValues
-} from "@webstudio-is/css-data";
-import { properties, units } from "@webstudio-is/css-data";
-const unitsList = Object.values(units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-const parseValue = (property, value) => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = keywordValues[property];
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value
-      };
-    }
-    return {
-      type: "unparsed",
-      value
-    };
-  }
-  if (number === 0 && property in properties) {
-    return properties[property].initial;
-  }
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number
-    };
-  }
-  return {
-    type: "unit",
-    unit: parsedUnit[0],
-    value: number
-  };
-};
-const getBrowserStyle = (element) => {
-  const browserStyle = {};
-  if (element === void 0) {
-    return browserStyle;
-  }
-  let knownProperty;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    const computedValue = computedStyle[knownProperty];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [detectFont(element)]
-  };
-  return browserStyle;
-};
-export {
-  getBrowserStyle
-};

package/lib/types/css/get-browser-style.d.ts

@@ -1,2 +0,0 @@
-import { type Style } from "@webstudio-is/css-data";
-export declare const getBrowserStyle: (element?: Element) => Style;

package/src/css/get-browser-style.ts

@@ -1,81 +0,0 @@
-import { detectFont } from "detect-font";
-import {
-  type Style,
-  type StyleValue,
-  type Unit,
-  keywordValues,
-} from "@webstudio-is/css-data";
-import { properties, units } from "@webstudio-is/css-data";
-
-const unitsList = Object.values(units).flat();
-const unitRegex = new RegExp(`${unitsList.join("|")}`);
-
-// @todo use a parser
-const parseValue = (
-  property: keyof typeof properties,
-  value: string
-): StyleValue => {
-  const number = Number.parseFloat(value);
-  const parsedUnit = unitRegex.exec(value);
-  if (value === "rgba(0, 0, 0, 0)") {
-    value = "transparent";
-  }
-  if (Number.isNaN(number)) {
-    const values = keywordValues[
-      property as keyof typeof keywordValues
-    ] as ReadonlyArray<string>;
-
-    if (values?.includes(value)) {
-      return {
-        type: "keyword",
-        value: value,
-      };
-    }
-
-    return {
-      type: "unparsed",
-      value: value,
-    };
-  }
-
-  if (number === 0 && property in properties) {
-    return properties[property].initial;
-  }
-
-  if (parsedUnit === null) {
-    return {
-      type: "unit",
-      unit: "number",
-      value: number,
-    };
-  }
-
-  return {
-    type: "unit",
-    unit: parsedUnit[0] as Unit,
-    value: number,
-  };
-};
-
-export const getBrowserStyle = (element?: Element): Style => {
-  const browserStyle: Style = {};
-  if (element === undefined) {
-    return browserStyle;
-  }
-  let knownProperty: keyof typeof properties;
-  const computedStyle = getComputedStyle(element);
-  for (knownProperty in properties) {
-    if (knownProperty in computedStyle === false) {
-      continue;
-    }
-    // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
-    const computedValue = computedStyle[knownProperty as unknown as number];
-    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-  }
-  // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
-  browserStyle.fontFamily = {
-    type: "fontFamily",
-    value: [detectFont(element)],
-  };
-  return browserStyle;
-};