Building StencilJS with TypeScript

on YouTube ↗26m

" summary

A compiler implemented with the TypeScript compiler API that gathers decorator metadata, strips decorators, injects normalized component metadata, and emits tiny, lazy-loaded web components that include JSX types and per-project build conditionals. A live demo renders about 850 web components to prove performance; components load on first sight via lazy loading and get bundled by dependency graph so shipped code is minimized. Current release is 0.7 with migration tooling and docs toward 1.0.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 2:41What is lonic?
3. 10:05Stencil Components
4. 12:20Metadata Collection
5. 13:46Power of Transforms

" related talks

• 20mMake Web Components Great Again with StencilJSJulien Renaux · ngVikings 2018
• 10mStencil: the Time for Vanilla Web Components ArrivedGil Fink · You Gotta Love Frontend 2017
• 29mStencil: a built-time approach to the webManuel Martinez-Almeida · JSConf EU 2019
• 44mStencil: From Frameworks to CompilersManuel Martinez-Almeida · JSDayES 2018
• 33mWeb Components with StencilJSMartin Reinhardt, Martin Brecht-Precht · code.talks 2022
• 16mArchitecting A Component CompilerAdam Bradley · dotJS 2019
• 01h 05mStencil for Cross-Framework ComponentsMike Hartington · TSConf 2020
• 21mTypescript meta programming from 0 to 100Daniel Ostrovsky · ng-conf 2022