@webstudio-is/react-sdk 0.75.0 → 0.76.0

package/lib/types/expression.d.ts

@@ -0,0 +1,6 @@
+type TransformIdentifier = (id: string) => string;
+export declare const validateExpression: (code: string, transformIdentifier?: TransformIdentifier) => string;
+export declare const executeExpressions: (variables: Map<string, unknown>, expressions: Map<string, string>) => Map<string, unknown>;
+export declare const encodeDataSourceVariable: (id: string) => string;
+export declare const decodeDataSourceVariable: (name: string) => string | undefined;
+export {};

package/lib/types/expression.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -5,5 +5,6 @@ export * from "./app";
 export * from "./components/components-utils";
 export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
-export { usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
+export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
+export { validateExpression, executeExpressions, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";

package/lib/types/props.d.ts

@@ -50,14 +50,15 @@ export declare const getPropsByInstanceId: (props: Map<string, {
     id: string;
     instanceId: string;
     required?: boolean | undefined;
-}>) => PropsByInstanceId;
-export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, number | boolean | string[] | ((string | {
-    instanceId: string;
-    pageId: string;
-}) & (string | {
+} | {
+    name: string;
+    type: "dataSource";
+    value: string;
+    id: string;
     instanceId: string;
-    pageId: string;
-} | undefined))>;
+    required?: boolean | undefined;
+}>) => PropsByInstanceId;
+export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, unknown>;
 export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
     name: string;
     type: "font";

