reactive-box - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

package.json

		{
		"name": "reactive-box",
		"version": "0.2.4",
		"version": "0.3.0",
		"description": "Minimalistic, fast, and highly efficient reactivity",
		@@ -49,3 +49,3 @@ "scripts": {
		"homepage": "https://github.com/betula/reactive-box#readme",
		"gitHead": "271903ad4df7f54a436b9e3692687a295627062b"
		"gitHead": "73c9bcbb36bfc167f35076755c15a826ee9b311c"
		}

README.md

		@@ -9,3 +9,3 @@ [![npm version](https://img.shields.io/npm/v/reactive-box?style=flat-square)](https://www.npmjs.com/package/reactive-box) [![bundle size](https://img.shields.io/bundlephobia/minzip/reactive-box?style=flat-square)](https://bundlephobia.com/result?p=reactive-box) [![code coverage](https://img.shields.io/coveralls/github/betula/reactive-box?style=flat-square)](https://coveralls.io/github/betula/reactive-box) [![typescript supported](https://img.shields.io/npm/types/typescript?style=flat-square)](./src/main.d.ts)

		These funny thoughts served as fuel for writing the reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines.
		These funny thoughts served as fuel for writing the minimal reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines :+1:

		@@ -18,55 +18,21 @@ It only three functions:

		[Counter with Node.js on RunKit](https://runkit.com/betula/5fbde8473dd2b0001bb8f9be)

		That counter with React:

		```javascript
		import React from "react";
		import { box, sel, expr } from "reactive-box";
		import { box, sel, expr } import "reactive-box";

		const [getCounter, setCounter] = box(0);
		const [getNext] = sel(() => getCounter() + 1);
		const [get, set] = box(0);
		const [next] = sel(() => get() + 1);
		const [run, stop] = expr(() => {
		console.log(`Counter: ${get()} (next value: ${next()})`)
		});
		run();
		set(get() + 1);
		```

		const increment = () => setCounter(getCounter() + 1);
		const decrement = () => setCounter(getCounter() - 1);
		[Try It on RunKit!](https://runkit.com/betula/5fbf60565572d7001a76cd29)

		const useForceUpdate = () => {
		return React.useReducer(() => [], [])[1];
		};
		Basic examples:

		const observe = <T extends React.FC<P>, P>(Component: T) =>
		React.memo((props: P) => {
		const forceUpdate = useForceUpdate();
		const ref = React.useRef<[T, () => void]>();
		if (!ref.current) {
		ref.current = expr(Component, forceUpdate);
		}
		React.useEffect(() => ref.current![1], []);
		return ref.current[0](props);
		});
		- [Counter with Node.js on RunKit](https://runkit.com/betula/5fbde8473dd2b0001bb8f9be)
		- [Counter with React on CodeSandbox](https://codesandbox.io/s/reactive-box-counter-35bp9?hidenavigation=1&module=%2Fsrc%2FApp.tsx)

		const Counter = observe(() => (
		<p>
		Counter: {getCounter()} (next value: {getNext()})
		</p>
		));

		const Buttons = () => (
		<p>
		<button onClick={decrement}>Prev</button>
		<button onClick={increment}>Next</button>
		</p>
		);

		export const App = () => (
		<>
		<Counter />
		<Buttons />
		</>
		);

		```

		[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reactive-box-counter-35bp9?hidenavigation=1&module=%2Fsrc%2FApp.tsx)

		It is minimal core for a big family of state managers' syntax. You can use the different syntax of your data flow on one big project, but the single core of your reactions provides the possibility for easy synchronization between them.
		@@ -80,2 +46,8 @@

		Articles

		- [664 Bytes reactivity on dev.to](https://dev.to/betula/reactive-box-1hm5)

		You can make your own state manager system or another observable and reactive data flow. It so fun!

		Install
		@@ -87,2 +59,2 @@

		Enjoy!
		Cheers and happy coding! 👋

reactive-box - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics