8000 feat(template): rename template to content · rx-angular/rx-angular@70f7426 · GitHub
[go: up one dir, main page]
Skip to content

Commit 70f7426

Browse files
eneajahoeneajaho
committed
feat(template): rename template to content
1 parent ce873ae commit 70f7426

File tree

12 files changed

+123
-123
lines changed

12 files changed

+123
-123
lines changed

‎apps/demos/src/app/features/template/virtual-view/virtual-item.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
22
import {
33
RxVirtualViewPlaceholder,
4-
RxVirtualViewTemplate,
4+
RxVirtualViewContent,
55
} from '@rx-angular/template/virtual-view';
66

77
@Component({
88
selector: 'virtual-item',
99
template: `
10-
<div class="content" *rxVirtualViewTemplate>
10+
<div class="content" *rxVirtualViewContent>
1111
{{ item().content }}
1212
</div>
1313
<div class="content placeholder" *rxVirtualViewPlaceholder>
1414
{{ item().content }}
1515
</div>
1616
`,
1717
changeDetection: ChangeDetectionStrategy.OnPush,
18-
imports: [RxVirtualViewTemplate, RxVirtualViewPlaceholder],
18+
imports: [RxVirtualViewContent, RxVirtualViewPlaceholder],
1919
})
2020
export class VirtualItem {
2121
item = input<{ id: number; content: string }>();

‎apps/demos/src/app/features/template/virtual-view/virtual-view-demo.component.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
RxVirtualView,
99
RxVirtualViewObserver,
1010
RxVirtualViewPlaceholder,
11-
RxVirtualViewTemplate,
11+
RxVirtualViewContent,
1212
} from '@rx-angular/template/virtual-view';
1313
import { VirtualContent } from './virtual-content.component';
1414
import { VirtualItem } from './virtual-item.component';
@@ -34,7 +34,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
3434
<h2>Inline, no placeholder, keepLastKnownSize</h2>
3535
@for (item of values; track item.id) {
3636
<div rxVirtualView keepLastKnownSize class="item">
37-
<div class="content" *rxVirtualViewTemplate>
37+
<div class="content" *rxVirtualViewContent>
3838
{{ item.content }}
3939
</div>
4040
</div>
@@ -45,7 +45,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
4545
@for (item of values; track item.id) {
4646
<div rxVirtualView class="item">
4747
<div>content before</div>
48-
<div class="content" *rxVirtualViewTemplate>
48+
<div class="content" *rxVirtualViewContent>
4949
{{ item.content }}
5050
</div>
5151
<div>content after</div>
@@ -60,7 +60,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
6060
@for (item of values; track item.id) {
6161
<div rxVirtualView startWithPlaceholderAsap class="item">
6262
<div>content before</div>
63-
<div class="content" *rxVirtualViewTemplate>
63+
<div class="content" *rxVirtualViewContent>
6464
{{ item.content }}
6565
</div>
6666
<div>content after</div>
@@ -77,7 +77,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
7777
<virtual-content
7878
class="content"
7979
[item]="item"
80-
*rxVirtualViewTemplate
80+
*rxVirtualViewContent
8181
/>
8282
<virtual-placeholder
8383
class="content placeholder"
@@ -96,7 +96,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
9696
<h2>Category 3</h2>
9797
@for (item of values; track item.id) {
9898
<div rxVirtualView class="item">
99-
<div class="content" *rxVirtualViewTemplate>
99+
<div class="content" *rxVirtualViewContent>
100100
{{ item.content }}
101101
</div>
102102
<div class="content placeholder" *rxVirtualViewPlaceholder>
@@ -109,7 +109,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
109109
<h2>Category 4</h2>
110110
@for (item of values; track item.id) {
111111
<div rxVirtualView class="item">
112-
<div class="content" *rxVirtualViewTemplate>
112+
<div class="content" *rxVirtualViewContent>
113113
{{ item.content }}
114114
</div>
115115
<div class="content placeholder" *rxVirtualViewPlaceholder>
@@ -156,7 +156,7 @@ import { VirtualPlaceholder } from './virtual-placeholder.component';
156156
imports: [
157157
RxVirtualViewObserver,
158158
RxVirtualView,
159-
RxVirtualViewTemplate,
159+
RxVirtualViewContent,
160160
RxVirtualViewPlaceholder,
161161
VirtualPlaceholder,
162162
VirtualContent,

‎apps/docs/docs/template/api/virtual-view-directive.mdx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ RxVirtualView is designed to work in combination with related directives:
4141

4242
- `rxVirtualViewObserver`: Defines the node being used for the `IntersectionObserver`. Provides cache & other services.
4343
- `rxVirtualView`: Defines the DOM node being observed for visibility.
44-
- `rxVirtualViewTemplate`: Defines the template shown when the observed node is visible.
44+
- `rxVirtualViewContent`: Defines the content shown when the observed node is visible.
4545
- `rxVirtualViewPlaceholder`: (Optional) Defines the placeholder shown when the observed node isn't visible.
4646

4747
### Show a widget when it's visible, otherwise show a placeholder
@@ -52,7 +52,7 @@ RxVirtualView is designed to work in combination with related directives:
5252
<!-- observe the visibility of `.widget` -->
5353
<div class="widget" rxVirtualView>
5454
<!-- this will be the template when .widget is visible to the user -->
55-
<widget *rxVirtualViewTemplate />
55+
<widget *rxVirtualViewContent />
5656
<!-- this will be the template when .widget isn't visible to the user -->
5757
<div *rxVirtualViewPlaceholder class="widget-placeholder">
5858
Placeholder
@@ -65,13 +65,13 @@ RxVirtualView is designed to work in combination with related directives:
6565
This setup will:
6666

6767
1. Use rxVirtualViewObserver to monitor the visibility of the rxVirtualView element.
68-
2. Render the content of rxVirtualViewTemplate when the element is visible.
68+
2. Render the content of rxVirtualViewContent when the element is visible.
6969
3. Show the rxVirtualViewPlaceholder when the element is not visible.
7070

7171
:::tip Define placeholder dimensions
7272

7373
The placeholder is what makes or breaks your experience with `RxVirtualView`. In best case it's just
74-
an empty container which has just the same dimensions as its template it should replace.
74+
an empty container which has just the same dimensions as its content it should replace.
7575

7676
This will make sure you don't run into stuttery scrolling behavior and layout shifts.
7777

@@ -86,7 +86,7 @@ We are only rendering the `item` component when it's visible to the user. Otherw
8686
<div rxVirtualViewObserver class="container">
8787
@for (item of items; track item.id) {
8888
<div class="item" rxVirtualView>
89-
<item *rxVirtualViewTemplate [item]="item" />
89+
<item *rxVirtualViewContent [item]="item" />
9090
<div *rxVirtualViewPlaceholder style="height: 50px;"></div>
9191
</div>
9292
}
@@ -105,41 +105,41 @@ We are only rendering the `item` component when it's visible to the user. Otherw
105105

106106
### RxVirtualView Inputs
107107

108-
| Input | Type | description |
109-
| -------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
110-
| `cacheEnabled` | `boolean` | Useful when we want to cache the templates and placeholders to optimize view rendering. |
111-
| `startWithPlaceholderAsap` | `boolean` | Whether to start with the placeholder asap or not. If `true`, the placeholder will be rendered immediately, without waiting for the template to be visible. This is useful when you want to render the placeholder immediately, but you don't want to wait for the template to be visible. This is to counter concurrent rendering, and to avoid flickering. |
112-
| `keepLastKnownSize` | `boolean` | This will keep the last known size of the host element while the template is visible. It sets 'minHeight' to the host node |
113-
| `useContentVisibility` | `boolean` | It will add the `content-visibility` CSS class to the host element, together with `contain-intrinsic-width` and `contain-intrinsic-height` CSS properties. |
114-
| `useContainment` | `boolean` | It will add `contain` css property with: <br/> - `size layout paint`: if `useContentVisibility` is `true` && placeholder is visible <br/> - `content`: if `useContentVisibility` is `false` or template is visible |
115-
| `placeholderStrategy` | `boolean` | The strategy to use for rendering the placeholder. <br/> Defaults to: `low` <br/> [Read more about strategies](../../cdk/render-strategies/strategies/concurrent-strategies) |
116-
| `templateStrategy` | `boolean` | The strategy to use for rendering the template. <br/> Defaults to: `normal` <br/> [Read more about strategies](../../cdk/render-strategies/strategies/concurrent-strategies) |
108+
| Input | Type | description |
109+
| -------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110+
| `cacheEnabled` | `boolean` | Useful when we want to cache the contents and placeholders to optimize view rendering. |
111+
| `startWithPlaceholderAsap` | `boolean` | Whether to start with the placeholder asap or not. If `true`, the placeholder will be rendered immediately, without waiting for the content to be visible. This is useful when you want to render the placeholder immediately, but you don't want to wait for the content to be visible. This is to counter concurrent rendering, and to avoid flickering. |
112+
| `keepLastKnownSize` | `boolean` | This will keep the last known size of the host element while the content is visible. It sets 'minHeight' to the host node |
113+
| `useContentVisibility` | `boolean` | It will add the `content-visibility` CSS class to the host element, together with `contain-intrinsic-width` and `contain-intrinsic-height` CSS properties. |
114+
| `useContainment` | `boolean` | It will add `contain` css property with: <br/> - `size layout paint`: if `useContentVisibility` is `true` && placeholder is visible <br/> - `content`: if `useContentVisibility` is `false` or content is visible |
115+
| `placeholderStrategy` | `boolean` | The strategy to use for rendering the placeholder. <br/> Defaults to: `low` <br/> [Read more about strategies](../../cdk/render-strategies/strategies/concurrent-strategies) |
116+
| `contentStrategy` | `boolean` | The strategy to use for rendering the content. <br/> Defaults to: `normal` <br/> [Read more about strategies](../../cdk/render-strategies/strategies/concurrent-strategies) |
117117

118118
### RxVirtualViewConfig
119119

120120
Defines an interface representing all configuration that can be adjusted on provider level.
121121

122122
```typescript
123-
interface RxVirtualViewConfig {
123+
export interface RxVirtualViewConfig {
124124
keepLastKnownSize: boolean;
125125
useContentVisibility: boolean;
126126
useContainment: boolean;
127127
placeholderStrategy: RxStrategyNames<string>;
128-
templateStrategy: RxStrategyNames<string>;
128+
contentStrategy: RxStrategyNames<string>;
129129
cacheEnabled: boolean;
130130
startWithPlaceholderAsap: boolean;
131131
cache: {
132132
/**
133-
* The maximum number of templates that can be stored in the cache.
133+
* The maximum number of contents that can be stored in the cache.
134134
* Defaults to 20.
135135
*/
136-
maxTemplates: number;
136+
contentCacheSize: number;
137137

138138
/**
139139
* The maximum number of placeholders that can be stored in the cache.
140140
* Defaults to 20.
141141
*/
142-
maxPlaceholders: number;
142+
placeholderCacheSize: number;
143143
};
144144
}
145145
```
@@ -172,12 +172,12 @@ This is the default configuration which will be used when no other config was pr
172172
useContentVisibility: false,
173173
useContainment: true,
174174
placeholderStrategy: 'low',
175-
templateStrategy: 'normal',
175+
contentStrategy: 'normal',
176176
startWithPlaceholderAsap: false,
177177
cacheEnabled: true,
178178
cache: {
179-
maxTemplates: 20,
180-
maxPlaceholders: 20,
179+
contentCacheSize: 20,
180+
placeholderCacheSize: 20,
181181
},
182182
};
183183

‎libs/template/virtual-view/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export { RxVirtualView } from './lib/virtual-view.directive';
2+
export { RxVirtualViewContent } from './lib/virtual-view-content.directive';
23
export { RxVirtualViewObserver } from './lib/virtual-view-observer.directive';
34
export { RxVirtualViewPlaceholder } from './lib/virtual-view-placeholder.directive';
4-
export { RxVirtualViewTemplate } from './lib/virtual-view-template.directive';

‎libs/template/virtual-view/src/lib/model.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
44
/**
55
* @internal
66
*/
7-
export interface _RxVirtualViewTemplate {
7+
export interface _RxVirtualViewContent {
88
viewContainerRef: ViewContainerRef;
99
templateRef: TemplateRef<unknown>;
1010
}
@@ -33,6 +33,6 @@ export abstract class _RxVirtualViewObserver {
3333
* @internal
3434
*/
3535
export abstract class _RxVirtualView {
36-
abstract registerTemplate(template: _RxVirtualViewTemplate): void;
36+
abstract registerContent(content: _RxVirtualViewContent): void;
3737
abstract registerPlaceholder(placeholder: _RxVirtualViewPlaceholder): void;
3838
}

‎libs/template/virtual-view/src/lib/tests/virtual-view.directive.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { RX_RENDER_STRATEGIES_CONFIG } from '@rx-angular/cdk/render-strategies';
55
import { tap } from 'rxjs';
66
import { provideVirtualViewConfig } from '../virtual-view.config';
77
import { RxVirtualView } from '../virtual-view.directive';
8+
import { RxVirtualViewContent } from '../virtual-view-content.directive';
89
import { RxVirtualViewObserver } from '../virtual-view-observer.directive';
910
import { RxVirtualViewPlaceholder } from '../virtual-view-placeholder.directive';
10-
import { RxVirtualViewTemplate } from '../virtual-view-template.directive';
1111

1212
@Component({
1313
template: `
1414
<div class="container" rxVirtualViewObserver [root]="null">
1515
<div rxVirtualView class="widget">
16-
<div *rxVirtualViewTemplate class="template">ze-template</div>
16+
<div *rxVirtualViewContent class="template">ze-template</div>
1717
@if (withPlaceholder()) {
1818
<div *rxVirtualViewPlaceholder class="placeholder">
1919
ze-placeholder
@@ -27,7 +27,7 @@ import { RxVirtualViewTemplate } from '../virtual-view-template.directive';
2727
RxVirtualViewObserver,
2828
RxVirtualView,
2929
RxVirtualViewPlaceholder,
30-
RxVirtualViewTemplate,
30+
RxVirtualViewContent,
3131
],
3232
})
3333
class VirtualViewTestComponent {
@@ -98,7 +98,7 @@ describe('RxVirtualView', () => {
9898
},
9999
provideVirtualViewConfig({
100100
placeholderStrategy: 'sync',
101-
templateStrategy: 'sync',
101+
contentStrategy: 'sync',
102102
}),
103103
],
104104
});

0 commit comments

Comments
 (0)
0