# @cerebral/fluent

> Makes Cerebral typescript friendly

Latest version **1.0.3** (published 2018-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cerebral/fluent
pnpm add @cerebral/fluent
yarn add @cerebral/fluent
bun add @cerebral/fluent
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2018-04-18 |
| First published | 2018-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 261.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1994 |
| Author | Christian Alfoni |
| Maintainers | cerebral.js, christianalfoni, gbucher, guria, henri-hulski |

## Links

- npm: https://www.npmjs.com/package/@cerebral/fluent
- Repository: https://github.com/cerebral/cerebral
- Homepage: http://cerebral.github.io/cerebral-website
- Issues: https://github.com/cerebral/cerebral/issues
- npm.io page: https://npm.io/package/@cerebral/fluent

## Dependencies (2)

- [mobx](https://npm.io/package/mobx.md) ^3.4.1
- [cerebral](https://npm.io/package/cerebral.md) ^4.2.2

## Recent versions

- 1.0.3 (latest) — 2018-04-18
- 2.0.0-1527963057741 (next) — 2018-06-02
- 2.0.0-1527708491686 (canary) — 2018-05-30
- 2.0.0-1527883977316 — 2018-06-01
- 2.0.0-1527840012018 — 2018-06-01
- 2.0.0-1527787935820 — 2018-05-31
- 2.0.0-1527668754193 — 2018-05-30
- 2.0.0-1527192187050 — 2018-05-24
- 2.0.0-1527184480939 — 2018-05-24
- 2.0.0-1527107988206 — 2018-05-23
- 2.0.0-1527015081471 — 2018-05-22
- 2.0.0-1526409797341 — 2018-05-15
- 2.0.0-1526334609968 — 2018-05-14
- 2.0.0-1526222433248 — 2018-05-13
- 2.0.0-1525724201307 — 2018-05-07
- … 58 more at https://npm.io/package/@cerebral/fluent/versions

## README

# @cerebral/fluent

## Install

`npm install @cerebral/fluent`

## Description

This addon gives you full typesafety using [TypeScript](https://www.typescriptlang.org/). It exposes a chainable API and types to be used with defining your modules, sequences, actions and connecting to components.

Currently only [React](https://reactjs.org/) is supported.

To enable type safe mutations, the model of this addon is based on [Mobx](https://mobx.js.org/).

## action

```ts
import { sequence, Context } from './myFluent'
import * as actions from './actions'

export const doThis = sequence((s) => s.action(actions.someAction))
```

## branch

```ts
import { sequence } from './myFluent'
import * as actions from './actions'

export const doThis = Sequence((s) =>
  s.branch(actions.someBranchAction).paths({
    pathA: (s) => s,
    pathB: (s) => s
  })
)
```

## computed

```ts
import { Module, ComputedValue, Computed } from '@cerebral/fluent'
import * as sequences from './sequences'

type State = {
  items: string[]
  currentItemIndex: number
  currentItem: ComputedValue<string>
}

const state: State = {
  items: [],
  currentItemIndex: 0,
  currentItem: Computed((state) => state.items[state.currentItemIndex])
}

export const module = Module({
  state
})
```

**Computed** also exposes the root state:

```ts
Computed((state, root) => {})
```

## connect

```ts
import * as React from 'react'
import { connect } from './myFluent'

type Props = {
  externalProp: string
}

export const App = connect<Props>()
  .with(({ state, signals, props }) => ({
    foo: state.foo,
    onClick: signals.thisHappened
  }))
  .to(function App({ foo, onClick, externalProp }) {
    return <div />
  })
  // Alternatively
  .toClass(
    (props) =>
      class App extends React.Component<typeof props> {
        render() {
          const { foo, onClick, externalProp } = this.props

          return <div />
        }
      }
  )
```

## controller

```ts
import { Controller } from '@cerebral/fluent'
import { module as app } from './app'
import { State, Signals } from './fluent'

const controller = Controller<State, Signals>(app)
```

The **State** and **Signals** type are not required, but will enable auto suggestions on:

```ts
controller.state
controller.signals
```

## dictionary

```ts
import { Dictionary } from '@cerebral/fluent'

export type State = {
  items: Dictionary<string>
}

const state: State = {
  foo: Dictionary({
    foo: 'bar',
    bar: 'baz'
  })
}

export const module = Module({
  state,
  signals
})
```

## debounce

```ts
import { sequence } from './myFluent'
import * as actions from './actions'

export const doThis = sequence((s) => s.debounce(100))
```

## equals

```ts
import { sequence } from './myFluent'

export const doThis = sequence((s) =>
  s.equals(({ state }) => state.user.role).paths({
    admin: (s) => s,
    user: (s) => s,
    otherwise: (s) => s
  })
)
```

## factories

```ts
import {
  IContext,
  IBranchContext,
  ConnectFacory,
  SequenceFactory,
  SequenceWithPropsFactory
} from '@cerebral/fluent'
import { State, Signals, Providers } from './app'

export type Context<Props> = IContext<Props> & Providers

export type BranchContext<Paths, Props> = IBranchContext<Paths, Props> &
  Providers

export const connect = ConnectFactory<State, Signals>()

export const sequence = SequenceFactory<SignalContext>()

export const sequenceWithProps = SequenceWithPropsFactory<SignalContext>()
```

## IContext

```ts
import { IContext } from '@cerebral/fluent'
import { HttpProvider } from '@cerebral/http'

export type State = {
  foo: string
}

export interface Providers {
  http: HttpProvider
  state: State
}

export type Context<Props> = IContext<Props> & Providers
```

## IBranchContext

```ts
import { IBranchContext } from '@cerebral/fluent'
import { HttpProvider } from '@cerebral/http'

export type State = {
  foo: string
}

export interface Providers {
  http: HttpProvider
  state: State
}

export type BranchContext<Paths, Props> = IBranchContext<Paths, Props> &
  Providers
```

## module

```ts
import { Module } from '@cerebral/fluent'
import * as signals from './sequences'

export type ModuleSignals = {
  [key in keyof typeof signals]: typeof signals[key]
}

export type ModuleState = {
  foo: string
}

const state: ModuleState = {
  foo: 'bar'
}

export const module = Module({
  state,
  signals
})
```

## paths

```ts
import { sequence } from './myFluent'
import * as actions from './actions'

export const doThis = sequence((s) =>
  s.branch(actions.doThis).paths({
    success: (s) => s,
    error: (s) => s
  })
)
```

## sequence

```ts
import { sequence } from  './fluent'

// Sequence without expected input and output props
export const doThis = sequence(s => s)

// Sequence with expected output props
export const composeThis = sequence<{ foo: string, bar: string }>(s
```

## sequenceWithProps

```ts
import { sequenceWithProps } from  './fluent'

// Sequence with expected input props
export const doThis = sequenceWithProps<{ foo: string }>(s => s)

// Sequence with expected input and output props
export const composeThis = sequence<{ foo: string }, { foo: string, bar: string }>(s
```

## wait

```ts
import { Sequence } from '@cerebral/fluent'

export const doThis = Sequence((s) => s.wait(1000))
```

## when

```ts
import { Sequence } from '@cerebral/fluent'

export const doThis = Sequence((s) =>
  s.when(({ state }) => state.isAwesome).paths({
    true: (s) => s,
    false: (s) => s
  })
)
```

## ComputedValue

```ts
import { ComputedValue } from '@cerebral/fluent'

type State = {
  someComputedString: ComputedValue<string>
}
```

## Dictionary

```ts
import { Dictionary } from '@cerebral/fluent'

type Item = {
  title: string
}

export type State = {
  items: Dictionary<Item>
}
```

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