feat: upgrade to Angular 17, add selectSignal

ngxs · Dec 1, 2023 · 9813a74 · 9813a74
1 parent 0fd1fe5
commit 9813a74
Show file tree

Hide file tree

Showing 107 changed files with 3,475 additions and 11,380 deletions.
diff --git a/.bundlemonrc.integration.json b/.bundlemonrc.integration.json
@@ -15,7 +15,5 @@
       "maxPercentIncrease": 1
     }
   ],
-  "reportOutput": [
-    "github"
-  ]
-}
+  "reportOutput": ["github"]
+}
diff --git a/.bundlemonrc.json b/.bundlemonrc.json
@@ -101,7 +101,5 @@
       "compression": "gzip"
     }
   ],
-  "reportOutput": [
-    "github"
-  ]
-}
+  "reportOutput": ["github"]
+}
diff --git a/.bundlemonrc.plugins.json b/.bundlemonrc.plugins.json
@@ -116,7 +116,5 @@
       "compression": "gzip"
     }
   ],
-  "reportOutput": [
-    "github"
-  ]
-}
+  "reportOutput": ["github"]
+}
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -137,22 +137,6 @@ jobs:
           name: Run integration tests for the SSR build application
           command: yarn test:ci:integration:ssr
 
-  integration_ng15_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      # https://github.com/CircleCI-Public/browser-tools-orb/issues/75
-      - browser-tools/install-browser-tools:
-          chrome-version: '116.0.5845.96'
-          replace-existing-chrome: true
-      - run:
-          name: Run integration tests for ng15 application
-          command: yarn integration:ng15
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng15/dist-integration
-
   integration_ng16_tests:
     <<: *job_defaults
     steps:

diff --git a/.github/actions/download-integration-test-artifacts/action.yml b/.github/actions/download-integration-test-artifacts/action.yml
@@ -7,7 +7,7 @@
 # - ./.github/actions/download-integration-test-artifacts
 
 name: download-integration-test-artifact
-description: Downloads all integration test artifacts with names such as 'hello-world-ng15'.
+description: Downloads all integration test artifacts with names such as 'hello-world-ng16'.
 
 inputs:
   path:
@@ -18,8 +18,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - name: Download hello-world-ng15 artifacts
+    - name: Download hello-world-ng16 artifacts
       uses: actions/download-artifact@v3
       with:
-        name: hello-world-ng15
+        name: hello-world-ng16
         path: ${{ inputs.path }}
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -51,7 +51,6 @@ runs:
           ~/.cache
           ./node_modules
           ./@ngxs
-          ./integrations/hello-world-ng15/dist-integration
           ./integrations/hello-world-ng16/dist-integration
           ./integrations/hello-world-ng17/dist-integration
         key: ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-${{ inputs.github-sha }}

diff --git a/.github/actions/upload-integration-test-artifact/action.yml b/.github/actions/upload-integration-test-artifact/action.yml
@@ -7,11 +7,11 @@
 # - ./.github/actions/upload-integration-test-artifact
 
 name: upload-integration-test-artifact
-description: Upload an integration test artifact with a name such as 'hello-world-ng15'.
+description: Upload an integration test artifact with a name such as 'hello-world-ng16'.
 
 inputs:
   script:
-    description: A script with a name such as 'integration:ng15' that generates an integration test artifact.
+    description: A script with a name such as 'integration:ng16' that generates an integration test artifact.
     required: true
 
 runs:
@@ -21,7 +21,7 @@ runs:
       id: artifact-name
       shell: bash
       run: |
-        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng15"
+        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng16"
         echo "value=$(echo ${SCRIPT} | sed -r "s/:/-/g" | sed -r "s/integration/hello-world/g")" >> $GITHUB_OUTPUT
       env:
         SCRIPT: ${{ inputs.script }}

diff --git a/.gitignore b/.gitignore
@@ -68,3 +68,5 @@ yarn-error.log
 package-lock.json
 dist-integration-server/
 .cache
