Skip to content

Commit f82b3d2

Browse files
krausestkrausest
committed
Merge branch 'pynnl-master'
2 parents e234928 + 0db43af commit f82b3d2

File tree

5 files changed

+189
-0
lines changed

5 files changed

+189
-0
lines changed

‎frameworks/keyed/naiv/.eslintrc.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
env:
2+
browser: true
3+
es6: true
4+
extends:
5+
- standard
6+
globals:
7+
Atomics: readonly
8+
SharedArrayBuffer: readonly
9+
parserOptions:
10+
ecmaVersion: 2018
11+
sourceType: module
12+
rules:
13+
curly: [2, multi-or-nest, consistent]
14+
no-return-assign: 0
15+
symbol-description: 0

‎frameworks/keyed/naiv/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>naiv</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<script src='dist/main.js'></script>
10+
</body>
11+
</html>

‎frameworks/keyed/naiv/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "js-framework-benchmark-naiv",
3+
"keywords": [],
4+
"license": "MIT",
5+
"author": "pynnl",
6+
"scripts": {
7+
"build-prod": "rollup -c"
8+
},
9+
"devDependencies": {
10+
"eslint": "^6.5.1",
11+
"eslint-config-standard": "^14.1.0",
12+
"eslint-plugin-import": "^2.18.2",
13+
"eslint-plugin-node": "^10.0.0",
14+
"eslint-plugin-promise": "^4.2.1",
15+
"eslint-plugin-standard": "^4.0.1",
16+
"naiv": "0.0.1-1",
17+
"rollup": "^1.23.1",
18+
"rollup-plugin-minify-html-literals": "^1.2.2",
19+
"rollup-plugin-node-resolve": "^5.2.0",
20+
"rollup-plugin-terser": "^5.1.2"
21+
},
22+
"js-framework-benchmark": {
23+
"frameworkVersionFromPackage": "naiv"
24+
}
25+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import resolve from 'rollup-plugin-node-resolve'
2+
import minifyHTML from 'rollup-plugin-minify-html-literals'
3+
import { terser } from 'rollup-plugin-terser'
4+
5+
export default {
6+
input: 'src/index.js',
7+
output: {
8+
format: 'iife',
9+
name: 'naiv',
10+
file: 'dist/main.js'
11+
},
12+
plugins: [
13+
resolve(),
14+
minifyHTML(),
15+
terser()
16+
]
17+
}

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { observable, trigger, html, map } from 'naiv'
2+
3+
// data
4+
let id = 1
5+
const random = max => Math.round(Math.random() * 1000) % max
6+
const buildData = (count = 1000) => {
7+
const 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']
8+
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange']
9+
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard']
10+
const data = []
11+
12+
for (var i = 0; i < count; i++) {
13+
const label = `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`
14+
data.push({
15+
id: id++,
16+
label: observable(label)
17+
})
18+
}
19+
20+
return data
21+
}
22+
23+
// components
24+
const Button = (id, onclick, label) => html`
25+
<div class='col-sm-6 smallpad'>
26+
<button
27+
id=${id}
28+
type='button'
29+
class='btn btn-primary btn-block'
30+
onclick=${onclick}>
31+
${label}
32+
</button>
33+
</div>
34+
`
35+
36+
const App = () => {
37+
let selectedRow
38+
const data = observable([])
39+
40+
// methods
41+
const run = () => data(buildData(1000))
42+
const runlots = () => data(buildData(10000))
43+
const add = () => data(data().concat(buildData(1000)))
44+
const update = () => {
45+
for (let i = 0; i < data.length; i += 10) {
46+
const label = data[i].label
47+
label(label() + ' !!!')
48+
}
49+
}
50+
const clear = () => data([])
51+
const swaprows = () => {
52+
if (data.length > 998) {
53+
const arr = data()
54+
const temp = arr[1]
55+
arr[1] = arr[998]
56+
arr[998] = temp
57+
trigger(data)
58+
}
59+
}
60+
61+
return html`
62+
<div class='container'>
63+
<div class='jumbotron'>
64+
<div class='row'>
65+
<div class='col-md-6'>
66+
<h1>naiv-keyed</h1>
67+
</div>
68+
<div class='col-md-6'>
69+
<div class='row'>
70+
${Button('run', run, 'Create 1,000 rows')}
71+
${Button('runlots', runlots, 'Create 10,000 rows')}
72+
${Button('add', add, 'Append 1,000 rows')}
73+
${Button('update', update, 'Update every 10th row')}
74+
${Button('clear', clear, 'Clear')}
75+
${Button('swaprows', swaprows, 'Swap Rows')}
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<table class='table table-hover table-striped test-data'>
81+
${map(
82+
data,
83+
item => item.id,
84+
html`<tbody id='tbody'></tbody>`,
85+
(item, index) => {
86+
const selected = observable()
87+
88+
// methods
89+
const select = () => {
90+
selected(true)
91+
selectedRow && selectedRow(false)
92+
selectedRow = selected
93+
}
94+
95+
const remove = () => {
96+
data.splice(index(), 1)
97+
trigger(data)
98+
}
99+
100+
return html`
101+
<tr class=${() => selected() ? 'danger' : ''}>
102+
<td class="col-md-1">${item.id}</td>
103+
<td class="col-md-4">
104+
<a onclick=${select}>${item.label}</a>
105+
</td>
106+
<td class="col-md-1">
107+
<a onclick=${remove}>
108+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
109+
</a>
110+
</td>
111+
<td class="col-md-6"></td>
112+
</tr>`
113+
}
114+
)}
115+
</table>
116+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden='true'></span>
117+
</div>
118+
`
119+
}
120+
121+
document.body.append(App())

0 commit comments

Comments
 (0)