https://github.com/nanostores/lit

Lit integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
https://github.com/nanostores/lit

lit state state-management store

Last synced: 5 days ago
JSON representation

Lit integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores

• Host: GitHub
• URL: https://github.com/nanostores/lit
• Owner: nanostores
• License: mit
• Created: 2023-01-21T18:14:32.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-15T13:39:20.000Z (3 months ago)
• Last Synced: 2024-10-31T19:48:53.832Z (13 days ago)
• Topics: lit, state, state-management, store
• Language: TypeScript
• Homepage:
• Size: 866 KB
• Stars: 28
• Watchers: 4
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nano Stores Lit



[Lit](https://lit.dev/) integration for **[Nano Stores]**, a tiny state manager

with many atomic tree-shakable stores.

- **Small.** Less than 1 KB. Zero dependencies.

- **Fast.** With small atomic and derived stores, you do not need to call

  the selector function for all components on every store change.

- **Tree Shakable.** The chunk contains only stores used by components

  in the chunk.

- Was designed to move logic from components to stores.

- It has good **TypeScript** support.

## Quick start

Install it:

```bash

npm add nanostores @nanostores/lit # or yarn

```

Use it as a decorator with `@useStores`:

```ts

import { LitElement, html } from "lit";

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

import { useStores } from "@nanostores/lit";

import { profile } from "./stores/profile.js";

@customElement("my-header")

@useStores(profile)

class MyHeader extends LitElement {

  render() {

    return html`${profile.get().userId}`;

  }

}

```

Or as a mixin with `withStores`:

```ts

import { LitElement, html } from "lit";

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

import { withStores } from "@nanostores/lit";

import { profile } from "./stores/profile.js";

@customElement("my-header")

class MyHeader extends withStores(LitElement, [profile]) {

  render() {

    return html`${profile.get().userId}`;

  }

}

```

Or as a Reactive Controller with `StoreController`:

```ts

import { LitElement, html } from "lit";

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

import { StoreController } from "@nanostores/lit";

import { profile } from "./stores/profile.js";

@customElement("my-header")

class MyHeader extends LitElement {

  private profileController = new StoreController(this, profile);

  render() {

    return html`${this.profileController.value.userId}`;

  }

}

```

[Nano Stores]: https://github.com/nanostores/nanostores/