@tanstack/angular-table 9.0.0-alpha.6 → 9.0.0-alpha.8

package/dist/esm2022/flex-render.mjs

@@ -108,10 +108,10 @@ export class FlexRenderDirective {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FlexRenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FlexRenderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[flexRender]',

package/dist/fesm2022/tanstack-angular-table.mjs

@@ -235,10 +235,10 @@ class FlexRenderDirective {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: FlexRenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: FlexRenderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[flexRender]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-table",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0-alpha.8",
   "description": "Headless UI for building powerful tables & datagrids for Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
   ],
   "dependencies": {
     "tslib": "^2.6.3",
-    "@tanstack/table-core": "9.0.0-alpha.6"
+    "@tanstack/table-core": "9.0.0-alpha.8"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^1.5.0",

package/src/__tests__/createAngularTable.test.ts

@@ -1,95 +0,0 @@
-import { describe, test } from 'vitest'
-import {
-  type ColumnDef,
-  injectTable,
-  getCoreRowModel,
-  type Table,
-} from '../index'
-import { Component, input, isSignal, signal, untracked } from '@angular/core'
-import { TestBed } from '@angular/core/testing'
-import { setSignalInputs } from './test-utils'
-
-describe('injectTable', () => {
-  test('should render with required signal inputs', () => {
-    @Component({
-      selector: 'app-fake',
-      template: ``,
-      standalone: true,
-    })
-    class FakeComponent {
-      data = input.required<any[]>()
-
-      table = injectTable(() => ({
-        data: this.data(),
-        columns: [],
-        getCoreRowModel: getCoreRowModel(),
-      }))
-    }
-
-    const fixture = TestBed.createComponent(FakeComponent)
-    setSignalInputs(fixture.componentInstance, {
-      data: [],
-    })
-
-    fixture.detectChanges()
-  })
-
-  describe('Proxy table', () => {
-    type Data = { id: string; title: string }
-    const data = signal<Data[]>([{ id: '1', title: 'Title' }])
-    const columns: ColumnDef<Data>[] = [
-      { id: 'id', header: 'Id', cell: context => context.getValue() },
-      { id: 'title', header: 'Title', cell: context => context.getValue() },
-    ]
-    const table = injectTable(() => ({
-      data: data(),
-      columns: columns,
-      getCoreRowModel: getCoreRowModel(),
-      getRowId: row => row.id,
-    }))
-    const tablePropertyKeys = Object.keys(table())
-
-    test('table must be a signal', () => {
-      expect(isSignal(table)).toEqual(true)
-    })
-
-    test('supports "in" operator', () => {
-      expect('getCoreRowModel' in table).toBe(true)
-      expect('options' in table).toBe(true)
-      expect('notFound' in table).toBe(false)
-    })
-
-    test('supports "Object.keys"', () => {
-      const keys = Object.keys(table())
-      expect(Object.keys(table)).toEqual(keys)
-    })
-
-    test.each(
-      tablePropertyKeys.map(property => [
-        property,
-        testShouldBeComputedProperty(untracked(table), property),
-      ])
-    )('property (%s) is computed -> (%s)', (name, expected) => {
-      const tableProperty = table[name as keyof typeof table]
-      expect(isSignal(tableProperty)).toEqual(expected)
-    })
-  })
-})
-
-const testShouldBeComputedProperty = (
-  table: Table<any>,
-  propertyName: string
-) => {
-  if (propertyName.endsWith('Handler') || propertyName.endsWith('Model')) {
-    return false
-  }
-
-  if (propertyName.startsWith('get')) {
-    // Only properties with no arguments are computed
-    const fn = table[propertyName as keyof Table<any>]
-    // Cannot test if is lazy computed since we return the unwrapped value
-    return fn instanceof Function && fn.length === 0
-  }
-
-  return false
-}

package/src/__tests__/flex-render.test.ts

@@ -1,178 +0,0 @@
-import { Component, ViewChild, input, type TemplateRef } from '@angular/core'
-import { TestBed, type ComponentFixture } from '@angular/core/testing'
-import { createColumnHelper } from '@tanstack/table-core'
-import { skip } from 'node:test'
-import { describe, expect, test } from 'vitest'
-import {
-  FlexRenderComponent,
-  FlexRenderDirective,
-  injectFlexRenderContext,
-} from '../flex-render'
-import { setFixtureSignalInput, setFixtureSignalInputs } from './test-utils'
-
-interface Data {
-  id: string
-  title: string
-  description: string
-  status: 'success' | 'failed' | 'pending'
-  favorite?: boolean
-}
-
-describe('FlexRenderDirective', () => {
-  const helper = createColumnHelper<Data>()
-
-  test('should render primitives', async () => {
-    const fixture = TestBed.createComponent(TestRenderComponent)
-
-    // String
-    setFixtureSignalInputs(fixture, {
-      content: 'My value',
-      context: {},
-    })
-    expectPrimitiveValueIs(fixture, 'My value')
-
-    // Numbers
-    setFixtureSignalInputs(fixture, {
-      content: 0,
-      context: {},
-    })
-    expectPrimitiveValueIs(fixture, '0')
-
-    // Functions that returns primitives
-    setFixtureSignalInputs(fixture, {
-      content: () => 'My value 2',
-      context: {},
-    })
-    expectPrimitiveValueIs(fixture, 'My value 2')
-
-    // Null
-    setFixtureSignalInputs(fixture, {
-      content: () => null,
-      context: {},
-    })
-    expectPrimitiveValueIs(fixture, '')
-
-    // Undefined
-    setFixtureSignalInputs(fixture, {
-      content: () => undefined,
-      context: {},
-    })
-    expectPrimitiveValueIs(fixture, '')
-  })
-
-  test('should render TemplateRef', () => {
-    @Component({
-      template: `
-        <ng-template #template let-context>{{ context.property }}</ng-template>
-      `,
-      standalone: true,
-    })
-    class FakeTemplateRefComponent {
-      @ViewChild('template', { static: true })
-      templateRef!: TemplateRef<any>
-    }
-
-    const templateRef = TestBed.createComponent(FakeTemplateRefComponent)
-      .componentInstance.templateRef
-
-    const fixture = TestBed.createComponent(TestRenderComponent)
-    setFixtureSignalInputs(fixture, {
-      content: () => templateRef,
-      context: {
-        property: 'Property context value',
-      },
-    })
-
-    expect(fixture.nativeElement.textContent).toEqual('Property context value')
-
-    setFixtureSignalInput(fixture, 'context', { property: 'Updated value' })
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.textContent).toEqual('Updated value')
-  })
-
-  test('should render components', () => {
-    @Component({
-      template: `{{ context.property }}`,
-      standalone: true,
-    })
-    class FakeComponent {
-      context = injectFlexRenderContext<{ property: string }>()
-    }
-
-    const fixture = TestBed.createComponent(TestRenderComponent)
-    setFixtureSignalInputs(fixture, {
-      content: () => new FlexRenderComponent(FakeComponent),
-      context: {
-        property: 'Context value',
-      },
-    })
-
-    expect(fixture.nativeElement.textContent).toEqual('Context value')
-
-    setFixtureSignalInput(fixture, 'context', { property: 'Updated value' })
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.textContent).toEqual('Updated value')
-  })
-
-  // Skip for now, test framework (using ComponentRef.setInput) cannot recognize signal inputs
-  // as component inputs
-  skip('should render custom components', () => {
-    @Component({
-      template: `{{ row().property }}`,
-      standalone: true,
-    })
-    class FakeComponent {
-      row = input.required<{ property: string }>()
-    }
-
-    const fixture = TestBed.createComponent(TestRenderComponent)
-    setFixtureSignalInputs(fixture, {
-      content: () => FakeComponent,
-      context: {
-        row: {
-          property: 'Row value',
-        },
-      },
-    })
-
-    expect(fixture.nativeElement.textContent).toEqual('Row value')
-
-    setFixtureSignalInput(fixture, 'context', {
-      row: { property: 'Updated value' },
-    })
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.textContent).toEqual('Updated value')
-  })
-})
-
-@Component({
-  selector: 'app-test-render',
-  template: `
-    <ng-container *flexRender="content(); props: context(); let renderValue">
-      <span [innerHTML]="renderValue"></span>
-    </ng-container>
-  `,
-  standalone: true,
-  imports: [FlexRenderDirective],
-})
-class TestRenderComponent {
-  readonly content = input.required<FlexRenderDirectiveAllowedContent>()
-
-  readonly context = input.required<Record<string, unknown>>()
-}
-
-type FlexRenderDirectiveAllowedContent = FlexRenderDirective<
-  NonNullable<unknown>
->['content']
-
-function expectPrimitiveValueIs(
-  fixture: ComponentFixture<unknown>,
-  value: unknown
-) {
-  const span = fixture.nativeElement.querySelector('span')
-  expect(span).toBeDefined()
-  expect(span.innerHTML).toEqual(value)
-}

