@tanstack/angular-table 8.20.1 → 8.21.0

package/src/flex-render.ts

@@ -1,20 +1,40 @@
 import {
   ChangeDetectorRef,
-  ComponentRef,
   Directive,
-  EmbeddedViewRef,
+  DoCheck,
+  effect,
+  type EffectRef,
   Inject,
   inject,
-  InjectionToken,
   Injector,
   Input,
-  isSignal,
-  type OnChanges,
-  type SimpleChanges,
+  OnChanges,
+  runInInjectionContext,
+  SimpleChanges,
   TemplateRef,
   Type,
   ViewContainerRef,
 } from '@angular/core'
+import { FlexRenderComponentProps } from './flex-render/context'
+import { FlexRenderFlags } from './flex-render/flags'
+import {
+  flexRenderComponent,
+  FlexRenderComponent,
+} from './flex-render/flex-render-component'
+import { FlexRenderComponentFactory } from './flex-render/flex-render-component-ref'
+import {
+  FlexRenderComponentView,
+  FlexRenderTemplateView,
+  type FlexRenderTypedContent,
+  FlexRenderView,
+  mapToFlexRenderTypedContent,
+} from './flex-render/view'
+import { memo } from '@tanstack/table-core'
+
+export {
+  injectFlexRenderContext,
+  type FlexRenderComponentProps,
+} from './flex-render/context'
 
 export type FlexRenderContent<TProps extends NonNullable<unknown>> =
   | string
@@ -23,15 +43,20 @@ export type FlexRenderContent<TProps extends NonNullable<unknown>> =
   | FlexRenderComponent<TProps>
   | TemplateRef<{ $implicit: TProps }>
   | null
+  | Record<any, any>
   | undefined
 
 @Directive({
   selector: '[flexRender]',
   standalone: true,
+  providers: [FlexRenderComponentFactory],
 })
 export class FlexRenderDirective<TProps extends NonNullable<unknown>>
-  implements OnChanges
+  implements OnChanges, DoCheck
 {
+  readonly #flexRenderComponentFactory = inject(FlexRenderComponentFactory)
+  readonly #changeDetectorRef = inject(ChangeDetectorRef)
+
   @Input({ required: true, alias: 'flexRender' })
   content:
     | number
@@ -46,6 +71,24 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
   @Input({ required: false, alias: 'flexRenderInjector' })
   injector: Injector = inject(Injector)
 
+  renderFlags = FlexRenderFlags.ViewFirstRender
+  renderView: FlexRenderView<any> | null = null
+
+  readonly #latestContent = () => {
+    const { content, props } = this
+    return typeof content !== 'function'
+      ? content
+      : runInInjectionContext(this.injector, () => content(props))
+  }
+
+  #getContentValue = memo(
+    () => [this.#latestContent(), this.props, this.content],
+    latestContent => {
+      return mapToFlexRenderTypedContent(latestContent)
+    },
+    { key: 'flexRenderContentValue', debug: () => false }
+  )
+
   constructor(
     @Inject(ViewContainerRef)
     private readonly viewContainerRef: ViewContainerRef,
@@ -53,132 +96,191 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
     private readonly templateRef: TemplateRef<any>
   ) {}
 
