Skip to content

Commit 4afbaa3

Browse files
krausestkrausest
committed
Merge branch 'iFaxity-upstream'
2 parents a84d015 + 50bf2d5 commit 4afbaa3

File tree

12 files changed

+527
-0
lines changed

12 files changed

+527
-0
lines changed

‎frameworks/keyed/lit-element/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+
<meta charset="UTF-8">
5+
<title>lit-element</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-loader.js"></script>
8+
<script async src="dist/main.js"></script>
9+
</head>
10+
<body>
11+
<main-element></main-element>
12+
</body>
13+
</html>

‎frameworks/keyed/lit-element/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-lit-element",
3+
"version": "1.1.0",
4+
"description": "lit-element demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "lit-element",
8+
"useShadowRoot": true
9+
},
10+
"scripts": {
11+
"build-dev": "rollup -c -w",
12+
"build-prod": "rollup -c"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
17+
},
18+
"keywords": [
19+
"lit-html"
20+
],
21+
"author": "Christian Norrman",
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+
"lit-element": "^2.2.1"
29+
},
30+
"devDependencies": {
31+
"@rollup/plugin-node-resolve": "^7.1.1",
32+
"rollup": "1.12.3",
33+
"rollup-plugin-minify-html-literals": "^1.2.2",
34+
"rollup-plugin-terser": "5.0.0",
35+
"rollup-plugin-typescript2": "^0.26.0",
36+
"tslib": "^1.11.1",
37+
"typescript": "^3.8.3"
38+
}
39+
}

‎frameworks/keyed/lit-element/rollup.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { terser } from 'rollup-plugin-terser';
2+
import minifyHTML from 'rollup-plugin-minify-html-literals';
3+
import resolve from '@rollup/plugin-node-resolve';
4+
import typescript from 'rollup-plugin-typescript2';
5+
6+
export default {
7+
input: `src/main.ts`,
8+
output: { file: `dist/main.js`, format: 'iife', name: 'app' },
9+
plugins: [
10+
resolve(),
11+
minifyHTML(),
12+
typescript({ typescript: require('typescript'), clean: true }),
13+
terser({ warnings: true, mangle: { module: true } }),
14+
],
15+
};

‎frameworks/keyed/lit-element/src/main.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { LitElement, html, customElement, property } from 'lit-element';
2+
import { repeat } from 'lit-html/directives/repeat';
3+
import { Store } from './store';
4+
5+
const store = new Store();
6+
7+
@customElement('main-element')
8+
export class MainElement extends LitElement {
9+
@property()
10+
_rows = store.data;
11+
12+
@property()
13+
_selected = store.selected;
14+
15+
render() {
16+
return html`
17+
<link href="/css/currentStyle.css" rel="stylesheet"/>
18+
<div class="container">
19+
<div class="jumbotron">
20+
<div class="row">
21+
<div class="col-md-6">
22+
<h1>lit-element keyed</h1>
23+
</div>
24+
<div class="col-md-6">
25+
<div class="row">
26+
<div class="col-sm-6 smallpad">
27+
<button type="button" class="btn btn-primary btn-block" id="run" @click=${this._run}>Create 1,000 rows</button>
28+
</div>
29+
<div class="col-sm-6 smallpad">
30+
<button type="button" class="btn btn-primary btn-block" id="runlots" @click=${this._runLots}>Create 10,000 rows</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type="button" class="btn btn-primary btn-block" id="add" @click=${this._add}>Append 1,000 rows</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button type="button" class="btn btn-primary btn-block" id="update" @click=${this._update}>Update every 10th row</button>
37+
</div>
38+
<div class="col-sm-6 smallpad">
39+
<button type="button" class="btn btn-primary btn-block" id="clear" @click=${this._clear}>Clear</button>
40+
</div>
41+
<div class="col-sm-6 smallpad">
42+
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click=${this._swapRows}>Swap Rows</button>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
<table class="table table-hover table-striped test-data" @click=${this._handleClick}>
49+
<tbody>${repeat(this._rows, item => item.id, item => html`
50+
<tr id=${item.id} class=${item.id == this._selected ? 'danger' : ''}>
51+
<td class="col-md-1">${item.id}</td>
52+
<td class="col-md-4">
53+
<a data-action="select" data-id=${item.id}>${item.label}</a>
54+
</td>
55+
<td class="col-md-1">
56+
<a>
57+
<span class="glyphicon glyphicon-remove" aria-hidden="true"
58+
data-action="remove" data-id=${item.id}></span>
59+
</a>
60+
</td>
61+
<td class="col-md-6"></td>
62+
</tr>`)}
63+
</tbody>
64+
</table>
65+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
66+
</div>
67+
`;
68+
}
69+
70+
_handleClick(e) {
71+
const { action, id } = e.target.dataset
72+
if (action && id) {
73+
this['_' + action](id)
74+
}
75+
}
76+
_add() {
77+
store.add();
78+
this._sync();
79+
}
80+
_remove(id) {
81+
store.delete(id);
82+
this._sync();
83+
}
84+
_select(id) {
85+
store.select(id);
86+
this._sync();
87+
}
88+
_run() {
89+
store.run();
90+
this._sync();
91+
}
92+
_update() {
93+
store.update();
94+
this._sync();
95+
}
96+
_runLots() {
97+
store.runLots();
98+
this._sync();
99+
}
100+
_clear() {
101+
store.clear();
102+
this._sync();
103+
}
104+
_swapRows() {
105+
store.swapRows();
106+
this._sync();
107+
}
108+
_sync() {
109+
this._rows = store.data;
110+
this._selected = store.selected;
111+
}
112+
}