package/src/__tests__/lazy-init.test.ts

@@ -1,124 +0,0 @@
-import { describe, expect, test } from 'vitest'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  type WritableSignal,
-  computed,
-  effect,
-  input,
-  signal,
-} from '@angular/core'
-import { TestBed } from '@angular/core/testing'
-import { lazyInit } from '../lazy-signal-initializer'
-import { flushQueue, setFixtureSignalInputs } from './test-utils'
-
-describe('lazyInit', () => {
-  test('should init lazily in next tick when not accessing manually', async () => {
-    const mockFn = vi.fn()
-
-    TestBed.runInInjectionContext(() => {
-      lazyInit(() => {
-        mockFn()
-        return {
-          data: signal(true),
-        }
-      })
-    })
-
-    expect(mockFn).not.toHaveBeenCalled()
-
-    await new Promise(setImmediate)
-
-    expect(mockFn).toHaveBeenCalled()
-  })
-
-  test('should init eagerly accessing manually', async () => {
-    const mockFn = vi.fn()
-
-    TestBed.runInInjectionContext(() => {
-      const lazySignal = lazyInit(() => {
-        mockFn()
-        return {
-          data: signal(true),
-        }
-      })
-
-      lazySignal.data()
-    })
-
-    expect(mockFn).toHaveBeenCalled()
-  })
-
-  test('should init lazily and only once', async () => {
-    const initCallFn = vi.fn()
-    const registerDataValue = vi.fn<[number]>()
-
-    let value!: { data: WritableSignal<number> }
-    const outerSignal = signal(0)
-
-    TestBed.runInInjectionContext(() => {
-      value = lazyInit(() => {
-        initCallFn()
-
-        void outerSignal()
-
-        return { data: signal(0) }
-      })
-
-      effect(() => registerDataValue(value.data()))
-    })
-
-    value.data()
-
-    await flushQueue()
-
-    expect(outerSignal).toBeDefined()
-
-    expect(initCallFn).toHaveBeenCalledTimes(1)
-
-    outerSignal.set(1)
-    await flushQueue()
-    outerSignal.set(2)
-    await flushQueue()
-    value.data.set(4)
-    await flushQueue()
-
-    expect(initCallFn).toHaveBeenCalledTimes(1)
-    expect(registerDataValue).toHaveBeenCalledTimes(2)
-  })
-
-  test('should support required signal input', async () => {
-    @Component({
-      standalone: true,
-      template: `{{ call }} - {{ lazySignal.data() }}`,
-      changeDetection: ChangeDetectionStrategy.OnPush,
-    })
-    class Test {
-      readonly title = input.required<string>()
-      call = 0
-
-      lazySignal = lazyInit(() => {
-        this.call++
-        return {
-          data: computed(() => this.title()),
-        }
-      })
-    }
-
-    const fixture = TestBed.createComponent(Test)
-
-    setFixtureSignalInputs(fixture, { title: 'newValue' })
-    expect(fixture.debugElement.nativeElement.textContent).toBe('0 - newValue')
-    await flushQueue()
-
-    setFixtureSignalInputs(fixture, { title: 'updatedValue' })
-    expect(fixture.debugElement.nativeElement.textContent).toBe(
-      '1 - updatedValue'
-    )
-
-    setFixtureSignalInputs(fixture, { title: 'newUpdatedValue' })
-    expect(fixture.debugElement.nativeElement.textContent).toBe(
-      '1 - newUpdatedValue'
-    )
-  })
-})

