mtrl-addons 0.2.2 → 0.2.4

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.
Files changed (129) hide show
  1. package/{src/components/index.ts → dist/components/index.d.ts} +0 -2
  2. package/dist/components/vlist/config.d.ts +86 -0
  3. package/{src/components/vlist/constants.ts → dist/components/vlist/constants.d.ts} +10 -11
  4. package/dist/components/vlist/features/api.d.ts +7 -0
  5. package/{src/components/vlist/features/index.ts → dist/components/vlist/features/index.d.ts} +0 -2
  6. package/dist/components/vlist/features/selection.d.ts +6 -0
  7. package/dist/components/vlist/features/viewport.d.ts +9 -0
  8. package/dist/components/vlist/features.d.ts +31 -0
  9. package/{src/components/vlist/index.ts → dist/components/vlist/index.d.ts} +1 -10
  10. package/dist/components/vlist/types.d.ts +596 -0
  11. package/dist/components/vlist/vlist.d.ts +29 -0
  12. package/dist/core/compose/features/gestures/index.d.ts +86 -0
  13. package/dist/core/compose/features/gestures/longpress.d.ts +85 -0
  14. package/dist/core/compose/features/gestures/pan.d.ts +108 -0
  15. package/dist/core/compose/features/gestures/pinch.d.ts +111 -0
  16. package/dist/core/compose/features/gestures/rotate.d.ts +111 -0
  17. package/dist/core/compose/features/gestures/swipe.d.ts +149 -0
  18. package/dist/core/compose/features/gestures/tap.d.ts +79 -0
  19. package/{src/core/compose/features/index.ts → dist/core/compose/features/index.d.ts} +1 -2
  20. package/{src/core/compose/index.ts → dist/core/compose/index.d.ts} +2 -11
  21. package/{src/core/gestures/index.ts → dist/core/gestures/index.d.ts} +1 -20
  22. package/dist/core/gestures/longpress.d.ts +23 -0
  23. package/dist/core/gestures/manager.d.ts +14 -0
  24. package/dist/core/gestures/pan.d.ts +12 -0
  25. package/dist/core/gestures/pinch.d.ts +14 -0
  26. package/dist/core/gestures/rotate.d.ts +14 -0
  27. package/dist/core/gestures/swipe.d.ts +20 -0
  28. package/dist/core/gestures/tap.d.ts +12 -0
  29. package/dist/core/gestures/types.d.ts +320 -0
  30. package/dist/core/gestures/utils.d.ts +57 -0
  31. package/dist/core/index.d.ts +13 -0
  32. package/dist/core/layout/config.d.ts +33 -0
  33. package/dist/core/layout/index.d.ts +51 -0
  34. package/dist/core/layout/jsx.d.ts +65 -0
  35. package/dist/core/layout/schema.d.ts +112 -0
  36. package/dist/core/layout/types.d.ts +69 -0
  37. package/dist/core/viewport/constants.d.ts +105 -0
  38. package/dist/core/viewport/features/base.d.ts +14 -0
  39. package/dist/core/viewport/features/collection.d.ts +41 -0
  40. package/dist/core/viewport/features/events.d.ts +13 -0
  41. package/{src/core/viewport/features/index.ts → dist/core/viewport/features/index.d.ts} +0 -7
  42. package/dist/core/viewport/features/item-size.d.ts +30 -0
  43. package/dist/core/viewport/features/loading.d.ts +34 -0
  44. package/dist/core/viewport/features/momentum.d.ts +17 -0
  45. package/dist/core/viewport/features/performance.d.ts +53 -0
  46. package/dist/core/viewport/features/placeholders.d.ts +38 -0
  47. package/dist/core/viewport/features/rendering.d.ts +16 -0
  48. package/dist/core/viewport/features/scrollbar.d.ts +26 -0
  49. package/dist/core/viewport/features/scrolling.d.ts +16 -0
  50. package/dist/core/viewport/features/utils.d.ts +43 -0
  51. package/dist/core/viewport/features/virtual.d.ts +18 -0
  52. package/{src/core/viewport/index.ts → dist/core/viewport/index.d.ts} +1 -17
  53. package/dist/core/viewport/types.d.ts +96 -0
  54. package/dist/core/viewport/utils/speed-tracker.d.ts +22 -0
  55. package/dist/core/viewport/viewport.d.ts +11 -0
  56. package/{src/index.ts → dist/index.d.ts} +0 -4
  57. package/dist/index.js +5143 -0
  58. package/dist/index.mjs +5111 -0
  59. package/dist/styles.css +254 -0
  60. package/dist/styles.css.map +1 -0
  61. package/package.json +16 -2
  62. package/.cursorrules +0 -117
  63. package/AI.md +0 -39
  64. package/CLAUDE.md +0 -882
  65. package/build.js +0 -377
  66. package/index.ts +0 -7
  67. package/scripts/analyze-orphaned-functions.ts +0 -387
  68. package/scripts/debug/vlist-selection.ts +0 -121
  69. package/src/components/vlist/config.ts +0 -323
  70. package/src/components/vlist/features/api.ts +0 -626
  71. package/src/components/vlist/features/selection.ts +0 -436
  72. package/src/components/vlist/features/viewport.ts +0 -59
  73. package/src/components/vlist/features.ts +0 -112
  74. package/src/components/vlist/types.ts +0 -723
  75. package/src/components/vlist/vlist.ts +0 -92
  76. package/src/core/compose/features/gestures/index.ts +0 -227
  77. package/src/core/compose/features/gestures/longpress.ts +0 -383
  78. package/src/core/compose/features/gestures/pan.ts +0 -424
  79. package/src/core/compose/features/gestures/pinch.ts +0 -475
  80. package/src/core/compose/features/gestures/rotate.ts +0 -485
  81. package/src/core/compose/features/gestures/swipe.ts +0 -492
  82. package/src/core/compose/features/gestures/tap.ts +0 -334
  83. package/src/core/gestures/longpress.ts +0 -68
  84. package/src/core/gestures/manager.ts +0 -418
  85. package/src/core/gestures/pan.ts +0 -48
  86. package/src/core/gestures/pinch.ts +0 -58
  87. package/src/core/gestures/rotate.ts +0 -58
  88. package/src/core/gestures/swipe.ts +0 -66
  89. package/src/core/gestures/tap.ts +0 -45
  90. package/src/core/gestures/types.ts +0 -387
  91. package/src/core/gestures/utils.ts +0 -128
  92. package/src/core/index.ts +0 -43
  93. package/src/core/layout/config.ts +0 -102
  94. package/src/core/layout/index.ts +0 -168
  95. package/src/core/layout/jsx.ts +0 -174
  96. package/src/core/layout/schema.ts +0 -1044
  97. package/src/core/layout/types.ts +0 -95
  98. package/src/core/viewport/constants.ts +0 -145
  99. package/src/core/viewport/features/base.ts +0 -73
  100. package/src/core/viewport/features/collection.ts +0 -1182
  101. package/src/core/viewport/features/events.ts +0 -130
  102. package/src/core/viewport/features/item-size.ts +0 -271
  103. package/src/core/viewport/features/loading.ts +0 -263
  104. package/src/core/viewport/features/momentum.ts +0 -269
  105. package/src/core/viewport/features/performance.ts +0 -161
  106. package/src/core/viewport/features/placeholders.ts +0 -335
  107. package/src/core/viewport/features/rendering.ts +0 -962
  108. package/src/core/viewport/features/scrollbar.ts +0 -434
  109. package/src/core/viewport/features/scrolling.ts +0 -634
  110. package/src/core/viewport/features/utils.ts +0 -94
  111. package/src/core/viewport/features/virtual.ts +0 -525
  112. package/src/core/viewport/types.ts +0 -133
  113. package/src/core/viewport/utils/speed-tracker.ts +0 -79
  114. package/src/core/viewport/viewport.ts +0 -265
  115. package/test/benchmarks/layout/advanced.test.ts +0 -656
  116. package/test/benchmarks/layout/comparison.test.ts +0 -519
  117. package/test/benchmarks/layout/performance-comparison.test.ts +0 -274
  118. package/test/benchmarks/layout/real-components.test.ts +0 -733
  119. package/test/benchmarks/layout/simple.test.ts +0 -321
  120. package/test/benchmarks/layout/stress.test.ts +0 -990
  121. package/test/collection/basic.test.ts +0 -304
  122. package/test/components/vlist-selection.test.ts +0 -240
  123. package/test/components/vlist.test.ts +0 -63
  124. package/test/core/collection/adapter.test.ts +0 -161
  125. package/test/core/collection/collection.test.ts +0 -394
  126. package/test/core/layout/layout.test.ts +0 -201
  127. package/test/utils/dom-helpers.ts +0 -275
  128. package/test/utils/performance-helpers.ts +0 -392
  129. package/tsconfig.json +0 -20
