refactor(react): rename createReactComponent to createComponentImplementation

ppazosp · ppazosp · commit 27e2642c5665 · 2026-03-29T21:36:22.000+02:00
Also renames createBinderlessComponent to createBinderlessComponentImplementation for consistency. Closes #974
diff --git a/renderers/react/CHANGELOG.md b/renderers/react/CHANGELOG.md
@@ -1,6 +1,11 @@
+## Unreleased
+
+- **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`.
+- **BREAKING CHANGE**: Renamed `createBinderlessComponent` to `createBinderlessComponentImplementation`.
+
 ## 0.8.1
 
-- Use the `InferredComponentApiSchemaType` from `web_core` in `createReactComponent`.
+- Use the `InferredComponentApiSchemaType` from `web_core` in `createComponentImplementation`.
 - Adjust internal type in `Tabs` widget.
 
 ## 0.8.0
diff --git a/renderers/react/src/v0_9/adapter.tsx b/renderers/react/src/v0_9/adapter.tsx
@@ -41,7 +41,7 @@ export type ReactA2uiComponentProps<T> = {
 /**
  * Creates a React component implementation using the deep generic binder.
  */
-export function createReactComponent<Api extends ComponentApi>(
+export function createComponentImplementation<Api extends ComponentApi>(
   api: Api,
   RenderComponent: React.FC<
     ReactA2uiComponentProps<ResolveA2uiProps<InferredComponentApiSchemaType<Api>>>
@@ -104,7 +104,7 @@ export function createReactComponent<Api extends ComponentApi>(
 /**
  * Creates a React component implementation that manages its own context bindings (no generic binder).
  */
-export function createBinderlessComponent(
+export function createBinderlessComponentImplementation(
   api: ComponentApi,
   RenderComponent: React.FC<{
     context: ComponentContext;
diff --git a/renderers/react/src/v0_9/catalog/basic/components/AudioPlayer.tsx b/renderers/react/src/v0_9/catalog/basic/components/AudioPlayer.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseLeafStyle} from '../utils';
 
-export const AudioPlayer = createReactComponent(AudioPlayerApi, ({props}) => {
+export const AudioPlayer = createComponentImplementation(AudioPlayerApi, ({props}) => {
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
     width: '100%',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Button.tsx b/renderers/react/src/v0_9/catalog/basic/components/Button.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN} from '../utils';
 
-export const Button = createReactComponent(ButtonApi, ({props, buildChild}) => {
+export const Button = createComponentImplementation(ButtonApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
     margin: LEAF_MARGIN,
     padding: '8px 16px',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Card.tsx b/renderers/react/src/v0_9/catalog/basic/components/Card.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseContainerStyle} from '../utils';
 
-export const Card = createReactComponent(CardApi, ({props, buildChild}) => {
+export const Card = createComponentImplementation(CardApi, ({props, buildChild}) => {
   const style: React.CSSProperties = {
     ...getBaseContainerStyle(),
     backgroundColor: '#fff',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx b/renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN} from '../utils';
 
-export const CheckBox = createReactComponent(CheckBoxApi, ({props}) => {
+export const CheckBox = createComponentImplementation(CheckBoxApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     props.setValue(e.target.checked);
   };
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, {useState} from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
@@ -24,7 +24,7 @@ import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type _Option = any;
 
-export const ChoicePicker = createReactComponent(ChoicePickerApi, ({props, context}) => {
+export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({props, context}) => {
   const [filter, setFilter] = useState('');
 
   const values = Array.isArray(props.value) ? props.value : [];
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Column.tsx b/renderers/react/src/v0_9/catalog/basic/components/Column.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
 import {mapJustify, mapAlign} from '../utils';
 
-export const Column = createReactComponent(ColumnApi, ({props, buildChild, context}) => {
+export const Column = createComponentImplementation(ColumnApi, ({props, buildChild, context}) => {
   return (
     <div
       style={{
diff --git a/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx b/renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
-export const DateTimeInput = createReactComponent(DateTimeInputApi, ({props}) => {
+export const DateTimeInput = createComponentImplementation(DateTimeInputApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     props.setValue(e.target.value);
   };
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Divider.tsx b/renderers/react/src/v0_9/catalog/basic/components/Divider.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN} from '../utils';
 
-export const Divider = createReactComponent(DividerApi, ({props}) => {
+export const Divider = createComponentImplementation(DividerApi, ({props}) => {
   const isVertical = props.axis === 'vertical';
   const style: React.CSSProperties = {
     margin: LEAF_MARGIN,
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx b/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseLeafStyle} from '../utils';
 
-export const Icon = createReactComponent(IconApi, ({props}) => {
+export const Icon = createComponentImplementation(IconApi, ({props}) => {
   const iconName =
     typeof props.name === 'string' ? props.name : (props.name as {path?: string})?.path;
   const style: React.CSSProperties = {
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Image.tsx b/renderers/react/src/v0_9/catalog/basic/components/Image.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseLeafStyle} from '../utils';
 
-export const Image = createReactComponent(ImageApi, ({props}) => {
+export const Image = createComponentImplementation(ImageApi, ({props}) => {
   const mapFit = (fit?: string): React.CSSProperties['objectFit'] => {
     if (fit === 'scaleDown') return 'scale-down';
     return (fit as React.CSSProperties['objectFit']) || 'fill';
diff --git a/renderers/react/src/v0_9/catalog/basic/components/List.tsx b/renderers/react/src/v0_9/catalog/basic/components/List.tsx
@@ -15,12 +15,12 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ListApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
 import {mapAlign} from '../utils';
 
-export const List = createReactComponent(ListApi, ({props, buildChild, context}) => {
+export const List = createComponentImplementation(ListApi, ({props, buildChild, context}) => {
   const isHorizontal = props.direction === 'horizontal';
   const style: React.CSSProperties = {
     display: 'flex',
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx b/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx
@@ -15,10 +15,10 @@
  */
 
 import {useState} from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
-export const Modal = createReactComponent(ModalApi, ({props, buildChild}) => {
+export const Modal = createComponentImplementation(ModalApi, ({props, buildChild}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Row.tsx b/renderers/react/src/v0_9/catalog/basic/components/Row.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {ChildList} from './ChildList';
 import {mapJustify, mapAlign} from '../utils';
 
-export const Row = createReactComponent(RowApi, ({props, buildChild, context}) => {
+export const Row = createComponentImplementation(RowApi, ({props, buildChild, context}) => {
   return (
     <div
       style={{
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx b/renderers/react/src/v0_9/catalog/basic/components/Slider.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN} from '../utils';
 
-export const Slider = createReactComponent(SliderApi, ({props}) => {
+export const Slider = createComponentImplementation(SliderApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     props.setValue(Number(e.target.value));
   };
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx b/renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx
@@ -15,7 +15,7 @@
  */
 
 import {useState} from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN} from '../utils';
 
@@ -24,7 +24,7 @@ import {LEAF_MARGIN} from '../utils';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type _Tab = any;
 
-export const Tabs = createReactComponent(TabsApi, ({props, buildChild}) => {
+export const Tabs = createComponentImplementation(TabsApi, ({props, buildChild}) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const tabs = props.tabs || [];
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Text.tsx b/renderers/react/src/v0_9/catalog/basic/components/Text.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseLeafStyle} from '../utils';
 
-export const Text = createReactComponent(TextApi, ({props}) => {
+export const Text = createComponentImplementation(TextApi, ({props}) => {
   const text = props.text ?? '';
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
diff --git a/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx b/renderers/react/src/v0_9/catalog/basic/components/TextField.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS} from '../utils';
 
-export const TextField = createReactComponent(TextFieldApi, ({props}) => {
+export const TextField = createComponentImplementation(TextFieldApi, ({props}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     props.setValue(e.target.value);
   };
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Video.tsx b/renderers/react/src/v0_9/catalog/basic/components/Video.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {VideoApi} from '@a2ui/web_core/v0_9/basic_catalog';
 import {getBaseLeafStyle} from '../utils';
 
-export const Video = createReactComponent(VideoApi, ({props}) => {
+export const Video = createComponentImplementation(VideoApi, ({props}) => {
   const style: React.CSSProperties = {
     ...getBaseLeafStyle(),
     width: '100%',
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/Button.tsx b/renderers/react/src/v0_9/catalog/minimal/components/Button.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {z} from 'zod';
 import {CommonSchemas} from '@a2ui/web_core/v0_9';
 
@@ -30,7 +30,7 @@ export const ButtonApiDef = {
   schema: ButtonSchema,
 };
 
-export const Button = createReactComponent(ButtonApiDef, ({props, buildChild}) => {
+export const Button = createComponentImplementation(ButtonApiDef, ({props, buildChild}) => {
   const style: React.CSSProperties = {
     padding: '8px 16px',
     cursor: 'pointer',
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/Column.tsx b/renderers/react/src/v0_9/catalog/minimal/components/Column.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {z} from 'zod';
 import {CommonSchemas} from '@a2ui/web_core/v0_9';
 import {ChildList} from './ChildList';
@@ -68,7 +68,7 @@ export const ColumnApiDef = {
   schema: ColumnSchema,
 };
 
-export const Column = createReactComponent(ColumnApiDef, ({props, buildChild}) => {
+export const Column = createComponentImplementation(ColumnApiDef, ({props, buildChild}) => {
   return (
     <div
       style={{
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/Row.tsx b/renderers/react/src/v0_9/catalog/minimal/components/Row.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {z} from 'zod';
 import {CommonSchemas} from '@a2ui/web_core/v0_9';
 import {ChildList} from './ChildList';
@@ -68,7 +68,7 @@ export const RowApiDef = {
   schema: RowSchema,
 };
 
-export const Row = createReactComponent(RowApiDef, ({props, buildChild}) => {
+export const Row = createComponentImplementation(RowApiDef, ({props, buildChild}) => {
   return (
     <div
       style={{
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/Text.tsx b/renderers/react/src/v0_9/catalog/minimal/components/Text.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {z} from 'zod';
 import {CommonSchemas} from '@a2ui/web_core/v0_9';
 
@@ -28,7 +28,7 @@ export const TextApiDef = {
   schema: TextSchema,
 };
 
-export const Text = createReactComponent(TextApiDef, ({props}) => {
+export const Text = createComponentImplementation(TextApiDef, ({props}) => {
   const text = props.text ?? '';
   switch (props.variant) {
     case 'h1':
diff --git a/renderers/react/src/v0_9/catalog/minimal/components/TextField.tsx b/renderers/react/src/v0_9/catalog/minimal/components/TextField.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import {createReactComponent} from '../../../adapter';
+import {createComponentImplementation} from '../../../adapter';
 import {z} from 'zod';
 import {CommonSchemas} from '@a2ui/web_core/v0_9';
 
@@ -31,7 +31,7 @@ export const TextFieldApiDef = {
   schema: TextFieldSchema,
 };
 
-export const TextField = createReactComponent(TextFieldApiDef, ({props, context}) => {
+export const TextField = createComponentImplementation(TextFieldApiDef, ({props, context}) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (props.setValue) {
       props.setValue(e.target.value);
diff --git a/renderers/react/tests/v0_9/adapter.test.tsx b/renderers/react/tests/v0_9/adapter.test.tsx
