npm - mtrl-addons - Versions diffs - 0.1.0 → 0.1.1 - Mend

mtrl-addons 0.1.0 → 0.1.1

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 (92) hide show

package/.cursorrules +117 -0
package/AI.md +241 -0
package/build.js +170 -0
package/bun.lock +792 -0
package/index.ts +7 -0
package/package.json +10 -17
package/scripts/analyze-orphaned-functions.ts +387 -0
package/src/components/index.ts +45 -0
package/src/components/list/api.ts +314 -0
package/src/components/list/config.ts +352 -0
package/src/components/list/constants.ts +56 -0
package/src/components/list/features/api.ts +428 -0
package/src/components/list/features/index.ts +31 -0
package/src/components/list/features/list-manager.ts +502 -0
package/src/components/list/features.ts +112 -0
package/src/components/list/index.ts +39 -0
package/src/components/list/list.ts +234 -0
package/src/components/list/types.ts +513 -0
package/src/core/collection/base-collection.ts +100 -0
package/src/core/collection/collection-composer.ts +178 -0
package/src/core/collection/collection.ts +745 -0
package/src/core/collection/constants.ts +172 -0
package/src/core/collection/events.ts +428 -0
package/src/core/collection/features/api/loading.ts +279 -0
package/src/core/collection/features/operations/data-operations.ts +147 -0
package/src/core/collection/index.ts +104 -0
package/src/core/collection/state.ts +497 -0
package/src/core/collection/types.ts +404 -0
package/src/core/compose/features/collection.ts +119 -0
package/src/core/compose/features/index.ts +39 -0
package/src/core/compose/features/performance.ts +161 -0
package/src/core/compose/features/selection.ts +213 -0
package/src/core/compose/features/styling.ts +108 -0
package/src/core/compose/index.ts +31 -0
package/src/core/index.ts +167 -0
package/src/core/layout/config.ts +102 -0
package/src/core/layout/index.ts +168 -0
package/src/core/layout/jsx.ts +174 -0
package/src/core/layout/schema.ts +963 -0
package/src/core/layout/types.ts +92 -0
package/src/core/list-manager/api.ts +599 -0
package/src/core/list-manager/config.ts +593 -0
package/src/core/list-manager/constants.ts +268 -0
package/src/core/list-manager/features/api.ts +58 -0
package/src/core/list-manager/features/collection/collection.ts +705 -0
package/src/core/list-manager/features/collection/index.ts +17 -0
package/src/core/list-manager/features/viewport/constants.ts +42 -0
package/src/core/list-manager/features/viewport/index.ts +16 -0
package/src/core/list-manager/features/viewport/item-size.ts +274 -0
package/src/core/list-manager/features/viewport/loading.ts +263 -0
package/src/core/list-manager/features/viewport/placeholders.ts +281 -0
package/src/core/list-manager/features/viewport/rendering.ts +575 -0
package/src/core/list-manager/features/viewport/scrollbar.ts +495 -0
package/src/core/list-manager/features/viewport/scrolling.ts +795 -0
package/src/core/list-manager/features/viewport/template.ts +220 -0
package/src/core/list-manager/features/viewport/viewport.ts +654 -0
package/src/core/list-manager/features/viewport/virtual.ts +309 -0
package/src/core/list-manager/index.ts +279 -0
package/src/core/list-manager/list-manager.ts +206 -0
package/src/core/list-manager/types.ts +439 -0
package/src/core/list-manager/utils/calculations.ts +290 -0
package/src/core/list-manager/utils/range-calculator.ts +349 -0
package/src/core/list-manager/utils/speed-tracker.ts +273 -0
package/src/index.ts +17 -0
package/src/styles/components/_list.scss +244 -0
package/src/styles/index.scss +12 -0
package/src/types/mtrl.d.ts +6 -0
package/test/benchmarks/layout/advanced.test.ts +656 -0
package/test/benchmarks/layout/comparison.test.ts +519 -0
package/test/benchmarks/layout/performance-comparison.test.ts +274 -0
package/test/benchmarks/layout/real-components.test.ts +733 -0
package/test/benchmarks/layout/simple.test.ts +321 -0
package/test/benchmarks/layout/stress.test.ts +990 -0
package/test/collection/basic.test.ts +304 -0
package/test/components/list.test.ts +256 -0
package/test/core/collection/collection.test.ts +394 -0
package/test/core/collection/failed-ranges.test.ts +270 -0
package/test/core/compose/features.test.ts +183 -0
package/test/core/layout/layout.test.ts +201 -0
package/test/core/list-manager/features/collection.test.ts +704 -0
package/test/core/list-manager/features/viewport.test.ts +698 -0
package/test/core/list-manager/list-manager.test.ts +593 -0
package/test/core/list-manager/utils/calculations.test.ts +433 -0
package/test/core/list-manager/utils/range-calculator.test.ts +569 -0
package/test/core/list-manager/utils/speed-tracker.test.ts +530 -0
package/test/utils/dom-helpers.ts +275 -0
package/test/utils/performance-helpers.ts +392 -0
package/tsconfig.build.json +14 -0
package/tsconfig.json +20 -0
package/dist/index.d.ts +0 -5
package/dist/index.js +0 -38
package/dist/index.mjs +0 -8

