npm - mtrl-addons - Versions diffs - 0.2.1 → 0.2.3 - Mend

mtrl-addons 0.2.1 → 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.

Files changed (128) hide show

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 -9
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 +6 -1
package/src/styles/components/_vlist.scss +234 -213
package/.cursorrules +0 -117
package/AI.md +0 -241
package/build.js +0 -201
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 -322
package/src/components/vlist/features/selection.ts +0 -444
package/src/components/vlist/features/viewport.ts +0 -65
package/src/components/vlist/features.ts +0 -112
package/src/components/vlist/types.ts +0 -591
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 -1001
package/src/core/layout/types.ts +0 -95
package/src/core/viewport/constants.ts +0 -140
package/src/core/viewport/features/base.ts +0 -73
package/src/core/viewport/features/collection.ts +0 -882
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 -260
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 -568
package/src/core/viewport/features/scrollbar.ts +0 -434
package/src/core/viewport/features/scrolling.ts +0 -618
package/src/core/viewport/features/utils.ts +0 -88
package/src/core/viewport/features/virtual.ts +0 -384
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 -246
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

package/test/benchmarks/layout/comparison.test.ts DELETED Viewed

@@ -1,519 +0,0 @@
-// test/core/layout/benchmarks.test.ts - Layout Performance Benchmarks
-import {
-  describe,
-  test,
-  expect,
-  beforeAll,
-  afterAll,
-  beforeEach,
-  afterEach,
-} from "bun:test";
-import { JSDOM } from "jsdom";
-// Setup for DOM testing environment
-let dom: JSDOM;
-let window: Window;
-let document: Document;
-let originalGlobalDocument: any;
-let originalGlobalWindow: any;
-// Setup DOM environment before importing modules
-beforeAll(() => {
-  // Create a new JSDOM instance
-  dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
-    url: "http://localhost/",
-    pretendToBeVisual: true,
-    resources: "usable",
-  });
-  // Get window and document from jsdom
-  window = dom.window as any;
-  document = window.document;
-  // Store original globals
-  originalGlobalDocument = global.document;
-  originalGlobalWindow = global.window;
-  // Set globals to use jsdom
-  global.document = document;
-  global.window = window as any;
-  global.Element = (window as any).Element;
-  global.HTMLElement = (window as any).HTMLElement;
-  global.DocumentFragment = (window as any).DocumentFragment;
-  global.requestAnimationFrame = (window as any).requestAnimationFrame;
-  global.cancelAnimationFrame = (window as any).cancelAnimationFrame;
-  // Fix performance.now conflict - use custom timer
-  global.performance = {
-    now: () => Date.now(),
-  };
-  // Add missing DOM APIs
-  global.getComputedStyle =
-    (window as any).getComputedStyle ||
-    (() => ({
-      position: "static",
-      getPropertyValue: () => "",
-    }));
-});
-afterAll(() => {
-  // Restore original globals
-  global.document = originalGlobalDocument;
-  global.window = originalGlobalWindow;
-  // Clean up jsdom
-  window.close();
-});
-// Import layout systems after DOM setup
-import {
-  createLayout as addonsLayout,
-  grid,
-  row,
-  stack,
-  performance as addonsPerformance,
-} from "../../../src/core/layout";
-// Mock mtrl createLayout for comparison
-const mockMtrlLayout = (schema: any) => {
-  // Simple mock that creates basic DOM structure
-  const createElement = (options: any = {}) => {
-    const tag = options.tag || "div";
-    const element = document.createElement(tag);
-    if (options.class) element.className = options.class;
-    if (options.text || options.textContent) {
-      element.textContent = options.text || options.textContent;
-    }
-    return element;
-  };
-  const processSchema = (items: any[], parent?: any): any => {
-    const layout: any = {};
-    let currentElement = null;
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (typeof item === "string" && i === 0) {
-        // Tag name
-        currentElement = createElement({ tag: item });
-        layout.element = currentElement;
-      } else if (typeof item === "string" && i === 1) {
-        // Name
-        layout[item] = currentElement;
-      } else if (typeof item === "object" && !Array.isArray(item)) {
-        // Options
-        if (currentElement && item.class) {
-          currentElement.className = item.class;
-        }
-        if (currentElement && (item.text || item.textContent)) {
-          currentElement.textContent = item.text || item.textContent;
-        }
-      } else if (Array.isArray(item)) {
-        // Nested array
-        const childResult = processSchema(item, currentElement);
-        if (currentElement && childResult.element) {
-          currentElement.appendChild(childResult.element);
-        }
-        Object.assign(layout, childResult);
-      }
-    }
-    return {
-      layout,
-      element: layout.element,
-      component: layout,
-      get: (name: string) => layout[name] || null,
-      getAll: () => layout,
-      destroy: () => {
-        if (layout.element && layout.element.parentNode) {
-          layout.element.parentNode.removeChild(layout.element);
-        }
-      },
-    };
-  };
-  return processSchema(Array.isArray(schema) ? schema : [schema]);
-};
-describe("Layout Performance Benchmarks", () => {
-  let container: HTMLElement;
-  beforeEach(() => {
-    // Create fresh container for each test
-    container = document.createElement("div");
-    container.style.height = "400px";
-    container.style.overflow = "auto";
-    document.body.appendChild(container);
-    // Clear caches before each test
-    addonsPerformance.clearAll();
-  });
-  afterEach(() => {
-    // Cleanup container
-    if (container && container.parentNode) {
-      container.parentNode.removeChild(container);
-    }
-  });
-  describe("Performance Environment", () => {
-    test("DOM environment is ready", () => {
-      expect(document).toBeDefined();
-      expect(document.createElement).toBeDefined();
-      expect(performance.now).toBeDefined();
-      expect(container).toBeDefined();
-    });
-    test("layout systems are available", () => {
-      expect(addonsLayout).toBeDefined();
-      expect(mockMtrlLayout).toBeDefined();
-      expect(addonsPerformance).toBeDefined();
-    });
-  });
-  describe("Basic Performance Comparison", () => {
-    test("simple layout creation speed", () => {
-      const iterations = 1000;
-      const schema = ["div", "test", { class: "simple-test" }];
-      // Test mtrl-addons
-      addonsPerformance.clearAll();
-      const addonsStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = addonsLayout(schema);
-        layout.destroy();
-      }
-      const addonsEnd = performance.now();
-      const addonsTime = addonsEnd - addonsStart;
-      // Test mock mtrl
-      const mtrlStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = mockMtrlLayout(schema);
-        layout.destroy();
-      }
-      const mtrlEnd = performance.now();
-      const mtrlTime = mtrlEnd - mtrlStart;
-      console.log(`\n📊 Simple Layout Performance (${iterations} iterations):`);
-      console.log(`  mtrl-addons: ${addonsTime.toFixed(2)}ms`);
-      console.log(`  mock-mtrl:   ${mtrlTime.toFixed(2)}ms`);
-      console.log(`  Difference:  ${(addonsTime - mtrlTime).toFixed(2)}ms`);
-      console.log(`  Ratio:       ${(addonsTime / mtrlTime).toFixed(2)}x`);
-      expect(addonsTime).toBeGreaterThan(0);
-      expect(mtrlTime).toBeGreaterThan(0);
-      expect(addonsTime).toBeLessThan(5000); // Should complete in reasonable time
-    });
-    test("complex nested layout speed", () => {
-      const iterations = 500;
-      const complexSchema = [
-        "div",
-        "main",
-        { class: "main-container" },
-        [
-          "div",
-          "header",
-          { class: "header" },
-          ["h1", "title", { text: "Title", class: "title" }],
-          [
-            "nav",
-            "nav",
-            { class: "navigation" },
-            ["a", "link1", { text: "Home", class: "nav-link" }],
-            ["a", "link2", { text: "About", class: "nav-link" }],
-          ],
-        ],
-        [
-          "div",
-          "content",
-          { class: "content" },
-          ["p", "paragraph", { text: "Content paragraph", class: "text" }],
-        ],
-      ];
-      // Test mtrl-addons
-      addonsPerformance.clearAll();
-      const addonsStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = addonsLayout(complexSchema);
-        layout.destroy();
-      }
-      const addonsEnd = performance.now();
-      const addonsTime = addonsEnd - addonsStart;
-      // Test mock mtrl
-      const mtrlStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = mockMtrlLayout(complexSchema);
-        layout.destroy();
-      }
-      const mtrlEnd = performance.now();
-      const mtrlTime = mtrlEnd - mtrlStart;
-      console.log(
-        `\n📊 Complex Layout Performance (${iterations} iterations):`
-      );
-      console.log(`  mtrl-addons: ${addonsTime.toFixed(2)}ms`);
-      console.log(`  mock-mtrl:   ${mtrlTime.toFixed(2)}ms`);
-      console.log(`  Difference:  ${(addonsTime - mtrlTime).toFixed(2)}ms`);
-      console.log(`  Ratio:       ${(addonsTime / mtrlTime).toFixed(2)}x`);
-      expect(addonsTime).toBeGreaterThan(0);
-      expect(mtrlTime).toBeGreaterThan(0);
-    });
-  });
-  describe("Cache Effectiveness", () => {
-    test("class name cache impact", () => {
-      const iterations = 1000;
-      const schema = [
-        "div",
-        "container",
-        {
-          layout: { type: "grid", columns: 3, gap: "1rem", align: "center" },
-          layoutItem: { span: 2, width: 6 },
-        },
-      ];
-      // First run - cache empty
-      addonsPerformance.clearAll();
-      const coldStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = addonsLayout(schema);
-        layout.destroy();
-      }
-      const coldEnd = performance.now();
-      const coldTime = coldEnd - coldStart;
-      // Second run - cache warmed
-      const warmStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = addonsLayout(schema);
-        layout.destroy();
-      }
-      const warmEnd = performance.now();
-      const warmTime = warmEnd - warmStart;
-      const improvement = ((coldTime - warmTime) / coldTime) * 100;
-      console.log(`\n🚀 Cache Performance (${iterations} iterations):`);
-      console.log(`  Cold cache:  ${coldTime.toFixed(2)}ms`);
-      console.log(`  Warm cache:  ${warmTime.toFixed(2)}ms`);
-      console.log(`  Improvement: ${improvement.toFixed(1)}%`);
-      expect(coldTime).toBeGreaterThan(0);
-      expect(warmTime).toBeGreaterThan(0);
-      expect(warmTime).toBeLessThanOrEqual(coldTime); // Should be same or faster
-    });
-    test("fragment pool effectiveness", () => {
-      const iterations = 2000;
-      const schema = [
-        "div",
-        "container",
-        { class: "fragment-test" },
-        ["span", "child1", { textContent: "Child 1" }],
-        ["span", "child2", { textContent: "Child 2" }],
-        ["span", "child3", { textContent: "Child 3" }],
-      ];
-      // Clear pool and measure
-      addonsPerformance.clearAll();
-      const start = performance.now();
-      const layouts = [];
-      for (let i = 0; i < iterations; i++) {
-        layouts.push(addonsLayout(schema));
-      }
-      // Destroy all at once to test fragment recycling
-      for (const layout of layouts) {
-        layout.destroy();
-      }
-      const end = performance.now();
-      const time = end - start;
-      console.log(`\n♻️  Fragment Pool Test (${iterations} layouts):`);
-      console.log(`  Total time:     ${time.toFixed(2)}ms`);
-      console.log(`  Avg per layout: ${(time / iterations).toFixed(3)}ms`);
-      console.log(`  Per layout:     ${(time / iterations).toFixed(3)}ms`);
-      expect(time).toBeGreaterThan(0);
-      expect(time).toBeLessThan(10000); // Should be fast
-    });
-  });
-  describe("Convenience Functions Performance", () => {
-    test("grid layout convenience function", () => {
-      const iterations = 500;
-      const start = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = grid(3, { gap: "1rem" });
-        layout.destroy();
-      }
-      const end = performance.now();
-      const time = end - start;
-      console.log(`\n📐 Grid Convenience Function (${iterations} iterations):`);
-      console.log(`  Time:           ${time.toFixed(2)}ms`);
-      console.log(`  Avg per grid:   ${(time / iterations).toFixed(3)}ms`);
-      expect(time).toBeGreaterThan(0);
-      expect(time).toBeLessThan(5000);
-    });
-    test("row and stack convenience functions", () => {
-      const iterations = 500;
-      const rowStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = row({ gap: "1rem", mobileStack: true });
-        layout.destroy();
-      }
-      const rowEnd = performance.now();
-      const rowTime = rowEnd - rowStart;
-      const stackStart = performance.now();
-      for (let i = 0; i < iterations; i++) {
-        const layout = stack({ gap: "2rem" });
-        layout.destroy();
-      }
-      const stackEnd = performance.now();
-      const stackTime = stackEnd - stackStart;
-      console.log(`\n📦 Layout Functions (${iterations} each):`);
-      console.log(`  Row layouts:    ${rowTime.toFixed(2)}ms`);
-      console.log(`  Stack layouts:  ${stackTime.toFixed(2)}ms`);
-      console.log(`  Total:          ${(rowTime + stackTime).toFixed(2)}ms`);
-      expect(rowTime).toBeGreaterThan(0);
-      expect(stackTime).toBeGreaterThan(0);
-    });
-  });
-  describe("Memory Usage Patterns", () => {
-    test("large dataset handling", () => {
-      const itemCount = 1000;
-      const schema = ["div", "container", { class: "large-dataset" }];
-      // Add many children
-      for (let i = 0; i < itemCount; i++) {
-        schema.push([
-          "div",
-          `item${i}`,
-          {
-            class: "dataset-item",
-            textContent: `Item ${i}`,
-            layoutItem: { width: (i % 12) + 1 },
-          },
-        ]);
-      }
-      const start = performance.now();
-      const layout = addonsLayout(schema);
-      const end = performance.now();
-      const createTime = end - start;
-      const destroyStart = performance.now();
-      layout.destroy();
-      const destroyEnd = performance.now();
-      const destroyTime = destroyEnd - destroyStart;
-      console.log(`\n🗂️  Large Dataset (${itemCount} items):`);
-      console.log(`  Creation:  ${createTime.toFixed(2)}ms`);
-      console.log(`  Cleanup:   ${destroyTime.toFixed(2)}ms`);
-      console.log(`  Total:     ${(createTime + destroyTime).toFixed(2)}ms`);
-      expect(createTime).toBeGreaterThan(0);
-      expect(destroyTime).toBeGreaterThan(0);
-      expect(createTime).toBeLessThan(5000); // Should handle large datasets reasonably
-    });
-  });
-  describe("Performance Summary", () => {
-    test("overall performance metrics", () => {
-      const testCases = [
-        {
-          name: "Simple div",
-          schema: ["div", { class: "simple" }],
-          iterations: 1000,
-        },
-        {
-          name: "Text content",
-          schema: ["p", "text", { text: "Hello World", class: "text" }],
-          iterations: 1000,
-        },
-        {
-          name: "Nested structure",
-          schema: [
-            "div",
-            "parent",
-            { class: "parent" },
-            ["span", "child", { textContent: "Child" }],
-          ],
-          iterations: 500,
-        },
-        {
-          name: "Layout classes",
-          schema: [
-            "div",
-            "layout",
-            {
-              layout: { type: "grid", columns: 2 },
-              layoutItem: { span: 1 },
-            },
-          ],
-          iterations: 500,
-        },
-      ];
-      console.log(`\n📋 Performance Summary:`);
-      console.log(`======================`);
-      const results = testCases.map((testCase) => {
-        addonsPerformance.clearAll();
-        const start = performance.now();
-        for (let i = 0; i < testCase.iterations; i++) {
-          const layout = addonsLayout(testCase.schema);
-          layout.destroy();
-        }
-        const end = performance.now();
-        const time = end - start;
-        const avgTime = time / testCase.iterations;
-        const opsPerSec = Math.round(testCase.iterations / (time / 1000));
-        console.log(
-          `  ${testCase.name.padEnd(16)}: ${avgTime.toFixed(3)}ms per operation`
-        );
-        return { ...testCase, time, avgTime, opsPerSec };
-      });
-      const totalOps = results.reduce((sum, r) => sum + r.iterations, 0);
-      const totalTime = results.reduce((sum, r) => sum + r.time, 0);
-      const overallOpsPerSec = Math.round(totalOps / (totalTime / 1000));
-      console.log(
-        `  ${"Total".padEnd(
-          16
-        )}: ${totalOps.toLocaleString()} operations in ${totalTime.toFixed(
-          0
-        )}ms`
-      );
-      console.log(
-        `  ${"Overall".padEnd(16)}: ${(totalTime / totalOps).toFixed(
-          3
-        )}ms per operation`
-      );
-      expect(results.length).toBe(testCases.length);
-      expect(overallOpsPerSec).toBeGreaterThan(1000); // Should be reasonably fast
-    });
-  });
-});