Skip to content

Commit 1d05ce0

Browse files
krausestkrausest
committed
Merge branch 'mmichlin66-master'
2 parents a6a66c7 + 4970693 commit 1d05ce0

File tree

6 files changed

+96
-85
lines changed

6 files changed

+96
-85
lines changed

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

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

‎frameworks/keyed/mimbl/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-keyed-mimbl",
3-
"version": "0.10.3",
3+
"version": "0.10.4",
44
"description": "Benchmark for Mimbl framework (keyed)",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "mimbl",
@@ -28,6 +28,6 @@
2828
"webpack-cli": "^5.0.1"
2929
},
3030
"dependencies": {
31-
"mimbl": "^0.10.3"
31+
"mimbl": "^0.10.4"
3232
}
3333
}

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

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as mim from "mimbl"
2-
import { TickSchedulingType } from "mimbl";
32

43

54

@@ -68,8 +67,8 @@ class Main extends mim.Component
6867
</div>
6968
<div class="col-md-6">
7069
<div class="row">
71-
<Button id="run" click={this.onCreate1000}>Create 1,000 rows</Button>
72-
<Button id="runlots" click={this.onCreate10000}>Create 10,000 rows</Button>
70+
<Button id="run" click={[this.onCreate, 1000]}>Create 1,000 rows</Button>
71+
<Button id="runlots" click={[this.onCreate, 10000]}>Create 10,000 rows</Button>
7372
<Button id="add" click={this.onAppend1000}>Append 1,000 rows</Button>
7473
<Button id="update" click={this.onUpdateEvery10th}>Update every 10th row</Button>
7574
<Button id="clear" click={this.onClear}>Clear</Button>
@@ -79,62 +78,67 @@ class Main extends mim.Component
7978
</div>
8079
</div>
8180
<table class="table table-hover table-striped test-data">
82-
{this.renderRows}
81+
{this.renderTBody}
8382
</table>
8483
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8584
</div>);
8685
}
8786

88-
private renderRows(): any
87+
private renderTBody(): any
8988
{
9089
return <tbody vnref={this.vnTBody} updateStrategy={{disableKeyedNodeRecycling: true}}>
91-
{this.rows?.map( row =>
92-
<tr class={row.selectedTrigger} key={row}>
93-
<td class="col-md-1">{row.id}</td>
94-
<td class="col-md-4"><a click={[this.onSelectRowClicked, row]}>{row.labelTrigger}</a></td>
95-
<td class="col-md-1">
96-
<a click={[this.onDeleteRowClicked, row]}>
97-
<span class="glyphicon glyphicon-remove" aria-hidden="true"/>
98-
</a>
99-
</td>
100-
<td class="col-md-6"/>
101-
</tr>
102-
)}
90+
{this.renderRows(this.rows)}
10391
</tbody>
10492
}
10593

106-
private onCreate1000()
94+
private renderRows(rows: Row[]): any
10795
{
108-
this.rows = buildRows( 1000);
96+
return rows?.map(row =>
97+
<tr class={row.selectedTrigger} key={row}>
98+
<td class="col-md-1">{row.id}</td>
99+
<td class="col-md-4"><a click={[this.onSelectRowClicked, row]}>{row.labelTrigger}</a></td>
100+
<td class="col-md-1">
101+
<a click={[this.onDeleteRowClicked, row]}>
102+
<span class="glyphicon glyphicon-remove" aria-hidden="true"/>
103+
</a>
104+
</td>
105+
<td class="col-md-6"/>
106+
</tr>
107+
)
108+
}
109+
110+
private onCreate(e: MouseEvent, n: number)
111+
{
112+
this.rows = buildRows(n);
109113
this.selectedRow = undefined;
110114
}
111115

112116
private onAppend1000()
113117
{
114118
let newRows = buildRows( 1000);
115-
this.rows = this.rows ? this.rows.concat( newRows) : newRows;
119+
if (this.rows)
120+
{
121+
this.rows.push(...newRows);
122+
this.vnTBody.growChildren(undefined, this.renderRows(newRows), mim.TickSchedulingType.Sync)
123+
}
124+
else
125+
this.rows = newRows;
116126
}
117127

118128
private onUpdateEvery10th()
119129
{
120-
if (!this.rows)
130+
let len = this.rows?.length
131+
if (!len)
121132
return;
122133

123134
let row: Row;
124-
for (let i = 0; i < this.rows.length; i += 10)
135+
for (let i = 0; i < len; i += 10)
125136
{
126137
row = this.rows[i];
127138
row.labelTrigger.set( row.label += " !!!")
128139
}
129140
}
130141

