@webstudio-is/react-sdk 0.75.0 → 0.77.0

package/lib/cjs/index.js

@@ -21,11 +21,17 @@ var src_exports = {};
 __export(src_exports, {
   ReactSdkContext: () => import_context.ReactSdkContext,
   componentCategories: () => import_component_meta.componentCategories,
+  decodeDataSourceVariable: () => import_expression.decodeDataSourceVariable,
   defaultStates: () => import_component_meta.defaultStates,
+  encodeDataSourceVariable: () => import_expression.encodeDataSourceVariable,
+  executeExpressions: () => import_expression.executeExpressions,
+  generateExpressionsComputation: () => import_expression.generateExpressionsComputation,
   getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
   stateCategories: () => import_component_meta.stateCategories,
+  useInstanceProps: () => import_props.useInstanceProps,
   usePropAsset: () => import_props.usePropAsset,
-  usePropUrl: () => import_props.usePropUrl
+  usePropUrl: () => import_props.usePropUrl,
+  validateExpression: () => import_expression.validateExpression
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);
@@ -37,3 +43,4 @@ var import_component_meta = require("./components/component-meta");
 __reExport(src_exports, require("./embed-template"), module.exports);
 var import_props = require("./props");
 var import_context = require("./context");
+var import_expression = require("./expression");

package/lib/cjs/props.js

@@ -44,17 +44,35 @@ const getPropsByInstanceId = (props) => {
   return propsByInstanceId;
 };
 const useInstanceProps = (instanceId) => {
-  const { propsByInstanceIdStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
-  const propsByInstanceId = (0, import_react2.useStore)(propsByInstanceIdStore);
-  const instanceProps = propsByInstanceId.get(instanceId);
-  const instancePropsObject = {};
-  if (instanceProps) {
-    for (const prop of instanceProps) {
-      if (prop.type !== "asset" && prop.type !== "page") {
-        instancePropsObject[prop.name] = prop.value;
+  const { propsByInstanceIdStore, dataSourceValuesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const instancePropsObjectStore = (0, import_react.useMemo)(() => {
+    return (0, import_nanostores.computed)(
+      [propsByInstanceIdStore, dataSourceValuesStore],
+      (propsByInstanceId, dataSourceValues) => {
+        const instancePropsObject2 = {};
+        const instanceProps = propsByInstanceId.get(instanceId);
+        if (instanceProps === void 0) {
+          return instancePropsObject2;
+        }
+        for (const prop of instanceProps) {
+          if (prop.type === "asset" || prop.type === "page") {
+            continue;
+          }
+          if (prop.type === "dataSource") {
+            const dataSourceId = prop.value;
+            const value = dataSourceValues.get(dataSourceId);
+            if (value !== void 0) {
+              instancePropsObject2[prop.name] = value;
+            }
+            continue;
+          }
+          instancePropsObject2[prop.name] = prop.value;
+        }
+        return instancePropsObject2;
       }
-    }
-  }
+    );
+  }, [propsByInstanceIdStore, dataSourceValuesStore, instanceId]);
+  const instancePropsObject = (0, import_react2.useStore)(instancePropsObjectStore);
   return instancePropsObject;
 };
 const usePropAsset = (instanceId, name) => {

package/lib/cjs/tree/create-elements-tree.js

@@ -34,6 +34,8 @@ const createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   pagesStore,
+  dataSourceValuesStore,
+  onDataSourceUpdate,
   Component,
   components
 }) => {
@@ -69,9 +71,20 @@ const createElementsTree = ({
         propsByInstanceIdStore,
         assetsStore,
         pagesStore,
+        dataSourceValuesStore,
         renderer,
         imageBaseUrl,
-        assetBaseUrl
+        assetBaseUrl,
+        setDataSourceValue: (instanceId, propName, value) => {
+          const propsByInstanceId = propsByInstanceIdStore.get();
+          const props = propsByInstanceId.get(instanceId);
+          const prop = props?.find((prop2) => prop2.name === propName);
+          if (prop?.type !== "dataSource") {
+            throw Error(`${propName} is not data source`);
+          }
+          const dataSourceId = prop.value;
+          onDataSourceUpdate(dataSourceId, value);
+        }
       },
       children: root
     }

package/lib/cjs/tree/root.js

@@ -21,15 +21,47 @@ __export(root_exports, {
   InstanceRoot: () => InstanceRoot
 });
 module.exports = __toCommonJS(root_exports);
+var import_react = require("react");
 var import_nanostores = require("nanostores");
 var import_create_elements_tree = require("./create-elements-tree");
 var import_webstudio_component = require("./webstudio-component");
 var import_props = require("../props");
 const InstanceRoot = ({
   data,
+  computeExpressions,
   Component,
   components
 }) => {
+  const dataSourceVariablesStoreRef = (0, import_react.useRef)(void 0);
+  if (dataSourceVariablesStoreRef.current === void 0) {
+    dataSourceVariablesStoreRef.current = (0, import_nanostores.atom)(/* @__PURE__ */ new Map());
+  }
+  const dataSourceVariablesStore = dataSourceVariablesStoreRef.current;
+  const dataSourceValuesStoreRef = (0, import_react.useRef)(void 0);
+  if (dataSourceValuesStoreRef.current === void 0) {
+    dataSourceValuesStoreRef.current = (0, import_nanostores.computed)(
+      dataSourceVariablesStore,
+      (dataSourceVariables) => {
+        const dataSourceValues = /* @__PURE__ */ new Map();
+        for (const [dataSourceId, dataSource] of data.build.dataSources) {
+          if (dataSource.type === "variable") {
+            const value = dataSourceVariables.get(dataSourceId) ?? dataSource.value.value;
+            dataSourceValues.set(dataSourceId, value);
+          }
+        }
+        try {
+          const result = computeExpressions(dataSourceValues);
+          for (const [id, value] of result) {
+            dataSourceValues.set(id, value);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+        return dataSourceValues;
+      }
+    );
+  }
+  const dataSourceValuesStore = dataSourceValuesStoreRef.current;
   return (0, import_create_elements_tree.createElementsTree)({
     imageBaseUrl: data.params?.imageBaseUrl ?? "/",
     assetBaseUrl: data.params?.assetBaseUrl ?? "/",
@@ -40,6 +72,12 @@ const InstanceRoot = ({
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
+    dataSourceValuesStore,
+    onDataSourceUpdate: (dataSourceId, value) => {
+      const dataSourceVariables = new Map(dataSourceVariablesStore.get());
+      dataSourceVariables.set(dataSourceId, value);
+      dataSourceVariablesStore.set(dataSourceVariables);
+    },
     Component: Component ?? import_webstudio_component.WebstudioComponent,
     components
   });

package/lib/cjs/tree/webstudio-component.js

@@ -22,7 +22,8 @@ __export(webstudio_component_exports, {
   collapsedAttribute: () => collapsedAttribute,
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
-  renderWebstudioComponentChildren: () => renderWebstudioComponentChildren
+  renderWebstudioComponentChildren: () => renderWebstudioComponentChildren,
+  showAttribute: () => showAttribute
 });
 module.exports = __toCommonJS(webstudio_component_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -50,13 +51,18 @@ const WebstudioComponent = ({
   components,
   ...rest
 }) => {
-  const instanceProps = (0, import_props.useInstanceProps)(instance.id);
+  const { [showAttribute]: show = true, ...instanceProps } = (0, import_props.useInstanceProps)(
+    instance.id
+  );
   const props = {
     ...instanceProps,
     ...rest,
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
+  if (show === false) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  }
   const Component = components.get(instance.component);
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
@@ -65,4 +71,5 @@ const WebstudioComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const showAttribute = "data-ws-show";
 const collapsedAttribute = "data-ws-collapsed";

package/lib/context.js

@@ -5,7 +5,11 @@ const ReactSdkContext = createContext({
   assetBaseUrl: "/",
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
   assetsStore: atom(/* @__PURE__ */ new Map()),
-  pagesStore: atom(/* @__PURE__ */ new Map())
+  pagesStore: atom(/* @__PURE__ */ new Map()),
+  dataSourceValuesStore: atom(/* @__PURE__ */ new Map()),
+  setDataSourceValue: () => {
+    throw Error("React SDK setDataSourceValue is not implemented");
+  }
 });
 export {
   ReactSdkContext

package/lib/css/normalize.js

@@ -1,14 +1,22 @@
-import { borders, outline } from "./presets";
+import * as presets from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
 };
-const baseStyle = [boxSizing, ...borders, ...outline];
+const baseStyle = [
+  boxSizing,
+  ...presets.borders,
+  ...presets.outline
+];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
 const aside = baseStyle;
-const figure = baseStyle;
+const blockquote = [
+  ...baseStyle,
+  ...presets.blockquote
+];
+const figure = [...baseStyle, ...presets.margins];
 const footer = baseStyle;
 const header = baseStyle;
 const main = baseStyle;
@@ -16,19 +24,19 @@ const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
 const label = baseStyle;
-const h1 = baseStyle;
-const h2 = baseStyle;
-const h3 = baseStyle;
-const h4 = baseStyle;
-const h5 = baseStyle;
-const h6 = baseStyle;
+const h1 = [...baseStyle, ...presets.h1];
+const h2 = [...baseStyle, ...presets.h2];
+const h3 = [...baseStyle, ...presets.h3];
+const h4 = [...baseStyle, ...presets.h4];
+const h5 = [...baseStyle, ...presets.h5];
+const h6 = [...baseStyle, ...presets.h6];
 const i = baseStyle;
 const img = baseStyle;
 const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;
-const p = baseStyle;
+const p = [...baseStyle, ...presets.verticalMargins];
 const span = baseStyle;
 const html = [
   /* 1 */
@@ -47,7 +55,7 @@ const html = [
     value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const body = [
   /* 1 */
@@ -72,11 +80,19 @@ 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
 ];
 const hr = [
   /* 1 */
@@ -90,7 +106,8 @@ const hr = [
     value: { type: "keyword", value: "inherit" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders,
+  ...presets.margins
 ];
 const b = [
   {
@@ -98,7 +115,7 @@ const b = [
     value: { type: "keyword", value: "700" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const strong = b;
 const code = [
@@ -116,7 +133,7 @@ const code = [
     value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const kbd = code;
 const samp = code;
@@ -127,7 +144,7 @@ const small = [
     value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const subSupBase = [
   {
@@ -147,7 +164,7 @@ const subSupBase = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const sub = [
   ...subSupBase,
@@ -169,7 +186,7 @@ const table = [
     property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   },
-  ...borders,
+  ...presets.borders,
   /* 2 */
   {
     property: "borderTopColor",
@@ -221,7 +238,7 @@ const buttonBase = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const input = buttonBase;
 const optgroup = buttonBase;
@@ -252,7 +269,7 @@ const legend = [
     value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const progress = [
   {
@@ -260,7 +277,7 @@ const progress = [
     value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 const summary = [
   {
@@ -268,7 +285,7 @@ const summary = [
     value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
-  ...borders
+  ...presets.borders
 ];
 export {
   a,
@@ -276,6 +293,7 @@ export {
   article,
   aside,
   b,
+  blockquote,
   body,
   button,
   code,

package/lib/css/presets.js

@@ -22,7 +22,117 @@ const outline = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
+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" }
+  }
+];
+const verticalMargins = [
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "px" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "px" }
+  }
+];
+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 }
+  }
+];
+const h1 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 38, unit: "px" }
+  }
+];
+const h2 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 32, unit: "px" }
+  }
+];
+const h3 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 24, unit: "px" }
+  }
+];
+const h4 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 18, unit: "px" }
+  }
+];
+const h5 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 14, unit: "px" }
+  }
+];
+const h6 = [
+  ...verticalMargins,
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 12, unit: "px" }
+  }
+];
 export {
+  blockquote,
   borders,
-  outline
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  margins,
+  outline,
+  verticalMargins
 };

package/lib/embed-template.js

@@ -1,29 +1,45 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
 import { StyleValue } from "@webstudio-is/css-data";
+import { encodeDataSourceVariable, validateExpression } from "./expression";
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
   value: z.string()
 });
+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())
   })
 ]);
@@ -47,17 +63,52 @@ const EmbedTemplateInstance = z.lazy(
 const WsEmbedTemplate = z.lazy(
   () => z.array(z.union([EmbedTemplateInstance, EmbedTemplateText]))
 );
-const createInstancesFromTemplate = (treeTemplate, instances, props, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
+const createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByRef, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
   const parentChildren = [];
   for (const item of treeTemplate) {
     if (item.type === "instance") {
       const instanceId = nanoid();
       if (item.props) {
         for (const prop of item.props) {
+          const propId = nanoid();
+          if (prop.dataSourceRef === void 0) {
+            props.push({ id: propId, instanceId, ...prop });
+            continue;
+          }
+          let dataSource = dataSourceByRef.get(prop.dataSourceRef.name);
+          if (dataSource === void 0) {
+            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;
+              continue;
+            }
+          }
           props.push({
-            id: nanoid(),
+            id: propId,
             instanceId,
-            ...prop
+            type: "dataSource",
+            name: prop.name,
+            value: dataSource.id
           });
         }
       }
@@ -93,6 +144,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
         item.children,
         instances,
         props,
+        dataSourceByRef,
         styleSourceSelections,
         styleSources,
         styles,
@@ -115,6 +167,7 @@ const createInstancesFromTemplate = (treeTemplate, instances, props, styleSource
 const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
   const instances = [];
   const props = [];
+  const dataSourceByRef = /* @__PURE__ */ new Map();
   const styleSourceSelections = [];
   const styleSources = [];
   const styles = [];
@@ -122,15 +175,27 @@ const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
     treeTemplate,
     instances,
     props,
+    dataSourceByRef,
     styleSourceSelections,
     styleSources,
     styles,
     defaultBreakpointId
   );
+  const dataSources = [];
+  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