Skip to content

Commit 84a283d

Browse files
dsvorc41dsvorc41
committed
Render dummy data on the page by default
1 parent 70a09e7 commit 84a283d

File tree

9 files changed

+119
-66
lines changed

9 files changed

+119
-66
lines changed

‎frameworks/keyed/fast/index.html

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,7 @@
88
<body>
99
<div id="main">
1010
<div class="container">
11-
<div class="jumbotron">
12-
<div class="row">
13-
<div class="col-md-6">
14-
<h1>Fast-"keyed"</h1>
15-
</div>
16-
<div class="col-md-6">
17-
<div class="row">
18-
<div class="col-sm-6 smallpad">
19-
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
20-
</div>
21-
<div class="col-sm-6 smallpad">
22-
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
23-
</div>
24-
<div class="col-sm-6 smallpad">
25-
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
26-
</div>
27-
<div class="col-sm-6 smallpad">
28-
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
29-
</div>
30-
<div class="col-sm-6 smallpad">
31-
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
32-
</div>
33-
<div class="col-sm-6 smallpad">
34-
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
35-
</div>
36-
</div>
37-
</div>
38-
</div>
39-
</div>
40-
<table class="table table-hover table-striped test-data">
41-
<tbody id="tbody"></tbody>
42-
</table>
11+
<benchmark-app></benchmark-app>
4312
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
4413
</div>
4514
</div>

‎frameworks/keyed/fast/src/ActionTriggers.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { customElement, FASTElement, html, attr, css, FAST } from '@microsoft/fast-element';
2+
3+
const template = html<ActionTriggers>`
4+
<div class="col-sm-6 smallpad">
5+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.run()}>Create 1,000 rows</button>
6+
</div>
7+
<div class="col-sm-6 smallpad">
8+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.runlots()}>Create 10,000 rows</button>
9+
</div>
10+
<div class="col-sm-6 smallpad">
11+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.add()}>Append 1,000 rows</button>
12+
</div>
13+
<div class="col-sm-6 smallpad">
14+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.update()}>Update every 10th row</button>
15+
</div>
16+
<div class="col-sm-6 smallpad">
17+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.clear()}>Clear</button>
18+
</div>
19+
<div class="col-sm-6 smallpad">
20+
<button type="button" class="btn btn-primary btn-block" @click=${x => x.swaprows()}>Swap Rows</button>
21+
</div>
22+
`;
23+
24+
/**
25+
* We're using `shadowOptions: null` to avoid Shadow DOM.
26+
* This way we can get global Bootstrap styles applied
27+
* because our component is rendered to Light DOM.
28+
*
29+
* https://www.fast.design/docs/fast-element/working-with-shadow-dom#shadow-dom-configuration
30+
*/
31+
@customElement({
32+
name: 'action-triggers',
33+
template,
34+
shadowOptions: null
35+
})
36+
export class ActionTriggers extends FASTElement {
37+
public run() {}
38+
public runlots() {}
39+
public add() {}
40+
public update() {}
41+
public clear() {}
42+
public swaprows() {}
43+
}

‎frameworks/keyed/fast/src/App.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import './index'; // import all our components
2+
import { customElement, FASTElement, html, attr, css, FAST, repeat } from '@microsoft/fast-element';
3+
import { DataItem, buildData } from './utils/build-dummy-data';
4+
5+
const template = html<BenchmarkApp>`
6+
<div class="jumbotron">
7+
<div class="row">
8+
<div class="col-md-6">
9+
<h1>Fast-"keyed"</h1>
10+
</div>
11+
<div class="col-md-6">
12+
<div class="row">
13+
<action-triggers></action-triggers>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
<table class="table table-hover table-striped test-data">
19+
<tbody id="tbody">
20+
${repeat(
21+
x => x.data,
22+
html<DataItem>`
23+
<tr data-id="${x => x.id}">
24+
<td class="col-md-1">${x => x.id}</td>
25+
<td class="col-md-4">
26+
<a class="lbl">${x => x.label}</a>
27+
</td>
28+
<td class="col-md-1">
29+
<a class="remove"> <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span></a>
30+
</td>
31+
<td class="col-md-6"></td>
32+
</tr>
33+
`
34+
)}
35+
</tbody>
36+
</table>
37+
`;
38+
39+
/**
40+
* We're using `shadowOptions: null` to avoid Shadow DOM.
41+
* This way we can get global Bootstrap styles applied
42+
* because our component is rendered to Light DOM.
43+
*
44+
* https://www.fast.design/docs/fast-element/working-with-shadow-dom#shadow-dom-configuration
45+
*/
46+
@customElement({
47+
name: 'benchmark-app',
48+
template,
49+
shadowOptions: null
50+
})
51+
export class BenchmarkApp extends FASTElement {
52+
data: DataItem[];
53+
54+
constructor() {
55+
super();
56+
this.data = buildData();
57+
}
58+
}

‎frameworks/keyed/fast/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './ActionTriggers';

‎frameworks/keyed/fast/src/main.ts

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1-
import { FASTElement, customElement } from '@microsoft/fast-element';
2-
import { DataItem, buildData } from './build-dummy-data';
1+
import './index';
2+
import { DataItem, buildData } from './utils/build-dummy-data';
33

44
class DataStore {
55
data: DataItem[];
6+
backup?: DataItem[];
7+
selectedId: number;
8+
id: number;
69

710
constructor() {
811
this.data = buildData();
12+
this.backup = undefined;
13+
this.selectedId = -1;
14+
this.id = 1;
915
}
1016
}
1117

12-
new DataStore();
18+
class Main {
19+
dataStore: DataStore;
20+
21+
constructor() {
22+
this.dataStore = new DataStore();
23+
}
24+
}

‎frameworks/keyed/fast/src/todo-item.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { customElement, FASTElement, html, attr, css, FAST } from '@microsoft/fast-element';
2-
import { typography } from './typography';
32
import { provideFASTDesignSystem, fastButton, fastCheckbox } from '@microsoft/fast-components';
43
provideFASTDesignSystem().register(fastButton()).register(fastCheckbox());
54

@@ -10,8 +9,6 @@ const template = html<TodoItem>`
109
`;
1110

1211
const styles = css`
13-
${typography}
14-
1512
:host {
1613
display: flex;
1714
}

‎frameworks/keyed/fast/src/typography.ts

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎frameworks/keyed/fast/src/build-dummy-data.ts renamed to ‎frameworks/keyed/fast/src/utils/build-dummy-data.ts

File renamed without changes.

‎frameworks/keyed/fast/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function (env, { mode }) {
1010
return {
1111
mode: production ? 'production' : 'development',
1212
entry: {
13-
app: ['./src/main.ts']
13+
app: ['./src/App.ts']
1414
},
1515
output: {
1616
filename: 'bundle.js',

0 commit comments

Comments
 (0)