open-index/open-npm huggingface dataset:
npm package: @nanoslices/devtools
Description: Redux DevTools support for Nanoslices
Author: Jérémie van der Sande
Latest version: 0.0.0-rc.13

# @nanoslices/devtools

Nanoslices plugin for adding a connection to the Redux Devtools.

## Installation

`@nanoslices/devtools` depends on `@nanoslices/core`, refer to [@nanoslices/core](https://npmjs.com/package/@nanoslices/core)
for its installation instruction.

**npm**

```
npm install --save @nanoslices/devtools
```

**yarn**

```
yarn add @nanoslices/devtools
```

## Usage

Simply import `@nanoslices/devtools` somewhere in your application, preferably in the file from which your store is exported.

After that, two new options will be available in `createStore` calls:

- `devtools: boolean` controls whether to setup the Redux DevTools connection. It is not recommended to use this is production.
- `name: string` lets you set a name for your DevTools store. Defaults to `Nanoslices` if omitted.
npm package: @nanoslices/react
Description: React wrapper for Nanoslices
Author: Jérémie van der Sande
Latest version: 0.0.0-rc.13

# @nanoslices/react

React wrapper for [@nanoslices/core](https://npmjs.com/@nanoslices/core).
Re-export all helpers from Core, but the created stores have a new `use` property.

## Installation

`@nanoslices/react` depends on `@nanoslices/core`, refer to [@nanoslices/core](https://npmjs.com/package/@nanoslices/core)
for its installation instruction.

`@nanoslices/react` also depends on `@nanostores/react` as peer dependency, so you need to install it manually if you are
not using npm 7 or higher.

**npm >= 7**

```
npm install --save @nanoslices/react
```

**npm < 7**

```
npm install --save @nanoslices/react @nanostores/react
```

**yarn**

```
yarn add @nanoslices/react @nanostores/react
```

## Usage

Simply import `@nanoslices/react` somewhere in your application, preferably in the file from which your store is exported.

After that, a new `use` method will be made available on your stores.

This hook takes a selector which receives the nanostores stores from the state, and must return one. Internally, it
will call `@nanostores/react`'s `useStore` on the received nanostore, subscribing to updates.
npm package: @nanoslices/spy
Description: Spy support for testing Nanoslices
Author: Jérémie van der Sande
Latest version: 0.0.0-rc.13

# @nanoslices/spy

Nanoslices plugin for spying on and control a nanoslices store during tests.

## Installation

`@nanoslices/spy` depends on `@nanoslices/core`, refer to [@nanoslices/core](https://npmjs.com/package/@nanoslices/core)
for its installation instruction.

**npm**

```
npm install --save @nanoslices/spy
```

**yarn**

```
yarn add @nanoslices/spy
```

## Usage

Simply import `@nanoslices/spy` somewhere in your application, preferably in the file from which your store is exported.

After that, a new `spy` method will be made available on your stores.

Furthermore, a `spyEnabled` option will be available in `createStore` calls. It is `true` by default, but can be set to `false`
to block a store from being spied on.

Calling `Store.spy()` will enable spying on action execution, and easily updating that state and context in a test environment.

It returns a `StoreSpy` object complete with useful options for testing, and takes an `options` parameter to configure the testing environment.

**Options:**

- `reset`: Testing hook in which to reset the state and actions history. Pass it one of your testing framework lifecycle functions such as `beforeEach`.
- `restore`: Testing hook in which to restore the state, removing the spy altogether. Pass it one of your testing framework lifecycle functions such as `afterAll`.
- `context`: Partial context to set in place of the normal store context, useful for injecting service mocks relevant to the current test suite.
- `snapshot`: Partial snapshot of the state to apply when `reset` is called, useful for bringing the state to a relevant value for the current test suite.

**`StoreSpy` fields:**

- `context(context)`: Takes a new partial context and replace the store context. Useful for injecting mocks relevant to a specific test.
- `snapshot(snapshot)`: Takes a partial snapshot and apply it to the store. Useful for bringing the state to a relevant value for a specific test.
- `clear()`: Clears all recorded actions, to get back an empty history.
- `reset()`: Resets the state to its original state, then applies the snapshot passed as option to `Store.spy()`, if any. Also calls `clear()` internally.
  Prefer using the `reset` option rather than calling `reset()` yourself.
- `restore()`: Restore the state to its original state, and removes the spy completely. Prefer using the `restore` option rather than calling `restore` directly.
- `history`: Array containing an entry for each action that have been called since the last `clear()` call. Each action log is an object containing a `type`
  field equals to `@action.[path.to.slice].[actionName]` and a `payload` field equals to the `arguments` passed to the action.
  If an action returns a `Promise`, then an additional entry is added after the `Promise` resolves or rejects. The `type` is the same as the action, with either a `(success)` or `(fail)` suffix.
npm package: @nanoslices/types
Description: Shared types across the Nanoslices packages
Author: Jérémie van der Sande
Latest version: 0.0.0-rc.13

# @nanoslices/types

Shared types used in `@nanoslices/core` and made available for plugins.

See [@nanoslices/core](https://npmjs.com/package/@nanoslices/core) for more information on nanoslices.
npm package: @nanostores/alpine
Description: Alpine.js integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Author: Eduard Aksamitov
Latest version: 0.1.1

# Nano Stores Alpine

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

[Alpine.js] integration for **[Nano Stores]**, a tiny state manager with many atomic tree-shakable stores.

* **Small.** Less than 1.2 KB (minified + brotli). Zero dependencies.
* **Tree-shakable.** Use only the parts you need: directive, magic, or component helper.
* **Smart.** Store subscriptions are created and cleaned up automatically.
* It has good **TypeScript** support.

```html
<div x-data x-nano:user="$profile">
  <header>Hi, <strong x-text="user.name"></strong>!</header>
</div>
```


## Docs
Read full docs **[here](https://github.com/nanostores/alpine#readme)**.
npm package: @nanostores/angular
Description: Angular integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Latest version: 0.0.5

# Nano Stores Angular

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Angular integration for **[Nano Stores]**, a tiny state manager
with many atomic tree-shakable stores.

## How to install

```sh
pnpm add @nanostores/angular # or npm or yarn
```

## How to use

```ts
// your NgModule:
import { NANOSTORES, NanostoresService } from '@nanostores/angular';

@NgModule({ providers: [{ provide: NANOSTORES, useClass: NanostoresService }], ... })
```

**app.component.ts:**

```tsx
// example using async pipes:
import { Component } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { Observable, switchMap } from 'rxjs';

import { profile } from '../stores/profile';
import { IUser, User } from '../stores/user';

@Component({
  selector: "app-root",
  template: '<p *ngIf="(currentUser$ | async) as user">{{ user.name }}</p>'
})
export class AppComponent {
  currentUser$: Observable<IUser> = this.nanostores.useStore(profile)
    .pipe(switchMap(({ userId }) => this.nanostores.useStore(User(userId))));

  constructor(private nanostores: NanostoresService) { }
}
```

```tsx
// example without async pipes:
import { Component, OnInit } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { switchMap } from 'rxjs';

import { profile } from '../stores/profile';
import { User } from '../stores/user';

@Component({
  selector: "app-root",
  template: '<p>{{ text }}</p>'
})
export class AppComponent implements OnInit {
  text = '';

  constructor(private nanostores: NanostoresService) { }

  ngOnInit() {
    this.nanostores.useStore(profile).pipe(
      switchMap(({ userId }) => this.nanostores.useStore(User(userId)))
    )
    .subscribe(user => this.text = `User name is ${user.name}`);
  }
}
```

[nano stores]: https://github.com/nanostores/nanostores/

<a href="https://evilmartians.com/?utm_source=nanostores">
  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
       alt="Sponsored by Evil Martians" width="236" height="54">
</a>
npm package: @nanostores/deepmap
Description: A helper for Nanostores to create deep maps
Author: Edgar Sanchez
Latest version: 0.0.1

# Nano Stores DeepMap

<img align="right" width="64" height="64" title="Nano Stores logo"
src="https://nanostores.github.io/nanostores/logo.svg">

Deep maps extension for [Nano Stores](https://github.com/nanostores/nanostores) state manager.

## Install

```sh
npm install @nanostores/deep-map
```

## Usage

Import `deepMap` from this package instead of `nanostores` (which no longer has it).

Use `setKey` to create, replace, or delete any value at a specific path.

```ts
import { deepMap } from '@nanostores/deep-map'

type StoreProps = {
  user?: {
    name: string
    age: number
  }
  count?: number
}

const $store = deepMap<StoreProps>({
  user: {
    name: 'Luke',
    age: 19,
  }
  count: 0,
})

// Replaces the value at 'count'
$store.setKey('count', 1) // -> { ...restValues, count: 1 }

```
Use `updateKey` to merge new data into an existing object. If the target isn't an object, it will be replaced.

```ts
// 'updateKey' merges, keeping 'name' and only changing 'age'
$store.updateKey('user', { age: 42 })
// -> { user: { name: 'Luke', age: 42 }, ... }
```
To delete a property from an object or an item from an array, just set its path to `undefined`.

```ts
// Deletes 'count' from the store
$store.setKey('count', undefined)
// -> { user: { name: 'Luke', age: 42 } }
```
### Working with Arrays
DeepMap fully supports arrays as the root value or nested within your state. You can use standard array syntax [index] in your paths.

```ts
//Before
const $store = deepMap<storeProps[]>([{}]) // Type Error

//After
const $store = deepMap<storeProps[]>([{}]) // OK

```

### TypeScript Support

The package is written in TypeScript and provides autocomplete for all methods and properties.

```ts
// Define your type with 'type' keyword instead of 'interface'
// for better autocomplete
type UserType = {
  id?: string
}

const $userT = deepMap<UserType>({})

$userT.setKey('id', 'uuidString') // Suggestion autocomplete

```
Typescript automatically infers the type of the store value.

```ts
type StoreProps = {
  count?: number
}

const $store = deepMap<StoreProps>({})

$store.setKey('count', 'randomString')
// Type Error -> 'string' is not assignable to 'number'

// IMPORTANT: an empty path ('') is treated as the root object
$someStore.setKey('', 'randomString') // Replaces the entire store
```

## License

MIT

## Credits

  * [Nano stores](https://github.com/nanostores/nanostores), the original state manager.
npm package: @nanostores/i18n
Description: A tiny (≈600 bytes) i18n library for React/Preact/Vue/Svelte
Author: Andrey Sitnik
Latest version: 1.2.2

# Nano Stores I18n

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Tiny and flexible JS library to make your web application translatable.
Uses [Nano Stores] state manager and [JS Internationalization API].

* **Small.** Around 1 KB (minified and brotlied). Zero dependencies.
* Works with **React**, **Preact**, **Vue**, **Svelte**, and plain JS.
* Supports **tree-shaking** and translation **on-demand download**.
* **Plain flat JSON** translations compatible with
  online translation services like [Weblate].
* Out of the box **TypeScript** support for translations.
* **Flexible variable translations**. You can change translation,
  for instance, depends on screen size.

```tsx
// components/post.jsx
import { params, count } from '@nanostores/i18n' // You can use own functions
import { useStore } from '@nanostores/react'
import { i18n, format } from '../stores/i18n.js'

export const messages = i18n('post', {
  title: 'Post details',
  published: params('Was published at {at}'), // TypeScript will get `at` type
  comments: count({
    one: '{count} comment',
    many: '{count} comments'
  })
})

export const Post = ({ author, comments, publishedAt }) => {
  const t = useStore(messages)
  const { time } = useStore(format)
  return <article>
    <h1>{t.title}</h1>
    <p>{t.published({ at: time(publishedAt) })}</p>
    <p>{t.comments(comments.length)}</p>
  </article>
}
```

```ts
// stores/i18n.js
import { createI18n, localeFrom, browser, formatter } from '@nanostores/i18n'
import { persistentAtom } from '@nanostores/persistent'

export const setting = persistentAtom<string | undefined>('locale', undefined)

export const locale = localeFrom(
  setting,  // User’s locale from localStorage
  browser({ // or browser’s locale auto-detect
    available: ['en', 'fr', 'ru'],
    fallback: 'en'
  })
)

export const format = formatter(locale)

export const i18n = createI18n(locale, {
  get (code) {
    return fetchJSON(`/translations/${code}.json`)
  }
})
```

```js
// public/translations/ru.json
{
  "post": {
    "title": "Данные о публикации",
    "published": "Опубликован {at}",
    "comments": {
      "one": "{count} комментарий",
      "few": "{count} комментария",
      "many": "{count} комментариев",
    }
  },
  // Translations for all other components
}
```

[JS Internationalization API]: https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/
[Nano Stores]: https://github.com/nanostores/nanostores
[Weblate]: https://weblate.org/

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" />  Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-i18n&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Docs
Read full docs **[here](https://github.com/nanostores/i18n#readme)**.
npm package: @nanostores/lit
Description: Lit integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Author: Emil Bonne Kristiansen
Latest version: 0.2.3

# Nano Stores Lit

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

[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`<header>${profile.get().userId}</header>`;
  }
}
```

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`<header>${profile.get().userId}</header>`;
  }
}
```

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`<header>${this.profileController.value.userId}</header>`;
  }
}
```

[Nano Stores]: https://github.com/nanostores/nanostores/
npm package: @nanostores/logger
Description: Pretty logger of lifecycles, changes and actions for Nano Stores
Author: Eduard Aksamitov
Latest version: 1.1.0

# Nano Stores Logger

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Logger of lifecycles, changes and actions for **[Nano Stores]**,
a tiny state manager with many atomic tree-shakable stores.

* **Clean.** All messages are stacked in compact, collapsible nested groups.
* **Descriptive.** Detailed descriptions with a clear comparison of the old and new values.
* **Pretty designed.** Compact logo and color badges for quick reading.
* **Flexible.** Ability to disable and filter certain types of messages.
* **Supports all types of stores**: Atom, Map and Deep Map.

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

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="./img/dark.png">
    <source media="(prefers-color-scheme: light)" srcset="./img/light.png">
    <img alt="Nano Stores Logger" src="./img/light.png">
  </picture>
</p>


## Docs
Read full docs **[here](https://github.com/nanostores/logger#readme)**.
npm package: @nanostores/media-query
Description: A smart store for Nano Stores state manager to sync with some media query
Author: Andrey Sitnik
Latest version: 0.1.2

# Nano Stores Media Query

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

A smart store for [Nano Stores] state manager to sync with some media query.

* **Small.** from 84 bytes (minified and brotlied).
  Zero dependencies. It uses [Size Limit] to control size.
* It has good **TypeScript**.
* Framework agnostic. It supports SSR.

```ts
import { fromMediaQuery } from '@nanostores/media-query'

export const $isMobile = fromMediaQuery('(max-width: 600px)')
```

[Nano Stores]: https://github.com/nanostores/nanostores
[Size Limit]: https://github.com/ai/size-limit

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" />  Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-media-query&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Docs
Read full docs **[here](https://github.com/nanostores/media-query#readme)**.
npm package: @nanostores/persistent
Description: A store for Nano Stores state manager to keep data in localStorage
Author: Andrey Sitnik
Latest version: 1.3.3

# Nano Stores Persistent

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

A smart store for [Nano Stores] state manager to keep data in `localStorage`
and synchronize changes between browser tabs.

* **Small.** from 296 bytes (minified and brotlied).
  Zero dependencies. It uses [Size Limit] to control size.
* It has good **TypeScript**.
* Framework agnostic. It supports SSR.
  `localStorage` can be switched to another storage.

```ts
import { persistentAtom } from '@nanostores/persistent'

export const $locale = persistentAtom('locale', 'en')
```

[Nano Stores]: https://github.com/nanostores/nanostores
[Size Limit]: https://github.com/ai/size-limit

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" />  Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-persistent&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Docs
Read full docs **[here](https://github.com/nanostores/persistent#readme)**.
npm package: @nanostores/preact
Description: Preact integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Author: Andrey Sitnik
Latest version: 1.1.0

# Nano Stores Preact

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Preact 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.

```tsx
import { useStore } from '@nanostores/preact'

import { $profile } from '../stores/profile.js'

export const Header = () => {
  const profile = useStore($profile)
  return <header>{profile.name}</header>
}
```

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

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-preact&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Options

### Keys

Use the `keys` option to re-render only on specific key changes:

```tsx
export const Header = () => {
  const profile = useStore($profile, { keys: 'name' })
  return <header>{profile.name}</header>
}
```

### SSR

SSR could be very complicated in VDom. To avoid hydration errors you
need exactly the same stores state in the end of server HTML rendering
and during the first DOM render on the client.

For simple solution you can disable any store update on the server
by `ssr: 'initial'`:

```tsx
export const Header = () => {
  const profile = useStore($profile, { ssr: 'initial' })

  // Server render and client hydration use store's initial value.
  // After hydration, client re-renders with the current value.
  return <header>{profile.name}</header>
}
```

For advanced cases where you update store values on the server before SSR, and
need pages to hydrate with the updated value from the server, set a function
that returns the server state: `ssr: () => serverState`.

```tsx
// Value of store on server at time of SSR, passed to client somehow...
const profileFromServer = { name: 'A User' }

export const Header = () => {
  const profile = useStore($profile, {
    // On server, always use up-to-date store value (set `ssr` to `false`).
    // On client, set server value to avoid error on hydration.
    ssr: typeof window === 'object' && (() => profileFromServer)
  })

  // Server render uses store's current value. Client uses value from function
  // for hydration, then after hydration re-renders with the current value.
  return <header>{profile.name}</header>
}
```
npm package: @nanostores/react
Description: React integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Author: Andrey Sitnik
Latest version: 1.1.0

# Nano Stores React

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

React 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.

```tsx
import { useStore } from '@nanostores/react'
import { $profile } from '../stores/profile.js'

export const Header = ({ postId }) => {
  const profile = useStore($profile)
  return <header>Hi, {profile.name}</header>
}
```

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

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-react&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---


## Options

### Keys

Use the `keys` option to re-render only on specific key changes:

```tsx
export const Header = () => {
  const profile = useStore($profile, { keys: 'name' })
  return <header>{profile.name}</header>
}
```

### SSR

SSR could be very complicated in React. To avoid hydration errors you
need exactly the same stores state in the end of server HTML rendering
and during the first DOM render on the client.

For simple solution you can disable any store update on the server
by `ssr: 'initial'`:

```tsx
export const Header = () => {
  const profile = useStore($profile, { ssr: 'initial' })
  // Hydrate with initial profile, then render latest client-side value
  return <header>{profile.name}</header>
}
```

For advanced cases where you update store values on the server before SSR, and need pages to hydrate with the updated value from the server, set a function that returns the server state: `ssr: () => serverState`.

```tsx
// Value of store on server at time of SSR, passed to client somehow...
const profileFromServer = { name: 'A User' }

export const Header = () => {
  const profile = useStore($profile, {
    ssr:
      typeof window === 'undefined'
        ? // On server, always use up-to-date store value (no SSR handling)
          false
        : // On client, set server value to avoid error on hydration
          () => profileFromServer
  })
  // Hydrate with profile at time of SSR, then render latest client-side value
  return <header>{profile.name}</header>
}
```

A function set on `ssr` is provided to React's [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore)
as the `getServerSnapshot` option.
npm package: @nanostores/router
Description: A tiny (712 bytes) router for Nano Stores state manager
Author: Andrey Sitnik
Latest version: 1.0.0

# Nano Stores Router

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

A tiny URL router for [Nano Stores](https://github.com/nanostores/nanostores)
state manager.

- **Small.** 712 bytes (minified and brotlied). Zero dependencies.
- Good **TypeScript** support.
- Framework agnostic. Can be used with **React**, **Preact**, **Vue**,
  **Svelte**, **Angular**, **Solid.js**, and vanilla JS.

Since Nano Stores promote moving logic to store, the router is a store,
not a component in UI framework like React.

```ts
// stores/router.ts
import { createRouter } from '@nanostores/router'

export const $router = createRouter({
  home: '/',
  list: '/posts/:category',
  post: '/posts/:category/:post'
})
```

Store in active mode listen for `<a>` clicks on `document.body` and Back button
in browser.

```tsx
// components/layout.tsx
import { useStore } from '@nanostores/react'

import { $router } from '../stores/router.js'

export const Layout = () => {
  const page = useStore($router)

  if (!page) {
    return <Error404 />
  } else if (page.route === 'home') {
    return <HomePage />
  } else if (page.route === 'list') {
    return <ListPage category={page.params.category} filters={page.search} />
  } else if (page.route === 'post') {
    return <PostPage post={page.params.post} />
  }
}
```

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" />  Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-router&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Docs
Read full docs **[here](https://github.com/nanostores/router#readme)**.
npm package: @nanostores/solid
Description: Solid integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores.
Author: Robert Soriano
Latest version: 1.1.1

# Nano Store Solid

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Solid 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.

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

## Installation

```bash
npm install nanostores @nanostores/solid
```

## Usage:

```ts
// store.ts
import { atom } from 'nanostores';

export const $counter = atom(0);

export const increase = () => {
  $counter.set($counter.get() + 1);
}
```

```tsx
import { useStore } from '@nanostores/solid';
import { $counter, increase } from './store';

function Counter() {
  const count = useStore($counter);
  return <h1>{count()} around here ...</h1>;
}

function Controls() {
  return <button onClick={increase}>one up</button>;
}
```

## License

MIT
npm package: @nanostores/sql
Description: Nano Stores wrapper around SQLite or PGLite to generate reactive stores from SQL queries
Author: Andrey Sitnik
Latest version: 0.1.0

# Nano Stores SQL

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

[Nano Stores] wrapper around SQLite or PGLite to generate reactive stores
from SQL queries. This wrapper us useful if you moved logic from UI components
to smart stores.

- Support multiple databases drivers: **SQLocal, Expo, PGLite**,
  or your **custom** driver.
- Can be used in **browser** with OPFS ot with **React Native**.
- Can be used with **Drizzle** to have type-safe query generation
  or with plain SQL strings to be very **small in JS bundle**.

```ts
import { openDb } from '@nanostores/sql'
// Or import { expoDriver } from '@nanostores/sql/expo'
import { sqlocalDriver } from '@nanostores/sql/sqlocal'

const db = openDb(sqlocalDriver('app.sqlite'))

const User = ({ name }) => {
  const $users = db.store<User>
    `SELECT * FROM users WHERE name LIKE '%${name}%'`
  // or const $users = db.store(drizzleDb.select().from(usersTable)
  //   .where(like(usersTable.name, `%${name}%`)))
  const users = useStore($users)
  if (users.isLoading) {
    return <Loader>
  } else {
    return users.list.map(user => <User>{user.name}</User>)
  }
}
```

[Nano Stores]: https://github.com/nanostores/nanostores
[Size Limit]: https://github.com/ai/size-limit

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-sql&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Docs
Read full docs **[here](https://github.com/nanostores/sql#readme)**.
npm package: @nanostores/vue
Description: Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Author: Eduard Aksamitov
Latest version: 1.1.0

# Nano Stores Vue

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Vue integration for **[Nano Stores]**, a tiny state manager
with many atomic tree-shakable stores.

* **Small.** Less than 1 KB with all helpers. 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.
* **Helpers.** Designed to keep code clean and save a few keystrokes.
* **Devtools.** Plugin with full support of [Vue Devtools].
* Was designed to move logic from components to stores.
* It has good **TypeScript** support.


## Docs
Read full docs **[here](https://github.com/nanostores/vue#readme)**.
npm package: @nanoweb/jsx
Description: nanoweb is a minimal library for building server-centric multi page web applications that behave like SPAs.
Author: Thomas Bonk
Latest version: 0.0.26

# nanoweb


nanoweb is a minimal library for building server-centric multi page web applications that behave like SPAs.

- **HTML-over-the-wire**: Merges HTML responses instead of replacing the complete page.
- **Based on standards**: Doesn't reinvent the wheel. It uses [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
- **Minimal**: Currently 560 LOC and the API consists of **only 5 functions**.
- **Component-based**: Build encapsulated components, then compose them to make complex UIs.

nanoweb's ideas can be freely combined with other server-centric frameworks while avoiding a technology lock-in, which makes it a perfect fit for [micro-frontends](https://martinfowler.com/articles/micro-frontends.html).

Check out the full documentation at: [https://nanoweb.js.org/](https://nanoweb.js.org/)