bonsify v0.5.3

Bonsify

Patterns for well-structured, artfully maintained components and state management.

Building an application is about wielding UI complexity and state complexity. React is a fantastic tool to manage UI complexity, but comes short as state complexity increases. Bonsify is a set of patterns that helps you manage component and state complexity. It does this by grounding you in a core constructor pattern you can apply to both components and state management.

Complex state management is proven to be best solved by using a reactive primitives. To start using the Bonsify patterns for state management you need to choose a reactive primitive that components can observe. Bonsify provides its own reactive primitive, but you can can choose observable from Mobx, reactive from Vue Reactivity or whatever other reactive primitive you have experience with.

Go to patterns to learn more or set up your reactive primitives first:

Bonsify

npm install bonsify

Automatic observation in components using observing-components.

import babelPlugin from "bonsify/babel-plugin";
import swcPlugin from "bonsify/swc-plugin";

Mobx

mobx - mobx-react-observer

npm install mobx mobx-react-observer

import babelPlugin from "mobx-react-observer/babel-plugin";
import swcPlugin from "mobx-react-observer/swc-plugin";

Vue Reactivity

@vue/reactivity - vue-reactivity-react-observer

npm install @vue/reactivity vue-reactivity-react-observer

import babelPlugin from "vue-reactivity-react-observer/babel-plugin";
import swcPlugin from "vue-reactivity-react-observer/swc-plugin";

Preact Signals

@preact/signals - @preact/signals-react-transform

npm install @preact/signals @preact/signals-react-transform

// babel.config.js
module.exports = {
  plugins: [["module:@preact/signals-react-transform"]],
};