Draft:StencilJS

Submission rejected on 1 February 2025 by Star Mississippi (talk). The subject is contrary to the purpose of Wikipedia. Rejected by Star Mississippi 18 months ago. Last edited by MPGuy2824 3 months ago. Ask for advice

Submission declined on 16 June 2024 by Encoded (talk). This draft is not adequately supported by reliable sources. Wikipedia's verifiability policy requires that all content be supported by reliable sources. Reliable sources include: reputable newspapers, magazines, academic journals, and books from respected publishers. Unacceptable sources include: personal blogs, social media, predatory publishers, most tabloids, and websites where anyone can contribute. Replace any unreliable sources with high-quality sources. If you cannot find a reliable source for the material, it should be removed. Declined by Encoded 2 years ago.

Submission declined on 9 April 2024 by Star Mississippi (talk). This draft reads like an advertisement. Wikipedia is an encyclopedia, not a platform for promotion or marketing. Drafts that are exclusively promotional may be deleted without notice. Wikipedia articles must be written neutrally in a formal, impersonal, and dispassionate way. They should not read like a blog post, advertisement, or fan page. Rewrite the draft to remove: promotional language: see Words to watch; personal commentary: opinions or direct addresses to the reader; informal language. Instead, only summarize in your own words a range of independent, reliable, published sources that discuss the subject. If you have a conflict of interest (e.g. you are the subject, an employee, or a relative) or are being paid to edit, you must disclose this to comply with Wikipedia's Terms of Use. This draft's references do not show that the subject meets Wikipedia's criteria for inclusion. The draft requires multiple published secondary sources that: provide significant coverage: discuss the subject in detail, not just brief mentions or routine announcements; are reliable: from reputable outlets with editorial oversight; are independent: not connected to the subject, such as interviews, press releases, the subject's own website, or sponsored content. Please add references that meet all three of these criteria. If none exist, the subject is not yet suitable for Wikipedia. Declined by Star Mississippi 2 years ago.

• Comment: The "improvements" are more promotion and borderline G12. Rejecting since as I said six months ago, the editor is just continuing to push the article into mainspace rather than trying to improve it. Star Mississippi 17:34, 1 February 2025 (UTC)

• Comment: Large sections of unsourced content. Encoded  Talk 💬 22:06, 16 June 2024 (UTC)

• Comment: This is more promotional, not less. I'm not going to review, but I'd advocate for this being rejected since the editor is not interested in improving it. Star Mississippi 13:56, 7 June 2024 (UTC)

• 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)

{{Multiple issues|

This article is written like a personal reflection, personal essay, or argumentative essay that states a Wikipedia editor's personal feelings or presents an original argument about a topic. Please help improve it by rewriting it in an encyclopedic style. (May 2023) (Learn how and when to remove this message)

This article contains promotional content. Please help improve it by removing promotional language and inappropriate external links, and by adding encyclopedic text written from a neutral point of view. See our advice if the article is about you and read our scam warning in case someone asks for money to edit this article. (May 2023) (Learn how and when to remove this message)

This article may require copy editing for spelling, grammar, style, cohesion, or tone. You can assist by editing it. (May 2023) (Learn how and when to remove this message)

The topic of this draft may not meet Wikipedia's general notability guideline. Please help to demonstrate the notability of the topic by citing reliable secondary sources that are independent of the topic and provide significant coverage of it beyond a mere trivial mention. Notability should be established before publishing this draft or submitting it via the articles for creation process. Find sources: "StencilJS" – news · newspapers · books · scholar · JSTOR (May 2023) (Learn how and when to remove this message)

A major contributor to this article appears to have a close connection with its subject. It may require cleanup to comply with Wikipedia's content policies, particularly neutral point of view. Please discuss further on the talk page. See our advice if the article is about you and read our scam warning in case someone asks for money to edit this article. (May 2023) (Learn how and when to remove this message)

StencilJS is an open-source compiler for building highly optimized Web Components. Developed by the team at Ionic, StencilJS combines the best features of modern JavaScript frameworks with the simplicity and performance of Web Components, enabling developers to create reusable, framework-agnostic UI components.^[3][4][5]

StencilJS is a powerful tool for building Web Components that work seamlessly across different frameworks. By combining modern web development best practices with performance optimizations, StencilJS provides an efficient way to develop scalable, maintainable, and reusable UI components.^[6][7] Its source code is licensed under MIT License and hosted on GitHub.^[8] StencilJS generates framework-specific wrappers that allow custom elements developed, to be used with any framework, whether its Angular, React, or Vue.js.^[9]

StencilJS was introduced by the Ionic team in 2017 to address the challenges of building performant, scalable UI components for Ionic's ecosystem.^[10] Unlike traditional frameworks such as React, Angular, or Vue, StencilJS is not a framework but a compiler that generates standard-compliant Web Components. These components can be used in any JavaScript framework or as standalone elements in vanilla JavaScript applications.^{[11][12][13][14]}

StencilJS provides several features that make it an attractive choice for building Web Components:

• TypeScript Support: StencilJS is built with TypeScript, providing strong typing and improved developer experience.
• Virtual DOM: Uses a lightweight Virtual DOM for efficient updates and rendering.
• Reactive Data Binding: Supports reactive properties and state management.
• Lazy Loading: Optimized lazy loading of components to improve performance.
• Scoped CSS and Shadow DOM: Ensures style encapsulation and component isolation.
• Automatic Polyfills: Provides polyfills for older browsers to ensure cross-browser compatibility.
• Build-time Optimizations: Features ahead-of-time (AOT) compilation and tree-shaking for optimized builds.

StencilJS components are built using a class-based syntax and decorators, similar to Angular. A typical component consists of:

• @Component(): Defines metadata for the component.
• @Prop(): Declares component properties.
• @State(): Maintains internal component state.
• @Method(): Exposes public methods.
• @Event(): Enables event-driven communication.

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>
Hello, {this.name}!
Count: {this.count}
<button onClick={() => this.increment()}>Increment</button>
</div>
);
  }
}

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.

StencilJS components can be used in various environments:

• Vanilla JavaScript:

<script type="module" src="/build/my-component.js"></script>
<my-component name="Stencil"></my-component>

• React

import { defineCustomElements } from 'my-component/loader';
defineCustomElements();
<my-component name="React"></my-component>

• Angular

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

• Vue: Uses Vue's native support for Web Components.

StencilJS is widely used in:

• Design Systems: Large organizations use StencilJS to build design systems with framework-agnostic components.
• Enterprise Applications: Provides a scalable approach for component-based UI development.
• Ionic Framework: The Ionic UI library is built using StencilJS.^{[15][16][17][18]}
• Progressive web app (PWA).^[19][20]
• Several companies like Upwork, Volkswagen, Porsche, MasterCard, Amazon, Adidas, Panera etc. have built their design systems based on Stencil-based Web Components.^[21][22]
• Liberty Mutual Ins. Group's Design System FLUID (Frontend Library for User Interface Development) is built using StencilJS.^[23] The music streaming platform Amazon Music is built using StencilJS.

• Svelte
• LitElement

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

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

This Web-software-related article is a stub. You can help Wikipedia by adding missing information.

• v
• t
• e