Skip to content

refactor(react)!: delete the React basic catalog implementation - #2630

Open
josemontespg wants to merge 1 commit into
react-universal-componentsfrom
react-delete-basic-catalog-implementation
Open

josemontespg wants to merge 1 commit into
react-universal-componentsfrom
react-delete-basic-catalog-implementation

Conversation

@josemontespg

Copy link
Copy Markdown
Collaborator

The v0_9 React renderer renders the basic catalog through the Web Components in @a2ui/web_core/v0_9/basic_catalog, so the 23 duplicated React implementations are removed along with their unit tests.

What changes for consumers

Import the catalog and the individual components from web_core:

-import {A2uiSurface, basicCatalog} from '@a2ui/react/v0_9';
+import {A2uiSurface} from '@a2ui/react/v0_9';
+import {basicCatalog} from '@a2ui/web_core/v0_9/basic_catalog';

MarkdownContext and useMarkdownRenderer keep their names, their behaviour, and their import path. A2uiSurface forwards the context value into web_core's setMarkdownRenderer, mirroring what the Angular renderer does, so markdown wiring in consumer code does not change.

Custom React components are unaffected: createComponentImplementation still returns a React implementation, and the renderer still renders it through React.

Breaking

  • @a2ui/react/v0_9 no longer exports basicCatalog, Text, Button, Card, or the other basic components.
  • The basic catalog no longer server-renders, since custom elements produce no markup outside a browser. An application that needs SSR for these components needs a React-SSR renderer.

Testing

  • renderers/react unit tests pass; integration-scenarios.test.tsx now drives the web_core catalog end to end and waits for Lit's update cycle.
  • The explorer's Karma suite passes against the web component catalog.

@github-project-automation github-project-automation Bot moved this to Todo in A2UI Sep 11, 2026
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 6d5b331 to a86b4ae Compare September 11, 2026 18:52

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

This pull request refactors the React renderer by removing local React implementations of basic catalog components in favor of web_core's basic catalog Custom Elements, updating imports and tests accordingly. To avoid a race condition where Lit components render on their first paint before the markdown renderer is set, it is recommended to use useLayoutEffect instead of useEffect in A2uiSurface to synchronously configure the markdown renderer during React's commit phase.

*/

import React, {useCallback, useMemo, useSyncExternalStore} from 'react';
import React, {useCallback, useEffect, useMemo, useSyncExternalStore} from 'react';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

Import useLayoutEffect instead of useEffect to avoid race conditions with Lit's asynchronous rendering cycle.

Suggested change
import React, {useCallback, useEffect, useMemo, useSyncExternalStore} from 'react';
import React, {useCallback, useLayoutEffect, useMemo, useSyncExternalStore} from 'react';

Comment on lines +40 to +42
useEffect(() => {
setMarkdownRenderer(markdownRenderer);
}, [markdownRenderer]);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

Using useEffect to set the global markdown renderer can lead to a race condition with Lit's asynchronous update cycle. Lit components schedule their updates as microtasks during their connectedCallback (which runs synchronously when React inserts them into the DOM). Since useEffect runs asynchronously in a macrotask after the paint, Lit's first update cycle will execute before useEffect runs and sets the markdown renderer. This can cause the components to render without the markdown renderer on their first paint.

Using useLayoutEffect ensures that setMarkdownRenderer is called synchronously during React's commit phase, before the microtask queue flushes and before the browser paints, guaranteeing that the markdown renderer is available for Lit's initial render.

Suggested change
useEffect(() => {
setMarkdownRenderer(markdownRenderer);
}, [markdownRenderer]);
useLayoutEffect(() => {
setMarkdownRenderer(markdownRenderer);
}, [markdownRenderer]);

@josemontespg
josemontespg added this pull request to stack #2631 September 11, 2026 18:53
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch 2 times, most recently from 60c1bf8 to 7646f12 Compare September 14, 2026 19:33
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 7646f12 to 4aee1d8 Compare September 14, 2026 19:41
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 4aee1d8 to e40022f Compare September 14, 2026 23:24
@josemontespg
josemontespg removed this pull request from stack #2631 September 14, 2026 23:24
@josemontespg
josemontespg added this pull request to stack #2661 September 14, 2026 23:25
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from e40022f to 8d28391 Compare September 14, 2026 23:42
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch 2 times, most recently from 0cf7244 to 83db1f3 Compare September 18, 2026 21:04
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 83db1f3 to cfa8f1a Compare September 18, 2026 21:08
@josemontespg
josemontespg removed this pull request from stack #2661 September 18, 2026 21:08
@josemontespg
josemontespg added this pull request to stack #2699 September 18, 2026 21:09
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from cfa8f1a to 8234a11 Compare September 18, 2026 21:40
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 8234a11 to 4f468bd Compare September 18, 2026 22:34
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 4f468bd to 689d3c3 Compare September 21, 2026 17:57
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 689d3c3 to 1e3be23 Compare September 21, 2026 18:30
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 1e3be23 to 4641c24 Compare September 21, 2026 19:20
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 4641c24 to 2250ba9 Compare September 21, 2026 20:01
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from 2250ba9 to d19c175 Compare September 21, 2026 20:14
The v0_9 renderer renders the basic catalog through the Web Components in @a2ui/web_core/v0_9/basic_catalog, so the 23 duplicated React implementations are removed along with their tests.

Consumers import basicCatalog and the individual components from @a2ui/web_core/v0_9/basic_catalog. MarkdownContext and useMarkdownRenderer keep their names and behaviour: A2uiSurface forwards the context value into web_core's setMarkdownRenderer.

The basic catalog no longer server-renders, since custom elements produce no markup outside a browser.
@josemontespg
josemontespg force-pushed the react-delete-basic-catalog-implementation branch from d19c175 to 9412028 Compare September 21, 2026 23:55

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant