Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
realar - npm Package Compare versions
Comparing version 0.4.29 to 0.4.30
| { | ||
| "name": "realar", | ||
| "version": "0.4.29", | ||
| "version": "0.4.30", | ||
| "description": "React state manager", | ||
@@ -88,3 +88,3 @@ "repository": { | ||
| }, | ||
| "gitHead": "c35e46a34e77c2334de5fb295b425ffaf10d7bae" | ||
| "gitHead": "7c9e712659544f676aa1d32aa593cbd94148e00e" | ||
| } |
244
README.md
@@ -5,3 +5,3 @@ # Realar | ||
| **Multiparadigm** state manager for React based on [reactive mathematic](https://github.com/betula/reactive-box). | ||
| Object oriented state manager for React based on [reactive mathematic](https://github.com/betula/reactive-box). | ||
@@ -12,24 +12,5 @@ [Light](https://bundlephobia.com/result?p=realar), [Fast](https://github.com/betula/reactive-box-performance), and Pretty looked :kissing_heart: | ||
| Supported **two kinds** of data and logic definitions. | ||
| Ttransparent functional reactive programming with classes, decorators and [babel jsx wrapper](https://github.com/betula/babel-plugin-realar) | ||
| - Plain functional reactive programming with only functions | ||
| ```javascript | ||
| const [getCount, set] = box(0); | ||
| const tick = () => set(getCount() + 1); | ||
| setInterval(tick, 200); | ||
| const App = () => { | ||
| const count = useValue(getCount); | ||
| return ( | ||
| <p>{count}</p> | ||
| ) | ||
| } | ||
| ``` | ||
| [Try on CodeSandbox](https://codesandbox.io/s/realar-ticker-functional-6s3mx?file=/src/App.tsx) | ||
| - And transparent functional reactive programming with classes, decorators and [jsx wrapper](https://github.com/betula/babel-plugin-realar) | ||
| ```javascript | ||
| class Ticker { | ||
@@ -51,61 +32,21 @@ @prop count = 0 | ||
| 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 apps composition. | ||
| 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. | ||
| ### Abstraction | ||
| - __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. | ||
| The abstraction of the core is an implementation of functional reactive programming on javascript and binding that with React. | ||
| - __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. | ||
| It uses usual mathematic to describe dependencies and commutation between reactive values. | ||
| - __Shared instances 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. (logic isolation, ssr, comfort “mock” mechanism for simple unit testing) | ||
| In contradistinction to _stream pattern_, operator functions not needed. The reactive “sum” operator used a simple “+” operator (for example). | ||
| - __Lightweight and Fast__. Really light ~ 2kb. And only those components are updated in which it is really necessary to make changes and only they. | ||
| ```javascript | ||
| const [getA, setA] = box(0) | ||
| const [getB, setB] = box(0) | ||
| const sum = () => getA() + getB() | ||
| on(sum, console.log) | ||
| ``` | ||
| That code has a graph of dependencies inside. “sum” - reactive expression depends from “A” and “B”, and will react if “A” or “B” changed. It is perfectly demonstrated with “on” function (that subscribes to reactive expression) and “console.log” (developer console output). | ||
| On each change of “A” or “B” a new value of that sum will appear in the developer console output. | ||
| And for tasty easy binding reactive expressions and values with React components. | ||
| ```javascript | ||
| const App = () => { | ||
| const val = useValue(sum); | ||
| return ( | ||
| <p>{val}</p> | ||
| ); | ||
| } | ||
| ``` | ||
| That component will be updated every time when new sum value is coming. | ||
| The difference from exists an implementation of functional reactive programming (mobx) in Realar dependency collector provides the possibility to write in selectors and nested writable reactions. | ||
| Realar provides big possibility abstractions for reactive flow. We already know about reactive value container, reactive expressions, and subscribe mechanism. But also have synchronization between data, cycled reactions, cached selectors, and transactions. | ||
| **Below I will talk about high level abstractions** provided from Realar out of the box. | ||
| - __Shared instances 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) | ||
| - __Actions__ are a necessary part of reactive communication, well knows for most javascript developers. Possibility for subscribing to action, call action, and wait for the next action value everywhere on the code base. | ||
| - __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. | ||
| - __React components context level scopes__. Declaration one scope and use as many reactive value containers as you want no need to define a new React context for each changeable value. | ||
| ### Usage | ||
| - __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. | ||
| It looks likes very clear and natively, and you can start development knows only two functions. | ||
| ### Classes usage | ||
| If you don't have an interest in classes or decorators, you can code in [functional style](#functional-usage) with a wide and full feature API. | ||
| But if you like, 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. | ||
@@ -159,39 +100,2 @@ | ||
| ### Functional usage | ||
| ```javascript | ||
| import React from "react"; | ||
| import { box, useValue } from "realar"; | ||
| const [get, set] = box(0); | ||
| const next = () => get() + 1; | ||
| const inc = () => set(next()); | ||
| const dec = () => set(get() - 1); | ||
| const Current = () => { | ||
| const value = useValue(get); | ||
| return <p>current: {value}</p>; | ||
| }; | ||
| const Next = () => { | ||
| const value = useValue(next); | ||
| return <p>next: {value}</p>; | ||
| }; | ||
| const App = () => ( | ||
| <> | ||
| <Current /> | ||
| <Next /> | ||
| <button onClick={inc}>+</button> | ||
| <button onClick={dec}>-</button> | ||
| </> | ||
| ); | ||
| export default App; | ||
| ``` | ||
| [Try on CodeSandbox](https://codesandbox.io/s/realar-pure-counter-1ue4h?file=/src/App.tsx). | ||
| ### Actions | ||
@@ -238,11 +142,5 @@ | ||
| ```javascript | ||
| const CounterLogic = () => { | ||
| const [get, set] = box(0); | ||
| const inc = () => set(get() + 1); | ||
| return sel(() => ({ | ||
| value: get(), | ||
| inc | ||
| })); | ||
| class CounterLogic { | ||
| @prop value = 0; | ||
| inc = () => this.value += 1 | ||
| } | ||
@@ -265,26 +163,114 @@ | ||
| ``` | ||
| [Play on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-functional-5pjdy?file=/src/App.tsx) | ||
| [Play wrapped on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-classes-m0i10?file=/src/App.tsx) | ||
| Or If you coding in classes style: | ||
| This feature can be useful for removing logic from the body of a component to keep that free of unnecessary code, and therefore cleaner. | ||
| Or If you coding in low level style: | ||
| ```javascript | ||
| class CounterLogic { | ||
| @prop value = 0; | ||
| inc = () => this.value += 1 | ||
| const CounterLogic = () => { | ||
| const [get, set] = box(0); | ||
| const inc = () => set(get() + 1); | ||
| return sel(() => ({ | ||
| value: get(), | ||
| inc | ||
| })); | ||
| } | ||
| ``` | ||
| [Play on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-functional-5pjdy?file=/src/App.tsx) | ||
| const Counter = () => { | ||
| const { value, inc } = useLocal(CounterLogic); | ||
| ### Core | ||
| The abstraction of the core is an implementation of functional reactive programming on javascript and binding that with React. | ||
| It uses usual mathematic to describe dependencies and commutation between reactive values. | ||
| In contradistinction to _stream pattern_, operator functions not needed. The reactive “sum” operator used a simple “+” operator (for example). | ||
| ```javascript | ||
| const [getA, setA] = box(0) | ||
| const [getB, setB] = box(0) | ||
| const sum = () => getA() + getB() | ||
| on(sum, console.log) | ||
| ``` | ||
| That code has a graph of dependencies inside. “sum” - reactive expression depends from “A” and “B”, and will react if “A” or “B” changed. It is perfectly demonstrated with “on” function (that subscribes to reactive expression) and “console.log” (developer console output). | ||
| On each change of “A” or “B” a new value of that sum will appear in the developer console output. | ||
| And for tasty easy binding reactive expressions and values with React components. | ||
| ```javascript | ||
| const App = () => { | ||
| const val = useValue(sum); | ||
| return ( | ||
| <p>{value} <button onClick={inc}>+</button></p> | ||
| <p>{val}</p> | ||
| ); | ||
| } | ||
| ``` | ||
| [Play wrapped on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-classes-m0i10?file=/src/App.tsx) | ||
| This feature can be useful for removing logic from the body of a component to keep that free of unnecessary code, and therefore cleaner. | ||
| That component will be updated every time when new sum value is coming. | ||
| ### Documentation | ||
| The difference from exists an implementation of functional reactive programming (mobx) in Realar dependency collector provides the possibility to write in selectors and nested writable reactions. | ||
| Realar provides big possibility abstractions for reactive flow. We already know about reactive value container, reactive expressions, and subscribe mechanism. But also have synchronization between data, cycled reactions, cached selectors, and transactions. | ||
| ### Low level usage | ||
| ```javascript | ||
| const [getCount, set] = box(0); | ||
| const tick = () => set(getCount() + 1); | ||
| setInterval(tick, 200); | ||
| const App = () => { | ||
| const count = useValue(getCount); | ||
| return ( | ||
| <p>{count}</p> | ||
| ) | ||
| } | ||
| ``` | ||
| [Try on CodeSandbox](https://codesandbox.io/s/realar-ticker-functional-6s3mx?file=/src/App.tsx) | ||
| ```javascript | ||
| import React from "react"; | ||
| import { box, useValue } from "realar"; | ||
| const [get, set] = box(0); | ||
| const next = () => get() + 1; | ||
| const inc = () => set(next()); | ||
| const dec = () => set(get() - 1); | ||
| const Current = () => { | ||
| const value = useValue(get); | ||
| return <p>current: {value}</p>; | ||
| }; | ||
| const Next = () => { | ||
| const value = useValue(next); | ||
| return <p>next: {value}</p>; | ||
| }; | ||
| const App = () => ( | ||
| <> | ||
| <Current /> | ||
| <Next /> | ||
| <button onClick={inc}>+</button> | ||
| <button onClick={dec}>-</button> | ||
| </> | ||
| ); | ||
| export default App; | ||
| ``` | ||
| [Try on CodeSandbox](https://codesandbox.io/s/realar-pure-counter-1ue4h?file=/src/App.tsx). | ||
| ### API | ||
| **box** | ||
@@ -380,2 +366,8 @@ | ||
| ### Articles | ||
| + [Multiparadigm state manager for React by ~2 kB.](https://dev.to/betula/multiparadigm-state-manager-for-react-by-2-kb-4kh1) | ||
| + [The light decision for React state 👋](https://dev.to/betula/new-minimalistic-react-state-manager-3o39) | ||
| ### Installation | ||
@@ -382,0 +374,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.19%
43792
Worsened metrics
- Number of lines in readme file
- decreased by-1.99%
394
No dependency changes