@cerebral/fluent

@cerebral/fluent

Install

npm install @cerebral/fluent

Description

This addon gives you full typesafety using TypeScript. It exposes a chainable API and types to be used with defining your modules, sequences, actions and connecting to components.

Currently only React is supported.

To enable type safe mutations the model of this addon is based on Mobx.

action

import { sequence, Context } from './myFluent'

export const doThis = sequence(s => s
  .action(function doSomething () {

  })
)

branch

import { sequence } from './myFluent'

export const doThis = Sequence(s => s
  .branch(function doSomething ({ path }) {
    return path.pathA({})
  })
  .paths({
    pathA: s => s,
    pathB: s => s
  })
)

computed

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
})

connect

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></div>
    }
  )
  // Alternatively
  .toClass(props =>
    class App extends React.Component<typeof props> {
      render () {
        const { foo, onClick, externalProp } = this.props

        return <div></div>
      }
    }
  )

controller

import { Controller } from '@cerebral/fluent'
import { app, State, Signals } from './app'

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

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

controller.state
controller.signals

dictionary

import { TDictionary } from '@cerebral/fluent'

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

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

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

debounce

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

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

equals

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

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

interface Context<Props> extends IContext<Props>, Providers {
  state: State
}

interface BranchContext<Paths, Props> extends IBranchContext<Paths, Props>, Providers {
  state: State
}

export function connect<Props>() {
  return ConnectFactory<Props, State, Signals>();
}

export function sequence<OutputProps> () {
  return SequenceFactory<Context, OutputProps>()
}

export function sequenceWithProps<Props, OutputProps> () {
  return SequenceWithPropsFactory<Context, Props, OutputProps = Props>()
}

IContext

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

export type State = {
  foo: string
}

export interface Providers {
  http: HttpProvider
}

export interface Context<Props> extends IContext  <Props>, Providers {
  state: State
}

IBranchContext

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

export type State = {
  foo: string
}

export interface Providers {
  http: HttpProvider
}

export interface BranchContext<Paths, Props> extends IBranchContext<Paths, Props>, Providers {
  state: State
}

module

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

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

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

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

import { Sequence } from  '@cerebral/fluent'

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

when

import { Sequence } from  '@cerebral/fluent'

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

TComputedValue

import { ComputedValue } from '@cerebral/fluent'

type State = {
  someComputedString: ComputedValue<string>
}

TDictionary

import { TDictionary } from '@cerebral/fluent'

type Item = {
  title: string
}

export type State = {
  items: TDictionary<Item>
}