realar - npm Package Compare versions

Comparing version 0.4.16 to 0.4.17

package.json

 {
   "name": "realar",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "description": "React state manager",
@@ -88,3 +88,3 @@ "repository": {
   },
-  "gitHead": "303d7ef2d61c1cf224017bb7992a034f414e9b35"
+  "gitHead": "ef8b68cc15a656ae6abd503ae1102b2f8107b862"
 }

README.md

@@ -11,6 +11,10 @@ # Realar
 
-Realar supported two kinds of data and logic definitions. One of them is [OOP](https://en.wikipedia.org/wiki/Object-oriented_programming).
+Realar supported two kinds of data and logic definitions.
 
-You can start development with classes and decorators knows only two functions:
+> If you don't have an interest in classes or decorators, you can code in [pure style](#pure-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.
+
+### Classes usage
+
 `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.
@@ -20,4 +24,2 @@
 
-### Usage
-
 ```javascript
@@ -65,4 +67,41 @@ import React from 'react';
 
-But otherwise necessary to wrap all React function components that use reactive values inside to `observe` wrapper. [See wrapped version on CodeSandbox](https://codesandbox.io/s/realar-counter-k9kmw?file=/src/App.tsx).
+But otherwise necessary to wrap all React function components that use reactive values inside to `observe` wrapper. [Try wrapped version on CodeSandbox](https://codesandbox.io/s/realar-counter-k9kmw?file=/src/App.tsx).
 
+### Pure 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).
+
+
 ### Documentation
@@ -111,3 +150,3 @@
 
-set(5); // We will see 6, 1 in developer console output, It are new and previous value
+set(5); // We will see 6 and 1 in developer console output, It are new and previous value
 ```
@@ -118,4 +157,23 @@ [Edit on RunKit](https://runkit.com/betula/6013ea214e0cf9001ac18e71)
 
-_Documentation not ready yet for `action`, `sel`, `shared`, `sync`, `cycle`, `effect`, `initial`, `mock`, `unmock`, `free`, `useLocal`, `useValue`, `useShared`, `observe`, `transaction`, `cache` functions. It's coming soon._
+**cycle**
 
+```javascript
+const [get, set] = box(0);
+
+cycle(() => {
+  console.log(get() + 1);
+});
+
+set(1);
+set(2);
+
+// In output of developer console will be 2, 3 and 4.
+```
+
+- Takes a function as reactive expression.
+- After each run: subscribe to all reactive boxes accessed while running
+- Re-run on data changes
+
+_Documentation not ready yet for `on`, `action`, `sel`, `shared`, `sync`, `cycle`, `effect`, `initial`, `mock`, `unmock`, `free`, `useLocal`, `useValue`, `useShared`, `observe`, `transaction`, `cache` functions. It's coming soon._
+
 ### Demos
@@ -122,0 +180,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

32962

increased by3.39%

Number of lines in readme file

208

increased by38.67%

No dependency changes