@webstudio-is/react-sdk 0.83.0 → 0.84.0

package/src/embed-template.test.ts

@@ -1,8 +1,5 @@
 import { expect, test } from "@jest/globals";
-import {
-  generateDataFromEmbedTemplate,
-  namespaceEmbedTemplateComponents,
-} from "./embed-template";
+import { generateDataFromEmbedTemplate, namespaceMeta } from "./embed-template";
 import { showAttribute } from "./tree";
 
 const expectString = expect.any(String);
@@ -223,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: [],
@@ -241,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: [],
@@ -305,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: [],
@@ -320,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: [],
@@ -392,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: [
@@ -495,48 +490,64 @@ test("generate data for embedding from action props", () => {
 
 test("add namespace to selected components in embed template", () => {
   expect(
-    namespaceEmbedTemplateComponents(
-      [
-        {
-          type: "instance",
-          component: "Tooltip",
-          children: [
-            { type: "text", value: "Some text" },
-            {
-              type: "instance",
-              component: "Box",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
-      ],
+    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: "instance",
-      component: "my-namespace:Tooltip",
-      children: [
-        { type: "text", value: "Some text" },
-        {
-          type: "instance",
-          component: "Box",
-          children: [
-            {
-              type: "instance",
-              component: "my-namespace:Button",
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-  ]);
+  ).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

@@ -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({
@@ -95,6 +101,7 @@ export type EmbedTemplateInstance = {
   type: "instance";
   component: string;
   label?: string;
+  dataSources?: Record<string, EmbedTemplateDataSource>;
   props?: EmbedTemplateProp[];
   styles?: EmbedTemplateStyleDecl[];
   children: Array<EmbedTemplateInstance | EmbedTemplateText>;
@@ -106,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,
@@ -118,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,
@@ -133,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) {
@@ -166,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 });
         }
       }
 
@@ -309,7 +338,7 @@ export type EmbedTemplateData = ReturnType<
   typeof generateDataFromEmbedTemplate
 >;
 
-export const namespaceEmbedTemplateComponents = (
+const namespaceEmbedTemplateComponents = (
   template: WsEmbedTemplate,
   namespace: string,
   components: Set<EmbedTemplateInstance["component"]>
@@ -334,3 +363,34 @@ export const namespaceEmbedTemplateComponents = (
     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/hook.ts

@@ -0,0 +1,42 @@
+import type { Instance, Prop } from "@webstudio-is/project-build";
+
+/**
+ * Hooks are subscriptions to builder events
+ * with limited way to interact with it.
+ * Called independently from components.
+ */
+
+export type HookContext = {
+  setPropVariable: (
+    instanceId: Instance["id"],
+    propName: Prop["name"],
+    value: unknown
+  ) => void;
+};
+
+export type InstanceSelection = Instance[];
+
+type NavigatorEvent = {
+  instanceSelection: InstanceSelection;
+};
+
+export type Hook = {
+  onNavigatorSelect?: (context: HookContext, event: NavigatorEvent) => void;
+  onNavigatorUnselect?: (context: HookContext, event: NavigatorEvent) => void;
+};
+
+export const getClosestInstance = (
+  instanceSelection: InstanceSelection,
+  currentInstance: Instance,
+  closestComponent: Instance["component"]
+) => {
+  let matched = false;
+  for (const instance of instanceSelection) {
+    if (currentInstance === instance) {
+      matched = true;
+    }
+    if (matched && instance.component === closestComponent) {
+      return instance;
+    }
+  }
+};

package/src/index.ts

@@ -18,6 +18,7 @@ export {
   usePropUrl,
   usePropAsset,
   getInstanceIdFromComponentProps,
+  getIndexWithinAncestorFromComponentProps,
 } from "./props";
 export { type Params, ReactSdkContext } from "./context";
 export {
@@ -32,3 +33,6 @@ export {
   decodeDataSourceVariable,
   decodeVariablesMap,
 } from "./expression";
+export { renderComponentTemplate } from "./component-renderer";
+export { getIndexesWithinAncestors } from "./instance-utils";
+export * from "./hook";

package/src/instance-utils.test.ts

@@ -0,0 +1,89 @@
+import { test, expect } from "@jest/globals";
+import type { Instance, Instances } from "@webstudio-is/project-build";
+import { getIndexesWithinAncestors } from "./instance-utils";
+import type { WsComponentMeta } from ".";
+
+const getIdValuePair = <T extends { id: string }>(item: T) =>
+  [item.id, item] as const;
+
+const toMap = <T extends { id: string }>(list: T[]) =>
+  new Map(list.map(getIdValuePair));
+
+const createInstance = (
+  id: Instance["id"],
+  component: string,
+  children: Instance["children"]
+): Instance => {
+  return { type: "instance", id, component, children };
+};
+
+const createMeta = (meta?: Partial<WsComponentMeta>) => {
+  return { type: "container", label: "", icon: "", ...meta } as const;
+};
+
+test("get indexes within ancestors", () => {
+  // body0
+  //   tabs1
+  //     tabs1list
+  //       tabs1box
+  //         tabs1trigger1
+  //         tabs1trigger2
+  //     tabs1content1
+  //       tabs2
+  //         tabs2list
+  //           tabs2trigger1
+  //         tabs2content1
+  //     tabs1content2
+  const instances: Instances = toMap([
+    createInstance("body0", "Body", [{ type: "id", value: "tabs1" }]),
+    // tabs1
+    createInstance("tabs1", "Tabs", [
+      { type: "id", value: "tabs1list" },
+      { type: "id", value: "tabs1content1" },
+      { type: "id", value: "tabs1content2" },
+    ]),
+    createInstance("tabs1list", "TabsList", [
+      { type: "id", value: "tabs1box" },
+    ]),
+    createInstance("tabs1box", "Box", [
+      { type: "id", value: "tabs1trigger1" },
+      { type: "id", value: "tabs1trigger2" },
+    ]),
+    createInstance("tabs1trigger1", "TabsTrigger", []),
+    createInstance("tabs1trigger2", "TabsTrigger", []),
+    createInstance("tabs1content1", "TabsContent", [
+      { type: "id", value: "tabs2" },
+    ]),
+    createInstance("tabs1content2", "TabsContent", []),
+    // tabs2
+    createInstance("tabs2", "Tabs", [
+      { type: "id", value: "tabs2list" },
+      { type: "id", value: "tabs2content1" },
+    ]),
+    createInstance("tabs2list", "TabsList", [
+      { type: "id", value: "tabs2trigger1" },
+    ]),
+    createInstance("tabs2trigger1", "TabsTrigger", []),
+    createInstance("tabs2content1", "TabsContent", []),
+  ] satisfies Instance[]);
+  const metas = new Map<Instance["component"], WsComponentMeta>([
+    ["Body", createMeta()],
+    ["Box", createMeta()],
+    ["Tabs", createMeta()],
+    ["TabsList", createMeta({ indexWithinAncestor: "Tabs" })],
+    ["TabsTrigger", createMeta({ indexWithinAncestor: "TabsList" })],
+    ["TabsContent", createMeta({ indexWithinAncestor: "Tabs" })],
+  ]);
+  expect(getIndexesWithinAncestors(metas, instances, ["body0"])).toEqual(
+    new Map([
+      ["tabs1list", 0],
+      ["tabs1trigger1", 0],
+      ["tabs1trigger2", 1],
+      ["tabs1content1", 0],
+      ["tabs1content2", 1],
+      ["tabs2list", 0],
+      ["tabs2trigger1", 0],
+      ["tabs2content1", 0],
+    ])
+  );
+});

package/src/instance-utils.ts

@@ -0,0 +1,65 @@
+import type { Instance, Instances } from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "./components/component-meta";
+
+export type IndexesWithinAncestors = Map<Instance["id"], number>;
+
+export const getIndexesWithinAncestors = (
+  metas: Map<Instance["component"], WsComponentMeta>,
+  instances: Instances,
+  rootIds: Instance["id"][]
+) => {
+  const ancestors = new Set<Instance["component"]>();
+  for (const meta of metas.values()) {
+    if (meta.indexWithinAncestor !== undefined) {
+      ancestors.add(meta.indexWithinAncestor);
+    }
+  }
+
+  const indexes: IndexesWithinAncestors = new Map();
+
+  const traverseInstances = (
+    instances: Instances,
+    instanceId: Instance["id"],
+    latestIndexes = new Map<
+      Instance["component"],
+      Map<Instance["component"], number>
+    >()
+  ) => {
+    const instance = instances.get(instanceId);
+    if (instance === undefined) {
+      return;
+    }
+    const meta = metas.get(instance.component);
+    if (meta === undefined) {
+      return;
+    }
+
+    if (ancestors.has(instance.component)) {
+      latestIndexes = new Map(latestIndexes);
+      latestIndexes.set(instance.component, new Map());
+    }
+
+    if (meta.indexWithinAncestor !== undefined) {
+      const ancestorIndexes = latestIndexes.get(meta.indexWithinAncestor);
+      if (ancestorIndexes !== undefined) {
+        let index = ancestorIndexes.get(instance.component) ?? -1;
+        index += 1;
+        ancestorIndexes.set(instance.component, index);
+        indexes.set(instance.id, index);
+      }
+    }
+
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        traverseInstances(instances, child.value, latestIndexes);
+      }
+    }
+  };
+
+  const latestIndexes = new Map();
+  for (const instanceId of rootIds) {
+    traverseInstances(instances, instanceId, latestIndexes);
+  }
+
+  return indexes;
+};