Lit x xignal

Install

npm i xignal @xignal/lit

Usage

Basic

// ./signal.ts

import * as xignal from "xignal";

export const count = xignal.state(0);
export const doubled = xignal.computed(() => count.get() * 2);

UseSignalValue

// ./component-counter.ts

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

import { UseSignalValue } from "@xignal/lit";

import { count, doubled } from "./signal";

@customElement("component-counter")
class Counter extends LitElement {
	private countValue = new UseSignalValue(this, count);
	private doubledValue = new UseSignalValue(this, doubled);

	render() {
		return html`
			<div>
				<div>count ${this.countValue.get}</div>
				<div>doubled ${this.doubledValue.get}</div>
			</div>
    `;
	}
}

UseSignalValue

import { UseSignalState } from "@xignal/lit";

import { count } from "./signal";

class Component extends LitElement {
	private countState = new UseSignalState(this, count);
}

Utils

import { createStateWithUseSignalValue, createComputedWithUseSignalValue } from "@xignal/lit";

const [count, useCount] = createStateWithUseSignalValue(0);
const [doubled, useDoubled] = createComputedWithUseSignalValue(() => count.get() * 2);

License

MIT