ngx-firebase 22.0.0 → 22.0.1

package/README.md

@@ -1,64 +1,132 @@
-# NgxFirebase
+# @ngx-firebase
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.0.0.
+A lightweight, drop-in, and zoneless-friendly wrapper around the native **Firebase JS SDK** for **Angular 22+**.
 
-## Code scaffolding
+This library serves as a modern, boilerplate-free alternative to `@angular/fire`, providing native Angular Dependency Injection (DI) class tokens and reactive RxJS wrappers around standard Firebase listeners.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+---
 
-```bash
-ng generate component component-name
-```
+## ⚡ Features
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+- 📦 **Zero overhead**: Communicates directly with the Firebase JS SDK without complex wrappers.
+- 💉 **Native Angular DI**: Standard provider functions (`provideFirestore`, `provideAuth`, etc.) compatible with Angular's `ApplicationConfig`.
+- 🎭 **RxJS Wrappers**: Lightweight, memory-leak-safe wrappers for common tasks (`docData`, `collectionSnapshots`, `user`).
+- ⏱️ **Zoneless Friendly**: Uses native SDK snapshot listeners wrapped in RxJS observable streams.
+- 📊 **Screen Tracking**: Custom built-in `ScreenTrackingService` for automated Google Analytics route tracking.
 
-```bash
-ng generate --help
-```
+---
 
-## Building
+## 📦 Installation
 
-To build the library, run:
+Install both the library and the native Firebase SDK:
 
 ```bash
-ng build ngx-firebase
+npm install ngx-firebase firebase
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
-
-### Publishing the Library
-
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-
-   ```bash
-   cd dist/ngx-firebase
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
+---
+
+## 🚀 Quick Start
+
+### 1. Configure Providers
+
+Register the Firebase services in your `app.config.ts` using the functional providers:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+import { getFirestore } from 'firebase/firestore';
+import { 
+  provideFirebaseApp, 
+  provideAuth, 
+  provideFirestore 
+} from 'ngx-firebase';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    
+    // Initialize Firebase App
+    provideFirebaseApp(() => initializeApp({
+      apiKey: "YOUR_API_KEY",
+      authDomain: "YOUR_AUTH_DOMAIN",
+      projectId: "YOUR_PROJECT_ID",
+      storageBucket: "YOUR_STORAGE_BUCKET",
+      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+      appId: "YOUR_APP_ID",
+      measurementId: "YOUR_MEASUREMENT_ID"
+    })),
+    
+    // Provide Firestore & Auth
+    provideFirestore(() => getFirestore()),
+    provideAuth(() => getAuth())
+  ]
+};
 ```
 
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
+### 2. Using Services in Standalone Components
+
+Inject the native Firebase instances directly using the provided tokens, and use the RxJS helpers:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Firestore, doc } from 'firebase/firestore';
+import { docData } from 'ngx-firebase';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-store-detail',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="store$ | async as store">
+      <h1>{{ store.name }}</h1>
+      <p>{{ store.description }}</p>
+    </div>
+  `
+})
+export class StoreDetailComponent {
+  private firestore = inject(Firestore);
+  store$: Observable<any>;
+
+  constructor() {
+    // Reference a document using the native Firestore SDK
+    const storeRef = doc(this.firestore, 'stores/store_123');
+    
+    // Wrap it reactively using docData
+    this.store$ = docData(storeRef);
+  }
+}
+```
 
-```bash
-ng e2e
+### 3. Track Route Page Views Automatically (Google Analytics)
+
+To enable automatic page view tracking, register `provideAnalytics` and inject `ScreenTrackingService` in your client config:
+
+```typescript
+import { ApplicationConfig, provideEnvironmentInitializer, inject } from '@angular/core';
+import { getAnalytics } from 'firebase/analytics';
+import { provideAnalytics, ScreenTrackingService } from 'ngx-firebase';
+
+export const clientConfig: ApplicationConfig = {
+  providers: [
+    provideAnalytics(() => getAnalytics()),
+    ScreenTrackingService,
+    provideEnvironmentInitializer(() => {
+      // Force service initialization to listen to router events
+      inject(ScreenTrackingService);
+    })
+  ]
+};
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+---
 
-## Additional Resources
+## 📄 License
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+MIT © 2026 Sebas (quedicesebas)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-firebase",
-  "version": "22.0.0",
+  "version": "22.0.1",
   "description": "A lightweight, drop-in, and zoneless-friendly wrapper around the native Firebase JS SDK for Angular 22+.",
   "keywords": [
     "angular",
@@ -21,7 +21,6 @@
     "url": "git+https://github.com/quedicesebas/ngx-firebase.git"
   },
   "license": "MIT",
-  "author": "Sebas <quedicesebas>",
   "publishConfig": {
     "access": "public"
   },