realar

Realar

The state manager to reduce developers' coding time and increase the lifetime of your codebase.

Realar targeted to all scale applications up to complex enterprise solutions on modular architecture.

• Logic free React components. Perfect instruments for moving all component logic outside. Your React component will be clean from any unnecessary code, only view, only JSX, no more.
• Lightweight and Fast. Less then 5kB. Aims at the smallest size of the resulting bundle. And only parts are updated in which is really necessary to make changes.
• Value and Signal is the big elephants remind Store and Action from Redux. Allows you to perform familiar coding techniques, and also add many modern features.
• Declarative and Imperative both supported.
• Stream event and value programming.
• Modular Architecture. Possibilities for the implementation of three levels of logic availability. Shared stateful is available for any part of your app. Scoped logic decomposition for React component context visibility. And React component local logic.
• Decorators for classes lovers. Support OOP as one of the primary syntaxes. The implementation of transparent functional reactive programming (TFRP) with React (looks similar to Mobx). And the babel plugin for automatic wrap all arrow JSX functions for the best clean code.

Usage

You can make stores and "actions" ^{play on runkit}

const store = value(0)

const add = store.updater((state, num) => state + num)
const inc = store.updater(state => state + 1)

And bind to React easily ^{play on codesandbox}

const App = () => {
  const state = useValue(store)

  return <p>{state}
    <button onClick={inc}>+</button>
  </p>
}

You can make streams ^{play on runkit}

const addendum = value('0').pre(ev => ev.target.value)
const sum = signal()
  .map(() => +addendum.val)
  .filter()
  .to(add)

And bind to React ^{play on codesandbox}

const App = () => {
  const addendumState = useValue(addendum)

  return <p>
    <input value={addendumState} onChange={addendum} />
    <button onClick={sum}>sum</button>
  </p>
}

You can use classes with decorators

class Counter {
  @prop state = 0

  add = (num) => this.state += num
  inc = () => this.add(1)
}

And bind to React ^{play on codesandbox}

const App = observe(() => {
  const { state, inc } = useLocal(Counter)

  return <p>{state}
    <button onClick={inc}>+</button>
  </p>
})

And you can use it together ^{play on codesandbox}

const counter = new Counter()
const store = value.from(() => counter.state)

const App = () => {
  const state = useValue(() => store.val)

  return <p>{state}
    <button onClick={counter.inc}>+</button>
  </p>
}

Documentation

• Get started
• Classes usage
• Core
• Examples
  • Simple form
  • Basic usage
• API
  • Declarative framework
    • value
    • signal
  • Imperative framework
    • on
    • on.once
    • sync
    • cycle
  • Class decorators for TRFP
    • prop
    • cache
  • Shared technique
    • shared
    • initial
    • free
    • mock
    • unmock
  • Unsubscribe scopes control
    • un
    • isolate
  • Async api
    • pool
  • Track and transactions
    • transaction
    • untrack
    • untrack.func
  • React bindings
    • observe
    • observe.nomemo
    • useValue
    • useValues
    • useShared
    • useLocal
    • Scope, useScoped
    • useJsx

Demos

• Hello - shared state demonstration.
• Todos - todomvc implementation.
• Jest - unit test example.

In Production

• Card of the Day - React Native mobile app.

Articles

• Multiparadigm state manager for React by ~2 kB.
• The light decision for React state 👋

Installation

npm install realar
# or
yarn add realar

• If you prefer classes with decorators update your babel config for support.
• And configure babel jsx wrapper for automatic observation arrow function components if you want to use it.

Enjoy and happy coding!