package/test/core/collection/collection.test.ts ADDED Viewed

@@ -0,0 +1,394 @@
+// test/core/collection/collection.test.ts - Core Collection Tests
+import {
+  describe,
+  test,
+  expect,
+  mock,
+  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;
+  // Add missing DOM APIs
+  global.getComputedStyle =
+    (window as any).getComputedStyle ||
+    (() => ({
+      position: "static",
+      getPropertyValue: () => "",
+    }));
+  // Add IntersectionObserver mock
+  if (!(window as any).IntersectionObserver) {
+    const IntersectionObserverMock = class {
+      constructor() {}
+      observe() {}
+      disconnect() {}
+      unobserve() {}
+    };
+    (window as any).IntersectionObserver = IntersectionObserverMock as any;
+    (global as any).IntersectionObserver = IntersectionObserverMock as any;
+  }
+  // Add ResizeObserver mock
+  if (!(window as any).ResizeObserver) {
+    const ResizeObserverMock = class {
+      constructor() {}
+      observe() {}
+      disconnect() {}
+      unobserve() {}
+    };
+    (window as any).ResizeObserver = ResizeObserverMock as any;
+    (global as any).ResizeObserver = ResizeObserverMock as any;
+  }
+});
+afterAll(() => {
+  // Restore original globals
+  global.document = originalGlobalDocument;
+  global.window = originalGlobalWindow;
+  // Clean up jsdom
+  window.close();
+});
+// Import the collection after DOM setup
+// TODO: Implement these imports as we build the system
+// import { createCollection, pipe, withEvents, withLifecycle } from "../../../src/core/collection";
+// Test data interfaces
+interface TestItem {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  active: boolean;
+}
+interface TestProduct {
+  id: string;
+  title: string;
+  price: number;
+  category: string;
+}
+// Helper functions for creating test data
+function createTestItem(
+  id: string,
+  overrides: Partial<TestItem> = {}
+): TestItem {
+  return {
+    id,
+    name: `User ${id}`,
+    email: `user${id}@example.com`,
+    age: 20 + parseInt(id),
+    active: true,
+    ...overrides,
+  };
+}
+function createTestProduct(
+  id: string,
+  overrides: Partial<TestProduct> = {}
+): TestProduct {
+  return {
+    id,
+    title: `Product ${id}`,
+    price: parseFloat(id) * 10,
+    category: "electronics",
+    ...overrides,
+  };
+}
+// Mock template engine
+const mockTemplateEngine = {
+  render: mock((template: any, data: any) => {
+    const element = document.createElement("div");
+    element.className = "test-item";
+    element.setAttribute("data-id", data.id);
+    element.innerHTML = `
+      <div class="item-name">${data.name}</div>
+      <div class="item-email">${data.email}</div>
+    `;
+    return element;
+  }),
+  compile: mock((template: any) => {
+    return (data: any) => mockTemplateEngine.render(template, data);
+  }),
+};
+// Mock adapter for data loading
+const mockAdapter = {
+  read: mock(async (params: any) => {
+    const page = params.page || 1;
+    const limit = params.limit || params.per_page || 20;
+    const startId = (page - 1) * limit + 1;
+    const items: TestItem[] = [];
+    for (let i = 0; i < limit; i++) {
+      const id = startId + i;
+      if (id <= 100) {
+        items.push(createTestItem(id.toString()));
+      }
+    }
+    return {
+      items,
+      meta: {
+        total: 100,
+        page,
+        hasNext: page * limit < 100,
+        nextCursor: items.length > 0 ? items[items.length - 1].id : null,
+      },
+    };
+  }),
+};
+describe("Collection System", () => {
+  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);
+    // Reset mocks
+    mockTemplateEngine.render.mockClear();
+    mockTemplateEngine.compile.mockClear();
+    mockAdapter.read.mockClear();
+  });
+  afterEach(() => {
+    // Cleanup container
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+  });
+  describe("Basic Infrastructure", () => {
+    test("DOM environment is properly set up", () => {
+      expect(document).toBeDefined();
+      expect(document.createElement).toBeDefined();
+      expect(global.IntersectionObserver).toBeDefined();
+      expect(global.ResizeObserver).toBeDefined();
+    });
+    test("test container is created correctly", () => {
+      expect(container).toBeDefined();
+      expect(container.style.height).toBe("400px");
+      expect(container.style.overflow).toBe("auto");
+      expect(container.parentNode).toBe(document.body);
+    });
+    test("test data helpers work correctly", () => {
+      const item = createTestItem("123");
+      expect(item.id).toBe("123");
+      expect(item.name).toBe("User 123");
+      expect(item.email).toBe("user123@example.com");
+      expect(item.age).toBe(143);
+      expect(item.active).toBe(true);
+      const customItem = createTestItem("456", { name: "Custom User" });
+      expect(customItem.name).toBe("Custom User");
+      expect(customItem.id).toBe("456");
+    });
+    test("mock template engine renders correctly", () => {
+      const template = { tag: "div", text: "{{name}}" };
+      const data = { id: "1", name: "John Doe", email: "john@example.com" };
+      const element = mockTemplateEngine.render(template, data);
+      expect(element.tagName).toBe("DIV");
+      expect(element.className).toBe("test-item");
+      expect(element.getAttribute("data-id")).toBe("1");
+      expect(element.querySelector(".item-name")?.textContent).toBe("John Doe");
+    });
+    test("mock adapter generates test data correctly", async () => {
+      const result = await mockAdapter.read({ page: 1, per_page: 5 });
+      expect(result.items).toHaveLength(5);
+      expect(result.meta.total).toBe(100);
+      expect(result.meta.page).toBe(1);
+      expect(result.meta.hasNext).toBe(true);
+      // Check first item
+      expect(result.items[0].id).toBe("1");
+      expect(result.items[0].name).toBe("User 1");
+    });
+  });
+  describe("Collection Core (Placeholder)", () => {
+    test("placeholder for collection creation", () => {
+      // TODO: Implement when createCollection is available
+      // const collection = createCollection({ items: [] });
+      // expect(collection).toBeDefined();
+      // Placeholder assertion
+      expect(true).toBe(true);
+    });
+    test("placeholder for functional composition", () => {
+      // TODO: Implement when pipe and features are available
+      // const collection = pipe(
+      //   createCollection(config),
+      //   withEvents(),
+      //   withLifecycle()
+      // );
+      // expect(collection).toBeDefined();
+      // Placeholder assertion
+      expect(true).toBe(true);
+    });
+  });
+  describe("Template Engine Integration (Placeholder)", () => {
+    test("placeholder for template compilation", () => {
+      // TODO: Implement when template engine is available
+      // const engine = createTemplateEngine('object');
+      // const template = { tag: 'div', text: '{{name}}' };
+      // const compiled = engine.compile(template);
+      // expect(compiled).toBeDefined();
+      // Test mock for now
+      const compiled = mockTemplateEngine.compile({
+        tag: "div",
+        text: "{{name}}",
+      });
+      expect(compiled).toBeDefined();
+      expect(mockTemplateEngine.compile).toHaveBeenCalled();
+    });
+    test("placeholder for element recycling", () => {
+      // TODO: Implement when recycling pool is available
+      // const pool = createRecyclingPool({ maxSize: 10 });
+      // const element = pool.getElement();
+      // expect(element).toBeDefined();
+      // Placeholder assertion
+      expect(true).toBe(true);
+    });
+  });
+  describe("Performance Testing Framework", () => {
+    test("measures render time accurately", async () => {
+      const start = performance.now();
+      // Simulate some work
+      await new Promise((resolve) => setTimeout(resolve, 10));
+      const end = performance.now();
+      const duration = end - start;
+      expect(duration).toBeGreaterThan(5);
+      expect(duration).toBeLessThan(50);
+    });
+    test("creates large datasets for performance testing", () => {
+      const items = Array.from({ length: 1000 }, (_, i) =>
+        createTestItem(i.toString())
+      );
+      expect(items).toHaveLength(1000);
+      expect(items[0].id).toBe("0");
+      expect(items[999].id).toBe("999");
+    });
+    test("simulates scroll events correctly", () => {
+      let scrollEventFired = false;
+      container.addEventListener("scroll", () => {
+        scrollEventFired = true;
+      });
+      container.scrollTop = 100;
+      const scrollEvent = new (window as any).Event("scroll", {
+        bubbles: true,
+      });
+      container.dispatchEvent(scrollEvent);
+      expect(scrollEventFired).toBe(true);
+      expect(container.scrollTop).toBe(100);
+    });
+  });
+  describe("Memory Management Testing", () => {
+    test("cleans up event listeners", () => {
+      const listener = mock(() => {});
+      container.addEventListener("scroll", listener);
+      // Simulate cleanup
+      container.removeEventListener("scroll", listener);
+      // Fire event - should not call listener
+      const scrollEvent = new (window as any).Event("scroll", {
+        bubbles: true,
+      });
+      container.dispatchEvent(scrollEvent);
+      expect(listener).not.toHaveBeenCalled();
+    });
+    test("handles rapid element creation/destruction", () => {
+      const elements: HTMLElement[] = [];
+      // Create many elements
+      for (let i = 0; i < 100; i++) {
+        const element = document.createElement("div");
+        element.textContent = `Item ${i}`;
+        elements.push(element);
+      }
+      expect(elements).toHaveLength(100);
+      // Clean up
+      elements.forEach((element) => {
+        element.remove();
+      });
+      expect(elements[0].isConnected).toBe(false);
+    });
+  });
+});
+// Export test utilities for use in other test files
+export { createTestItem, createTestProduct, mockTemplateEngine, mockAdapter };

