@ornery/ui-grid-vanilla 0.1.7-hotfix

package/src/index.integration.test.ts

@@ -0,0 +1,245 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  SORT_DIRECTIONS,
+  activeGridEngineBackend,
+  clearRustWasmGridEngine,
+} from '@ornery/ui-grid-core';
+import {
+  mountVanillaUiGrid,
+  registerVanillaUiGridRustModule,
+  type GridOptions,
+  type UiGridIconOverrides,
+  type UiGridRustWebModule,
+  type UiGridApi,
+} from './index';
+import { createVanillaGridController } from './grid-controller';
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 10000): Promise<T> {
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) {
+      return value;
+    }
+
+    await new Promise((resolveNext) => window.setTimeout(resolveNext, 20));
+  }
+
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('mountVanillaUiGrid integration', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  it('mounts the standalone element and handles header sort interaction', async () => {
+    let gridApi: UiGridApi | undefined;
+    const target = document.getElementById('app');
+    if (!target) {
+      throw new Error('Expected test root element');
+    }
+
+    const options: GridOptions = {
+      id: 'vanilla-rust-keyboard-grid',
+      enableGrouping: true,
+      enableSorting: true,
+      enableFiltering: true,
+      virtualizationThreshold: 99,
+      data: [
+        {
+          id: 'row-1',
+          name: 'Gamma',
+          status: 'Pilot',
+          account: { owner: 'Mina Patel' },
+        },
+        {
+          id: 'row-2',
+          name: 'Beta',
+          status: 'Active',
+          account: { owner: 'Jordan Silva' },
+        },
+      ],
+      columnDefs: [{ name: 'name', displayName: 'Customer' }, { name: 'status' }],
+      onRegisterApi: (api) => {
+        gridApi = api as UiGridApi;
+      },
+    };
+
+    const grid = await mountVanillaUiGrid(
+      target,
+      options,
+      undefined,
+      'ui-grid-element-vanilla-test',
+    );
+
+    await waitFor(() => gridApi);
+    if (!gridApi) {
+      throw new Error('Expected grid API registration');
+    }
+    const shadowRoot = await waitFor(() => grid.shadowRoot);
+    const sortButton = await waitFor(
+      () =>
+        shadowRoot.querySelector('.header-action[data-column="name"]') as HTMLButtonElement | null,
+    );
+
+    sortButton.click();
+    expect(gridApi.core.getVisibleRows().map((row) => row.entity['name'])).toEqual([
+      'Beta',
+      'Gamma',
+    ]);
+
+    const sortButtonAfterFirstClick = await waitFor(
+      () =>
+        shadowRoot.querySelector('.header-action[data-column="name"]') as HTMLButtonElement | null,
+    );
+    sortButtonAfterFirstClick.click();
+    expect(gridApi.core.getVisibleRows().map((row) => row.entity['name'])).toEqual([
+      'Gamma',
+      'Beta',
+    ]);
+  }, 15000);
+
+  it('registers Rust/WASM bindings through the vanilla API', async () => {
+    const module: UiGridRustWebModule = {
+      default: vi.fn(async () => undefined),
+      build_pipeline_js: vi.fn((context) => ({
+        visibleRows: context.options.data,
+        displayItems: [],
+        virtualizationEnabled: false,
+        pipelineMs: 0,
+        totalItems: context.options.data.length,
+      })),
+    };
+
+    await registerVanillaUiGridRustModule(module);
+    expect(module.default).toHaveBeenCalledTimes(1);
+    expect(activeGridEngineBackend()).toBe('rust-wasm');
+  });
+
+  it('controller API exposes subscribe and action methods', () => {
+    const controller = createVanillaGridController({
+      id: 'controller-smoke',
+      data: [
+        { id: 'r1', name: 'Gamma' },
+        { id: 'r2', name: 'Alpha' },
+      ],
+      columnDefs: [{ name: 'name' }],
+      enableSorting: true,
+      enableFiltering: true,
+    });
+
+    const changes: number[] = [];
+    const unsubscribe = controller.subscribe((snapshot) => {
+      changes.push(snapshot.pipeline.visibleRows.length);
+    });
+
+    controller.setFilter('name', 'Alpha');
+    controller.sortColumn('name', SORT_DIRECTIONS.asc);
+    unsubscribe();
+
+    expect(changes.length).toBeGreaterThan(1);
+    expect(controller.getSnapshot().pipeline.visibleRows.map((row) => row.entity['name'])).toEqual([
+      'Alpha',
+    ]);
+  });
+
+  it('applies overridable SVG icons for controls', async () => {
+    const target = document.getElementById('app');
+    if (!target) {
+      throw new Error('Expected test root element');
+    }
+
+    const options: GridOptions = {
+      id: 'vanilla-icon-grid',
+      enableSorting: true,
+      data: [{ id: 'row-1', name: 'Gamma' }],
+      columnDefs: [{ name: 'name', displayName: 'Customer' }],
+    };
+
+    const grid = await mountVanillaUiGrid(
+      target,
+      options,
+      undefined,
+      'ui-grid-element-vanilla-test',
+    );
+    const overrides: UiGridIconOverrides = {
+      sortNone: { path: 'M3 3h18v18H3z' },
+    };
+
+    (grid as unknown as { controlIcons: UiGridIconOverrides }).controlIcons = overrides;
+
+    const shadowRoot = await waitFor(() => grid.shadowRoot);
+    const iconPath = shadowRoot.querySelector('.header-action .control-icon path');
+
+    expect(iconPath?.getAttribute('d')).toBe('M3 3h18v18H3z');
+  });
+
+  it('renders native template slots for cells and expandable rows', async () => {
+    const target = document.getElementById('app');
+    if (!target) {
+      throw new Error('Expected test root element');
+    }
+
+    const options: GridOptions = {
+      id: 'vanilla-slot-grid',
+      enableSorting: true,
+      enableExpandable: true,
+      data: [
+        {
+          id: 'row-1',
+          name: 'Gamma',
+          status: 'Active',
+          account: { owner: 'Mina Patel' },
+        },
+      ],
+      columnDefs: [
+        { name: 'name', displayName: 'Customer' },
+        { name: 'status', displayName: 'Status' },
+      ],
+    };
+
+    const grid = await mountVanillaUiGrid(
+      target,
+      options,
+      undefined,
+      'ui-grid-element-vanilla-test',
+    );
+
+    const statusTemplate = document.createElement('template');
+    statusTemplate.slot = 'cell-status';
+    statusTemplate.innerHTML =
+      '<span class="status-pill status-pill-{{valueLower}}">{{value}}</span>';
+
+    const expandableTemplate = document.createElement('template');
+    expandableTemplate.slot = 'expandable-row';
+    expandableTemplate.innerHTML = '<div class="detail-card">Owner {{row.account.owner}}</div>';
+
+    grid.append(statusTemplate, expandableTemplate);
+
+    const statusPill = await waitFor(
+      () => grid.shadowRoot?.querySelector('.status-pill-active') as HTMLElement | null,
+    );
+
+    expect(statusPill.textContent).toContain('Active');
+
+    const expandButton = await waitFor(
+      () => grid.shadowRoot?.querySelector('.row-toggle-expand') as HTMLButtonElement | null,
+    );
+
+    expandButton.click();
+
+    const detailCard = await waitFor(
+      () => grid.shadowRoot?.querySelector('.detail-card') as HTMLElement | null,
+    );
+
+    expect(detailCard.textContent).toContain('Owner Mina Patel');
+  });
+});

