feat(store): add standalone features (#1999)

.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-ivy'.
+description: Downloads all integration test artifacts with names such as 'hello-world-ng15'.
 
 inputs:
   path:
@@ -18,8 +18,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - name: Download hello-world-ng15-ivy artifacts
+    - name: Download hello-world-ng15 artifacts
       uses: actions/download-artifact@v3
       with:
-        name: hello-world-ng15-ivy
+        name: hello-world-ng15
         path: ${{ inputs.path }}

.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-ivy'.
+description: Upload an integration test artifact with a name such as 'hello-world-ng15'.
 
 inputs:
   script:
-    description: A script with a name such as 'integration:ng15:ivy' that generates an integration test artifact.
+    description: A script with a name such as 'integration:ng15' 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-ng12-ivy"
+        echo "Replace colons with dashes, substring 'integration' with a substring 'hello-world'. Example result: hello-world-ng15"
         echo "value=$(echo ${SCRIPT} | sed -r "s/:/-/g" | sed -r "s/integration/hello-world/g")" >> $GITHUB_OUTPUT
       env:
         SCRIPT: ${{ inputs.script }}

.github/workflows/pr-validation.yml

@@ -83,9 +83,6 @@ jobs:
     strategy:
       matrix:
         script:
-          # - 'integration:ng12:ivy'
-          # - 'integration:ng13:ivy'
-          # - 'integration:ng14:ivy'
           - 'integration:ng15'
           - 'integration:ng16'
           - 'test:types'
@@ -108,7 +105,7 @@ jobs:
         run: yarn ${{ matrix.script }}
 
       - name: Upload an integration test artifact
-        if: ${{ matrix.script == 'integration:ng12:ivy' || matrix.script == 'integration:ng13:ivy' || matrix.script == 'integration:ng14:ivy' }}
+        if: ${{ matrix.script == 'integration:ng15' }}
         uses: ./.github/actions/upload-integration-test-artifact
         with:
           script: ${{ matrix.script }}

.github/workflows/trunk.yml

@@ -78,9 +78,7 @@ jobs:
     strategy:
       matrix:
         script:
-          # - 'integration:ng12:ivy'
-          # - 'integration:ng13:ivy'
-          # - 'integration:ng14:ivy'
+          - 'integration:ng15'
           - 'test:types'
 
     steps:
@@ -98,7 +96,7 @@ jobs:
         run: yarn ${{ matrix.script }}
 
       - name: Upload an integration test artifact
-        if: ${{ matrix.script == 'integration:ng12:ivy' || matrix.script == 'integration:ng13:ivy' || matrix.script == 'integration:ng14:ivy' }}
+        if: ${{ matrix.script == 'integration:ng15' }}
         uses: ./.github/actions/upload-integration-test-artifact
         with:
           script: ${{ matrix.script }}

integration/app/app-browser.config.ts

@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/platform-browser';
+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]
+};

integration/app/app-server.config.ts

@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/platform-browser';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+
+import { appConfig } from './app.config';
+
+// TODO: use `mergeApplicationConfig` in v16.
+export const appServerConfig: ApplicationConfig = {
+  providers: [provideNoopAnimations(), ...appConfig.providers]
+};

integration/app/app.component.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ComponentFixtureAutoDetect, discardPeriodicTasks } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { take } from 'rxjs/operators';
-import { Store } from '@ngxs/store';
+import { Store, provideStore } from '@ngxs/store';
+import { withNgxsFormPlugin } from '@ngxs/form-plugin';
 
-import { AppComponent } from '@integration/app.component';
-import { AppModule } from '@integration/app.module';
-import { Pizza, Todo } from '@integration/store/todos/todos.model';
+import { AppComponent } from './app.component';
+import { Pizza, Todo } from './store/todos/todos.model';
+import { TodosState } from './store/todos/todos.state';
+import { TodoState } from './store/todos/todo/todo.state';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
@@ -22,8 +22,8 @@ describe('AppComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [AppModule, RouterTestingModule, FormsModule, ReactiveFormsModule],
-      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
+      imports: [RouterTestingModule],
+      providers: [provideStore([TodosState, TodoState], withNgxsFormPlugin())]
     });
 
     fixture = TestBed.createComponent(AppComponent);
@@ -54,7 +54,10 @@ describe('AppComponent', () => {
     });
   });
 
