# dreno

> A framework that takes the best out of Cycle, React and Mobx.

Latest version **0.1.8** (published 2017-06-05) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2017-06-05 |
| First published | 2017-06-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Giovanni T. Parra |
| Maintainers | fiatjaf |
| Keywords | cycles, mobx, react, virtual-dom, observable, observer, component, streams, xstream, cyclejs, state, stateful, dom, driver |

## Links

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

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.5.4
- [es6-set](https://npm.io/package/es6-set.md) ^0.1.5
- [xstream](https://npm.io/package/xstream.md) ^10.8.0
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.5.3

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.8 (latest) — 2017-06-05
- 0.1.7 — 2017-06-04
- 0.1.5 — 2017-06-04
- 0.1.4 — 2017-06-03
- 0.1.3 — 2017-06-03
- 0.1.2 — 2017-06-03
- 0.1.1 — 2017-06-03
- 0.0.9 — 2017-06-03
- 0.0.8 — 2017-06-03
- 0.0.7 — 2017-06-03

## README

## what?

**dreno** (portuguese for _drain_) is a small framework that combines the functional-reactive approach of [Cycle.js](https://cycle.js.org/) with the simplicity and scalability of state management given by [MobX](https://github.com/mobxjs/mobx).

## why?

Because it had to be done. Read more about it [here](docs/why.md).

## how does it work?

Basically, you render some components with [React](https://facebook.github.io/react/) while accessing values from a **state** that is given by the `observable` function. Whenever the components emit events you want to react to, you `track` these events. Any tracked event can be accessed from the `select` function as a [xstream](https://github.com/staltz/xstream) stream. From the streams given by `select` and any other streams you may create (for example, for accessing external or browser APIs) you should be able to deduce the values that will then be passed to `observable`.

See some simple live [examples](http://rawgit.com/fiatjaf/dreno/master/examples/) with the code used to generate them.

## getting started

```
npm install dreno
```

You may start your app by copypasting the following [boilerplate](http://rawgit.com/fiatjaf/dreno/master/examples/#/add-one):

```js
// app.js

const ReactDOM = require('react-dom')
const {observer, observable, track, select} = require('dreno')

const state = observable({
  /* attributes that will be accessed
   * directly from the components
   * go here.
   *
   * count: select('a.add-one')
   *   .events('click')
   *   .mapTo(1)
   *   .fold((acc, s) => acc + s, 0)
   *   .startWith(0)
   */
})

const MainComponent = observer(
  /* any React component class, either a stateless function,
   * a class inheriting from React.Component or created with
   * 'create-react-class'.
   *
   * only remember to set the event handlers to `track`,
   * like <a href='#' className='add-one' onClick={track}>click here to add 1</a>
   */
)

ReactDOM.render(
  MainComponent,
  document.getElementById(/* your react root element */)
)
```

Apart from that, you can do all the usual React stuff, transpilation etc.

---

Some germans performing drainage:

![picture of some germans performing drainage](docs/germans.jpg)

based on an idea first exposed at https://gist.github.com/fiatjaf/ece86e33b1f8846c8f8c318778b0895a.

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