Gathering detailed insights and metrics for @stencil/core
Gathering detailed insights and metrics for @stencil/core
Gathering detailed insights and metrics for @stencil/core
Gathering detailed insights and metrics for @stencil/core
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.
npm install @stencil/core
🐤 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
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
12,598 Stars
7,988 Commits
789 Forks
177 Watching
12 Branches
211 Contributors
Updated on 28 Nov 2024
TypeScript (98.35%)
JavaScript (0.69%)
HTML (0.54%)
CSS (0.38%)
SCSS (0.04%)
Cumulative downloads
Total Downloads
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
66
A compiler for generating Web Components using technologies like TypeScript and JSX, built by the Ionic team.
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.
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.
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
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 6
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
56 existing vulnerabilities detected
Details
Score
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