StencilJs

StencilJs

An idiot's guide to hacking through a thick jungle of code...
(Be calm, be patient & use the console.log)

My Story With StencilJs. A brief synopsis.

  • ​​2014 - The Ionic / AngularJs years
  • 2019 - A plunge into adopting Stencil
  • 2021 - The Stencil codebase deepdive

    (image here)

Author

About me

"an average yet tenacious developer"

github: johnjenkins

StencilJs - a family tree

  • AngularJs passes away & ​Angular 2 is born 

  • StencilJs was conceived ... A beautiful love child of Ionic and Angular

  • StencilJs was born - a half baby-brother of Angular 2?

A note about 'Static Analysis'

"the analysis of computer software that is performed without actually executing it"

"Decorators are functions called on classes, class elements, or other JavaScript syntax forms during definition."

(insert code block here demonstrating decorators) 

The Stencil Codebase - an overview

Runtime

Testing

Declarations

Misc. 

Compiler

Compiler > Build

Compiler > Typescript 
(static analysis phase)

import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.css', shadow: true, }) export class MyComponent { /** The first name */ @Prop() first: string; /** The last name */ @Prop() last: string; render() { return <div>Hello, World! I'm {this.first} {this.last}</div>; } } import { Component, Prop, h } from '@stencil/core'; export class MyComponent { render() { return h("div", null, "Hello, World! I'm ", this.first, " ", this.last); } static get is() { return "my-component"; } static get encapsulation() { return "shadow"; } static get originalStyleUrls() { return { "$": ["my-component.css"] }; } static get styleUrls() { return { "$": ["my-component.css"] }; } static get properties() { return { "first": { "type": "string", "mutable": false, "complexType": { "original": "string", "resolved": "string", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "The first name" }, "attribute": "first", "reflect": false }, "last": { "type": "string", "mutable": false, "complexType": { "original": "string", "resolved": "string", "references": {} }, "required": false, "optional": false, "docs": { "tags": [], "text": "The last name" }, "attribute": "last", "reflect": false } }; } }

Compiler > Bundling

Compiler > Misc

Setting up your own, custom StencilJS playground

Stop. Demo time.

Thanks for listening