Skip to content

Commit dd9b5b8

Browse files
jcouyangjcouyang
committed
traversable example
1 parent ac9c4f7 commit dd9b5b8

File tree

3 files changed

+171
-93
lines changed

3 files changed

+171
-93
lines changed

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

Lines changed: 65 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
11
import * as React from 'react';
22
import { render } from 'react-dom';
33
import '../../../../../src/xs/rx'
4-
import { Applicative, lift2, Semigroup, Functor, map, Traversable } from '../../../../../src/fantasy'
5-
import { X } from '../../../../../src'
4+
import { Applicative, lift2,Semigroup, Functor, map, Traversable, FlatMap } from '../../../../../src/fantasy'
5+
import {X} from '../../../../../src'
66
function xmount(component, dom) { render(React.createFactory(X)({}, component), dom) }
77

8-
let mult = (x: number, y: number) => x * y
9-
let Xeg1 = lift2<"FantasyX", number, number, number>(mult)(Applicative.FantasyX.pure(6), Applicative.FantasyX.pure(5))
8+
let mult = (x:number,y: number) => x * y
9+
let Xeg1 = lift2<"FantasyX",number, number, number>(mult)(Applicative.FantasyX.pure(6), Applicative.FantasyX.pure(5))
1010

1111
let ViewEg1 = props => <p className="result">{props.product}</p>
1212

13-
let Eg1 = Functor.FantasyX.map(a => ({ product: a }), Xeg1).apply(ViewEg1)
13+
let Eg1 = Functor.FantasyX.map(a=>({product: a}), Xeg1).apply(ViewEg1)
1414

15-
xmount(<Eg1 />, document.getElementById('eg1'))
15+
xmount(<Eg1/>, document.getElementById('eg1') )
1616

17-
import { Xstream } from '../../../../../src/fantasy/xstream';
17+
import {Xstream} from '../../../../../src/fantasy/xstream';
1818

19-
function strToInt(x) { return ~~x }
20-
type Intent = { type: string, value: number }
19+
function strToInt(x) {return ~~x}
20+
type Intent = {type:string, value:number}
2121
let XSinput1 = Xstream.fromEvent('change', 'n1', '5')
2222
let XSinput2 = Xstream.fromEvent('change', 'n2', '6')
2323

2424
let Xeg2 = lift2<"Xstream", number, number, number>(mult)(
25-
Functor.Xstream.map(strToInt, XSinput1),
26-
Functor.Xstream.map(strToInt, XSinput2)
25+
Functor.Xstream.map(strToInt, XSinput1),
26+
Functor.Xstream.map(strToInt, XSinput2)
2727
).toFantasyX()
28-
.map(x => ({ product: x }))
28+
.map(x=>({product: x}))
2929

3030
let ViewEg2 = props => <section>
31-
<p><input type="number" name="n1" onChange={props.actions.fromEvent} defaultValue="5" /></p>
32-
<p><input type="number" name="n2" onChange={props.actions.fromEvent} defaultValue="6" /></p>
31+
<p><input type="number" name="n1" onChange={props.actions.fromEvent} defaultValue="5"/></p>
32+
<p><input type="number" name="n2" onChange={props.actions.fromEvent} defaultValue="6"/></p>
3333
<p><span className="result">{props.product}</span></p>
34-
</section>
34+
</section>
3535

3636
let Eg2 = Xeg2.apply(ViewEg2)
3737

38-
xmount(<Eg2 />, document.getElementById('eg2'))
38+
xmount(<Eg2/>, document.getElementById('eg2') )
3939

