Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2ee0e32

Browse files
hoebbelsBhoebbelsB
committed
Merge branch 'main' into scheduler-coalesce-ngzone
2 parents 54d9ca8 + 23ba3eb commit 2ee0e32

File tree

38 files changed

+838
-177
lines changed

38 files changed

+838
-177
lines changed

‎apps/demos/src/app/features/experiments/structural-directives/rx-let-poc/rx-query-content.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChangeDetectionStrategy, Component, ContentChild, Directive, Input, OnInit } from '@angular/core';
22
import { Observable } from 'rxjs';
33
import { RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
4-
import { RxEffects } from '../../../../shared/rx-effects.service';
4+
import { RxEffects } from '@rx-angular/state/effects';
55

66
@Directive({
77
selector: '[rxaContentTest]'
@@ -31,7 +31,7 @@ export class RxQueryContentComponent implements OnInit {
3131
}
3232

3333
ngOnInit() {
34-
this.effects.hold(this.value, () => {
34+
this.effects.register(this.value, () => {
3535
setTimeout(() => console.log(this.contentChild), 250);
3636
});
3737
}

‎apps/demos/src/app/features/template/rx-for/nested-lists/rx-for-minimal.directive.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
take,
2929
tap
3030
} from 'rxjs/operators';
31-
import { RxEffects } from '../../../../shared/rx-effects.service';
31+
import { RxEffects } from '@rx-angular/state/effects';
3232

3333
type RxForTemplateNames = 'rxSuspense' | 'rxNext' | 'rxError' | 'rxComplete';
3434

@@ -140,7 +140,7 @@ export class RxMinimalForOf<T extends object, U extends NgIterable<T> = NgIterab
140140

141141
initDiffer(iterable: U = [] as U) {
142142
this.differ = this.iterableDiffers.find(iterable).create((index: number, item: T) => item[this._rxTrackBy]);
143-
this.rxEffects.hold(this.values$.pipe(
143+
this.rxEffects.register(this.values$.pipe(
144144
startWith(iterable),
145145
map(i => ({ diff: this.differ.diff(i), iterable: i })),
146146
filter(r => r.diff != null),
@@ -149,7 +149,7 @@ export class RxMinimalForOf<T extends object, U extends NgIterable<T> = NgIterab
149149
}
150150

151151
ngOnInit() {
152-
this.rxEffects.hold(this.values$.pipe(take(1)), (value) => this.initDiffer(value));
152+
this.rxEffects.register(this.values$.pipe(take(1)), (value) => this.initDiffer(value));
153153
}
154154

155155
ngOnDestroy() {

‎apps/demos/src/app/features/template/rx-let/lazy-loading-components/lazy-loading-components-promise.component.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
2-
import { from, Subject } from 'rxjs';
3-
import { delay, scan, shareReplay, switchMap } from 'rxjs/operators';
4-
import { RxEffects } from '../../../../shared/rx-effects.service';
5-
import { CdHelper } from '../../../../shared/utils/cd-helper';
2+
import { from } from 'rxjs';
63

74
@Component({
85
selector: 'rxa-lazy-loading-components-promise',

‎apps/demos/src/app/features/template/rx-let/lazy-loading-components/lazy-loading-components.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RxEffects } from '../../../../shared/rx-effects.service';
2+
import { RxEffects } from '@rx-angular/state/effects';
33

44
@Component({
55
selector: 'rxa-lazy-loading-components',
@@ -33,7 +33,7 @@ import { RxEffects } from '../../../../shared/rx-effects.service';
3333
`,
3434
changeDetection: ChangeDetectionStrategy.OnPush
3535
})
36-
export class LazyLoadingComponentsComponent extends RxEffects {
36+
export class LazyLoadingComponentsComponent {
3737

3838
displayStates = {
3939
none: 0,

‎apps/demos/src/app/features/template/rx-let/ng-if-hack/ng-if-hack.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { RxEffects } from '../../../../shared/rx-effects.service';
2+
import { RxEffects } from '@rx-angular/state/effects';
33

44
@Component({
55
selector: 'rxa-ngif-hack-container',
@@ -38,7 +38,7 @@ import { RxEffects } from '../../../../shared/rx-effects.service';
3838
`,
3939
changeDetection: ChangeDetectionStrategy.OnPush
4040
})
41-
export class NgIfHackComponent extends RxEffects {
41+
export class NgIfHackComponent {
4242
isVisible= true
4343

4444
displayStates = {

‎apps/demos/src/app/features/template/strategies/pixel-priority/pixel-priority.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BehaviorSubject, Subject } from 'rxjs';
33
import { map } from 'rxjs/operators';
44
import { createImageConverter } from '../../../../shared/image-array';
55
import { computeColorPrio } from '../../../../shared/image-array/pixel-image';
6-
import { RxEffects } from '../../../../shared/rx-effects.service';
6+
import { RxEffects } from '@rx-angular/state/effects';
77

88
@Component({
99
selector: 'rxa-concurrent-strategies',
@@ -67,7 +67,7 @@ export class PixelPriorityComponent {
6767
pixelArray$ = this.imgInfoChange$.pipe(map(d => d.pixelArray));
6868

6969
constructor(public rxEf: RxEffects) {
70-
this.rxEf.hold(this.imgChange$, (img: CanvasImageSource) => this.imgConverter.renderImage(img));
70+
this.rxEf.register(this.imgChange$, (img: CanvasImageSource) => this.imgConverter.renderImage(img));
7171
}
7272

7373
visible(choice) {

‎apps/demos/src/app/features/tutorials/basics/1-setup/Readme.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ The next step is to set up `model$`, a component property that holds all data we
5858
By assigning the `model$` to the `$` property of the `RxState` class, we get the full state object as `Observable<ComponentState>`.
5959

6060
```typescript
61-
6261
@Component({
6362
selector: 'rxa-setup-solution',
6463
template: `

‎apps/demos/src/app/features/tutorials/basics/5-side-effects/Readme.md

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,36 @@ export class SideEffectsStart
125125

126126
This is the trigger for our side effect.
127127

128-
## `hold` the side effect
128+
## Manage side effects
129129

130-
From the `resetRefreshTick` method, we now move the logic that starts the tick and place it in the `hold` method as a callback parameter.
130+
To maintain side effects RxAngular provides a deprecated method `RxState#hold`.
131+
As this method will get removed in the future we directly focus on the new method and use `RxEffects#register`.
131132

132-
The `hold` method's job, as the name implies, is to *hold* something. Namely, it holds a subscription to a side effect and takes care of its initialization.
133+
`RxEffects` is used in the same way as `RxState` as "component only provider". This means we need to add it to the components `providers` array.
134+
135+
136+
```typescript
137+
@Component({
138+
...
139+
providers: [
140+
RxEffects
141+
]
142+
})
143+
export class SideEffectsStart extends RxState<ComponentState> {
144+
constructor(private rxEffects: RxEffects) {
145+
146+
}
147+
}
148+
```
149+
150+
From the `resetRefreshTick` method, we now move the logic that starts the tick and place it in the `register` method of `RxEffects` as a callback parameter.
151+
152+
The `register` method's job, as the name implies, is to *registers/holds* something. Namely, it holds a subscription to a side effect and takes care of its initialization.
133153
Furthermore, it automatically handles the subscription management and unsubscribes if the component gets destroyed.
134154

135155
```typescript
136156
constructor(...) {
137-
this.hold(this.refreshClicks$, () => this.listService.refetchList());
157+
this.rxEffects.register(this.refreshClicks$, () => this.listService.refetchList());
138158
}
139159
```
140160

@@ -148,11 +168,11 @@ refreshListSideEffect$ = this.refreshClicks$.pipe(
148168
);
149169
```
150170

151-
and then hold it directly:
171+
and then register it directly:
152172

153173
```typescript
154174
constructor(...) {
155-
this.hold(refreshListSideEffect$);
175+
this.rxEffects.register(refreshListSideEffect$);
156176
}
157177
```
158178

@@ -186,19 +206,19 @@ refreshListSideEffect$ = merge(
186206
).pipe(tap((_) => this.listService.refetchList()));
187207
```
188208

189-
As a last step, we could use another overload of the `hold` method to get better readability of the code.
209+
As a last step, we could use another overload of the `register` method to get better readability of the code.
190210

191-
The second overload of the `hold` method takes a trigger `Observable` and a separate function that is executed whenever the trigger fires.
211+
The second overload of the `register` method takes a trigger `Observable` and a separate function that is executed whenever the trigger fires.
192212
It generally looks like this:
193213

194-
`hold(o$: Observable<T>, sideEffect: (v: T) => void)`
214+
`register(o$: Observable<T>, sideEffect: (v: T) => void)`
195215

196216
In our constructor, we can use it as following:
197217

198218
```typescript
199219
constructor(...) {
200220
// ...
201-
this.hold(refreshListSideEffect$, () => this.listService.refetchList());
221+
this.rxEffects.register(refreshListSideEffect$, () => this.listService.refetchList());
202222
}
203223
```
204224

‎apps/demos/src/app/rx-angular-pocs/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export * from './cdk';
22
export * from './template';
3-
export *from './state';
43

‎apps/demos/src/app/rx-angular-pocs/state/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎apps/demos/src/app/rx-angular-pocs/state/rx-effects/index.ts

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎apps/demos/src/app/rx-angular-pocs/state/rx-effects/until-destroy.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎apps/demos/src/app/rx-angular-pocs/template/directives/if-visible/if-visible.directive.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Subscription } from 'rxjs';
1+
import { Subscription, takeUntil } from 'rxjs';
22
import { filter, mergeAll } from 'rxjs/operators';
33
import {
44
ChangeDetectorRef,
@@ -26,7 +26,7 @@ import {
2626
rxIfVisibleTemplateNames,
2727
RxIfVisibleViewContext,
2828
} from './model';
29-
import { RxEffects } from '../../../state/rx-effects';
29+
import { RxEffects } from '@rx-angular/state/effects';
3030

3131
@Directive({
3232
selector: '[ifVisible]',
@@ -99,7 +99,7 @@ export class IfVisibleDirective<U> extends Hooks implements OnInit {
9999
.render(
100100
this.observer.entries$.pipe(
101101
filter((entry) => entry.isIntersecting && !this.displayed),
102-
this.rxEf.untilDestroy()
102+
takeUntil(this.onDestroy$)
103103
)
104104
)
105105
.subscribe(() => {

‎apps/demos/src/app/shared/debug-helper/dirty-checks/dirty-checks-work.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { MatRipple } from '@angular/material/core';
99
import { Hooks } from '../hooks';
1010
import { select } from '@rx-angular/state/selections';
11-
import { RxEffects } from '../../rx-effects.service';
11+
import { RxEffects } from '@rx-angular/state/effects';
1212
import { AppConfigService } from '../../../app-config.service';
1313

1414
@Component({
@@ -65,10 +65,10 @@ export class DirtyChecksWorkComponent extends Hooks {
6565
private rxEf: RxEffects
6666
) {
6767
super();
68-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
68+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
6969
this.rippleOn = r;
7070
});
71-
this.rxEf.hold(this.afterViewInit$, () => {
71+
this.rxEf.register(this.afterViewInit$, () => {
7272
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
7373
this.numDirtyChecks();
7474
});

‎apps/demos/src/app/shared/debug-helper/dirty-checks/dirty-checks.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { MatRipple } from '@angular/material/core';
99
import { Hooks } from '../hooks';
1010
import { select } from '@rx-angular/state/selections';
11-
import { RxEffects } from '../../rx-effects.service';
11+
import { RxEffects } from '@rx-angular/state/effects';
1212
import { AppConfigService } from '../../../app-config.service';
1313

1414
@Component({
@@ -58,10 +58,10 @@ export class DirtyChecksComponent extends Hooks {
5858
private rxEf: RxEffects
5959
) {
6060
super();
61-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
61+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
6262
this.rippleOn = r;
6363
});
64-
this.rxEf.hold(this.afterViewInit$, () => {
64+
this.rxEf.register(this.afterViewInit$, () => {
6565
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
6666
this.numDirtyChecks();
6767
});

‎apps/demos/src/app/shared/debug-helper/renderings/renderings.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
tap,
2121
} from 'rxjs/operators';
2222
import { Hooks } from '../hooks';
23-
import { RxEffects } from '../../rx-effects.service';
23+
import { RxEffects } from '@rx-angular/state/effects';
2424
import { select } from '@rx-angular/state/selections';
2525
import { AppConfigService } from '../../../app-config.service';
2626

@@ -88,11 +88,11 @@ export class RenderingsComponent extends Hooks {
8888
private rxEf: RxEffects
8989
) {
9090
super();
91-
this.rxEf.hold(this.configService.$.pipe(select('rippleOn')), (r) => {
91+
this.rxEf.register(this.configService.$.pipe(select('rippleOn')), (r) => {
9292
this.rippleOn = r;
9393
});
9494

95-
this.rxEf.hold(this.afterViewInit$, () => {
95+
this.rxEf.register(this.afterViewInit$, () => {
9696
this.launchRipple();
9797
});
9898
}

‎apps/demos/src/app/shared/image-array/controls/image-array.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AfterViewInit, Component, ElementRef, Output, ViewChild } from '@angular/core';
22
import { Observable, Subject } from 'rxjs';
3-
import { RxEffects } from '../../rx-effects.service';
3+
import { RxEffects } from '@rx-angular/state/effects';
44
import { Hooks } from '../../debug-helper/hooks';
55
import { RxState } from '@rx-angular/state';
66
import { fileReaderFromBlob, imageFromFileReader } from '../pixel-image';

‎libs/cdk/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
44

5+
## [0.0.0-beta.2](/compare/[email protected]@1.0.0-beta.2) (2022-02-27)
6+
7+
### Bug Fixes
8+
9+
* **cdk:** compat for jest and Angular 12
10+
511
# [1.0.0-beta.1](/compare/[email protected]@1.0.0-beta.1) (2022-02-08)
612

713

‎libs/cdk/coalescing/docs/Readme.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ There are 2 places in Angular we have coalescing already implemented in the fram
3030
- The flag `ngZoneEventCoalescing` in `BootstrapOptions`
3131
- RxAngular adds another option where we can apply those techniques manually wherever we want.
3232

33-
**The Benefits of RxAngular**
34-
33+
**The Benefits**
3534
- ✅ Coalescing techniques as RxJS operators
3635
- ✅ Configurable durationSelector for all kind of scheduling methods
3736
- ✅ Scope coalescing to a specific component or object

‎libs/cdk/package.json

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@rx-angular/cdk",
3-
"version": "1.0.0-beta.1",
3+
"version": "1.0.0-beta.2",
44
"description": "@rx-angular/cdk is a Component Development Kit for ergonomic and highly performant angular applications. It helps to to build Large scale applications, UI libs, state management, rendering systems and much more. Furthermore the unique way of mixing reactive as well as imperative code leads to best DX and speed.",
55
"main": "index.js",
66
"publishConfig": {
@@ -11,27 +11,23 @@
1111
"npm": ">=5.3.0",
1212
"yarn": ">=1.9.2"
1313
},
14-
"author": "Michael Hladky <michael@hladky.at>",
14+
"author": "Michael Hladky <michael.hladky@push-based>",
1515
"homepage": "https://rx-angular.io/",
1616
"keywords": [
1717
"angular",
18-
"rxjs",
18+
"reactive",
1919
"cdk",
20-
"responsiveness",
21-
"large scale applications",
22-
"high performance",
2320
"performance",
2421
"rendering",
25-
"template",
26-
"template rendering",
2722
"memoization",
2823
"zone flags",
29-
"change detection"
24+
"change detection",
25+
"zone-less"
3026
],
3127
"contributors": [
3228
{
3329
"name": "Michael Hladky",
34-
"email": "michael@hladky.at"
30+
"email": "michael.hladky@push-based"
3531
},
3632
{
3733
"name": "Julian Jandl",

‎libs/state/CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@
22

33
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
44

5+
# [1.6.0](/compare/[email protected]@1.6.0) (2022-03-05)
6+
7+
8+
### Features
9+
10+
* add effects sum-module to docs 9586e09
11+
12+
13+
14+
## [1.5.1](/compare/[email protected]@1.5.1) (2022-02-27)
15+
16+
17+
### Bug Fixes
18+
19+
* **cdk:** compat for jest and Angular 12
20+
521
# [1.5.0](/compare/[email protected]@1.5.0) (2022-02-08)
622

723

0 commit comments

Comments
 (0)