# fhook

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

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] [![Coverage percentage][coveralls-image]][coveralls-url]
[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)

# 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:

```typescript
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

```typescript
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

```typescript
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!

```typescript
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

```typescript

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

[npm-image]: https://badge.fury.io/js/fhook.svg
[npm-url]: https://npmjs.org/package/fhook
[travis-image]: https://travis-ci.org/arvitaly/fhook.svg?branch=master
[travis-url]: https://travis-ci.org/arvitaly/fhook
[daviddm-image]: https://david-dm.org/arvitaly/fhook.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/arvitaly/fhook
[coveralls-image]: https://coveralls.io/repos/arvitaly/fhook/badge.svg
[coveralls-url]: https://coveralls.io/r/arvitaly/fhook