mtrl-addons 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{src/components/index.ts → dist/components/index.d.ts} +0 -2
- package/dist/components/vlist/config.d.ts +86 -0
- package/{src/components/vlist/constants.ts → dist/components/vlist/constants.d.ts} +10 -11
- package/dist/components/vlist/features/api.d.ts +7 -0
- package/{src/components/vlist/features/index.ts → dist/components/vlist/features/index.d.ts} +0 -2
- package/dist/components/vlist/features/selection.d.ts +6 -0
- package/dist/components/vlist/features/viewport.d.ts +9 -0
- package/dist/components/vlist/features.d.ts +31 -0
- package/{src/components/vlist/index.ts → dist/components/vlist/index.d.ts} +1 -10
- package/dist/components/vlist/types.d.ts +596 -0
- package/dist/components/vlist/vlist.d.ts +29 -0
- package/dist/core/compose/features/gestures/index.d.ts +86 -0
- package/dist/core/compose/features/gestures/longpress.d.ts +85 -0
- package/dist/core/compose/features/gestures/pan.d.ts +108 -0
- package/dist/core/compose/features/gestures/pinch.d.ts +111 -0
- package/dist/core/compose/features/gestures/rotate.d.ts +111 -0
- package/dist/core/compose/features/gestures/swipe.d.ts +149 -0
- package/dist/core/compose/features/gestures/tap.d.ts +79 -0
- package/{src/core/compose/features/index.ts → dist/core/compose/features/index.d.ts} +1 -2
- package/{src/core/compose/index.ts → dist/core/compose/index.d.ts} +2 -11
- package/{src/core/gestures/index.ts → dist/core/gestures/index.d.ts} +1 -20
- package/dist/core/gestures/longpress.d.ts +23 -0
- package/dist/core/gestures/manager.d.ts +14 -0
- package/dist/core/gestures/pan.d.ts +12 -0
- package/dist/core/gestures/pinch.d.ts +14 -0
- package/dist/core/gestures/rotate.d.ts +14 -0
- package/dist/core/gestures/swipe.d.ts +20 -0
- package/dist/core/gestures/tap.d.ts +12 -0
- package/dist/core/gestures/types.d.ts +320 -0
- package/dist/core/gestures/utils.d.ts +57 -0
- package/dist/core/index.d.ts +13 -0
- package/dist/core/layout/config.d.ts +33 -0
- package/dist/core/layout/index.d.ts +51 -0
- package/dist/core/layout/jsx.d.ts +65 -0
- package/dist/core/layout/schema.d.ts +112 -0
- package/dist/core/layout/types.d.ts +69 -0
- package/dist/core/viewport/constants.d.ts +105 -0
- package/dist/core/viewport/features/base.d.ts +14 -0
- package/dist/core/viewport/features/collection.d.ts +41 -0
- package/dist/core/viewport/features/events.d.ts +13 -0
- package/{src/core/viewport/features/index.ts → dist/core/viewport/features/index.d.ts} +0 -7
- package/dist/core/viewport/features/item-size.d.ts +30 -0
- package/dist/core/viewport/features/loading.d.ts +34 -0
- package/dist/core/viewport/features/momentum.d.ts +17 -0
- package/dist/core/viewport/features/performance.d.ts +53 -0
- package/dist/core/viewport/features/placeholders.d.ts +38 -0
- package/dist/core/viewport/features/rendering.d.ts +16 -0
- package/dist/core/viewport/features/scrollbar.d.ts +26 -0
- package/dist/core/viewport/features/scrolling.d.ts +16 -0
- package/dist/core/viewport/features/utils.d.ts +43 -0
- package/dist/core/viewport/features/virtual.d.ts +18 -0
- package/{src/core/viewport/index.ts → dist/core/viewport/index.d.ts} +1 -17
- package/dist/core/viewport/types.d.ts +96 -0
- package/dist/core/viewport/utils/speed-tracker.d.ts +22 -0
- package/dist/core/viewport/viewport.d.ts +11 -0
- package/{src/index.ts → dist/index.d.ts} +0 -4
- package/dist/index.js +5143 -0
- package/dist/index.mjs +5111 -0
- package/dist/styles.css +254 -0
- package/dist/styles.css.map +1 -0
- package/package.json +5 -1
- package/.cursorrules +0 -117
- package/AI.md +0 -39
- package/CLAUDE.md +0 -882
- package/build.js +0 -377
- package/scripts/analyze-orphaned-functions.ts +0 -387
- package/scripts/debug/vlist-selection.ts +0 -121
- package/src/components/vlist/config.ts +0 -323
- package/src/components/vlist/features/api.ts +0 -626
- package/src/components/vlist/features/selection.ts +0 -436
- package/src/components/vlist/features/viewport.ts +0 -59
- package/src/components/vlist/features.ts +0 -112
- package/src/components/vlist/types.ts +0 -723
- package/src/components/vlist/vlist.ts +0 -92
- package/src/core/compose/features/gestures/index.ts +0 -227
- package/src/core/compose/features/gestures/longpress.ts +0 -383
- package/src/core/compose/features/gestures/pan.ts +0 -424
- package/src/core/compose/features/gestures/pinch.ts +0 -475
- package/src/core/compose/features/gestures/rotate.ts +0 -485
- package/src/core/compose/features/gestures/swipe.ts +0 -492
- package/src/core/compose/features/gestures/tap.ts +0 -334
- package/src/core/gestures/longpress.ts +0 -68
- package/src/core/gestures/manager.ts +0 -418
- package/src/core/gestures/pan.ts +0 -48
- package/src/core/gestures/pinch.ts +0 -58
- package/src/core/gestures/rotate.ts +0 -58
- package/src/core/gestures/swipe.ts +0 -66
- package/src/core/gestures/tap.ts +0 -45
- package/src/core/gestures/types.ts +0 -387
- package/src/core/gestures/utils.ts +0 -128
- package/src/core/index.ts +0 -43
- package/src/core/layout/config.ts +0 -102
- package/src/core/layout/index.ts +0 -168
- package/src/core/layout/jsx.ts +0 -174
- package/src/core/layout/schema.ts +0 -1044
- package/src/core/layout/types.ts +0 -95
- package/src/core/viewport/constants.ts +0 -145
- package/src/core/viewport/features/base.ts +0 -73
- package/src/core/viewport/features/collection.ts +0 -1182
- package/src/core/viewport/features/events.ts +0 -130
- package/src/core/viewport/features/item-size.ts +0 -271
- package/src/core/viewport/features/loading.ts +0 -263
- package/src/core/viewport/features/momentum.ts +0 -269
- package/src/core/viewport/features/performance.ts +0 -161
- package/src/core/viewport/features/placeholders.ts +0 -335
- package/src/core/viewport/features/rendering.ts +0 -962
- package/src/core/viewport/features/scrollbar.ts +0 -434
- package/src/core/viewport/features/scrolling.ts +0 -634
- package/src/core/viewport/features/utils.ts +0 -94
- package/src/core/viewport/features/virtual.ts +0 -525
- package/src/core/viewport/types.ts +0 -133
- package/src/core/viewport/utils/speed-tracker.ts +0 -79
- package/src/core/viewport/viewport.ts +0 -265
- package/test/benchmarks/layout/advanced.test.ts +0 -656
- package/test/benchmarks/layout/comparison.test.ts +0 -519
- package/test/benchmarks/layout/performance-comparison.test.ts +0 -274
- package/test/benchmarks/layout/real-components.test.ts +0 -733
- package/test/benchmarks/layout/simple.test.ts +0 -321
- package/test/benchmarks/layout/stress.test.ts +0 -990
- package/test/collection/basic.test.ts +0 -304
- package/test/components/vlist-selection.test.ts +0 -240
- package/test/components/vlist.test.ts +0 -63
- package/test/core/collection/adapter.test.ts +0 -161
- package/test/core/collection/collection.test.ts +0 -394
- package/test/core/layout/layout.test.ts +0 -201
- package/test/utils/dom-helpers.ts +0 -275
- package/test/utils/performance-helpers.ts +0 -392
- package/tsconfig.json +0 -20
|
@@ -1,321 +0,0 @@
|
|
|
1
|
-
// test/core/layout/simple-benchmarks.test.ts - Simple Performance Benchmarks
|
|
2
|
-
import { describe, test, expect, beforeAll } from "bun:test";
|
|
3
|
-
|
|
4
|
-
// Mock DOM environment for lightweight testing
|
|
5
|
-
const mockDocument = {
|
|
6
|
-
createElement: (tag: string) => ({
|
|
7
|
-
tagName: tag.toUpperCase(),
|
|
8
|
-
className: "",
|
|
9
|
-
textContent: "",
|
|
10
|
-
style: {},
|
|
11
|
-
classList: {
|
|
12
|
-
add: () => {},
|
|
13
|
-
remove: () => {},
|
|
14
|
-
contains: () => false,
|
|
15
|
-
},
|
|
16
|
-
setAttribute: () => {},
|
|
17
|
-
appendChild: () => {},
|
|
18
|
-
removeChild: () => {},
|
|
19
|
-
parentNode: null,
|
|
20
|
-
}),
|
|
21
|
-
createDocumentFragment: () => ({
|
|
22
|
-
appendChild: () => {},
|
|
23
|
-
hasChildNodes: () => false,
|
|
24
|
-
childNodes: { length: 0 },
|
|
25
|
-
}),
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
// Simple performance timer
|
|
29
|
-
const getTime = () => Date.now();
|
|
30
|
-
|
|
31
|
-
beforeAll(() => {
|
|
32
|
-
(global as any).document = mockDocument;
|
|
33
|
-
(global as any).HTMLElement = class MockHTMLElement {};
|
|
34
|
-
(global as any).DocumentFragment = class MockDocumentFragment {};
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
// Import layout system after DOM setup
|
|
38
|
-
import {
|
|
39
|
-
createLayout,
|
|
40
|
-
grid,
|
|
41
|
-
row,
|
|
42
|
-
stack,
|
|
43
|
-
performance as addonsPerformance,
|
|
44
|
-
} from "../../../src/core/layout";
|
|
45
|
-
|
|
46
|
-
describe("Simple Layout Benchmarks", () => {
|
|
47
|
-
describe("Basic Performance Tests", () => {
|
|
48
|
-
test("simple layout creation speed", () => {
|
|
49
|
-
const iterations = 1000;
|
|
50
|
-
const schema = ["div", "test", { class: "simple-test" }];
|
|
51
|
-
|
|
52
|
-
// Clear caches
|
|
53
|
-
addonsPerformance.clearAll();
|
|
54
|
-
|
|
55
|
-
// Measure mtrl-addons performance
|
|
56
|
-
const start = getTime();
|
|
57
|
-
for (let i = 0; i < iterations; i++) {
|
|
58
|
-
const layout = createLayout(schema);
|
|
59
|
-
layout.destroy();
|
|
60
|
-
}
|
|
61
|
-
const end = getTime();
|
|
62
|
-
const time = end - start;
|
|
63
|
-
|
|
64
|
-
console.log(`\n📊 Simple Layout Performance:`);
|
|
65
|
-
console.log(` ${iterations.toLocaleString()} layouts: ${time}ms`);
|
|
66
|
-
console.log(` Average per layout: ${(time / iterations).toFixed(3)}ms`);
|
|
67
|
-
console.log(` Per layout: ${(time / iterations).toFixed(3)}ms`);
|
|
68
|
-
|
|
69
|
-
expect(time).toBeGreaterThan(0);
|
|
70
|
-
expect(time).toBeLessThan(5000); // Should be reasonable
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
test("complex nested layout performance", () => {
|
|
74
|
-
const iterations = 500;
|
|
75
|
-
const complexSchema = [
|
|
76
|
-
"div",
|
|
77
|
-
"main",
|
|
78
|
-
{ class: "main-container" },
|
|
79
|
-
[
|
|
80
|
-
"div",
|
|
81
|
-
"header",
|
|
82
|
-
{ class: "header" },
|
|
83
|
-
["h1", "title", { text: "Title", class: "title" }],
|
|
84
|
-
[
|
|
85
|
-
"nav",
|
|
86
|
-
"nav",
|
|
87
|
-
{ class: "navigation" },
|
|
88
|
-
["a", "link1", { text: "Home", class: "nav-link" }],
|
|
89
|
-
["a", "link2", { text: "About", class: "nav-link" }],
|
|
90
|
-
],
|
|
91
|
-
],
|
|
92
|
-
[
|
|
93
|
-
"div",
|
|
94
|
-
"content",
|
|
95
|
-
{ class: "content" },
|
|
96
|
-
["p", "paragraph", { text: "Content paragraph", class: "text" }],
|
|
97
|
-
],
|
|
98
|
-
];
|
|
99
|
-
|
|
100
|
-
addonsPerformance.clearAll();
|
|
101
|
-
|
|
102
|
-
const start = getTime();
|
|
103
|
-
for (let i = 0; i < iterations; i++) {
|
|
104
|
-
const layout = createLayout(complexSchema);
|
|
105
|
-
layout.destroy();
|
|
106
|
-
}
|
|
107
|
-
const end = getTime();
|
|
108
|
-
const time = end - start;
|
|
109
|
-
|
|
110
|
-
console.log(`\n📊 Complex Layout Performance:`);
|
|
111
|
-
console.log(` ${iterations.toLocaleString()} layouts: ${time}ms`);
|
|
112
|
-
console.log(` Average per layout: ${(time / iterations).toFixed(3)}ms`);
|
|
113
|
-
console.log(` Per layout: ${(time / iterations).toFixed(3)}ms`);
|
|
114
|
-
|
|
115
|
-
expect(time).toBeGreaterThan(0);
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
test("cache effectiveness", () => {
|
|
119
|
-
const iterations = 1000;
|
|
120
|
-
const schema = [
|
|
121
|
-
"div",
|
|
122
|
-
"container",
|
|
123
|
-
{
|
|
124
|
-
layout: { type: "grid", columns: 3, gap: "1rem", align: "center" },
|
|
125
|
-
layoutItem: { span: 2, width: 6 },
|
|
126
|
-
},
|
|
127
|
-
];
|
|
128
|
-
|
|
129
|
-
// Cold cache (cleared)
|
|
130
|
-
addonsPerformance.clearAll();
|
|
131
|
-
const coldStart = getTime();
|
|
132
|
-
for (let i = 0; i < iterations; i++) {
|
|
133
|
-
const layout = createLayout(schema);
|
|
134
|
-
layout.destroy();
|
|
135
|
-
}
|
|
136
|
-
const coldEnd = getTime();
|
|
137
|
-
const coldTime = coldEnd - coldStart;
|
|
138
|
-
|
|
139
|
-
// Warm cache (already populated)
|
|
140
|
-
const warmStart = getTime();
|
|
141
|
-
for (let i = 0; i < iterations; i++) {
|
|
142
|
-
const layout = createLayout(schema);
|
|
143
|
-
layout.destroy();
|
|
144
|
-
}
|
|
145
|
-
const warmEnd = getTime();
|
|
146
|
-
const warmTime = warmEnd - warmStart;
|
|
147
|
-
|
|
148
|
-
const improvement =
|
|
149
|
-
coldTime > 0 ? ((coldTime - warmTime) / coldTime) * 100 : 0;
|
|
150
|
-
|
|
151
|
-
console.log(`\n🚀 Cache Performance:`);
|
|
152
|
-
console.log(` Cold cache: ${coldTime}ms`);
|
|
153
|
-
console.log(` Warm cache: ${warmTime}ms`);
|
|
154
|
-
console.log(` Improvement: ${improvement.toFixed(1)}%`);
|
|
155
|
-
|
|
156
|
-
expect(coldTime).toBeGreaterThan(0);
|
|
157
|
-
expect(warmTime).toBeGreaterThan(0);
|
|
158
|
-
});
|
|
159
|
-
|
|
160
|
-
test("convenience functions performance", () => {
|
|
161
|
-
const iterations = 500;
|
|
162
|
-
|
|
163
|
-
// Grid performance
|
|
164
|
-
const gridStart = getTime();
|
|
165
|
-
for (let i = 0; i < iterations; i++) {
|
|
166
|
-
const layout = grid(3, { gap: "1rem" });
|
|
167
|
-
layout.destroy();
|
|
168
|
-
}
|
|
169
|
-
const gridEnd = getTime();
|
|
170
|
-
const gridTime = gridEnd - gridStart;
|
|
171
|
-
|
|
172
|
-
// Row performance
|
|
173
|
-
const rowStart = getTime();
|
|
174
|
-
for (let i = 0; i < iterations; i++) {
|
|
175
|
-
const layout = row({ gap: "1rem", mobileStack: true });
|
|
176
|
-
layout.destroy();
|
|
177
|
-
}
|
|
178
|
-
const rowEnd = getTime();
|
|
179
|
-
const rowTime = rowEnd - rowStart;
|
|
180
|
-
|
|
181
|
-
// Stack performance
|
|
182
|
-
const stackStart = getTime();
|
|
183
|
-
for (let i = 0; i < iterations; i++) {
|
|
184
|
-
const layout = stack({ gap: "2rem" });
|
|
185
|
-
layout.destroy();
|
|
186
|
-
}
|
|
187
|
-
const stackEnd = getTime();
|
|
188
|
-
const stackTime = stackEnd - stackStart;
|
|
189
|
-
|
|
190
|
-
console.log(`\n📦 Convenience Functions (${iterations} each):`);
|
|
191
|
-
console.log(` Grid layouts: ${gridTime}ms`);
|
|
192
|
-
console.log(` Row layouts: ${rowTime}ms`);
|
|
193
|
-
console.log(` Stack layouts: ${stackTime}ms`);
|
|
194
|
-
console.log(` Total: ${gridTime + rowTime + stackTime}ms`);
|
|
195
|
-
|
|
196
|
-
expect(gridTime).toBeGreaterThanOrEqual(0);
|
|
197
|
-
expect(rowTime).toBeGreaterThanOrEqual(0);
|
|
198
|
-
expect(stackTime).toBeGreaterThanOrEqual(0);
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
test("large dataset handling", () => {
|
|
202
|
-
const itemCount = 100; // Reduced for simpler test
|
|
203
|
-
const schema: any[] = ["div", "container", { class: "large-dataset" }];
|
|
204
|
-
|
|
205
|
-
// Add many children
|
|
206
|
-
for (let i = 0; i < itemCount; i++) {
|
|
207
|
-
schema.push([
|
|
208
|
-
"div",
|
|
209
|
-
`item${i}`,
|
|
210
|
-
{
|
|
211
|
-
class: "dataset-item",
|
|
212
|
-
textContent: `Item ${i}`,
|
|
213
|
-
layoutItem: { width: (i % 12) + 1 },
|
|
214
|
-
},
|
|
215
|
-
]);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
const start = getTime();
|
|
219
|
-
const layout = createLayout(schema);
|
|
220
|
-
const end = getTime();
|
|
221
|
-
const createTime = end - start;
|
|
222
|
-
|
|
223
|
-
const destroyStart = getTime();
|
|
224
|
-
layout.destroy();
|
|
225
|
-
const destroyEnd = getTime();
|
|
226
|
-
const destroyTime = destroyEnd - destroyStart;
|
|
227
|
-
|
|
228
|
-
console.log(`\n🗂️ Large Dataset (${itemCount} items):`);
|
|
229
|
-
console.log(` Creation: ${createTime}ms`);
|
|
230
|
-
console.log(` Cleanup: ${destroyTime}ms`);
|
|
231
|
-
console.log(` Total: ${createTime + destroyTime}ms`);
|
|
232
|
-
|
|
233
|
-
expect(createTime).toBeGreaterThanOrEqual(0);
|
|
234
|
-
expect(destroyTime).toBeGreaterThanOrEqual(0);
|
|
235
|
-
});
|
|
236
|
-
|
|
237
|
-
test("performance summary", () => {
|
|
238
|
-
const testCases = [
|
|
239
|
-
{
|
|
240
|
-
name: "Simple div",
|
|
241
|
-
schema: ["div", { class: "simple" }],
|
|
242
|
-
iterations: 1000,
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
name: "Text content",
|
|
246
|
-
schema: ["p", "text", { text: "Hello World", class: "text" }],
|
|
247
|
-
iterations: 1000,
|
|
248
|
-
},
|
|
249
|
-
{
|
|
250
|
-
name: "Nested structure",
|
|
251
|
-
schema: [
|
|
252
|
-
"div",
|
|
253
|
-
"parent",
|
|
254
|
-
{ class: "parent" },
|
|
255
|
-
["span", "child", { textContent: "Child" }],
|
|
256
|
-
],
|
|
257
|
-
iterations: 500,
|
|
258
|
-
},
|
|
259
|
-
{
|
|
260
|
-
name: "Layout classes",
|
|
261
|
-
schema: [
|
|
262
|
-
"div",
|
|
263
|
-
"layout",
|
|
264
|
-
{
|
|
265
|
-
layout: { type: "grid", columns: 2 },
|
|
266
|
-
layoutItem: { span: 1 },
|
|
267
|
-
},
|
|
268
|
-
],
|
|
269
|
-
iterations: 500,
|
|
270
|
-
},
|
|
271
|
-
];
|
|
272
|
-
|
|
273
|
-
console.log(`\n📋 Performance Summary:`);
|
|
274
|
-
console.log(`======================`);
|
|
275
|
-
|
|
276
|
-
const results = testCases.map((testCase) => {
|
|
277
|
-
addonsPerformance.clearAll();
|
|
278
|
-
|
|
279
|
-
const start = getTime();
|
|
280
|
-
for (let i = 0; i < testCase.iterations; i++) {
|
|
281
|
-
const layout = createLayout(testCase.schema);
|
|
282
|
-
layout.destroy();
|
|
283
|
-
}
|
|
284
|
-
const end = getTime();
|
|
285
|
-
const time = end - start;
|
|
286
|
-
const avgTime = time / testCase.iterations;
|
|
287
|
-
const opsPerSec = Math.round(testCase.iterations / (time / 1000));
|
|
288
|
-
|
|
289
|
-
console.log(
|
|
290
|
-
` ${testCase.name.padEnd(16)}: ${avgTime.toFixed(3)}ms per operation`
|
|
291
|
-
);
|
|
292
|
-
|
|
293
|
-
return { ...testCase, time, avgTime, opsPerSec };
|
|
294
|
-
});
|
|
295
|
-
|
|
296
|
-
const totalOps = results.reduce((sum, r) => sum + r.iterations, 0);
|
|
297
|
-
const totalTime = results.reduce((sum, r) => sum + r.time, 0);
|
|
298
|
-
const overallOpsPerSec = Math.round(totalOps / (totalTime / 1000));
|
|
299
|
-
|
|
300
|
-
console.log(
|
|
301
|
-
` ${"Total".padEnd(
|
|
302
|
-
16
|
|
303
|
-
)}: ${totalOps.toLocaleString()} operations in ${totalTime}ms`
|
|
304
|
-
);
|
|
305
|
-
console.log(
|
|
306
|
-
` ${"Overall".padEnd(16)}: ${(totalTime / totalOps).toFixed(
|
|
307
|
-
3
|
|
308
|
-
)}ms per operation`
|
|
309
|
-
);
|
|
310
|
-
|
|
311
|
-
// Final bundle size note
|
|
312
|
-
console.log(
|
|
313
|
-
`\n📦 Bundle Size: 13,766 bytes (22.4% smaller than original)`
|
|
314
|
-
);
|
|
315
|
-
console.log(`🎯 Performance + Size Optimization: SUCCESS!`);
|
|
316
|
-
|
|
317
|
-
expect(results.length).toBe(testCases.length);
|
|
318
|
-
expect(overallOpsPerSec).toBeGreaterThan(100); // Should be reasonably fast
|
|
319
|
-
});
|
|
320
|
-
});
|
|
321
|
-
});
|