Skip to content

Commit ccebc09

Browse files
SheetaaSheetaa
committed
add new framework: san-composition
1 parent 627b3d0 commit ccebc09

File tree

8 files changed

+11752
-0
lines changed

8 files changed

+11752
-0
lines changed

‎frameworks/keyed/san-composition/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "stage-0"]
3+
}

‎frameworks/keyed/san-composition/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>san composition api keyed</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
</head>
9+
10+
<body>
11+
<div id='main'></div>
12+
<script src='dist/main.js'></script>
13+
</body>
14+
15+
</html>

‎frameworks/keyed/san-composition/package-lock.json

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

‎frameworks/keyed/san-composition/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "js-framework-benchmark-san-composition",
3+
"version": "1.1.0",
4+
"description": "Benchmark for san composition",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "san:san-composition",
7+
"issues": [
8+
800
9+
]
10+
},
11+
"scripts": {
12+
"build-dev": "webpack -w -d",
13+
"build-prod": "webpack -p"
14+
},
15+
"keywords": [
16+
"san"
17+
],
18+
"author": "Sheeta",
19+
"license": "Apache-2.0",
20+
"homepage": "https://github.com/krausest/js-framework-benchmark",
21+
"repository": {
22+
"type": "git",
23+
"url": "https://github.com/krausest/js-framework-benchmark.git"
24+
},
25+
"devDependencies": {
26+
"babel-core": "6.26.3",
27+
"babel-loader": "7.1.5",
28+
"babel-preset-es2015": "6.24.1",
29+
"babel-preset-stage-0": "6.24.1",
30+
"css-loader": "1.0.0",
31+
"webpack": "4.16.3",
32+
"webpack-cli": "3.1.0"
33+
},
34+
"dependencies": {
35+
"san": "3.10.1",
36+
"san-composition": "1.1.0"
37+
}
38+
}

‎frameworks/keyed/san-composition/src/App.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import {Store} from './store.es6';
2+
import san from 'san/dist/san.spa.modern.js';
3+
import {
4+
defineComponent,
5+
template,
6+
data,
7+
method,
8+
onAttached
9+
} from 'san-composition';
10+
11+
12+
var store = new Store();
13+
14+
export default defineComponent(() => {
15+
// trimWhitespace: 'all',
16+
// autoFillStyleAndId: false,
17+
template`<div class="container">
18+
<div class="jumbotron">
19+
<div class="row">
20+
<div class="col-md-6">
21+
<h1>san composition api(keyed)</h1>
22+
</div>
23+
<div class="col-md-6">
24+
<div class="row">
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="run" on-click="run">Create 1,000 rows</button>
27+
</div>
28+
<div class="col-sm-6 smallpad">
29+
<button type="button" class="btn btn-primary btn-block" id="runlots" on-click="runLots">Create 10,000 rows</button>
30+
</div>
31+
<div class="col-sm-6 smallpad">
32+
<button type="button" class="btn btn-primary btn-block" id="add" on-click="add">Append 1,000 rows</button>
33+
</div>
34+
<div class="col-sm-6 smallpad">
35+
<button type="button" class="btn btn-primary btn-block" id="update" on-click="update">Update every 10th row</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type="button" class="btn btn-primary btn-block" id="clear" on-click="clear">Clear</button>
39+
</div>
40+
<div class="col-sm-6 smallpad">
41+
<button type="button" class="btn btn-primary btn-block" id="swaprows" on-click="swapRows">Swap Rows</button>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<table class="table table-hover table-striped test-data" on-click="handleClick($event)">
48+
<tbody>
49+
<tr s-for="item in rows trackBy item.id" class="{{item.selected ? 'danger':''}}" data-id="{{item.id}}">
50+
<td class="col-md-1">{{item.id}}</td>
51+
<td class="col-md-4">
52+
<a data-action="select">{{item.label}}</a>
53+
</td>
54+
<td class="col-md-1">
55+
<a>
56+
<span class="glyphicon glyphicon-remove" aria-hidden="true"
57+
data-action="remove"></span>
58+
</a>
59+
</td>
60+
<td class="col-md-6"></td>
61+
</tr>
62+
</tbody>
63+
</table>
64+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
65+
</div>`;
66+
67+
const rows = data('rows', store.data);
68+
69+
onAttached(() => {
70+
window.app = this;
71+
});
72+
73+
method({
74+
handleClick(e) {
75+
let target = e.target;
76+
const action = target.getAttribute('data-action');
77+
78+
while (target.tagName !== 'TR') {
79+
target = target.parentNode;
80+
}
81+
82+
this[action](target.getAttribute('data-id'));
83+
},
84+
add() {
85+
store.add();
86+
this.sync();
87+
},
88+
remove(id) {
89+
store.delete(id);
90+
this.sync();
91+
},
92+
select(id) {
93+
store.select(+id);
94+
this.sync();
95+
},
96+
run() {
97+
store.run();
98+
this.sync();
99+
},
100+
update() {
101+
store.update();
102+
this.sync();
103+
},
104+
runLots() {
105+
store.runLots();
106+
this.sync();
107+
},
108+
clear() {
109+
store.clear();
110+
this.sync();
111+
},
112+
swapRows() {
113+
store.swapRows();
114+
this.sync();
115+
},
116+
sync() {
117+
this.dataChanges = [];
118+
for (let i = 0; i < store.ops.length; i++) {
119+
let op = store.ops[i];
120+
rows[op.type](op.arg, op.options);
121+
}
122+
123+
for (let i = 0; i < store.fires.length; i++) {
124+
this.data.fire(store.fires[i]);
125+
}
126+
127+
store.ops.length = 0;
128+
store.fires.length = 0;
129+
this._update();
130+
}
131+
});
132+
}, san);

