@tanstack/angular-table 9.0.0-alpha.21 → 9.0.0-alpha.24

package/src/flex-render/renderer.ts

@@ -5,26 +5,24 @@ import {
   runInInjectionContext,
   untracked,
 } from '@angular/core'
-import { TanStackTableToken } from '../helpers/table'
 import { TanStackTableCellToken } from '../helpers/cell'
 import { TanStackTableHeaderToken } from '../helpers/header'
+import { TanStackTableToken } from '../helpers/table'
 import { FlexRenderComponentProps } from './context'
 import { FlexRenderFlags } from './flags'
+import { flexRenderComponent } from './flexRenderComponent'
+import { FlexRenderComponentFactory } from './flexRenderComponentFactory'
 import {
   FlexRenderComponentView,
   FlexRenderTemplateView,
   mapToFlexRenderTypedContent,
 } from './view'
-import { flexRenderComponent } from './flexRenderComponent'
-import { FlexRenderComponentFactory } from './flexRenderComponentFactory'
-import type { FlexRenderComponent } from './flexRenderComponent'
 import type {
-  EffectRef,
-  TemplateRef,
-  Type,
-  ViewContainerRef,
-} from '@angular/core'
-import type { FlexRenderTypedContent, FlexRenderView } from './view'
+  FlexRenderTypedContent,
+  FlexRenderView,
+  FlexRenderViewAllowedType,
+} from './view'
+import type { FlexRenderComponent } from './flexRenderComponent'
 import type {
   CellContext,
   CellData,
@@ -32,6 +30,12 @@ import type {
   RowData,
   TableFeatures,
 } from '@tanstack/table-core'
+import type {
+  EffectRef,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+} from '@angular/core'
 
 /**
  * Content supported by the `flexRender` directive when declaring
@@ -106,7 +110,10 @@ export class FlexViewRenderer<
     | HeaderContext<TFeatures, TRowData, TValue>,
 > {
   #renderFlags = FlexRenderFlags.ViewFirstRender
-  #renderView: FlexRenderView<any> | null = null
+  #renderView: FlexRenderView<
+    FlexRenderViewAllowedType,
+    FlexRenderTypedContent
+  > | null = null
   #currentRenderEffectRef: EffectRef | null = null
   #content: () => FlexRenderInputContent<TProps>
   #props: () => TProps
@@ -257,18 +264,21 @@ export class FlexViewRenderer<
     if (latestContent.kind === 'null' || !this.#renderView) {
       this.#renderFlags |= FlexRenderFlags.ContentChanged
     } else {
-      this.#renderView.content = latestContent
-      const { kind: previousKind } = this.#renderView.previousContent
-      if (latestContent.kind !== previousKind) {
+      const { kind: currentKind } = this.#renderView.content
+      if (
+        latestContent.kind !== currentKind ||
+        !this.#renderView.eq(latestContent)
+      ) {
         this.#renderFlags |= FlexRenderFlags.ContentChanged
       }
+      this.#renderView.content = latestContent
     }
     this.#update()
   }
 
   #renderViewByContent(
     content: FlexRenderTypedContent,
-  ): FlexRenderView<any> | null {
+  ): FlexRenderView<FlexRenderViewAllowedType, FlexRenderTypedContent> | null {
     if (content.kind === 'primitive') {
       return this.#renderStringContent(content)
     } else if (content.kind === 'templateRef') {

package/src/flex-render/view.ts

@@ -35,8 +35,14 @@ export function mapToFlexRenderTypedContent(
   }
 }
 
+export type FlexRenderViewAllowedType =
+  | FlexRenderComponentRef<any>
+  | EmbeddedViewRef<unknown>
+  | null
+
 export abstract class FlexRenderView<
-  TView extends FlexRenderComponentRef<any> | EmbeddedViewRef<unknown> | null,
+  TView extends FlexRenderViewAllowedType,
+  TContent extends FlexRenderTypedContent,
 > {
   readonly view: TView
   #previousContent: FlexRenderTypedContent | undefined
@@ -69,11 +75,14 @@ export abstract class FlexRenderView<
 
   abstract onDestroy(callback: Function): void
 
+  abstract eq(view: TContent): boolean
+
   abstract unmount(): void
 }
 
 export class FlexRenderTemplateView extends FlexRenderView<
-  EmbeddedViewRef<unknown>
+  EmbeddedViewRef<unknown>,
+  Extract<FlexRenderTypedContent, { kind: 'primitive' | 'templateRef' }>
 > {
   constructor(
     initialContent: Extract<
@@ -105,10 +114,27 @@ export class FlexRenderTemplateView extends FlexRenderView<
   override onDestroy(callback: Function) {
     this.view.onDestroy(callback)
   }
+
+  override eq(
+    compare: Extract<
+      FlexRenderTypedContent,
+      { kind: 'primitive' | 'templateRef' }
+    >,
+  ): boolean {
+    return (
+      (this.content.kind === 'primitive' &&
+        compare.kind === 'primitive' &&
+        this.content.content === compare.content) ||
+      (this.content.kind === 'templateRef' &&
+        compare.kind === 'templateRef' &&
+        this.content.content === compare.content)
+    )
+  }
 }
 
 export class FlexRenderComponentView extends FlexRenderView<
-  FlexRenderComponentRef<unknown>
+  FlexRenderComponentRef<unknown>,
+  Extract<FlexRenderTypedContent, { kind: 'component' | 'flexRenderComponent' }>
 > {
   constructor(
     initialContent: Extract<
@@ -162,4 +188,20 @@ export class FlexRenderComponentView extends FlexRenderView<
   override onDestroy(callback: Function) {
     this.view.componentRef.onDestroy(callback)
   }
+
+  override eq(
+    compare: Extract<
+      FlexRenderTypedContent,
+      { kind: 'component' | 'flexRenderComponent' }
+    >,
+  ): boolean {
+    return (
+      (this.content.kind === 'component' &&
+        compare.kind === 'component' &&
+        this.content.content === compare.content) ||
+      (this.content.kind === 'flexRenderComponent' &&
+        compare.kind === 'flexRenderComponent' &&
+        this.content.content.component === compare.content.component)
+    )
+  }
 }