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.
Installations
npm install @stencil/core
Releases
🐤 4.22.3 (2024-11-21)
Published on 21 Nov 2024
🎺 4.22.2 (2024-10-25)
Published on 25 Oct 2024
🌪️ v4.22.1 (2024-10-09)
Published on 09 Oct 2024
🍲 v4.22.0 (2024-10-03)
Published on 03 Oct 2024
🐷 v4.21.0 (2024-08-26)
Published on 26 Aug 2024
🚐 v4.20.0 (2024-08-02)
Published on 02 Aug 2024
Developer
Developer Guide
Module System
CommonJS, ESM
Min. Node Version
>=16.0.0
Typescript Support
Yes
Node Version
22.2.0
NPM Version
10.7.0
Statistics
12,598 Stars
7,988 Commits
789 Forks
177 Watching
12 Branches
211 Contributors
Updated on 28 Nov 2024
Languages
TypeScript (98.35%)
JavaScript (0.69%)
HTML (0.54%)
CSS (0.38%)
SCSS (0.04%)
Total Downloads
Cumulative downloads
Total Downloads
88,575,766
Last day
-2.9%
125,051
Compared to previous day
Last week
3.7%
691,823
Compared to previous week
Last month
1.7%
2,910,693
Compared to previous month
Last year
18.1%
33,039,576
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
66
Stencil
A compiler for generating Web Components using technologies like TypeScript and JSX, built by the Ionic team.
Quick Start
·
Documentation
·
Contribute
·
Blog
Community:
Discord
·
Forums
·
Twitter
Getting Started
Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using Stencil, please file an issue on this repository.
Examples
A Stencil component looks a lot like a class-based React component, with the addition of TypeScript decorators:
1import { Component, Prop, h } from '@stencil/core';
2
3@Component({
4 tag: 'my-component', // the name of the component's custom HTML tag
5 styleUrl: 'my-component.css', // css styles to apply to the component
6 shadow: true, // this component uses the ShadowDOM
7})
8export class MyComponent {
9 // The component accepts two arguments:
10 @Prop() first: string;
11 @Prop() last: string;
12
13 //The following HTML is rendered when our component is used
14 render() {
15 return (
16 <div>
17 Hello, my name is {this.first} {this.last}
18 </div>
19 );
20 }
21}
The component above can be used like any other HTML element:
1<my-component first="Stencil" last="JS"></my-component>
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. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
No vulnerabilities found.
Reason
30 commit(s) and 13 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/ionic-team/.github/SECURITY.md:1
- Info: Found linked content: github.com/ionic-team/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/ionic-team/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/ionic-team/.github/SECURITY.md:1
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
dependency not pinned by hash detected -- score normalized to 6
Details
- Warn: npmCommand not pinned by hash: .github/workflows/test-component-starter.yml:81
- Warn: npmCommand not pinned by hash: .github/workflows/test-component-starter.yml:86
- Warn: npmCommand not pinned by hash: .github/workflows/test-component-starter.yml:91
- Info: 22 out of 22 GitHub-owned GitHubAction dependencies pinned
- Info: 2 out of 2 third-party GitHubAction dependencies pinned
- Info: 0 out of 3 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-production.yml:28
- Warn: no topLevel permission defined: .github/workflows/build.yml:1
- Warn: no topLevel permission defined: .github/workflows/create-production-pr.yml:1
- Warn: no topLevel permission defined: .github/workflows/lint-and-format.yml:1
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-dev.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-nightly.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-production.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-analysis.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-bundlers.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-component-starter.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-copytask.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-docs-build.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-e2e.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-unit.yml:1
- Warn: no topLevel permission defined: .github/workflows/test-wdio.yml:1
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
56 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-q9mw-68c2-j6m5
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8
- Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67
- Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
- Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-wrw9-m778-g6mc
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-x6fg-f45m-jf5q
- Warn: Project is vulnerable to: GHSA-pp7m-6j83-m7r6
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Score
5.9
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More