From 9813a74aca1ed4f5a0b57b97118e8392858a442b Mon Sep 17 00:00:00 2001 From: arturovt Date: Thu, 2 Nov 2023 23:18:24 +0200 Subject: [PATCH] feat: upgrade to Angular 17, add `selectSignal` --- .bundlemonrc.integration.json | 6 +- .bundlemonrc.json | 6 +- .bundlemonrc.plugins.json | 6 +- .circleci/config.yml | 16 - .../action.yml | 6 +- .github/actions/setup/action.yml | 1 - .../action.yml | 6 +- .gitignore | 2 + .prettierignore | 2 + README.md | 10 +- docs/advanced/selector-utils.md | 6 +- docs/plugins/devtools.md | 2 +- docs/plugins/router.md | 4 +- docs/recipes/component-events-from-ngxs.md | 5 +- docs/recipes/module-federation.md | 51 +- integration/app/app-browser.config.ts | 9 +- integration/app/app-server.config.ts | 11 +- integration/app/app.component.html | 6 +- integration/app/app.component.spec.ts | 66 +- integration/app/app.component.ts | 17 +- integration/app/app.config.ts | 5 +- .../app/counter/counter.component.html | 2 +- integration/app/counter/counter.component.ts | 5 +- integration/app/detail/detail.component.html | 2 +- integration/app/detail/detail.component.ts | 3 +- integration/app/list/list.component.html | 6 +- integration/app/list/list.component.ts | 7 +- integration/jest.config.js | 18 +- integration/project.json | 6 +- integrations/hello-world-ng15/.gitignore | 42 - integrations/hello-world-ng15/angular.json | 96 - .../hello-world-ng15/cypress.config.ts | 17 - .../cypress/e2e/index-page.cy.ts | 15 - .../cypress/fixtures/example.json | 5 - .../hello-world-ng15/cypress/plugins/index.js | 17 - .../hello-world-ng15/cypress/tsconfig.json | 11 - integrations/hello-world-ng15/karma.conf.js | 47 - integrations/hello-world-ng15/package.json | 62 - .../src/app/app.component.html | 4 - .../src/app/app.component.spec.ts | 30 - .../hello-world-ng15/src/app/app.component.ts | 17 - .../hello-world-ng15/src/app/app.module.ts | 19 - .../src/app/store/counter/counter.actions.ts | 3 - .../src/app/store/counter/counter.state.ts | 16 - .../hello-world-ng15/src/app/store/index.ts | 4 - .../src/app/store/store.module.ts | 24 - .../hello-world-ng15/src/assets/.gitkeep | 0 .../src/environments/environment.prod.ts | 3 - .../src/environments/environment.ts | 16 - integrations/hello-world-ng15/src/favicon.ico | Bin 948 -> 0 bytes integrations/hello-world-ng15/src/index.html | 13 - integrations/hello-world-ng15/src/main.ts | 7 - integrations/hello-world-ng15/src/styles.scss | 1 - .../hello-world-ng15/tsconfig.app.json | 10 - integrations/hello-world-ng15/tsconfig.json | 30 - .../hello-world-ng15/tsconfig.spec.json | 9 - integrations/hello-world-ng15/yarn.lock | 6994 ----------------- integrations/tempreponx | 1 - jest.config.js | 2 +- jest.preset.js | 4 +- nx.json | 41 +- package.json | 81 +- packages/devtools-plugin/jest.config.js | 16 +- packages/devtools-plugin/project.json | 16 +- .../tests/devtools-custom.spec.ts | 16 +- packages/form-plugin/jest.config.js | 16 +- packages/form-plugin/project.json | 16 +- packages/hmr-plugin/project.json | 16 +- packages/logger-plugin/project.json | 16 +- packages/router-plugin/jest.config.js | 16 +- packages/router-plugin/project.json | 16 +- .../issues/issue-1718-url-recognition.spec.ts | 4 +- .../router-plugin/tests/router-cancel.spec.ts | 6 +- .../tests/router-data-resolved.spec.ts | 6 +- packages/storage-plugin/jest.config.js | 16 +- packages/storage-plugin/project.json | 16 +- packages/store/internals/src/memoize.ts | 2 +- packages/store/jest.config.js | 21 +- packages/store/operators/src/append.ts | 6 +- packages/store/operators/src/insert-item.ts | 4 +- packages/store/project.json | 22 +- .../src/actions/actions.factory.spec.ts | 4 +- .../src/ng-add/ng-add.factory.spec.ts | 3 - .../starter-kit/starter-kit.factory.spec.ts | 8 +- .../src/state/state.factory.spec.ts | 8 +- .../src/store/store.factory.spec.ts | 8 +- .../store/schematics/src/utils/versions.json | 2 +- .../store/src/decorators/select/select.ts | 2 +- .../store/src/decorators/selector/selector.ts | 4 +- .../store/src/decorators/selector/symbols.ts | 8 +- packages/store/src/internal/state-factory.ts | 14 +- packages/store/src/internal/state-stream.ts | 8 +- packages/store/src/operators/of-action.ts | 2 +- .../store/src/selectors/selector-metadata.ts | 6 +- .../store/src/selectors/selector-utils.ts | 8 +- .../src/standalone-features/provide-store.ts | 4 +- packages/store/src/store.ts | 27 +- packages/store/src/utils/compose.ts | 10 +- packages/store/src/utils/freeze.ts | 2 +- packages/store/src/utils/utils.ts | 2 +- packages/store/tests/helpers/simple.state.ts | 2 + .../store/tests/lazy-load-late-init.spec.ts | 9 +- packages/store/tests/state-token.spec.ts | 2 +- packages/websocket-plugin/jest.config.js | 16 +- packages/websocket-plugin/project.json | 16 +- .../2019-12-11_announcing_ngxs_3_6/article.md | 16 +- yarn.lock | 6484 ++++++++------- 107 files changed, 3475 insertions(+), 11380 deletions(-) delete mode 100644 integrations/hello-world-ng15/.gitignore delete mode 100644 integrations/hello-world-ng15/angular.json delete mode 100644 integrations/hello-world-ng15/cypress.config.ts delete mode 100644 integrations/hello-world-ng15/cypress/e2e/index-page.cy.ts delete mode 100644 integrations/hello-world-ng15/cypress/fixtures/example.json delete mode 100644 integrations/hello-world-ng15/cypress/plugins/index.js delete mode 100644 integrations/hello-world-ng15/cypress/tsconfig.json delete mode 100644 integrations/hello-world-ng15/karma.conf.js delete mode 100644 integrations/hello-world-ng15/package.json delete mode 100644 integrations/hello-world-ng15/src/app/app.component.html delete mode 100644 integrations/hello-world-ng15/src/app/app.component.spec.ts delete mode 100644 integrations/hello-world-ng15/src/app/app.component.ts delete mode 100644 integrations/hello-world-ng15/src/app/app.module.ts delete mode 100644 integrations/hello-world-ng15/src/app/store/counter/counter.actions.ts delete mode 100644 integrations/hello-world-ng15/src/app/store/counter/counter.state.ts delete mode 100644 integrations/hello-world-ng15/src/app/store/index.ts delete mode 100644 integrations/hello-world-ng15/src/app/store/store.module.ts delete mode 100644 integrations/hello-world-ng15/src/assets/.gitkeep delete mode 100644 integrations/hello-world-ng15/src/environments/environment.prod.ts delete mode 100644 integrations/hello-world-ng15/src/environments/environment.ts delete mode 100644 integrations/hello-world-ng15/src/favicon.ico delete mode 100644 integrations/hello-world-ng15/src/index.html delete mode 100644 integrations/hello-world-ng15/src/main.ts delete mode 100644 integrations/hello-world-ng15/src/styles.scss delete mode 100644 integrations/hello-world-ng15/tsconfig.app.json delete mode 100644 integrations/hello-world-ng15/tsconfig.json delete mode 100644 integrations/hello-world-ng15/tsconfig.spec.json delete mode 100644 integrations/hello-world-ng15/yarn.lock delete mode 160000 integrations/tempreponx diff --git a/.bundlemonrc.integration.json b/.bundlemonrc.integration.json index eae1fed13..e53f0cb98 100644 --- a/.bundlemonrc.integration.json +++ b/.bundlemonrc.integration.json @@ -15,7 +15,5 @@ "maxPercentIncrease": 1 } ], - "reportOutput": [ - "github" - ] -} \ No newline at end of file + "reportOutput": ["github"] +} diff --git a/.bundlemonrc.json b/.bundlemonrc.json index 01d97e9fa..759064c0f 100644 --- a/.bundlemonrc.json +++ b/.bundlemonrc.json @@ -101,7 +101,5 @@ "compression": "gzip" } ], - "reportOutput": [ - "github" - ] -} \ No newline at end of file + "reportOutput": ["github"] +} diff --git a/.bundlemonrc.plugins.json b/.bundlemonrc.plugins.json index 48a9734c1..c305f6f2d 100644 --- a/.bundlemonrc.plugins.json +++ b/.bundlemonrc.plugins.json @@ -116,7 +116,5 @@ "compression": "gzip" } ], - "reportOutput": [ - "github" - ] -} \ No newline at end of file + "reportOutput": ["github"] +} diff --git a/.circleci/config.yml b/.circleci/config.yml index 564265ff9..2d3b5388f 100644 --- 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 index 482f0764f..25b51f7ce 100644 --- 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 index adba0d3dc..b4abc4613 100644 --- 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 index f480c3eb0..5e34802c5 100644 --- 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 index c865a27ce..d24cd79f7 100644 --- 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 index c1bc5172c..b887d24fa 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,3 +10,5 @@ build/** coverage/** @ngxs/** **/dist/** + +/.nx/cache diff --git a/README.md b/README.md index 2e4be63e4..a38b394c3 100644 --- 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 index f67709646..9db0a7648 100644 --- 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 index 4122f3254..b294764c9 100644 --- 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 index ec0ae69f6..60bd0af70 100644 --- 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: ` - - ` + template: ` ` }) 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 index 85884b234..d298bfaf3 100644 --- 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 index cc976e2f8..8e6e14c9c 100644 --- 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 index f67f492fd..e18ccac76 100644 --- 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 index 9e8937a77..ebf218235 100644 --- 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 index d20e2490a..b7968f94a 100644 --- a/integration/app/app.component.html +++ b/integration/app/app.component.html @@ -1,7 +1,7 @@

Reactive Form

-

{{ injected$ | async }}

+

{{ injected() }}

Toppings:
Crust
@@ -23,10 +23,10 @@

Todo Form