@framp/frappe
Options
All
  • Public
  • Public/Protected
  • All
Menu
Frappe

Frappe

Frappe is a library for defining UI components based on time and events.

Install

npm i @framp/frappe react react-dom

Inspiration

The main source of inspiration are Arrowised Functional Reactive Programming (aFRP) libraries like Netwire and Yampa.

JavaScript is a vastly different language from Haskell - which translates to different developers expectations. When facing a choice between pragmatism / familiarity and purity, Frappe takes the pragmatic approach.

License

MIT

Index

Classes

Interfaces

Variables

Functions

Object literals

Variables

Const event

event: Straw = fn((val?: any, time?: number, event?: FEvent) => event)

It's a Straw that returns always the event.

returns

a tuple containing the event Straw and the event passed.

Const id

id: Straw = of(val => [id, val])

It's a Straw that returns always the value.

returns

a tuple containing the id Straw and the value passed.

Const time

time: Straw = fn((val, time) => time)

It's a Straw that returns always the time.

returns

a tuple containing the time Straw and the time passed.

Functions

Const accum

  • accum(func: AccumFn, acc: any): any

  • It creates a Straw that will keep state, given a function func and an initial state acc.

    Similarly to a reducer, func accepts acc, val, time, event, emit and returns a single value that will be returned in the current execution and used as acc in the next execution of the Straw.

    If you want your internal state to be different from what it's being returned, see accumState.

    Parameters

    • func: AccumFn

      the reducer function

    • acc: any

      the initial state

    Returns any

    a Straw that uses func to store state

Const accumState

  • It creates a Straw that will keep state, given a function func and an initial state acc.

    Similarly to a reducer, func accepts acc, val, time, event, emit and returns a tuple [newAcc, output].

    newAcc will be used as the acc in the next execution of the Straw, while output will be returned in the current execution.

    Parameters

    • func: AccumStateFn

      the reducer function func

    • acc: any

      the initial state

    Returns any

    a Straw that uses func to store state

Const afterEvent

  • afterEvent(targetEvent: FEvent): any

  • It accepts an event targetEvent and returns a Straw that will return true only after that event happens (inclusive of when targetEvent happens).

    Parameters

    • targetEvent: FEvent

      an event to wait for

    Returns any

    a Straw that will return true only after that event happens

Const afterTime

  • afterTime(targetTime: number): any

  • It accepts a targetTime time and returns a Straw that will return true only after targetTime time (inclusive of targetTime) startTimeing from when the Straw has been executed first.

    Parameters

    • targetTime: number

      a time to wait for

    Returns any

    a Straw that will return true until targetTime

Const and

  • and(...straws: Array<Straw>): any

  • It creates a Straw from a number of Straws which return a boolean to indicate if all the Straws outputs are truthy.

    The equivalent of the && operator for Straws.

    Parameters

    • Rest ...straws: Array<Straw>

      the Straws to evaluate

    Returns any

    a Straw that will return the desired boolean

Const animationFrameStrategy

  • animationFrameStrategy(): object

Const atTime

  • atTime(targetTime: number, margin?: number): Straw

  • It accepts a targetTime time and returns a Straw that will return true when time is targetTime.

    A optional margin parameter can be used to relax the comparison: the resulting Straw will return true as long as time is within margin to targetTime.

    Parameters

    • targetTime: number

      a targetTime time

    • Default value margin: number = 0

      a margin to use to compare for equality

    Returns Straw

    a Straw that will return true when time is targetTime

Const beforeEvent

  • beforeEvent(targetEvent: FEvent): any

  • It accepts an event targetEvent and returns a Straw that will return true until that event happens (inclusive of when targetEvent happens).

    Parameters

    • targetEvent: FEvent

      an event to wait for

    Returns any

    a Straw that will return true until that event happens

Const beforeTime

  • beforeTime(targetTime: number): any

  • It accepts a targetTime time and returns a Straw that will return true until targetTime time (inclusive of targetTime) startTimeing from when the Straw has been executed first.

    Parameters

    • targetTime: number

      a time to wait for

    Returns any

    a Straw that will return true until targetTime

