refactor: move index property to sdk (#5097)

TrySound · web-flow · commit c5ce5f631312 · 2025-04-05T22:50:06.000+07:00
Slowly moving stuff out of react-sdk
diff --git a/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx b/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
@@ -28,12 +28,12 @@ import {
   blockTemplateComponent,
   getIndexesWithinAncestors,
 } from "@webstudio-is/sdk";
+import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
 import {
   idAttribute,
   componentAttribute,
   showAttribute,
   selectorIdAttribute,
-  indexAttribute,
   type AnyComponent,
   textContentAttribute,
 } from "@webstudio-is/react-sdk";
@@ -70,7 +70,6 @@ import {
   editablePlaceholderAttribute,
   editingPlaceholderVariable,
 } from "~/canvas/shared/styles";
-import { tagProperty } from "@webstudio-is/sdk/runtime";
 
 const ContentEditable = ({
   placeholder,
@@ -294,7 +293,7 @@ const useInstanceProps = (instanceSelector: InstanceSelector) => {
         }
         const index = indexesWithinAncestors.get(instanceId);
         if (index !== undefined) {
-          instancePropsObject[indexAttribute] = index.toString();
+          instancePropsObject[indexProperty] = index.toString();
         }
         const instanceProps = propValuesByInstanceSelector.get(instanceKey);
         if (instanceProps) {
diff --git a/packages/react-sdk/src/component-generator.ts b/packages/react-sdk/src/component-generator.ts
@@ -21,8 +21,8 @@ import {
   getIndexesWithinAncestors,
   elementComponent,
 } from "@webstudio-is/sdk";
-import { tagProperty } from "@webstudio-is/sdk/runtime";
-import { indexAttribute, isAttributeNameSafe, showAttribute } from "./props";
+import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
+import { isAttributeNameSafe, showAttribute } from "./props";
 import { standardAttributesToReactProps } from "./standard-attributes";
 
 /**
@@ -172,7 +172,7 @@ export const generateJsxElement = ({
 
   const index = indexesWithinAncestors.get(instance.id);
   if (index !== undefined) {
-    generatedProps += `\n${indexAttribute}="${index}"`;
+    generatedProps += `\n${indexProperty}="${index}"`;
   }
   if (instance.tag !== undefined && instance.component !== elementComponent) {
     generatedProps += `\n${tagProperty}=${JSON.stringify(instance.tag)}`;
diff --git a/packages/react-sdk/src/props.ts b/packages/react-sdk/src/props.ts
@@ -126,7 +126,6 @@ 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 const textContentAttribute = "data-ws-text-content" as const;
 export const animationCanPlayOnCanvasAttribute =
diff --git a/packages/react-sdk/src/runtime.ts b/packages/react-sdk/src/runtime.ts
@@ -11,9 +11,3 @@ export { PageSettingsCanonicalLink } from "./page-settings-canonical-link";
  */
 export const xmlNodeTagSuffix =
   "-ws-xml-node-fb77f896-8e96-40b9-b8f8-90a4e70d724a";
-
-export const getIndexWithinAncestorFromComponentProps = (
-  props: Record<string, unknown>
-) => {
-  return props["data-ws-index"] as string | undefined;
-};
diff --git a/packages/sdk-components-react-radix/src/accordion.tsx b/packages/sdk-components-react-radix/src/accordion.tsx
@@ -12,11 +12,8 @@ import {
   Trigger,
   Content,
 } from "@radix-ui/react-accordion";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  type Hook,
-} from "@webstudio-is/react-sdk/runtime";
+import { getIndexWithinAncestorFromProps } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk/runtime";
 
 export const Accordion = forwardRef<
   HTMLDivElement,
@@ -32,7 +29,7 @@ export const AccordionItem = forwardRef<
   HTMLDivElement,
   Omit<ComponentPropsWithoutRef<typeof Item>, "value"> & { value?: string }
 >(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
+  const index = getIndexWithinAncestorFromProps(props);
   return <Item ref={ref} value={value ?? index ?? ""} {...props} />;
 });
 
diff --git a/packages/sdk-components-react-radix/src/navigation-menu.tsx b/packages/sdk-components-react-radix/src/navigation-menu.tsx
@@ -1,16 +1,16 @@
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  ReactSdkContext,
-  type Hook,
-} from "@webstudio-is/react-sdk/runtime";
 import {
   Children,
   forwardRef,
   type ComponentPropsWithoutRef,
   useContext,
 } from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { getIndexWithinAncestorFromProps } from "@webstudio-is/sdk/runtime";
+import {
+  getClosestInstance,
+  ReactSdkContext,
+  type Hook,
+} from "@webstudio-is/react-sdk/runtime";
 
 export const NavigationMenu = forwardRef<
   HTMLLIElement,
@@ -43,7 +43,7 @@ export const NavigationMenuItem = forwardRef<
   HTMLLIElement,
   Omit<ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>, "asChild">
 >(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
+  const index = getIndexWithinAncestorFromProps(props);
   return (
     <NavigationMenuPrimitive.Item ref={ref} value={value ?? index} {...props} />
   );
diff --git a/packages/sdk-components-react-radix/src/tabs.tsx b/packages/sdk-components-react-radix/src/tabs.tsx
@@ -1,12 +1,9 @@
+import interactionResponse from "await-interaction-response";
 import { type ComponentPropsWithoutRef, forwardRef, useCallback } from "react";
-import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  type Hook,
-} from "@webstudio-is/react-sdk/runtime";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import interactionResponse from "await-interaction-response";
+import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromProps } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk/runtime";
 
 export const Tabs = forwardRef<
   HTMLDivElement,
