Skip to content

Commit a5af288

Browse files
krausestkrausest
committed
Merge branch 'lsegurado-master'
2 parents 51d72ae + f2e1668 commit a5af288

File tree

8 files changed

+4220
-870
lines changed

8 files changed

+4220
-870
lines changed

‎frameworks/keyed/michijs-map/package-lock.json

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

‎frameworks/keyed/michijs-map/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-michijs-map",
3-
"version": "1.0.4",
3+
"version": "1.1.7",
44
"description": "michijs-map",
55
"main": "index.js",
66
"js-framework-benchmark": {
@@ -28,10 +28,10 @@
2828
},
2929
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
3030
"devDependencies": {
31-
"@michijs/dev-server": "0.2.0",
32-
"typescript": "4.9.5"
31+
"@michijs/dev-server": "0.4.2",
32+
"typescript": "5.0.4"
3333
},
3434
"dependencies": {
35-
"@michijs/michijs": "1.0.4"
35+
"@michijs/michijs": "1.1.7"
3636
}
3737
}

‎frameworks/keyed/michijs-map/src/index.tsx

Lines changed: 193 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,94 @@ function _random(max: number) {
44
return Math.round(Math.random() * 1000) % max;
55
}
66

7-
const 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'];
8-
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
9-
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
7+
const adjectives = [
8+
"pretty",
9+
"large",
10+
"big",
11+
"small",
12+
"tall",
13+
"short",
14+
"long",
15+
"handsome",
16+
"plain",
17+
"quaint",
18+
"clean",
19+
"elegant",
20+
"easy",
21+
"angry",
22+
"crazy",
23+
"helpful",
24+
"mushy",
25+
"odd",
26+
"unsightly",
27+
"adorable",
28+
"important",
29+
"inexpensive",
30+
"cheap",
31+
"expensive",
32+
"fancy",
33+
];
34+
const colours = [
35+
"red",
36+
"yellow",
37+
"blue",
38+
"green",
39+
"pink",
40+
"brown",
41+
"purple",
42+
"brown",
43+
"white",
44+
"black",
45+
"orange",
46+
];
47+
const nouns = [
48+
"table",
49+
"chair",
50+
"house",
51+
"bbq",
52+
"desk",
53+
"car",
54+
"pony",
55+
"cookie",
56+
"sandwich",
57+
"burger",
58+
"pizza",
59+
"mouse",
60+
"keyboard",
61+
];
62+
const adjectivesLength = adjectives.length;
63+
const coloursLength = colours.length;
64+
const nounsLength = nouns.length;
1065

