Nano Stores Stencil

Stencil 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 using one of the following commands:

npm

npm add nanostores @giant-leaps/nanostores-stencil

bun

bun add nanostores @giant-leaps/nanostores-stencil

pnpm

pnpm add nanostores @giant-leaps/nanostores-stencil

yarn

yarn add nanostores @giant-leaps/nanostores-stencil

Use it as a decorator with @useStores:

 import { Component } from '@stencil/core';
 import { atom } from 'nanostores';
 import { MultiStoreSubscription } from '@giant-leaps/nanostores-stencil';

 const count1 = atom(0);
 const count2 = atom(0);

 @Component({
   tag: 'my-element',
    // additional options
  })
  class MyElement {

  private countsSubscription = new MultiStoreSubscription(this, [count1, count2]);

  render() {
   const [$count1, $count2] = countsSubscription.values;
   return html\`Count 1: \${count1}\, Count 2: \${count2}\`;
  }
 }