Skip to content

Lit Renderer v0.9#885

Open
ditman wants to merge 29 commits intogoogle:mainfrom
ditman:lit-renderer
Open

Lit Renderer v0.9#885
ditman wants to merge 29 commits intogoogle:mainfrom
ditman:lit-renderer

Conversation

@ditman
Copy link
Collaborator

@ditman ditman commented Mar 18, 2026 •
edited
Loading

Description

Adds a Lit renderer for the v0.9 version of the protocol.

I cloned @jacobsimionato's #869 and polished it a little!

This iteration of the renderer is missing two big features compared to v0.8 (that will work on as fast-follows):

  • Proper Markdown rendering (integrate @a2ui/markdown-it)
  • CSS styling/theming

(And probably some proper formatting and better tooling).

Anyway, this should suffice as a starting point. Check out the demo:gallery09 Lit sample app to get this renderer to run. Other examples will be ported later.

Pre-launch Checklist

If you need help, consider asking for advice on the discussion board.

@ditman ditman requested a review from jacobsimionato March 18, 2026 03:16
@github-project-automation github-project-automation bot moved this to Todo in A2UI Mar 18, 2026
@gemini-code-assist

This comment was marked as outdated.

Sign in to view
@ditman ditman mentioned this pull request Mar 18, 2026
Closed
@ditman
Copy link
Collaborator Author

ditman commented Mar 21, 2026 •
edited
Loading

OK, there's a version of the renderer that uses LitElements. Some things that I still obviously need:

  • Add tests
  • Move code around so imports from v0_9 make sense (and ensure that everything is imported consistently internally)
  • (Later) Integrate with @a2ui/markdown-it package
  • (Later) Add some configurable styling (CSS variables? classnames?)
  • (Even later) migrate some Lit samples to v0_9
  • ... And probably more stuff that I'm not aware of yet :)

/cc @jacobsimionato

jacobsimionato
jacobsimionato approved these changes Mar 23, 2026
View reviewed changes
Copy link
Collaborator

@jacobsimionato jacobsimionato left a comment

Choose a reason for hiding this comment

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

This looks great to me. I'm in favor of merging this soon and then iterating.

@jacobsimionato
Copy link
Collaborator

jacobsimionato commented Mar 23, 2026

  • ... And probably more stuff that I'm not aware of yet :)

What about also deferring the markdown integration to later? Having this merged would mean that we can then make changes to the web core API without breaking your pending PR.

@ditman
Copy link
Collaborator Author

ditman commented Mar 23, 2026

  • ... And probably more stuff that I'm not aware of yet :)

What about also deferring the markdown integration to later? Having this merged would mean that we can then make changes to the web core API without breaking your pending PR.

Absolutely agree, the markdown integration should be super easy to add to the Text widget later.

ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
renderers/lit/src/v0_9/surface/a2ui-surface.ts
render() {
if (!this.surface) return nothing;
if (!this._hasRoot) {
return html`<slot name="loading"><div>Loading surface...</div></slot>`;
Copy link
Collaborator Author

@ditman ditman Mar 24, 2026

Choose a reason for hiding this comment

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

Are we using the "loading" slot elsewhere? Why is this a slot, but the error isn't?

ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
ditman
ditman commented Mar 24, 2026
View reviewed changes
jacobsimionato and others added 10 commits March 25, 2026 13:40
@jacobsimionato @ditman
Add prototype lit renderer
9206bc2
@jacobsimionato @ditman
Improvements to lit renderer
2ecd4d0
@jacobsimionato @ditman
Implement lit renderer basic catalog
76c8cbc
@ditman
Add demo:gallery09 target to samples.
0d3f18c
@ditman
Remove spurious import
39289a9
@ditman
Add missing dependency on Zod to lit renderer (do we need that?)
0c5a590
@ditman
Remove v0_9 export from index, and instead direct people to directly …
4631d00 
…importing from v0_9 or v0_8.
@ditman
Convert the a2ui-node element into a pure function.
18bfc4f 
This prevents the DOM of the app to look like:

```
<a2ui-surface>
  <a2ui-node>
    <a2ui-column>
        <a2ui-node>
           <a2ui-row>
               <a2ui-node>
                   <a2ui-text>
                   ...
```
@ditman
Make the A2uiSurface render to the shadow DOM.
ee5cac1
@ditman
Make the A2uiController more specific on prop types.
ce86544 
Use the stricter types in web_core to allow "props" type to be inferred. This enables  component programmers to have better type safety when accessing its component's controller.props (in the initial implementation this was always typed as "any")
ditman added 14 commits March 25, 2026 13:43
@ditman
Remove ChildBuilder and simplify LitComponentImplementation.
8a82378 
Now that Elements are real LitElements and we don't need to carry over the ChildBuilder functions around, we can simplify the LitComponentImplementation to only hold what we care about of a Lit component: its tag name!
@ditman
Make the Tabs component a LitElement.
28a3049 
This is the model to make every other element a true LitElement:

* Creates its own correctly typed controller (this allows strongly typed access to props)
* Exports a correct element definition (with tagName)
* Uses renderA2uiNode to render its children
* Recreates the controller when the context changes
@ditman
Refactor every other component.
1163753 
Each component is refactored as a LitElement, following the same changes that were done to the Tabs component.
@ditman
Add missing licenses to some files.
05e500d
@ditman
Create a base element that controls the lifecycle of the a2ui control…
b4077cb 
…ler.
@ditman
Refactor catalog items with A2uiLitElement<ApiType>
256397b
@ditman
Add renderNode method to the A2uiLitElement class.
ff8b975 
This method is used to hide all the complexity of rendering child items
in A2UI Lit elements from the catalog; it should make it much easier to
end users to create their own.
@ditman
Update components to use the new API. Do not expose the old renderA2u…
d29bb8b 
…iNode method on the public API.
@ditman
Some formatting
d4fca53
@ditman
Pass a Catalog to the renderA2uiNode helper function.
2aa5c94
@ditman
Rename LitComponentImplementation to LitComponentApi
9437dc3
@ditman
Filesystem tidying:
663678d 
* Renamed catalog component files to match the class they contain.
* Made the v0_9/index.ts export *explicitly* what we want to be part of
  the public API.
* Updated catalog implementation with the latest imports, and format the
  files.
@ditman
Roll version and update CHANGELOG
5ebb245
@ditman
package-lock.json
ea5f7a5
@ditman ditman requested a review from ava-cassiopeia March 26, 2026 03:04
@ditman ditman marked this pull request as ready for review March 26, 2026 03:08
@ditman
Copy link
Collaborator Author

ditman commented Mar 26, 2026

OK, this is it! PTAL @jacobsimionato, @ava-cassiopeia (anybody else who may want to look at this?)

jacobsimionato
jacobsimionato approved these changes Mar 26, 2026
View reviewed changes
Copy link
Collaborator

@jacobsimionato jacobsimionato left a comment

Choose a reason for hiding this comment

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

Looks great to me!

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

Reviewers

@jacobsimionato jacobsimionato jacobsimionato approved these changes

@ava-cassiopeia ava-cassiopeia Awaiting requested review from ava-cassiopeia

Assignees

No one assigned

Labels

None yet

Projects

A2UI
Status: Todo

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ditman @jacobsimionato