Skip to content

Commit c6ea510

Browse files
krausestkrausest
committed
Merge branch 'xania-xaniajs''
2 parents bb920dd + 1772fd7 commit c6ea510

File tree

8 files changed

+1736
-4
lines changed

8 files changed

+1736
-4
lines changed

‎frameworks/keyed/xania/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>XaniaJS-"keyed"</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="main"></div>
10+
<span
11+
class="preloadicon glyphicon glyphicon-remove"
12+
aria-hidden="true"
13+
></span>
14+
<script src="dist/main.js"></script>
15+
</body>
16+
</html>

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

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

‎frameworks/keyed/xania/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-xaniajs",
3+
"version": "1.1.1",
4+
"description": "Xania JS demo",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "@xania/view"
8+
},
9+
"scripts": {
10+
"build-dev": "npx rimraf dist && webpack",
11+
"build-prod": "npx rimraf dist && webpack"
12+
},
13+
"keywords": [
14+
"xania",
15+
"webpack"
16+
],
17+
"author": "Ibrahim ben Salah",
18+
"license": "MIT",
19+
"homepage": "https://github.com/xania",
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/xania/view.git"
23+
},
24+
"dependencies": {
25+
"@xania/view": "0.2.16",
26+
"webpack": "^5.66.0"
27+
},
28+
"devDependencies": {
29+
"html-webpack-plugin": "5.5.0",
30+
"ts-loader": "9.2.6",
31+
"typescript": "4.5.2",
32+
"webpack-cli": "4.9.1"
33+
}
34+
}