-  it('should set toppings using form control', fakeAsync(() => {
+  it('should set toppings using form control', fakeAsync(async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
     component.pizzaForm.patchValue({ toppings: 'oli' });
     tick(200);
     let flag = false;
@@ -80,12 +83,15 @@ describe('AppComponent', () => {
     expect(flag).toBe(true);
   }));
 
-  it('should set toppings prefix', fakeAsync(() => {
+  it('should set toppings prefix', fakeAsync(async () => {
+    fixture.detectChanges();
+    await fixture.whenStable();
+
     component.pizzaForm.patchValue({ toppings: 'cheese' });
-    tick(200);
+    tick(100);
     component.onPrefix();
     let flag = false;
-    tick(200);
+    tick(100);
 
     component.pizza$.pipe(take(1)).subscribe((pizza: Pizza) => {
       flag = true;
@@ -95,7 +101,6 @@ describe('AppComponent', () => {
     });
 
     expect(flag).toBe(true);
-    discardPeriodicTasks();
   }));
 
   it('should load data in pizza form', () => {

integration/app/app.component.ts

@@ -1,6 +1,15 @@
-import { FormArray, FormBuilder, FormControl } from '@angular/forms';
-import { Component, OnInit } from '@angular/core';
+import {
+  FormArray,
+  FormBuilder,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import { Store } from '@ngxs/store';
+import { NgxsFormDirective } from '@ngxs/form-plugin';
 import { Observable } from 'rxjs';
 
 import { TodoState } from '@integration/store/todos/todo/todo.state';
@@ -11,7 +20,10 @@ import { Extras, Pizza, Todo } from '@integration/store/todos/todos.model';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule, NgxsFormDirective]
 })
 export class AppComponent implements OnInit {
   readonly allExtras: Extras[] = [

integration/app/app.config.ts

@@ -0,0 +1,51 @@
+import { APP_ID } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/platform-browser';
+import { provideStore } from '@ngxs/store';
+import { withNgxsFormPlugin } from '@ngxs/form-plugin';
+import { withNgxsLoggerPlugin } from '@ngxs/logger-plugin';
+import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';
+import { withNgxsRouterPlugin } from '@ngxs/router-plugin';
+import { withNgxsStoragePlugin } from '@ngxs/storage-plugin';
+
+import { TodosState } from '@integration/store/todos/todos.state';
+import { TodoState } from '@integration/store/todos/todo/todo.state';
+import { TODOS_STORAGE_KEY } from '@integration/store/todos/todos.model';
+
+import { environment } from '../environments/environment';
+
+export const APP_ID_VALUE = 'integration-app';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    { provide: APP_ID, useValue: APP_ID_VALUE },
+
+    provideRouter([
+      { path: '', pathMatch: 'full', redirectTo: '/list' },
+      {
+        path: 'list',
+        loadChildren: () => import('@integration/list/list.module').then(m => m.ListModule)
+      },
+      {
+        path: 'detail',
+        loadChildren: () =>
+          import('@integration/detail/detail.module').then(m => m.DetailModule)
+      },
+      {
+        path: 'counter',
+        loadChildren: () =>
+          import('@integration/counter/counter.module').then(m => m.CounterModule)
+      }
+    ]),
+
+    provideStore(
+      [TodosState, TodoState],
+      { developmentMode: !environment.production, selectorOptions: {} },
+      withNgxsFormPlugin(),
+      withNgxsLoggerPlugin({ logger: console, collapsed: false, disabled: true }),
+      withNgxsReduxDevtoolsPlugin({ disabled: environment.production }),
+      withNgxsRouterPlugin(),
+      withNgxsStoragePlugin({ key: [TODOS_STORAGE_KEY] })
+    )
+  ]
+};

integration/main.server.ts

@@ -1,10 +1,3 @@
-import { enableProdMode } from '@angular/core';
-
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-export { AppServerModule } from './app/app.server.module';
-export { renderModuleFactory } from '@angular/platform-server';
+export { AppComponent } from './app/app.component';
+export { appServerConfig } from './app/app-server.config';
+export { APP_ID_VALUE } from './app/app.config';

integration/main.ts

@@ -1,11 +1,12 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
+import { AppComponent } from './app/app.component';
+import { appBrowserConfig } from './app/app-browser.config';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+bootstrapApplication(AppComponent, appBrowserConfig);