Skip to content

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

License

ionic-team/stencil

main
Switch branches/tags
Code

Latest commit

this commit updates `ValidatedConfig` in order to make the `testing`
field required. this is being done in pursuit of dropping the number of
`strictNullChecks` violations in the code, and was a side task of
stencil-501 (the author of this commit was actively in the testing code,
making it a good opportunity to knock this out).

this commit makes `testing` default to an empty object literal, rather
than `null` or pre-populating existing fields. choosing the former would
require additional optional checks throughout the code (which assumes
`testing` is a defined field, and choosing the latter would expand the
scope of this commit vastly. an empty object literal should incur
minimal runtime overhead, while keeping the size/scope of this commit to
a minimal
8d2cbea

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
bin
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

stencil-logo

Stencil

A compiler for generating Web Components

StencilJS is released under the MIT license. StencilJS is released under the MIT license. PRs welcome! Follow @stenciljs

Quick Start · Documentation · Contribute · Blog
Community: Slack · Forums · Twitter

Stencil is a simple compiler for generating Web Components and static site generated progressive web apps (PWA). Stencil was built by the Ionic team for its next generation of performant mobile and desktop Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It combines TypeScript, JSX, an asynchronous rendering pipeline to ensure smooth running animations and lazy-loading, to generate 100% standards-based Web Components that run on both modern browsers and legacy browsers.

Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.

Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

Getting Started

To create a new project using an interactive cli, run:

npm init stencil

To start developing your new Stencil project, run:

npm start

Creating components

Stencil components are TypeScript classes with decorator metadata. The decorators themselves are purely build-time annotations so the compiler can read metadata about each component, and removed entirely for smaller efficient components.

Create new components by creating files with a .tsx extension, such as my-component.tsx, and place them in src/components.

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

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css'
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;

  render() {
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}

To use this component, just use it like any other HTML element:

<my-component first="Stencil" last="JS"></my-component>

Thanks

Stencil's internal testing suite is supported by the BrowserStack Open-Source Program

About

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks