@webstudio-is/react-sdk 0.83.0 → 0.85.0

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;
@@ -89,6 +94,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
     renderer,
     executeEffectfulExpression,
     setDataSourceValues,
+    index,
   ]);
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
@@ -213,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

@@ -2,9 +2,9 @@ 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";
@@ -15,6 +15,7 @@ import {
 } from "../context";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponentProps } from "./webstudio-component";
+import type { IndexesWithinAncestors } from "../instance-utils";
 
 type InstanceSelector = Instance["id"][];
 
@@ -30,8 +31,10 @@ export const createElementsTree = ({
   dataSourceValuesStore,
   executeEffectfulExpression,
   onDataSourceUpdate,
+  indexesWithinAncestors,
   Component,
   components,
+  scripts,
 }: Params & {
   instances: Instances;
   rootInstanceId: Instance["id"];
@@ -45,11 +48,13 @@ export const createElementsTree = ({
   ) => DataSourceValues;
   dataSourceValuesStore: ReadableAtom<DataSourceValues>;
   onDataSourceUpdate: (newValues: DataSourceValues) => void;
+  indexesWithinAncestors: IndexesWithinAncestors;
 
   Component: ForwardRefExoticComponent<
     WebstudioComponentProps & RefAttributes<HTMLElement>
   >;
   components: Components;
+  scripts?: ReactNode;
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === undefined) {
@@ -71,8 +76,7 @@ export const createElementsTree = ({
     children: [
       <Fragment key="children">
         {children}
-        <ScrollRestoration />
-        <Scripts />
+        {scripts}
       </Fragment>,
     ],
     components,
@@ -87,6 +91,7 @@ export const createElementsTree = ({
         renderer,
         imageBaseUrl,
         assetBaseUrl,
+        indexesWithinAncestors,
         executeEffectfulExpression,
         setDataSourceValues: onDataSourceUpdate,
         setBoundDataSourceValue: (instanceId, propName, value) => {

package/src/tree/root.ts

@@ -3,6 +3,7 @@ import {
   useCallback,
   type ForwardRefExoticComponent,
   type RefAttributes,
+  type ReactNode,
 } from "react";
 import {
   atom,
@@ -20,6 +21,7 @@ import {
 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;
@@ -35,6 +37,7 @@ export type RootPropsData = Omit<Data, "build"> & {
 
 type RootProps = {
   data: RootPropsData;
+  indexesWithinAncestors: IndexesWithinAncestors;
   executeComputingExpressions: (values: DataSourceValues) => DataSourceValues;
   executeEffectfulExpression: (
     expression: string,
@@ -45,14 +48,17 @@ type RootProps = {
     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>
@@ -117,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

@@ -65,6 +65,7 @@ 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 = {