package/test/core/collection/failed-ranges.test.ts ADDED Viewed

@@ -0,0 +1,270 @@
+// test/core/collection/failed-ranges.test.ts
+import { describe, test, expect, beforeEach, mock, afterEach } from "bun:test";
+import { createListManager } from "../../../src/core/list-manager/list-manager";
+import { withCollection } from "../../../src/core/list-manager/features/collection/collection";
+import type { ListManagerConfig } from "../../../src/core/list-manager/types";
+describe("Collection - Failed Range Tracking", () => {
+  let container: HTMLElement;
+  let config: ListManagerConfig;
+  let mockAdapter: any;
+  beforeEach(() => {
+    container = document.createElement("div");
+    container.style.height = "600px";
+    container.style.width = "400px";
+    document.body.appendChild(container);
+    // Mock adapter that can simulate failures
+    mockAdapter = {
+      read: mock(),
+    };
+    config = {
+      container,
+      items: [],
+      template: {
+        template: (item: any) => `<div>Item ${item.id}</div>`,
+      },
+      virtual: {
+        enabled: true,
+        itemSize: 84,
+        estimatedItemSize: 84,
+        overscan: 5,
+      },
+    };
+  });
+  afterEach(() => {
+    container.remove();
+    mock.restore();
+  });
+  test("should track failed ranges when data loading fails", async () => {
+    // Configure adapter to fail
+    mockAdapter.read.mockRejectedValueOnce(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // Try to load a range
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Expected to fail
+    }
+    // Check that failed range is tracked
+    const failedRanges = enhancedManager.collection.getFailedRanges();
+    expect(failedRanges.size).toBe(1);
+    expect(failedRanges.has(0)).toBe(true);
+    const failedInfo = failedRanges.get(0);
+    expect(failedInfo?.attempts).toBe(1);
+    expect(failedInfo?.error.message).toBe("Network error");
+  });
+  test("should not reload failed ranges immediately", async () => {
+    // Configure adapter to fail
+    mockAdapter.read.mockRejectedValue(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // First attempt - should fail
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Expected
+    }
+    // Reset mock
+    mockAdapter.read.mockClear();
+    // Try to load missing ranges immediately - should skip failed range
+    await enhancedManager.collection.loadMissingRanges({ start: 0, end: 19 });
+    // Should not have tried to load again
+    expect(mockAdapter.read).not.toHaveBeenCalled();
+  });
+  test("should retry failed ranges after clearing lastAttempt", async () => {
+    // Configure adapter to fail first, then succeed
+    mockAdapter.read
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 20 }, (_, i) => ({
+          id: i,
+          name: `Item ${i}`,
+        })),
+        meta: { total: 100 },
+      });
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // First attempt - should fail
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Expected
+    }
+    // Manually retry failed ranges
+    await enhancedManager.collection.retryFailedRanges();
+    // Check that failed range was cleared after success
+    const failedRanges = enhancedManager.collection.getFailedRanges();
+    expect(failedRanges.size).toBe(0);
+    // Check that data was loaded
+    const loadedRanges = enhancedManager.collection.getLoadedRanges();
+    expect(loadedRanges.has(0)).toBe(true);
+  });
+  test("should track multiple attempts", async () => {
+    // Configure adapter to fail multiple times
+    mockAdapter.read.mockRejectedValue(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // Multiple attempts
+    for (let i = 0; i < 3; i++) {
+      try {
+        // Clear lastAttempt to allow immediate retry
+        const failedRanges = enhancedManager.collection.getFailedRanges();
+        failedRanges.forEach((info) => {
+          info.lastAttempt = 0;
+        });
+        await enhancedManager.collection.loadRange(0, 20);
+      } catch (error) {
+        // Expected
+      }
+    }
+    // Check attempt count
+    const failedRanges = enhancedManager.collection.getFailedRanges();
+    const failedInfo = failedRanges.get(0);
+    expect(failedInfo?.attempts).toBe(3);
+  });
+  test("should clear failed ranges", async () => {
+    // Configure adapter to fail
+    mockAdapter.read.mockRejectedValue(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // Fail to load some ranges
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Expected
+    }
+    try {
+      await enhancedManager.collection.loadRange(40, 20);
+    } catch (error) {
+      // Expected
+    }
+    // Should have 2 failed ranges
+    expect(enhancedManager.collection.getFailedRanges().size).toBe(2);
+    // Clear failed ranges
+    enhancedManager.collection.clearFailedRanges();
+    // Should have no failed ranges
+    expect(enhancedManager.collection.getFailedRanges().size).toBe(0);
+  });
+  test("should handle concurrent failures correctly", async () => {
+    // Configure adapter to fail
+    mockAdapter.read.mockRejectedValue(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // Try to load multiple ranges concurrently
+    const promises = [
+      enhancedManager.collection.loadRange(0, 20),
+      enhancedManager.collection.loadRange(20, 20),
+      enhancedManager.collection.loadRange(40, 20),
+    ];
+    // All should fail
+    const results = await Promise.allSettled(promises);
+    expect(results.every((r) => r.status === "rejected")).toBe(true);
+    // Should have 3 failed ranges
+    const failedRanges = enhancedManager.collection.getFailedRanges();
+    expect(failedRanges.size).toBe(3);
+    expect(failedRanges.has(0)).toBe(true);
+    expect(failedRanges.has(1)).toBe(true);
+    expect(failedRanges.has(2)).toBe(true);
+  });
+  test("should respect exponential backoff", async () => {
+    // Configure adapter to fail
+    mockAdapter.read.mockRejectedValue(new Error("Network error"));
+    const manager = createListManager(config);
+    const enhancedManager = withCollection({
+      collection: mockAdapter,
+      rangeSize: 20,
+    })(manager);
+    // First failure
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Expected
+    }
+    // Try again immediately - should be blocked
+    mockAdapter.read.mockClear();
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      // Should re-throw the same error without calling adapter
+      expect(error.message).toBe("Network error");
+    }
+    expect(mockAdapter.read).not.toHaveBeenCalled();
+    // Simulate time passing (clear lastAttempt)
+    const failedRanges = enhancedManager.collection.getFailedRanges();
+    const failedInfo = failedRanges.get(0);
+    if (failedInfo) {
+      failedInfo.lastAttempt = Date.now() - 2000; // 2 seconds ago
+    }
+    // Now it should try again
+    mockAdapter.read.mockRejectedValueOnce(new Error("Still failing"));
+    try {
+      await enhancedManager.collection.loadRange(0, 20);
+    } catch (error) {
+      expect(error.message).toBe("Still failing");
+    }
+    expect(mockAdapter.read).toHaveBeenCalledTimes(1);
+  });
+});