@webstudio-is/react-sdk 0.75.0 → 0.77.0

package/lib/types/expression.d.ts

@@ -0,0 +1,11 @@
+type TransformIdentifier = (id: string) => string;
+export declare const validateExpression: (code: string, transformIdentifier?: TransformIdentifier) => string;
+/**
+ * Generates a function body expecting map as _variables argument
+ * and outputing map of results
+ */
+export declare const generateExpressionsComputation: (variables: Set<string>, expressions: Map<string, string>) => 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, generateExpressionsComputation, 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, DataSource } 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,12 +12,14 @@ 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 DataSourceValues = Map<DataSource["id"], unknown>;
 type RootProps = {
     data: RootPropsData;
+    computeExpressions: (values: DataSourceValues) => DataSourceValues;
     Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
     components: Components;
 };
-export declare const InstanceRoot: ({ data, Component, components, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, computeExpressions, Component, components, }: RootProps) => JSX.Element | null;
 export {};

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.77.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.77.0",
+    "@webstudio-is/css-data": "^0.77.0",
+    "@webstudio-is/css-engine": "^0.77.0",
+    "@webstudio-is/fonts": "^0.77.0",
+    "@webstudio-is/generate-arg-types": "^0.77.0",
+    "@webstudio-is/project-build": "^0.77.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

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import { borders, outline } from "./presets";
+import * as presets from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -37,13 +37,21 @@ const boxSizing = {
  *   box-sizing: border-box;
   }
 */
-const baseStyle = [boxSizing, ...borders, ...outline] satisfies Styles;
+const baseStyle = [
+  boxSizing,
+  ...presets.borders,
+  ...presets.outline,
+] satisfies Styles;
 
 export const div = baseStyle;
 export const address = baseStyle;
 export const article = baseStyle;
 export const aside = baseStyle;
-export const figure = baseStyle;
+export const blockquote = [
+  ...baseStyle,
+  ...presets.blockquote,
+] satisfies Styles;
+export const figure = [...baseStyle, ...presets.margins] satisfies Styles;
 export const footer = baseStyle;
 export const header = baseStyle;
 export const main = baseStyle;
@@ -52,12 +60,12 @@ export const section = baseStyle;
 export const form = baseStyle;
 export const label = baseStyle;
 
-export const h1 = baseStyle;
-export const h2 = baseStyle;
-export const h3 = baseStyle;
-export const h4 = baseStyle;
-export const h5 = baseStyle;
-export const h6 = baseStyle;
+export const h1 = [...baseStyle, ...presets.h1] satisfies Styles;
+export const h2 = [...baseStyle, ...presets.h2] satisfies Styles;
+export const h3 = [...baseStyle, ...presets.h3] satisfies Styles;
+export const h4 = [...baseStyle, ...presets.h4] satisfies Styles;
+export const h5 = [...baseStyle, ...presets.h5] satisfies Styles;
+export const h6 = [...baseStyle, ...presets.h6] satisfies Styles;
 
 export const i = baseStyle;
 
@@ -68,7 +76,7 @@ export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;
 
-export const p = baseStyle;
+export const p = [...baseStyle, ...presets.verticalMargins];
 export const span = baseStyle;
 
 // @todo for now not applied to html, as we don't have html element
@@ -94,7 +102,7 @@ export const html = [
     value: { type: "unit", value: 4, unit: "number" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -124,11 +132,19 @@ 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,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -147,7 +163,8 @@ export const hr = [
     value: { type: "keyword", value: "inherit" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
+  ...presets.margins,
 ] satisfies Styles;
 
 /**
@@ -169,7 +186,7 @@ export const b = [
     value: { type: "keyword", value: "700" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 export const strong = b;
 
@@ -192,7 +209,7 @@ export const code = [
     value: { type: "unit", value: 1, unit: "em" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const kbd = code;
@@ -209,7 +226,7 @@ export const small = [
     value: { type: "unit", value: 80, unit: "%" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -234,7 +251,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const sub = [
@@ -269,7 +286,7 @@ export const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" },
   },
-  ...borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -332,7 +349,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const input = buttonBase;
@@ -419,7 +436,7 @@ export const legend = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -432,7 +449,7 @@ export const progress = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -495,5 +512,5 @@ export const summary = [
     value: { type: "keyword", value: "list-item" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;

package/src/css/presets.ts

@@ -25,3 +25,113 @@ export const outline: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
+
+export const margins = [
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+] satisfies Styles;
+
+export const verticalMargins = [
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "px" },
+  },
+] satisfies Styles;
+
+export const blockquote = [
+  ...margins,
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 10, unit: "px" },
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 10, unit: "px" },
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 20, unit: "px" },
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 20, unit: "px" },
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 5, unit: "px" },
+  },
+  {
+    property: "borderLeftStyle",
+    value: { type: "keyword", value: "solid" },
+  },
+  {
+    property: "borderLeftColor",
+    value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
+  },
+] satisfies Styles;
+
+export const h1 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 38, unit: "px" },
+  },
+] satisfies Styles;
+
+export const h2 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 32, unit: "px" },
+  },
+] satisfies Styles;
+
+export const h3 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 24, unit: "px" },
+  },
+] satisfies Styles;
+
+export const h4 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 18, unit: "px" },
+  },
+] satisfies Styles;
+
+export const h5 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 14, unit: "px" },
+  },
+] satisfies Styles;
+
+export const h6 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 12, unit: "px" },
+  },
+] 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: [],
+  });
+});