feat(store): add standalone features

.circleci/config.yml

@@ -137,46 +137,6 @@ jobs:
           name: Run integration tests for the SSR build application
           command: yarn test:ci:integration:ssr
 
-  integration_ng12_ivy_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      - run:
-          name: Run integration tests for ng12 (Ivy) application
-          environment:
-            NODE_OPTIONS: '--openssl-legacy-provider'
-          command: yarn integration:ng12:ivy
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng12-ivy/dist-integration
-
-  integration_ng13_ivy_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      - run:
-          name: Run integration tests for ng13 (Ivy) application
-          command: yarn integration:ng13:ivy
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng13-ivy/dist-integration
-
-  integration_ng14_ivy_tests:
-    <<: *job_defaults
-    steps:
-      - *attach_workspace
-      - browser-tools/install-chrome
-      - browser-tools/install-chromedriver
-      - run:
-          name: Run integration tests for ng14 (Ivy) application
-          command: yarn integration:ng14:ivy
-      - persist_to_workspace:
-          root: ~/workspace
-          paths:
-            - app/integrations/hello-world-ng14-ivy/dist-integration
-
   integration_ng15_tests:
     <<: *job_defaults
     steps:
@@ -282,18 +242,6 @@ workflows:
       ###     requires:
       ###       - build
 
-      - integration_ng12_ivy_tests:
-          requires:
-            - build
-
-      - integration_ng13_ivy_tests:
-          requires:
-            - build
-
-      - integration_ng14_ivy_tests:
-          requires:
-            - build
-
       - integration_ng15_tests:
           requires:
             - build

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

.github/actions/setup/action.yml

@@ -51,9 +51,6 @@ runs:
           ~/.cache
           ./node_modules
           ./@ngxs
-          ./integrations/hello-world-ng12-ivy/dist-integration
-          ./integrations/hello-world-ng13-ivy/dist-integration
-          ./integrations/hello-world-ng14-ivy/dist-integration
           ./integrations/hello-world-ng15/dist-integration
           ./integrations/hello-world-ng16/dist-integration
         key: ${{ runner.os }}-node-${{ inputs.node-version }}-yarn-${{ hashFiles('**/yarn.lock') }}-branch-${{ inputs.github-ref-name }}-sha-${{ inputs.github-sha }}

.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-ng12-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:ng12: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/release.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 }}

.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 }}

.gitignore

@@ -38,6 +38,7 @@ dist-integration
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

build/index.ts

@@ -0,0 +1,14 @@
+import { ngPackagr } from 'ng-packagr';
+import { buildPackages, getOptionsFromProcessArgs } from '../tools/build-packages';
+import { setMetadata } from '../tools/set-metadata';
+
+const options = getOptionsFromProcessArgs();
+
+buildPackages(options, ngPackagr)
+  .then(() => {
+    setMetadata();
+  })
+  .catch(err => {
+    console.error('Error building ngxs', err);
+    process.exit(111);
+  });

docs/snippets/operators.md

@@ -20,7 +20,15 @@ ctx.setState(
 
 ```ts
 import { StateOperator } from '@ngxs/store';
-import { compose, iif, insertItem, NoInfer, patch, Predicate, updateItem } from '@ngxs/store/operators';
+import {
+  compose,
+  iif,
+  insertItem,
+  NoInfer,
+  patch,
+  Predicate,
+  updateItem
+} from '@ngxs/store/operators';
 
 export function upsertItem<T>(
   selector: number | Predicate<T>,
@@ -44,6 +52,7 @@ export function upsertItem<T>(
   );
 }
 ```
+
 ### Collaborate with your awesome operator!
 
 Have you identified an use case for a new operator? If that's the case you can collaborate sharing it here! To learn more read this [issue](https://github.com/ngxs/store/issues/926) and submit your PR with your operator as part of the _Snippets_ section.

integration/.browserslistrc

@@ -1,12 +1,11 @@
 # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+
 # For additional information regarding the format and rule options, please see:
+
 # https://github.com/browserslist/browserslist#queries
 
 # You can see what browsers were selected by your queries by running:
-#   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+# npx browserslist
+
+last 2 Chrome versions

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', () => {