-  ref?: ComponentRef<unknown> | EmbeddedViewRef<unknown> | null = null
-
   ngOnChanges(changes: SimpleChanges) {
-    if (this.ref instanceof ComponentRef) {
-      this.ref.injector.get(ChangeDetectorRef).markForCheck()
+    if (changes['props']) {
+      this.renderFlags |= FlexRenderFlags.PropsReferenceChanged
     }
-    if (!changes['content']) {
-      return
+    if (changes['content']) {
+      this.renderFlags |=
+        FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender
+      this.update()
     }
-    this.render()
   }
 
-  render() {
-    this.viewContainerRef.clear()
-    const { content, props } = this
-    if (content === null || content === undefined) {
-      this.ref = null
+  ngDoCheck(): void {
+    if (this.renderFlags & FlexRenderFlags.ViewFirstRender) {
+      // On the initial render, the view is created during the `ngOnChanges` hook.
+      // Since `ngDoCheck` is called immediately afterward, there's no need to check for changes in this phase.
+      this.renderFlags &= ~FlexRenderFlags.ViewFirstRender
       return
     }
-    if (typeof content === 'function') {
-      return this.renderContent(content(props))
+
+    this.renderFlags |= FlexRenderFlags.DirtyCheck
+
+    const latestContent = this.#getContentValue()
+    if (latestContent.kind === 'null' || !this.renderView) {
+      this.renderFlags |= FlexRenderFlags.ContentChanged
     } else {
-      return this.renderContent(content)
+      this.renderView.content = latestContent
+      const { kind: previousKind } = this.renderView.previousContent
+      if (latestContent.kind !== previousKind) {
+        this.renderFlags |= FlexRenderFlags.ContentChanged
+      }
+    }
+    this.update()
+  }
+
+  update() {
+    if (
+      this.renderFlags &
+      (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)
+    ) {
+      this.render()
+      return
+    }
+    if (this.renderFlags & FlexRenderFlags.PropsReferenceChanged) {
+      if (this.renderView) this.renderView.updateProps(this.props)
+      this.renderFlags &= ~FlexRenderFlags.PropsReferenceChanged
+    }
+    if (
+      this.renderFlags &
+      (FlexRenderFlags.DirtyCheck | FlexRenderFlags.DirtySignal)
+    ) {
+      if (this.renderView) this.renderView.dirtyCheck()
+      this.renderFlags &= ~(
+        FlexRenderFlags.DirtyCheck | FlexRenderFlags.DirtySignal
+      )
     }
   }
 
-  private renderContent(content: FlexRenderContent<TProps>) {
-    if (typeof content === 'string' || typeof content === 'number') {
-      return this.renderStringContent()
+  #currentEffectRef: EffectRef | null = null
+
+  render() {
+    if (this.#shouldRecreateEntireView() && this.#currentEffectRef) {
+      this.#currentEffectRef.destroy()
+      this.#currentEffectRef = null
+      this.renderFlags &= ~FlexRenderFlags.RenderEffectChecked
+    }
+
+    this.viewContainerRef.clear()
+    this.renderFlags =
+      FlexRenderFlags.Pristine |
+      (this.renderFlags & FlexRenderFlags.ViewFirstRender) |
+      (this.renderFlags & FlexRenderFlags.RenderEffectChecked)
+
+    const resolvedContent = this.#getContentValue()
+    if (resolvedContent.kind === 'null') {
+      this.renderView = null
+    } else {
+      this.renderView = this.#renderViewByContent(resolvedContent)
     }
-    if (content instanceof TemplateRef) {
-      return this.viewContainerRef.createEmbeddedView(
-        content,
-        this.getTemplateRefContext()
+
+    // If the content is a function `content(props)`, we initialize an effect
+    // in order to react to changes if the given definition use signals.
+    if (!this.#currentEffectRef && typeof this.content === 'function') {
+      this.#currentEffectRef = effect(
+        () => {
+          this.#latestContent()
+          if (!(this.renderFlags & FlexRenderFlags.RenderEffectChecked)) {
+            this.renderFlags |= FlexRenderFlags.RenderEffectChecked
+            return
+          }
+          this.renderFlags |= FlexRenderFlags.DirtySignal
+          // This will mark the view as changed,
+          // so we'll try to check for updates into ngDoCheck
+          this.#changeDetectorRef.markForCheck()
+        },
+        { injector: this.viewContainerRef.injector }
       )
-    } else if (content instanceof FlexRenderComponent) {
-      return this.renderComponent(content)
-    } else if (content instanceof Type) {
-      return this.renderCustomComponent(content)
+    }
+  }
+
+  #shouldRecreateEntireView() {
+    return (
+      this.renderFlags &
+      FlexRenderFlags.ContentChanged &
+      FlexRenderFlags.ViewFirstRender
+    )
+  }
+
+  #renderViewByContent(
+    content: FlexRenderTypedContent
+  ): FlexRenderView<any> | null {
+    if (content.kind === 'primitive') {
+      return this.#renderStringContent(content)
+    } else if (content.kind === 'templateRef') {
+      return this.#renderTemplateRefContent(content)
+    } else if (content.kind === 'flexRenderComponent') {
+      return this.#renderComponent(content)
+    } else if (content.kind === 'component') {
+      return this.#renderCustomComponent(content)
     } else {
       return null
     }
   }
 
-  private renderStringContent(): EmbeddedViewRef<unknown> {
+  #renderStringContent(
+    template: Extract<FlexRenderTypedContent, { kind: 'primitive' }>
+  ): FlexRenderTemplateView {
     const context = () => {
       return typeof this.content === 'string' ||
         typeof this.content === 'number'
         ? this.content
         : this.content?.(this.props)
     }
-    return this.viewContainerRef.createEmbeddedView(this.templateRef, {
+    const ref = this.viewContainerRef.createEmbeddedView(this.templateRef, {
       get $implicit() {
         return context()
       },
     })
+    return new FlexRenderTemplateView(template, ref)
+  }
+
+  #renderTemplateRefContent(
+    template: Extract<FlexRenderTypedContent, { kind: 'templateRef' }>
+  ): FlexRenderTemplateView {
+    const latestContext = () => this.props
+    const view = this.viewContainerRef.createEmbeddedView(template.content, {
+      get $implicit() {
+        return latestContext()
+      },
+    })
+    return new FlexRenderTemplateView(template, view)
   }
 
-  private renderComponent(
-    flexRenderComponent: FlexRenderComponent<TProps>
-  ): ComponentRef<unknown> {
-    const { component, inputs, injector } = flexRenderComponent
+  #renderComponent(
+    flexRenderComponent: Extract<
+      FlexRenderTypedContent,
+      { kind: 'flexRenderComponent' }
+    >
+  ): FlexRenderComponentView {
+    const { inputs, outputs, injector } = flexRenderComponent.content
 
     const getContext = () => this.props
-
     const proxy = new Proxy(this.props, {
-      get: (_, key) => getContext()?.[key as keyof typeof _],
+      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
+    const view = this.#flexRenderComponentFactory.createComponent(
+      flexRenderComponent.content,
+      componentInjector
+    )
+    return new FlexRenderComponentView(flexRenderComponent, view)
   }
 
-  private getTemplateRefContext() {
-    const getContext = () => this.props
-    return {
-      get $implicit() {
-        return getContext()
-      },
-    }
+  #renderCustomComponent(
+    component: Extract<FlexRenderTypedContent, { kind: 'component' }>
+  ): FlexRenderComponentView {
+    const view = this.#flexRenderComponentFactory.createComponent(
+      flexRenderComponent(component.content, {
+        inputs: this.props,
+        injector: this.injector,
+      }),
+      this.injector
+    )
+    return new FlexRenderComponentView(component, view)
   }
 }
-
-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/index.ts

@@ -14,11 +14,17 @@ export * from '@tanstack/table-core'
 
 export {
   type FlexRenderContent,
-  FlexRenderComponent,
   FlexRenderDirective,
+  FlexRenderDirective as FlexRender,
   injectFlexRenderContext,
+  type FlexRenderComponentProps,
 } from './flex-render'
 
+export {
+  FlexRenderComponent,
+  flexRenderComponent,
+} from './flex-render/flex-render-component'
+
 export function createAngularTable<TData extends RowData>(
   options: () => TableOptions<TData>
 ): Table<TData> & Signal<Table<TData>> {

package/src/proxy.ts

@@ -23,8 +23,11 @@ export function proxifyTable<T>(
        */
       if (
         property.startsWith('get') &&
-        !property.endsWith('Handler') &&
-        !property.endsWith('Model')
+        !property.endsWith('Handler')
+        // e.g. getCoreRowModel, getSelectedRowModel etc.
+        // We need that after a signal change even `rowModel` may mark the view as dirty.
+        // This allows to always get the latest `getContext` value while using flexRender
+        // && !property.endsWith('Model')
       ) {
         const maybeFn = table[property] as Function | never
         if (typeof maybeFn === 'function') {