Const betweenEvents

  • It accepts two events eventStart and eventEnd and returns a Straw that will return true after eventStart and before eventEnd (inclusive of when the events happen).

    Parameters

    • eventStart: FEvent

      an event to mark the beginning of the interval

    • eventEnd: FEvent

      an event to mark the end of the interval

    Returns any

    a Straw that will return true after eventStart and before eventEnd

Const betweenTimes

  • betweenTimes(startTime: number, endTime: number): any

  • It accepts two times startTime and endTime and returns a Straw that will return true after startTime and before endTime (inclusive of when the events happen).

    Parameters

    • startTime: number

      a time to mark the beginning of the interval

    • endTime: number

      a time to mark the endTime of the interval

    Returns any

    a Straw that will return true after startTime and before endTime

Const compose

  • compose(...straws: any[]): any

  • It composes a number of Straws together right to left.

    The first val is fed into the rightward Straw, the result of which get fed into the next Straw.

    The same action is repeated until all the Straws are processed.

    The same time, event, emit are passed to all the Straws.

    Parameters

    • Rest ...straws: any[]

      the Straws that will be composed together

    Returns any

    a Straw that will execute all the straws

Const composeLeft

  • composeLeft(...straws: any[]): any

  • It composes a number of Straws together left to right.

    The first val is fed into the leftward Straw, the result of which get fed into the next Straw.

    The same action is repeated until all the Straws are processed.

    The same time, event, emit are passed to all the Straws.

    Parameters

    • Rest ...straws: any[]

      the Straws that will be composed together

    Returns any

    a Straw that will execute all the straws

Const composeRight

  • composeRight(...straws: any[]): any

  • It composes a number of Straws together right to left.

    The first val is fed into the rightward Straw, the result of which get fed into the next Straw.

    The same action is repeated until all the Straws are processed.

    The same time, event, emit are passed to all the Straws.

    Parameters

    • Rest ...straws: any[]

      the Straws that will be composed together

    Returns any

    a Straw that will execute all the straws

Const constant

  • constant(val: any): Straw

  • It accepts a value val and return a Straw that will always return that val.

    Parameters

    • val: any

      a value to use

    Returns Straw

    a Straw that will always return val

Const constantify

  • constantify(val: any): Straw

  • It accepts a value val and return val, if it's a Straw, or the Straw constant(val).

    Parameters

    • val: any

      a value to use

    Returns Straw

    a Straw, either val or constant(val)

Const dynamicArray

  • It creates a Straw that will maintain state, adding and removing elements, by reading data from provided actions Straws.

    Items will be inserted and removed into an Array.

    Parameters

    • actions: DynamicActions

      an Object providing an add and remove Straws

    Returns any

    a Straw that will retunr the current state

Const dynamicMap

  • It creates a Straw that will maintain state, adding and removing elements, by reading data from provided actions Straws.

    Items will be inserted and removed into an Object.

    Parameters

    • actions: DynamicActions

      an Object providing an add and remove Straws

    Returns any

    a Straw that will return the current state

Const dynamicStructure

  • It creates a Straw that will maintain state, adding and removing elements, by reading data from provided actions Straws.

    It uses a provided driver to manage state.

    If you're looking for a battery-included solution check out dynamicArray and dynamicMap.

    Parameters

    • driver: DynamicDriver

      an Object providing the new, remove, add functions

    Returns (Anonymous function)

    a Straw that will retunr the current state

Const emit

  • emit(targetEvent: any): Straw

  • It accepts an event targetEvent and returns a Straw that will emit it.

    Parameters

    • targetEvent: any

      an event to emit

    Returns Straw

    a Straw that will emit targetEvent

Const fanout

  • fanout(...straws: Array<Straw>): any

  • It accepts N straws and returns a Straw that will accept a single value val.

    The resulting Straw will run each of the Straws using val.

    The same time, event, emit are passed to all the Straws.

    Parameters

    • Rest ...straws: Array<Straw>

      the Straws that will be used

    Returns any

    a Straw that accepts val and that will execute all the straws

Const fn

  • fn(func: function): Straw

  • It accepts a function func and return a Straw that will execute func .

    func will accept 4 parameters val, time, event, emit and returns just the result (unlike of).

    If you want to change how the Straw behaves in the next executions you should use of.

    Parameters

    • func: function

      a function to make into a Straw

        • Parameters

          • Optional val: any
          • Optional time: number
          • Optional event: FEvent
          • Optional emit: EmitEvent

          Returns any

    Returns Straw

    a Straw that will call func at every run

