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

Skip to content

Commit 2ea8550

Browse files
hoebbelsBhoebbelsB
committed
Merge branch 'main' into intro-action-fn
2 parents 453127c + 4e483e8 commit 2ea8550

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1635
-698
lines changed

‎README.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,9 @@ To learn more about @rx-angular/template and its capabilities, check out the off
4747

4848
### Using `@rx-angular/state`
4949

50-
In this example, we're creating a fully reactive counter component. We define the state using an interface and use the `RxState` service to manage it. We also define two actions to increment and decrement the count and use the `connect` method to update the state in response to these actions. Finally, we use the `select` method to display the count property of the state in the template.
50+
In this example, we're creating a fully reactive counter component. We use the `rxState` functional API to create the state. We also define two actions to increment and decrement the count and use the `connect` function to update the state in response to these actions. Finally, we use the `select` function to display the count property of the state in the template.
5151

5252
```ts
53-
interface CounterState {
54-
count: number;
55-
}
56-
57-
interface CounterActions {
58-
increment: void;
59-
decrement: void;
60-
}
61-
6253
@Component({
6354
selector: 'app-counter',
6455
standalone: true,
@@ -68,24 +59,29 @@ interface CounterActions {
6859
<button (click)="actions.increment()">Increment</button>
6960
<button (click)="actions.decrement()">Decrement</button>
7061
`,
71-
providers: [RxState, RxActionFactory],
62+
providers: [RxActionFactory],
7263
})
7364
export class CounterComponent {
74-
readonly count$ = this.state.select('count');
75-
readonly actions = this.actionFactory.create();
76-
77-
constructor(
78-
private readonly state: RxState<CounterState>,
79-
private readonly actionFactory: RxActionFactory<CounterActions>
80-
) {
81-
this.state.set({ count: 0 });
82-
this.state.connect(this.actions.increment$, (state) => ({
65+
private readonly actions = inject<
66+
RxActionFactory<{
67+
increment: void;
68+
decrement: void;
69+
}>
70+
>(RxActionFactory).create();
71+
72+
private readonly state = rxState<{
73+
count: number;
74+
}>(({ set, connect }) => {
75+
set({ count: 0 });
76+
connect(this.actions.increment$, (state) => ({
8377
count: state.count + 1,
8478
}));
85-
this.state.connect(this.actions.decrement$, (state) => ({
79+
connect(this.actions.decrement$, (state) => ({
8680
count: state.count - 1,
8781
}));
88-
}
82+
});
83+
84+
readonly count$ = this.state.select('count');
8985
}
9086
```
9187

@@ -133,3 +129,7 @@ We welcome contributions from the community to help improve RxAngular! To get st
133129
## License
134130

135131
This project is MIT licensed.
132+
133+
---
134+
135+
made with ❤ by [push-based.io](https://www.push-based.io)

‎apps/docs/docs/cdk/coalescing/coalescing.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ In RxAngular coalescing is used for merging multiple emissions, streams or calls
5959

6060
The next example shows the effect of coalescing visualized in flame charts.
6161

62-
![coalesceWith - micro taks duration selector](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing_duration-selector-micro-task.png)
62+
![coalesceWith - micro tasks duration selector](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing_duration-selector-micro-task.png)
6363
_no coalescing vs. coalescing on microtask. visualized in flame charts_
6464

65-
The non-coalesced component has three consequetive heavy computations in the template whilest the coalesced component only has to do the same computation once in order to complete the same job.
65+
The non-coalesced component has three consecutive heavy computations in the template while the coalesced component only has to do the same computation once in order to complete the same job.
6666
Even on a small components scale the difference in performance can be significant.
6767

6868
## Available approaches
@@ -137,7 +137,7 @@ As these situations typically occur across multiple components or are hard to sc
137137
</div>
138138
```
139139

140-
**Event Bubbling of smae event on multiple elements**
140+
**Event Bubbling of same event on multiple elements**
141141

142142
```html
143143
<div (click)="doStuff()">
@@ -205,7 +205,7 @@ from([1, 2, 3]).pipe(coalesceWith()).subscribe(doStuff); // 1 x doStuff logs 3
205205
By default, the duration in which values get united is derived from a micro task which executes immediately after the synchronous code got executed.
206206

207207
See the diagram for details:
208-
![coalesceWith - macro taks duration selector](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing_duration-selector-micro-task-flames.png)
208+
![coalesceWith - macro task duration selector](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing_duration-selector-micro-task-flames.png)
209209

210210
To have more fine-grained control over the duration of coalescing an optional parameter `durationSelector` is provided.
211211
`durationSelector` is of type `Observable<unknown>` and the first emission of it terminates the coalescing duration.
@@ -249,7 +249,7 @@ from([1, 2, 3]).pipe(coalesceWith()).subscribe(doStuff); // 1 x doStuff logs 3
249249
```
250250

251251
It makes sense because we want to render only the last update to the component. To do this, `coalesceWith` maintains a flag for each subscription.
252-
The wanted bevavior should execute change detection only once per component.
252+
The wanted behavior should execute change detection only once per component.
253253

254254
This can be achieved by scoping the flag that maintains coalescing to a specific thing. e.g. the component.
255255

@@ -269,7 +269,7 @@ The following diagram illustrates change detection in component level:
269269
![coalesceWith - multiple components with component scope](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing__coalesceWith-on-component-component-scope.png)
270270

271271
> **⚠ Notice:**
272-
> Be cautious with globally shared coalescing scopes. It could lead to unwanted behaviour and loss of updates when used incorrectly.
272+
> Be cautious with globally shared coalescing scopes. It could lead to unwanted behavior and loss of updates when used incorrectly.
273273
274274
![coalesceWith - multiple components with global scope](https://raw.githubusercontent.com/rx-angular/rx-angular/main/libs/cdk/coalescing/docs/images/rx-angular-cdk-coalescing__coalesceWith-on-component-global-scope.png)
275275

@@ -301,7 +301,7 @@ The example below shows multiple components rendering the same or parts of the s
301301

302302
**The different usages are as follows:**
303303

304-
- As operator in the compomponent class
304+
- As operator in the component class
305305
- As pipe in the component's template
306306
- As structural directive in the component's template
307307

‎apps/docs/docs/cdk/coercing/coercing.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ Another type where we also can apply coercing is the `Observable` type.
5656

5757
In practice you can apply this technique in 2 ways:
5858

59-
- **explicitly** e.g. `Number(string)` coercres a string to a number
60-
- **implicitely** e.g. `!!string` coerces a string to a boolean
59+
- **explicitly** e.g. `Number(string)` coerces coerce a string to a number
60+
- **implicitly** e.g. `!!string` coerces a string to a boolean
6161

62-
In general when we apply those techniques our code base starts to maintain repetative patterns which either bloten up the codebase or just makes it harder to read.
62+
In general when we apply those techniques our code base starts to maintain repetitive patterns which either bloten up the codebase or just makes it harder to read.
6363

6464
As an example let's look at this snippet of code here:
6565

@@ -68,16 +68,16 @@ const num =
6868
!isNaN(parseFloat(valueFromInput)) && !isNaN(Number(valueFromInput));
6969
```
7070

71-
Because we receive the value from an input the type is always string. We have to care every time the when we want to pass the value to get a propper number type of it.
71+
Because we receive the value from an input the type is always string. We have to care every time the when we want to pass the value to get a proper number type of it.
7272

7373
Furthermore, in version 10 of Angular the team announced strict type checking as opt-in configuration.
74-
Since then, developers where encurraged to match the types exaclty. This especially needs attention when it comes to templates.
74+
Since then, developers where encouraged to match the types exactly. This especially needs attention when it comes to templates.
7575

7676
For this very reason the team later on shipped a sub package under the Angular CDK to provide some helpers for the important cases.
77-
The included helpers can be used whenever coercing is needed to obtain a propper value.
77+
The included helpers can be used whenever coercing is needed to obtain a proper value.
7878

79-
RxAngular also spotted a often used pattern of cosercing.
80-
When trying out the different reactive architectures we realized for a nice to use mix of reactive and imperative programming we needed to accept statis values as well as Observables on many places.
79+
RxAngular also spotted a often used pattern of coercing.
80+
When trying out the different reactive architectures we realized for a nice to use mix of reactive and imperative programming we needed to accept static values as well as Observables on many places.
8181

8282
A common scenario would be to pass an Observable as input binding of components or directives to bypass changes from change detection.
8383

@@ -138,7 +138,7 @@ yarn add @rx-angular/cdk
138138

139139
### Usage
140140

141-
In the following we will sketch some usecases where coercing operators can be used.
141+
In the following we will sketch some use cases where coercing operators can be used.
142142

143143
**coerceObservable**
144144

@@ -226,12 +226,12 @@ To get a quick understanding of the difference of an first-order and higher-orde
226226
![rxjs_order-of-observables_michael-hladky](https://user-images.githubusercontent.com/10064416/129426892-64ff26e7-3271-412f-ba29-b7bd940ff0d3.png)
227227

228228
As we can see the upper half of the image represents a stream of single values, where the lower part represents a stream of streams of single values.
229-
The order (first, second, thrid) is determined by the level of "nesting" of the streams.
229+
The order (first, second, third) is determined by the level of "nesting" of the streams.
230230

231231
Where the above operators where solving only the coercing to observables, the factory here helps to process them.
232232

233-
The question to answer here is if we receive a series of observables, how do we deat with all the streams?
234-
Should we merge them all togeather aor should we stop the previouse and start the new one? Or should we even queu them up?
233+
The question to answer here is if we receive a series of observables, how do we dealt with all the streams?
234+
Should we merge them all together aor should we stop the previous and start the new one? Or should we even queue them up?
235235

236236
A minimal implementation if it would look like this:
237237

@@ -253,10 +253,10 @@ export class AppComponent {
253253
}
254254
```
255255

256-
Here we apply the `switchAll` operator to unsubscribe the previouse observable and subscribe to the new one.
256+
Here we apply the `switchAll` operator to unsubscribe the previous observable and subscribe to the new one.
257257
![switchAll](https://user-images.githubusercontent.com/10064416/129447011-ca4fb691-faa7-4a58-b7fb-8f64ec249729.png)
258258

259-
by using the `coerceAllFactory` function we can compose this pattern with less code and still have the option to decide on the way of compostion.
259+
by using the `coerceAllFactory` function we can compose this pattern with less code and still have the option to decide on the way of composition.
260260

261261
```typescript
262262
@Component({

‎apps/docs/docs/cdk/render-strategies/render-strategies.mdx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ yarn add @rx-angular/cdk
5353

5454
## Motivation
5555

56-
Angulars change detection is pull-based and implicit.
56+
Angular's change detection is pull-based and implicit.
5757
This affects not only the performance but also forces us into specific ways of architecting and thinking.
5858

5959
Render strategies serve as the core of the new change detection system.
@@ -74,12 +74,12 @@ This architecture enables modern features like:
7474
- [x] Render Callback
7575
- [x] Performance best practices as default
7676

77-
`@rx-angular/cdk` comes preconfigured with two sets of strategies.
77+
`@rx-angular/cdk` comes pre-configured with two sets of strategies.
7878

7979
**BasicStrategies**
8080

8181
[BasicStrategies](strategies/basic-strategies.md) wrap modern ivy APIs like `ɵmarkDirty` and `ɵdetectChanges` as well as a strategy to "noop" change detection.
82-
As a fallback for the migration process or comparison testing, Angulars default change detection behaviour is also provided as a strategy.
82+
As a fallback for the migration process or comparison testing, Angular's default change detection behavior is also provided as a strategy.
8383

8484
This set aims to get the first option for zone-less rendering (`ɵmarkDirty`), more control on the top-down process, and improve performance drastically by only rendering components that received updates.
8585

@@ -149,14 +149,14 @@ yarn add @rx-angular/cdk
149149

150150
## Configuration
151151

152-
By default, RxAngular render strategies are preconfigured in a way they are still way more performant than native Angular but focusing on being as non-breaking as possible.
152+
By default, RxAngular render strategies are pre-configured in a way they are still way more performant than native Angular but focusing on being as non-breaking as possible.
153153
In the majority of cases, you can just drop in the new features, and everything works as before.
154154

155155
You can then partially enable more performance features of RxAngular.
156156

157-
Configurations are done with Angular best practies and based on `InjectionToken`'s.
157+
Configurations are done with Angular best practices and based on `InjectionToken`'s.
158158

159-
> As all configurtion are controlled by `RxStrategyProvider`, an Angular service, we can apply
159+
> As all configuration are controlled by `RxStrategyProvider`, an Angular service, we can apply
160160
> all knowledge of Angular DI on global and local level including all life cycles.
161161
162162
We can configure on the following levels:
@@ -335,7 +335,7 @@ Again, `RxStrategyProvider` needs to get imported, and the scheduling APIs needs
335335

336336
```typescript
337337
@Injectable({
338-
profidedIn: 'root',
338+
providedIn: 'root',
339339
})
340340
export class AnyService {
341341
constructor(

‎apps/docs/docs/cdk/render-strategies/strategies/basic-strategies.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ In a simple setup the pull might be a quick solution and you just `.get()` the v
7474

7575
Compare it with HTTP calls vs WebSockets.
7676

77-
If we apply this concepts to our change detection mechanics we can directly apply changes where they are needd and skip nearly all the unnessecary work.
77+
If we apply this concepts to our change detection mechanics we can directly apply changes where they are need and skip nearly all the unnecessary work.
7878

7979
In combination with Observables, and EmbeddedViews change detection can be speed up dramatically by this architecture.
8080

0 commit comments

Comments
 (0)