@tanstack/angular-table 8.20.1 → 8.21.0

package/src/flex-render/flex-render-component-ref.ts

@@ -0,0 +1,236 @@
+import {
+  ChangeDetectorRef,
+  ComponentRef,
+  inject,
+  Injectable,
+  Injector,
+  KeyValueDiffer,
+  KeyValueDiffers,
+  OutputEmitterRef,
+  OutputRefSubscription,
+  ViewContainerRef,
+} from '@angular/core'
+import { FlexRenderComponent } from './flex-render-component'
+
+@Injectable()
+export class FlexRenderComponentFactory {
+  #viewContainerRef = inject(ViewContainerRef)
+
+  createComponent<T>(
+    flexRenderComponent: FlexRenderComponent<T>,
+    componentInjector: Injector
+  ): FlexRenderComponentRef<T> {
+    const componentRef = this.#viewContainerRef.createComponent(
+      flexRenderComponent.component,
+      {
+        injector: componentInjector,
+      }
+    )
+    const view = new FlexRenderComponentRef(
+      componentRef,
+      flexRenderComponent,
+      componentInjector
+    )
+
+    const { inputs, outputs } = flexRenderComponent
+
+    if (inputs) view.setInputs(inputs)
+    if (outputs) view.setOutputs(outputs)
+
+    return view
+  }
+}
+
+export class FlexRenderComponentRef<T> {
+  readonly #keyValueDiffersFactory: KeyValueDiffers
+  #componentData: FlexRenderComponent<T>
+  #inputValueDiffer: KeyValueDiffer<string, unknown>
+
+  readonly #outputRegistry: FlexRenderComponentOutputManager
+
+  constructor(
+    readonly componentRef: ComponentRef<T>,
+    componentData: FlexRenderComponent<T>,
+    readonly componentInjector: Injector
+  ) {
+    this.#componentData = componentData
+    this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers)
+
+    this.#outputRegistry = new FlexRenderComponentOutputManager(
+      this.#keyValueDiffersFactory,
+      this.outputs
+    )
+
+    this.#inputValueDiffer = this.#keyValueDiffersFactory
+      .find(this.inputs)
+      .create()
+    this.#inputValueDiffer.diff(this.inputs)
+
+    this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll())
+  }
+
+  get component() {
+    return this.#componentData.component
+  }
+
+  get inputs() {
+    return this.#componentData.inputs ?? {}
+  }
+
+  get outputs() {
+    return this.#componentData.outputs ?? {}
+  }
+
+  /**
+   * Get component input and output diff by the given item
+   */
+  diff(item: FlexRenderComponent<T>) {
+    return {
+      inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
+      outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
+    }
+  }
+  /**
+   *
+   * @param compare Whether the current ref component instance is the same as the given one
+   */
+  eqType(compare: FlexRenderComponent<T>): boolean {
+    return compare.component === this.component
+  }
+
+  /**
+   * Tries to update current component refs input by the new given content component.
+   */
+  update(content: FlexRenderComponent<T>) {
+    const eq = this.eqType(content)
+    if (!eq) return
+    const { inputDiff, outputDiff } = this.diff(content)
+    if (inputDiff) {
+      inputDiff.forEachAddedItem(item =>
+        this.setInput(item.key, item.currentValue)
+      )
+      inputDiff.forEachChangedItem(item =>
+        this.setInput(item.key, item.currentValue)
+      )
+      inputDiff.forEachRemovedItem(item => this.setInput(item.key, undefined))
+    }
+    if (outputDiff) {
+      outputDiff.forEachAddedItem(item => {
+        this.setOutput(item.key, item.currentValue)
+      })
+      outputDiff.forEachChangedItem(item => {
+        if (item.currentValue) {
+          this.#outputRegistry.setListener(item.key, item.currentValue)
+        } else {
+          this.#outputRegistry.unsubscribe(item.key)
+        }
+      })
+      outputDiff.forEachRemovedItem(item => {
+        this.#outputRegistry.unsubscribe(item.key)
+      })
+    }
+
+    this.#componentData = content
+  }
+
+  markAsDirty(): void {
+    this.componentRef.injector.get(ChangeDetectorRef).markForCheck()
+  }
+
+  setInputs(inputs: Record<string, unknown>) {
+    for (const prop in inputs) {
+      this.setInput(prop, inputs[prop])
+    }
+  }
+
+  setInput(key: string, value: unknown) {
+    if (this.#componentData.allowedInputNames.includes(key)) {
+      this.componentRef.setInput(key, value)
+    }
+  }
+
+  setOutputs(
+    outputs: Record<
+      string,
+      OutputEmitterRef<unknown>['emit'] | null | undefined
+    >
+  ) {
+    this.#outputRegistry.unsubscribeAll()
+    for (const prop in outputs) {
+      this.setOutput(prop, outputs[prop])
+    }
+  }
+
+  setOutput(
+    outputName: string,
+    emit: OutputEmitterRef<unknown>['emit'] | undefined | null
+  ): void {
+    if (!this.#componentData.allowedOutputNames.includes(outputName)) return
+    if (!emit) {
+      this.#outputRegistry.unsubscribe(outputName)
+      return
+    }
+
+    const hasListener = this.#outputRegistry.hasListener(outputName)
+    this.#outputRegistry.setListener(outputName, emit)
+
+    if (hasListener) {
+      return
+    }
+
+    const instance = this.componentRef.instance
+    const output = instance[outputName as keyof typeof instance]
+    if (output && output instanceof OutputEmitterRef) {
+      output.subscribe(value => {
+        this.#outputRegistry.getListener(outputName)?.(value)
+      })
+    }
+  }
+}
+
+class FlexRenderComponentOutputManager {
+  readonly #outputSubscribers: Record<string, OutputRefSubscription> = {}
+  readonly #outputListeners: Record<string, (...args: any[]) => void> = {}
+
+  readonly #valueDiffer: KeyValueDiffer<
+    string,
+    undefined | null | OutputEmitterRef<unknown>['emit']
+  >
+
+  constructor(keyValueDiffers: KeyValueDiffers, initialOutputs: any) {
+    this.#valueDiffer = keyValueDiffers.find(initialOutputs).create()
+    if (initialOutputs) {
+      this.#valueDiffer.diff(initialOutputs)
+    }
+  }
+
+  hasListener(outputName: string) {
+    return outputName in this.#outputListeners
+  }
+
+  setListener(outputName: string, callback: (...args: any[]) => void) {
+    this.#outputListeners[outputName] = callback
+  }
+
+  getListener(outputName: string) {
+    return this.#outputListeners[outputName]
+  }
+
+  unsubscribeAll(): void {
+    for (const prop in this.#outputSubscribers) {
+      this.unsubscribe(prop)
+    }
+  }
+
+  unsubscribe(outputName: string) {
+    if (outputName in this.#outputSubscribers) {
+      this.#outputSubscribers[outputName]?.unsubscribe()
+      delete this.#outputSubscribers[outputName]
+      delete this.#outputListeners[outputName]
+    }
+  }
+
+  diff(outputs: Record<string, OutputEmitterRef<unknown>['emit'] | undefined>) {
+    return this.#valueDiffer.diff(outputs ?? {})
+  }
+}

