https://github.com/jcouyang/alacarte
Data Types a la carte from PureScript -> JavaScript
https://github.com/jcouyang/alacarte
a-la-carte data-type
Last synced: 11 months ago
JSON representation
Data Types a la carte from PureScript -> JavaScript
- Host: GitHub
- URL: https://github.com/jcouyang/alacarte
- Owner: jcouyang
- Created: 2017-03-31T09:49:15.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-19T09:47:13.000Z (about 9 years ago)
- Last Synced: 2025-07-04T02:07:48.153Z (11 months ago)
- Topics: a-la-carte, data-type
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.org
Awesome Lists containing this project
README
* /Data types à la carte/ in JavaScript
[[https://github.com/jcouyang/alacarte/wiki/%E8%AF%BB%E6%88%91][中文 :cn:]]
It's pretty funny though, this is a simple implementation that port [[http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=4B1BB52114FB29D3169B1761C3FBFF15?doi=10.1.1.101.4131&rep=rep1&type=pdf][Data Types à la Carte]] (it would be awfully help if you can read this paper first) from Haskell to JavaScript. It will solve the particular problem in [[https://github.com/reactive-react/react-most][react-most]] but you can use this technique with any other flux e.g. redux or DSL(expression + interpreter)
** Install
#+BEGIN_SRC sh
yarn add alacarte.js
#+END_SRC
** TLDR;
*** BEFORE (The Expression Problem)
#+BEGIN_SRC diff
const Intent = Type({
Inc: [Number],
Dec: [Number],
+ Mult: [Number],
})
const increasable = connect(intent$ => {
return {
sink$: intent$.map(Intent.case({
Inc: (v) => over(lensCount, x=>x+v),
Dec: (v) => over(lensCount, x=>x-v),
+ Mult: (v) => over(lensCount, x=>x*v),
_: () => identity
})),
actions: {
inc: Intent.Inc,
dec: Intent.Dec,
+ mult: Intent.Mult
}
}
})
#+END_SRC
*** AFTER (Data Types a la carte)
#+BEGIN_SRC diff
const {Add} = Expr.create({ Add: ['fn'] })
const evalAdd = interpreterFor(Add, function (v) {
return x => x + v.fn(x)
});
const evalVal = interpreterFor(Val, function (v) {
return ()=> v.value
});
const evalOver = interpreterFor(Over, function (v) {
let newstate = {}
let prop = v.prop()
return state => (newstate[prop] = v.fn(state[prop]), newstate)
});
- let interpreter = interpreterFrom([evalLit, evalAdd, evalOver])
- let injector = injectorFrom([Val, Add, Over])
- let [val, add, over] = injector.inject()
+ const {Mult} = Expr.create({ Mult: ['fn'] })
+ const evalMult = interpreterFor(Mult, function (v) {
+ return x => x * v.fn(x)
+ });
+ let injector = injectorFrom([Val, Add, Over, Mult])
+ let interpreter = interpreterFrom([evalLit, evalAdd, evalOver, evalMult])
+ let [val, add, over, mult] = injector.inject()
const counterable = connect((intent$) => {
return {
sink$: intent$.filter(isInjectedBy(injector))
.map(interpretExpr(interpreter)),
inc: v => over(val('count'), add(val(v))),
dec: v => over(val('count'), add(val(-v))),
+ mult: v => over(val('count'), mult(val(v))),
}
})
#+END_SRC
*** Example
- [[https://reactive-react.github.io/react-most/examples/alacarte/public/][try it!]]
- [[https://github.com/reactive-react/react-most/tree/master/examples/alacarte][source]]
** Why
The problem of react-most or any flux is that when a Action is dispatched, something like a =reducer= will have to evaluate it and produce something to change state.
Which means, you have to define all your Actions in one place so that any reducer can switch on them. e.g. in react-most [[https://github.com/reactive-react/react-most/blob/master/examples/counter/src/app.jsx#L18][there is a big switch]], you've probably see lot of these in redux as well.
It's global thing, anyone want to add a new Action will have to change it.
[[https://en.wikipedia.org/wiki/Expression_problem][The Expression Problem]] that Data Types à la Carte try to solve is pretty much the same as our problem if we map the concept of =Action= to =Expression=, and =Reducer= to =Interpreter=.
[[https://oleksandrmanzyuk.wordpress.com/2014/06/18/from-object-algebras-to-finally-tagless-interpreters-2/][From Object Algebras to Finally Tagless Interpreters]] has better explaination of Expression Problem than me
[[[[https://oleksandrmanzyuk.files.wordpress.com/2014/06/wpid-2014-06-19-232942.png]]]]
** How
With Data Types à la Carte, we now can define Actions anywhere, anytime, further more, it'll let us finally get rid of ugly switch case.
note the difference here
with Data Types à la Carte, you reducer will be "Type" safe and declarative. You'll probably confuse what the hell is =isInjectedBy= or =injector=, I'll explain this further but now you should able to see the logic is pretty declarative and straightforward here.
#+BEGIN_QUOTE
it just filter from all the =Expressions= where they only the same =Type= as =injector=, then interpret these expressions with =interpreter=
#+END_QUOTE
** Expression
#+BEGIN_SRC js
let {Add, Over} = Expr.create({
Add: ['fn'],
Over: ['prop', 'fn']
})
#+END_SRC
=Add= is the name of the expression and =['fn']= means it contains a value named =fn=. since over need a function so Add should contains a function.
=Over= has value =prop= and =fn=
** Interpreter
then, create interpreter for each of them
#+BEGIN_SRC js
// Instances of Interpreters
const evalAdd = interpreterFor(Add, function (v) {
return x => x + v.fn(x)
});
const evalVal = interpreterFor(Val, function (v) {
return ()=> v.value
});
const evalOver = interpreterFor(Over, function (v) {
let newstate = {}
let prop = v.prop()
return state => (newstate[prop] = v.fn(state[prop]), newstate)
});
#+END_SRC
the =Val= Type is built in alacarte.js so you don't need to define the expression type, just simply =import {Val} from 'alacarte.js'= and implement it's interpreter.
compose these interpreters
#+BEGIN_SRC js
let interpreter = interpreterFrom([evalLit, evalAdd])
#+END_SRC
** Injector
create a injector from these functor types
#+BEGIN_SRC js
let injector = injectorFrom([Val, Add, Over])
#+END_SRC
now inject the injector will generate a list of expression constructor
#+BEGIN_SRC js
let [val, add, over] = injector.inject()
#+END_SRC
** Add a new Expression Mult
after all this, let's see how easy to add a new expression with modify any of the existing expressions and there interpreter
- a ADT of Mult
#+BEGIN_SRC js
// a new mult expr is add without modify any of the current code
let {Mult} = Expr.create({
Mult: ['fn'],
})
const evalMult = interpreterFor(Mult, function (v) {
return x => x * v.fn(x)
});
let printMult = interpreterFor(Mult, function (v) {
return `(_ * ${v.fn})`
});
#+END_SRC
Nothing has been modify in existing code, a new expression and it's interpreter just works now.
** a new Interpreter
say we want another interpreter for the expr, like printer
#+BEGIN_SRC js
const printAdd = interpreterFor(Add, function (v) {
return `(_ + ${v.fn})`
});
const printVal = interpreterFor(Val, function (v) {
return v.value.toString()
});
const printOver = interpreterFor(Over, function (v) {
return `over ${v.prop} do ${v.fn}`
});
const printMult = interpreterFor(Mult, function (v) {
return `(_ * ${v.fn})`
});
#+END_SRC
interpert the expr will print out the expression
#+BEGIN_SRC js
interpretExpr(printer)(expr)
#+END_SRC
will print =count + (count * 2)=