package/src/index.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@ornery/ui-grid-core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@ornery/ui-grid-core')>();
+  return {
+    ...actual,
+    registerRustWasmGridEngine: vi.fn(),
+  };
+});
+
+import { registerRustWasmGridEngine } from '@ornery/ui-grid-core';
+import { defineUiGridElement, mountVanillaUiGrid } from './index';
+
+describe('mountVanillaUiGrid', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+    vi.clearAllMocks();
+  });
+
+  it('defines and mounts the standalone element with the provided options', async () => {
+    const target = document.getElementById('app');
+    if (!target) {
+      throw new Error('Expected test root element');
+    }
+
+    const options = {
+      id: 'vanilla-demo-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+    };
+
+    const module = {
+      default: vi.fn(async () => undefined),
+      build_pipeline_js: vi.fn(),
+    };
+
+    const grid = await mountVanillaUiGrid(target, options, module);
+
+    expect(module.default).toHaveBeenCalledTimes(1);
+    expect(registerRustWasmGridEngine).toHaveBeenCalledTimes(1);
+    expect(customElements.get('ui-grid-element')).toBeDefined();
+    expect(grid.tagName.toLowerCase()).toBe('ui-grid-element');
+    expect(grid.options).toBe(options);
+    expect(target.firstElementChild).toBe(grid);
+  });
+
+  it('exposes defineUiGridElement compatibility alias', async () => {
+    await defineUiGridElement('ui-grid-element');
+    await defineUiGridElement('ui-grid-element');
+    expect(customElements.get('ui-grid-element')).toBeDefined();
+  });
+});

package/src/index.ts

@@ -0,0 +1,60 @@
+import { registerRustWasmGridEngine } from '@ornery/ui-grid-core';
+import type { BuildGridPipelineContext, GridOptions, PipelineResult } from '@ornery/ui-grid-core';
+
+import {
+  defineStandaloneUiGridElement,
+  type VanillaUiGridElement,
+} from './ui-grid-standalone.element';
+export {
+  createVanillaGridController,
+  type GridControllerSnapshot,
+  type GridSaveState,
+  type VanillaGridController,
+} from './grid-controller';
+export {
+  defineStandaloneUiGridElement,
+  UiGridStandaloneElement,
+  type VanillaUiGridElement,
+  type UiGridControlIconKey,
+  type UiGridIconDefinition,
+  type UiGridIconOverrides,
+} from './ui-grid-standalone.element';
+
+export type { GridOptions, UiGridApi } from '@ornery/ui-grid-core';
+
+export interface UiGridRustWebModule {
+  default(input?: unknown): Promise<unknown>;
+  build_pipeline_js(context: BuildGridPipelineContext): PipelineResult;
+}
+
+export { defineStandaloneUiGridElement as defineUiGridElement };
+
+export async function registerVanillaUiGridRustModule(
+  module: UiGridRustWebModule,
+  input?: unknown,
+): Promise<void> {
+  await module.default(input);
+  registerRustWasmGridEngine({
+    buildPipeline(context: BuildGridPipelineContext): PipelineResult {
+      return module.build_pipeline_js(context);
+    },
+  });
+}
+
+export async function mountVanillaUiGrid(
+  target: Element,
+  options: GridOptions,
+  rustModule?: UiGridRustWebModule,
+  tagName = 'ui-grid-element',
+): Promise<VanillaUiGridElement> {
+  if (rustModule) {
+    await registerVanillaUiGridRustModule(rustModule);
+  }
+
+  await defineStandaloneUiGridElement(tagName);
+
+  const grid = document.createElement(tagName) as VanillaUiGridElement;
+  grid.options = options;
+  target.replaceChildren(grid);
+  return grid;
+}