diff --git a/apps/docs/docs/template/api/virtual-scrolling.mdx b/apps/docs/docs/template/api/virtual-scrolling.mdx index 7e77111c5d..617e6c1b27 100644 --- a/apps/docs/docs/template/api/virtual-scrolling.mdx +++ b/apps/docs/docs/template/api/virtual-scrolling.mdx @@ -92,7 +92,7 @@ all pre-packaged ScrollStrategies as well as control the majority of inputs. - configurable frame budget (defaults to 60 FPS) - Super efficient layouting with css transformations - Scoped layouting with css containment -- Define a viewCache in order to re-use views instead of re-creating them +- Define a templateCache in order to re-use views instead of re-creating them - triggers change-detection on `EmbeddedView` level - Zone-agnostic, opt-out of `NgZone` with `patchZone` - 3 Configurable `RxVirtualScrollStrategy` providing the core logic to calculate the viewRange and position DOM @@ -433,14 +433,14 @@ Read more about the concurrent mode in the [concurrent strategies section](https #### Inputs -| Input | Type | description | -| ---------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `trackBy` | `keyof T` or `(index: number, item: T) => any` | Identifier function for items. `rxVirtualFor` provides a shorthand where you can name the property directly. | -| `patchZone` | `boolean` | _default: `true`_ if set to `false`, the `RxVirtualForDirective` will operate out of `NgZone`. See [NgZone optimizations](https://www.rx-angular.io/docs/template/performance-issues/ngzone-optimizations) | -| `parent` | `boolean` | _default: `false`_ if set to `false`, the `RxVirtualForDirective` won't inform its host component about changes being made to the template. More performant, `@ViewChild` and `@ContentChild` queries won't work. [Handling view and content queries](https://www.rx-angular.io/docs/template/performance-issues/handling-view-and-content-queries) | -| `strategy` | `Observable \ RxStrategyNames \ string>` | _default: `normal`_ configure the `RxStrategyRenderStrategy` used to detect changes. [Render Strategies](https://www.rx-angular.io/docs/cdk/render-strategies) | -| `renderCallback` | `Subject` | giving the developer the exact timing when the `RxVirtualForDirective` created, updated, removed its template. Useful for situations where you need to know when rendering is done. | -| `viewCacheSize` | `number` | _default: `20`_ Controls the amount if views held in cache for later re-use when a user is scrolling the list If this is set to 0, `rxVirtualFor` won't cache any view, thus destroying & re-creating very often on scroll events. | +| Input | Type | description | +| ------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `trackBy` | `keyof T` or `(index: number, item: T) => any` | Identifier function for items. `rxVirtualFor` provides a shorthand where you can name the property directly. | +| `patchZone` | `boolean` | _default: `true`_ if set to `false`, the `RxVirtualForDirective` will operate out of `NgZone`. See [NgZone optimizations](https://www.rx-angular.io/docs/template/performance-issues/ngzone-optimizations) | +| `parent` | `boolean` | _default: `false`_ if set to `false`, the `RxVirtualForDirective` won't inform its host component about changes being made to the template. More performant, `@ViewChild` and `@ContentChild` queries won't work. [Handling view and content queries](https://www.rx-angular.io/docs/template/performance-issues/handling-view-and-content-queries) | +| `strategy` | `Observable \ RxStrategyNames \ string>` | _default: `normal`_ configure the `RxStrategyRenderStrategy` used to detect changes. [Render Strategies](https://www.rx-angular.io/docs/cdk/render-strategies) | +| `renderCallback` | `Subject` | giving the developer the exact timing when the `RxVirtualForDirective` created, updated, removed its template. Useful for situations where you need to know when rendering is done. | +| `templateCacheSize` | `number` | _default: `20`_ Controls the amount if views held in cache for later re-use when a user is scrolling the list If this is set to 0, `rxVirtualFor` won't cache any view, thus destroying & re-creating very often on scroll events. | ### RxVirtualScrollViewportComponent @@ -631,7 +631,7 @@ import { RX_VIRTUAL_SCROLL_DEFAULT_OPTIONS } from '@rx-angular/template/experime useValue: { // should be of type `RxVirtualScrollDefaultOptions` runwayItems: 50, // turn off cache by default - viewCacheSize: 0 + templateCacheSize: 0 } }] }) @@ -641,7 +641,7 @@ import { RX_VIRTUAL_SCROLL_DEFAULT_OPTIONS } from '@rx-angular/template/experime ```ts /* determines how many templates can be cached and re-used on rendering */ -const DEFAULT_VIEW_CACHE_SIZE = 20; +const DEFAULT_TEMPLATE_CACHE_SIZE = 20; /* determines how many views will be rendered in scroll direction */ const DEFAULT_ITEM_SIZE = 50; /* determines how many views will be rendered in the opposite scroll direction */ @@ -655,7 +655,7 @@ const DEFAULT_RUNWAY_ITEMS_OPPOSITE = 2; ```ts export interface RxVirtualScrollDefaultOptions { /* determines how many templates can be cached and re-used on rendering, defaults to 20 */ - viewCacheSize?: number; + templateCacheSize?: number; /* determines how many views will be rendered in scroll direction, defaults to 15 */ runwayItems?: number; /* determines how many views will be rendered in the opposite scroll direction, defaults to 5 */ diff --git a/libs/template/experimental/virtual-scrolling/src/lib/model.ts b/libs/template/experimental/virtual-scrolling/src/lib/model.ts index 9a763f5c3a..af777d7ad0 100644 --- a/libs/template/experimental/virtual-scrolling/src/lib/model.ts +++ b/libs/template/experimental/virtual-scrolling/src/lib/model.ts @@ -25,7 +25,7 @@ export interface TemplateSettings { templateRef: TemplateRef; createViewContext: CreateViewContext; updateViewContext: UpdateViewContext; - viewCacheSize: number; + templateCacheSize: number; } export interface ListRange { diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts index 6fe13e9061..558c713c41 100644 --- a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts +++ b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts @@ -60,7 +60,7 @@ import { RxVirtualListTemplateManager, } from './virtual-list-template-manager'; import { - DEFAULT_VIEW_CACHE_SIZE, + DEFAULT_TEMPLATE_CACHE_SIZE, RX_VIRTUAL_SCROLL_DEFAULT_OPTIONS, } from './virtual-scroll.config'; @@ -324,8 +324,8 @@ export class RxVirtualFor = NgIterable> * scrolling the list. If this is set to 0, `rxVirtualFor` won't cache any view, * thus destroying & re-creating very often on scroll events. */ - @Input('rxVirtualForViewCacheSize') viewCacheSize = - this.defaults?.viewCacheSize || DEFAULT_VIEW_CACHE_SIZE; + @Input('rxVirtualForTemplateCacheSize') templateCacheSize = + this.defaults?.templateCacheSize || DEFAULT_TEMPLATE_CACHE_SIZE; /** * @description @@ -605,7 +605,7 @@ export class RxVirtualFor = NgIterable> templateRef: this.template, createViewContext: this.createViewContext.bind(this), updateViewContext: this.updateViewContext.bind(this), - viewCacheSize: this.viewCacheSize, + templateCacheSize: this.templateCacheSize, }); this.render() .pipe(takeUntil(this._destroy$)) diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-list-template-manager.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-list-template-manager.ts index 83693f478c..b4d9618cc5 100644 --- a/libs/template/experimental/virtual-scrolling/src/lib/virtual-list-template-manager.ts +++ b/libs/template/experimental/virtual-scrolling/src/lib/virtual-list-template-manager.ts @@ -46,7 +46,7 @@ export function createVirtualListTemplateManager< templateRef, createViewContext, updateViewContext, - viewCacheSize, + templateCacheSize, }: TemplateSettings): RxVirtualListTemplateManager { let _viewCache: EmbeddedViewRef[] = []; let itemCount = 0; @@ -143,7 +143,7 @@ export function createVirtualListTemplateManager< * destroyed. */ function _maybeCacheView(view: EmbeddedViewRef) { - if (_viewCache.length < viewCacheSize) { + if (_viewCache.length < templateCacheSize) { _viewCache.push(view); return true; } else { diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-scroll.config.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-scroll.config.ts index ccf9c522c5..89b5921dd6 100644 --- a/libs/template/experimental/virtual-scrolling/src/lib/virtual-scroll.config.ts +++ b/libs/template/experimental/virtual-scrolling/src/lib/virtual-scroll.config.ts @@ -2,7 +2,7 @@ import { InjectionToken } from '@angular/core'; export interface RxVirtualScrollDefaultOptions { /* determines how many templates can be cached and re-used on rendering, defaults to 20 */ - viewCacheSize?: number; + templateCacheSize?: number; /* determines how many views will be rendered in scroll direction, defaults to 15 */ runwayItems?: number; /* determines how many views will be rendered in the opposite scroll direction, defaults to 5 */ @@ -25,13 +25,13 @@ export function RX_VIRTUAL_SCROLL_DEFAULT_OPTIONS_FACTORY(): RxVirtualScrollDefa return { runwayItems: DEFAULT_RUNWAY_ITEMS, runwayItemsOpposite: DEFAULT_RUNWAY_ITEMS_OPPOSITE, - viewCacheSize: DEFAULT_VIEW_CACHE_SIZE, + templateCacheSize: DEFAULT_TEMPLATE_CACHE_SIZE, itemSize: DEFAULT_ITEM_SIZE, }; } /** @internal */ -export const DEFAULT_VIEW_CACHE_SIZE = 20; +export const DEFAULT_TEMPLATE_CACHE_SIZE = 20; /** @internal */ export const DEFAULT_ITEM_SIZE = 50; /** @internal */ diff --git a/libs/template/experimental/virtual-scrolling/tests/autosize.cy.ts b/libs/template/experimental/virtual-scrolling/tests/autosize.cy.ts index 4c8190582f..8742c32287 100644 --- a/libs/template/experimental/virtual-scrolling/tests/autosize.cy.ts +++ b/libs/template/experimental/virtual-scrolling/tests/autosize.cy.ts @@ -66,7 +66,7 @@ function mountAutoSize( *rxVirtualFor=" let item of items; renderCallback: renderCallback; - viewCacheSize: viewCache; + templateCacheSize: viewCache; strategy: strategy; trackBy: trackBy; " diff --git a/libs/template/experimental/virtual-scrolling/tests/dynamic-size.cy.ts b/libs/template/experimental/virtual-scrolling/tests/dynamic-size.cy.ts index 40c6858392..ee7109ab78 100644 --- a/libs/template/experimental/virtual-scrolling/tests/dynamic-size.cy.ts +++ b/libs/template/experimental/virtual-scrolling/tests/dynamic-size.cy.ts @@ -59,7 +59,7 @@ function mountDynamicSize( *rxVirtualFor=" let item of items; renderCallback: renderCallback; - viewCacheSize: viewCache; + templateCacheSize: viewCache; strategy: strategy; trackBy: trackBy; " diff --git a/libs/template/experimental/virtual-scrolling/tests/fixed-size.cy.ts b/libs/template/experimental/virtual-scrolling/tests/fixed-size.cy.ts index 4fb09b371c..235fe5d98d 100644 --- a/libs/template/experimental/virtual-scrolling/tests/fixed-size.cy.ts +++ b/libs/template/experimental/virtual-scrolling/tests/fixed-size.cy.ts @@ -52,7 +52,7 @@ function mountFixedSize( *rxVirtualFor=" let item of items; renderCallback: renderCallback; - viewCacheSize: viewCache; + templateCacheSize: viewCache; strategy: strategy; trackBy: trackBy; " diff --git a/libs/template/experimental/virtual-scrolling/tests/fixtures.ts b/libs/template/experimental/virtual-scrolling/tests/fixtures.ts index 5298e32eb5..2036017f70 100644 --- a/libs/template/experimental/virtual-scrolling/tests/fixtures.ts +++ b/libs/template/experimental/virtual-scrolling/tests/fixtures.ts @@ -14,7 +14,7 @@ import { DEFAULT_ITEM_SIZE, DEFAULT_RUNWAY_ITEMS, DEFAULT_RUNWAY_ITEMS_OPPOSITE, - DEFAULT_VIEW_CACHE_SIZE, + DEFAULT_TEMPLATE_CACHE_SIZE, } from '../src/lib/virtual-scroll.config'; function randomContent(minLength = 1, maxLength = 50) { @@ -83,7 +83,7 @@ export const defaultMountConfig: VirtualScrollMountConfig = { runwayItems: DEFAULT_RUNWAY_ITEMS, runwayItemsOpposite: DEFAULT_RUNWAY_ITEMS_OPPOSITE, itemSize: DEFAULT_ITEM_SIZE, - viewCache: DEFAULT_VIEW_CACHE_SIZE, + viewCache: DEFAULT_TEMPLATE_CACHE_SIZE, containerHeight: 300, } as const; export const defaultItemLength = 500;