package/src/flex-render/flex-render-component.ts

@@ -0,0 +1,119 @@
+import {
+  ComponentMirror,
+  Injector,
+  InputSignal,
+  OutputEmitterRef,
+  reflectComponentType,
+  Type,
+} from '@angular/core'
+
+type Inputs<T> = {
+  [K in keyof T as T[K] extends InputSignal<infer R>
+    ? K
+    : never]?: T[K] extends InputSignal<infer R> ? R : never
+}
+
+type Outputs<T> = {
+  [K in keyof T as T[K] extends OutputEmitterRef<infer R>
+    ? K
+    : never]?: T[K] extends OutputEmitterRef<infer R>
+    ? OutputEmitterRef<R>['emit']
+    : never
+}
+
+type OptionalKeys<T, K = keyof T> = K extends keyof T
+  ? T[K] extends Required<T>[K]
+    ? undefined extends T[K]
+      ? K
+      : never
+    : K
+  : never
+
+interface FlexRenderRequiredOptions<
+  TInputs extends Record<string, any>,
+  TOutputs extends Record<string, any>,
+> {
+  /**
+   * Component instance inputs. They will be set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput)
+   */
+  inputs: TInputs
+  /**
+   * Component instance outputs.
+   */
+  outputs?: TOutputs
+  /**
+   * Optional {@link Injector} that will be used when rendering the component
+   */
+  injector?: Injector
+}
+
+interface FlexRenderOptions<
+  TInputs extends Record<string, any>,
+  TOutputs extends Record<string, any>,
+> {
+  /**
+   * Component instance inputs. They will be set via [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput)
+   */
+  inputs?: TInputs
+  /**
+   * Component instance outputs.
+   */
+  outputs?: TOutputs
+  /**
+   * Optional {@link Injector} that will be used when rendering the component
+   */
+  injector?: Injector
+}
+
+/**
+ * Helper function to create a [@link FlexRenderComponent] instance, with better type-safety.
+ *
+ * - options object must be passed when the given component instance contains at least one required signal input.
+ * - options/inputs is typed with the given component inputs
+ * - options/outputs is typed with the given component outputs
+ */
+export function flexRenderComponent<
+  TComponent = any,
+  TInputs extends Inputs<TComponent> = Inputs<TComponent>,
+  TOutputs extends Outputs<TComponent> = Outputs<TComponent>,
+>(
+  component: Type<TComponent>,
+  ...options: OptionalKeys<TInputs> extends never
+    ? [FlexRenderOptions<TInputs, TOutputs>?]
+    : [FlexRenderRequiredOptions<TInputs, TOutputs>]
+) {
+  const { inputs, injector, outputs } = options?.[0] ?? {}
+  return new FlexRenderComponent(component, inputs, injector, outputs)
+}
+
+/**
+ * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
+ *
+ * Prefer {@link flexRenderComponent} helper for better type-safety
+ */
+export class FlexRenderComponent<TComponent = any> {
+  readonly mirror: ComponentMirror<TComponent>
+  readonly allowedInputNames: string[] = []
+  readonly allowedOutputNames: string[] = []
+
+  constructor(
+    readonly component: Type<TComponent>,
+    readonly inputs?: Inputs<TComponent>,
+    readonly injector?: Injector,
+    readonly outputs?: Outputs<TComponent>
+  ) {
+    const mirror = reflectComponentType(component)
+    if (!mirror) {
+      throw new Error(
+        `[@tanstack-table/angular] The provided symbol is not a component`
+      )
+    }
+    this.mirror = mirror
+    for (const input of this.mirror.inputs) {
+      this.allowedInputNames.push(input.propName)
+    }
+    for (const output of this.mirror.outputs) {
+      this.allowedOutputNames.push(output.propName)
+    }
+  }
+}

