[email protected]

Patch Changes

• 2788c2c: add reducer plugin

type Increment = { type: 'increment'; payload: number };
type Decrement = { type: 'decrement'; payload: number };
type AppActions = Increment | Decrement;

function appReducer(state: number, action: AppActions) {
  switch (action.type) {
    case 'increment':
      return state + action.payload;
    case 'decrement':
      return state - action.payload;
    default:
      return state;
  }
}

const $count = defineSignal(() => 1)
  .extend(withReducer(appReducer));

const count = provideState($count);

count.dispatch({ type: 'increment', payload: 1 });

[email protected]

With this new version of statebuilder you can declare the dependencies that your plugin needs. This is the point where registering name of the plugins become important, because you can reference plugin dependencies by their name;

import { makePlugin } from "statebuilder";

const plugin = makePlugin(() => ({}), {
  name: "plugin",
  dependencies: ["actionsPlugin"]
});

Note While providing the state, if a plugin dependency cannot be resolved an error will be throwned

What's Changed

• feat: add plugin explicit dependency support by @riccardoperra in #4

Full Changelog: https://github.com/riccardoperra/statebuilder/compare/[email protected]@0.2.2

[email protected]

Redux Devtools support

With this new version of statebuilder it's available a new plugin to integrate redux devtools.

import {defineSignal} from 'statesolid';
import {withReduxDevtools} from 'statesolid/devtools';

const state = defineSignal(() => 0).extend(
  withReduxDevtools({storeName: 'count-state'})
)

What's Changed

• feat: add devtools plugin (beta) by @riccardoperra in #3

Full Changelog: https://github.com/riccardoperra/statebuilder/commits/[email protected]

[email protected]

This version refactor the core to be state agnostic and integrates a simple plugin system

Creating signals

A new primitive has been added: defineSignal based on the createSignal solid-js API.

import {defineSignal, provideState} from 'statesolid';

const config = defineSignal(() => 0)
  .extend(ctx => ({
    increment: () => ctx.set(prev => prev + 1)
  });

const count = provideState(config);

count(); // 0;

count.set(1);

Creating custom stores

By making the core agnostic, it is possible to define also custom states with the create api.

import {create} from 'statesolid';
import {Setter, createSignal} from 'solid-js';

function factory<T>(initialValue: T, name: string) {
  const [state, setState] = createSignal<T>(initialValue);

  const set: Setter<T> = (value) => {
    setState(value);
    localStorage.set(name, state());
  }

  return Object.assign(state, {
    set
  });
}

const createLocalStorageSignal = create('signal-with-local-storage', factory);

const config = createLocalStorageSignal(0);

Creating custom plugins

import {createEffect} from 'solid-js';
import {makePlugin, defineSignal} from 'statesolid';

export function withEffectOnStateChange<T>(cb: (state: T) => void) {
  return makePlugin(
    (state) => {
      createEffect(() => cb(state()));
    },
    {
      name: 'withCallbackOnStateChange',
    },
  );
}

const state = defineSignal(() => 0).extend(
  withEffectOnStateChange((state) => console.log(state)),
);

Creating plugin is now easier thanks to the makePlugin helper

What's Changed

• feat: refactor core to be agnostic by @riccardoperra in #1
• feat: add plugin systems by @riccardoperra in #2

Full Changelog: https://github.com/riccardoperra/statesolid/commits/[email protected]