Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e2e28d9

Browse files
mmichlin66mmichlin66
committed
Add non-keyed implementation
1 parent 0b0b504 commit e2e28d9

File tree

16 files changed

+617
-2421
lines changed

16 files changed

+617
-2421
lines changed

‎frameworks/keyed/mimbl/OLD_webpack.config.js

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

‎frameworks/keyed/mimbl/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "js-framework-benchmark-mimbl",
2+
"name": "js-framework-benchmark-keyed-mimbl",
33
"version": "0.1.8",
4-
"description": "Benchmark for Mimbl framework",
4+
"description": "Benchmark for Mimbl framework (keyed)",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "mimbl"
77
},
@@ -21,6 +21,7 @@
2121
"url": "https://github.com/krausest/js-framework-benchmark.git"
2222
},
2323
"devDependencies": {
24+
"acorn": "^7.0.0",
2425
"source-map-loader": "0.2.4",
2526
"ts-loader": "6.1.0",
2627
"typescript": "3.6.3",

‎frameworks/non-keyed/mimbl/buildDev.bat

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@echo off
2+
3+
xcopy ..\..\..\..\TS\mimbl\package.json node_modules\mimbl\ /i /y /d >nul
4+
xcopy ..\..\..\..\TS\mimbl\dist\*.* node_modules\mimbl\dist\ /s /i /y /d >nul
5+
6+
webpack --display-error-details

‎frameworks/non-keyed/mimbl/buildProd.bat

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@echo off
2+
3+
xcopy ..\..\..\..\TS\mimbl\package.json node_modules\mimbl\ /i /y /d >nul
4+
xcopy ..\..\..\..\TS\mimbl\dist\*.* node_modules\mimbl\dist\ /s /i /y /d >nul
5+
6+
webpack -p --display-error-details

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

‎frameworks/non-keyed/mimbl/indexDev.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>Mimbl - Dev</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
<script src='node_modules/mimbl/dist/mimbl.dev.js'></script>
8+
</head>
9+
<body>
10+
<div id='main'></div>
11+
<script src='dist/main.dev.js'></script>
12+
</body>
13+
</html>

‎frameworks/non-keyed/mimbl/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "js-framework-benchmark-non-keyed-mimbl",
3+
"version": "0.1.8",
4+
"description": "Benchmark for Mimbl framework (non-keyed)",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "mimbl"
7+
},
8+
"scripts": {
9+
"build-dev": "webpack -w -d",
10+
"build-prod": "webpack -p"
11+
},
12+
"keywords": [
13+
"benchmark",
14+
"mimbl"
15+
],
16+
"author": "Michael Michlin",
17+
"license": "Apache-2.0",
18+
"homepage": "https://mmichlin66.github.io",
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/krausest/js-framework-benchmark.git"
22+
},
23+
"devDependencies": {
24+
"acorn": "^7.0.0",
25+
"source-map-loader": "0.2.4",
26+
"ts-loader": "6.1.0",
27+
"typescript": "3.6.3",
28+
"webpack": "4.34.0",
29+
"webpack-cli": "3.3.4"
30+
},
31+
"dependencies": {
32+
"mimbl": "0.1.8"
33+
}
34+
}

