@webstudio-is/react-sdk 0.74.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.74.0",
+  "version": "0.76.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,28 +30,29 @@
     "@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.74.0",
-    "@webstudio-is/css-data": "^0.74.0",
-    "@webstudio-is/css-engine": "^0.74.0",
-    "@webstudio-is/fonts": "^0.74.0",
-    "@webstudio-is/generate-arg-types": "^0.74.0",
-    "@webstudio-is/project-build": "^0.74.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": {
     ".": {
       "source": "./src/index.ts",
+      "types": "./lib/types/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib/cjs/index.js",
-      "types": "./lib/types/index.d.ts"
+      "require": "./lib/cjs/index.js"
     },
     "./css-normalize": {
       "source": "./src/css/normalize.ts",
+      "types": "./lib/types/css/normalize.d.ts",
       "import": "./lib/css/normalize.js",
-      "require": "./lib/cjs/css/normalize.js",
-      "types": "./lib/types/css/normalize.d.ts"
+      "require": "./lib/cjs/css/normalize.js"
     }
   },
   "files": [
@@ -66,10 +67,9 @@
     "dev": "build-package --watch",
     "build": "build-package",
     "build:args": "generate-arg-types './src/components/*.tsx ./src/app/custom-components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
-    "dts": "tsc --declarationDir lib/types",
+    "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/components/component-meta.ts

@@ -54,6 +54,7 @@ const WsComponentMeta = z.object({
   invalidAncestors: z.optional(z.array(z.string())),
   stylable: z.optional(z.boolean()),
   label: z.string(),
+  description: z.string().optional(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),

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/global-rules.ts

@@ -9,7 +9,8 @@ export const addGlobalRules = (
   // @todo we need to figure out all global resets while keeping
   // the engine aware of all of them.
   // Ideally, the user is somehow aware and in control of the reset
-  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  // Layout source https://twitter.com/ChallengesCss/status/1471128244720181258
+  engine.addPlaintextRule("html {margin: 0; display: grid; min-height: 100%}");
 
   const fontAssets: FontAsset[] = [];
   for (const asset of assets.values()) {

package/src/css/normalize.ts

@@ -63,18 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = [
-  ...baseStyle,
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
-  },
-] satisfies Styles;
+export const a = baseStyle;
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;
@@ -135,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,