Skip to content

Commit 4e804d5

Browse files
krausestkrausest
committed
Merge branch 'nolanlawson-nolan/add-lwc-framework'
2 parents c8f5b05 + 1c591ee commit 4e804d5

File tree

8 files changed

+1395
-0
lines changed

8 files changed

+1395
-0
lines changed

‎frameworks/keyed/lwc/index.html

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

‎frameworks/keyed/lwc/lwc.config.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"modules": [
3+
{
4+
"dir": "src/bench"
5+
}
6+
]
7+
}

‎frameworks/keyed/lwc/package-lock.json

Lines changed: 1184 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/lwc/package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "js-framework-benchmark-lwc",
3+
"version": "1.0.0",
4+
"description": "Benchmark for LWC framework",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "lwc"
7+
},
8+
"scripts": {
9+
"build-dev": "rollup -c -w",
10+
"build-prod": "rollup -c --environment production"
11+
},
12+
"dependencies": {
13+
"lwc": "2.5.10"
14+
},
15+
"devDependencies": {
16+
"@lwc/rollup-plugin": "2.5.10",
17+
"@rollup/plugin-replace": "3.0.0",
18+
"rollup": "2.60.0",
19+
"rollup-plugin-terser": "7.0.2"
20+
},
21+
"license": "MIT",
22+
"keywords": [
23+
"LWC",
24+
"Lightning Web Components"
25+
],
26+
"authors": [
27+
"Dinko Bajric <[email protected]>",
28+
"Pierre-Marie Dartus <[email protected]>",
29+
"Nolan Lawson <[email protected]>"
30+
],
31+
"repository": {
32+
"type": "git",
33+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
34+
},
35+
"bugs": {
36+
"url": "https://github.com/krausest/js-framework-benchmark/issues"
37+
},
38+
"homepage": "https://github.com/krausest/js-framework-benchmark#readme"
39+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { terser } from 'rollup-plugin-terser';
2+
import replace from '@rollup/plugin-replace';
3+
import lwc from '@lwc/rollup-plugin';
4+
5+
const isProduction = process.env.production;
6+
7+
export default {
8+
input: 'src/index.js',
9+
output: {
10+
file: 'dist/index.js',
11+
format: 'iife',
12+
},
13+
plugins: [
14+
lwc(),
15+
replace({
16+
preventAssignment: true,
17+
'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
18+
}),
19+
isProduction && terser()
20+
],
21+
}

‎frameworks/keyed/lwc/src/bench/app/app.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template lwc:render-mode="light">
2+
<div class="jumbotron">
3+
<div class="row">
4+
<div class="col-md-6">
5+
<h1>LWC</h1>
6+
</div>
7+
<div class="col-md-6">
8+
<div class="row">
9+
<div class="col-sm-6 smallpad">
10+
<button type="button" class="btn btn-primary btn-block" id="run" onclick={run}>Create 1,000 rows</button>
11+
</div>
12+
<div class="col-sm-6 smallpad">
13+
<button type="button" class="btn btn-primary btn-block" id="runlots" onclick={runLots}>Create 10,000 rows</button>
14+
</div>
15+
<div class="col-sm-6 smallpad">
16+
<button type="button" class="btn btn-primary btn-block" id="add" onclick={add}>Append 1,000 rows</button>
17+
</div>
18+
<div class="col-sm-6 smallpad">
19+
<button type="button" class="btn btn-primary btn-block" id="update" onclick={update}>Update every 10th row</button>
20+
</div>
21+
<div class="col-sm-6 smallpad">
22+
<button type="button" class="btn btn-primary btn-block" id="clear" onclick={clear}>Clear</button>
23+
</div>
24+
<div class="col-sm-6 smallpad">
25+
<button type="button" class="btn btn-primary btn-block" id="swaprows" onclick={swapRows}>Swap Rows</button>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
<table class="table table-hover table-striped test-data" onclick={handleRowClick}>
32+
<tbody>
33+
<template for:each={rows} for:item="row">
34+
<tr key={row.id} class={row.className} data-id={row.id}>
35+
<td class="col-md-1">{row.id}</td>
36+
<td class="col-md-4" data-interaction="select">
37+
<a data-id={row.id} data-interaction="select">{row.label}</a>
38+
</td>
39+
<td class="col-md-1">
40+
<a data-interaction="remove" data-id={row.id}>
41+
<span data-interaction="remove" data-id={row.id} class="glyphicon glyphicon-remove" aria-hidden="true"></span>
42+
</a>
43+
</td>
44+
<td class="col-md-6"></td>
45+
</tr>
46+
</template>
47+
</tbody>
48+
</table>
49+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
50+
</template>

‎frameworks/keyed/lwc/src/bench/app/app.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { LightningElement, track } from 'lwc';
2+
3+
let id = 1;
4+
5+
function _random(max) {
6+
return Math.round(Math.random() * 1000) % max;
7+
}
8+
9+
export default class App extends LightningElement {
10+
static renderMode = 'light';
11+
@track rows = [];
12+
selected;
13+
14+
run() {
15+
this.rows = this.buildData();
16+
this.selected = undefined;
17+
}
18+
runLots() {
19+
this.rows = this.buildData(10000);
20+
this.selected = undefined;
21+
}
22+
delete(id) {
23+
const idx = this.rows.findIndex(row => row.id === id);
24+
this.rows.splice(idx, 1);
25+
}
26+
add() {
27+
this.rows.push(...this.buildData(1000));
28+
}
29+
update() {
30+
for (let i = 0, len = this.rows.length; i < len; i += 10) {
31+
this.rows[i].label += ' !!!';
32+
}
33+
}
34+
select(id) {
35+
this.selected = id;
36+
}
37+
clear() {
38+
this.rows.length = 0;
39+
this.selected = undefined;
40+
}
41+
swapRows() {
42+
if (this.rows.length > 998) {
43+
const row = this.rows[1];
44+
this.rows[1] = this.rows[998];
45+
this.rows[998] = row;
46+
}
47+
}
48+
handleRowClick(evt) {
49+
const { target } = evt;
50+
const { interaction, id } = target.dataset;
51+
52+
if (interaction === 'select') {
53+
this.select(parseInt(id, 10));
54+
} else if (interaction === 'remove') {
55+
this.delete(parseInt(id, 10));
56+
}
57+
}
58+
buildData(count = 1000) {
59+
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"];
60+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
61+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
62+
const data = [];
63+
const component = this;
64+
for (let i = 0; i < count; i++) {
65+
data.push({
66+
id: id++,
67+
label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)],
68+
get className() {
69+
return this.id === component.selected ? 'danger' : '';
70+
}
71+
});
72+
}
73+
return data;
74+
}
75+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import App from "bench/app";
2+
import { createElement } from "lwc";
3+
4+
const element = createElement("bench-app", { is: App });
5+
const container = document.getElementById("main");
6+
container.appendChild(element);

0 commit comments

Comments
 (0)