‎frameworks/keyed/san-composition/src/main.es6.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import App from './App';
2+
3+
const app = new App();
4+
app.attach(document.getElementById('main'));

‎frameworks/keyed/san-composition/src/store.es6.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import san from 'san/dist/san.spa.modern.js';
2+
3+
'use strict';
4+
5+
function _random(max) {
6+
return Math.round(Math.random() * 1000) % max;
7+
}
8+
9+
export class Store {
10+
constructor() {
11+
this.data = [];
12+
this.selected = undefined;
13+
this.id = 1;
14+
this.ops = [];
15+
this.fires = [];
16+
}
17+
buildData(count = 1000) {
18+
var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
19+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
20+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
21+
var data = [];
22+
for (var i = 0; i < count; i++)
23+
data.push({ id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
24+
return data;
25+
}
26+
updateData(mod = 10) {
27+
// Just assigning setting each tenth this.data doesn't cause a redraw, the following does:
28+
var newData = this.data.slice(0);
29+
for (let i = 0; i < this.data.length; i += mod) {
30+
newData[i] = Object.assign({}, this.data[i], { label: this.data[i].label + ' !!!' });
31+
}
32+
33+
this.data = newData;
34+
35+
this.ops.push(
36+
{
37+
type: 'set',
38+
name: 'rows',
39+
arg: this.data
40+
}
41+
);
42+
}
43+
delete(id) {
44+
const idx = this.data.findIndex(d => d.id == id);
45+
this.data = this.data.slice(0, idx).concat(this.data.slice(idx + 1))
46+
this.ops.push(
47+
{
48+
type: 'removeAt',
49+
name: 'rows',
50+
arg: idx
51+
}
52+
);
53+
}
54+
run() {
55+
this.data = this.buildData();
56+
this.selected = null;
57+
this.ops.push(
58+
{
59+
type: 'set',
60+
name: 'rows',
61+
arg: this.data
62+
}
63+
);
64+
}
65+
add() {
66+
var addData = this.buildData(1000);
67+
this.data = this.data.concat(addData);
68+
69+
this.ops.push(
70+
{
71+
type: 'set',
72+
name: 'rows',
73+
arg: this.data
74+
}
75+
);
76+
}
77+
update() {
78+
this.updateData();
79+
}
80+
select(id) {
81+
var resetIndex;
82+
var selectedIndex;
83+
var oldId = this.selected;
84+
this.data.forEach(function (item, index) {
85+
if (item.id == oldId) {
86+
resetIndex = index;
87+
}
88+
89+
if (item.id == id) {
90+
selectedIndex = index;
91+
}
92+
});
93+
94+
this.selected = id;
95+
96+
var newData = this.data.slice(0);
97+
98+
if (resetIndex != null) {
99+
newData[resetIndex] = Object.assign({}, this.data[resetIndex], { selected: false });
100+
}
101+
102+
if (selectedIndex != null) {
103+
newData[selectedIndex] = Object.assign({}, this.data[selectedIndex], { selected: true });
104+
}
105+
106+
this.data = newData;
107+
this.ops.push(
108+
{
109+
type: 'set',
110+
name: 'rows',
111+
arg: this.data
112+
}
113+
);
114+
}
115+
runLots() {
116+
this.data = this.buildData(10000);
117+
this.selected = null;
118+
this.ops.push(
119+
{
120+
type: 'set',
121+
name: 'rows',
122+
arg: this.data
123+
}
124+
);
125+
}
126+
clear() {
127+
this.data = [];
128+
this.selected = null;
129+
this.ops.push(
130+
{
131+
type: 'set',
132+
name: 'rows',
133+
arg: this.data
134+
}
135+
);
136+
}
137+
swapRows() {
138+
if (this.data.length > 998) {
139+
var newData = this.data.slice(0);
140+
newData[1] = this.data[998];
141+
newData[998] = this.data[1];
142+
this.data = newData;
143+
144+
this.ops.push(
145+
{
146+
type: 'set',
147+
name: 'rows',
148+
arg: this.data
149+
}
150+
);
151+
}
152+
}
153+
}

0 commit comments

Comments
 (0)