1 | <p align="center">
|
2 | <a href="#">
|
3 | <img alt="stencil-logo" src="https://github.com/ionic-team/stencil/blob/main/stencil-logo.png" width="60">
|
4 | </a>
|
5 | </p>
|
6 |
|
7 | <h1 align="center">
|
8 | Stencil
|
9 | </h1>
|
10 |
|
11 | <p align="center">
|
12 | A compiler for generating <a href="https://www.webcomponents.org/introduction">Web Components</a>
|
13 | </p>
|
14 |
|
15 | <p align="center">
|
16 | <a href="https://www.npmjs.com/package/@stencil/core">
|
17 | <img src="https://img.shields.io/npm/v/@stencil/core.svg" alt="StencilJS is released under the MIT license." /></a>
|
18 | <a href="https://github.com/ionic-team/stencil/blob/main/LICENSE.md">
|
19 | <img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="StencilJS is released under the MIT license." />
|
20 | </a>
|
21 | <a href="https://github.com/ionic-team/stencil/blob/main/.github/CONTRIBUTING.md">
|
22 | <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
23 | </a>
|
24 | <a href="https://twitter.com/stenciljs">
|
25 | <img src="https://img.shields.io/twitter/follow/stenciljs.svg?label=Follow%20@stenciljs" alt="Follow @stenciljs">
|
26 | </a>
|
27 | </p>
|
28 |
|
29 | <h2 align="center">
|
30 | <a href="https://stenciljs.com/docs/getting-started#starting-a-new-project">Quick Start</a>
|
31 | <span> · </span>
|
32 | <a href="https://stenciljs.com/docs/introduction">Documentation</a>
|
33 | <span> · </span>
|
34 | <a href="https://github.com/ionic-team/stencil/blob/main/.github/CONTRIBUTING.md">Contribute</a>
|
35 | <span> · </span>
|
36 | <a href="https://ionicframework.com/blog/tag/stencil/">Blog</a>
|
37 | <br />
|
38 | Community:
|
39 | <a href="https://stencil-worldwide.herokuapp.com">Slack</a>
|
40 | <span> · </span>
|
41 | <a href="https://forum.ionicframework.com/c/stencil/21/">Forums</a>
|
42 | <span> · </span>
|
43 | <a href="https://twitter.com/stenciljs">Twitter</a>
|
44 | </h2>
|
45 |
|
46 | [Stencil](https://stenciljs.com/) is a simple compiler for generating Web Components and static site generated progressive web apps (PWA). Stencil was built by the [Ionic](https://ionic.io/) team for its next generation of performant mobile and desktop Web Components.
|
47 |
|
48 | 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](https://stenciljs.com/docs/browser-support).
|
49 |
|
50 | 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.
|
51 |
|
52 | 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).
|
53 |
|
54 | ## Getting Started
|
55 |
|
56 | To create a new project using an interactive cli, run:
|
57 |
|
58 | ```bash
|
59 | npm init stencil
|
60 | ```
|
61 |
|
62 | To start developing your new Stencil project, run:
|
63 |
|
64 | ```bash
|
65 | npm start
|
66 | ```
|
67 |
|
68 | ## Creating components
|
69 |
|
70 | 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.
|
71 |
|
72 | Create new components by creating files with a `.tsx` extension, such as `my-component.tsx`, and place them in `src/components`.
|
73 |
|
74 | ```tsx
|
75 | import { Component, Prop, h } from '@stencil/core';
|
76 |
|
77 | @Component({
|
78 | tag: 'my-component',
|
79 | styleUrl: 'my-component.css'
|
80 | })
|
81 | export class MyComponent {
|
82 |
|
83 | @Prop() first: string;
|
84 | @Prop() last: string;
|
85 |
|
86 | render() {
|
87 | return (
|
88 | <div>
|
89 | Hello, my name is {this.first} {this.last}
|
90 | </div>
|
91 | );
|
92 | }
|
93 | }
|
94 | ```
|
95 |
|
96 | To use this component, just use it like any other HTML element:
|
97 |
|
98 | ```html
|
99 | <my-component first="Stencil" last="JS"></my-component>
|
100 | ```
|
101 |
|
102 | ## Thanks
|
103 | Stencil's internal testing suite is supported by the [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
|
104 | <br>
|
105 | <a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a>
|