Realar

Realar state manager targeted to all scale applications up to complex enterprise solutions on a modular architecture. And has an incredible small size 5 kB for all you need.

Usage

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

const store = value(0)

const add = store.updater((state, num: number) => 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: ChangeEvent<HTMLInputElement>) => 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 double = value.from(() => counter.state)
  .map(num => num * 2)

export const App = observe(() => (
  <p>
    {double.val}
    <button onClick={counter.inc}>+</button>
  </p>
))

Features

• 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 two levels of logic availability. Shared stateful is available for any part of your app. 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.
• Already in production on the Card of the Day React Native app :+1:

Documentation

• Get started
• Classes usage
• Core
• Examples
  • Simple form
  • Basic usage
• API
  • Declarative framework
  • value
  • signal
  • Imperative framework
  • on
  • 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
  • React bindings
  • observe
  • useValue
  • useValues
  • useShared
  • useLocal
  • useJsx

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.

Demos

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

In Production

• Card of the Day - React Native mobile app.

Articles

• State manager of dream - the reason for the creation of Realar.

Sponsor

I’m looking for a sponsor because my hands have already been burning from continuing development non-stop! I want to make a beautiful form framework and a streams framework for nodes, with core on Realar. I would like to start recording teaching videos about all actual questions on the modern frontend field. And I dream of writing an open book. If you know any methods for searching sponsors, or if some of your friends know something, I urge you to tell me mail@betula.co. It will be your great contribution to make a better world!

Enjoy and happy coding!