@nanostores/solid

Nano Store Solid

Solid 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.
• Was designed to move logic from components to stores.
• It has good TypeScript support.

Quick start

Install it:

pnpm add nanostores @nanostores/solid # or npm or yarn

Use it:

// store.ts
import { action, atom, computed } from 'nanostores';

export const bearStore = atom({ value: 0 });

export const increase = action(bearStore, 'increase', (store) => {
  store.set({ value: store.get().value + 1 });
});

// Use computed stores to create chains of reactive computations.
export const doubled = computed(bearStore, current =>
  current.count * 2,
);

import { useStore } from '@nanostores/solid';
import { bearStore, increase } from './store';

function BearCounter() {
  const count = useStore(bearStore);
  return <h1>{count().value} around here ...</h1>;
}

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

Server-Side Rendering

Nano Stores support SSR. Use standard strategies.

import { isServer } from 'solid-js/web';

if (isServer) {
  settings.set(initialSettings);
  router.open(renderingPageURL);
}

You can wait for async operations (for instance, data loading via isomorphic fetch()) before rendering the page:

import { renderToString } from 'solid-js/web';
import { allTasks } from 'nanostores';

post.listen(() => {}); // Move store to active mode to start data loading
await allTasks();

const html = renderToString(<App />);

Usage with @nanostores/router

import { createRouter } from '@nanostores/router';
import { useStore } from '@nanostores/solid';
import { Match, Suspense, Switch, lazy } from 'solid-js';

export const routerStore = createRouter({
  home: '/',
  post: '/posts/:postId',
  comment: '/posts/:postId/comments/:commentId',
});

const Home = lazy(() => import('./pages/Home'));
const Post = lazy(() => import('./pages/Post'));
const Comment = lazy(() => import('./pages/Comment'));
const NotFound = lazy(() => import('./pages/NotFound'));

export const Router = () => {
  const page = useStore(routerStore);

  return (
    <Switch fallback={<NotFound />}>
      <Match when={page().route === 'home'}>
        <Home />
      </Match>
      <Match when={page().route === 'post'}>
        <Post postId={page().params.postId} />
      </Match>
      <Match when={page().route === 'comment'}>
        <Comment postId={page().params.postId} commentId={page().params.commentId} />
      </Match>
    </Switch>
  );
};

License

MIT