Skip to content

refactor(react): rename createReactComponent to createComponentImplementation #1024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ppazosp wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(react): rename createReactComponent to createComponentImplementation #1024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion renderers/react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The 'I have added updates to the [CHANGELOG]' checkbox in the PR description is unchecked, which is confusing as this file is modified. The repository style guide requires the pre-review checklist to be fully completed.

More importantly, renaming an exported function is a breaking change and should be explicitly documented. The current change modifies an existing entry, which may not give enough visibility to this important update.

Please add a new entry, perhaps under an ## Unreleased section, to clearly communicate this breaking change. For example:

## Unreleased

- **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`.
References
  1. PR descriptions should include the Pre-Review Checklist from the PR template, with all of the steps completed. (link)

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done — added an Unreleased section with both breaking changes documented. Also renamed createBinderlessComponent to createBinderlessComponentImplementation for consistency as suggested in the other comment.

- Adjust internal type in `Tabs` widget.

## 0.8.0
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/adapter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For consistency with this rename, consider also renaming createBinderlessComponent (at line 107) to createBinderlessComponentImplementation. Both functions return a ReactComponentImplementation, so it would make their purpose clearer and more parallel if their names followed a similar pattern.

Copy link
Copy Markdown
Author

@ppazosp ppazosp Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch — done. Renamed createBinderlessComponent to createBinderlessComponentImplementation in the same commit.

api: Api,
RenderComponent: React.FC<
ReactA2uiComponentProps<ResolveA2uiProps<InferredComponentApiSchemaType<Api>>>
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/AudioPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/CheckBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 : [];
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Column.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/DateTimeInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
};
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 || [];
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/basic/components/Video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/minimal/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/minimal/components/Column.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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={{
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/minimal/components/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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={{
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/minimal/components/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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':
Expand Down
4 changes: 2 additions & 2 deletions renderers/react/src/v0_9/catalog/minimal/components/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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);
Expand Down
Loading