# flumpt

> Conceptual Implementation of EventEmitter based Flux.

Latest version **0.3.1** (published 2017-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install flumpt
pnpm add flumpt
yarn add flumpt
bun add flumpt
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2017-04-16 |
| First published | 2015-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 151 |
| Author | mizchi |
| Maintainers | mizchi |

## Links

- npm: https://www.npmjs.com/package/flumpt
- Repository: https://github.com/mizchi/flumpt
- Homepage: https://github.com/mizchi/flumpt#readme
- Issues: https://github.com/mizchi/flumpt/issues
- npm.io page: https://npm.io/package/flumpt

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [promised-reducer](https://npm.io/package/promised-reducer.md) ^0.1.0

## Recent versions

- 0.3.1 (latest) — 2017-04-16
- 0.3.0 — 2017-03-27
- 0.2.0 — 2016-05-28
- 0.1.4 — 2015-12-25
- 0.1.3 — 2015-12-10
- 0.1.2 — 2015-12-10
- 0.1.1 — 2015-12-10
- 0.1.0 — 2015-12-10

## README

# Flumpt

Conceptual Implementation of EventEmitter based Flux.

## Concepts

Flux is (...What you think) but all you need is just an `EventEmitter`.

Interface is inpired by `Om`.

## Example

### Hello World

```js
import * as React from "react";
import {Flux, Component} from "flumpt";
import {render} from "react-dom";

class MyComponent extends Component {
  componentDidMount() {
    this.dispatch("increment");
  }
  render() {
    return (
      <div>
        {this.props.count}
        <button onClick={() => this.dispatch("increment")}>increment</button>
      </div>
    );
  }
}

class App extends Flux {
  subscribe() { // `subscribe` is called once in constructor
    this.on("increment", () => {
      this.update(({count}) => {
        return {count: count + 1}; // return next state
      });
    });
  }
  render(state) {
    return <MyComponent {...state}/>;
  }
}

// Setup renderer
const app = new App({
  renderer: el => {
    render(el, document.querySelector("#root"));
  },
  initialState: {count: 0},
  middlewares: [
    // logger
    //   it may get state before unwrap promise
    (state) => {
      console.log(state);
      return state
    }
  ]
});

app.on(":start-async-updating", () => {
  // overlay ui lock
});
app.on(":end-anync-updating", () => {
  // hide ui lock
});

app.update(_initialState => ({count: 1})) // it fires rendering
```

- `Flux` is `EventEmitter`
- `Component` is just `ReactComponent` with `dispatch` method.

## With decorator

Added by v0.3.0. Need babel-plugin-transform-decorators-legacy.

```js
import React from 'react'
import {withFlux, dispatchable} from 'flumpt'

@dispatchable
class CounterIncrement extends React.Component {
  render() {
    return <button onClick={_ev => this.context.dispatch('increment')}>+1</button>
  }
}

@withFlux((update, on) => {
  on('increment', () => {
    update(state => {
      return {count: state.count + 1}
    })
  })
}, {count: 0})
class MyApp extends React.Component {
  render () {
    return <div>
      <span>{this.props.count}</span>
      <CounterIncrement/>
    </div>
  }
}
```

## With TypeScript

Need `node react reace-dom es6-promise` type definitions.

- `npm install -g dtsm`
- `dtsm install node react reace-dom`


```js
import {Flux} from "flumpt";

interface State {
  count: number;
}

class App extends Flux<State> {
  subscribe() {
    this.on("increment", () => {
      this.update((s: State) => {
        return {count: count + 1};
      });
    });
  }
  // ... render or others
}
```

See detail in `index.d.ts`

## Middlewares

Middleware function type is `<T>(t: T) => T | Promise<T>` or  `<T>(t: Promise<T>) => Promise<T>;`. (Use Promise.resolve if you consider promise)
`Flux#render(state)` is always promise unwrapped promise but a middelware handle raw nextState received by `Flux#update`.


## LICENSE

MIT

---
_Source: https://npm.io/package/flumpt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._