Skip to content

Commit cb933fa

Browse files
mmichlin66mmichlin66
committed
First pass of keyed/mimbl
1 parent add69b2 commit cb933fa

File tree

15 files changed

+718
-2354
lines changed

15 files changed

+718
-2354
lines changed

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
'use strict';
2+
require("babel-plugin-syntax-jsx")
3+
var path = require('path')
4+
const MinifyPlugin = require("babel-minify-webpack-plugin");
5+
var webpack = require('webpack')
6+
7+
var cache = {};
8+
var loaders = [
9+
{
10+
test: /\.jsx$/,
11+
loader: 'babel-loader'
12+
},
13+
{
14+
test: /\.es6\.js$/,
15+
loader: 'babel-loader'
16+
},
17+
{
18+
test: /\.css$/,
19+
loader: 'style-loader!css-loader'
20+
}
21+
];
22+
var extensions = [
23+
'.js', '.jsx', '.es6.js', '.msx'
24+
];
25+
26+
module.exports = [{
27+
cache: cache,
28+
module: {
29+
rules: loaders
30+
},
31+
entry: {
32+
main: './src/Main.jsx',
33+
},
34+
output: {
35+
path: path.resolve(__dirname, "dist"),
36+
filename: '[name].js',
37+
sourceMapFilename: "[file].map",
38+
library: "mimbl-benchmark",
39+
libraryTarget: 'umd',
40+
globalObject: 'this'
41+
},
42+
resolve: {
43+
extensions: extensions,
44+
modules: [
45+
__dirname,
46+
path.resolve(__dirname, "src"),
47+
"node_modules"
48+
],
49+
alias: {
50+
'mimbl': 'node_modules/mimbl/dist/mimbl.js',
51+
}
52+
},
53+
plugins: [
54+
new webpack.DefinePlugin({
55+
'process.env': {
56+
'NODE_ENV': JSON.stringify('production')
57+
}
58+
}),
59+
new MinifyPlugin()
60+
],
61+
62+
// When importing a module whose path matches one of the following, just
63+
// assume a corresponding global variable exists and use that instead.
64+
// This is important because it allows us to avoid bundling all of our
65+
// dependencies, which allows browsers to cache those libraries between builds.
66+
externals:
67+
{
68+
mimbl: { root: 'mimbl', commonjs2: 'mimbl', commonjs: 'mimbl', amd: 'mimbl' },
69+
}
70+
}];

