Skip to content

Commit 7f4c55c

Browse files
jorgebucaranjorgebucaran
committed
Simplify Hyperapp implementation
- User hyperscript - Simplify build configuration - Remove rollup config file - Refactor imperative code to store
1 parent e7e32be commit 7f4c55c

File tree

5 files changed

+117
-134
lines changed

5 files changed

+117
-134
lines changed

‎frameworks/keyed/hyperapp/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88

99
<body>
10-
<div id="main"></div>
10+
<div id="app"></div>
1111
<script src="dist/index.js"></script>
1212
</body>
1313

‎frameworks/keyed/hyperapp/package.json

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,14 @@
1010
"hyperapp": "2.0.4"
1111
},
1212
"devDependencies": {
13-
"babel-core": "^6.26.0",
14-
"babel-plugin-transform-react-jsx": "^6.24.1",
15-
"babel-preset-es2015-rollup": "^3.0.0",
16-
"rollup": "^0.51.3",
17-
"rollup-plugin-babel": "^3.0.2",
18-
"rollup-plugin-node-resolve": "^3.0.0",
19-
"rollup-plugin-uglify": "^2.0.1",
20-
"rollup-watch": "^4.3.1"
13+
"@rollup/plugin-node-resolve": "^7.1.3",
14+
"rollup": "^2.7.6",
15+
"terser": "^4.6.13"
2116
},
2217
"scripts": {
23-
"build-prod": "rollup -cf iife -i src/index.js -o dist/index.js",
24-
"build-dev": "rollup -w -cf iife -m inline -i src/index.js -o dist/index.js"
18+
"build-prod": "npm run bundle && npm run minify",
19+
"bundle": "rollup --no-esModule -p node-resolve -f iife -i src/index.js -o dist/index.js",
20+
"minify": "terser dist/index.js -o dist/index.js -mc --source-map includeSources,url=index.js.map"
2521
},
2622
"keywords": [
2723
"hyperapp"

‎frameworks/keyed/hyperapp/rollup.config.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 34 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,43 @@
11
import { h, Lazy, app } from "hyperapp"
2+
import { buildData } from "./store"
23

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-
]
4+
const updateRow = (id, label) => ({
5+
id,
6+
label: label + " !!!",
7+
})
648

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-
}
9+
const append1K = (state) => ({
10+
data: state.data.concat(buildData(1000)),
11+
})
8012

81-
const run = () => ({ data: buildData(1000) })
13+
const create1K = () => ({
14+
data: buildData(1000),
15+
})
8216

83-
const add = (state) => ({ data: state.data.concat(buildData(1000)) })
17+
const create10K = () => ({
18+
data: buildData(10000),
19+
})
8420

85-
const runLots = () => ({ data: buildData(10000) })
21+
const clearAllRows = () => ({
22+
data: [],
23+
})
8624

87-
const clear = () => ({ data: [] })
25+
const deleteRow = (state, id) => ({
26+
data: state.data.filter((d) => d.id !== id),
27+
})
8828

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-
})),
29+
const updateEveryTenth = (state) => ({
30+
data: state.data.map((d, i) => (i % 10 === 0 ? updateRow(d.id, d.label) : d)),
9431
selected: undefined,
9532
})
9633

34+
const selectRow = (state, id) => ({
35+
data: state.data,
36+
selected: id,
37+
})
38+
9739
const swapRows = (state) => {
98-
if (state.data.length <= 998) {
99-
return state
100-
}
40+
if (state.data.length <= 998) return state
10141

10242
const temp = state.data[1]
10343
state.data[1] = state.data[998]
@@ -109,16 +49,6 @@ const swapRows = (state) => {
10949
}
11050
}
11151

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-
12252
const Row = ({ data, label, styleClass }) =>
12353
h(
12454
"tr",
@@ -178,7 +108,7 @@ app({
178108
type: "button",
179109
class: "btn btn-primary btn-block",
180110
id: "run",
181-
onclick: run,
111+
onclick: create1K,
182112
},
183113
"Create 1,000 rows"
184114
)
@@ -192,7 +122,7 @@ app({
192122
type: "button",
193123
class: "btn btn-primary btn-block",
194124
id: "runlots",
195-
onclick: runLots,
125+
onclick: create10K,
196126
},
197127
"Create 10,000 rows"
198128
)
@@ -206,7 +136,7 @@ app({
206136
type: "button",
207137
class: "btn btn-primary btn-block",
208138
id: "add",
209-
onclick: add,
139+
onclick: append1K,
210140
},
211141
"Append 1,000 rows"
212142
)
@@ -220,7 +150,7 @@ app({
220150
type: "button",
221151
class: "btn btn-primary btn-block",
222152
id: "update",
223-
onclick: update,
153+
onclick: updateEveryTenth,
224154
},
225155
"Update every 10th row"
226156
)
@@ -234,7 +164,7 @@ app({
234164
type: "button",
235165
class: "btn btn-primary btn-block",
236166
id: "clear",
237-
onclick: clear,
167+
onclick: clearAllRows,
238168
},
239169
"Clear"
240170
)
@@ -277,5 +207,5 @@ app({
277207
"aria-hidden": "true",
278208
})
279209
),
280-
node: document.getElementById("main"),
210+
node: document.getElementById("app"),
281211
})

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const adjectives = [
2+
"pretty",
3+
"large",
4+
"big",
5+
"small",
6+
"tall",
7+
"short",
8+
"long",
9+
"handsome",
10+
"plain",
11+
"quaint",
12+
"clean",
13+
"elegant",
14+
"easy",
15+
"angry",
16+
"crazy",
17+
"helpful",
18+
"mushy",
19+
"odd",
20+
"unsightly",
21+
"adorable",
22+
"important",
23+
"inexpensive",
24+
"cheap",
25+
"expensive",
26+
"fancy",
27+
]
28+
29+
const colors = [
30+
"red",
31+
"yellow",
32+
"blue",
33+
"green",
34+
"pink",
35+
"brown",
36+
"purple",
37+
"brown",
38+
"white",
39+
"black",
40+
"orange",
41+
]
42+
43+
const nouns = [
44+
"table",
45+
"chair",
46+
"house",
47+
"bbq",
48+
"desk",
49+
"car",
50+
"pony",
51+
"cookie",
52+
"sandwich",
53+
"burger",
54+
"pizza",
55+
"mouse",
56+
"keyboard",
57+
]
58+
59+
let id = 1
60+
61+
const random = (max) => Math.round(Math.random() * 1000) % max
62+
63+
export const buildData = (count) => {
64+
let data = []
65+
for (let i = 0; i < count; i++)
66+
data.push({
67+
id: id++,
68+
label:
69+
adjectives[random(adjectives.length)] +
70+
" " +
71+
colors[random(colors.length)] +
72+
" " +
73+
nouns[random(nouns.length)],
74+
})
75+
return data
76+
}

0 commit comments

Comments
 (0)