@@ -1,201 +0,0 @@
1
- // test/core/layout/layout.test.ts
2
- import { describe, test, expect, beforeAll, afterAll } from "bun:test";
3
- import { JSDOM } from "jsdom";
4
-
5
- // Setup for DOM testing environment
6
- let dom: JSDOM;
7
- let window: Window;
8
- let document: Document;
9
- let originalGlobalDocument: any;
10
- let originalGlobalWindow: any;
11
-
12
- beforeAll(() => {
13
- // Create JSDOM instance
14
- dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
15
- url: "http://localhost/",
16
- pretendToBeVisual: true,
17
- resources: "usable",
18
- });
19
-
20
- window = dom.window as any;
21
- document = window.document;
22
-
23
- // Store original globals
24
- originalGlobalDocument = global.document;
25
- originalGlobalWindow = global.window;
26
-
27
- // Set globals
28
- global.document = document;
29
- global.window = window as any;
30
- global.Element = (window as any).Element;
31
- global.HTMLElement = (window as any).HTMLElement;
32
- global.DocumentFragment = (window as any).DocumentFragment;
33
-
34
- // Add DOM APIs
35
- global.getComputedStyle = () => ({
36
- position: "static",
37
- getPropertyValue: () => "",
38
- });
39
- });
40
-
41
- afterAll(() => {
42
- // Restore globals
43
- global.document = originalGlobalDocument;
44
- global.window = originalGlobalWindow;
45
- window.close();
46
- });
47
-
48
- // Import after DOM setup
49
- import {
50
- createLayout,
51
- layout,
52
- grid,
53
- row,
54
- stack,
55
- template,
56
- performance,
57
- type LayoutResult,
58
- } from "../../../src/core/layout";
59
-
60
- describe("Layout System", () => {
61
- test("should create a basic layout", () => {
62
- const result = createLayout(["div", { class: "test" }]);
63
-
64
- expect(result).toBeDefined();
65
- expect(result.element).toBeDefined();
66
- expect(result.get).toBeDefined();
67
- expect(result.getAll).toBeDefined();
68
- expect(result.destroy).toBeDefined();
69
- });
70
-
71
- test("should create a stack layout", () => {
72
- const result = stack({ gap: "2rem" });
73
-
74
- expect(result).toBeDefined();
75
- expect(result.element).toBeDefined();
76
- });
77
-
78
- test("should create a grid layout", () => {
79
- const result = grid(3, { gap: "1rem" });
80
-
81
- expect(result).toBeDefined();
82
- expect(result.element).toBeDefined();
83
- });
84
-
85
- test("should create a row layout", () => {
86
- const result = row({ gap: "1rem" });
87
-
88
- expect(result).toBeDefined();
89
- expect(result.element).toBeDefined();
90
- });
91
-
92
- test("should create a template layout", () => {
93
- const templateFn = (props: Record<string, any>) => [
94
- "div",
95
- { class: `template-${props.type}` },
96
- ];
97
-
98
- const result = template(templateFn, { type: "test" });
99
-
100
- expect(result).toBeDefined();
101
- expect(result.element).toBeDefined();
102
- });
103
-
104
- test("should provide performance utilities", () => {
105
- expect(performance.clearCache).toBeDefined();
106
- expect(performance.clearFragmentPool).toBeDefined();
107
- expect(performance.clearAll).toBeDefined();
108
- expect(performance.getStats).toBeDefined();
109
-
110
- // Should not throw
111
- performance.clearAll();
112
- const stats = performance.getStats();
113
- expect(stats).toBeDefined();
114
- });
115
-
116
- test("should handle array schema", () => {
117
- const result = createLayout([
118
- "div",
119
- "container",
120
- { class: "main" },
121
- ["span", "child", { textContent: "Hello" }],
122
- ]);
123
-
124
- expect(result).toBeDefined();
125
- expect(result.get("container")).toBeDefined();
126
- expect(result.get("child")).toBeDefined();
127
- });
128
-
129
- test("should handle object schema", () => {
130
- const result = createLayout({
131
- element: {
132
- creator: (opts: any) => {
133
- const div = document.createElement("div");
134
- if (opts.class) div.className = opts.class;
135
- return div;
136
- },
137
- options: { class: "root" },
138
- children: {
139
- child: {
140
- creator: (opts: any) => {
141
- const span = document.createElement("span");
142
- if (opts.textContent) span.textContent = opts.textContent;
143
- return span;
144
- },
145
- options: { textContent: "Hello" },
146
- },
147
- },
148
- },
149
- });
150
-
151
- expect(result).toBeDefined();
152
- expect(result.get("child")).toBeDefined();
153
- });
154
-
155
- test("should handle layout destruction", () => {
156
- const result = createLayout(["div", { class: "destroyable" }]);
157
-
158
- expect(result.element).toBeDefined();
159
-
160
- // Should not throw
161
- result.destroy();
162
- });
163
-
164
- test("should handle named components", () => {
165
- const result = createLayout([
166
- "div",
167
- "main",
168
- { class: "container" },
169
- ["span", "text", { textContent: "Content" }],
170
- ]);
171
-
172
- expect(result.get("main")).toBeDefined();
173
- expect(result.get("text")).toBeDefined();
174
- expect(result.get("nonexistent")).toBeNull();
175
-
176
- const all = result.getAll();
177
- expect(all.main).toBeDefined();
178
- expect(all.text).toBeDefined();
179
- });
180
-
181
- test("should handle layout configurations", () => {
182
- const result = createLayout([
183
- "div",
184
- {
185
- layout: {
186
- type: "grid",
187
- columns: 3,
188
- gap: "1rem",
189
- align: "center",
190
- },
191
- layoutItem: {
192
- span: 2,
193
- width: 6,
194
- },
195
- },
196
- ]);
197
-
198
- expect(result).toBeDefined();
199
- expect(result.element).toBeDefined();
200
- });
201
- });
@@ -1,275 +0,0 @@
1
- // test/utils/dom-helpers.ts - DOM Testing Utilities
2
-
3
- /**
4
- * Creates a test container element with scrolling capabilities
5
- * @param height - Height of the container (default: 400px)
6
- * @param width - Width of the container (default: 100%)
7
- * @returns HTMLElement configured for testing
8
- */
9
- export function createContainer(height = "400px", width = "100%"): HTMLElement {
10
- const container = document.createElement("div");
11
- container.style.height = height;
12
- container.style.width = width;
13
- container.style.overflow = "auto";
14
- container.style.position = "relative";
15
- container.className = "test-container";
16
- document.body.appendChild(container);
17
- return container;
18
- }
19
-
20
- /**
21
- * Cleans up a test container by removing it from DOM
22
- * @param container - Container to cleanup
23
- */
24
- export function cleanupContainer(container: HTMLElement): void {
25
- if (container && container.parentNode) {
26
- container.parentNode.removeChild(container);
27
- }
28
- }
29
-
30
- /**
31
- * Simulates a scroll event on an element
32
- * @param element - Element to scroll
33
- * @param scrollTop - Scroll position
34
- * @param scrollLeft - Horizontal scroll position (optional)
35
- */
36
- export function simulateScroll(
37
- element: HTMLElement,
38
- scrollTop: number,
39
- scrollLeft: number = 0
40
- ): void {
41
- element.scrollTop = scrollTop;
42
- element.scrollLeft = scrollLeft;
43
-
44
- const scrollEvent = new Event("scroll", {
45
- bubbles: true,
46
- cancelable: true,
47
- });
48
-
49
- element.dispatchEvent(scrollEvent);
50
- }
51
-
52
- /**
53
- * Simulates a resize event on an element
54
- * @param element - Element to resize
55
- * @param width - New width
56
- * @param height - New height
57
- */
58
- export function simulateResize(
59
- element: HTMLElement,
60
- width: number,
61
- height: number
62
- ): void {
63
- element.style.width = `${width}px`;
64
- element.style.height = `${height}px`;
65
-
66
- const resizeEvent = new Event("resize", {
67
- bubbles: true,
68
- cancelable: true,
69
- });
70
-
71
- window.dispatchEvent(resizeEvent);
72
- }
73
-
74
- /**
75
- * Waits for the next animation frame
76
- * @returns Promise that resolves after requestAnimationFrame
77
- */
78
- export function waitForAnimationFrame(): Promise<void> {
79
- return new Promise((resolve) => {
80
- requestAnimationFrame(() => resolve());
81
- });
82
- }
83
-
84
- /**
85
- * Waits for multiple animation frames
86
- * @param count - Number of frames to wait
87
- * @returns Promise that resolves after the specified frames
88
- */
89
- export function waitForAnimationFrames(count: number): Promise<void> {
90
- return new Promise((resolve) => {
91
- let remaining = count;
92
-
93
- function frame() {
94
- remaining--;
95
- if (remaining <= 0) {
96
- resolve();
97
- } else {
98
- requestAnimationFrame(frame);
99
- }
100
- }
101
-
102
- requestAnimationFrame(frame);
103
- });
104
- }
105
-
106
- /**
107
- * Waits for a specific amount of time
108
- * @param ms - Milliseconds to wait
109
- * @returns Promise that resolves after the timeout
110
- */
111
- export function waitFor(ms: number): Promise<void> {
112
- return new Promise((resolve) => setTimeout(resolve, ms));
113
- }
114
-
115
- /**
116
- * Gets the computed style of an element
117
- * @param element - Element to get style for
118
- * @param property - CSS property to get
119
- * @returns The computed style value
120
- */
121
- export function getComputedStyleValue(
122
- element: HTMLElement,
123
- property: string
124
- ): string {
125
- return window.getComputedStyle(element).getPropertyValue(property);
126
- }
127
-
128
- /**
129
- * Checks if an element is visible in the viewport
130
- * @param element - Element to check
131
- * @param container - Container element (default: document.body)
132
- * @returns Whether the element is visible
133
- */
134
- export function isElementVisible(
135
- element: HTMLElement,
136
- container: HTMLElement = document.body
137
- ): boolean {
138
- const rect = element.getBoundingClientRect();
139
- const containerRect = container.getBoundingClientRect();
140
-
141
- return (
142
- rect.top >= containerRect.top &&
143
- rect.left >= containerRect.left &&
144
- rect.bottom <= containerRect.bottom &&
145
- rect.right <= containerRect.right
146
- );
147
- }
148
-
149
- /**
150
- * Gets all elements within a visible range
151
- * @param container - Container element
152
- * @param selector - CSS selector for elements
153
- * @returns Array of visible elements
154
- */
155
- export function getVisibleElements(
156
- container: HTMLElement,
157
- selector: string = ".test-item"
158
- ): HTMLElement[] {
159
- const elements = Array.from(
160
- container.querySelectorAll(selector)
161
- ) as HTMLElement[];
162
- return elements.filter((el) => isElementVisible(el, container));
163
- }
164
-
165
- /**
166
- * Simulates a mouse event on an element
167
- * @param element - Target element
168
- * @param type - Event type (click, mousedown, etc.)
169
- * @param options - Event options
170
- */
171
- export function simulateMouseEvent(
172
- element: HTMLElement,
173
- type: string,
174
- options: Partial<MouseEventInit> = {}
175
- ): void {
176
- const event = new MouseEvent(type, {
177
- bubbles: true,
178
- cancelable: true,
179
- ...options,
180
- });
181
-
182
- element.dispatchEvent(event);
183
- }
184
-
185
- /**
186
- * Simulates a touch event on an element
187
- * @param element - Target element
188
- * @param type - Event type (touchstart, touchmove, etc.)
189
- * @param touches - Touch points
190
- */
191
- export function simulateTouchEvent(
192
- element: HTMLElement,
193
- type: string,
194
- touches: Touch[] = []
195
- ): void {
196
- const event = new TouchEvent(type, {
197
- bubbles: true,
198
- cancelable: true,
199
- touches,
200
- });
201
-
202
- element.dispatchEvent(event);
203
- }
204
-
205
- /**
206
- * Creates a mock IntersectionObserver for testing
207
- * @param callback - Callback function
208
- * @returns Mock IntersectionObserver
209
- */
210
- export function createMockIntersectionObserver(
211
- callback: IntersectionObserverCallback
212
- ): any {
213
- const observer = {
214
- observe: () => {},
215
- unobserve: () => {},
216
- disconnect: () => {},
217
- root: null,
218
- rootMargin: "",
219
- thresholds: [],
220
- takeRecords: () => [],
221
- };
222
-
223
- // Store callback for manual triggering
224
- (observer as any).callback = callback;
225
-
226
- return observer;
227
- }
228
-
229
- /**
230
- * Triggers intersection observer callback manually
231
- * @param observer - Mock observer
232
- * @param entries - Intersection entries
233
- */
234
- export function triggerIntersectionObserver(
235
- observer: any,
236
- entries: IntersectionObserverEntry[]
237
- ): void {
238
- if (observer.callback) {
239
- observer.callback(entries, observer);
240
- }
241
- }
242
-
243
- /**
244
- * Creates a mock ResizeObserver for testing
245
- * @param callback - Callback function
246
- * @returns Mock ResizeObserver
247
- */
248
- export function createMockResizeObserver(
249
- callback: ResizeObserverCallback
250
- ): any {
251
- const observer = {
252
- observe: () => {},
253
- unobserve: () => {},
254
- disconnect: () => {},
255
- };
256
-
257
- // Store callback for manual triggering
258
- (observer as any).callback = callback;
259
-
260
- return observer;
261
- }
262
-
263
- /**
264
- * Triggers resize observer callback manually
265
- * @param observer - Mock observer
266
- * @param entries - Resize entries
267
- */
268
- export function triggerResizeObserver(
269
- observer: any,
270
- entries: ResizeObserverEntry[]
271
- ): void {
272
- if (observer.callback) {
273
- observer.callback(entries, observer);
274
- }
275
- }