@tanstack/angular-table 9.0.0-alpha.4 → 9.0.0-alpha.42

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)
-}

package/src/flex-render.ts

@@ -1,187 +0,0 @@
-import {
-  ChangeDetectorRef,
-  ComponentRef,
-  Directive,
-  EmbeddedViewRef,
-  Inject,
-  InjectionToken,
-  Injector,
-  Input,
-  TemplateRef,
-  Type,
-  ViewContainerRef,
-  inject,
-  isSignal,
-  type DoCheck,
-  type OnInit,
-} from '@angular/core'
-
-export type FlexRenderContent<TProps extends NonNullable<unknown>> =
-  | string
-  | number
-  | Type<TProps>
-  | FlexRenderComponent<TProps>
-  | TemplateRef<{ $implicit: TProps }>
-  | null
-  | undefined
-
-@Directive({
-  selector: '[flexRender]',
-  standalone: true,
-})
-export class FlexRenderDirective<TProps extends NonNullable<unknown>>
-  implements OnInit, DoCheck
-{
-  @Input({ required: true, alias: 'flexRender' })
-  content:
-    | number
-    | string
-    | ((props: TProps) => FlexRenderContent<TProps>)
-    | undefined = undefined
-
-  @Input({ required: true, alias: 'flexRenderProps' })
-  props: TProps = {} as TProps
-
-  @Input({ required: false, alias: 'flexRenderInjector' })
-  injector: Injector = inject(Injector)
-
-  constructor(
-    @Inject(ViewContainerRef)
-    private readonly viewContainerRef: ViewContainerRef,
-    @Inject(TemplateRef)
-    private readonly templateRef: TemplateRef<any>
-  ) {}
-
-  ref?: ComponentRef<unknown> | EmbeddedViewRef<unknown> | null = null
-
-  ngOnInit(): void {
-    this.ref = this.render()
-  }
-
-  ngDoCheck() {
-    if (this.ref instanceof ComponentRef) {
-      this.ref.injector.get(ChangeDetectorRef).markForCheck()
-    } else if (this.ref instanceof EmbeddedViewRef) {
-      this.ref.markForCheck()
-    }
-  }
-
-  render() {
-    this.viewContainerRef.clear()
-    const { content, props } = this
-    if (!this.content) {
-      return null
-    }
-
-    if (typeof content === 'string' || typeof content === 'number') {
-      return this.renderStringContent()
-    }
-    if (typeof content === 'function') {
-      return this.renderContent(content(props))
-    }
-    return null
-  }
-
-  private renderContent(content: FlexRenderContent<TProps>) {
-    if (typeof content === 'string' || typeof content === 'number') {
-      return this.renderStringContent()
-    }
-    if (content instanceof TemplateRef) {
-      return this.viewContainerRef.createEmbeddedView(
-        content,
-        this.getTemplateRefContext()
-      )
-    } else if (content instanceof FlexRenderComponent) {
-      return this.renderComponent(content)
-    } else if (content instanceof Type) {
-      return this.renderCustomComponent(content)
-    } else {
-      return null
-    }
-  }
-
-  private renderStringContent(): EmbeddedViewRef<unknown> {
-    const context = () => {
-      return typeof this.content === 'string' ||
-        typeof this.content === 'number'
-        ? this.content
-        : this.content?.(this.props)
-    }
-    return this.viewContainerRef.createEmbeddedView(this.templateRef, {
-      get $implicit() {
-        return context()
-      },
-    })
-  }
-
-  private renderComponent(
-    flexRenderComponent: FlexRenderComponent<TProps>
-  ): ComponentRef<unknown> {
-    const { component, inputs, injector } = flexRenderComponent
-
-    const getContext = () => this.props
-
-    const proxy = new Proxy(this.props, {
-      get: (_, key) => getContext()?.[key as keyof typeof _],
-    })
-
-    const componentInjector = Injector.create({
-      parent: injector ?? this.injector,
-      providers: [{ provide: FlexRenderComponentProps, useValue: proxy }],
-    })
-
-    const componentRef = this.viewContainerRef.createComponent(component, {
-      injector: componentInjector,
-    })
-    for (const prop in inputs) {
-      if (componentRef.instance?.hasOwnProperty(prop)) {
-        componentRef.setInput(prop, inputs[prop])
-      }
-    }
-    return componentRef
-  }
-
-  private renderCustomComponent(
-    component: Type<unknown>
-  ): ComponentRef<unknown> {
-    const componentRef = this.viewContainerRef.createComponent(component, {
-      injector: this.injector,
-    })
-    for (const prop in this.props) {
-      // Only signal based input can be added here
-      if (
-        componentRef.instance?.hasOwnProperty(prop) &&
-        // @ts-ignore
-        isSignal(componentRef.instance[prop])
-      ) {
-        componentRef.setInput(prop, this.props[prop])
-      }
-    }
-    return componentRef
-  }
-
-  private getTemplateRefContext() {
-    const getContext = () => this.props
-    return {
-      get $implicit() {
-        return getContext()
-      },
-    }
-  }
-}
-
-export class FlexRenderComponent<T extends NonNullable<unknown>> {
-  constructor(
-    readonly component: Type<unknown>,
-    readonly inputs: T = {} as T,
-    readonly injector?: Injector
-  ) {}
-}
-
-const FlexRenderComponentProps = new InjectionToken<NonNullable<unknown>>(
-  '[@tanstack/angular-table] Flex render component context props'
-)
-
-export function injectFlexRenderContext<T extends NonNullable<unknown>>(): T {
-  return inject<T>(FlexRenderComponentProps)
-}

