Skip to content

Lit Renderer v0.9#885

Draft
ditman wants to merge 18 commits intogoogle:mainfrom
ditman:lit-renderer
Draft

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

Conversation

@ditman
Copy link
Collaborator

@ditman ditman commented Mar 18, 2026

Description

I cloned @jacobsimionato's #869 and got it to work on my machine. This is the start of the v0.9 Lit renderer.

Next steps:

  • Ensure the usage of the framework follows Lit's best practices (see the demo:gallery09 sample app).

Pre-launch Checklist

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

@gemini-code-assist

This comment was marked as outdated.

jacobsimionato and others added 18 commits March 20, 2026 17:13
* Modify ComponentApi so it is generic over the type of its Schema. This generic is inferred later and not explicitly passed in when creating ComponentApis.
* Add an InferredComponentApiSchemaType helper type to "infer" the type of the "schema" property of a ComponentApi.
* Modify the basic catalog ComponentAPIs so they "satisfies ComponentApi"  (instead of implementing it), so the type of the schema is not erased by the compiler, and can be accessed later.

This is used so we can have "strongly-typed" props without defining a specific interface for the schema of each ComponentApi.
This prevents the DOM of the app to look like:

```
<a2ui-surface>
  <a2ui-node>
    <a2ui-column>
        <a2ui-node>
           <a2ui-row>
               <a2ui-node>
                   <a2ui-text>
                   ...
```
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")
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!
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
Each component is refactored as a LitElement, following the same changes that were done to the Tabs component.
@ditman
Copy link
Collaborator Author

ditman commented Mar 21, 2026

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)
  • Integrate with @a2ui/markdown-it package
  • (Later) Add some configurable styling (CSS variables? classnames?)
  • (Later commit) migrate some Lit samples to v0_9
  • ... And probably more stuff that I'm not aware of yet :)

/cc @jacobsimionato

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

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

2 participants