Add proposed ADR for Lit framework #7
Conversation
|
|
||
| There are several frameworks on offer that leverage the browser custom element APIs, any of which would be a strong choice as a basis for the next version of the design system, but there are two primary choices the team has been evaluating for this purpose: | ||
|
|
||
| 1. Stencil - Stencil is an all-in-one web framework that supports React-like component authoring. Stencil components are written using JSX and transpiled to native JavaScript web components. Further, Stencil provides custom tooling such as a [test runner](https://stenciljs.com/docs/testing/stencil-testrunner/overview), as well as tools for static site generation and server-side rendering functionality among others. Because it has its own integrated build system, it also makes it easy to incorporate other tools, like Sass/SCSS, with little or no additional configuration. Additionally, some agencies are already using Stencil to build web component implementations of and extensions to the Design System. |
There was a problem hiding this comment.
StencilJS can also target specific frameworks for compatibility.
See Angular output target example.
| There are several frameworks on offer that leverage the browser custom element APIs, any of which would be a strong choice as a basis for the next version of the design system, but there are two primary choices the team has been evaluating for this purpose: | ||
|
|
||
| 1. Stencil - Stencil is an all-in-one web framework that supports React-like component authoring. Stencil components are written using JSX and transpiled to native JavaScript web components. Further, Stencil provides custom tooling such as a [test runner](https://stenciljs.com/docs/testing/stencil-testrunner/overview), as well as tools for static site generation and server-side rendering functionality among others. Because it has its own integrated build system, it also makes it easy to incorporate other tools, like Sass/SCSS, with little or no additional configuration. Additionally, some agencies are already using Stencil to build web component implementations of and extensions to the Design System. | ||
| 2. Lit - As with Stencil, there are existing USWDS-based federal website projects that leverage Lit. |
There was a problem hiding this comment.
Lit announced additional wrappers last year in this YouTube video - Lit Labs: Framework wrapper generators. You can see some listed here too under lit/labs https://github.com/lit/lit.
It looks like this work is still experimental though.
There was a problem hiding this comment.
Hopefully over time this is less of a thing. Even React is going to support Custom Elements soon!
Whatever the answer ends up being to framework compat, it'll definitely need a lot of testing.
I think that's right about the light layer on top of native APIs. I think under the hood what's happening here: …is a mix of the adopted stylesheet (for the imported sass) and constructed stylesheet (for the CSS-in-looking stuff) APIs Whichever way we end up going, we'll need to have a story about how styles are packaged and how we're going to use custom properties, but that's a separate issue. |
No description provided.