131-
132-
private onCreate10000()
133-
{
134-
this.rows = buildRows( 10000);
135-
this.selectedRow = undefined;
136-
}
137-
138142
private onClear()
139143
{
140144
this.rows = null;
@@ -148,7 +152,7 @@ class Main extends mim.Component
148152
let t = this.rows[1];
149153
this.rows[1] = this.rows[998];
150154
this.rows[998] = t;
151-
this.vnTBody.swapChildren( 1, 1, 998, 1);
155+
this.vnTBody.swapChildren( 1, 1, 998, 1, mim.TickSchedulingType.Sync);
152156
}
153157
}
154158

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

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

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "js-framework-benchmark-non-keyed-mimbl",
3-
"version": "0.10.3",
3+
"version": "0.10.4",
44
"description": "Benchmark for Mimbl framework (non-keyed)",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "mimbl",
7-
"frameworkHomeURL": "https://mimblweb.z13.web.core.windows.net/"
7+
"frameworkHomeURL": "https://mimjs.com/"
88
},
99
"scripts": {
1010
"build-prod": "webpack"
@@ -15,7 +15,7 @@
1515
],
1616
"author": "Michael Michlin",
1717
"license": "Apache-2.0",
18-
"homepage": "https://mimblweb.z13.web.core.windows.net/",
18+
"homepage": "https://mimjs.com/",
1919
"repository": {
2020
"type": "git",
2121
"url": "https://github.com/krausest/js-framework-benchmark.git"
@@ -28,6 +28,6 @@
2828
"webpack-cli": "^5.0.1"
2929
},
3030
"dependencies": {
31-
"mimbl": "^0.10.3"
31+
"mimbl": "^0.10.4"
3232
}
3333
}

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

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ class Main extends mim.Component
6363
<div class="jumbotron">
6464
<div class="row">
6565
<div class="col-md-6">
66-
<h1>Mimbl (keyed)</h1>
66+
<h1>Mimbl (non-keyed)</h1>
6767
</div>
6868
<div class="col-md-6">
6969
<div class="row">
70-
<Button id="run" click={this.onCreate1000}>Create 1,000 rows</Button>
71-
<Button id="runlots" click={this.onCreate10000}>Create 10,000 rows</Button>
70+
<Button id="run" click={[this.onCreate, 1000]}>Create 1,000 rows</Button>
71+
<Button id="runlots" click={[this.onCreate, 10000]}>Create 10,000 rows</Button>
7272
<Button id="add" click={this.onAppend1000}>Append 1,000 rows</Button>
7373
<Button id="update" click={this.onUpdateEvery10th}>Update every 10th row</Button>
7474
<Button id="clear" click={this.onClear}>Clear</Button>
@@ -78,40 +78,52 @@ class Main extends mim.Component
7878
</div>
7979
</div>
8080
<table class="table table-hover table-striped test-data">
81-
{this.renderRows}
81+
{this.renderTBody}
8282
</table>
8383
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
8484
</div>);
8585
}
8686

87-
private renderRows(): any
87+
private renderTBody(): any
8888
{
8989
return <tbody vnref={this.vnTBody}>
90-
{this.rows?.map( row =>
91-
<tr class={row.selectedTrigger}>
92-
<td class="col-md-1">{row.id}</td>
93-
<td class="col-md-4"><a click={[this.onSelectRowClicked, row]}>{row.labelTrigger}</a></td>
94-
<td class="col-md-1">
95-
<a click={[this.onDeleteRowClicked, row]}>
96-
<span class="glyphicon glyphicon-remove" aria-hidden="true"/>
97-
</a>
98-
</td>
99-
<td class="col-md-6"/>
100-
</tr>
101-
)}
90+
{this.renderRows(this.rows)}
10291
</tbody>
10392
}
10493

105-
private onCreate1000()
94+
private renderRows(rows: Row[]): any
10695
{
107-
this.rows = buildRows( 1000);
96+
return rows?.map(this.renderRow);
97+
}
98+
99+
private renderRow = (row: Row): any =>
100+
<tr class={row.selectedTrigger}>
101+
<td class="col-md-1">{row.id}</td>
102+
<td class="col-md-4"><a click={[this.onSelectRowClicked, row]}>{row.labelTrigger}</a></td>
103+
<td class="col-md-1">
104+
<a click={[this.onDeleteRowClicked, row]}>
105+
<span class="glyphicon glyphicon-remove" aria-hidden="true"/>
106+
</a>
107+
</td>
108+
<td class="col-md-6"/>
109+
</tr>
110+
111+
private onCreate(e: MouseEvent, n: number)
112+
{
113+
this.rows = buildRows(n);
108114
this.selectedRow = undefined;
109115
}
110116

111117
private onAppend1000()
112118
{
113119
let newRows = buildRows( 1000);
114-
this.rows = this.rows ? this.rows.concat( newRows) : newRows;
120+
if (this.rows)
121+
{
122+
this.rows.push(...newRows);
123+
this.vnTBody.growChildren(undefined, this.renderRows(newRows), mim.TickSchedulingType.Sync)
124+
}
125+
else
126+
this.rows = newRows;
115127
}
116128

117129
private onUpdateEvery10th()
@@ -127,13 +139,6 @@ class Main extends mim.Component
127139
}
128140
}
129141

130-
131-
private onCreate10000()
132-
{
133-
this.rows = buildRows( 10000);
134-
this.selectedRow = undefined;
135-
}
136-
137142
private onClear()
138143
{
139144
this.rows = null;
@@ -144,10 +149,12 @@ class Main extends mim.Component
144149
{
145150
if (this.rows && this.rows.length > 998)
146151
{
147-
let t = this.rows[1];
148-
this.rows[1] = this.rows[998];
149-
this.rows[998] = t;
150-
this.vnTBody.swapChildren( 1, 1, 998, 1);
152+
let t1 = this.rows[1];
153+
let t998 = this.rows[998];
154+
this.rows[1] = t998;
155+
this.rows[998] = t1;
156+
this.vnTBody.setChildren(this.renderRow(t998), 1, 2, true, undefined, mim.TickSchedulingType.Sync);
157+
this.vnTBody.setChildren(this.renderRow(t1), 998, 999, true, undefined, mim.TickSchedulingType.Sync);
151158
}
152159
}
153160

0 commit comments

Comments
 (0)