‎frameworks/keyed/lit-element/src/store.ts

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
'use strict';
2+
3+
function _random(max) {
4+
return Math.round(Math.random()*1000)%max;
5+
}
6+
7+
export class Store {
8+
data = [];
9+
selected = undefined;
10+
id = 1;
11+
12+
buildData(count = 1000) {
13+
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"];
14+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
15+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
16+
var data = [];
17+
for (var i = 0; i < count; i++)
18+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
19+
return data;
20+
}
21+
updateData(mod = 10) {
22+
// Just assigning setting each tenth this.data doesn't cause a redraw, the following does:
23+
var newData = [...this.data];
24+
25+
for (let i = 0; i < newData.length; i += 10) {
26+
newData[i].label += ' !!!';
27+
}
28+
this.data = newData;
29+
}
30+
delete(id) {
31+
const idx = this.data.findIndex(d => d.id==id);
32+
this.data = this.data.slice(0, idx).concat(this.data.slice(idx + 1))
33+
}
34+
run() {
35+
this.data = this.buildData();
36+
this.selected = undefined;
37+
}
38+
add() {
39+
this.data = this.data.concat(this.buildData(1000));
40+
}
41+
update() {
42+
this.updateData();
43+
}
44+
select(id) {
45+
this.selected = id;
46+
}
47+
runLots() {
48+
this.data = this.buildData(10000);
49+
this.selected = undefined;
50+
}
51+
clear() {
52+
this.data = [];
53+
this.selected = undefined;
54+
}
55+
swapRows() {
56+
if(this.data.length > 998) {
57+
let d1 = this.data[1];
58+
let d998 = this.data[998];
59+
60+
var newData = this.data.map(function(data, i) {
61+
if(i === 1) {
62+
return d998;
63+
}
64+
else if(i === 998) {
65+
return d1;
66+
}
67+
return data;
68+
});
69+
this.data = newData;
70+
}
71+
}
72+
}

‎frameworks/keyed/lit-element/tsconfig.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es2017",
4+
"module": "es2015",
5+
"moduleResolution": "node",
6+
"lib": ["es2015", "es2017", "esnext.asynciterable", "dom"],
7+
"experimentalDecorators": true
8+
},
9+
"include": [
10+
"src/*"
11+
],
12+
"exclude": []
13+
}

‎frameworks/non-keyed/lit-element/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+
<meta charset="UTF-8">
5+
<title>lit-element</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-loader.js"></script>
8+
<script async src="dist/main.js"></script>
9+
</head>
10+
<body>
11+
<main-element></main-element>
12+
</body>
13+
</html>

‎frameworks/non-keyed/lit-element/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-lit-element",
3+
"version": "1.1.0",
4+
"description": "lit-element demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "lit-element",
8+
"useShadowRoot": true
9+
},
10+
"scripts": {
11+
"build-dev": "rollup -c -w",
12+
"build-prod": "rollup -c"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "git+https://github.com/krausest/js-framework-benchmark.git"
17+
},
18+
"keywords": [
19+
"lit-html"
20+
],
21+
"author": "Christian Norrman",
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+
"lit-element": "^2.2.1"
29+
},
30+
"devDependencies": {
31+
"@rollup/plugin-node-resolve": "^7.1.1",
32+
"rollup": "1.12.3",
33+
"rollup-plugin-minify-html-literals": "^1.2.2",
34+
"rollup-plugin-terser": "5.0.0",
35+
"rollup-plugin-typescript2": "^0.26.0",
36+
"tslib": "^1.11.1",
37+
"typescript": "^3.8.3"
38+
}
39+
}

‎frameworks/non-keyed/lit-element/rollup.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { terser } from 'rollup-plugin-terser';
2+
import minifyHTML from 'rollup-plugin-minify-html-literals';
3+
import resolve from '@rollup/plugin-node-resolve';
4+
import typescript from 'rollup-plugin-typescript2';
5+
6+
export default {
7+
input: `src/main.ts`,
8+
output: { file: `dist/main.js`, format: 'iife', name: 'app' },
9+
plugins: [
10+
resolve(),
11+
minifyHTML(),
12+
typescript({ typescript: require('typescript'), clean: true }),
13+
terser({ warnings: true, mangle: { module: true } }),
14+
],
15+
};

0 commit comments

Comments
 (0)