Literal Programming FantasyX examples and integration tests

.editorconfig

@@ -1,7 +1,11 @@
 # editorconfig.org
 root = true
 
-[*]
+[Makefile]
+indent_style = tab
+indent_size = 2
+
+[*.ts, *.tsx]
 indent_style = space
 indent_size = 2
 end_of_line = lf

.gitignore

@@ -50,4 +50,5 @@ project/plugins/project/
 .lib/
 
 # End of https://www.gitignore.io/api/sbt
-examples
+/examples
+/docs/**/example.js

Makefile

@@ -0,0 +1,41 @@
+docs = ./docs/**/*
+browserify = ./node_modules/.bin/browserify
+watchify = ./node_modules/.bin/watchify
+uglify = ./node_modules/.bin/uglifyjs
+
+lib/%.js: src/%.ts
+	tsc
+
+all: docs/src/main/tut/examples/example.js browser
+
+test: lib/**/*.js test/**/*.js
+	yarn test
+
+docs/src/main/tut/examples/example.js: docs/src/main/tut/examples/example.tsx
+	$(browserify) -p [tsify -p tsconfig.examples.json] docs/src/main/tut/examples/example.tsx -o docs/src/main/tut/examples/example.js
+
+watch/example: docs/src/main/tut/examples/example.tsx
+	$(watchify) -p [tsify -p tsconfig.examples.json] -t envify docs/src/main/tut/examples/example.tsx -dv -o docs/src/main/tut/examples/example.js
+
+browser: dist/xreact.min.js dist/xreact-most.min.js dist/xreact-rx.min.js
+
+dist/xreact.js: lib/index.js
+	env NODE_ENV=production $(browserify) -t browserify-shim -t envify -x ./lib/xs lib/index.js -s xreact -o $@
+
+dist/xreact-most.js: lib/xs/most.js
+	env NODE_ENV=production $(browserify) -t browserify-shim -t envify -r ./lib/xs lib/xs/most.js -o $@
+
+dist/xreact-rx.js: lib/xs/rx.js
+	env NODE_ENV=production $(browserify) -t browserify-shim -t envify -r ./lib/xs lib/xs/rx.js -o $@
+
+dist/%.min.js: dist/%.js
+	env NODE_ENV=production $(uglify) $(basename $(basename $@)).js -o $@
+
+docs: $(docs)
+	sbt makeMicrosite
+
+docs/publish: $(docs)
+	sbt "project docs" publishMicrosite
+
+clean:
+	rm -rf lib docs/src/main/tut/examples/example.js dist/*

circle.yml

@@ -14,8 +14,8 @@ dependencies:
     - ~/.cache/yarn
 test:
   override:
-    - yarn build
-    - yarn test
+    - make test
+    - make all
   post:
     - bash <(curl -s https://codecov.io/bash)
 deployment:

docs/src/main/tut/Examples.md

@@ -6,6 +6,7 @@ position: 4
 ---
 
 # Counter
+
 <iframe src="https://www.webpackbin.com/bins/-KsSYQVTkFjd_MQon3b9" frameborder="0" width="100%" height="500"></iframe>
 
 ## BMI Calculator

docs/src/main/tut/examples/example.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+import '../../../../../src/xs/rx'
+import { pure, lift2, X, xinput, fromEvent, traverse, fold } from '../../../../../src'
+function xmount(component, dom) { render(React.createFactory(X)({}, component), dom) }
+
+let mult = (x:number,y: number) => x * y
+let Xeg1 = lift2(mult)(pure(6), pure(5))
+
+let ViewEg1 = props => <p className="result">{props.product}</p>
+
+let Eg1 = Xeg1.map(a=>({product: a})).apply(ViewEg1)
+
+xmount(<Eg1/>, document.getElementById('eg1') )
+
+function strToInt(x) {return ~~x}
+
+let Xeg2 = lift2(mult)(
+  fromEvent('change', 'n1', '5').map(strToInt),
+  fromEvent('change', 'n2', '6').map(strToInt)
+)
+
+let ViewEg2 = props => <section>
+  <p><input type="number" name="n1" onChange={props.actions.fromEvent} defaultValue="5"/></p>
+  <p><input type="number" name="n2" onChange={props.actions.fromEvent} defaultValue="6"/></p>
+  <p><span className="result">{props.product}</span></p>
+</section>
+
+let Eg2 = Xeg2.map(a=>({product: a})).apply(ViewEg2)
+
+xmount(<Eg2/>, document.getElementById('eg2') )
+
+let Xeg3 = fromEvent('change', 'firstName', 'Jichao')
+    .concat(pure(' '))
+    .concat(fromEvent('change', 'lastName', 'Ouyang'))
+
+let ViewEg3 = props => <section>
+  <p><input type="text" name="firstName" onChange={props.actions.fromEvent} defaultValue="Jichao" /></p>
+  <p><input type="text" name="lastName" onChange={props.actions.fromEvent} defaultValue="Ouyang"/></p>
+  <p><span className="result">{props.semigroup}</span></p>
+</section>
+
+let Eg3 = Xeg3.map(a=>({semigroup: a})).apply(ViewEg3)
+
+xmount(<Eg3/>, document.getElementById('eg3') )
+
+function sum(list){
+  return list.reduce((acc,x)=> acc+x, 0)
+}
+let list = ['1', '2', '3', '4', '5', '6', '7']
+let Xeg4 = traverse(
+  (defaultVal, index)=>(fromEvent('change', 'traverse'+index, defaultVal)),
+  list
+).map(xs=>xs.map(strToInt))
+    .map(sum)
+
+let ViewEg4 = props => <section>
+{list.map((item, index) => (<p>
+<input key={index} type="number" name={"traverse" + index} onChange={props.actions.fromEvent} defaultValue={item} />
+</p>))
+}
+  <p><span className="result">{props.sum}</span></p>
+</section>
+
+let Eg4 = Xeg4.map(a=>({sum: a})).apply(ViewEg4)
+
+xmount(<Eg4/>, document.getElementById('eg4') )
+
+function bmiCalc(weight, height) {
+  return {
+    weight: weight,
+    height: height,
+    result:fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
+      .then(resp => resp.json())
+      .then(json => json.result)
+  }
+}
+
+let Xeg5 = lift2(bmiCalc)(
+  fromEvent('change', 'weight', '70'),
+  fromEvent('change', 'height', '175')
+)
+
+ let ViewEg5 = props => (
+   <div>
+     <label>Height: {props.height} cm
+       <input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
+     </label>
+     <label>Weight: {props.weight} kg
+       <input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
+     </label>
+     <p>HEALTH: <span>{props.health}</span></p>
+     <p>BMI: <span className="result">{props.bmi}</span></p>
+   </div>
+ )
+
+ let Eg5 = Xeg5.apply(ViewEg5)
+
+xmount(<Eg5/>, document.getElementById('eg5') )
+
+let Xeg6 = fold(
+  (acc:number,i: number) => acc+i,
+  0,
+  fromEvent('click', 'increment').map(x=>1)
+)
+
+let ViewEg6 = props => <p>
+  <span className="result">{props.count}</span>
+  <input type="button" name="increment" value="+1" onClick={e=>props.actions.fromEvent(e)} />
+</p>
+
+let Eg6 = Xeg6.map(a=>({count: a})).apply(ViewEg6)
+
+xmount(<Eg6/>, document.getElementById('eg6') )
+
+let Xeg7 = fold(
+  (acc:number,i: number) => acc+i,
+  0,
+  fromEvent('click', 'increment').map(x=>1)
+    .merge(
+      fromEvent('click', 'decrement').map(x=>-1)
+    )
+)
+
+let ViewEg7 = props => <p>
+    <input type="button" name="decrement" value="-" onClick={e=>props.actions.fromEvent(e)} />
+    <span className="result">{props.count}</span>
+    <input type="button" name="increment" value="+" onClick={e=>props.actions.fromEvent(e)} />
+</p>
+
+let Eg7 = Xeg7.map(a=>({count: a})).apply(ViewEg7)
+
+xmount(<Eg7/>, document.getElementById('eg7') )
+
+const actions = ['-1', '+1', 'reset']
+let Xeg8 = fold(
+  (acc, i) => {
+    switch(i) {
+    case '-1': return acc-1
+    case '+1': return acc+1
+    case 'reset': return 0
+    default: acc
+    }
+  },
+  0,
+  actions.map((action)=>fromEvent('click', action))
+    .reduce((acc,a)=>acc.merge(a)))
+
+let ViewEg8 = props => <p>
+  <span className="result">{props.count}</span>
+  {actions.map(action=>
+    <input type="button" name={action} value={action} onClick={e=>props.actions.fromEvent(e)} />)}
+</p>
+
+let Eg8 = Xeg8.map(a=>({count: a})).apply(ViewEg8)
+
+xmount(<Eg8/>, document.getElementById('eg8') )