fhook

Functional components with a predictable state, inspired by React-hooks and RxJS. Depeloped with ❤️ TypeScript.

About

RxJS - is very powerful tool for create multithreading applications, but JavaScript not so suitable language for this problem and people with experience in JavaScript can't use RxJS as usually with imperative style, javascript operators, etc.

React Hooks - is new feature of React, which allow to create a difficult logic with multithreading by simple syntax, use only function (without classes). It has some expenses, because for every changing of state, we should call our function again. But javascript is very quickly and not so many applications have so strong requirements to speed (it is really not so critical).

fhook - is variant of work with observables, use hooks and simple control for execution. For start our greeting, look this example:

import { createFunc, never, useState, useEffect, subscribe, createSubscription } from "../../";

const counter = createFunc(() => {
    const [value, setValue] = useState(1);
    useEffect(() => {
        const timeoutId = setTimeout(() => setValue(value + 1), 1000);
        return () => clearTimeout(timeoutId);
    }, [value]);
    if (value === 5) {
        complete();
    }
    return value.toString();
});
const app = createFunc(() => {
    const [value, setValue] = useState("");
    counter().subscribe({ next: setValue });

    return value !== "" ? "Result: " + value : never();
});
createSubscription(app(), { next: (value) => console.log(value) });
/*
Result: 1
Result: 2
Result: 3
Result: 4
Result: 5
*/

Install

npm install fhook --save

or

yarn add fhook

Usage

Example 1: Simple counter

import { createSubscription, useEffect, useState } from "fhook";
function app() {
    const [counter, setCounter] = useState(0);
    useEffect(() => {
        const id = setTimeout(() => setCounter(counter + 1), 1000);
    }, [counter]);
    return counter;
}
createSubscription(app, { next: (value) => console.log("Counter: " + value) });
/*
Counter: 0
Counter: 1
Counter: 2
Counter: 3
Counter: 4
...
*/

Example 2 Receive and send values

import { useState, usePipe, run, never, createContext, useContext, withContext, useEffect } from "fhook";

const MaxContext = createContext<number>();

function source() {
    const [result, setResult] = useState(0);
    const max = useContext(MaxContext);
    useEffect(() => {
        setInterval(() => {
            setResult(Math.round(Math.random() * max));
        }, 1000);
    }, []);
    return !result ? never() : result;
}

function app() {
    const [value, setValue] = useState("");
    withContext(MaxContext, 10);
    usePipe(source, [], (num) => setValue(num.toString()));
    return value ? "Number: " + value : never();
}
run(app).subscribe((value) => console.log(value));
/*
Number: 9
Number: 3
Number: 1
Number: 4
Number: 1
*/

Example 3: Complex app

In this example, we run function app, which provide DelimiterContext, then it use function one for return itself value. Function one create state name, setName and for first time use function two. Function two use effect, wait one second and set isReady to true, it allow return value Hell In function one we check name for contains a symbol H and return never (which stop propagination a value for this function). Same time we change use function two to three. Function three return to us a value World concatened with ThemeContext (Yellow World). And now, function one can return value Hello, Yellow World! and app propaginate this value and our subscriber got it!

import { useState, usePipe, run, never, createContext, useContext, withContext, useEffect } from "fhook";

const DelimiterContext = createContext<string>();
const ThemeContext = createContext();

function one() {
    const [name, setName] = useState<string | null>(null);
    withContext(ThemeContext, "Yellow");
    if (name === null) {
        usePipe(two, [], setName);
    } else {
        usePipe(three, [], setName);
    }
    return name === null || name.indexOf("H") > -1 ? never() : "Hello, " + name;
}
function two() {
    const [isReady, setIsReady] = useState(false);
    useEffect(() => {
        setTimeout(() => {
            setIsReady(true);
        }, 1000);
    }, []);
    return !isReady ? never() : "Hell";
}
function three() {
    return useContext(ThemeContext) + " World";
}

function app() {
    withContext(DelimiterContext, ":");
    return usePipe(one, []);
}

const { subscribe, dispose } = run(app);

subscribe((value) => {
    console.log(value); // "Hello, Yellow World!"
    dispose();
});

API

useContext<T>(context: Context<T>): T;
usePipe<R, A extends any[]>(fn: IFunction<R, A>, args: A, next?: (value: R) => void): symbol;
useState<T>(defaultValue: T): [T, (value: T) => void];
useEffect(callback: () => any, deps?: any[]): void;
withContext<T>(context: Context<T>, value: T): void;

class Context<T = any> {

}

function createContext<T>(params: IContextParams<T> = {}): Context<T>;

Test

npm install
npm test