@@ -45,15 +42,15 @@ export const TabsTrigger = forwardRef<
   HTMLButtonElement,
   Omit<ComponentPropsWithoutRef<typeof Trigger>, "value"> & { value?: string }
 >(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
+  const index = getIndexWithinAncestorFromProps(props);
   return <Trigger ref={ref} value={value ?? index ?? ""} {...props} />;
 });
 
 export const TabsContent = forwardRef<
   HTMLDivElement,
   Omit<ComponentPropsWithoutRef<typeof Content>, "value"> & { value?: string }
 >(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
+  const index = getIndexWithinAncestorFromProps(props);
   return <Content ref={ref} value={value ?? index ?? ""} {...props} />;
 });
 
diff --git a/packages/sdk-components-react/src/box.tsx b/packages/sdk-components-react/src/box.tsx
@@ -4,7 +4,7 @@ import {
   type ElementRef,
   type ComponentProps,
 } from "react";
-import { getTagFromComponentProps } from "@webstudio-is/sdk/runtime";
+import { getTagFromProps } from "@webstudio-is/sdk/runtime";
 
 const defaultTag = "div";
 
@@ -14,7 +14,7 @@ type Props = ComponentProps<typeof defaultTag> & {
 
 export const Box = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag: legacyTag, ...props }, ref) => {
-    const tag = getTagFromComponentProps(props) ?? legacyTag ?? defaultTag;
+    const tag = getTagFromProps(props) ?? legacyTag ?? defaultTag;
     return createElement(tag, { ...props, ref });
   }
 );
diff --git a/packages/sdk-components-react/src/heading.tsx b/packages/sdk-components-react/src/heading.tsx
@@ -4,7 +4,7 @@ import {
   type ComponentProps,
   createElement,
 } from "react";
-import { getTagFromComponentProps } from "@webstudio-is/sdk/runtime";
+import { getTagFromProps } from "@webstudio-is/sdk/runtime";
 
 const defaultTag = "h1";
 
@@ -14,7 +14,7 @@ type Props = ComponentProps<typeof defaultTag> & {
 
 export const Heading = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag: legacyTag, ...props }, ref) => {
-    const tag = getTagFromComponentProps(props) ?? legacyTag ?? defaultTag;
+    const tag = getTagFromProps(props) ?? legacyTag ?? defaultTag;
     return createElement(tag, { ...props, ref });
   }
 );
diff --git a/packages/sdk-components-react/src/text.tsx b/packages/sdk-components-react/src/text.tsx
@@ -4,7 +4,7 @@ import {
   type ElementRef,
   type ComponentProps,
 } from "react";
-import { getTagFromComponentProps } from "@webstudio-is/sdk/runtime";
+import { getTagFromProps } from "@webstudio-is/sdk/runtime";
 
 const defaultTag = "div";
 
@@ -14,7 +14,7 @@ type Props = ComponentProps<typeof defaultTag> & {
 
 export const Text = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag: legacyTag, ...props }, ref) => {
-    const tag = getTagFromComponentProps(props) ?? legacyTag ?? defaultTag;
+    const tag = getTagFromProps(props) ?? legacyTag ?? defaultTag;
     return createElement(tag, { ...props, ref });
   }
 );
diff --git a/packages/sdk/src/runtime.ts b/packages/sdk/src/runtime.ts
@@ -4,8 +4,16 @@ export * from "./form-fields";
 
 export const tagProperty = "data-ws-tag";
 
-export const getTagFromComponentProps = (
+export const getTagFromProps = (
   props: Record<string, unknown>
 ): string | undefined => {
   return props[tagProperty] as string | undefined;
 };
+
+export const indexProperty = "data-ws-index" as const;
+
+export const getIndexWithinAncestorFromProps = (
+  props: Record<string, unknown>
+) => {
+  return props[indexProperty] as string | undefined;
+};