package/src/__tests__/test-setup.ts

@@ -1,12 +0,0 @@
-import '@analogjs/vite-plugin-angular/setup-vitest'
-
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
-import { getTestBed } from '@angular/core/testing'
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-)

package/src/__tests__/test-utils.ts

@@ -1,62 +0,0 @@
-import type { InputSignal } from '@angular/core'
-import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals'
-import type { ComponentFixture } from '@angular/core/testing'
-
-type ToSignalInputUpdatableMap<T> = {
-  [K in keyof T as T[K] extends InputSignal<any>
-    ? K
-    : never]: T[K] extends InputSignal<infer Value> ? Value : never
-}
-
-/**
- * Set required signal input value to component fixture
- * @see https://github.com/angular/angular/issues/54013
- */
-export function setSignalInputs<T extends NonNullable<unknown>>(
-  component: T,
-  inputs: ToSignalInputUpdatableMap<T>
-) {
-  for (const inputKey in inputs) {
-    if (componentHasSignalInputProperty(component, inputKey)) {
-      signalSetFn(component[inputKey][SIGNAL], inputs[inputKey])
-    }
-  }
-}
-
-export function setFixtureSignalInputs<T extends NonNullable<unknown>>(
-  componentFixture: ComponentFixture<T>,
-  inputs: ToSignalInputUpdatableMap<T>,
-  options: { detectChanges: boolean } = { detectChanges: true }
-) {
-  setSignalInputs(componentFixture.componentInstance, inputs)
-  if (options.detectChanges) {
-    componentFixture.detectChanges()
-  }
-}
-
-export function setFixtureSignalInput<
-  T extends NonNullable<unknown>,
-  InputMaps extends ToSignalInputUpdatableMap<T>,
-  InputName extends keyof InputMaps,
->(
-  componentFixture: ComponentFixture<T>,
-  inputName: InputName,
-  value: InputMaps[InputName]
-) {
-  setSignalInputs(componentFixture.componentInstance, {
-    [inputName]: value,
-  } as ToSignalInputUpdatableMap<T>)
-}
-
-function componentHasSignalInputProperty<TProperty extends string>(
-  component: object,
-  property: TProperty
-): component is { [key in TProperty]: InputSignal<unknown> } {
-  return (
-    component.hasOwnProperty(property) && (component as any)[property][SIGNAL]
-  )
-}
-
-export async function flushQueue() {
-  await new Promise(setImmediate)
-}