Draft:StencilJS

{{Multiple issues| {{essay-like|date=May 2023}} {{advert|date=May 2023}} {{copy edit|date=May 2023}} {{notability|date=May 2023}} {{COI|date=May 2023}}

{{Infobox software }}
 * name = StencilJS
 * logo =
 * logo alt =
 * author = Adam Bradley
 * developer = Ionic (mobile app framework)
 * released = {{Start date and age|2017|05|20}}
 * latest_release_version =
 * latest_release_date =
 * latest preview version =
 * latest preview date =
 * repo = {{URL|https://github.com/ionic-team/stencil|StencilJS Repository}}
 * programming language = TypeScript
 * platform = JavaScript engine
 * size = {{Nowrap|16.5 KB}}
 * genre = Web framework
 * license = MIT License
 * website = {{URL|https://stenciljs.com/}}

StencilJS is an open-source web component compiler developed by the Ionic (mobile app framework) team. It enables developers to build high-performance, reusable web components using modern web standards. StencilJS combines the best concepts from popular frameworks like Angular, React, and Vue.js, while also allowing components to be framework-agnostic and interoperable across different environments.

StencilJS helps developers and teams build and share custom components (Microfrontend), that are web framework agnostic. Its source code is licensed under MIT License and hosted on GitHub. 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 introduced by the Ionic team in 2017. The primary goal was to address the performance and reusability challenges faced while building Ionic Framework components. By leveraging modern web standards and focusing on compiler techniques, StencilJS aimed to create a robust foundation for developing reusable web components.

Main Features
StencilJS offers a variety of features designed to simplify the development of web components:


 * TypeScript Support: StencilJS natively supports TypeScript, enabling developers to write type-safe code.
 * JSX Syntax: Inspired by React, StencilJS uses JSX for defining component templates, making it easier to write and maintain component markup.
 * Reactive Data Binding: StencilJS provides reactive data binding, allowing components to efficiently update and render based on state changes.
 * Asynchronous Rendering: StencilJS optimizes rendering by using asynchronous techniques, which helps in improving the performance of applications.
 * Shadow DOM: StencilJS components use Shadow DOM to encapsulate styles and DOM structure, ensuring that components are isolated and styles do not leak.
 * Lazy Loading: StencilJS automatically generates lazy-loaded components, which improves the initial load time of applications by loading components only when they are needed.
 * Cross-Framework Compatibility: StencilJS components are framework-agnostic and can be used with any modern front-end framework, such as Angular, React, or Vue, as well as with vanilla JavaScript.

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.

Architecture
StencilJS operates as a build-time tool that compiles components into standard web components. The architecture includes several key parts:
 * Compiler: The core of StencilJS, responsible for transforming TypeScript and JSX code into standard web components.
 * Decorators: StencilJS uses decorators to define component properties, lifecycle methods, and other metadata, making it easy to configure component behavior.
 * Rendering Engine: The rendering engine leverages JSX to create and update the DOM efficiently.
 * Reactive System: StencilJS includes a reactive system that tracks state changes and re-renders components as necessary.

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.

In this example, the @Component decorator defines a new web component named my-component. The @Prop decorator defines a property that can be passed to the component, and the render method returns the component's HTML structure using JSX.