Const hold

  • hold(straw: Straw): any

  • It creates a Straw that holds all the truthy values returned by straw for all the executions.

    Parameters

    • straw: Straw

      the straw to run through

    Returns any

    a holding values Straw

Const holdFirst

  • holdFirst(straw: Straw): any

  • It creates a Straw that holds the first value returned by straw for all the executions.

    Parameters

    • straw: Straw

      the straw to run through

    Returns any

    a holding values Straw

Const holdWhen

  • It creates a Straw that holds a value across executions of a Straw when a condition predicate matches.

    condition accepts the current value acc being hold (if present), val, time, event, emit.

    Based on the output of condition the current value acc will be kept or it will be swapped with val.

    Parameters

    • condition: HoldConditionFn

      a function to check if the current execution

    • straw: Straw

      the straw to run through

    Returns any

    a holding values Straw

Const isStraw

  • isStraw(val: any): boolean

  • It accepts a value val and return a boolean indicating whether val is a Straw or not.

    Parameters

    • val: any

      a value to check

    Returns boolean

    a boolean to indicate if val is a Straw

Const listenOn

  • It accepts an event (or array of events) and a Straw returning a React element and return a Straw which returns the React element extended with the needed event listeners, setup using the type property of the event.

    The events will be plugged via ReactRunner into the application and will be available to all the Straws.

    Parameters

    • event: Array<FEvent> | FEvent

      an event (or array of event) to listen for

    • straw: Straw

      a Straw returning a React element to extend with the listeners from event

    Returns Straw

    a Straw returning the React element from straw with the event listeners from event

Const not

  • It creates a Straw from a single Straws which return a boolean to indicate if the Straw output is falsy.

    The equivalent of the ! operator for Straws.

    Parameters

    • straw: Straw

      the Straw to evaluate

    Returns any

    a Straw that will return the desired boolean

Const of

  • of(func: function): Straw

  • It accepts a function func and return a Straw.

    func will accept 4 parameters val, time, event, emit and returns a tuple [nextFunc, result].

    nextFunc can be used to change the behaviour of func at the next execution of the Straw, result will be the output of the Straw at the current run.

    Given a function behaves naturally like a Straw, the only thing of is doing is adding a __type: 'Straw' to the function for identification purposes (eg: isStraw).

    Parameters

    • func: function

      a function to make into a Straw

    Returns Straw

    a Straw made from func

Const on

  • on(__namedParameters: object, transformer?: function): Straw

  • It accepts an event and returns a Straw that will return that event when it happens.

    An optional transformer function can be passed to transform the event before consumption.

    Parameters

    • __namedParameters: object
    • Default value transformer: function = val => val

      function to be applied to event before return

        • (FEvent: any): any

        • Parameters

          • FEvent: any

          Returns any

    Returns Straw

    a Straw that will look for event

Const once

  • once(straw: Straw): any

  • It creates a Straw that invokes the given straw only once.

    Parameters

    • straw: Straw

      the straw to run through

    Returns any

    a Straw that will return only the first value

Const or

  • or(...straws: Array<Straw>): any

  • It creates a Straw from a number of Straws which return a boolean to indicate if at least one of the Straws outputs is truthy.

    The equivalent of the || operator for Straws.

    Parameters

    • Rest ...straws: Array<Straw>

      the Straws to evaluate

    Returns any

    a Straw that will return the desired boolean

Const periodicTime

  • periodicTime(period: number): any

  • It accepts a period and returns a Straw that will alternate returning true or false for period.

    Parameters

    • period: number

      the length in time to use for the interval

    Returns any

    a Straw that will return true or false for period

Const promise

  • promise(func: PromiseFn): Straw

  • It accepts a promise returning function func and return a Straw that will execute func and fire a promise-resolve event on success or a promise-error event on failure. The emitted event will use the returned Straw as a ref.

    Parameters

    • func: PromiseFn

      promise returning function

    Returns Straw

    Straw that will call func when run

Const reduce

  • It creates a Straw that returns a reduce of all the given straws starting from an initial value acc.

    The reducer func accepts acc, the current straw, val, time, event, emit and it's responsible for running each straw and return a new (or the same) straw for the next execution.

    The and and or functions are implemented with reduce.

    Parameters

    • func: ReduceFn

      the reducer function

    • acc: any

      the initial state

    • straws: Array<Straw>

    Returns any

    a Straw that will reduce all the straws

