Skip to content

Commit e7e32be

Browse files
jorgebucaranjorgebucaran
committed
One big file: use hyperscript
1 parent 22dab7e commit e7e32be

File tree

2 files changed

+278
-247
lines changed

2 files changed

+278
-247
lines changed

‎frameworks/keyed/hyperapp/src/index.js

Lines changed: 278 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,281 @@
11
import { h, Lazy, app } from "hyperapp"
2-
import { state, actions } from "./store"
3-
4-
const Row = ({ data, label, styleClass }) => (
5-
<tr key={data.id} class={styleClass}>
6-
<td class="col-md-1">{data.id}</td>
7-
<td class="col-md-4">
8-
<a onclick={[actions.select, data.id]}>{label}</a>
9-
</td>
10-
<td class="col-md-1">
11-
<a onclick={[actions.delete, data.id]}>
12-
<span class="glyphicon glyphicon-remove" aria-hidden="true">
13-
</span>
14-
</a>
15-
</td>
16-
<td class="col-md-6"></td>
17-
</tr>
18-
);
19-
20-
const LazyRow = ({ data, label, styleClass }) => (
21-
<Lazy
22-
view={Row}
23-
data={data}
24-
label={label}
25-
styleClass={styleClass}
26-
/>
27-
);
2+
3+
let id = 1
4+
5+
const random = (max) => Math.round(Math.random() * 1000) % max
6+
7+
const adjectives = [
8+
"pretty",
9+
"large",
10+
"big",
11+
"small",
12+
"tall",
13+
"short",
14+
"long",
15+
"handsome",
16+
"plain",
17+
"quaint",
18+
"clean",
19+
"elegant",
20+
"easy",
21+
"angry",
22+
"crazy",
23+
"helpful",
24+
"mushy",
25+
"odd",
26+
"unsightly",
27+
"adorable",
28+
"important",
29+
"inexpensive",
30+
"cheap",
31+
"expensive",
32+
"fancy",
33+
]
34+
35+
const colors = [
36+
"red",
37+
"yellow",
38+
"blue",
39+
"green",
40+
"pink",
41+
"brown",
42+
"purple",
43+
"brown",
44+
"white",
45+
"black",
46+
"orange",
47+
]
48+
49+
const nouns = [
50+
"table",
51+
"chair",
52+
"house",
53+
"bbq",
54+
"desk",
55+
"car",
56+
"pony",
57+
"cookie",
58+
"sandwich",
59+
"burger",
60+
"pizza",
61+
"mouse",
62+
"keyboard",
63+
]
64+
65+
const buildData = (count) => {
66+
const result = []
67+
for (let i = 0; i < count; i++) {
68+
result.push({
69+
id: id++,
70+
label:
71+
adjectives[random(adjectives.length)] +
72+
" " +
73+
colors[random(colors.length)] +
74+
" " +
75+
nouns[random(nouns.length)],
76+
})
77+
}
78+
return result
79+
}
80+
81+
const run = () => ({ data: buildData(1000) })
82+
83+
const add = (state) => ({ data: state.data.concat(buildData(1000)) })
84+
85+
const runLots = () => ({ data: buildData(10000) })
86+
87+
const clear = () => ({ data: [] })
88+
89+
const update = (state) => ({
90+
data: state.data.map((d, i) => ({
91+
id: d.id,
92+
label: i % 10 === 0 ? `${d.label} !!!` : d.label,
93+
})),
94+
selected: undefined,
95+
})
96+
97+
const swapRows = (state) => {
98+
if (state.data.length <= 998) {
99+
return state
100+
}
101+
102+
const temp = state.data[1]
103+
state.data[1] = state.data[998]
104+
state.data[998] = temp
105+
106+
return {
107+
data: state.data,
108+
selected: state.selected,
109+
}
110+
}
111+
112+
const selectRow = (state, id) => ({
113+
data: state.data,
114+
selected: id,
115+
})
116+
117+
const deleteRow = (state, id) => ({
118+
data: state.data.filter((d) => d.id !== id),
119+
selected: state.selected,
120+
})
121+
122+
const Row = ({ data, label, styleClass }) =>
123+
h(
124+
"tr",
125+
{ key: data.id, class: styleClass },
126+
h("td", { class: "col-md-1" }, data.id),
127+
h(
128+
"td",
129+
{ class: "col-md-4" },
130+
h("a", { onclick: [selectRow, data.id] }, label)
131+
),
132+
h(
133+
"td",
134+
{ class: "col-md-1" },
135+
h(
136+
"a",
137+
{ onclick: [deleteRow, data.id] },
138+
h("span", {
139+
class: "glyphicon glyphicon-remove",
140+
"aria-hidden": "true",
141+
})
142+
)
143+
),
144+
h("td", { class: "col-md-6" })
145+
)
146+
147+
const LazyRow = ({ data, label, styleClass }) =>
148+
Lazy({ view: Row, data, label, styleClass })
28149