package/src/flex-render/view.ts

@@ -0,0 +1,153 @@
+import { FlexRenderComponentRef } from './flex-render-component-ref'
+import { EmbeddedViewRef, TemplateRef, Type } from '@angular/core'
+import type { FlexRenderContent } from '../flex-render'
+import { FlexRenderComponent } from './flex-render-component'
+
+export type FlexRenderTypedContent =
+  | { kind: 'null' }
+  | {
+      kind: 'primitive'
+      content: string | number | Record<string, any>
+    }
+  | { kind: 'flexRenderComponent'; content: FlexRenderComponent<unknown> }
+  | { kind: 'templateRef'; content: TemplateRef<unknown> }
+  | { kind: 'component'; content: Type<unknown> }
+
+export function mapToFlexRenderTypedContent(
+  content: FlexRenderContent<any>
+): FlexRenderTypedContent {
+  if (content === null || content === undefined) {
+    return { kind: 'null' }
+  }
+  if (typeof content === 'string' || typeof content === 'number') {
+    return { kind: 'primitive', content }
+  }
+  if (content instanceof FlexRenderComponent) {
+    return { kind: 'flexRenderComponent', content }
+  } else if (content instanceof TemplateRef) {
+    return { kind: 'templateRef', content }
+  } else if (content instanceof Type) {
+    return { kind: 'component', content }
+  } else {
+    return { kind: 'primitive', content }
+  }
+}
+
+export abstract class FlexRenderView<
+  TView extends FlexRenderComponentRef<any> | EmbeddedViewRef<unknown> | null,
+> {
+  readonly view: TView
+  #previousContent: FlexRenderTypedContent | undefined
+  #content: FlexRenderTypedContent
+
+  protected constructor(
+    initialContent: Exclude<FlexRenderTypedContent, { kind: 'null' }>,
+    view: TView
+  ) {
+    this.#content = initialContent
+    this.view = view
+  }
+
+  get previousContent(): FlexRenderTypedContent {
+    return this.#previousContent ?? { kind: 'null' }
+  }
+
+  get content() {
+    return this.#content
+  }
+
+  set content(content: FlexRenderTypedContent) {
+    this.#previousContent = this.#content
+    this.#content = content
+  }
+
+  abstract updateProps(props: Record<string, any>): void
+
+  abstract dirtyCheck(): void
+
+  abstract onDestroy(callback: Function): void
+}
+
+export class FlexRenderTemplateView extends FlexRenderView<
+  EmbeddedViewRef<unknown>
+> {
+  constructor(
+    initialContent: Extract<
+      FlexRenderTypedContent,
+      { kind: 'primitive' | 'templateRef' }
+    >,
+    view: EmbeddedViewRef<unknown>
+  ) {
+    super(initialContent, view)
+  }
+
+  override updateProps(props: Record<string, any>) {
+    this.view.markForCheck()
+  }
+
+  override dirtyCheck() {
+    // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
+    // since this type of content has a proxy as a context, then every time the root component is checked for changes,
+    // the property getter will be re-evaluated.
+    //
+    // If in a future we need to manually mark the view as dirty, just uncomment next line
+    // this.view.markForCheck()
+  }
+
+  override onDestroy(callback: Function) {
+    this.view.onDestroy(callback)
+  }
+}
+
+export class FlexRenderComponentView extends FlexRenderView<
+  FlexRenderComponentRef<unknown>
+> {
+  constructor(
+    initialContent: Extract<
+      FlexRenderTypedContent,
+      { kind: 'component' | 'flexRenderComponent' }
+    >,
+    view: FlexRenderComponentRef<unknown>
+  ) {
+    super(initialContent, view)
+  }
+
+  override updateProps(props: Record<string, any>) {
+    switch (this.content.kind) {
+      case 'component': {
+        this.view.setInputs(props)
+        break
+      }
+      case 'flexRenderComponent': {
+        // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
+        // FlexRenderComponent will be updated into `dirtyCheck`.
+        break
+      }
+    }
+  }
+
+  override dirtyCheck() {
+    switch (this.content.kind) {
+      case 'component': {
+        // Component context is currently valuated with the cell context. Since it's reference
+        // shouldn't change, we force mark the component as dirty in order to re-evaluate function invocation in view.
+        // NOTE: this should behave like having a component with ChangeDetectionStrategy.Default
+        this.view.markAsDirty()
+        break
+      }
+      case 'flexRenderComponent': {
+        // Given context instance will always have a different reference than the previous one,
+        // so instead of recreating the entire view, we will only update the current view
+        if (this.view.eqType(this.content.content)) {
+          this.view.update(this.content.content)
+        }
+        this.view.markAsDirty()
+        break
+      }
+    }
+  }
+
+  override onDestroy(callback: Function) {
+    this.view.componentRef.onDestroy(callback)
+  }
+}