+migrations.json
+.nx/cache
diff --git a/.prettierignore b/.prettierignore
@@ -10,3 +10,5 @@ build/**
 coverage/**
 @ngxs/**
 **/dist/**
+
+/.nx/cache
diff --git a/README.md b/README.md
@@ -138,11 +138,11 @@ If you have ideas for creating unique libraries, you can join us. Email us at `n
 
 #### Community
 
-| Project                 | Package                                                                    | Version                                                                                                                     | Links                                                                                                                             |
-| ----------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| **Reset Plugin**        | [`ngxs-reset-plugin`](https://npmjs.com/package/ngxs-reset-plugin)         | [![latest](https://img.shields.io/npm/v/ngxs-reset-plugin/latest.svg)](https://npmjs.com/package/ngxs-reset-plugin)         | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/ng-turkey/ngxs-reset-plugin/blob/master/README.md) |
-| **NGXS-Loading-plugin** | [`ngxs-loading-plugin`](https://www.npmjs.com/package/ngxs-loading-plugin) | [![latest](https://img.shields.io/npm/v/ngxs-loading-plugin/latest.svg)](https://www.npmjs.com/package/ngxs-loading-plugin) | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/sa-bangash/ngxs-plugin/blob/master/README.md)      |
-| **NGXS-History-plugin** | [`ngxs-history-plugin`](https://www.npmjs.com/package/ngxs-history-plugin) | [![latest](https://img.shields.io/npm/v/ngxs-history-plugin/latest.svg)](https://www.npmjs.com/package/ngxs-history-plugin) | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/profanis/ngxs-history-plugin/blob/main/projects/ngxs-history-plugin/README.md)      |
+| Project                 | Package                                                                    | Version                                                                                                                     | Links                                                                                                                                                         |
+| ----------------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Reset Plugin**        | [`ngxs-reset-plugin`](https://npmjs.com/package/ngxs-reset-plugin)         | [![latest](https://img.shields.io/npm/v/ngxs-reset-plugin/latest.svg)](https://npmjs.com/package/ngxs-reset-plugin)         | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/ng-turkey/ngxs-reset-plugin/blob/master/README.md)                             |
+| **NGXS-Loading-plugin** | [`ngxs-loading-plugin`](https://www.npmjs.com/package/ngxs-loading-plugin) | [![latest](https://img.shields.io/npm/v/ngxs-loading-plugin/latest.svg)](https://www.npmjs.com/package/ngxs-loading-plugin) | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/sa-bangash/ngxs-plugin/blob/master/README.md)                                  |
+| **NGXS-History-plugin** | [`ngxs-history-plugin`](https://www.npmjs.com/package/ngxs-history-plugin) | [![latest](https://img.shields.io/npm/v/ngxs-history-plugin/latest.svg)](https://www.npmjs.com/package/ngxs-history-plugin) | [![README](https://img.shields.io/badge/README--green.svg)](https://github.com/profanis/ngxs-history-plugin/blob/main/projects/ngxs-history-plugin/README.md) |
 
 # Contributors
 

diff --git a/docs/advanced/selector-utils.md b/docs/advanced/selector-utils.md
@@ -17,7 +17,7 @@ Let's start with a common example. Here we have a small state containing animals
 
 ```ts
 import { Injectable } from '@angular/core';
-import { Selector,State } from '@ngxs/store';
+import { Selector, State } from '@ngxs/store';
 
 export interface AnimalsStateModel {
   zebras: string[];
@@ -30,8 +30,8 @@ export interface AnimalsStateModel {
   defaults: {
     zebras: [],
     pandas: [],
-    monkeys: [],
-  },
+    monkeys: []
+  }
 })
 @Injectable()
 export class AnimalsState {}

diff --git a/docs/plugins/devtools.md b/docs/plugins/devtools.md
@@ -27,7 +27,7 @@ import { NgxsModule } from '@ngxs/store';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 
 @NgModule({
-  imports: [NgxsModule.forRoot([]), NgxsReduxDevtoolsPluginModule.forRoot()],
+  imports: [NgxsModule.forRoot([]), NgxsReduxDevtoolsPluginModule.forRoot()]
 })
 export class AppModule {}
 ```

diff --git a/docs/plugins/router.md b/docs/plugins/router.md
@@ -97,9 +97,7 @@ import { RouterDataResolved } from '@ngxs/router-plugin';
 import { map } from 'rxjs/operators';
 
 @Component({
-  template: `
-    <app-some-component [data]="data$ | async"></app-some-component>
-  `
+  template: ` <app-some-component [data]="data$ | async"></app-some-component> `
 })
 export class AppComponent {
   data$ = this.actions$.pipe(

diff --git a/docs/recipes/component-events-from-ngxs.md b/docs/recipes/component-events-from-ngxs.md
@@ -81,9 +81,8 @@ export class LoadBooks {
 
 export class BooksState {
   static getBooks(genre: Genre) {
-    return createSelector(
-      [BooksState],
-      (books: Book[]) => books.filter(book => book.genre === genre)
+    return createSelector([BooksState], (books: Book[]) =>
+      books.filter(book => book.genre === genre)
     );
   }
 }

diff --git a/docs/recipes/module-federation.md b/docs/recipes/module-federation.md
@@ -14,29 +14,36 @@ For this purpose, the dependencies are specified in the shared object in `webpac
 
 ```js
 plugins: [
-    new ModuleFederationPlugin({
-
-      name: "mfOne",
-      filename: "remoteEntry.js",
-      exposes: {
-        './mfModuleX': './apps/mfOne/src/app/x/x.module.ts',
-        './mfModuleY': './apps/mfOne/src/app/y/y.module.ts',
+  new ModuleFederationPlugin({
+    name: 'mfOne',
+    filename: 'remoteEntry.js',
+    exposes: {
+      './mfModuleX': './apps/mfOne/src/app/x/x.module.ts',
+      './mfModuleY': './apps/mfOne/src/app/y/y.module.ts'
+    },
+
+    shared: share({
+      '@angular/core': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+      '@angular/common': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+      '@angular/common/http': {
+        singleton: true,
+        strictVersion: true,
+        requiredVersion: 'auto'
       },
-
-      shared: share({
-        "@angular/core": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
-        "@angular/common": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
-        "@angular/common/http": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
-        "@angular/router": {singleton: true, strictVersion: true, requiredVersion: 'auto'},
-        "@ngxs/devtools-plugin": {singleton: true, strictVersion: true, requiredVersion: '3.7.2'},
-        "@ngxs/store": {singleton: true, strictVersion: true, requiredVersion: '3.7.2'},
-        "rxjs": {singleton: true, strictVersion: true, requiredVersion: '6.6.7'},
-
-        ...sharedMappings.getDescriptors()
-      })
-    }),
-    sharedMappings.getPlugin()
-  ]
+      '@angular/router': { singleton: true, strictVersion: true, requiredVersion: 'auto' },
+      '@ngxs/devtools-plugin': {
+        singleton: true,
+        strictVersion: true,
+        requiredVersion: '3.7.2'
+      },
+      '@ngxs/store': { singleton: true, strictVersion: true, requiredVersion: '3.7.2' },
+      rxjs: { singleton: true, strictVersion: true, requiredVersion: '6.6.7' },
+
+      ...sharedMappings.getDescriptors()
+    })
+  }),
+  sharedMappings.getPlugin()
+];
 ```
 
 ## Into libraries

diff --git a/integration/app/app-browser.config.ts b/integration/app/app-browser.config.ts
@@ -1,9 +1,8 @@
-import { ApplicationConfig } from '@angular/platform-browser';
+import { mergeApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
 import { appConfig } from './app.config';
 
-// TODO: use `mergeApplicationConfig` in v16.
-export const appBrowserConfig: ApplicationConfig = {
-  providers: [provideAnimations(), ...appConfig.providers]
-};
+export const appBrowserConfig = mergeApplicationConfig(appConfig, {
+  providers: [provideAnimations()]
+});
diff --git a/integration/app/app-server.config.ts b/integration/app/app-server.config.ts
@@ -1,9 +1,8 @@
-import { ApplicationConfig } from '@angular/platform-browser';
-import { provideNoopAnimations } from '@angular/platform-browser/animations';
+import { mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
 
 import { appConfig } from './app.config';
 
-// TODO: use `mergeApplicationConfig` in v16.
-export const appServerConfig: ApplicationConfig = {
-  providers: [provideNoopAnimations(), ...appConfig.providers]
-};
+export const appBrowserConfig = mergeApplicationConfig(appConfig, {
+  providers: [provideServerRendering()]
+});
diff --git a/integration/app/app.component.html b/integration/app/app.component.html
@@ -1,7 +1,7 @@
 <div class="todo-list">
   <div>
     <h3>Reactive Form</h3>
-    <p>{{ injected$ | async }}</p>
+    <p>{{ injected() }}</p>
     <form [formGroup]="pizzaForm" novalidate (ngSubmit)="onSubmit()" ngxsForm="todos.pizza">
       Toppings: <input type="text" formControlName="toppings" /> <br />
       Crust <input type="text" formControlName="crust" /> <br />
@@ -23,10 +23,10 @@ <h3>Todo Form</h3>
     <input placeholder="New Todo" #text /> <button (click)="addTodo(text.value)">Add</button>
   </div>
   <ul>
-    <li class="todo" *ngFor="let todo of todos$ | async; let i = index">
+    <li class="todo" *ngFor="let todo of todos(); let i = index">
       {{ todo }} <button (click)="removeTodo(i)">🗑</button>
     </li>
-    <li *ngFor="let todo of pandas$ | async">🐼</li>
+    <li *ngFor="let todo of pandas()">🐼</li>
   </ul>
 
   <div class="menu">