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

Skip to content

Commit 2e95fe2

Browse files
niklaasniklaas
authored
Merge branch 'rx-angular:main' into niklaas/cdk-strict-mode
2 parents c7086ba + 1d6c77f commit 2e95fe2

File tree

461 files changed

+18154
-18814
lines changed

Some content is hidden

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

461 files changed

+18154
-18814
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.eslintrc.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"root": true,
33
"ignorePatterns": ["**/*"],
4-
"plugins": ["@nrwl/nx"],
4+
"plugins": ["@nx"],
55
"overrides": [
66
{
77
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
88
"rules": {
9-
"@nrwl/nx/enforce-module-boundaries": [
9+
"@nx/enforce-module-boundaries": [
1010
"error",
1111
{
1212
"enforceBuildableLibDependency": true,
@@ -38,7 +38,7 @@
3838
"extends": [
3939
"prettier",
4040
"eslint:recommended",
41-
"plugin:@nrwl/nx/typescript",
41+
"plugin:@nx/typescript",
4242
"plugin:@angular-eslint/recommended",
4343
"plugin:@typescript-eslint/recommended"
4444
],
@@ -61,7 +61,7 @@
6161
"extends": [
6262
"prettier",
6363
"plugin:@angular-eslint/template/recommended",
64-
"plugin:@nrwl/nx/javascript"
64+
"plugin:@nx/javascript"
6565
],
6666
"rules": {
6767
"@typescript-eslint/no-non-null-assertion": "off"

‎.github/actions/setup/action.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ inputs:
44
node-version:
55
description: Node.js version
66
required: false
7-
default: '14'
7+
default: '18.15.0' # latest working version for our CI
88
runs:
99
using: composite
1010
steps:

‎.github/workflows/build-and-test.yml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ jobs:
114114
- name: Run Affected e2e
115115
run: yarn nx affected:e2e --max-parallel=1
116116

117+
# component test: no clue about parallelism here
118+
- name: Run Affected component tests
119+
run: yarn nx affected -t component-test --parallel=false
120+
117121
- name: Stop Nx Cloud DTE agents
118122
if: ${{ always() }}
119123
run: yarn nx-cloud stop-all-agents
@@ -166,9 +170,6 @@ jobs:
166170
fetch-depth: 0
167171
- name: Set up dependencies
168172
uses: ./.github/actions/setup
169-
with:
170-
# Docusaurus needs Node.js 16
171-
node-version: 16
172173

173174
- name: Build docs
174175
env:

‎README.md

Lines changed: 90 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,95 @@
1-
[![rx-angular logo](https://raw.githubusercontent.com/rx-angular/rx-angular/main/docs/images/rx-angular_logo.png)](https://rx-angular.io/)
1+
[![RxAngular logo](https://raw.githubusercontent.com/rx-angular/rx-angular/main/docs/images/rx-angular_logo.png)](https://rx-angular.io/)
22

3-
# RxAngular ![rx-angular CI](https://github.com/rx-angular/rx-angular/workflows/rx-angular%20CI/badge.svg?branch=main)
3+
# RxAngular ![RxAngular CI](https://github.com/rx-angular/rx-angular/workflows/rx-angular%20CI/badge.svg?branch=main)
44

5-
RxAngular offers a comprehensive toolset for handling fully reactive Angular applications with the main focus on runtime
6-
performance and template rendering.
5+
> RxAngular offers a comprehensive toolkit for handling fully reactive Angular applications with the main focus on runtime performance, template rendering, and Developer eXperience.
76
8-
RxAngular is divided into different packages:
7+
## Packages
8+
9+
RxAngular is made up of different packages that work together or standalone.
10+
11+
| Package | Description | Version |
12+
| --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
13+
| [@rx-angular/state](https://rx-angular.io/docs/state) | A powerful state management library, providing a fully reactive way to manage state in components and services. | [![npm](https://img.shields.io/npm/v/%40rx-angular%2Fstate.svg)](https://www.npmjs.com/package/%40rx-angular%2Fstate) |
14+
| [@rx-angular/template](https://rx-angular.io/docs/template) | A set of directives and pipes designed for high-performance and non-blocking rendering for large-scale applications. | [![npm](https://img.shields.io/npm/v/%40rx-angular%2Ftemplate.svg)](https://www.npmjs.com/package/%40rx-angular%2Ftemplate) |
15+
| [@rx-angular/cdk](https://rx-angular.io/docs/cdk) | A Component Development Kit for high-performance and ergonomic Angular UI libs and large-scale applications. | [![npm](https://img.shields.io/npm/v/%40rx-angular%2Fcdk.svg)](https://www.npmjs.com/package/%40rx-angular%2Fcdk) |
16+
| [@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin) | A set of ESLint rules for building reactive, performant, and zone-less Angular applications. | [![npm](https://img.shields.io/npm/v/%40rx-angular%2Feslint-plugin.svg)](https://www.npmjs.com/package/%40rx-angular%2Feslint-plugin) |
17+
18+
This repository holds a set of helpers that are aiming to provide:
19+
20+
- fully reactive applications
21+
- fully or partially zone-less applications
22+
- high-performance and non-blocking rendering
23+
24+
## Getting Started
25+
26+
### Using `@rx-angular/template`
927

10-
- [📦@rx-angular/state](https://rx-angular.io/docs/state)
11-
- [📦@rx-angular/template](https://rx-angular.io/docs/template)
12-
- [📦@rx-angular/cdk](https://rx-angular.io/docs/cdk)
13-
- [📦@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin)
28+
This is an example of how to use the `*rxLet` directive to bind an Observable value to the template. In this example, the component defines a property `time$`, which is an Observable that emits a value every second using the `timer` operator. The emitted values are mapped to the current time string using the `map` operator which is then displayed in the template using `*rxLet`.
1429

15-
Used together, you get a powerful tool for developing high-performance angular applications with or without NgZone.
30+
```ts
31+
@Component({
32+
selector: 'app-time',
33+
standalone: true,
34+
imports: [LetDirective],
35+
template: `
36+
<ng-container *rxLet="time$; let value">
37+
{{ value }}
38+
</ng-container>
39+
`,
40+
})
41+
export class TimeComponent {
42+
time$ = timer(0, 1000).pipe(map(() => new Date().toTimeString()));
43+
}
44+
```
1645

17-
This repository holds a set of helpers to create **fully reactive** as well as **fully zone-less** applications.
46+
To learn more about @rx-angular/template and its capabilities, check out the official documentation at [https://rx-angular.io/docs/template](https://rx-angular.io/docs/template).
1847

19-
## Benefits
48+
### Using `@rx-angular/state`
2049

21-
- 🔥 It's fast & performance focused: exceptional runtime speed & small bundle size
22-
- ✔ Easy upgrade paths: migration scripts included since beta! `ng update @rx-angular/{cdk | template | state}`
23-
- ✔ Lean and simple: No boilerplate guaranteed
24-
- ✔ Well typed and tested
25-
- ✔ Backwards compatible: support for Angular > v11
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.
51+
52+
```ts
53+
interface CounterState {
54+
count: number;
55+
}
56+
57+
interface CounterActions {
58+
increment: void;
59+
decrement: void;
60+
}
61+
62+
@Component({
63+
selector: 'app-counter',
64+
standalone: true,
65+
imports: [PushPipe],
66+
template: `
67+
<p>Count: {{ count$ | push }}</p>
68+
<button (click)="actions.increment()">Increment</button>
69+
<button (click)="actions.decrement()">Decrement</button>
70+
`,
71+
providers: [RxState, RxActionFactory],
72+
})
73+
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) => ({
83+
count: state.count + 1,
84+
}));
85+
this.state.connect(this.actions.decrement$, (state) => ({
86+
count: state.count - 1,
87+
}));
88+
}
89+
}
90+
```
91+
92+
To learn more about @rx-angular/state and its capabilities, check out the official documentation at [https://rx-angular.io/docs/state](https://rx-angular.io/docs/state).
2693

2794
## Used by
2895

@@ -57,12 +124,12 @@ This repository holds a set of helpers to create **fully reactive** as well as *
57124

58125
- [📚 Official docs](https://www.rx-angular.io/)
59126
- [![Discord](https://icongr.am/material/discord.svg?size=16&color=7289da) Discord channel](https://discord.com/invite/XWWGZsQ)
127+
- [![Slack](https://icongr.am/material/slack.svg?size=16&color=7289da) Slack](https://join.slack.com/t/rxangular/shared_invite/zt-1tn1hivnp-FemQzop69HI7~wlPSqDjKQ)
60128

61-
## Packages
129+
## Contributing
130+
131+
We welcome contributions from the community to help improve RxAngular! To get started, please take a look at our contribution guidelines in the [CONTRIBUTING.md](CONTRIBUTING.md) file. We appreciate your help in making RxAngular better for everyone.
62132

63-
Find details in the links to the official docs below for installation and setup instructions, examples and resources.
133+
## License
64134

65-
- [📦@rx-angular/state](https://rx-angular.io/docs/state) - Imperative & Reactive Component State-Management
66-
- [📦@rx-angular/template](https://rx-angular.io/docs/template) - High-Performance Non-Blocking Rendering
67-
- [📦@rx-angular/cdk](https://rx-angular.io/docs/cdk) - Component Development Kit
68-
- [📦@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin) - ESLint Plugin
135+
This project is MIT licensed.

‎apps/demos/jest.config.js renamed to ‎apps/demos/jest.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
module.exports = {
1+
/* eslint-disable */
2+
export default {
23
preset: '../../jest.preset.js',
34
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
45
globals: {

‎apps/demos/project.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
2+
"name": "demos",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
24
"projectType": "application",
35
"generators": {
46
"@schematics/angular:component": {
57
"style": "css"
68
}
79
},
8-
"root": "apps/demos",
910
"sourceRoot": "apps/demos/src",
1011
"prefix": "rxa",
1112
"targets": {
@@ -111,12 +112,12 @@
111112
}
112113
},
113114
"test": {
114-
"executor": "@nrwl/jest:jest",
115+
"executor": "@nx/jest:jest",
115116
"options": {
116-
"jestConfig": "apps/demos/jest.config.js",
117+
"jestConfig": "apps/demos/jest.config.ts",
117118
"passWithNoTests": true
118119
},
119-
"outputs": ["coverage/apps/demos"]
120+
"outputs": ["{workspaceRoot}/coverage/apps/demos"]
120121
}
121122
},
122123
"tags": ["type:app"]

‎apps/demos/src/app/app-component/app-component.module.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ import { AppShellModule } from '../app-shell';
66
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
77
import { MatSidenavModule } from '@angular/material/sidenav';
88
import { MatToolbarModule } from '@angular/material/toolbar';
9-
import { MatListModule } from '@angular/material/list';
9+
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
1010
import { MatIconModule } from '@angular/material/icon';
1111
import { RouterModule } from '@angular/router';
1212
import { ROUTES } from './app.routes';
1313
import { DirtyChecksModule } from '../shared/debug-helper/dirty-checks';
1414
import { AppControlPanelModule } from './app-control-panel/';
1515

16-
1716
@NgModule({
1817
imports: [
1918
BrowserModule,
@@ -24,13 +23,12 @@ import { AppControlPanelModule } from './app-control-panel/';
2423
MatListModule,
2524
MatIconModule,
2625
AppShellModule,
27-
RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'legacy' }),
26+
RouterModule.forRoot(ROUTES, {}),
2827
DirtyChecksModule,
29-
AppControlPanelModule
28+
AppControlPanelModule,
3029
],
3130
declarations: [AppComponent],
3231
exports: [],
33-
bootstrap: [AppComponent]
32+
bootstrap: [AppComponent],
3433
})
35-
export class AppComponentModule {
36-
}
34+
export class AppComponentModule {}

‎apps/demos/src/app/app-component/app-control-panel/app-control-panel.module.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { AppControlPanelComponent } from './app-control-panel.component';
44
import { MatExpansionModule } from '@angular/material/expansion';
5-
import { MatChipsModule } from '@angular/material/chips';
5+
import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
66
import { MatIconModule } from '@angular/material/icon';
77
import { ReactiveFormsModule } from '@angular/forms';
8-
import { MatFormFieldModule } from '@angular/material/form-field';
9-
import { MatSelectModule } from '@angular/material/select';
10-
import { MatButtonModule } from '@angular/material/button';
11-
import { MatListModule } from '@angular/material/list';
12-
import { LetModule } from '@rx-angular/template/let';
13-
import { MatCheckboxModule } from '@angular/material/checkbox';
8+
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
9+
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
10+
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
11+
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
12+
import { RxLet } from '@rx-angular/template/let';
13+
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
1414
import { StrategySelectModule } from '../../shared/debug-helper/strategy-select';
15-
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
15+
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
1616

1717
@NgModule({
1818
declarations: [AppControlPanelComponent],
@@ -25,12 +25,12 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
2525
MatFormFieldModule,
2626
MatSelectModule,
2727
MatButtonModule,
28-
LetModule,
28+
RxLet,
2929
MatListModule,
3030
MatCheckboxModule,
3131
StrategySelectModule,
32-
MatSlideToggleModule
32+
MatSlideToggleModule,
3333
],
34-
exports: [AppControlPanelComponent]
34+
exports: [AppControlPanelComponent],
3535
})
36-
export class AppControlPanelModule { }
36+
export class AppControlPanelModule {}

‎apps/demos/src/app/app-shell/app-shell.module.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { CdkTreeModule } from '@angular/cdk/tree';
22
import { CommonModule } from '@angular/common';
33
import { NgModule } from '@angular/core';
4-
import { MatButtonModule } from '@angular/material/button';
4+
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
55
import { MatIconModule } from '@angular/material/icon';
6-
import { MatListModule } from '@angular/material/list';
7-
import { MatSelectModule } from '@angular/material/select';
6+
import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
7+
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
88
import { MatSidenavModule } from '@angular/material/sidenav';
99
import { MatToolbarModule } from '@angular/material/toolbar';
1010
import { RouterModule } from '@angular/router';
@@ -17,7 +17,7 @@ import { AppShellComponent } from './app-shell-component/app-shell.component';
1717
import { AppShellSideNavItemDirective } from './side-nav/side-nav-item.directive';
1818
import { AppShellSideNavComponent } from './side-nav/side-nav.component';
1919
import { RxLetModule } from '../rx-angular-pocs/template/directives/let';
20-
import { IfModule } from '@rx-angular/template/if';
20+
import { RxIf } from '@rx-angular/template/if';
2121

2222
const exportedDeclarations = [
2323
AppShellHeaderContent,
@@ -40,7 +40,7 @@ const exportedDeclarations = [
4040
MatSelectModule,
4141
CdkTreeModule,
4242
RxLetModule,
43-
IfModule,
43+
RxIf,
4444
],
4545
exports: exportedDeclarations,
4646
})

‎apps/demos/src/app/features/concepts/coalescing/coalescing.module.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { RouterModule } from '@angular/router';
4-
import { PushModule } from '@rx-angular/template/push';
5-
import { UnpatchModule } from '@rx-angular/template/unpatch';
4+
import { RxPush } from '@rx-angular/template/push';
5+
import { RxUnpatch } from '@rx-angular/template/unpatch';
66

77
import { ROUTES } from './coalescing.routes';
88
import { CoalescingComponent } from './coalescing/coalescing.component';
9-
import { MatButtonModule } from '@angular/material/button';
9+
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
1010
import { VisualizerModule } from '../../../shared/debug-helper/visualizer';
1111
import { StrategySelectModule } from '../../../shared/debug-helper/strategy-select';
1212

@@ -19,9 +19,9 @@ const DECLARATIONS = [CoalescingComponent];
1919
RouterModule.forChild(ROUTES),
2020
VisualizerModule,
2121
StrategySelectModule,
22-
UnpatchModule,
22+
RxUnpatch,
2323
MatButtonModule,
24-
PushModule,
24+
RxPush,
2525
],
2626
providers: [],
2727
exports: [DECLARATIONS],

‎apps/demos/src/app/features/concepts/global-order/native-v/native-v.module.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import { V1CComponent } from './v1-c.component';
99
import { V1EComponent } from './v1-e.component';
1010
import { V1FComponent } from './v1-f.component';
1111
import { V1HComponent } from './v1-h.component';
12-
import { MatButtonModule } from '@angular/material/button';
13-
12+
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
1413

1514
@NgModule({
1615
declarations: [
@@ -27,10 +26,8 @@ import { MatButtonModule } from '@angular/material/button';
2726
VisualizerModule,
2827
SharedModule,
2928
MatButtonModule,
30-
VisualizerModule
29+
VisualizerModule,
3130
],
32-
exports: [
33-
V1AComponent
34-
]
31+
exports: [V1AComponent],
3532
})
36-
export class NativeVModule { }
33+
export class NativeVModule {}

0 commit comments

Comments
 (0)