Skip to content

Commit 126087d

Browse files
krausestkrausest
committed
Merge branch 'Freak613-master'
2 parents 0703697 + 140fbe4 commit 126087d

File tree

8 files changed

+529
-0
lines changed

8 files changed

+529
-0
lines changed

‎frameworks/keyed/stage0/app.js

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import {h, setupSyntheticEvent} from 'stage0'
2+
import {reconcile} from 'stage0/reconcile'
3+
4+
let did = 1
5+
function buildData(count) {
6+
var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
7+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
8+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
9+
var data = [];
10+
for (var i = 0; i < count; i++) {
11+
data.push({
12+
id: did++,
13+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
14+
});
15+
}
16+
return data;
17+
}
18+
function _random(max) {
19+
return Math.round(Math.random() * 1000) % max;
20+
}
21+
22+
const itemView = h`
23+
<tr>
24+
<td class="col-md-1">#id</td>
25+
<td class="col-md-4">
26+
<a #select>#label</a>
27+
</td>
28+
<td class="col-md-1"><a #del><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
29+
<td class="col-md-6"></td>
30+
</tr>
31+
`
32+
function Item(item, scope) {
33+
const root = itemView.cloneNode(true)
34+
const refs = itemView.collect(root)
35+
36+
const {id, label, select, del} = refs
37+
38+
id.nodeValue = item.id
39+
label.nodeValue = item.label
40+
select.__click = () => scope.select(item)
41+
del.__click = () => scope.del(item)
42+
43+
let a = '', a2,
44+
b = item.label, b2
45+
root.update = function(selected) {
46+
a2 = item.id === selected ? 'danger' : ''
47+
b2 = item.label
48+
49+
if (a2 !== a) a = root.className = a2
50+
if (b2 !== b) b = label.nodeValue = b2
51+
}
52+
53+
return root
54+
}
55+
56+
const mainView = h`
57+
<div class="container" id="main">
58+
<div class="jumbotron">
59+
<div class="row">
60+
<div class="col-md-6">
61+
<h1>stage0</h1>
62+
</div>
63+
<div class="col-md-6">
64+
<div class="row">
65+
<div class="col-sm-6 smallpad">
66+
<button type="button" class="btn btn-primary btn-block" id="run" #run>Create 1,000 rows</button>
67+
</div>
68+
<div class="col-sm-6 smallpad">
69+
<button type="button" class="btn btn-primary btn-block" id="runlots" #runlots>Create 10,000 rows</button>
70+
</div>
71+
<div class="col-sm-6 smallpad">
72+
<button type="button" class="btn btn-primary
73+
btn-block" id="add" #add>Append 1,000 rows</button>
74+
</div>
75+
<div class="col-sm-6 smallpad">
76+
<button type="button" class="btn btn-primary
77+
btn-block" id="update" #update>Update every 10th row</button>
78+
</div>
79+
<div class="col-sm-6 smallpad">
80+
<button type="button" class="btn btn-primary
81+
btn-block" id="clear" #cleardata>Clear</button>
82+
</div>
83+
<div class="col-sm-6 smallpad">
84+
<button type="button" class="btn btn-primary
85+
btn-block" id="swaprows" #swaprows>Swap Rows</button>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<table class="table table-hover table-striped test-data">
92+
<tbody #tbody>
93+
</tbody>
94+
</table>
95+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
96+
</div>
97+
`
98+
function Main() {
99+
setupSyntheticEvent('click')
100+
101+
let root = mainView
102+
let refs = mainView.collect(root)
103+
104+
let data = [],
105+
selected
106+
107+
const {tbody} = refs
108+
109+
refs.run.__click = () => {
110+
data = buildData(1000)
111+
update(0)
112+
}
113+
refs.runlots.__click = () => {
114+
data = buildData(10000)
115+
update(0)
116+
}
117+
refs.add.__click = () => {
118+
data = data.concat(buildData(1000))
119+
update(0)
120+
}
121+
refs.update.__click = () => {
122+
for (let i = 0; i < data.length; i += 10) {
123+
data[i].label += ' !!!'
124+
}
125+
update(1)
126+
}
127+
refs.cleardata.__click = () => {
128+
data = []
129+
update(0)
130+
}
131+
refs.swaprows.__click = () => {
132+
if(data.length > 998) {
133+
var tmp = data[1];
134+
data[1] = data[998];
135+
data[998] = tmp;
136+
}
137+
update(0)
138+
}
139+
140+
const scope = {
141+
select: item => {
142+
selected = parseInt(item.id)
143+
update(1)
144+
},
145+
del: item => {
146+
const id = item.id
147+
const idx = data.findIndex(d => d.id === id);
148+
data.splice(idx, 1)
149+
update(0)
150+
}
151+
}
152+
153+
let renderedData = []
154+
function update(deep) {
155+
reconcile(
156+
tbody,
157+
renderedData,
158+
data,
159+
item => Item(item, scope),
160+
deep ?
161+
node => node.update(selected) :
162+
() => {}
163+
)
164+
renderedData = data.slice()
165+
}
166+
167+
return root
168+
}
169+
170+
const app = Main()
171+
document.getElementById('main').appendChild(app)

