feat: migrate from reactive-box syntax to more oop

README.md

@@ -158,11 +158,11 @@ The `action` allows you to trigger an event and delivers the functionality to su
 ```javascript
 const add = action();
 
-const [get, set] = box(1);
-on(add, num => set(get() + num));
+const store = value(1);
+on(add, num => store.val += num);
 
 add(15);
-console.log(get()); // 16
+console.log(store.val); // 16
 ```
 [Edit on RunKit](https://runkit.com/betula/6013af7649e8720019c9cf2a)
 
@@ -192,10 +192,10 @@ It uses usual mathematic to describe dependencies and commutation between reacti
 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 a = value(0)
+const b = value(0)
 
-const sum = () => getA() + getB()
+const sum = () => a.val + b.val
 
 on(sum, console.log)
 ```
@@ -224,13 +224,13 @@ Realar provides big possibility abstractions for reactive flow. We already know
 ### Low level usage
 
 ```javascript
-const [getCount, set] = box(0);
+const count = value(0);
 
-const tick = () => set(getCount() + 1);
+const tick = () => count.val++;
 setInterval(tick, 200);
 
 const App = () => {
-  const count = useValue(getCount);
+  const count = useValue(count);
   return (
     <p>{count}</p>
   )
@@ -240,9 +240,9 @@ const App = () => {
 
 ```javascript
 import React from "react";
-import { box, useValue } from "realar";
+import { value, useValue } from "realar";
 
-const [get, set] = box(0);
+const [get, set] = value(0);
 
 const next = () => get() + 1;
 
@@ -275,19 +275,19 @@ export default App;
 
 ### API
 
-**box**
+**value**
 
-The first abstraction of Realar is reactive container - `box`.
-The `box` is a place where your store some data as an immutable struct.
-When you change box value (rewrite to a new immutable struct) all who depend on It will be updated synchronously.
+The first abstraction of Realar is reactive container - `value`.
+The `value` is a place where your store some data as an immutable struct.
+When you change value (rewrite to a new immutable struct) all who depend on It will be updated synchronously.
 
-For create new box we need `box` function from `realar`, and initial value that will store in reactive container.
-The call of `box` function returns array of two functions.
+For create new value we need `value` function from `realar`, and initial value that will store in reactive container.
+The call of `value` function returns array of two functions.
 - The first is value getter.
 - The second one is necessary for save new value to reactive container.
 
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
 set(get() + 1);
 
@@ -296,21 +296,21 @@ console.log(get()); // 1
 [Edit on RunKit](https://runkit.com/betula/6013af7649e8720019c9cf2a)
 
 In that example
-- for a first we created `box` container for number with initial zero;
-- After that, we got the box value, and set to box its value plus one;
+- for a first we created `value` container for number with initial zero;
+- After that, we got the value, and set to its value plus one;
 - Let's print the result to the developer console, that will is one.
 
-We learned how to create a box, set, and get its value.
+We learned how to create a value, set, and get it.
 
 **on**
 
 The next basic abstraction is expression.
-Expression is a function that read reactive boxes or selectors. It can return value and write reactive boxes inside.
+Expression is a function that read reactive boxes or selectors. It can return value and write reactive values inside.
 
 We can subscribe to change any reactive expression using `on` function _(which also works with action)_.
 
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
 const next = () => get() + 1;
 
@@ -320,12 +320,12 @@ set(5); // We will see 6 and 1 in developer console output, It are new and previ
 ```
 [Edit on RunKit](https://runkit.com/betula/6013ea214e0cf9001ac18e71)
 
-In that example expression is `next` function, because It get box value and return that plus one.
+In that example expression is `next` function, because It get value and return that plus one.
 
 **cycle**
 
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
 cycle(() => {
   console.log(get() + 1);
@@ -339,14 +339,14 @@ set(2);
 [Edit on RunKit](https://runkit.com/betula/601a733c5bfc4e001a38def8)
 
 - Takes a function as reactive expression.
-- After each run: subscribe to all reactive boxes accessed while running
+- After each run: subscribe to all reactive values accessed while running
 - Re-run on data changes
 
 **sync**
 
 ```javascript
-const [getSource, setSource] = box(0);
-const [getTarget, setTarget] = box(0);
+const [getSource, setSource] = value(0);
+const [getTarget, setTarget] = value(0);
 
 sync(getSource, setTarget);
 // same as sync(() => getSource(), val => setTarget(val));

src/index.ts

@@ -22,9 +22,6 @@ export {
   free,
   mock,
   unmock,
-  box,
-  sel,
-  expr,
   transaction,
   untrack,
   Ensurable,

tests/on.test.ts

@@ -1,4 +1,4 @@
-import { prop, cache, on, box } from '../src';
+import { prop, cache, on, value } from '../src';
 
 test('should work basic operations with prop, cache and on', () => {
   const spy = jest.fn();
@@ -19,7 +19,7 @@ test('should work basic operations with prop, cache and on', () => {
 
 test('should cache return value in on', () => {
   const spy = jest.fn();
-  const a = box(0);
+  const a = value(0);
 
   on(() => Math.floor(a[0]() / 2), spy);
 

tests/sync.test.ts

@@ -1,4 +1,4 @@
-import { prop, cache, sync, box } from '../src';
+import { prop, cache, sync, value } from '../src';
 
 test('should work basic operations with prop, cache and sync', () => {
   const spy = jest.fn();
@@ -20,7 +20,7 @@ test('should work basic operations with prop, cache and sync', () => {
 
 test('should cache return value in sync', () => {
   const spy = jest.fn();
-  const a = box(0);
+  const a = value(0);
 
   sync(() => Math.floor(a[0]() / 2), spy);
   expect(spy).toBeCalledTimes(1);

tests/use-shared.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { box, useShared, shared, action, on, sel, prop, observe } from '../src';
+import { value, useShared, shared, action, on, selector, prop, observe } from '../src';
 
 test('should work useShared function', () => {
   const spy = jest.fn();
   const inc = action();
   const h = () => {
-    const [get, set] = box(0);
+    const [get, set] = value(0);
     on(inc, () => set(get() + 1));
     return get;
   };
@@ -32,9 +32,9 @@ test('should work useShared function', () => {
 test('should work useShared with sel factory function', () => {
   const spy = jest.fn();
   const h = () => {
-    const [get, set] = box(0);
+    const [get, set] = value(0);
     const inc = () => set(get() + 1);
-    return sel(() => [get(), inc] as [number, () => void]);
+    return selector(() => [get(), inc] as [number, () => void]);
   };
 
   function A() {

tests/use-value.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { box, observe, useValue } from '../src';
+import { value, observe, useValue } from '../src';
 
 test('should work useValue function', () => {
   const spy = jest.fn();
-  const h = box(0);
+  const h = value(0);
 
   function A() {
     const val = useValue(h);
@@ -25,7 +25,7 @@ test('should work useValue function', () => {
 
 test('should work with observe together', () => {
   const spy = jest.fn();
-  const h = box(0);
+  const h = value(0);
 
   const A = observe(() => {
     const val = useValue(h);