-
Notifications
You must be signed in to change notification settings - Fork 0
/
counter.js
94 lines (82 loc) · 2.4 KB
/
counter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// @flow
import {mem} from 'lom_atom'
import {cloneComponent} from 'reactive-di'
class FirstCounterService {
lang = {
add: 'Add',
error: 'Gen error'
}
@mem get value(): number {
throw new Promise((resolve) => {
setTimeout(() => resolve(1), 500)
})
}
@mem set value(v: number | Error) {
if (typeof v === 'string') {
throw new TypeError('Test error')
}
}
}
function CounterMessageView(
{value}: {
value: number
}) {
return <div rdi_theme>
Count: {value}
</div>
}
function FirstCounterView(
_: {},
counter: FirstCounterService
) {
return <div rdi_theme>
<CounterMessageView id="message" value={counter.value}/>
<button id="add" onClick={() => { counter.value++ }}>{counter.lang.add}</button>
<button id="error" onClick={() => { counter.value = ('someStr': any) }}>{counter.lang.error}</button>
</div>
}
class SecondCounterService extends FirstCounterService {
lang = {
add: 'cloned Add',
error: 'cloned Gen error'
}
}
function SecondCounterMessageView({value}: {value: number}) {
return <div rdi_theme>
SecondCounter Count: {value}
</div>
}
function SecondCounterAddButtonView(
{onClick, children, id}: {
id: string;
onClick: () => void;
children: string
}
) {
return <button id={id} onClick={onClick}>SecondCounterAddButton: {children}</button>
}
const SecondCounterView = cloneComponent(FirstCounterView, [
[FirstCounterService, SecondCounterService],
[CounterMessageView, SecondCounterMessageView],
['add', SecondCounterAddButtonView],
['error', null]
], 'SecondCounterView')
function ThirdCounterAddButtonView(
{onClick, children, id}: {
id: string;
onClick: () => void;
children: string
}
) {
return <button rdi_theme id={id} onClick={onClick}>ThirdCounterAddButton: {children}</button>
}
const ThirdCounterView = cloneComponent(SecondCounterView, [
['add', ThirdCounterAddButtonView]
], 'ThirdCounterView')
export function CounterView() {
return <ul>
<li id="list(first)">FirstCounter: <FirstCounterView id="first"/></li>
<li id="list(second)">SecondCounter extends FirstCounter: <SecondCounterView id="second"/></li>
<li id="list(third)">ThirdCounter extends SecondCounter: <ThirdCounterView id="third"/></li>
</ul>
}