‎frameworks/keyed/stage0/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>stage0</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
<script src='dist/app.min.js' type="module"></script>
8+
</head>
9+
<body>
10+
<div id="main"></div>
11+
</body>
12+
</html>

‎frameworks/keyed/stage0/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "js-framework-benchmark-stage0",
3+
"version": "1.0.0",
4+
"description": "stage0 demo",
5+
"main": "dist/app.min.js",
6+
"scripts": {
7+
"build-dev": "rollup -c -w",
8+
"build-prod": "rollup -c",
9+
"start": "ws"
10+
},
11+
"js-framework-benchmark": {
12+
"frameworkVersionFromPackage": "stage0"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
17+
},
18+
"keywords": [
19+
"stage0"
20+
],
21+
"author": "Pavel Martynov",
22+
"license": "Apache-2.0",
23+
"bugs": {
24+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
25+
},
26+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
27+
"dependencies": {
28+
"local-web-server": "^2.6.0",
29+
"stage0": "0.0.2"
30+
},
31+
"devDependencies": {
32+
"babel-core": "^6.26.3",
33+
"babel-plugin-external-helpers": "^6.22.0",
34+
"babel-preset-es2016": "^6.24.1",
35+
"rollup": "^0.58.2",
36+
"rollup-plugin-babel": "^3.0.4",
37+
"rollup-plugin-minifyliterals": "^1.1.0",
38+
"rollup-plugin-node-resolve": "^3.3.0",
39+
"rollup-plugin-terser": "^1.0.1",
40+
"rollup-plugin-uglify": "^3.0.0",
41+
"uglify-es": "^3.3.9"
42+
}
43+
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use strict';
2+
3+
import * as path from 'path';
4+
import babel from 'rollup-plugin-babel';
5+
import resolve from 'rollup-plugin-node-resolve';
6+
import { terser } from "rollup-plugin-terser";
7+
import minifyliterals from 'rollup-plugin-minifyliterals';
8+
9+
export default {
10+
input: 'app.js',
11+
output: {
12+
file: 'dist/app.min.js',
13+
format: 'iife',
14+
name: 'app',
15+
sourcemap: true,
16+
},
17+
plugins: [
18+
resolve({
19+
module: true,
20+
jsnext: true,
21+
browser: true,
22+
}),
23+
minifyliterals(),
24+
babel({
25+
exclude: 'node_modules/**',
26+
presets: [
27+
[ "es2016" ]
28+
],
29+
plugins: [
30+
"external-helpers"
31+
],
32+
runtimeHelpers: true,
33+
babelrc: false,
34+
}),
35+
terser()
36+
],
37+
}

0 commit comments

Comments
 (0)