Representable Functors

representable.js

const Immutable = require('immutable-ext')
const {Just, Nothing} = require('data.maybe')
const Task = require('data.task')

// Setup

const Reader = f =>
({
  run: f,
  map: g => Reader(x => g(f(x))),
  chain: g => Reader(x => g(f(x)).run(x))
})
Reader.of = x => Reader(() => x)

const loadComponent = name =>
  Immutable.Map({name: name[0].toUpperCase() + name.slice(1), example: Nothing, html: Nothing, selectors: Nothing })

const addExample = comp =>
  comp.set('example', Just(Task.of('Some Html')))

const beautifyHtml = comp =>
  comp.set('html', Just('<some html>'))

const addSelectorTable = comp =>
  comp.set('selectors', Just([['cols'], ['rows']]))



// Eager!

const Components = ['alert', 'buttons', 'data-tables', /* ...etc */]

// build a Map of just {key: key}
const empty = Components.reduce((acc, key) => acc.set(key, key), Immutable.Map())

// load up each component
const ui = empty.map(loadComponent).map(addExample).map(beautifyHtml).map(addSelectorTable)

// access a component
ui.get('buttons') // Map { "name": "Buttons", "example": Maybe.Just(Task), "html": Maybe.Just(<some html>), "selectors": Maybe.Just(cols,rows) }



// NOW LAZY!

// from :: (Component -> a) -> UI
const from = f =>
  Components.reduce((ui, key) => ui.set(key, f(key)), Immutable.Map())

// to :: UI -> (Component -> a)
const to = structure =>
  key => structure.get(key)

// build a Map of just {key: key}
const empty_ = from(x => x)

// make a function that will load up each component
const ui_ = Reader(to(empty_)).map(loadComponent).map(addExample).map(beautifyHtml).map(addSelectorTable)

// access a component
ui_.run('buttons') // Map { "name": "Buttons", "example": Maybe.Just(Task), "html": Maybe.Just(<some html>), "selectors": Maybe.Just(cols,rows) }

Btw runnable version of this can be found here https://repl.it/@ahojda22/JadedHoneydewQbasic#index.js 👍