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
95
96
97
98
99
100
101
102
103
104
105
106
|
=== tests/cases/conformance/jsx/file.tsx ===
declare var vdom: any;
>vdom : Symbol(vdom, Decl(file.tsx, 0, 11))
declare var ctrl: any;
>ctrl : Symbol(ctrl, Decl(file.tsx, 1, 11))
declare var model: any;
>model : Symbol(model, Decl(file.tsx, 2, 11))
// A simple render function with nesting and control statements
let render = (ctrl, model) =>
>render : Symbol(render, Decl(file.tsx, 5, 3))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>model : Symbol(model, Decl(file.tsx, 5, 19))
<section class="todoapp">
>class : Symbol(class, Decl(file.tsx, 6, 12))
<header class="header">
>class : Symbol(class, Decl(file.tsx, 7, 15))
<h1>todos <x></h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" value={model.newTodo} onKeyup={ctrl.addTodo.bind(ctrl, model)} />
>class : Symbol(class, Decl(file.tsx, 9, 18))
>autofocus : Symbol(autofocus, Decl(file.tsx, 9, 35))
>autocomplete : Symbol(autocomplete, Decl(file.tsx, 9, 45))
>placeholder : Symbol(placeholder, Decl(file.tsx, 9, 64))
>value : Symbol(value, Decl(file.tsx, 9, 101))
>model : Symbol(model, Decl(file.tsx, 5, 19))
>onKeyup : Symbol(onKeyup, Decl(file.tsx, 9, 123))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>model : Symbol(model, Decl(file.tsx, 5, 19))
</header>
<section class="main" style={{display:(model.todos && model.todos.length) ? "block" : "none"}}>
>class : Symbol(class, Decl(file.tsx, 11, 16))
>style : Symbol(style, Decl(file.tsx, 11, 29))
>display : Symbol(display, Decl(file.tsx, 11, 38))
>model : Symbol(model, Decl(file.tsx, 5, 19))
>model : Symbol(model, Decl(file.tsx, 5, 19))
<input class="toggle-all" type="checkbox" onChange={ctrl.toggleAll.bind(ctrl)}/>
>class : Symbol(class, Decl(file.tsx, 12, 18))
>type : Symbol(type, Decl(file.tsx, 12, 37))
>onChange : Symbol(onChange, Decl(file.tsx, 12, 53))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
<ul class="todo-list">
>class : Symbol(class, Decl(file.tsx, 13, 15))
{model.filteredTodos.map((todo) =>
>model : Symbol(model, Decl(file.tsx, 5, 19))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
<li class={{todo: true, completed: todo.completed, editing: todo == model.editedTodo}}>
>class : Symbol(class, Decl(file.tsx, 15, 23))
>todo : Symbol(todo, Decl(file.tsx, 15, 32))
>completed : Symbol(completed, Decl(file.tsx, 15, 43))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
>editing : Symbol(editing, Decl(file.tsx, 15, 70))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
>model : Symbol(model, Decl(file.tsx, 5, 19))
<div class="view">
>class : Symbol(class, Decl(file.tsx, 16, 28))
{(!todo.editable) ?
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
<input class="toggle" type="checkbox"></input>
>class : Symbol(class, Decl(file.tsx, 18, 38))
>type : Symbol(type, Decl(file.tsx, 18, 53))
: null
}
<label onDoubleClick={()=>{ctrl.editTodo(todo)}}>{todo.title}</label>
>onDoubleClick : Symbol(onDoubleClick, Decl(file.tsx, 21, 34))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
<button class="destroy" onClick={ctrl.removeTodo.bind(ctrl,todo)}></button>
>class : Symbol(class, Decl(file.tsx, 22, 35))
>onClick : Symbol(onClick, Decl(file.tsx, 22, 51))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>ctrl : Symbol(ctrl, Decl(file.tsx, 5, 14))
>todo : Symbol(todo, Decl(file.tsx, 14, 42))
<div class="iconBorder">
>class : Symbol(class, Decl(file.tsx, 23, 32))
<div class="icon"/>
>class : Symbol(class, Decl(file.tsx, 24, 36))
</div>
</div>
</li>
)}
</ul>
</section>
</section>
|
