README

Batis

General reactive JavaScript programming using the idea of React Hooks.

Introduction

Even though React Hooks are actually a constrained solution for using state and managing side effects in functional stateless components, they have proven to be very elegant in their design. I wanted to use this kind of reactive programming in areas other than React development, so I wrote Batis.

Batis essentially revolves around the concept of a Hook and its host. Running a functional stateless Hook requires a host that manages the state and effects and reports asynchronous state changes that should result in a new run.

Getting started

Installing Batis

npm install batis --save

Using Batis

import {Host, useEffect, useLayoutEffect, useMemo, useState} from 'batis';

function useGreeting(salutation) {
  const [name, setName] = useState('John');

  useLayoutEffect(() => {
    setName('Jane');
  }, []);

  useEffect(() => {
    // Unlike React, Batis always applies all state changes, whether
    // synchronous or asynchronous, in batches. Therefore, Janie is not
    // greeted individually.
    setName('Janie');
    setName((prevName) => `${prevName} and Johnny`);

    const handle = setTimeout(() => setName('World'));

    return () => clearTimeout(handle);
  }, []);

  return useMemo(() => `${salutation} ${name}!`, [salutation, name]);
}

const greeting = new Host(useGreeting);

console.log(greeting.run('Hi'));
console.log(greeting.rerun());

greeting.reset();

console.log(greeting.run('Bye'));
console.log(greeting.rerun());

await greeting.nextAsyncStateChange;

console.log(greeting.run('Hello'));

[ 'Hi Jane!', 'Hi John!' ]
[ 'Hi Janie and Johnny!' ]
[ 'Bye Jane!', 'Bye John!' ]
[ 'Bye Janie and Johnny!' ]
[ 'Hello World!' ]

API reference

The React Hooks API reference also applies to this library and should be consulted.

Implementation status

Below you can see the subset of React Hooks implemented by Batis:

React Hook	Status
`useState`	✅Implemented
`useEffect`	✅Implemented
`useLayoutEffect`	✅Implemented
`useMemo`	✅Implemented
`useCallback`	✅Implemented
`useRef`	✅Implemented
`useReducer`	✅Implemented
`useContext`	❌Not implemented
`useImperativeHandle`	❌Not implemented
`useDebugValue`	❌Not implemented

Usage no npm install needed!