Skip to content

Commit e9ee3bb

Browse files
krausestkrausest
committed
Merge branch 'ryansolid-vuerx-jsx'
2 parents 818a8e1 + 4733c73 commit e9ee3bb

File tree

4 files changed

+190
-0
lines changed

4 files changed

+190
-0
lines changed

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

‎frameworks/keyed/vuerx-jsx/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "js-framework-benchmark-solid",
3+
"version": "0.0.2",
4+
"main": "dist/main.js",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "vuerx-jsx"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c -w",
10+
"build-prod": "rollup -c --environment production"
11+
},
12+
"author": "Ryan Carniato",
13+
"license": "Apache-2.0",
14+
"homepage": "https://github.com/krausest/js-framework-benchmark",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/krausest/js-framework-benchmark.git"
18+
},
19+
"dependencies": {
20+
"vuerx-jsx": "0.0.2",
21+
"@vue/reactivity": "3.0.0-beta.13"
22+
},
23+
"devDependencies": {
24+
"@babel/core": "7.9.0",
25+
"@rollup/plugin-node-resolve": "7.1.1",
26+
"@rollup/plugin-replace": "2.3.2",
27+
"babel-plugin-jsx-dom-expressions": "0.18.1",
28+
"rollup": "2.10.2",
29+
"rollup-plugin-babel": "4.4.0",
30+
"rollup-plugin-terser": "5.3.0"
31+
}
32+
}

‎frameworks/keyed/vuerx-jsx/rollup.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import resolve from "@rollup/plugin-node-resolve";
2+
import replace from "@rollup/plugin-replace";
3+
import babel from "rollup-plugin-babel";
4+
import { terser } from "rollup-plugin-terser";
5+
6+
const plugins = [
7+
replace({
8+
"process.env.NODE_ENV": JSON.stringify("production")
9+
}),
10+
babel({
11+
exclude: "node_modules/**",
12+
plugins: [["jsx-dom-expressions", { moduleName: "vuerx-jsx" }]],
13+
}),
14+
resolve({ extensions: [".js", ".jsx"] }),
15+
];
16+
17+
if (process.env.production) {
18+
plugins.push(terser());
19+
}
20+
21+
export default {
22+
input: "src/main.jsx",
23+
output: {
24+
file: "dist/main.js",
25+
format: "iife",
26+
},
27+
plugins
28+
};

‎frameworks/keyed/vuerx-jsx/src/main.jsx‎

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

0 commit comments

Comments
 (0)