Draft:StencilJS

• Comment: Issues raised at the AfD have not been addressed. Please stop continually repasting this content. That is not a path to approval. Star Mississippi 11:26, 9 April 2024 (UTC)

---

StencilJS

Original author(s)	Adam Bradley
Developer(s)	Ionic (mobile app framework)
Initial release	May 20, 2017 (2017-05-20)
Repository	StencilJS Repository
Written in	TypeScript
Platform	JavaScript engine
Size	16.5 KB
Type	Web framework
License	MIT License
Website	stenciljs.com

StencilJS is a JavaScript compiler that creates custom element (web components). It takes in TSX files, (which are basically JSX with TypeScript) a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and then generate 100% standards-based Web Components that run on both modern browsers and legacy browsers supporting the Custom Elements v1 spec, usable with any web framework including Angular, React, and Vue.js. StencilJS relies primarily on the power of browsers and the web component specification.

StencilJS helps developers and teams build and share custom components (Microfrontend), that are web framework agnostic. Since StencilJS generates standards-compliant Web Components, the components built with StencilJS work with many popular frameworks. While Web Components can be paired with any JavaScript framework, StencilJS has built-in special-purpose bindings to deliver the more advanced features, enterprise teams expect when building applications in Angular, React, and Vue.js. StencilJS generate automatically-updated documentation from JSDoc comments used with code. Its source code is licensed under MIT License and hosted on GitHub.

StencilJS provides a build-time abstraction with framework-level productivity. StencilJS is not a library or a framework, instead it is a building tool that allows to use a high-level abstraction to define UI components and to generate pure JavaScript code implementing standard-based Web Components. The compiled code runs in all major browsers. StencilJS generates framework-specific wrappers that allow custom elements developed, to be used with any framework, whether its Angular, React, or Vue.js.

History

StencilJS was built by the Ionic (mobile app framework) team. The beta version of StencilJS was released in 2017. Stencil version one was officially released on 3 June 2019. Ionic 4 was built using StencilJS.

Design Systems

The main goal of enterprise teams to use StencilJS is, to build design systems and component libraries, that are web framework agnostic. StencilJS can be used to build Progressive web app (PWA). Several companies like Upwork, Volkswagen, Porsche, MasterCard, Amazon, Adidas, Panera etc. have built their design systems based on Stencil-based Web Components. Liberty Mutual Ins. Group's Design System FLUID (Frontend Library for User Interface Development) is built using StencilJS. The music streaming platform Amazon Music is built using StencilJS.

Basic usage

A StencilJS component looks similar to a class-based React component, with the addition of TypeScript decorators.

import { Component, h, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true // Enable Shadow DOM
})
export class MyComponent {
  @Prop() name: string;
  @State() count: number = 0;

  increment() {
    this.count++;
  }
  render() {
    return (
      <div>
        <p>Hello, {this.name}!</p>
       <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

Notable features

Web Components

StencilJS is centered around the Web Components standard, which comprises Custom Elements, Shadow DOM and HTML Templates.

Framework Agnostic

StencilJS is framework agnostic, that means it can be used with any JavaScript framework or library, including Angular, React, Vue.js, or even vanilla JavaScript. This flexibility allows developers to leverage StencilJS in their existing projects without being tied to a specific framework.

Built-in Routing and State Management

An entire single-page application (SPA) can be built with StencilJS without relying on external libraries, as StencilJS provides built-in routing and state management capabilities.

Shadow DOM

Each StencilJS component has its own Shadow DOM, which encapsulates the component's HTML structure, styles, and behavior, isolating it from the surrounding document. It also avoids CSS conflicts and specificity issues.

See also

• Svelte
• LitElement

External links

• Introduction to stenciljs
• Stencil App Starter
• StencilJS on Twitter

Category:2017 software Category:Compilers Category:Web development Category:Software using the MIT license