11-
type Row = { label: string, id: number };
66+
type Row = { label: string; id: number };
1267
function buildData(count = 1000) {
13-
const data = new Array<Row>();
68+
const data = new Array<Row>(count);
1469
for (let i = 0; i < count; i++)
15-
data.push({ id: state.nextId++, label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}` });
70+
data[i] = {
71+
id: state.nextId++,
72+
label: `${adjectives[_random(adjectivesLength)]} ${
73+
colours[_random(coloursLength)]
74+
} ${nouns[_random(nounsLength)]}`,
75+
};
1676
return data;
1777
}
1878

1979
const { state, transactions, ...storeSubscribable } = store({
2080
state: {
2181
data: new Array<Row>(),
2282
selected: null as number | null,
23-
nextId: 1
83+
nextId: 1,
2484
},
2585
transactions: {
2686
updateData(mod = 10) {
2787
for (let i = 0; i < state.data.length; i += mod) {
28-
state.data[i].label += ' !!!';
88+
state.data[i].label += " !!!";
2989
// this.data[i] = Object.assign({}, this.data[i], {label: this.data[i].label +' !!!'});
3090
}
3191
},
3292
delete(id: number) {
3393
// state.data = state.data.filter(x => x.id !== id);
34-
const index = state.data.findIndex(x => x.id === id);
94+
const index = state.data.findIndex((x) => x.id === id);
3595
state.data.splice(index, 1);
3696

3797
// const idx = this.data.findIndex(d => d.id == id);
@@ -68,81 +128,131 @@ const { state, transactions, ...storeSubscribable } = store({
68128
state.data[1] = state.data[998];
69129
state.data[998] = a;
70130
}
71-
}
72-
}
131+
},
132+
},
73133
});
74134

75-
export const Table = createCustomElement('michi-table',
76-
{
77-
extends: {
78-
tag: 'table',
79-
class: HTMLTableElement
80-
},
81-
subscribeTo: {
82-
storeSubscribable
83-
},
84-
fakeRoot: false,
85-
render() {
86-
return <List data={state.data} as="tbody" _id="tbody" renderItem={({ label, id }) => (
87-
<tr key={id} class={id === state.selected ? 'danger' : undefined}>
88-
<td _className="col-md-1">{id}</td>
89-
<td _className="col-md-4">
90-
<a _onclick={() => transactions.select(id)}>{label}</a>
91-
</td>
92-
<td _className="col-md-1">
93-
<a _onclick={() => transactions.delete(id)}>
94-
<span _className="glyphicon glyphicon-remove" aria-hidden="true" />
95-
</a>
96-
</td>
97-
<td _className="col-md-6" />
98-
</tr>
99-
)} />
100-
}
101-
}
102-
);
135+
export const Table = createCustomElement("michi-table", {
136+
extends: {
137+
tag: "table",
138+
class: HTMLTableElement,
139+
},
140+
subscribeTo: {
141+
storeSubscribable,
142+
},
143+
fakeRoot: false,
144+
render() {
145+
return (
146+
<List
147+
data={state.data}
148+
as="tbody"
149+
_={{ id: "tbody" }}
150+
renderItem={({ label, id }) => (
151+
<tr key={id} class={id === state.selected ? "danger" : undefined}>
152+
<td _={{ className: "col-md-1" }}>{id}</td>
153+
<td _={{ className: "col-md-4" }}>
154+
<a _={{ onclick: () => transactions.select(id) }}>{label}</a>
155+
</td>
156+
<td _={{ className: "col-md-1" }}>
157+
<a onclick={() => transactions.delete(id)}>
158+
<span
159+
_={{
160+
className: "glyphicon glyphicon-remove",
161+
ariaHidden: "true",
162+
}}
163+
/>
164+
</a>
165+
</td>
166+
<td _={{ className: "col-md-6" }} />
167+
</tr>
168+
)}
169+
/>
170+
);
171+
},
172+
});
103173

104-
export const TableManager = createCustomElement('michi-table-manager',
105-
{
106-
extends: {
107-
tag: 'div',
108-
class: HTMLDivElement
109-
},
110-
fakeRoot: false,
111-
render() {
112-
return (
113-
<div _className="row">
114-
<div _className="col-sm-6 smallpad">
115-
<button _type="button" _className="btn btn-primary btn-block" id="run" onclick={transactions.run}>
116-
Create 1,000 rows
117-
</button>
118-
</div>
119-
<div _className="col-sm-6 smallpad">
120-
<button _type="button" _className="btn btn-primary btn-block" id="runlots" onclick={transactions.runLots}>
121-
Create 10,000 rows
122-
</button>
123-
</div>
124-
<div _className="col-sm-6 smallpad">
125-
<button _type="button" _className="btn btn-primary btn-block" id="add" onclick={transactions.add}>
126-
Append 1,000 rows
127-
</button>
128-
</div>
129-
<div _className="col-sm-6 smallpad">
130-
<button _type="button" _className="btn btn-primary btn-block" id="update" onclick={transactions.update}>
131-
Update every 10th row
132-
</button>
133-
</div>
134-
<div _className="col-sm-6 smallpad">
135-
<button _type="button" _className="btn btn-primary btn-block" id="clear" onclick={transactions.clear}>
136-
Clear
137-
</button>
138-
</div>
139-
<div _className="col-sm-6 smallpad">
140-
<button _type="button" _className="btn btn-primary btn-block" id="swaprows" onclick={transactions.swapRows}>
141-
Swap Rows
142-
</button>
143-
</div>
174+
export const TableManager = createCustomElement("michi-table-manager", {
175+
extends: {
176+
tag: "div",
177+
class: HTMLDivElement,
178+
},
179+
fakeRoot: false,
180+
render() {
181+
return (
182+
<div _={{ className: "row" }}>
183+
<div _={{ className: "col-sm-6 smallpad" }}>
184+
<button
185+
_={{
186+
type: "button",
187+
className: "btn btn-primary btn-block",
188+
id: "run",
189+
onclick: transactions.run,
190+
}}
191+
>
192+
Create 1,000 rows
193+
</button>
194+
</div>
195+
<div _={{ className: "col-sm-6 smallpad" }}>
196+
<button
197+
_={{
198+
type: "button",
199+
className: "btn btn-primary btn-block",
200+
id: "runlots",
201+
onclick: transactions.runLots,
202+
}}
203+
>
204+
Create 10,000 rows
205+
</button>
206+
</div>
207+
<div _={{ className: "col-sm-6 smallpad" }}>
208+
<button
209+
_={{
210+
type: "button",
211+
className: "btn btn-primary btn-block",
212+
id: "add",
213+
onclick: transactions.add,
214+
}}
215+
>
216+
Append 1,000 rows
217+
</button>
218+
</div>
219+
<div _={{ className: "col-sm-6 smallpad" }}>
220+
<button
221+
_={{
222+
type: "button",
223+
className: "btn btn-primary btn-block",
224+
id: "update",
225+
onclick: transactions.update,
226+
}}
227+
>
228+
Update every 10th row
229+
</button>
144230
</div>
145-
);
146-
}
147-
}
148-
);
231+
<div _={{ className: "col-sm-6 smallpad" }}>
232+
<button
233+
_={{
234+
type: "button",
235+
className: "btn btn-primary btn-block",
236+
id: "clear",
237+
onclick: transactions.clear,
238+
}}
239+
>
240+
Clear
241+
</button>
242+
</div>
243+
<div _={{ className: "col-sm-6 smallpad" }}>
244+
<button
245+
_={{
246+
type: "button",
247+
className: "btn btn-primary btn-block",
248+
id: "swaprows",
249+
onclick: transactions.swapRows,
250+
}}
251+
>
252+
Swap Rows
253+
</button>
254+
</div>
255+
</div>
256+
);
257+
},
258+
});

‎frameworks/keyed/michijs-map/tsconfig.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"ES2021"
1818
],
1919
"outDir": "dist",
20-
"moduleResolution": "node16",
20+
"moduleResolution": "node",
2121
"module": "esnext",
2222
"target": "es2019",
2323
"noUnusedLocals": false,
@@ -31,6 +31,7 @@
3131
],
3232
"exclude": [
3333
"node_modules",
34-
"dist"
34+
"dist",
35+
"build"
3536
]
3637
}

0 commit comments

Comments
 (0)