4040
let Xeg3 = Semigroup.Xstream.concat(
41-
Semigroup.Xstream.concat(
42-
Xstream.fromEvent('change', 'firstName', 'Jichao'),
43-
Applicative.Xstream.pure(' ')
44-
),
45-
Xstream.fromEvent('change', 'lastName', 'Ouyang')
41+
Semigroup.Xstream.concat(
42+
Xstream.fromEvent('change', 'firstName', 'Jichao'),
43+
Applicative.Xstream.pure(' ')
44+
),
45+
Xstream.fromEvent('change', 'lastName', 'Ouyang')
4646
).toFantasyX()
4747
let ViewEg3 = props => <section>
4848
<p><input type="text" name="firstName" onChange={props.actions.fromEvent} defaultValue="Jichao" /></p>
49-
<p><input type="text" name="lastName" onChange={props.actions.fromEvent} defaultValue="Ouyang" /></p>
49+
<p><input type="text" name="lastName" onChange={props.actions.fromEvent} defaultValue="Ouyang"/></p>
5050
<p><span className="result">{props.semigroup}</span></p>
51-
</section>
51+
</section>
5252

53-
let Eg3 = Xeg3.map(a => ({ semigroup: a })).apply(ViewEg3)
53+
let Eg3 = Xeg3.map(a=>({semigroup: a})).apply(ViewEg3)
5454

55-
xmount(<Eg3 />, document.getElementById('eg3'))
55+
xmount(<Eg3/>, document.getElementById('eg3') )
5656

