1.0.3 • Published 8 months ago
lit-signals-decorator v1.0.3
lit-signals-decorator
Let you use signals in your code easily (through a decorator)
// signals/user.ts
import {signal} from 'lit-signals-decorator';
export const userName = signal('John Doe');
// my-element.ts
import {signalable} from 'lit-signals-decorator';
import {userName} from 'signals/user.ts';
@customElement('my-element')
@signalable()
export class MyElement extends LitElement {
render() {
return html`
<p>Hello ${userName}</p>
<button @click=${this.#signout}>signout</button>
`;
}
#signout() {
// Changing the signal value will automatically
// update the views that depend on it
// (views that are 'signalable')
userName.value = 'anonymous';
}
}
localStorage support
Here's an example:
import {lsignal} from 'lit-signals-decorator';
export const $userName = lsignal('userstore', 'name', 'anonymous');
export const $useAge = lsignal('userstore', 'age', 0);
or using compound
syntax
import {compound} from 'lit-signals-decorator';
// Using compound syntax improves readability.
const c = compound('userstore');
export const $userName = c.signal('name', 'anonymous');
export const $userAge = c.signal('age', 0);
// You can access all the compound signals for debugging purpose.
console.log(c.signals);
// Though Intellisense is unaware of the following type
// you can access and use a signal directly from the compound.
c.signals.$userName.value = 'John Doe';
// Export for general use.
export const userCompound = c;