‎frameworks/non-keyed/mimbl/src/Main.tsx

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import * as mim from "mimbl"
2+
import {IMainContainer} from "./Row"
3+
import {Store} from "./Store"
4+
import {TBody} from"./TBody"
5+
6+
7+
// var startTime;
8+
// var lastMeasure;
9+
// var startMeasure = function(name) {
10+
// //console.timeStamp(name);
11+
// startTime = performance.now();
12+
// lastMeasure = name;
13+
// }
14+
// var stopMeasure = function() {
15+
// var last = lastMeasure;
16+
// if (lastMeasure) {
17+
// window.setTimeout(function () {
18+
// lastMeasure = null;
19+
// var stop = performance.now();
20+
// var duration = 0;
21+
// console.log(last+" took "+(stop-startTime));
22+
// }, 0);
23+
// }
24+
// }
25+
26+
export class Main extends mim.Component implements IMainContainer
27+
{
28+
store: Store;
29+
tbody: TBody;
30+
31+
constructor()
32+
{
33+
super();
34+
35+
this.store = new Store();
36+
this.tbody = new TBody( this);
37+
38+
(window as any).app = this;
39+
}
40+
41+
// schedulePrintDuration() {
42+
// this.callMe( () => stopMeasure(), false);
43+
// }
44+
45+
run = () =>
46+
{
47+
// startMeasure("run");
48+
this.tbody.run();
49+
// this.schedulePrintDuration();
50+
}
51+
52+
add = () =>
53+
{
54+
// startMeasure("add");
55+
this.tbody.add();
56+
// this.schedulePrintDuration();
57+
}
58+
59+
update = () =>
60+
{
61+
// startMeasure("update");
62+
this.tbody.update();
63+
// this.schedulePrintDuration();
64+
}
65+
66+
runLots = () =>
67+
{
68+
// startMeasure("runLots");
69+
this.tbody.runLots();
70+
// this.schedulePrintDuration();
71+
}
72+
73+
clear = () =>
74+
{
75+
// startMeasure("clear");
76+
this.tbody.clear();
77+
this.tbody = new TBody( this);
78+
this.updateMe();
79+
// this.schedulePrintDuration();
80+
}
81+
82+
swapRows = () =>
83+
{
84+
// startMeasure("swapRows");
85+
this.tbody.swapRows();
86+
// this.schedulePrintDuration();
87+
}
88+
89+
onSelectRowClicked( row)
90+
{
91+
// startMeasure("select");
92+
this.tbody.onSelectRowClicked(row);
93+
// this.schedulePrintDuration();
94+
}
95+
96+
onDeleteRowClicked( row)
97+
{
98+
// startMeasure("delete");
99+
this.tbody.onDeleteRowClicked(row);
100+
// this.schedulePrintDuration();
101+
}
102+
103+
render()
104+
{
105+
return (<div class="container">
106+
<div class="jumbotron">
107+
<div class="row">
108+
<div class="col-md-6">
109+
<h1>Mimbl</h1>
110+
</div>
111+
<div class="col-md-6">
112+
<div class="row">
113+
<div class="col-sm-6 smallpad">
114+
<button type="button" class="btn btn-primary btn-block" id="run" click={this.run}>Create 1,000 rows</button>
115+
</div>
116+
<div class="col-sm-6 smallpad">
117+
<button type="button" class="btn btn-primary btn-block" id="runlots" click={this.runLots}>Create 10,000 rows</button>
118+
</div>
119+
<div class="col-sm-6 smallpad">
120+
<button type="button" class="btn btn-primary btn-block" id="add" click={this.add}>Append 1,000 rows</button>
121+
</div>
122+
<div class="col-sm-6 smallpad">
123+
<button type="button" class="btn btn-primary btn-block" id="update" click={this.update}>Update every 10th row</button>
124+
</div>
125+
<div class="col-sm-6 smallpad">
126+
<button type="button" class="btn btn-primary btn-block" id="clear" click={this.clear}>Clear</button>
127+
</div>
128+
<div class="col-sm-6 smallpad">
129+
<button type="button" class="btn btn-primary btn-block" id="swaprows" click={this.swapRows}>Swap Rows</button>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
<table class="table table-hover table-striped test-data" updateStrategy={{allowKeyedNodeRecycling:false}}>
136+
{this.tbody}
137+
</table>
138+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
139+
</div>);
140+
}
141+
}
142+
143+
mim.mount( <Main/>, document.getElementById('main'));

‎frameworks/non-keyed/mimbl/src/Row.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import * as mim from "mimbl"
2+
3+
4+
5+
export interface IMainContainer
6+
{
7+
onSelectRowClicked( row: Row): void;
8+
onDeleteRowClicked( row: Row): void;
9+
}
10+
11+
12+
13+
export class Row extends mim.Component
14+
{
15+
main: IMainContainer;
16+
id: number;
17+
label: string;
18+
selected: boolean;
19+
20+
constructor( main: IMainContainer, id: number, label: string)
21+
{
22+
super();
23+
24+
this.main = main;
25+
this.id = id;
26+
this.label = label;
27+
this.selected = false;
28+
}
29+
30+
setItem( newLabel: string, newSelectedID: number)
31+
{
32+
let newSelected = this.id === newSelectedID;
33+
34+
if (newLabel !== this.label || this.selected !== newSelected)
35+
this.updateMe();
36+
37+
this.label = newLabel;
38+
this.selected = newSelected;
39+
}
40+
41+
select( selected: boolean)
42+
{
43+
if (this.selected !== selected)
44+
this.updateMe();
45+
46+
this.selected = selected;
47+
}
48+
49+
onDeleteClicked = () =>
50+
{
51+
this.main.onDeleteRowClicked( this);
52+
}
53+
54+
onSelectClicked = () =>
55+
{
56+
if (this.selected)
57+
return;
58+
59+
this.selected = true;
60+
this.main.onSelectRowClicked( this);
61+
this.updateMe();
62+
}
63+
64+
render()
65+
{
66+
return <tr class={this.selected ? "danger" : undefined}>
67+
<td class="col-md-1">{this.id}</td>
68+
<td class="col-md-4"><a click={this.onSelectClicked}>{this.label}</a></td>
69+
<td class="col-md-1"><a click={this.onDeleteClicked}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
70+
<td class="col-md-6"></td>
71+
</tr>;
72+
}
73+
}
74+

0 commit comments

Comments
 (0)