Const restartWhen

  • restartWhen(condition: Straw, effect: Straw): any

  • It creates a Straw from a condition and an effect Straws.

    effect will be executed by default.

    When condition returns a truthy value, the current effect Straw will be replaced with the original effect

    Parameters

    • condition: Straw

      the Straw used to check if the effect needs to be restarted

    • effect: Straw

      the Straw to execute and optionally restart

    Returns any

    a Straw that will execute effect and restart it on occasion

Const run

  • run(straw: Straw, inputs: Array<any>, times?: Array<number>, events?: Array<FEvent>, emits?: Array<EmitEvent>): Array<any>

  • It runs a Straw, simulating a set of inputs, times, events, emit functions and collect the results in an array.

    Great for testing straws.

    inputs will be used as a source of truth to count how many times the Straw will be run.

    Parameters

    • straw: Straw

      a Straw to run

    • inputs: Array<any>

      the inputs to run the straw on

    • Default value times: Array<number> = []

      the times to use for every input being sent

    • Default value events: Array<FEvent> = []

      the events to use for every input being sent

    • Default value emits: Array<EmitEvent> = []

      the emit functions to use for every input being sent

    Returns Array<any>

    an array of values resulting from all the executions of straw

Const split

  • split(...straws: Array<Straw>): any

  • It accepts N straws and returns a Straw that accepts an array vals of N values.

    The resulting Straw will run each of the Straws using a single value from vals, taken by index.

    The same time, event, emit are passed to all the Straws.

    Parameters

    • Rest ...straws: Array<Straw>

      the Straws that will be used

    Returns any

    a Straw that accepts vals and that will execute all the straws

Const take

  • take(n: number, straw: Straw): any

  • It creates a Straw that invokes the given straw at most n times.

    Parameters

    • n: number

      the number of executions that will invoke straw

    • straw: Straw

      the straw to run through

    Returns any

    a Straw that will return values for at most n executions

Const timeStrategy

  • timeStrategy(time: number): object

  • Parameters

    • time: number

    Returns object

Const when

  • when(...straws: Array<Straw>): any

  • It creates a Straw from a number of Straws, paired up in conditions, effects.

    All the Straws with a even index will be assumed to be conditions, all the Straws with an odd index will be assumed to be the Straws to be executed.

    when will execute all conditions in order; when the first condition with a truthy value is found the respective effect will be executed and returned.

    Unevaluated effects won't be executed.

    effects Straws with the property __update set to a truthy value, will be executed in any case.

    Parameters

    • Rest ...straws: Array<Straw>

      the Straws paired up in conditions and effects

    Returns any

    a Straw that will return the first effect found with a truthy condition

Object literals

Const arrayDriver

arrayDriver: object

An array-like driver for dynamicStructure that store data in a JavaScript Array.

add

  • add(id: number, val: any): (Anonymous function)

  • Function used to add an element to the Array.

    If id is not provided the element will be added at the end of the Array.

    Parameters

    • id: number

      the index where the new element will be inserted

    • val: any

      a value to insert

    Returns (Anonymous function)

    an Array with val inserted at the id index

new

  • new(): any[]

  • Function used to return an initial value

    Returns any[]

    an empty Array

remove

  • remove(id: number): (Anonymous function)

  • Function used to remove an element from the Array.

    Parameters

    • id: number

      an index to delete in the Array

    Returns (Anonymous function)

    an Array with the element at the id index removed

Const mapDriver

mapDriver: object

A map-like driver for dynamicStructure that store data in a JavaScript Object.

add

  • add(id: any, val: any): (Anonymous function)

  • Function used to add an element to the Object.

    Parameters

    • id: any

      the key where the new element will be inserted

    • val: any

      a value to insert in the Object

    Returns (Anonymous function)

    an Object with val inserted at the id key

new

  • new(): object

  • Function used to return an initial value

    Returns object

    an empty Object

remove

  • remove(id: any): (Anonymous function)

  • Function used to remove an element from the Object.

    Parameters

    • id: any

      a key to delete in the Object

    Returns (Anonymous function)

    an Object with the element at the id key removed