🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

@stencil/core

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stencil/core

A Compiler for Web Components and Progressive Web Apps

4.31.0
latest
Version published
Weekly downloads
764K
1.77%
Maintainers
4
Weekly downloads
 
Created

What is @stencil/core?

@stencil/core is a compiler for building fast web apps using Web Components. It combines the best features of popular frameworks into a simple build-time tool. Stencil generates standards-compliant Web Components that work in any major framework or with no framework at all.

What are @stencil/core's main functionalities?

Component Creation

Stencil allows you to create reusable web components. The example demonstrates a simple component that takes a 'name' property and renders a greeting message.

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

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() name: string;

  render() {
    return <div>Hello, {this.name}!</div>;
  }
}
```

Reactive Data Binding

Stencil provides reactive data binding using the @State decorator. The example shows a counter component that updates its state and re-renders when the button is clicked.

```typescript
import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'counter-component',
  styleUrl: 'counter-component.css',
  shadow: true
})
export class CounterComponent {
  @State() count: number = 0;

  increment() {
    this.count += 1;
  }

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}
```

Lazy Loading

Stencil supports lazy loading of components to improve performance. The example shows a component that will be lazy-loaded when needed.

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

@Component({
  tag: 'lazy-component',
  styleUrl: 'lazy-component.css',
  shadow: true,
  assetsDirs: ['assets']
})
export class LazyComponent {
  render() {
    return <div>Lazy Loaded Component</div>;
  }
}
```

Other packages similar to @stencil/core

FAQs

Package last updated on 06 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts