@webstudio-is/react-sdk 0.82.0 → 0.84.0

package/src/expression.ts

@@ -252,6 +252,7 @@ export const executeComputingExpressions = (
 
 export const generateEffectfulExpression = (
   code: string,
+  args: Set<string>,
   allowedVariables: Set<string>
 ) => {
   const inputVariables = new Set<string>();
@@ -259,6 +260,9 @@ export const generateEffectfulExpression = (
   validateExpression(code, {
     effectful: true,
     transformIdentifier: (identifier, assignee) => {
+      if (args.has(identifier)) {
+        return identifier;
+      }
       if (allowedVariables.has(identifier)) {
         if (assignee) {
           outputVariables.add(identifier);
@@ -274,6 +278,9 @@ export const generateEffectfulExpression = (
   // generate code computing all expressions
   let generatedCode = "";
 
+  for (const id of args) {
+    generatedCode += `let ${id} = _args.get('${id}');\n`;
+  }
   for (const id of inputVariables) {
     generatedCode += `let ${id} = _variables.get('${id}');\n`;
   }
@@ -296,17 +303,63 @@ export const generateEffectfulExpression = (
 
 export const executeEffectfulExpression = (
   code: string,
+  args: Map<string, unknown>,
   variables: Map<string, unknown>
 ) => {
   const generatedCode = generateEffectfulExpression(
     code,
+    new Set(args.keys()),
     new Set(variables.keys())
   );
-  const executeFn = new Function("_variables", generatedCode);
-  const values = executeFn(variables) as Map<string, unknown>;
+  const executeFn = new Function("_variables", "_args", generatedCode);
+  const values = executeFn(variables, args) as Map<string, unknown>;
   return values;
 };
 
+const computeExpressionDependencies = (
+  expressions: Map<string, string>,
+  expressionId: string,
+  dependencies: Map<string, Set<string>>
+) => {
+  // prevent recalculating expressions over again
+  const depsById = dependencies.get(expressionId);
+  if (depsById) {
+    return depsById;
+  }
+  const parentDeps = new Set<string>();
+  const code = expressions.get(expressionId);
+  if (code === undefined) {
+    return parentDeps;
+  }
+  // write before recursive call to avoid infinite cycle
+  dependencies.set(expressionId, parentDeps);
+  validateExpression(code, {
+    transformIdentifier: (id) => {
+      parentDeps.add(id);
+      const childDeps = computeExpressionDependencies(
+        expressions,
+        id,
+        dependencies
+      );
+      for (const depId of childDeps) {
+        parentDeps.add(depId);
+      }
+      return id;
+    },
+  });
+  return parentDeps;
+};
+
+export const computeExpressionsDependencies = (
+  expressions: Map<string, string>
+) => {
+  const dependencies = new Map<string, Set<string>>();
+  for (const id of expressions.keys()) {
+    computeExpressionDependencies(expressions, id, dependencies);
+  }
+  return dependencies;
+};
+
 type Values = Map<string, unknown>;
 
 const dataSourceVariablePrefix = "$ws$dataSource$";

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 {
@@ -26,8 +27,12 @@ export {
   executeComputingExpressions,
   generateEffectfulExpression,
   executeEffectfulExpression,
+  computeExpressionsDependencies,
   encodeDataSourceVariable,
   encodeVariablesMap,
   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;
+};

package/src/props.ts

@@ -4,7 +4,7 @@ import { useStore } from "@nanostores/react";
 import type { Instance, Page, Prop, Props } from "@webstudio-is/project-build";
 import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 import { ReactSdkContext } from "./context";
-import { idAttribute } from "./tree/webstudio-component";
+import { idAttribute, indexAttribute } from "./tree/webstudio-component";
 
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 
@@ -32,12 +32,17 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
     executeEffectfulExpression,
     setDataSourceValues,
     renderer,
+    indexesWithinAncestors,
   } = useContext(ReactSdkContext);
+  const index = indexesWithinAncestors.get(instanceId);
   const instancePropsObjectStore = useMemo(() => {
     return computed(
       [propsByInstanceIdStore, dataSourceValuesStore],
       (propsByInstanceId, dataSourceValues) => {
         const instancePropsObject: Record<Prop["name"], unknown> = {};
+        if (index !== undefined) {
+          instancePropsObject[indexAttribute] = index.toString();
+        }
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === undefined) {
           return instancePropsObject;
@@ -55,15 +60,20 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
             continue;
           }
           if (prop.type === "action") {
-            instancePropsObject[prop.name] = () => {
+            instancePropsObject[prop.name] = (...args: unknown[]) => {
               // prevent all actions in canvas mode
               if (renderer === "canvas") {
                 return;
               }
               for (const value of prop.value) {
                 if (value.type === "execute") {
+                  const argsMap = new Map<string, unknown>();
+                  for (const [i, name] of value.args.entries()) {
+                    argsMap.set(name, args[i]);
+                  }
                   const newValues = executeEffectfulExpression(
                     value.code,
+                    argsMap,
                     dataSourceValues
                   );
                   setDataSourceValues(newValues);
@@ -84,6 +94,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
     renderer,
     executeEffectfulExpression,
     setDataSourceValues,
+    index,
   ]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
@@ -208,3 +219,9 @@ export const getInstanceIdFromComponentProps = (
 ) => {
   return props[idAttribute] as string;
 };
+
+export const getIndexWithinAncestorFromComponentProps = (
+  props: Record<string, unknown>
+) => {
+  return props[indexAttribute] as string | undefined;
+};

package/src/tree/create-elements-tree.tsx

@@ -1,6 +1,10 @@
-import { type ComponentProps, Fragment } from "react";
+import {
+  Fragment,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  type ReactNode,
+} from "react";
 import type { ReadableAtom } from "nanostores";
-import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
@@ -10,7 +14,8 @@ import {
   ReactSdkContext,
 } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
-import type { WebstudioComponent } from "./webstudio-component";
+import type { WebstudioComponentProps } from "./webstudio-component";
+import type { IndexesWithinAncestors } from "../instance-utils";
 
 type InstanceSelector = Instance["id"][];
 
@@ -26,8 +31,10 @@ export const createElementsTree = ({
   dataSourceValuesStore,
   executeEffectfulExpression,
   onDataSourceUpdate,
+  indexesWithinAncestors,
   Component,
   components,
+  scripts,
 }: Params & {
   instances: Instances;
   rootInstanceId: Instance["id"];
@@ -36,12 +43,18 @@ export const createElementsTree = ({
   pagesStore: ReadableAtom<Pages>;
   executeEffectfulExpression: (
     expression: string,
+    args: DataSourceValues,
     values: DataSourceValues
   ) => DataSourceValues;
   dataSourceValuesStore: ReadableAtom<DataSourceValues>;
   onDataSourceUpdate: (newValues: DataSourceValues) => void;
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  indexesWithinAncestors: IndexesWithinAncestors;
+
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
+  scripts?: ReactNode;
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === undefined) {
@@ -63,8 +76,7 @@ export const createElementsTree = ({
     children: [
       <Fragment key="children">
         {children}
-        <ScrollRestoration />
-        <Scripts />
+        {scripts}
       </Fragment>,
     ],
     components,
@@ -79,6 +91,7 @@ export const createElementsTree = ({
         renderer,
         imageBaseUrl,
         assetBaseUrl,
+        indexesWithinAncestors,
         executeEffectfulExpression,
         setDataSourceValues: onDataSourceUpdate,
         setBoundDataSourceValue: (instanceId, propName, value) => {
@@ -110,7 +123,9 @@ const createInstanceChildrenElements = ({
   instances: Instances;
   instanceSelector: InstanceSelector;
   children: Instance["children"];
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
 }) => {
   const elements = [];
@@ -152,7 +167,9 @@ const createInstanceElement = ({
 }: {
   instance: Instance;
   instanceSelector: InstanceSelector;
-  Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   children?: Array<JSX.Element | string>;
   components: Components;
 }) => {

package/src/tree/root.ts

@@ -1,4 +1,10 @@
-import { useRef, type ComponentProps, useCallback } from "react";
+import {
+  useRef,
+  useCallback,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  type ReactNode,
+} from "react";
 import {
   atom,
   computed,
@@ -8,10 +14,14 @@ import {
 import { type Build, type Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { createElementsTree } from "./create-elements-tree";
-import { WebstudioComponent } from "./webstudio-component";
+import {
+  WebstudioComponent,
+  type WebstudioComponentProps,
+} from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
 import type { Components } from "../components/components-utils";
 import type { Params, DataSourceValues } from "../context";
+import type { IndexesWithinAncestors } from "../instance-utils";
 
 export type Data = {
   page: Page;
@@ -27,21 +37,28 @@ export type RootPropsData = Omit<Data, "build"> & {
 
 type RootProps = {
   data: RootPropsData;
+  indexesWithinAncestors: IndexesWithinAncestors;
   executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
   executeEffectfulExpression: (
     expression: string,
+    args: DataSourceValues,
     values: DataSourceValues
   ) => DataSourceValues;
-  Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
+  Component?: ForwardRefExoticComponent<
+    WebstudioComponentProps & RefAttributes<HTMLElement>
+  >;
   components: Components;
+  scripts?: ReactNode;
 };
 
 export const InstanceRoot = ({
   data,
+  indexesWithinAncestors,
   executeComputingExpressions,
   executeEffectfulExpression,
   Component,
   components,
+  scripts,
 }: RootProps): JSX.Element | null => {
   const dataSourceVariablesStoreRef = useRef<
     undefined | WritableAtom<DataSourceValues>
@@ -106,10 +123,12 @@ export const InstanceRoot = ({
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
+    indexesWithinAncestors,
     executeEffectfulExpression,
     dataSourceValuesStore,
     onDataSourceUpdate,
     Component: Component ?? WebstudioComponent,
     components,
+    scripts,
   });
 };

package/src/tree/webstudio-component.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, forwardRef } from "react";
 import type { Instance } from "@webstudio-is/project-build";
 import type { Components } from "../components/components-utils";
 import { useInstanceProps } from "../props";
@@ -26,20 +26,18 @@ export const renderWebstudioComponentChildren = (
   });
 };
 
-type WebstudioComponentProps = {
+export type WebstudioComponentProps = {
   instance: Instance;
   instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   components: Components;
 };
 
-export const WebstudioComponent = ({
-  instance,
-  instanceSelector,
-  children,
-  components,
-  ...rest
-}: WebstudioComponentProps) => {
+// eslint-disable-next-line react/display-name
+export const WebstudioComponent = forwardRef<
+  HTMLElement,
+  WebstudioComponentProps
+>(({ instance, instanceSelector, children, components, ...rest }, ref) => {
   const { [showAttribute]: show = true, ...instanceProps } = useInstanceProps(
     instance.id
   );
@@ -57,13 +55,43 @@ export const WebstudioComponent = ({
     return <></>;
   }
   return (
-    <Component {...props}>
+    <Component {...props} ref={ref}>
       {renderWebstudioComponentChildren(children)}
     </Component>
   );
+});
+
+export const idAttribute = "data-ws-id" as const;
+export const selectorIdAttribute = "data-ws-selector" as const;
+export const componentAttribute = "data-ws-component" as const;
+export const showAttribute = "data-ws-show" as const;
+export const indexAttribute = "data-ws-index" as const;
+export const collapsedAttribute = "data-ws-collapsed" as const;
+
+export type WebstudioAttributes = {
+  [idAttribute]?: string | undefined;
+  [selectorIdAttribute]?: string | undefined;
+  [componentAttribute]?: string | undefined;
+  [showAttribute]?: string | undefined;
+  [collapsedAttribute]?: string | undefined;
 };
 
-export const idAttribute = "data-ws-id";
-export const componentAttribute = "data-ws-component";
-export const showAttribute = "data-ws-show";
-export const collapsedAttribute = "data-ws-collapsed";
+export const splitPropsWithWebstudioAttributes = <
+  P extends WebstudioAttributes,
+>({
+  [idAttribute]: idAttributeValue,
+  [componentAttribute]: componentAttributeValue,
+  [showAttribute]: showAttributeValue,
+  [collapsedAttribute]: collapsedAttributeValue,
+  [selectorIdAttribute]: parentIdAttributeValue,
+  ...props
+}: P): [WebstudioAttributes, Omit<P, keyof WebstudioAttributes>] => [
+  {
+    [idAttribute]: idAttributeValue,
+    [componentAttribute]: componentAttributeValue,
+    [showAttribute]: showAttributeValue,
+    [collapsedAttribute]: collapsedAttributeValue,
+    [selectorIdAttribute]: parentIdAttributeValue,
+  },
+  props,
+];