feat: vue3 renderer and some vue3 samples#591
feat: vue3 renderer and some vue3 samples#591shawnwang15 wants to merge 2 commits intogoogle:mainfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive Vue 3 renderer for A2UI, complete with core components, a message processor, and sample applications. The implementation is well-structured, leveraging modern Vue 3 features like the Composition API and <script setup>. The separation between rendering logic, data handling, and component definitions is clean. My review focuses on improving robustness, ensuring consistency with the specifications, and enhancing maintainability. I've identified a few areas for improvement, including incomplete feature implementation in an input component and opportunities to make the code more resilient and consistent. Overall, this is a very strong contribution that significantly expands the project's capabilities.
| :id="inputId" | ||
| :value="inputValue" | ||
| placeholder="Please enter a value" | ||
| :type="inputType === 'number' ? 'number' : 'text'" |
There was a problem hiding this comment.
The type attribute for the <input> element is not fully implemented according to the ResolvedTextField type definition. The current implementation only distinguishes between number and text, while the type also supports email, password, tel, and url. This limits the functionality of the TextField component.
:type="inputType || 'text'"
There was a problem hiding this comment.
This implementation aligns with the Angular counterpart.
| userAction: { | ||
| name: action.name, | ||
| sourceComponentId: component.id, | ||
| surfaceId: surfaceId!, |
There was a problem hiding this comment.
Using a non-null assertion (!) on surfaceId can introduce a risk of runtime errors if this composable is ever used in a context where surfaceId could be null. To make the function more robust, it would be safer to add a guard clause that checks for the existence of surfaceId before proceeding to dispatch the action.
| surfaceId: surfaceId!, | |
| surfaceId: surfaceId, |
There was a problem hiding this comment.
This follows the same implementation logic as in Angular.
| interface HintedStyles { | ||
| h1: Record<string, string>; | ||
| h2: Record<string, string>; | ||
| h3: Record<string, string>; | ||
| h4: Record<string, string>; | ||
| h5: Record<string, string>; | ||
| body: Record<string, string>; | ||
| caption: Record<string, string>; | ||
| } |
There was a problem hiding this comment.
The HintedStyles interface is missing the h6 property, but the areHintedStyles type guard on line 118 checks for it. This discrepancy can lead to incorrect type assertions. To ensure type safety and consistency, the h6 property should be added to the interface.
interface HintedStyles {
h1: Record<string, string>;
h2: Record<string, string>;
h3: Record<string, string>;
h4: Record<string, string>;
h5: Record<string, string>;
h6: Record<string, string>;
body: Record<string, string>;
caption: Record<string, string>;
}
There was a problem hiding this comment.
This follows the same implementation logic as in Angular.
| tag: 'Layout', | ||
| surface: createSingleComponentSurface('Column', { | ||
| children: [ | ||
| createComponent('Heading', { text: { literalString: 'Heading Text' } }), |
There was a problem hiding this comment.
The component type Heading is not defined in the DEFAULT_CATALOG, which will cause a console warning and prevent the component from rendering. To display a heading, you should use the Text component with the appropriate usageHint, such as 'h1'.
createComponent('Text', { text: { literalString: 'Heading Text' }, usageHint: 'h1' }),
There was a problem hiding this comment.
This follows the same implementation logic as in Angular.
thanks Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
When will the Vue 3 renderer support v0.9? |
|
Hi @shawnwang15, thanks for putting together a Vue 3 renderer — that's significant work! 🙏 We've been rethinking our approach to community renderers. Maintaining renderers for every framework inside this monorepo isn't scalable, so we're moving toward an ecosystem model where community renderers live in their own repos and we link to them from our docs. Here's what we'd suggest:
This way you have full ownership and release velocity, and we make sure users can find your work. The ecosystem page already lists several community renderers (a2ui.org/ecosystem/renderers). We'd love to see a Vue renderer in the ecosystem — please do publish it and we'll link to it! |
3 participants
Description
This PR adds complete Vue 3 support to A2UI by implementing a new Vue 3 renderer and sample applications with vue3 composition api, and aligning with the existing Angular and Lit implementations. Remaining Angular samples will be added in subsequent updates.
What's Changed
I am deeply interested in the intersection of AI and front-end engineering, and I look forward to contributing to the long-term maintenance of this project