Gathering detailed insights and metrics for @lit-labs/preact-signals
Gathering detailed insights and metrics for @lit-labs/preact-signals
Lit is a simple library for building fast, lightweight web components.
Installations
npm install @lit-labs/preact-signalsDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.18.2
NPM Version
10.8.2
Releases
566
lit-element@4.2.1
lit-element@4.2.1
Updated on Jul 11, 2025
@lit-labs/virtualizer@2.1.1
@lit-labs/virtualizer@2.1.1
Updated on Jul 11, 2025
@lit/react@1.0.8
@lit/react@1.0.8
Updated on Jul 11, 2025
@lit/reactive-element@2.1.1
@lit/reactive-element@2.1.1
Updated on Jul 11, 2025
@lit-labs/signals@0.1.3
@lit-labs/signals@0.1.3
Updated on Jul 11, 2025
@lit/task@1.0.3
@lit/task@1.0.3
Updated on Jul 11, 2025
Languages
6
TypeScript
JavaScript
HTML
CSS
Vue
Shell
TypeScript (58.93%)
JavaScript (38.48%)
HTML (2.19%)
CSS (0.23%)
Vue (0.17%)
Shell (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
BSD-3-Clause License
19,927 Stars
2,572 Commits
976 Forks
211 Watchers
217 Branches
194 Contributors
Updated on Jul 12, 2025
Maintainers
11
Package Meta Information
Latest Version
1.0.3
Package Id
@lit-labs/preact-signals@1.0.3
Unpacked Size
44.18 kB
Size
10.82 kB
File Count
35
NPM Version
10.8.2
Node Version
20.18.2
Published on
Feb 14, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
1
@lit-labs/preact-signals
Preact Signals integration for Lit.
[!WARNING]
This package is part of Lit Labs. It is published in order to get feedback on the design and may receive breaking changes or stop being supported.
Please read our Lit Labs documentation before using this library in production.
Give feedback: https://github.com/lit/lit/discussions/4115
Why Signals?
Signals are an easy way to create shared observable state - state that many elements can use and update when it changes. This is great for things like a game state that many components need to read.
This use case can also be covered by state management solutions like Redux or MobX, observables like RxJS, or EventTargets. Signals have a nice DX balance of being granular and composable, and having a fairly simple API.
Unlike in many frameworks, we do not think that signals are going to be a big performance improvement for most Lit components. Updating Lit components is already very fast because Lit updates are batched and don't do a VDOM diff on each render; it only checks for which binding values have changed and updates the DOM for those bindings.
A Lit element template is already somewhat like a signal-produced value: it is computed based on updates to inputs (reactive properties). The difference with Lit templates is that the data flow is push-based, rather than pull-based. Lit elements react when changes are pushed into them, whereas signals automatically subscribe to the other signals they access. These approaches are very compatible though, and we can make elements subscribe to the signals they access and trigger an update with an integration library like this one.
Why Preact Signals?
There are many signal libraries now, and unfortunately they are not seamlessly compatible (we can't generically watch all signal access and run an effect when they change across libraries). So we will need to support each library individually.
Preact Signals are a good place to start. It has integrations with other libraries; is shipped as standard JS modules; and is small, fast, and high-quality.
Usage
SignalWatcher
SignalWatcher is a mixin that makes an element watch all signal accesses during the element's reactive update lifecycle, then triggers an element update when signals change. This includes signals read in shouldUpdate(), willUpdate(), update(), render(), updated(), firstUpdated(), and reactive controller's hostUpdate() and hostUpdated().
This effectively makes the return result of render() a computed signal.
1import {LitElement, html} from 'lit'; 2import {customElement, property} from 'lit'; 3import {SignalWatcher, signal} from '@lit-labs/preact-signals'; 4 5const count = signal(0); 6 7@customElement('signal-example') 8export class SignalExample extends SignalWatcher(LitElement) { 9 static styles = css` 10 :host { 11 display: block; 12 } 13 `; 14 15 render() { 16 return html` 17 <p>The count is ${count.value}</p> 18 <button @click=${this._onClick}>Increment<button></button></button> 19 `; 20 } 21 22 private _onClick() { 23 count.value = count.value + 1; 24 } 25}
Elements should not write to signals in these lifecycle methods or they might cause an infinite loop.
watch() directive
The watch() directive accepts a single Signal and renders its value, subscribing to updates and updating the DOM when the signal changes.
The watch() directive allows for very targeted updates of the DOM, which can be good for performance (but as always, measure!). The downside is that the lifecycle callbacks are not automatically watched for signal access, so values computed from signals must by wrapped in computed signals.
1import {LitElement, html} from 'lit'; 2import {customElement, property} from 'lit'; 3import {watch, signal} from '@lit-labs/preact-signals'; 4 5const count = signal(0); 6 7@customElement('signal-example') 8export class SignalExample extends LitElement { 9 static styles = css` 10 :host { 11 display: block; 12 } 13 `; 14 15 render() { 16 return html` 17 <p>The count is ${watch(count)}</p> 18 <button @click=${this._onClick}>Increment<button></button></button> 19 `; 20 } 21 22 private _onClick() { 23 count.value = count.value + 1; 24 } 25}
You can mix and match the SignalWatcher mixins and the watch() directive. When you pass a signal directly to watch() it is not accessed in a callback watched by SignalWatcher, so an update to that signal will cause a targeted DOM update and not an entire element update.
html tag and withWatch()
This package also exports an html template tag that can be used in place of Lit's default html tag and automatically wraps any signals in watch().
1import {LitElement} from 'lit'; 2import {customElement, property} from 'lit'; 3import {html, signal} from '@lit-labs/preact-signals'; 4 5const count = signal(0); 6 7@customElement('signal-example') 8export class SignalExample extends LitElement { 9 static styles = css` 10 :host { 11 display: block; 12 } 13 `; 14 15 render() { 16 return html` 17 <p>The count is ${count}</p> 18 <button @click=${this._onClick}>Increment<button></button></button> 19 `; 20 } 21 22 private _onClick() { 23 count.value = count.value + 1; 24 } 25}
withWatch() is a function that wraps an html tag function with the auto-watching functionality. This allows you to compose this wrapper with other html-tag wrappers like Lit's withStatic() static template wrapper.
No vulnerabilities found.
Reason
all last 30 commits are reviewed through GitHub
Reason
30 commit(s) out of 30 and 22 issue activity out of 30 found in the last 90 days -- score normalized to 10
Reason
no vulnerabilities detected
Reason
license file detected
Details
- Info: : LICENSE:1
Reason
no binaries found in the repo
Reason
update tool detected
Details
- Info: Dependabot detected
Reason
branch protection is not maximal on development and all release branches
Details
- Info: 'force pushes' disabled on branch 'main'
- Info: 'allow deletion' disabled on branch 'main'
- Info: status check found to merge onto on branch 'main'
- Warn: number of required reviewers is only 1 on branch 'main'
Reason
dependency not pinned by hash detected -- score normalized to 7
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:88: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/benchmarks.yml:104: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-image.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-image.yaml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yaml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/sauce-ie11.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sauce.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/sauce.yaml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/starter-kits.yaml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/tests.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: packages/benchmarks/generator/scripts/generate.sh:11
- Info: Dockerfile dependencies are pinned
- Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
- Info: no insecure (not pinned by hash) dependency downloads found in shell scripts
Reason
no badge detected
Reason
non read-only tokens detected in GitHub workflows
Details
- Warn: no topLevel permission defined: .github/workflows/add-issues-to-project.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/add-issues-to-project.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/benchmarks.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/benchmarks.yml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/release-image.yaml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release-image.yaml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/release.yaml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/release.yaml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/sauce-ie11.yaml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce-ie11.yaml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/sauce.yaml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/sauce.yaml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/starter-kits.yaml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/starter-kits.yaml/main?enable=permissions
- Warn: no topLevel permission defined: .github/workflows/tests.yml:1: update your workflow using https://app.stepsecurity.io/secureworkflow/lithops-cloud/lithopscloud/tests.yml/main?enable=permissions
Reason
dangerous workflow patterns detected
Details
- Warn: script injection with untrusted input ' github.event.pull_request.body ': .github/workflows/release-image.yaml:36
Reason
security policy file not detected
Reason
project is not fuzzed
Score
6
/10
Last Scanned on 2022-08-15
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