{ticker.count}
-) -``` -[Try wrapped version on CodeSandbox](https://codesandbox.io/s/realar-ticker-classes-c9819?file=/src/App.tsx) -Realar **targeted to** all scale applications up to complex enterprise solutions on micro apps architecture. +[](https://www.npmjs.com/package/realar) [](https://bundlephobia.com/result?p=realar) [](https://coveralls.io/github/betula/realar) [](./src/index.ts) -You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough:ok_hand: Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with micro apps composition. +State manager to reduce developers' coding time and increase the lifetime of your codebase. -- __Decorators for clasess lovers__. And babel plugin for automatic wrap all arrow functions defined in the global scope with JSX inside to observe wrapper for the total implementation of transparent functional reactive programming (TFRP) in javascript with React. +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 to the class outside. Your React component will be pure from any unnecessary code, only view, only JSX, no more. +- __Logic free React components__. Perfect instruments for moving all component logic outside. Your React component will be pure from any unnecessary code, only view, only JSX, no more. -- __Shared stateful logic decomposition__. The pattern for decomposing applications logic to separate independent or one direction dependent modules. Each module can have its own set of reactive values. (ssr, comfort “mock” mechanism for simple unit testing). Shared stateful logic is a single instantiated class with total accessibility from all parts of your application. In another terminology - services. +- __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. -- __Lightweight and Fast__. Really light ~3kB. And only those components are updated in which it 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. -- __React component context level scopes__. Declaration one scope and use as many reactive values as you want without the need to define a new React context for each changeable value. +- __Modular Architecture__. Possibilities for the implementation of three levels of logic availability. + - Shared stateful logic pattern (known as "service") for decomposing applications logic to separate independent or one direction dependent modules with global accessibility. + - Declaration one scope and use as many reactive values as you want without the need to define a new React context for each changeable value with context level accessibility. + - And enjoy clean React components with local logic decomposition. -- __Signals__ are a necessary part of reactive communication, well knows for most javascript developers as actions or events. In Realar that possibility provides through signal abstraction. Possibility for subscribing to signal, call signal and wait for the next signal value everywhere on the codebase. And for a tasty, reading the last called value from a signal. +- __Decorators for clasess lovers__. Support OOP as one of the primary syntax. The implementation of transparent functional reactive programming (TFRP) with React (looks similar to Mobx). And the babel plugin for automatic wrap all arrow functions defined in the global scope with JSX inside to observe wrapper. ### Usage -It looks likes very clear and natively, and you can start development knows only two functions. - -`prop`. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh. - -`shared`. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code. +The start piece of code with basic operations of reactive value and signals ```javascript -import React from 'react'; -import { prop, shared } from 'realar'; - -class Counter { - @prop value = 0; - - inc = () => this.value += 1; - dec = () => this.value -= 1; -} - -const sharedCounter = () => shared(Counter); - -const Count = () => { - const { value } = sharedCounter(); - return{value}
; -}; - -const Buttons = () => { - const { inc, dec } = sharedCounter(); - return ( - <> - - - - ); -}; - -const App = () => ( - <> -{value}
- ); -} +// Watch updating +store.to((state) => console.log(state)) -export const App = () => ( - <> -{value}
- ); -} - -export const App = () => ( -{value}
- ) +Transparent functional reactive programming with classes, decorators and [babel jsx wrapper](https://github.com/betula/babel-plugin-realar) + +```javascript +class Ticker { + @prop count = 0 + tick = () => ++this.count; } + +const ticker = new Ticker(); +setInterval(ticker.tick, 200); + +const App = () => ( +{ticker.count}
+) ``` -[Try on CodeSandbox](https://codesandbox.io/s/realar-ticker-functional-6s3mx?file=/src/App.tsx) +[Try wrapped version on CodeSandbox](https://codesandbox.io/s/realar-ticker-classes-c9819?file=/src/App.tsx) + +It looks likes very clear and natively, and you can start development knows only two functions. + +`prop`. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh. + +`shared`. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code. ```javascript -import React from "react"; -import { value, useValue } from "realar"; +import React from 'react'; +import { prop, shared } from 'realar'; -const [get, set] = value(0); +class Counter { + @prop value = 0; -const next = () => get() + 1; + inc = () => this.value += 1; + dec = () => this.value -= 1; +} -const inc = () => set(next()); -const dec = () => set(get() - 1); +const sharedCounter = () => shared(Counter); -const Current = () => { - const value = useValue(get); - returncurrent: {value}
; +const Count = () => { + const { value } = sharedCounter(); + return{value}
; }; -const Next = () => { - const value = useValue(next); - returnnext: {value}
; +const Buttons = () => { + const { inc, dec } = sharedCounter(); + return ( + <> + + + + ); }; const App = () => ( <> -{value}
+ ); +} -store.update(state => ({ - ...state, - address: { - city: 'LA' - } -})); -// We can see reaction on deleveloper console output with new address selector value +export const App = () => ( + <> +{value}
+ ); } -``` -**cycle** - -```javascript -const [get, set] = value(0); - -cycle(() => { - console.log(get() + 1); -}); - -set(1); -set(2); - -// In output of developer console will be 1, 2 and 3. +export const App = () => ( +], deps?: any[]): [A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P];
+