@webstudio-is/react-sdk 0.76.0 → 0.77.0

package/lib/types/css/presets.d.ts

@@ -1,3 +1,285 @@
 import type { Styles } from "./normalize";
 export declare const borders: Styles;
 export declare const outline: Styles;
+export declare const margins: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginRight";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginLeft";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const verticalMargins: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const blockquote: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginRight";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginLeft";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "paddingTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "paddingBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "paddingLeft";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "paddingRight";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "borderLeftWidth";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "borderLeftStyle";
+    value: {
+        type: "keyword";
+        value: string;
+        unit?: undefined;
+        r?: undefined;
+        g?: undefined;
+        b?: undefined;
+        alpha?: undefined;
+    };
+} | {
+    property: "borderLeftColor";
+    value: {
+        type: "rgb";
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+        value?: undefined;
+        unit?: undefined;
+    };
+})[];
+export declare const h1: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const h2: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const h3: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const h4: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const h5: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];
+export declare const h6: ({
+    property: "marginTop";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "marginBottom";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+} | {
+    property: "fontSize";
+    value: {
+        type: "unit";
+        value: number;
+        unit: "px";
+    };
+})[];

package/lib/types/expression.d.ts

@@ -1,5 +1,10 @@
 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;

package/lib/types/index.d.ts

@@ -7,4 +7,4 @@ export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, t
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, } from "./props";
 export { type Params, ReactSdkContext } from "./context";
-export { validateExpression, executeExpressions, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";
+export { validateExpression, generateExpressionsComputation, executeExpressions, encodeDataSourceVariable, decodeDataSourceVariable, } from "./expression";

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

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "react";
-import { type Build, type Page } from "@webstudio-is/project-build";
+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";
@@ -14,10 +14,12 @@ export type Data = {
 export type RootPropsData = Omit<Data, "build"> & {
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -34,12 +34,12 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.3.6",
     "nanostores": "^0.7.1",
-    "@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"
+    "@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": {
     ".": {

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;
 
 /**
@@ -136,7 +144,7 @@ export const body = [
     value: { type: "unit", unit: "number", value: 1.2 },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -155,7 +163,8 @@ export const hr = [
     value: { type: "keyword", value: "inherit" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
+  ...presets.margins,
 ] satisfies Styles;
 
 /**
@@ -177,7 +186,7 @@ export const b = [
     value: { type: "keyword", value: "700" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 export const strong = b;
 
@@ -200,7 +209,7 @@ export const code = [
     value: { type: "unit", value: 1, unit: "em" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const kbd = code;
@@ -217,7 +226,7 @@ export const small = [
     value: { type: "unit", value: 80, unit: "%" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -242,7 +251,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const sub = [
@@ -277,7 +286,7 @@ export const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" },
   },
-  ...borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -340,7 +349,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 export const input = buttonBase;
@@ -427,7 +436,7 @@ export const legend = [
     value: { type: "unit", value: 0, unit: "number" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -440,7 +449,7 @@ export const progress = [
     value: { type: "keyword", value: "baseline" },
   },
   boxSizing,
-  ...borders,
+  ...presets.borders,
 ] satisfies Styles;
 
 /**
@@ -503,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/expression.test.ts

@@ -3,6 +3,7 @@ import {
   decodeDataSourceVariable,
   encodeDataSourceVariable,
   executeExpressions,
+  generateExpressionsComputation,
   validateExpression,
 } from "./expression";
 
@@ -61,6 +62,30 @@ test("transform identifiers", () => {
   );
 });
 
+test("generate expressions computation", () => {
+  const variables = new Set(["var0"]);
+  const expressions = new Map([
+    ["exp3", "exp2 + exp1"],
+    ["exp1", "var0"],
+    ["exp2", "exp1"],
+    ["exp4", "exp2"],
+  ]);
+  expect(generateExpressionsComputation(variables, expressions))
+    .toMatchInlineSnapshot(`
+    "const var0 = _variables.get('var0');
+    const exp1 = (var0);
+    const exp2 = (exp1);
+    const exp3 = (exp2 + exp1);
+    const exp4 = (exp2);
+    return new Map([
+      ['exp1', exp1],
+      ['exp2', exp2],
+      ['exp3', exp3],
+      ['exp4', exp4],
+    ]);"
+  `);
+});
+
 test("execute expression", () => {
   const variables = new Map();
   const expressions = new Map([["exp1", "1 + 1"]]);
@@ -77,7 +102,7 @@ test("execute expression dependent on variables", () => {
   );
 });
 
-test("execute expression dependent on other expressions", () => {
+test("execute expression dependent on another expressions", () => {
   const variables = new Map([["var1", 3]]);
   const expressions = new Map([
     ["exp1", "exp0 + 1"],
@@ -100,7 +125,7 @@ test("forbid circular expressions", () => {
   ]);
   expect(() => {
     executeExpressions(variables, expressions);
-  }).toThrowError(/exp2 is not defined/);
+  }).toThrowError(/Cannot access 'exp0' before initialization/);
 });
 
 test("make sure dependency exists", () => {