29150
app({
30-
init: state,
31-
view: state => (
32-
<div class="container">
33-
<div class="jumbotron">
34-
<div class="row">
35-
<div class="col-md-6">
36-
<h1>Hyperapp</h1>
37-
</div>
38-
<div class="col-md-6">
39-
<div class="row">
40-
<div class="col-sm-6 smallpad">
41-
<button
42-
type="button"
43-
class="btn btn-primary btn-block"
44-
id="run"
45-
onclick={actions.run}
46-
>
47-
Create 1,000 rows
48-
</button>
49-
</div>
50-
<div class="col-sm-6 smallpad">
51-
<button
52-
type="button"
53-
class="btn btn-primary btn-block"
54-
id="runlots"
55-
onclick={actions.runLots}
56-
>
57-
Create 10,000 rows
58-
</button>
59-
</div>
60-
<div class="col-sm-6 smallpad">
61-
<button
62-
type="button"
63-
class="btn btn-primary btn-block"
64-
id="add"
65-
onclick={actions.add}
66-
>
67-
Append 1,000 rows
68-
</button>
69-
</div>
70-
<div class="col-sm-6 smallpad">
71-
<button
72-
type="button"
73-
class="btn btn-primary btn-block"
74-
id="update"
75-
onclick={actions.update}
76-
>
77-
Update every 10th row
78-
</button>
79-
</div>
80-
<div class="col-sm-6 smallpad">
81-
<button
82-
type="button"
83-
class="btn btn-primary btn-block"
84-
id="clear"
85-
onclick={actions.clear}
86-
>
87-
Clear
88-
</button>
89-
</div>
90-
<div class="col-sm-6 smallpad">
91-
<button
92-
type="button"
93-
class="btn btn-primary btn-block"
94-
id="swaprows"
95-
onclick={actions.swapRows}
96-
>
97-
Swap Rows
98-
</button>
99-
</div>
100-
</div>
101-
</div>
102-
</div>
103-
</div>
104-
<table class="table table-hover table-striped test-data">
105-
<tbody>
106-
{state.data.map(data => (
107-
<LazyRow
108-
data={data}
109-
label={data.label}
110-
styleClass={data.id === state.selected ? 'danger' : ''}
111-
/>
112-
))}
113-
</tbody>
114-
</table>
115-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
116-
</div>
117-
),
118-
node: document.getElementById('main')
119-
});
151+
init: {
152+
data: [],
153+
selected: false,
154+
},
155+
view: (state) =>
156+
h(
157+
"div",
158+
{ class: "container" },
159+
h(
160+
"div",
161+
{ class: "jumbotron" },
162+
h(
163+
"div",
164+
{ class: "row" },
165+
h("div", { class: "col-md-6" }, h("h1", null, "Hyperapp")),
166+
h(
167+
"div",
168+
{ class: "col-md-6" },
169+
h(
170+
"div",
171+
{ class: "row" },
172+
h(
173+
"div",
174+
{ class: "col-sm-6 smallpad" },
175+
h(
176+
"button",
177+
{
178+
type: "button",
179+
class: "btn btn-primary btn-block",
180+
id: "run",
181+
onclick: run,
182+
},
183+
"Create 1,000 rows"
184+
)
185+
),
186+
h(
187+
"div",
188+
{ class: "col-sm-6 smallpad" },
189+
h(
190+
"button",
191+
{
192+
type: "button",
193+
class: "btn btn-primary btn-block",
194+
id: "runlots",
195+
onclick: runLots,
196+
},
197+
"Create 10,000 rows"
198+
)
199+
),
200+
h(
201+
"div",
202+
{ class: "col-sm-6 smallpad" },
203+
h(
204+
"button",
205+
{
206+
type: "button",
207+
class: "btn btn-primary btn-block",
208+
id: "add",
209+
onclick: add,
210+
},
211+
"Append 1,000 rows"
212+
)
213+
),
214+
h(
215+
"div",
216+
{ class: "col-sm-6 smallpad" },
217+
h(
218+
"button",
219+
{
220+
type: "button",
221+
class: "btn btn-primary btn-block",
222+
id: "update",
223+
onclick: update,
224+
},
225+
"Update every 10th row"
226+
)
227+
),
228+
h(
229+
"div",
230+
{ class: "col-sm-6 smallpad" },
231+
h(
232+
"button",
233+
{
234+
type: "button",
235+
class: "btn btn-primary btn-block",
236+
id: "clear",
237+
onclick: clear,
238+
},
239+
"Clear"
240+
)
241+
),
242+
h(
243+
"div",
244+
{ class: "col-sm-6 smallpad" },
245+
h(
246+
"button",
247+
{
248+
type: "button",
249+
class: "btn btn-primary btn-block",
250+
id: "swaprows",
251+
onclick: swapRows,
252+
},
253+
"Swap Rows"
254+
)
255+
)
256+
)
257+
)
258+
)
259+
),
260+
h(
261+
"table",
262+
{ class: "table table-hover table-striped test-data" },
263+
h(
264+
"tbody",
265+
null,
266+
state.data.map((data) =>
267+
LazyRow({
268+
data,
269+
label: data.label,
270+
styleClass: data.id === state.selected ? "danger" : "",
271+
})
272+
)
273+
)
274+
),
275+
h("span", {
276+
class: "preloadicon glyphicon glyphicon-remove",
277+
"aria-hidden": "true",
278+
})
279+
),
280+
node: document.getElementById("main"),
281+
})

0 commit comments

Comments
 (0)