package/lib/types/tree/create-elements-tree.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentProps } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
-import type { Instance, Instances } from "@webstudio-is/project-build";
+import type { DataSource, Instance, Instances } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 import { type Params } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, components, }: Params & {
+export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, dataSourceValuesStore, onDataSourceUpdate, Component, components, }: Params & {
     instances: Map<string, {
         type: "instance";
         id: string;
@@ -24,6 +24,8 @@ export declare const createElementsTree: ({ renderer, imageBaseUrl, assetBaseUrl
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
+    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
+    onDataSourceUpdate: (dataSourceId: DataSource["id"], value: unknown) => void;
     Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
     components: Components;
 }) => JSX.Element | null;

package/lib/types/tree/root.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-import type { Build, Page } from "@webstudio-is/project-build";
+import { type ComponentProps } from "react";
+import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { WebstudioComponent } from "./webstudio-component";
 import type { Components } from "../components/components-utils";
@@ -12,7 +12,7 @@ export type Data = {
     params?: Params;
 };
 export type RootPropsData = Omit<Data, "build"> & {
-    build: Pick<Data["build"], "instances" | "props">;
+    build: Pick<Data["build"], "instances" | "props" | "dataSources">;
 };
 type RootProps = {
     data: RootPropsData;

package/lib/types/tree/webstudio-component.d.ts

@@ -11,5 +11,6 @@ type WebstudioComponentProps = {
 export declare const WebstudioComponent: ({ instance, instanceSelector, children, components, ...rest }: WebstudioComponentProps) => JSX.Element;
 export declare const idAttribute = "data-ws-id";
 export declare const componentAttribute = "data-ws-component";
+export declare const showAttribute = "data-ws-show";
 export declare const collapsedAttribute = "data-ws-collapsed";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,15 +30,16 @@
     "@nanostores/react": "^0.4.1",
     "detect-font": "^0.1.5",
     "html-tags": "^3.2.0",
+    "jsep": "^1.3.8",
     "nanoevents": "^7.0.1",
-    "nanoid": "^3.2.0",
+    "nanoid": "^3.3.6",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.75.0",
-    "@webstudio-is/css-data": "^0.75.0",
-    "@webstudio-is/css-engine": "^0.75.0",
-    "@webstudio-is/fonts": "^0.75.0",
-    "@webstudio-is/generate-arg-types": "^0.75.0",
-    "@webstudio-is/project-build": "^0.75.0"
+    "@webstudio-is/asset-uploader": "^0.76.0",
+    "@webstudio-is/css-data": "^0.76.0",
+    "@webstudio-is/css-engine": "^0.76.0",
+    "@webstudio-is/fonts": "^0.76.0",
+    "@webstudio-is/generate-arg-types": "^0.76.0",
+    "@webstudio-is/project-build": "^0.76.0"
   },
   "exports": {
     ".": {
@@ -69,7 +70,6 @@
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "pnpm typecheck && pnpm lint && pnpm test"
+    "checks": "pnpm typecheck && pnpm test"
   }
 }

package/src/context.tsx

@@ -1,6 +1,7 @@
 import { type ReadableAtom, atom } from "nanostores";
 import { createContext } from "react";
 import type { Assets } from "@webstudio-is/asset-uploader";
+import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
 import type { Pages, PropsByInstanceId } from "./props";
 
 export type Params = {
@@ -35,6 +36,12 @@ export const ReactSdkContext = createContext<
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
+    dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
+    setDataSourceValue: (
+      instanceId: Instance["id"],
+      prop: Prop["name"],
+      value: unknown
+    ) => void;
   }
 >({
   imageBaseUrl: "/",
@@ -42,4 +49,8 @@ export const ReactSdkContext = createContext<
   propsByInstanceIdStore: atom(new Map()),
   assetsStore: atom(new Map()),
   pagesStore: atom(new Map()),
+  dataSourceValuesStore: atom(new Map()),
+  setDataSourceValue: () => {
+    throw Error("React SDK setDataSourceValue is not implemented");
+  },
 });

package/src/css/normalize.ts

@@ -124,9 +124,17 @@ export const body = [
     property: "fontFamily",
     value: {
       type: "keyword",
-      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`,
+      value: "Arial, sans-serif",
     },
   },
+  {
+    property: "fontSize",
+    value: { type: "unit", unit: "px", value: 16 },
+  },
+  {
+    property: "lineHeight",
+    value: { type: "unit", unit: "number", value: 1.2 },
+  },
   boxSizing,
   ...borders,
 ] satisfies Styles;

package/src/embed-template.test.ts

@@ -1,7 +1,8 @@
 import { expect, test } from "@jest/globals";
 import { generateDataFromEmbedTemplate } from "./embed-template";
+import { showAttribute } from "./tree";
 
-const expectString = expect.any(String) as unknown as string;
+const expectString = expect.any(String);
 
 const defaultBreakpointId = "base";
 
@@ -44,6 +45,7 @@ test("generate data for embedding from instances and text", () => {
       },
     ],
     props: [],
+    dataSources: [],
     styleSourceSelections: [],
     styleSources: [],
     styles: [],
@@ -112,6 +114,7 @@ test("generate data for embedding from props", () => {
         value: "value3",
       },
     ],
+    dataSources: [],
     styleSourceSelections: [],
     styleSources: [],
     styles: [],
@@ -163,6 +166,7 @@ test("generate data for embedding from styles", () => {
       },
     ],
     props: [],
+    dataSources: [],
     styleSourceSelections: [
       {
         instanceId: expectString,
@@ -208,3 +212,175 @@ test("generate data for embedding from styles", () => {
     ],
   });
 });
+
+test("generate data for embedding from props bound to data source variables", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box1",
+          props: [
+            {
+              type: "boolean",
+              name: "showOtherBox",
+              value: false,
+              dataSourceRef: {
+                type: "variable",
+                name: "showOtherBoxDataSource",
+              },
+            },
+          ],
+          children: [],
+        },
+        {
+          type: "instance",
+          component: "Box2",
+          props: [
+            {
+              type: "boolean",
+              name: showAttribute,
+              value: false,
+              dataSourceRef: {
+                type: "variable",
+                name: "showOtherBoxDataSource",
+              },
+            },
+          ],
+          children: [],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [
+      { type: "id", value: expectString },
+      { type: "id", value: expectString },
+    ],
+    instances: [
+      { type: "instance", id: expectString, component: "Box1", children: [] },
+      { type: "instance", id: expectString, component: "Box2", children: [] },
+    ],
+    props: [
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "dataSource",
+        name: "showOtherBox",
+        value: expectString,
+      },
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "dataSource",
+        name: showAttribute,
+        value: expectString,
+      },
+    ],
+    dataSources: [
+      {
+        type: "variable",
+        id: expectString,
+        scopeInstanceId: expectString,
+        name: "showOtherBoxDataSource",
+        value: {
+          type: "boolean",
+          value: false,
+        },
+      },
+    ],
+    styleSourceSelections: [],
+    styleSources: [],
+    styles: [],
+  });
+});
+
+test("generate data for embedding from props bound to data source expressions", () => {
+  expect(
+    generateDataFromEmbedTemplate(
+      [
+        {
+          type: "instance",
+          component: "Box1",
+          props: [
+            {
+              type: "string",
+              name: "state",
+              value: "initial",
+              dataSourceRef: {
+                type: "variable",
+                name: "boxState",
+              },
+            },
+          ],
+          children: [],
+        },
+        {
+          type: "instance",
+          component: "Box2",
+          props: [
+            {
+              type: "boolean",
+              name: showAttribute,
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "boxStateSuccess",
+                code: `boxState === 'success'`,
+              },
+            },
+          ],
+          children: [],
+        },
+      ],
+      defaultBreakpointId
+    )
+  ).toEqual({
+    children: [
+      { type: "id", value: expectString },
+      { type: "id", value: expectString },
+    ],
+    instances: [
+      { type: "instance", id: expectString, component: "Box1", children: [] },
+      { type: "instance", id: expectString, component: "Box2", children: [] },
+    ],
+    props: [
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "dataSource",
+        name: "state",
+        value: expectString,
+      },
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "dataSource",
+        name: showAttribute,
+        value: expectString,
+      },
+    ],
+    dataSources: [
+      {
+        type: "variable",
+        id: expectString,
+        scopeInstanceId: expectString,
+        name: "boxState",
+        value: {
+          type: "string",
+          value: "initial",
+        },
+      },
+      {
+        type: "expression",
+        id: expectString,
+        scopeInstanceId: expectString,
+        name: "boxStateSuccess",
+        code: expect.stringMatching(/\$ws\$dataSource\$\w+ === 'success'/),
+      },
+    ],
+    styleSourceSelections: [],
+    styleSources: [],
+    styles: [],
+  });
+});

package/src/embed-template.ts

@@ -8,9 +8,11 @@ import {
   StyleSourcesList,
   StylesList,
   Breakpoint,
+  DataSource,
 } from "@webstudio-is/project-build";
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-data";
 import type { Simplify } from "type-fest";
+import { encodeDataSourceVariable, validateExpression } from "./expression";
 
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -19,25 +21,41 @@ const EmbedTemplateText = z.object({
 
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 
+const DataSourceRef = z.union([
+  z.object({
+    type: z.literal("variable"),
+    name: z.string(),
+  }),
+  z.object({
+    type: z.literal("expression"),
+    name: z.string(),
+    code: z.string(),
+  }),
+]);
+
 const EmbedTemplateProp = z.union([
   z.object({
     type: z.literal("number"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.number(),
   }),
   z.object({
     type: z.literal("string"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.string(),
   }),
   z.object({
     type: z.literal("boolean"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.boolean(),
   }),
   z.object({
     type: z.literal("string[]"),
     name: z.string(),
+    dataSourceRef: z.optional(DataSourceRef),
     value: z.array(z.string()),
   }),
 ]);
@@ -91,6 +109,7 @@ const createInstancesFromTemplate = (
   treeTemplate: WsEmbedTemplate,
   instances: InstancesList,
   props: PropsList,
+  dataSourceByRef: Map<string, DataSource>,
   styleSourceSelections: StyleSourceSelectionsList,
   styleSources: StyleSourcesList,
   styles: StylesList,
@@ -104,10 +123,45 @@ const createInstancesFromTemplate = (
       // populate props
       if (item.props) {
         for (const prop of item.props) {
+          const propId = nanoid();
+          if (prop.dataSourceRef === undefined) {
+            props.push({ id: propId, instanceId, ...prop });
+            continue;
+          }
+          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
+          if (dataSource === undefined) {
+            const id = nanoid();
+            const { name: propName, dataSourceRef, ...rest } = prop;
+            if (dataSourceRef.type === "variable") {
+              dataSource = {
+                type: "variable",
+                id,
+                // the first instance where data source is appeared in becomes its scope
+                scopeInstanceId: instanceId,
+                name: dataSourceRef.name,
+                value: rest,
+              };
+              dataSourceByRef.set(dataSourceRef.name, dataSource);
+            } else if (dataSourceRef.type === "expression") {
+              dataSource = {
+                type: "expression",
+                id,
+                scopeInstanceId: instanceId,
+                name: dataSourceRef.name,
+                code: dataSourceRef.code,
+              };
+              dataSourceByRef.set(dataSourceRef.name, dataSource);
+            } else {
+              dataSourceRef satisfies never;
+              continue;
+            }
+          }
           props.push({
-            id: nanoid(),
+            id: propId,
             instanceId,
-            ...prop,
+            type: "dataSource",
+            name: prop.name,
+            value: dataSource.id,
           });
         }
       }
@@ -148,6 +202,7 @@ const createInstancesFromTemplate = (
         item.children,
         instances,
         props,
+        dataSourceByRef,
         styleSourceSelections,
         styleSources,
         styles,
@@ -175,6 +230,7 @@ export const generateDataFromEmbedTemplate = (
 ) => {
   const instances: InstancesList = [];
   const props: PropsList = [];
+  const dataSourceByRef = new Map<string, DataSource>();
   const styleSourceSelections: StyleSourceSelectionsList = [];
   const styleSources: StyleSourcesList = [];
   const styles: StylesList = [];
@@ -183,15 +239,30 @@ export const generateDataFromEmbedTemplate = (
     treeTemplate,
     instances,
     props,
+    dataSourceByRef,
     styleSourceSelections,
     styleSources,
     styles,
     defaultBreakpointId
   );
+
+  // replace all references with variable names
+  const dataSources: DataSource[] = [];
+  for (const dataSource of dataSourceByRef.values()) {
+    if (dataSource.type === "expression") {
+      dataSource.code = validateExpression(dataSource.code, (ref) => {
+        const id = dataSourceByRef.get(ref)?.id ?? ref;
+        return encodeDataSourceVariable(id);
+      });
+    }
+    dataSources.push(dataSource);
+  }
+
   return {
     children,
     instances,
     props,
+    dataSources,
     styleSourceSelections,
     styleSources,
     styles,

package/src/expression.test.ts

@@ -0,0 +1,122 @@
+import { expect, test } from "@jest/globals";
+import {
+  decodeDataSourceVariable,
+  encodeDataSourceVariable,
+  executeExpressions,
+  validateExpression,
+} from "./expression";
+
+test("allow literals and array expressions", () => {
+  expect(
+    validateExpression(`["", '', 0, true, false, null, undefined]`)
+  ).toEqual(`["", '', 0, true, false, null, undefined]`);
+});
+
+test("allow unary and binary expressions", () => {
+  expect(validateExpression(`[-1, 1 + 1]`)).toEqual(`[-1, 1 + 1]`);
+});
+
+test("forbid member expressions", () => {
+  expect(() => {
+    validateExpression("var1 + obj.param");
+  }).toThrowError(/Cannot access "param" of "obj"/);
+});
+
+test("forbid this expressions", () => {
+  expect(() => {
+    validateExpression("var1 + this");
+  }).toThrowError(/"this" is not supported/);
+});
+
+test("forbid call expressions", () => {
+  expect(() => {
+    validateExpression("var1 + fn1()");
+  }).toThrowError(/Cannot call "fn1"/);
+  expect(() => {
+    validateExpression("var1 + this.fn1()");
+  }).toThrowError(/Cannot call "this.fn1"/);
+});
+
+test("forbid ternary", () => {
+  expect(() => {
+    validateExpression("var1 ? var2 : var3");
+  }).toThrowError(/Ternary operator is not supported/);
+});
+
+test("forbid multiple expressions", () => {
+  expect(() => {
+    validateExpression("a b");
+  }).toThrowError(/Cannot use multiple expressions/);
+  expect(() => {
+    validateExpression("a, b");
+  }).toThrowError(/Cannot use multiple expressions/);
+  expect(() => {
+    validateExpression("a; b");
+  }).toThrowError(/Cannot use multiple expressions/);
+});
+
+test("transform identifiers", () => {
+  expect(validateExpression(`a + b`, (id) => `$ws$${id}`)).toEqual(
+    `$ws$a + $ws$b`
+  );
+});
+
+test("execute expression", () => {
+  const variables = new Map();
+  const expressions = new Map([["exp1", "1 + 1"]]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([["exp1", 2]])
+  );
+});
+
+test("execute expression dependent on variables", () => {
+  const variables = new Map([["var1", 5]]);
+  const expressions = new Map([["exp1", "var1 + 1"]]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([["exp1", 6]])
+  );
+});
+
+test("execute expression dependent on other expressions", () => {
+  const variables = new Map([["var1", 3]]);
+  const expressions = new Map([
+    ["exp1", "exp0 + 1"],
+    ["exp0", "var1 + 2"],
+  ]);
+  expect(executeExpressions(variables, expressions)).toEqual(
+    new Map([
+      ["exp1", 6],
+      ["exp0", 5],
+    ])
+  );
+});
+
+test("forbid circular expressions", () => {
+  const variables = new Map([["var1", 3]]);
+  const expressions = new Map([
+    ["exp0", "exp2 + 1"],
+    ["exp1", "exp0 + 2"],
+    ["exp2", "exp1 + 3"],
+  ]);
+  expect(() => {
+    executeExpressions(variables, expressions);
+  }).toThrowError(/exp2 is not defined/);
+});
+
+test("make sure dependency exists", () => {
+  const variables = new Map();
+  const expressions = new Map([["exp1", "var1 + 1"]]);
+  expect(() => {
+    executeExpressions(variables, expressions);
+  }).toThrowError(/Unknown dependency "var1"/);
+});
+
+test("encode/decode variable names", () => {
+  expect(encodeDataSourceVariable("my--id")).toEqual(
+    "$ws$dataSource$my__DASH____DASH__id"
+  );
+  expect(decodeDataSourceVariable(encodeDataSourceVariable("my--id"))).toEqual(
+    "my--id"
+  );
+  expect(decodeDataSourceVariable("myVarName")).toEqual(undefined);
+});