Skip to content

Commit 95f6619

Browse files
krausestkrausest
committed
Merge branch 'mmichlin66-master'
2 parents 0b96e82 + 72c03fb commit 95f6619

File tree

10 files changed

+408
-489
lines changed

10 files changed

+408
-489
lines changed

‎frameworks/keyed/mimbl/indexDev.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<title>Mimbl (keyed) - Dev</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
7-
<script src='node_modules/mimcss/lib/mimcss.dev.js'></script>
87
<script src='node_modules/mimbl/lib/mimbl.dev.js'></script>
98
</head>
109
<body>

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

Lines changed: 217 additions & 171 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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-framework-benchmark-keyed-mimbl",
3-
"version": "0.6.2",
3+
"version": "0.6.5",
44
"description": "Benchmark for Mimbl framework (keyed)",
55
"js-framework-benchmark": {
66
"frameworkVersionFromPackage": "mimbl"
@@ -21,12 +21,12 @@
2121
},
2222
"devDependencies": {
2323
"source-map-loader": "2.0.0",
24-
"ts-loader": "8.0.14",
24+
"ts-loader": "8.0.13",
2525
"typescript": "4.1.3",
2626
"webpack": "5.11.1",
27-
"webpack-cli": "4.3.1"
27+
"webpack-cli": "^4.6.0"
2828
},
2929
"dependencies": {
30-
"mimbl": "0.6.2"
30+
"mimbl": "^0.6.5"
3131
}
3232
}

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

Lines changed: 58 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -36,33 +36,54 @@ function Button( props: mim.IHtmlButtonElementProps, children: any[]): any
3636