‎frameworks/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/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/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/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/keyed/mimbl/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "js-framework-benchmark-mimbl",
3+
"version": "0.1.6",
4+
"description": "Benchmark for Mimbl framework",
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+
"mimbl"
14+
],
15+
"author": "Michael Michlin",
16+
"license": "Apache-2.0",
17+
"homepage": "https://mmichlin66.github.io",
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/krausest/js-framework-benchmark.git"
21+
},
22+
"devDependencies": {
23+
"source-map-loader": "^0.2.4",
24+
"ts-loader": "^6.1.0",
25+
"typescript": "^3.6.3",
26+
"webpack": "4.34.0",
27+
"webpack-cli": "^3.3.4"
28+
},
29+
"dependencies": {
30+
"mimbl": "^0.1.6"
31+
}
32+
}

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
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.add = this.add.bind(this);
36+
this.run = this.run.bind(this);
37+
this.update = this.update.bind(this);
38+
this.runLots = this.runLots.bind(this);
39+
this.clear = this.clear.bind(this);
40+
this.swapRows = this.swapRows.bind(this);
41+
42+
this.store = new Store();
43+
this.tbody = new TBody( this);
44+
45+
(window as any).app = this;
46+
}
47+
48+
// schedulePrintDuration() {
49+
// this.callMe( () => stopMeasure(), false);
50+
// }
51+
52+
run() {
53+
// startMeasure("run");
54+
this.tbody.run();
55+
// this.schedulePrintDuration();
56+
}
57+
58+
add() {
59+
// startMeasure("add");
60+
this.tbody.add();
61+
// this.schedulePrintDuration();
62+
}
63+
64+
update() {
65+
// startMeasure("update");
66+
this.tbody.update();
67+
// this.schedulePrintDuration();
68+
}
69+
70+
runLots() {
71+
// startMeasure("runLots");
72+
this.tbody.runLots();
73+
// this.schedulePrintDuration();
74+
}
75+
76+
clear() {
77+
// startMeasure("clear");
78+
this.tbody.clear();
79+
this.tbody = new TBody( this);
80+
this.updateMe();
81+
// this.schedulePrintDuration();
82+
}
83+
84+
swapRows() {
85+
// startMeasure("swapRows");
86+
this.tbody.swapRows();
87+
// this.schedulePrintDuration();
88+
}
89+
90+
onSelectRowClicked(row)
91+
{
92+
// startMeasure("select");
93+
this.tbody.onSelectRowClicked(row);
94+
// this.schedulePrintDuration();
95+
}
96+
97+
onDeleteRowClicked(row)
98+
{
99+
// startMeasure("delete");
100+
this.tbody.onDeleteRowClicked(row);
101+
// this.schedulePrintDuration();
102+
}
103+
104+
render()
105+
{
106+
return (<div class="container">
107+
<div class="jumbotron">
108+
<div class="row">
109+
<div class="col-md-6">
110+
<h1>Mimbl</h1>
111+
</div>
112+
<div class="col-md-6">
113+
<div class="row">
114+
<div class="col-sm-6 smallpad">
115+
<button type="button" class="btn btn-primary btn-block" id="run" click={this.run}>Create 1,000 rows</button>
116+
</div>
117+
<div class="col-sm-6 smallpad">
118+
<button type="button" class="btn btn-primary btn-block" id="runlots" click={this.runLots}>Create 10,000 rows</button>
119+
</div>
120+
<div class="col-sm-6 smallpad">
121+
<button type="button" class="btn btn-primary btn-block" id="add" click={this.add}>Append 1,000 rows</button>
122+
</div>
123+
<div class="col-sm-6 smallpad">
124+
<button type="button" class="btn btn-primary btn-block" id="update" click={this.update}>Update every 10th row</button>
125+
</div>
126+
<div class="col-sm-6 smallpad">
127+
<button type="button" class="btn btn-primary btn-block" id="clear" click={this.clear}>Clear</button>
128+
</div>
129+
<div class="col-sm-6 smallpad">
130+
<button type="button" class="btn btn-primary btn-block" id="swaprows" click={this.swapRows}>Swap Rows</button>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
<table class="table table-hover table-striped test-data" updateStrategy={{allowKeyedNodeRecycling:false}}>
137+
{this.tbody}
138+
</table>
139+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
140+
</div>);
141+
}
142+
}
143+
144+
mim.mount( <Main/>, document.getElementById('main'));

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
this.onDeleteClicked = this.onDeleteClicked.bind(this);
30+
this.onSelectClicked = this.onSelectClicked.bind(this);
31+
}
32+
33+
setItem( newLabel: string, newSelectedID: number)
34+
{
35+
let newSelected = this.id === newSelectedID;
36+
37+
if (newLabel !== this.label || this.selected !== newSelected)
38+
this.updateMe();
39+
40+
this.label = newLabel;
41+
this.selected = newSelected;
42+
}
43+
44+
select( selected: boolean)
45+
{
46+
if (this.selected !== selected)
47+
this.updateMe();
48+
49+
this.selected = selected;
50+
}
51+
52+
onDeleteClicked()
53+
{
54+
this.main.onDeleteRowClicked( this);
55+
}
56+
57+
onSelectClicked()
58+
{
59+
if (this.selected)
60+
return;
61+
62+
this.selected = true;
63+
this.main.onSelectRowClicked( this);
64+
this.updateMe();
65+
}
66+
67+
render()
68+
{
69+
return <tr class={this.selected ? "danger" : undefined}>
70+
<td class="col-md-1">{this.id}</td>
71+
<td class="col-md-4"><a click={this.onSelectClicked}>{this.label}</a></td>
72+
<td class="col-md-1"><a click={this.onDeleteClicked}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
73+
<td class="col-md-6"></td>
74+
</tr>;
75+
}
76+
}
77+

0 commit comments

Comments
 (0)