Skip to content

Commit 59b3293

Browse files
krausestkrausest
committed
Merge branch 'jorgebucaran-master'
2 parents 7d7dc2c + 7f4c55c commit 59b3293

File tree

11 files changed

+287
-581
lines changed

11 files changed

+287
-581
lines changed

‎frameworks/keyed/hyperapp/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html lang="en">
33

44
<head>
5-
<title>HyperApp</title>
5+
<title>Hyperapp</title>
66
<link href="/css/currentStyle.css" rel="stylesheet" />
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: 206 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,211 @@
11
import { h, Lazy, app } from "hyperapp"
2-
import { state, actions } from "./store"
2+
import { buildData } from "./store"
33

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

20-
const LazyRow = ({ data, label, styleClass }) => (
21-
<Lazy
22-
view={Row}
23-
data={data}
24-
label={label}
25-
styleClass={styleClass}
26-
/>
27-
);
9+
const append1K = (state) => ({
10+
data: state.data.concat(buildData(1000)),
11+
})
12+
13+
const create1K = () => ({
14+
data: buildData(1000),
15+
})
16+
17+
const create10K = () => ({
18+
data: buildData(10000),
19+
})
20+
21+
const clearAllRows = () => ({
22+
data: [],
23+
})
24+
25+
const deleteRow = (state, id) => ({
26+
data: state.data.filter((d) => d.id !== id),
27+
})
28+
29+
const updateEveryTenth = (state) => ({
30+
data: state.data.map((d, i) => (i % 10 === 0 ? updateRow(d.id, d.label) : d)),
31+
selected: undefined,
32+
})
33+
34+
const selectRow = (state, id) => ({
35+
data: state.data,
36+
selected: id,
37+
})
38+
39+
const swapRows = (state) => {
40+
if (state.data.length <= 998) return state
41+
42+
const temp = state.data[1]
43+
state.data[1] = state.data[998]
44+
state.data[998] = temp
45+
46+
return {
47+
data: state.data,
48+
selected: state.selected,
49+
}
50+
}
51+
52+
const Row = ({ data, label, styleClass }) =>
53+
h(
54+
"tr",
55+
{ key: data.id, class: styleClass },
56+
h("td", { class: "col-md-1" }, data.id),
57+
h(
58+
"td",
59+
{ class: "col-md-4" },
60+
h("a", { onclick: [selectRow, data.id] }, label)
61+
),
62+
h(
63+
"td",
64+
{ class: "col-md-1" },
65+
h(
66+
"a",
67+
{ onclick: [deleteRow, data.id] },
68+
h("span", {
69+
class: "glyphicon glyphicon-remove",
70+
"aria-hidden": "true",
71+
})
72+
)
73+
),
74+
h("td", { class: "col-md-6" })
75+
)
76+
77+
const LazyRow = ({ data, label, styleClass }) =>
78+
Lazy({ view: Row, data, label, styleClass })
2879

2980
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-
});
81+
init: {
82+
data: [],
83+
selected: false,
84+
},
85+
view: (state) =>
86+
h(
87+
"div",
88+
{ class: "container" },
89+
h(
90+
"div",
91+
{ class: "jumbotron" },
92+
h(
93+
"div",
94+
{ class: "row" },
95+
h("div", { class: "col-md-6" }, h("h1", null, "Hyperapp")),
96+
h(
97+
"div",
98+
{ class: "col-md-6" },
99+
h(
100+
"div",
101+
{ class: "row" },
102+
h(
103+
"div",
104+
{ class: "col-sm-6 smallpad" },
105+
h(
106+
"button",
107+
{
108+
type: "button",
109+
class: "btn btn-primary btn-block",
110+
id: "run",
111+
onclick: create1K,
112+
},
113+
"Create 1,000 rows"
114+
)
115+
),
116+
h(
117+
"div",
118+
{ class: "col-sm-6 smallpad" },
119+
h(
120+
"button",
121+
{
122+
type: "button",
123+
class: "btn btn-primary btn-block",
124+
id: "runlots",
125+
onclick: create10K,
126+
},
127+
"Create 10,000 rows"
128+
)
129+
),
130+
h(
131+
"div",
132+
{ class: "col-sm-6 smallpad" },
133+
h(
134+
"button",
135+
{
136+
type: "button",
137+
class: "btn btn-primary btn-block",
138+
id: "add",
139+
onclick: append1K,
140+
},
141+
"Append 1,000 rows"
142+
)
143+
),
144+
h(
145+
"div",
146+
{ class: "col-sm-6 smallpad" },
147+
h(
148+
"button",
149+
{
150+
type: "button",
151+
class: "btn btn-primary btn-block",
152+
id: "update",
153+
onclick: updateEveryTenth,
154+
},
155+
"Update every 10th row"
156+
)
157+
),
158+
h(
159+
"div",
160+
{ class: "col-sm-6 smallpad" },
161+
h(
162+
"button",
163+
{
164+
type: "button",
165+
class: "btn btn-primary btn-block",
166+
id: "clear",
167+
onclick: clearAllRows,
168+
},
169+
"Clear"
170+
)
171+
),
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: "swaprows",
181+
onclick: swapRows,
182+
},
183+
"Swap Rows"
184+
)
185+
)
186+
)
187+
)
188+
)
189+
),
190+
h(
191+
"table",
192+
{ class: "table table-hover table-striped test-data" },
193+
h(
194+
"tbody",
195+
null,
196+
state.data.map((data) =>
197+
LazyRow({
198+
data,
199+
label: data.label,
200+
styleClass: data.id === state.selected ? "danger" : "",
201+
})
202+
)
203+
)
204+
),
205+
h("span", {
206+
class: "preloadicon glyphicon glyphicon-remove",
207+
"aria-hidden": "true",
208+
})
209+
),
210+
node: document.getElementById("app"),
211+
})

0 commit comments

Comments
 (0)