chore: standalone app

angular.json

@@ -183,6 +183,85 @@
           }
         }
       }
+    },
+    "standalone": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "integrations/standalone",
+      "sourceRoot": "integrations/standalone/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/standalone",
+            "index": "integrations/standalone/src/index.html",
+            "browser": "integrations/standalone/src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "integrations/standalone/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["integrations/standalone/src/favicon.ico", "integrations/standalone/src/assets"],
+            "styles": ["integrations/standalone/src/styles.scss"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "standalone:build:production"
+            },
+            "development": {
+              "buildTarget": "standalone:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "standalone:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "integrations/standalone/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": ["integrations/standalone/src/favicon.ico", "integrations/standalone/src/assets"],
+            "styles": ["integrations/standalone/src/styles.scss"],
+            "scripts": []
+          }
+        }
+      }
     }
   },
   "cli": {

integrations/standalone/src/app/app.component.html

@@ -0,0 +1,6 @@
+<h1>Hello from {{ name }}!</h1>
+<a target="_blank" href="https://angular.dev/overview">
+  Learn more about Angular
+</a>
+
+<pre>{{ all$ | async | json }}</pre>

integrations/standalone/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'standalone' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.name).toEqual('standalone');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, standalone');
+  });
+});

integrations/standalone/src/app/app.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { AsyncPipe, JsonPipe } from '@angular/common';
+import { all } from './states/test.selectors';
+import { Store } from '@ngxs/store';
+import { GetAll } from './states/test.actions';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [AsyncPipe, JsonPipe],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  name = 'Angular';
+  all$ = this.store.select(all);
+
+  constructor(private store: Store) {}
+
+  ngOnInit() {
+    this.store.dispatch(new GetAll());
+  }
+}

integrations/standalone/src/app/app.config.ts

@@ -0,0 +1,30 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { NgxsModule } from '@ngxs/store';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { environment } from '../environments/environment';
+import { TestState } from './states/test.state';
+import { provideNgxsFirestore } from '@ngxs-labs/firestore-plugin';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    importProvidersFrom(
+      provideFirebaseApp(() => initializeApp(environment.firebase)),
+      provideFirestore(() => getFirestore()),
+      NgxsModule.forRoot([TestState], {
+        developmentMode: !environment.production
+      }),
+      NgxsLoggerPluginModule.forRoot({
+        disabled: environment.production
+      })
+    ),
+    provideNgxsFirestore({
+      developmentMode: true
+    })
+  ]
+};

integrations/standalone/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

integrations/standalone/src/app/services/test.firestore.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+import { NgxsFirestore } from '@ngxs-labs/firestore-plugin';
+
+@Injectable({ providedIn: 'root' })
+export class TestFirestore extends NgxsFirestore<any> {
+  path = 'test';
+}

integrations/standalone/src/app/states/test.actions.ts

@@ -0,0 +1,8 @@
+export class GetAll {
+  static readonly type = '[Test] GetAll';
+}
+
+export class Create {
+  static readonly type = '[Test] Create';
+  constructor(public payload: any) {}
+}

integrations/standalone/src/app/states/test.selectors.ts

@@ -0,0 +1,6 @@
+import { createSelector } from '@ngxs/store';
+import { TestState, TestStateModel } from './test.state';
+
+export const all = createSelector([TestState], (state: TestStateModel) => {
+  return state.items;
+});

integrations/standalone/src/app/states/test.state.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Action, NgxsOnInit, State, StateContext } from '@ngxs/store';
+import { TestFirestore } from './../services/test.firestore';
+import { Create, GetAll } from './test.actions';
+import { Emitted, NgxsFirestoreConnect, StreamEmitted } from '@ngxs-labs/firestore-plugin';
+
+export interface TestStateModel {
+  items: any[];
+}
+
+@State<TestStateModel>({
+  name: 'test',
+  defaults: {
+    items: []
+  }
+})
+@Injectable()
+export class TestState implements NgxsOnInit {
+  constructor(private testFS: TestFirestore, private ngxsFirestoreConnect: NgxsFirestoreConnect) {}
+
+  ngxsOnInit(ctx: StateContext<TestStateModel>) {
+    this.ngxsFirestoreConnect.connect(GetAll, {
+      to: () => this.testFS.collection$()
+    });
+  }
+
+  @Action(StreamEmitted(GetAll))
+  getAll(ctx: StateContext<TestStateModel>, { payload }: Emitted<GetAll, any[]>) {
+    ctx.patchState({
+      items: payload || []
+    });
+  }
+
+  @Action(Create)
+  async sendMessage(ctx: StateContext<TestStateModel>, { payload }: any) {
+    return this.testFS.create$(payload);
+  }
+}

integrations/standalone/src/environments/environment.prod.ts

@@ -0,0 +1,12 @@
+export const environment = {
+  production: true,
+  firebase: {
+    apiKey: 'AIzaSyDODLVMuwrvGobMXkI89DktOLgwf0mCM24',
+    authDomain: 'joaq-lab.firebaseapp.com',
+    databaseURL: 'https://joaq-lab.firebaseio.com',
+    projectId: 'joaq-lab',
+    storageBucket: 'joaq-lab.appspot.com',
+    messagingSenderId: '794748950011',
+    appId: '1:794748950011:web:815fe385e7317c11'
+  }
+};

integrations/standalone/src/environments/environment.ts

@@ -0,0 +1,24 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  firebase: {
+    apiKey: 'AIzaSyDODLVMuwrvGobMXkI89DktOLgwf0mCM24',
+    authDomain: 'joaq-lab.firebaseapp.com',
+    databaseURL: 'https://joaq-lab.firebaseio.com',
+    projectId: 'joaq-lab',
+    storageBucket: 'joaq-lab.appspot.com',
+    messagingSenderId: '794748950011',
+    appId: '1:794748950011:web:815fe385e7317c11'
+  }
+};
+
+/*
+ * In development mode, to ignore zone related error stack frames such as
+ * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * import the following file, but please comment it out in production mode
+ * because it will have performance impact when throw error
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

integrations/standalone/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Standalone</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

integrations/standalone/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

integrations/standalone/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

integrations/standalone/tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"]
+}

integrations/standalone/tsconfig.spec.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}