57-
function sum(list) {
58-
return list.reduce((acc, x) => acc + x, 0)
57+
function sum(list){
58+
return list.reduce((acc,x)=> acc+x, 0)
5959
}
6060
let list = ['1', '2', '3', '4', '5', '6', '7']
6161
let Xeg4 = Traversable.Array.traverse<'Xstream', string, string>('Xstream')(
@@ -66,13 +66,44 @@ let Xeg4 = Traversable.Array.traverse<'Xstream', string, string>('Xstream')(
6666
.map(sum)
6767

6868
let ViewEg4 = props => <section>
69-
{list.map((item, index) => (<p>
70-
<input key={index} type="number" name={"traverse" + index} onChange={props.actions.fromEvent} defaultValue={item} />
71-
</p>))
72-
}
73-
<p><span className="result">{props.sum}</span></p>
69+
{list.map((item, index) => (<p>
70+
<input key={index} type="number" name={"traverse" + index} onChange={props.actions.fromEvent} defaultValue={item} />
71+
</p>))
72+
}
73+
<p><span className="result">{props.sum}</span></p>
7474
</section>
7575

76-
let Eg4 = Xeg4.map(a => ({ sum: a })).apply(ViewEg4)
76+
let Eg4 = Xeg4.map(a=>({sum: a})).apply(ViewEg4)
77+
78+
xmount(<Eg4/>, document.getElementById('eg4') )
79+
80+
function bmiCalc(weight, height) {
81+
return fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
82+
.then(resp => resp.json())
83+
.then(json => json.result)
84+
}
85+
86+
let promiseXstream = lift2<"Xstream", string, string, Promise<any>>(bmiCalc)(
87+
Xstream.fromEvent('change', 'weight', '70'),
88+
Xstream.fromEvent('change', 'height', '175')
89+
)
90+
91+
let Xeg5 = FlatMap.Xstream.flatMap(Xstream.fromPromise, promiseXstream)
92+
.toFantasyX()
93+
94+
let ViewEg5 = props => (
95+
<div>
96+
<label>Height: {props.height} cm
97+
<input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
98+
</label>
99+
<label>Weight: {props.weight} kg
100+
<input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
101+
</label>
102+
<p>HEALTH: <span>{props.health}</span></p>
103+
<p>BMI: <span className="result">{props.bmi}</span></p>
104+
</div>
105+
)
106+
107+
let Eg5 = Xeg5.apply(ViewEg5)
77108

78-
xmount(<Eg4 />, document.getElementById('eg4'))
109+
xmount(<Eg5/>, document.getElementById('eg5') )

‎docs/src/main/tut/examples/index.html‎

Lines changed: 68 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/main/tut/examples/index.org‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
import * as React from 'react';
1212
import { render } from 'react-dom';
1313
import '../../../../../src/xs/rx'
14-
import { Applicative, lift2,Semigroup, Functor, map, Traversable } from '../../../../../src/fantasy'
14+
import { Applicative, lift2,Semigroup, Functor, map, Traversable, FlatMap } from '../../../../../src/fantasy'
1515
import {X} from '../../../../../src'
1616
function xmount(component, dom) { render(React.createFactory(X)({}, component), dom) }
1717
#+END_SRC
@@ -125,45 +125,47 @@ xmount(<Eg3/>, document.getElementById('eg3') )
125125
#+HTML: <p><div id="eg4"></div></p>
126126

127127

128-
# * Example 5: Asynchronous
128+
* Example 5: Asynchronous
129129

130-
# #+BEGIN_SRC js :tangle example.tsx
131-
# function bmiCalc(weight, height) {
132-
# return {
133-
# weight: weight,
134-
# height: height,
135-
# result:fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
136-
# .then(resp => resp.json())
137-
# .then(json => json.result)
138-
# }
139-
# }
140-
141-
# let Xeg5 = lift2(bmiCalc)(
142-
# fromEvent('change', 'weight', '70'),
143-
# fromEvent('change', 'height', '175')
144-
# )
130+
#+BEGIN_SRC js :tangle example.tsx
131+
function bmiCalc(weight, height) {
132+
return fetch(`https://gist.github.com.ru/jcouyang/edc3d175769e893b39e6c5be12a8526f?height=${height}&weight=${weight}`)
133+
.then(resp => resp.json())
134+
.then(json => json.result)
135+
}
145136

146-
# let ViewEg5 = props => (
147-
# <div>
148-
# <label>Height: {props.height} cm
149-
# <input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
150-
# </label>
151-
# <label>Weight: {props.weight} kg
152-
# <input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
153-
# </label>
154-
# <p>HEALTH: <span>{props.health}</span></p>
155-
# <p>BMI: <span className="result">{props.bmi}</span></p>
156-
# </div>
157-
# )
158-
159-
# let Eg5 = Xeg5.apply(ViewEg5)
160-
# #+END_SRC
137+
let xweigth = Xstream.fromEvent('change', 'weight', '70')
138+
let xheight = Xstream.fromEvent('change', 'height', '175')
139+
140+
let promiseXstream = lift2<"Xstream", string, string, Promise<any>>(bmiCalc)(
141+
xweigth,
142+
xheight
143+
)
144+
145+
let Xeg5 = FlatMap.Xstream.flatMap(Xstream.fromPromise, promiseXstream)
146+
.toFantasyX()
147+
148+
let ViewEg5 = props => (
149+
<div>
150+
<label>Height: {props.height} cm
151+
<input type="range" name="height" onChange={props.actions.fromEvent} min="150" max="200" defaultValue={props.height} />
152+
</label>
153+
<label>Weight: {props.weight} kg
154+
<input type="range" name="weight" onChange={props.actions.fromEvent} min="40" max="100" defaultValue={props.weight} />
155+
</label>
156+
<p>HEALTH: <span>{props.health}</span></p>
157+
<p>BMI: <span className="result">{props.bmi}</span></p>
158+
</div>
159+
)
160+
161+
let Eg5 = Xeg5.apply(ViewEg5)
162+
#+END_SRC
161163

162-
# #+BEGIN_SRC js :tangle example.tsx :exports none
163-
# xmount(<Eg5/>, document.getElementById('eg5') )
164-
# #+END_SRC
164+
#+BEGIN_SRC js :tangle example.tsx :exports none
165+
xmount(<Eg5/>, document.getElementById('eg5') )
166+
#+END_SRC
165167

166-
# #+HTML: <p><div id="eg5"></div></p>
168+
#+HTML: <p><div id="eg5"></div></p>
167169

168170
# * Example 6: Fold
169171

0 commit comments

Comments
 (0)