Skip to content

Commit 9bee7a3

Browse files
krausestkrausest
committed
Merge branch 'ryansolid-stencil'
2 parents d4a0038 + ffec2b0 commit 9bee7a3

File tree

7 files changed

+317
-0
lines changed

7 files changed

+317
-0
lines changed

‎frameworks/keyed/stencil/index.html

+13
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>Stencil-keyed</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<stencil-app></stencil-app>
10+
<script type="module" src="dist/build/js-framework-benchmark.esm.js"></script>
11+
<script nomodule src="dist/build/js-framework-benchmark.js"></script>
12+
</body>
13+
</html>

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

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/stencil/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "stencil",
3+
"version": "0.0.1",
4+
"js-framework-benchmark": {
5+
"frameworkVersionFromPackage": "@stencil/core"
6+
},
7+
"description": "Stencil Demo",
8+
"homepage": "https://github.com/krausest/js-framework-benchmark",
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/krausest/js-framework-benchmark.git"
12+
},
13+
"scripts": {
14+
"build-prod": "stencil build",
15+
"build-dev": "stencil build --dev --watch"
16+
},
17+
"dependencies": {
18+
"@stencil/core": "^2.0.0"
19+
},
20+
"license": "Apache-2.0"
21+
}

‎frameworks/keyed/stencil/src/components.d.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* eslint-disable */
2+
/* tslint:disable */
3+
/**
4+
* This is an autogenerated file created by the Stencil compiler.
5+
* It contains typing information for all components that exist in this project.
6+
*/
7+
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
8+
export namespace Components {
9+
interface StencilApp {
10+
}
11+
}
12+
declare global {
13+
interface HTMLStencilAppElement extends Components.StencilApp, HTMLStencilElement {
14+
}
15+
var HTMLStencilAppElement: {
16+
prototype: HTMLStencilAppElement;
17+
new (): HTMLStencilAppElement;
18+
};
19+
interface HTMLElementTagNameMap {
20+
"stencil-app": HTMLStencilAppElement;
21+
}
22+
}
23+
declare namespace LocalJSX {
24+
interface StencilApp {
25+
}
26+
interface IntrinsicElements {
27+
"stencil-app": StencilApp;
28+
}
29+
}
30+
export { LocalJSX as JSX };
31+
declare module "@stencil/core" {
32+
export namespace JSX {
33+
interface IntrinsicElements {
34+
"stencil-app": LocalJSX.StencilApp & JSXBase.HTMLAttributes<HTMLStencilAppElement>;
35+
}
36+
}
37+
}

