Created
May 10, 2017 10:51
-
-
Save owanturist/c74217c3782b061873d16cf1494cfe07 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| type Attribute<Msg> | |
| = VEvent<Msg> | |
| ; | |
| type Decoder<Msg> = (event: Event) => Msg; | |
| interface VEvent<Msg> { | |
| type: 'V_EVENT'; | |
| key: string; | |
| value: { | |
| decoder: Decoder<Msg>; | |
| }; | |
| } | |
| const VEvent = <Msg>(key: string, decoder: Decoder<Msg>): VEvent<Msg> => ({ | |
| type: 'V_EVENT', | |
| key, | |
| value: { | |
| decoder | |
| } | |
| }); | |
| const onClick = <Msg>(tagger: () => Msg): Attribute<Msg> => | |
| VEvent('click', tagger); | |
| type Html<Msg> | |
| = VNode<Msg> | |
| | VText | |
| ; | |
| interface VNode<Msg> { | |
| type: 'V_NODE'; | |
| tagName: string; | |
| // attrs: any, | |
| attrs: Array<Attribute<Msg>>; | |
| children: Array<Html<Msg>> | |
| } | |
| const VNode = <Msg>( | |
| tagName: string, | |
| attrs: Array<Attribute<Msg>>, | |
| children: Array<Html<Msg>> | |
| ): VNode<Msg> => ({ | |
| type: 'V_NODE', | |
| tagName, | |
| attrs, | |
| children | |
| }); | |
| interface VText { | |
| type: 'V_TEXT'; | |
| text: string; | |
| } | |
| const VText = (text: string): VText => ({ | |
| type: 'V_TEXT', | |
| text | |
| }); | |
| const text: <Msg>(text: string) => Html<Msg> = VText; | |
| const div = <Msg>(attrs: Array<Attribute<Msg>>, children: Array<Html<Msg>>): Html<Msg> => | |
| VNode('div', attrs, children); | |
| const button = <Msg>(attrs: Array<Attribute<Msg>>, children: Array<Html<Msg>>): Html<Msg> => | |
| VNode('button', attrs, children); | |
| type Foo | |
| = Increment | |
| | Decrement | |
| ; | |
| interface Increment { | |
| type: 'INCREMENT'; | |
| } | |
| const Increment = (): Increment => ({ | |
| type: 'INCREMENT' | |
| }); | |
| interface Decrement { | |
| type: 'DECREMENT'; | |
| } | |
| const Decrement = (): Decrement => ({ | |
| type: 'DECREMENT' | |
| }); | |
| interface Reset { | |
| type: 'RESET'; | |
| } | |
| const Reset = (): Reset => ({ | |
| type: 'RESET' | |
| }); | |
| const view = (model: number): Html<Foo> => | |
| div([], [ | |
| div([], [ | |
| button([ | |
| onClick(Decrement) | |
| ], [ | |
| text('-') | |
| ]) | |
| ]), | |
| div([], [ | |
| text(model.toString()) | |
| ]), | |
| div([], [ | |
| button([ | |
| onClick(Increment) | |
| ], [ | |
| text('+') | |
| ]) | |
| ]) | |
| ]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment