Skip to content

chore(readme): update about stencil #3535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rwaskiewicz merged 4 commits into from
Sep 13, 2022
Merged

chore(readme): update about stencil #3535

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
889b747
chore(readme): update about stencil
rwaskiewicz Aug 22, 2022
4df4299
rework the readme
rwaskiewicz Aug 26, 2022
2f9cad7
review(ap): class-based
rwaskiewicz Sep 13, 2022
be981bf
Merge branch 'main' into rwaskiewicz/update-readme
rwaskiewicz Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 27 additions & 33 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
</h1>

<p align="center">
A compiler for generating <a href="https://www.webcomponents.org/introduction">Web Components</a>
A compiler for generating <a href="https://www.webcomponents.org/introduction" target="_blank" rel="noopener noref">Web Components</a>, built by the <a href="https://ionic.io/">Ionic team</a>.
</p>
<p align="center">
Stencil allows developers to use technologies like TypeScript and JSX to define components, then generate 100% standards-based Web Components that run on both <a href="https://stenciljs.com/docs/browser-support" target="_blank" rel="noopener noref">modern browsers and legacy browsers</a>
</p>

<p align="center">
Expand Down Expand Up @@ -43,46 +46,28 @@
<a href="https://twitter.com/stenciljs">Twitter</a>
</h2>

[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.

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

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:

```bash
npm init stencil
```

To start developing your new Stencil project, run:

```bash
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.
### Getting Started

Create new components by creating files with a `.tsx` extension, such as `my-component.tsx`, and place them in `src/components`.
Start a new project by following our quick [Getting Started guide](https://stenciljs.com/docs/getting-started).
We would love to hear from you!
If you have any feedback or run into issues using Stencil, please file an [issue](https://github.com/ionic-team/stencil/issues/new) on this repository.

### Examples
A Stencil component looks a lot like a class-based React component, with the addition of TypeScript decorators:
```tsx
import { Component, Prop, h } from '@stencil/core';

@Component({
tag: 'my-component',
styleUrl: 'my-component.css'
tag: 'my-component', // the name of the component's custom HTML tag
styleUrl: 'my-component.css', // css styles to apply to the component
shadow: true, // this component uses the ShadowDOM
})
export class MyComponent {

// The component accepts two arguments:
@Prop() first: string;
@Prop() last: string;

//The following HTML is rendered when our component is used
render() {
return (
<div>
Expand All @@ -93,13 +78,22 @@ export class MyComponent {
}
```

To use this component, just use it like any other HTML element:
The component above can be used like any other HTML element:

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

## Thanks
Since Stencil generates web components, 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 framework, though using it as such is certainly not required.

### Contributing

Thanks for your interest in contributing!
Please take a moment to read up on our guidelines for [contributing](https://github.com/ionic-team/stencil/blob/main/.github/CONTRIBUTING.md).
Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/stencil/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

### Thanks
Stencil's internal testing suite is supported by the [BrowserStack Open-Source Program](https://www.browserstack.com/open-source)
<br>
<a target="_blank" href="https://www.browserstack.com/"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a>
<a href="https://www.browserstack.com/" target="_blank" rel="noopener noref"><img width="200" src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png"></a>