3737
class Main extends mim.Component
3838
{
39-
nextID = 1;
40-
41-
// Flat array of Row components
4239
private rows: Row[] = null;
43-
44-
// Currently selected Row component
4540
public selectedRow: Row = undefined;
41+
private vnTBody: mim.IElmVN<HTMLElement>;
4642

43+
public render()
44+
{
45+
return (<div class="container">
46+
<div class="jumbotron">
47+
<div class="row">
48+
<div class="col-md-6">
49+
<h1>Mimbl (keyed)</h1>
50+
</div>
51+
<div class="col-md-6">
52+
<div class="row">
53+
<Button id="run" click={this.onCreate1000}>Create 1,000 rows</Button>
54+
<Button id="runlots" click={this.onCreate10000}>Create 10,000 rows</Button>
55+
<Button id="add" click={this.onAppend1000}>Append 1,000 rows</Button>
56+
<Button id="update" click={this.onUpdateEvery10th}>Update every 10th row</Button>
57+
<Button id="clear" click={this.onClear}>Clear</Button>
58+
<Button id="swaprows" click={this.onSwapRows}>Swap Rows</Button>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
<table class="table table-hover table-striped test-data">
64+
<tbody vnref={(r) => this.vnTBody = r} updateStrategy={{disableKeyedNodeRecycling: true}}>
65+
{this.rows}
66+
</tbody>
67+
</table>
68+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
69+
</div>);
70+
}
4771

48-
49-
onCreate1000()
72+
private onCreate1000()
5073
{
5174
this.rows = buildRows( this, 1000);
5275
this.selectedRow = undefined;
53-
this.updateMe( this.renderRows);
54-
// this.vnRefTBody.r.setChildren( this.rows);
76+
this.vnTBody.setChildren( this.rows);
5577
}
5678

57-
onAppend1000()
79+
private onAppend1000()
5880
{
5981
let newRows = buildRows( this, 1000);
6082
this.rows = this.rows ? this.rows.concat( newRows) : newRows;
61-
this.updateMe( this.renderRows);
62-
// this.vnRefTBody.r.setChildren( this.rows);
83+
this.vnTBody.growChildren( undefined, newRows);
6384
}
6485

65-
onUpdateEvery10th()
86+
private onUpdateEvery10th()
6687
{
6788
if (!this.rows)
6889
return;
@@ -71,99 +92,53 @@ class Main extends mim.Component
7192
this.rows[i].updateLabel()
7293
}
7394

74-
onCreate10000()
95+
private onCreate10000()
7596
{
7697
this.rows = buildRows( this, 10000);
7798
this.selectedRow = undefined;
78-
this.updateMe( this.renderRows);
79-
// this.vnRefTBody.r.setChildren( this.rows);
99+
this.vnTBody.setChildren( this.rows);
80100
}
81101

82-
onClear()
102+
private onClear()
83103
{
84104
this.rows = null;
85105
this.selectedRow = undefined;
86-
this.updateMe( this.renderRows);
87-
// this.vnRefTBody.r.setChildren( this.rows);
106+
this.vnTBody.setChildren( null);
88107
}
89108

90-
onSwapRows()
109+
private onSwapRows()
91110
{
92111
if (this.rows && this.rows.length > 998)
93112
{
94113
let t = this.rows[1];
95114
this.rows[1] = this.rows[998];
96115
this.rows[998] = t;
97-
this.updateMe( this.renderRows);
98-
// this.vnRefTBody.r.setChildren( this.rows);
116+
this.vnTBody.swapChildren( 1, 1, 998, 1);
99117
}
100118
}
101119

102-
onSelectRowClicked( rowToSelect: Row)
120+
public onSelectRowClicked( rowToSelect: Row)
103121
{
104122
if (rowToSelect === this.selectedRow)
105123
return;
106124

107125
if (this.selectedRow)
108-
this.selectedRow.select( false);
126+
this.selectedRow.trVN.setProps( {class: undefined});
109127

110128
this.selectedRow = rowToSelect;
111-
rowToSelect.select( true);
129+
this.selectedRow.trVN.setProps( {class: "danger"});
112130
}
113131

114-
onDeleteRowClicked( rowToDelete: Row)
132+
public onDeleteRowClicked( rowToDelete: Row)
115133
{
116134
if (rowToDelete === this.selectedRow)
117135
this.selectedRow = undefined;
118136

119137
let id = rowToDelete.id;
120138
let i = this.rows.findIndex( row => row.id == id);
121139
this.rows.splice( i, 1);
122-
this.updateMe( this.renderRows);
123-
// this.vnRefTBody.r.setChildren( this.rows);
140+
this.vnTBody.spliceChildren( i, 1);
124141
}
125-
126-
render()
127-
{
128-
return (<div class="container">
129-
<div class="jumbotron">
130-
<div class="row">
131-
<div class="col-md-6">
132-
<h1>Mimbl (keyed)</h1>
133-
</div>
134-
<div class="col-md-6">
135-
<div class="row">
136-
<Button id="run" click={this.onCreate1000}>Create 1,000 rows</Button>
137-
<Button id="runlots" click={this.onCreate10000}>Create 10,000 rows</Button>
138-
<Button id="add" click={this.onAppend1000}>Append 1,000 rows</Button>
139-
<Button id="update" click={this.onUpdateEvery10th}>Update every 10th row</Button>
140-
<Button id="clear" click={this.onClear}>Clear</Button>
141-
<Button id="swaprows" click={this.onSwapRows}>Swap Rows</Button>
142-
</div>
143-
</div>
144-
</div>
145-
</div>
146-
<table class="table table-hover table-striped test-data">
147-
{this.renderRows}
148-
{/* <tbody vnref={this.vnRefTBody} updateStrategy={{disableKeyedNodeRecycling: true}}>
149-
{this.rows}
150-
</tbody> */}
151-
</table>
152-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
153-
</div>);
154-
}
155-
156-
@mim.noWatcher renderRows()
157-
{
158-
if (!this.rows)
159-
return null;
160-
161-
return <tbody updateStrategy={{disableKeyedNodeRecycling: true}}>
162-
{this.rows}
163-
</tbody>
164-
}
165-
166-
// private vnRefTBody = new mim.ElmRef<HTMLElement>();
167142
}
168143

169144
let glyphVN = <span class="glyphicon glyphicon-remove" aria-hidden="true"/>;
@@ -173,8 +148,7 @@ class Row extends mim.Component
173148
{
174149
main: Main;
175150
id: number;
176-
label: string;
177-
// trRef = new mim.ElmRef<HTMLTableRowElement>();
151+
// label: string;
178152
labelVN: mim.ITextVN;
179153
trVN: mim.IElmVN<HTMLTableRowElement>;
180154

@@ -184,52 +158,41 @@ class Row extends mim.Component
184158

185159
this.main = main;
186160
this.id = id;
187-
this.label = label;
161+
// this.label = label;
188162
this.labelVN = mim.createTextVN( label);
189163
}
190164