‎frameworks/keyed/xania/src/app.tsx

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import * as jsx from "@xania/view";
2+
import { viewList, RowContext } from "@xania/view";
3+
import { TableStore, DataRow } from "./table-store";
4+
5+
interface JumbotronProps {
6+
store: TableStore;
7+
}
8+
9+
function Jumbotron(props: JumbotronProps) {
10+
const { store } = props;
11+
12+
function run(counter = 5) {
13+
store.create10000Rows();
14+
setTimeout(() => {
15+
if (counter) {
16+
store.clear();
17+
setTimeout(() => run(counter - 1), 200);
18+
}
19+
}, 200);
20+
}
21+
return (
22+
<div class="jumbotron">
23+
<div class="row">
24+
<div class="col-md-6">
25+
<h1>XaniaJS-"keyed"</h1>
26+
</div>
27+
<div class="col-md-6">
28+
<div class="row">
29+
<div class="col-sm-6 smallpad">
30+
<button
31+
click={store.create1000Rows}
32+
type="button"
33+
class="btn btn-primary btn-block"
34+
id="run"
35+
>
36+
Create 1,000 rows
37+
</button>
38+
</div>
39+
<div class="col-sm-6 smallpad">
40+
<button
41+
click={store.create10000Rows}
42+
type="button"
43+
class="btn btn-primary btn-block"
44+
id="runlots"
45+
>
46+
Create 10,000 rows
47+
</button>
48+
</div>
49+
<div class="col-sm-6 smallpad">
50+
<button
51+
click={store.append1000Rows}
52+
type="button"
53+
class="btn btn-primary btn-block"
54+
id="add"
55+
>
56+
Append 1,000 rows
57+
</button>
58+
</div>
59+
<div class="col-sm-6 smallpad">
60+
<button
61+
click={store.updateEvery10thRow}
62+
type="button"
63+
class="btn btn-primary btn-block"
64+
id="update"
65+
>
66+
Update every 10th row
67+
</button>
68+
</div>
69+
<div class="col-sm-6 smallpad">
70+
<button
71+
click={store.clear}
72+
type="button"
73+
class="btn btn-primary btn-block"
74+
id="clear"
75+
>
76+
Clear
77+
</button>
78+
</div>
79+
<div class="col-sm-6 smallpad">
80+
<button
81+
click={store.swapRows}
82+
type="button"
83+
class="btn btn-primary btn-block"
84+
id="swaprows"
85+
>
86+
Swap Rows
87+
</button>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
}
95+
96+
function Container() {
97+
const rows = viewList<DataRow>();
98+
const store = new TableStore(rows);
99+
return (
100+
<div id="main">
101+
<div class="container">
102+
<Jumbotron store={store} />
103+
<table class="table table-hover table-striped test-data">
104+
<tbody>{rows.map((context) => Row(context, store))}</tbody>
105+
</table>
106+
<span
107+
class="preloadicon glyphicon glyphicon-remove"
108+
aria-hidden="true"
109+
></span>
110+
</div>
111+
</div>
112+
);
113+
}
114+
115+
function Row(context: RowContext<DataRow>, store: TableStore) {
116+
return (
117+
<tr class={context.property("className")} data_id={context.property("id")}>
118+
<td class="col-md-1">{context.property("id")}</td>
119+
<td class="col-md-4">
120+
<a class="lbl" click={context.call(store.select)}>
121+
{context.property("label")}
122+
</a>
123+
</td>
124+
<td class="col-md-1">
125+
<a class="remove" click={store.delete}>
126+
<span
127+
class="remove glyphicon glyphicon-remove"
128+
aria-hidden="true"
129+
></span>
130+
</a>
131+
</td>
132+
<td class="col-md-6"></td>
133+
</tr>
134+
);
135+
}
136+
137+
// interface InputProps<T> {
138+
// value: State<T>;
139+
// }
140+
141+
// function Input<T>(props: InputProps<T>) {
142+
// const tpl = jsx.factory;
143+
// const { value } = props;
144+
// return <input value={value} keyup={onKeyUp} />;
145+
146+
// function onKeyUp({ target }) {
147+
// value.update(target.value);
148+
// }
149+
// }
150+
151+
const main = document.getElementById("main");
152+
jsx.render(main, <Container />);

‎frameworks/keyed/xania/src/table-store.ts

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { State, ListMutation, ListMutationType } from "@xania/view";
2+
3+
export interface DataRow {
4+
id: number;
5+
label: State<string>;
6+
className?: State<string>;
7+
}
8+
9+
var adjectives = [
10+
"pretty",
11+
"large",
12+
"big",
13+
"small",
14+
"tall",
15+
"short",
16+
"long",
17+
"handsome",
18+
"plain",
19+
"quaint",
20+
"clean",
21+
"elegant",
22+
"easy",
23+
"angry",
24+
"crazy",
25+
"helpful",
26+
"mushy",
27+
"odd",
28+
"unsightly",
29+
"adorable",
30+
"important",
31+
"inexpensive",
32+
"cheap",
33+
"expensive",
34+
"fancy",
35+
];
36+
var colours = [
37+
"red",
38+
"yellow",
39+
"blue",
40+
"green",
41+
"pink",
42+
"brown",
43+
"purple",
44+
"brown",
45+
"white",
46+
"black",
47+
"orange",
48+
];
49+
var nouns = [
50+
"table",
51+
"chair",
52+
"house",
53+
"bbq",
54+
"desk",
55+
"car",
56+
"pony",
57+
"cookie",
58+
"sandwich",
59+
"burger",
60+
"pizza",
61+
"mouse",
62+
"keyboard",
63+
];
64+
65+
export class TableStore {
66+
private counter = 1;
67+
constructor(private list: { add(mut: ListMutation<DataRow>): any }) {}
68+
69+
private data: DataRow[] = [];
70+
71+
selected?: DataRow;
72+
73+
select = (row: DataRow) => {
74+
const { selected } = this;
75+
if (selected !== row) {
76+
if (selected) {
77+
selected.className.update(() => null);
78+
}
79+
this.selected = row;
80+
if (row) {
81+
row.className.update(() => "danger");
82+
}
83+
}
84+
};
85+
86+
delete = ({ values }) => {
87+
this.list.add({
88+
type: ListMutationType.REMOVE,
89+
item: values,
90+
});
91+
};
92+
93+
private appendRows(count: number) {
94+
let { counter, data, list } = this;
95+
for (let i = 0; i < count; i++) {
96+
var row = {
97+
id: counter++,
98+
label: new State(
99+
adjectives[_random(adjectives.length)] +
100+
" " +
101+
colours[_random(colours.length)] +
102+
" " +
103+
nouns[_random(nouns.length)]
104+
),
105+
className: new State(null),
106+
};
107+
data.push(row);
108+
}
109+
110+
list.add({
111+
type: ListMutationType.PUSH_MANY,
112+
items: data,
113+
start: data.length - count,
114+
count,
115+
});
116+
117+
this.counter = counter;
118+
}
119+
create1000Rows = (): void => {
120+
this.clear();
121+
this.appendRows(1000);
122+
};
123+
create10000Rows = (): void => {
124+
this.clear();
125+
this.appendRows(10000);
126+
};
127+
append1000Rows = (): void => {
128+
this.appendRows(1000);
129+
};
130+
updateEvery10thRow = (): void => {
131+
const { length } = this.data;
132+
for (let i = 0; i < length; i += 10) {
133+
this.data[i].label.update((prev) => prev + " !!!");
134+
}
135+
};
136+
clear = (): void => {
137+
this.list.add({
138+
type: ListMutationType.CLEAR,
139+
});
140+
this.data = [];
141+
this.select(null);
142+
};
143+
swapRows = (): void => {
144+
if (this.data.length > 998) {
145+
this.list.add({
146+
type: ListMutationType.SWAP,
147+
index1: 1,
148+
index2: 998,
149+
});
150+
}
151+
};
152+
}
153+
154+
function _random(max) {
155+
return Math.round(Math.random() * 1000) % max;
156+
}

‎frameworks/keyed/xania/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"include": ["src"],
3+
"compilerOptions": {
4+
"outDir": "dist/src",
5+
"noImplicitAny": false,
6+
"sourceMap": true,
7+
"module": "esnext",
8+
"moduleResolution": "node",
9+
"target": "es5",
10+
"jsx": "react",
11+
"jsxFactory": "jsx.factory",
12+
"baseUrl": "./src",
13+
"allowJs": true,
14+
}
15+
}

0 commit comments

Comments
 (0)