@webstudio-is/react-sdk 0.82.0 → 0.84.0

package/src/embed-template.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@jest/globals";
-import { generateDataFromEmbedTemplate } from "./embed-template";
+import { generateDataFromEmbedTemplate, namespaceMeta } from "./embed-template";
 import { showAttribute } from "./tree";
 
 const expectString = expect.any(String);
@@ -220,15 +220,14 @@ test("generate data for embedding from props bound to data source variables", ()
         {
           type: "instance",
           component: "Box1",
+          dataSources: {
+            showOtherBoxDataSource: { type: "variable", initialValue: false },
+          },
           props: [
             {
-              type: "boolean",
+              type: "dataSource",
               name: "showOtherBox",
-              value: false,
-              dataSourceRef: {
-                type: "variable",
-                name: "showOtherBoxDataSource",
-              },
+              dataSourceName: "showOtherBoxDataSource",
             },
           ],
           children: [],
@@ -238,13 +237,9 @@ test("generate data for embedding from props bound to data source variables", ()
           component: "Box2",
           props: [
             {
-              type: "boolean",
+              type: "dataSource",
               name: showAttribute,
-              value: false,
-              dataSourceRef: {
-                type: "variable",
-                name: "showOtherBoxDataSource",
-              },
+              dataSourceName: "showOtherBoxDataSource",
             },
           ],
           children: [],
@@ -302,12 +297,18 @@ test("generate data for embedding from props bound to data source expressions",
         {
           type: "instance",
           component: "Box1",
+          dataSources: {
+            boxState: { type: "variable", initialValue: "initial" },
+            boxStateSuccess: {
+              type: "expression",
+              code: `boxState === 'success'`,
+            },
+          },
           props: [
             {
-              type: "string",
+              type: "dataSource",
               name: "state",
-              value: "initial",
-              dataSourceRef: { type: "variable", name: "boxState" },
+              dataSourceName: "boxState",
             },
           ],
           children: [],
@@ -317,14 +318,9 @@ test("generate data for embedding from props bound to data source expressions",
           component: "Box2",
           props: [
             {
-              type: "boolean",
+              type: "dataSource",
               name: showAttribute,
-              value: false,
-              dataSourceRef: {
-                type: "expression",
-                name: "boxStateSuccess",
-                code: `boxState === 'success'`,
-              },
+              dataSourceName: "boxStateSuccess",
             },
           ],
           children: [],
@@ -389,12 +385,14 @@ test("generate data for embedding from action props", () => {
         {
           type: "instance",
           component: "Box1",
+          dataSources: {
+            boxState: { type: "variable", initialValue: "initial" },
+          },
           props: [
             {
-              type: "string",
+              type: "dataSource",
               name: "state",
-              value: "initial",
-              dataSourceRef: { type: "variable", name: "boxState" },
+              dataSourceName: "boxState",
             },
           ],
           children: [
@@ -407,6 +405,17 @@ test("generate data for embedding from action props", () => {
                   name: "onClick",
                   value: [{ type: "execute", code: `boxState = 'success'` }],
                 },
+                {
+                  type: "action",
+                  name: "onChange",
+                  value: [
+                    {
+                      type: "execute",
+                      args: ["value"],
+                      code: `boxState = value`,
+                    },
+                  ],
+                },
               ],
               children: [],
             },
@@ -442,10 +451,24 @@ test("generate data for embedding from action props", () => {
         value: [
           {
             type: "execute",
+            args: [],
             code: expect.stringMatching(/\$ws\$dataSource\$\w+ = 'success'/),
           },
         ],
       },
+      {
+        id: expectString,
+        instanceId: expectString,
+        type: "action",
+        name: "onChange",
+        value: [
+          {
+            type: "execute",
+            args: ["value"],
+            code: expect.stringMatching(/\$ws\$dataSource\$\w+ = value/),
+          },
+        ],
+      },
     ],
     dataSources: [
       {
@@ -464,3 +487,67 @@ test("generate data for embedding from action props", () => {
     styles: [],
   });
 });
+
+test("add namespace to selected components in embed template", () => {
+  expect(
+    namespaceMeta(
+      {
+        type: "container",
+        label: "",
+        icon: "",
+        requiredAncestors: ["Button", "Box"],
+        invalidAncestors: ["Tooltip"],
+        indexWithinAncestor: "Tooltip",
+        template: [
+          {
+            type: "instance",
+            component: "Tooltip",
+            children: [
+              { type: "text", value: "Some text" },
+              {
+                type: "instance",
+                component: "Box",
+                children: [
+                  {
+                    type: "instance",
+                    component: "Button",
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      "my-namespace",
+      new Set(["Tooltip", "Button"])
+    )
+  ).toEqual({
+    type: "container",
+    label: "",
+    icon: "",
+    requiredAncestors: ["my-namespace:Button", "Box"],
+    invalidAncestors: ["my-namespace:Tooltip"],
+    indexWithinAncestor: "my-namespace:Tooltip",
+    template: [
+      {
+        type: "instance",
+        component: "my-namespace:Tooltip",
+        children: [
+          { type: "text", value: "Some text" },
+          {
+            type: "instance",
+            component: "Box",
+            children: [
+              {
+                type: "instance",
+                component: "my-namespace:Button",
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  });
+});

package/src/embed-template.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { nanoid } from "nanoid";
 import {
-  type Instance,
+  Instance,
   type InstancesList,
   PropsList,
   StyleSourceSelectionsList,
@@ -13,6 +13,7 @@ import {
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-data";
 import type { Simplify } from "type-fest";
 import { encodeDataSourceVariable, validateExpression } from "./expression";
+import type { WsComponentMeta } from "./components/component-meta";
 
 const EmbedTemplateText = z.object({
   type: z.literal("text"),
@@ -21,43 +22,48 @@ const EmbedTemplateText = z.object({
 
 type EmbedTemplateText = z.infer<typeof EmbedTemplateText>;
 
-const DataSourceVariableRef = z.object({
-  type: z.literal("variable"),
-  name: z.string(),
-});
-
-const DataSourceRef = z.union([
-  DataSourceVariableRef,
+const EmbedTemplateDataSource = z.union([
+  z.object({
+    type: z.literal("variable"),
+    initialValue: z.union([
+      z.string(),
+      z.number(),
+      z.boolean(),
+      z.array(z.string()),
+    ]),
+  }),
   z.object({
     type: z.literal("expression"),
-    name: z.string(),
     code: z.string(),
   }),
 ]);
 
+type EmbedTemplateDataSource = z.infer<typeof EmbedTemplateDataSource>;
+
 const EmbedTemplateProp = z.union([
+  z.object({
+    type: z.literal("dataSource"),
+    name: z.string(),
+    dataSourceName: z.string(),
+  }),
   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()),
   }),
   z.object({
@@ -66,6 +72,7 @@ const EmbedTemplateProp = z.union([
     value: z.array(
       z.object({
         type: z.literal("execute"),
+        args: z.optional(z.array(z.string())),
         code: z.string(),
       })
     ),
@@ -94,6 +101,7 @@ export type EmbedTemplateInstance = {
   type: "instance";
   component: string;
   label?: string;
+  dataSources?: Record<string, EmbedTemplateDataSource>;
   props?: EmbedTemplateProp[];
   styles?: EmbedTemplateStyleDecl[];
   children: Array<EmbedTemplateInstance | EmbedTemplateText>;
@@ -105,6 +113,7 @@ export const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance> = z.lazy(
       type: z.literal("instance"),
       component: z.string(),
       label: z.optional(z.string()),
+      dataSources: z.optional(z.record(z.string(), EmbedTemplateDataSource)),
       props: z.optional(z.array(EmbedTemplateProp)),
       styles: z.optional(z.array(EmbedTemplateStyleDecl)),
       children: WsEmbedTemplate,
@@ -117,6 +126,25 @@ export const WsEmbedTemplate = z.lazy(() =>
 
 export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
 
+const getDataSourceValue = (
+  value: Extract<EmbedTemplateDataSource, { type: "variable" }>["initialValue"]
+): Extract<DataSource, { type: "variable" }>["value"] => {
+  if (typeof value === "string") {
+    return { type: "string", value };
+  }
+  if (typeof value === "number") {
+    return { type: "number", value };
+  }
+  if (typeof value === "boolean") {
+    return { type: "boolean", value };
+  }
+  if (Array.isArray(value)) {
+    return { type: "string[]", value };
+  }
+  value satisfies never;
+  throw Error("Impossible case");
+};
+
 const createInstancesFromTemplate = (
   treeTemplate: WsEmbedTemplate,
   instances: InstancesList,
@@ -132,6 +160,38 @@ const createInstancesFromTemplate = (
     if (item.type === "instance") {
       const instanceId = nanoid();
 
+      if (item.dataSources) {
+        for (const [name, dataSource] of Object.entries(item.dataSources)) {
+          if (dataSourceByRef.has(name)) {
+            throw Error(`${name} data source already defined`);
+          }
+          if (dataSource.type === "variable") {
+            dataSourceByRef.set(name, {
+              type: "variable",
+              id: nanoid(),
+              scopeInstanceId: instanceId,
+              name,
+              value: getDataSourceValue(dataSource.initialValue),
+            });
+          }
+          if (dataSource.type === "expression") {
+            dataSourceByRef.set(name, {
+              type: "expression",
+              id: nanoid(),
+              scopeInstanceId: instanceId,
+              name,
+              // replace all references with variable names
+              code: validateExpression(dataSource.code, {
+                transformIdentifier: (ref) => {
+                  const id = dataSourceByRef.get(ref)?.id ?? ref;
+                  return encodeDataSourceVariable(id);
+                },
+              }),
+            });
+          }
+        }
+      }
+
       // populate props
       if (item.props) {
         for (const prop of item.props) {
@@ -144,12 +204,18 @@ const createInstancesFromTemplate = (
               type: "action",
               name: prop.name,
               value: prop.value.map((value) => {
+                const args = value.args ?? [];
                 return {
                   type: "execute",
+                  args,
                   // replace all references with variable names
                   code: validateExpression(value.code, {
                     effectful: true,
                     transformIdentifier: (ref) => {
+                      // bypass arguments without changes
+                      if (args.includes(ref)) {
+                        return ref;
+                      }
                       const id = dataSourceByRef.get(ref)?.id ?? ref;
                       return encodeDataSourceVariable(id);
                     },
@@ -159,51 +225,21 @@ const createInstancesFromTemplate = (
             });
             continue;
           }
-          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,
-                // replace all references with variable names
-                code: validateExpression(dataSourceRef.code, {
-                  transformIdentifier: (ref) => {
-                    const id = dataSourceByRef.get(ref)?.id ?? ref;
-                    return encodeDataSourceVariable(id);
-                  },
-                }),
-              };
-              dataSourceByRef.set(dataSourceRef.name, dataSource);
-            } else {
-              dataSourceRef satisfies never;
-              continue;
+          if (prop.type === "dataSource") {
+            const dataSource = dataSourceByRef.get(prop.dataSourceName);
+            if (dataSource === undefined) {
+              throw Error(`${prop.dataSourceName} data source is not defined`);
             }
+            props.push({
+              id: propId,
+              instanceId,
+              type: "dataSource",
+              name: prop.name,
+              value: dataSource.id,
+            });
+            continue;
           }
-          props.push({
-            id: propId,
-            instanceId,
-            type: "dataSource",
-            name: prop.name,
-            value: dataSource.id,
-          });
+          props.push({ id: propId, instanceId, ...prop });
         }
       }
 
@@ -301,3 +337,60 @@ export const generateDataFromEmbedTemplate = (
 export type EmbedTemplateData = ReturnType<
   typeof generateDataFromEmbedTemplate
 >;
+
+const namespaceEmbedTemplateComponents = (
+  template: WsEmbedTemplate,
+  namespace: string,
+  components: Set<EmbedTemplateInstance["component"]>
+): WsEmbedTemplate => {
+  return template.map((item) => {
+    if (item.type === "text") {
+      return item;
+    }
+    if (item.type === "instance") {
+      const prefix = components.has(item.component) ? `${namespace}:` : "";
+      return {
+        ...item,
+        component: `${prefix}${item.component}`,
+        children: namespaceEmbedTemplateComponents(
+          item.children,
+          namespace,
+          components
+        ),
+      };
+    }
+    item satisfies never;
+    throw Error("Impossible case");
+  });
+};
+
+export const namespaceMeta = (
+  meta: WsComponentMeta,
+  namespace: string,
+  components: Set<EmbedTemplateInstance["component"]>
+) => {
+  const newMeta = { ...meta };
+  if (newMeta.requiredAncestors) {
+    newMeta.requiredAncestors = newMeta.requiredAncestors.map((component) =>
+      components.has(component) ? `${namespace}:${component}` : component
+    );
+  }
+  if (newMeta.invalidAncestors) {
+    newMeta.invalidAncestors = newMeta.invalidAncestors.map((component) =>
+      components.has(component) ? `${namespace}:${component}` : component
+    );
+  }
+  if (newMeta.indexWithinAncestor) {
+    newMeta.indexWithinAncestor = components.has(newMeta.indexWithinAncestor)
+      ? `${namespace}:${newMeta.indexWithinAncestor}`
+      : newMeta.indexWithinAncestor;
+  }
+  if (newMeta.template) {
+    newMeta.template = namespaceEmbedTemplateComponents(
+      newMeta.template,
+      namespace,
+      components
+    );
+  }
+  return newMeta;
+};

package/src/expression.test.ts

@@ -4,6 +4,7 @@ import {
   encodeDataSourceVariable,
   executeComputingExpressions,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   generateComputingExpressions,
   generateEffectfulExpression,
   validateExpression,
@@ -186,7 +187,11 @@ test("encode/decode variable names", () => {
 
 test("generate effectful expression", () => {
   expect(
-    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0", "var1"]))
+    generateEffectfulExpression(
+      `var0 = var0 + var1`,
+      new Set(),
+      new Set(["var0", "var1"])
+    )
   ).toMatchInlineSnapshot(`
     "let var0 = _variables.get('var0');
     let var1 = _variables.get('var1');
@@ -197,7 +202,11 @@ test("generate effectful expression", () => {
   `);
 
   expect(
-    generateEffectfulExpression(`var0 = var1 + 1`, new Set(["var0", "var1"]))
+    generateEffectfulExpression(
+      `var0 = var1 + 1`,
+      new Set(),
+      new Set(["var0", "var1"])
+    )
   ).toMatchInlineSnapshot(`
     "let var1 = _variables.get('var1');
     let var0;
@@ -212,6 +221,7 @@ test("add only used variables in effectful expression", () => {
   expect(
     generateEffectfulExpression(
       `var0 = var1 + 1`,
+      new Set(),
       new Set(["var0", "var1", "var2"])
     )
   ).toMatchInlineSnapshot(`
@@ -224,10 +234,34 @@ test("add only used variables in effectful expression", () => {
   `);
 });
 
-test("forbid not allowed variables in effectful expression", () => {
+test("support effectful expression arguments", () => {
+  expect(
+    generateEffectfulExpression(
+      `var0 = arg0 + 1`,
+      new Set(["arg0"]),
+      new Set(["var0"])
+    )
+  ).toMatchInlineSnapshot(`
+    "let arg0 = _args.get('arg0');
+    let var0;
+    var0 = arg0 + 1;
+    return new Map([
+      ['var0', var0],
+    ]);"
+  `);
+});
+
+test("forbid not allowed variables or arguments in effectful expression", () => {
   expect(() => {
-    generateEffectfulExpression(`var0 = var0 + var1`, new Set(["var0"]));
+    generateEffectfulExpression(
+      `var0 = var0 + var1`,
+      new Set(),
+      new Set(["var0"])
+    );
   }).toThrowError(/Unknown dependency "var1"/);
+  expect(() => {
+    generateEffectfulExpression(`var0 = arg0`, new Set(), new Set(["var0"]));
+  }).toThrowError(/Unknown dependency "arg0"/);
 });
 
 test("execute effectful expression", () => {
@@ -235,7 +269,41 @@ test("execute effectful expression", () => {
     ["var0", 2],
     ["var1", 3],
   ]);
-  expect(executeEffectfulExpression(`var0 = var0 + var1`, variables)).toEqual(
-    new Map([["var0", 5]])
+  expect(
+    executeEffectfulExpression(`var0 = var0 + var1`, new Map(), variables)
+  ).toEqual(new Map([["var0", 5]]));
+
+  expect(
+    executeEffectfulExpression(`arg0 = 5`, new Map([["arg0", 0]]), new Map())
+  ).toEqual(new Map());
+});
+
+test("compute expressions dependencies", () => {
+  const expressions = new Map([
+    ["exp1", `var1`],
+    ["exp2", `exp1 + exp1`],
+    ["exp3", `exp1 + exp2`],
+    ["exp4", `var1 + exp1`],
+  ]);
+  expect(computeExpressionsDependencies(expressions)).toEqual(
+    new Map([
+      ["exp4", new Set(["var1", "exp1"])],
+      ["exp3", new Set(["var1", "exp1", "exp2"])],
+      ["exp2", new Set(["var1", "exp1"])],
+      ["exp1", new Set(["var1"])],
+    ])
+  );
+});
+
+test("handle cyclic dependencies", () => {
+  const expressions = new Map([
+    ["exp1", `exp2 + var1`],
+    ["exp2", `exp1 + var1`],
+  ]);
+  expect(computeExpressionsDependencies(expressions)).toEqual(
+    new Map([
+      ["exp2", new Set(["var1", "exp1", "exp2"])],
+      ["exp1", new Set(["var1", "exp1", "exp2"])],
+    ])
   );
 });