191-
willMount()
165+
public willMount()
192166
{
193-
this.trVN = <tr class={this.main.selectedRow === this ? "danger" : undefined}>
167+
this.trVN = <tr>
194168
<td class="col-md-1">{this.id}</td>
195-
<td class="col-md-4"><a click={{func: this.onSelectClicked, schedulingType: "s"}}>{this.labelVN}</a></td>
169+
<td class="col-md-4"><a click={this.onSelectClicked}>{this.labelVN}</a></td>
196170
<td class="col-md-1"><a click={this.onDeleteClicked}>{glyphVN}</a></td>
197171
{lastCellVN}
198172
</tr> as mim.IElmVN<HTMLTableRowElement>;
199173
}
200174

201-
updateLabel()
175+
@mim.noWatcher
176+
public render()
202177
{
203-
this.label += " !!!";
204-
this.labelVN.setText( this.label);
178+
return this.trVN;
205179
}
206180

207-
select( selected: boolean)
181+
public updateLabel()
208182
{
209-
// this.trRef.r.setProps( {class: selected ? "danger" : undefined});
210-
this.trVN.setProps( {class: selected ? "danger" : undefined});
183+
// this.labelVN.setText( this.label += " !!!");
184+
this.labelVN.setText( this.labelVN.text + " !!!");
211185
}
212186

213-
onDeleteClicked()
187+
private onDeleteClicked()
214188
{
215189
this.main.onDeleteRowClicked( this);
216190
}
217191

218-
onSelectClicked()
192+
private onSelectClicked()
219193
{
220194
this.main.onSelectRowClicked( this);
221195
}
222-
223-
@mim.noWatcher render()
224-
{
225-
return this.trVN;
226-
// return <tr vnref={this.trRef} class={this.main.selectedRow === this ? "danger" : undefined}>
227-
// <td class="col-md-1">{this.id}</td>
228-
// <td class="col-md-4"><a click={this.onSelectClicked}>{this.labelVN}</a></td>
229-
// <td class="col-md-1"><a click={this.onDeleteClicked}>{glyphVN}</a></td>
230-
// {lastCellVN}
231-
// </tr>;
232-
}
233196
}
234197

235198

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

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -37,48 +37,10 @@ module.exports =
3737
mimbl: { root: 'mimbl', commonjs2: 'mimbl', commonjs: 'mimbl', amd: 'mimbl' },
3838
mimcss: { root: 'mimcss', commonjs2: 'mimcss', commonjs: 'mimcss', amd: 'mimcss' }
3939
}),
40-
config( "main.js", "production"),
40+
config( "main.js", "production", undefined, {
41+
mimcss: { root: 'mimcss', commonjs2: 'mimcss', commonjs: 'mimcss', amd: 'mimcss' }
42+
}),
4143
];
4244

4345

4446

45-
46-
47-
// let isProd = process.argv.indexOf('-p') !== -1;
48-
// let mode = isProd ? "production" : "development";
49-
// let devtool = isProd ? "source-map" : "#inline-source-map";
50-
// let outputFilename = isProd ? "main.js" : "main.dev.js";
51-
// // let externals = isProd ? {} : { mimbl: { root: 'mimbl', commonjs2: 'mimbl', commonjs: 'mimbl', amd: 'mimbl' } };
52-
// let externals = {};
53-
54-
55-
// module.exports =
56-
// {
57-
// entry: "./src/Main.tsx",
58-
59-
// output:
60-
// {
61-
// filename: outputFilename,
62-
// path: __dirname + "/dist",
63-
// libraryTarget: 'umd',
64-
// globalObject: 'this'
65-
// },
66-
67-
// mode: mode,
68-
69-
// devtool: devtool,
70-
71-
// resolve: { extensions: [".ts", ".tsx", ".js", ".json", ".css"] },
72-
73-
// module:
74-
// {
75-
// rules:
76-
// [
77-
// { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules|\.d\.ts$/ },
78-
// { test: /\.d\.ts$/, loader: 'ignore-loader' },
79-
// { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
80-
// ]
81-
// },
82-
83-
// externals: externals
84-
// };

‎frameworks/non-keyed/mimbl/indexDev.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8">
55
<title>Mimbl (non-keyed) - Dev</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
7-
<script src='node_modules/mimcss/lib/mimcss.dev.js'></script>
87
<script src='node_modules/mimbl/lib/mimbl.dev.js'></script>
98
</head>
109
<body>

0 commit comments

Comments
 (0)