package/src/proxy.ts

@@ -1,97 +0,0 @@
-import { computed, type Signal, untracked } from '@angular/core'
-import { type Table } from '@tanstack/table-core'
-
-type TableSignal<T> = Table<T> & Signal<Table<T>>
-
-export function proxifyTable<T>(
-  tableSignal: Signal<Table<T>>
-): Table<T> & Signal<Table<T>> {
-  const internalState = tableSignal as TableSignal<T>
-
-  return new Proxy(internalState, {
-    apply() {
-      return tableSignal()
-    },
-    get(target, property: keyof Table<T>): any {
-      if (target[property]) {
-        return target[property]
-      }
-      const table = untracked(tableSignal)
-      /**
-       * Attempt to convert all accessors into computed ones,
-       * excluding handlers as they do not retain any reactive value
-       */
-      if (
-        property.startsWith('get') &&
-        !property.endsWith('Handler') &&
-        !property.endsWith('Model')
-      ) {
-        const maybeFn = table[property] as Function | never
-        if (typeof maybeFn === 'function') {
-          Object.defineProperty(target, property, {
-            value: toComputed(tableSignal, maybeFn),
-            configurable: true,
-            enumerable: true,
-          })
-          return target[property]
-        }
-      }
-      // @ts-expect-error
-      return (target[property] = table[property])
-    },
-    has(_, prop: keyof Table<T>) {
-      return !!untracked(tableSignal)[prop]
-    },
-    ownKeys() {
-      return Reflect.ownKeys(untracked(tableSignal))
-    },
-    getOwnPropertyDescriptor() {
-      return {
-        enumerable: true,
-        configurable: true,
-      }
-    },
-  })
-}
-
-/**
- * Here we'll handle all type of accessors:
- * - 0 argument -> e.g. table.getCanNextPage())
- * - 0~1 arguments -> e.g. table.getIsSomeRowsPinned(position?)
- * - 1 required argument -> e.g. table.getColumn(columnId)
- * - 1+ argument -> e.g. table.getRow(id, searchAll?)
- *
- * Since we are not able to detect automatically the accessors parameters,
- * we'll wrap all accessors into a cached function wrapping a computed
- * that return it's value based on the given parameters
- */
-function toComputed<T>(signal: Signal<Table<T>>, fn: Function) {
-  const hasArgs = fn.length > 0
-  if (!hasArgs) {
-    return computed(() => {
-      void signal()
-      return fn()
-    })
-  }
-
-  const computedCache: Record<string, Signal<unknown>> = {}
-
-  return (...argsArray: any[]) => {
-    const serializedArgs = serializeArgs(...argsArray)
-    if (computedCache.hasOwnProperty(serializedArgs)) {
-      return computedCache[serializedArgs]?.()
-    }
-    const computedSignal = computed(() => {
-      void signal()
-      return fn(...argsArray)
-    })
-
-    computedCache[serializedArgs] = computedSignal
-
-    return computedSignal()
-  }
-}
-
-function serializeArgs(...args: any[]) {
-  return JSON.stringify(args)
-}