‎frameworks/keyed/stencil/src/main.tsx

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { Component, State, h } from "@stencil/core";
2+
3+
let idCounter = 1;
4+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
5+
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
6+
"cheap", "expensive", "fancy"];
7+
const colors = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
8+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
9+
"keyboard"];
10+
11+
function _random(max) {
12+
return Math.round(Math.random() * 1000) % max;
13+
}
14+
15+
function buildData(count) {
16+
let data = new Array(count);
17+
for (let i = 0; i < count; i++) {
18+
const label = `${adjectives[_random(adjectives.length)]} ${
19+
colors[_random(colors.length)]
20+
} ${nouns[_random(nouns.length)]}`;
21+
data[i] = {
22+
id: idCounter++,
23+
label,
24+
};
25+
}
26+
return data;
27+
}
28+
29+
@Component({
30+
tag: "stencil-app",
31+
})
32+
export class Main {
33+
@State() data: any[] = [];
34+
@State() selected: number | undefined;
35+
36+
constructor() {
37+
this.select = this.select.bind(this);
38+
this.delete = this.delete.bind(this);
39+
this.add = this.add.bind(this);
40+
this.run = this.run.bind(this);
41+
this.update = this.update.bind(this);
42+
this.runLots = this.runLots.bind(this);
43+
this.clear = this.clear.bind(this);
44+
this.swapRows = this.swapRows.bind(this);
45+
}
46+
47+
run() {
48+
this.data = buildData(1000);
49+
this.selected = undefined;
50+
}
51+
add() {
52+
this.data = this.data.concat(buildData(1000));
53+
}
54+
update() {
55+
const newData = this.data.slice(0);
56+
57+
for (let i = 0; i < newData.length; i += 10) {
58+
const r = newData[i];
59+
60+
newData[i] = { id: r.id, label: r.label + " !!!" };
61+
}
62+
this.data = newData;
63+
}
64+
select(id: number) {
65+
this.selected = id;
66+
}
67+
delete(id) {
68+
const idx = this.data.findIndex((d) => d.id === id);
69+
this.data = [...this.data.slice(0, idx), ...this.data.slice(idx + 1)];
70+
}
71+
runLots() {
72+
this.data = buildData(10000);
73+
this.selected = undefined;
74+
}
75+
clear() {
76+
this.data = [];
77+
this.selected = undefined;
78+
}
79+
swapRows() {
80+
if (this.data.length > 998) {
81+
this.data = [
82+
this.data[0],
83+
this.data[998],
84+
...this.data.slice(2, 998),
85+
this.data[1],
86+
this.data[999],
87+
];
88+
}
89+
}
90+
91+
render() {
92+
return (
93+
<div class="container">
94+
<div class="jumbotron">
95+
<div class="row">
96+
<div class="col-md-6">
97+
<h1>Stencil Keyed</h1>
98+
</div>
99+
<div class="col-md-6">
100+
<div class="row">
101+
<div class="col-sm-6 smallpad">
102+
<button
103+
id="run"
104+
class="btn btn-primary btn-block"
105+
type="button"
106+
onClick={this.run}
107+
>
108+
Create 1,000 rows
109+
</button>
110+
</div>
111+
<div class="col-sm-6 smallpad">
112+
<button
113+
id="runlots"
114+
class="btn btn-primary btn-block"
115+
type="button"
116+
onClick={this.runLots}
117+
>
118+
Create 10,000 rows
119+
</button>
120+
</div>
121+
<div class="col-sm-6 smallpad">
122+
<button
123+
id="add"
124+
class="btn btn-primary btn-block"
125+
type="button"
126+
onClick={this.add}
127+
>
128+
Append 1,000 rows
129+
</button>
130+
</div>
131+
<div class="col-sm-6 smallpad">
132+
<button
133+
id="update"
134+
class="btn btn-primary btn-block"
135+
type="button"
136+
onClick={this.update}
137+
>
138+
Update every 10th row
139+
</button>
140+
</div>
141+
<div class="col-sm-6 smallpad">
142+
<button
143+
id="clear"
144+
class="btn btn-primary btn-block"
145+
type="button"
146+
onClick={this.clear}
147+
>
148+
Clear
149+
</button>
150+
</div>
151+
<div class="col-sm-6 smallpad">
152+
<button
153+
id="swaprows"
154+
class="btn btn-primary btn-block"
155+
type="button"
156+
onClick={this.swapRows}
157+
>
158+
Swap Rows
159+
</button>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
<table class="table table-hover table-striped test-data">
166+
<tbody>
167+
{this.data.map((row) => (
168+
<tr key={row.id} class={row.id === this.selected ? "danger" : ""}>
169+
<td class="col-md-1">{row.id}</td>
170+
<td class="col-md-4">
171+
<a onClick={() => this.select(row.id)}>{row.label}</a>
172+
</td>
173+
<td class="col-md-1">
174+
<a onClick={() => this.delete(row.id)}>
175+
<span
176+
class="glyphicon glyphicon-remove"
177+
aria-hidden="true"
178+
/>
179+
</a>
180+
</td>
181+
<td class="col-md-6" />
182+
</tr>
183+
))}
184+
</tbody>
185+
</table>
186+
<span
187+
class="preloadicon glyphicon glyphicon-remove"
188+
aria-hidden="true"
189+
/>
190+
</div>
191+
);
192+
}
193+
}

‎frameworks/keyed/stencil/stencil.config.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Config } from "@stencil/core";
2+
3+
// https://stenciljs.com/docs/config
4+
5+
export const config: Config = {
6+
namespace: "JS-Framework-Benchmark",
7+
taskQueue: "immediate",
8+
outputTargets: [
9+
{
10+
type: "www",
11+
dir: "dist",
12+
serviceWorker: null
13+
},
14+
],
15+
};

‎frameworks/keyed/stencil/tsconfig.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": true,
4+
"allowUnreachableCode": false,
5+
"declaration": false,
6+
"experimentalDecorators": true,
7+
"lib": [
8+
"dom",
9+
"es2015"
10+
],
11+
"moduleResolution": "node",
12+
"module": "esnext",
13+
"target": "es2017",
14+
"noUnusedLocals": true,
15+
"noUnusedParameters": true,
16+
"jsx": "react",
17+
"jsxFactory": "h"
18+
},
19+
"include": [
20+
"src"
21+
],
22+
"exclude": [
23+
"node_modules"
24+
]
25+
}

0 commit comments

Comments
 (0)