Skip to content

Commit 48f403a

Browse files
leeoniyajohan-gorter
leeoniya
authored and
johan-gorter
committed
maquette-v3.0.1-keyed
(cherry picked from commit ab566f4)
1 parent 6e86980 commit 48f403a

File tree

7 files changed

+1102
-2
lines changed

7 files changed

+1102
-2
lines changed

‎maquette-v3.0.1-keyed/build.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const rollup = require('rollup').rollup;
2+
const buble = require('rollup-plugin-buble');
3+
const uglify = require('rollup-plugin-uglify');
4+
const commonjs = require('rollup-plugin-commonjs');
5+
6+
rollup({
7+
input: 'src/main.es6.js',
8+
plugins: [
9+
commonjs(),
10+
buble(),
11+
uglify(),
12+
]
13+
}).then(bundle => bundle.write({
14+
file: 'dist/bundle.js',
15+
format: 'iife'
16+
})).catch(err => console.log(err.stack));

‎maquette-v3.0.1-keyed/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>maquette v3.0.1-keyed</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<script src='dist/bundle.js'></script>
10+
</body>
11+
</html>

‎maquette-v3.0.1-keyed/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "js-framework-benchmark-maquette-keyed",
3+
"version": "3.0.1-non-keyed",
4+
"description": "Benchmark for maquette framework (keyed)",
5+
"scripts": {
6+
"build-dev": "node build.js",
7+
"build-prod": "node build.js"
8+
},
9+
"devDependencies": {
10+
"rollup": "*",
11+
"rollup-plugin-buble": "*",
12+
"rollup-plugin-commonjs": "*",
13+
"rollup-plugin-uglify": "*"
14+
},
15+
"dependencies": {
16+
"maquette": "^3.0.1"
17+
}
18+
}

‎maquette-v3.0.1-keyed/src/main.es6.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import maquette from './maquette.umd.js';
2+
import {Store} from './store.es6';
3+
4+
const h = maquette.h;
5+
const projector = maquette.createProjector();
6+
7+
const store = new Store();
8+
const app = App();
9+
10+
projector.append(document.body, app.render);
11+
12+
function App() {
13+
const jumbo = Jumbotron();
14+
const table = Table();
15+
16+
return {
17+
render: () =>
18+
h("div#main", [
19+
h("div.container", [
20+
jumbo.render(),
21+
table.render(),
22+
h("span.preloadicon.glyphicon.glyphicon-remove", {"aria-hidden": ""})
23+
])
24+
])
25+
};
26+
}
27+
28+
function Jumbotron() {
29+
let exec = name => e => {
30+
store[name]();
31+
};
32+
33+
let run = exec("run");
34+
let runLots = exec("runLots");
35+
let add = exec("add");
36+
let update = exec("update");
37+
let clear = exec("clear");
38+
let swapRows = exec("swapRows");
39+
40+
return {
41+
render: () =>
42+
h("div.jumbotron", [
43+
h("div.row", [
44+
h("div.col-md-6", [
45+
h("h1", ["maquette v3.0.1 (keyed)"])
46+
]),
47+
h("div.col-md-6", [
48+
h("div.row", [
49+
h("div.col-sm-6.smallpad", [
50+
h("button.btn.btn-primary.btn-block#run", {type: "button", onclick: run}, ["Create 1,000 rows"])
51+
]),
52+
h("div.col-sm-6.smallpad", [
53+
h("button.btn.btn-primary.btn-block#runlots", {type: "button", onclick: runLots}, ["Create 10,000 rows"])
54+
]),
55+
h("div.col-sm-6.smallpad", [
56+
h("button.btn.btn-primary.btn-block#add", {type: "button", onclick: add}, ["Append 1,000 rows"])
57+
]),
58+
h("div.col-sm-6.smallpad", [
59+
h("button.btn.btn-primary.btn-block#update", {type: "button", onclick: update}, ["Update every 10th row"])
60+
]),
61+
h("div.col-sm-6.smallpad", [
62+
h("button.btn.btn-primary.btn-block#clear", {type: "button", onclick: clear}, ["Clear"])
63+
]),
64+
h("div.col-sm-6.smallpad", [
65+
h("button.btn.btn-primary.btn-block#swaprows", {type: "button", onclick: swapRows}, ["Swap Rows"])
66+
])
67+
])
68+
])
69+
])
70+
])
71+
};
72+
}
73+
74+
function Table() {
75+
// delegated handler
76+
function tableClick(e) {
77+
var node = e.target;
78+
79+
if (node.matches(".remove, .remove *")) {
80+
while (node.nodeName != "TR")
81+
node = node.parentNode;
82+
store.delete(+node.firstChild.textContent);
83+
e.stopPropagation();
84+
}
85+
else if (node.matches(".lbl")) {
86+
while (node.nodeName != "TR")
87+
node = node.parentNode;
88+
store.select(+node.firstChild.textContent);
89+
e.stopPropagation();
90+
}
91+
}
92+
93+
return {
94+
render: () =>
95+
h("table.table.table-hover.table-striped.test-data", {onclick: tableClick}, [
96+
h("tbody", store.data.map(item =>
97+
h("tr" + (item.id === store.selected ? '.danger' : ''), {key: item.id}, [
98+
h("td.col-md-1", [""+item.id]),
99+
h("td.col-md-4", [
100+
h("a.lbl", [item.label])
101+
]),
102+
h("td.col-md-1", [
103+
h("a.remove", [
104+
h("span.glyphicon.glyphicon-remove", {"aria-hidden": ""})
105+
])
106+
]),
107+
h("td.col-md-6")
108+
])
109+
))
110+
])
111+
};
112+
}

0 commit comments

Comments
 (0)