Merge pull request #411 from MRinaldi9/feat/integration-ssr-api

Integration SSR
assuncaocharles · Nov 19, 2024 · 36a4c40 · 36a4c40
2 parents d8feef2 + fc2646a
commit 36a4c40
Show file tree

Hide file tree

Showing 27 changed files with 13,320 additions and 25,623 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 [![Known Vulnerabilities](https://snyk.io/test/github/assuncaocharles/ngx-indexed-db/badge.svg)](https://snyk.io/test/github/assuncaocharles/ngx-indexed-db) [![CodeFactor](https://www.codefactor.io/repository/github/assuncaocharles/ngx-indexed-db/badge/master)](https://www.codefactor.io/repository/github/assuncaocharles/ngx-indexed-db/overview/master) [![Build Status](https://travis-ci.com/assuncaocharles/ngx-indexed-db.svg?branch=master)](https://travis-ci.com/assuncaocharles/ngx-indexed-db) ![CI](https://github.com/assuncaocharles/ngx-indexed-db/workflows/CI/badge.svg)
 
-`ngx-indexed-db` is a service that wraps IndexedDB database in an Angular service combined with the power of observables.
+`ngx-indexed-db` is a service (CSR & SSR) that wraps IndexedDB database in an Angular service combined with the power of observables.
 
 ## Installation
 
@@ -21,6 +21,7 @@ $ yarn add ngx-indexed-db
 
 ## Usage
 
+### With Module
 Import the `NgxIndexedDBModule` and set up it:
 
 ```js
@@ -48,6 +49,51 @@ const dbConfig: DBConfig  = {
   ...
 })
 ```
+### With Standalone API
+
+Use `provideIndexedDb` and set it up:
+
+```js
+import { provideIndexedDb, DBConfig } from 'ngx-indexed-db';
+
+const dbConfig: DBConfig  = {
+  name: 'MyDb',
+  version: 1,
+  objectStoresMeta: [{
+    store: 'people',
+    storeConfig: { keyPath: 'id', autoIncrement: true },
+    storeSchema: [
+      { name: 'name', keypath: 'name', options: { unique: false } },
+      { name: 'email', keypath: 'email', options: { unique: false } }
+    ]
+  }]
+};
+
+const appConfig: ApplicationConfig = {
+  providers: [...,provideIndexedDb(dbConfig),...]
+}
+
+OR
+
+@NgModule({
+  ...
+ providers:[
+    ...
+    provideIndexedDb(dbConfig)
+  ],
+  ...
+})
+```
+
+### SSR
+
+Starting from version 19.2.0, `ngx-indexed-db` fully supports **Server-Side Rendering (SSR)**. This enhancement prevents issues related to the absence of `window.indexedDB` in server environments.
+
+Additionally, you can provide a custom implementation of IndexedDB using an **injection token**. This allows greater flexibility, especially when mocking IndexedDB for testing or in non-browser environments (like SSR).
+
+```js
+const SERVER_INDEXED_DB = new InjectionToken<IDBFactory>('Server Indexed Db');
+```
 
 ### Migrations
 
@@ -303,14 +349,14 @@ this.dbService.count('people').subscribe((peopleCount) => {
 
 ### deleteObjectStore(storeName: string): Observable<boolean>
 
-Delete the store by name, return true or false. 
+Delete the store by name, return true or false.
 
 - @param storeName The name of the store to query
 
 ```js
 this.dbService.deleteObjectStore(this.storneNameToDelete);
 ```
-                               
+
 ### delete<T>(storeName: string, key: Key): Observable<T[]>
 
 Returns all items from the store after delete.
@@ -420,7 +466,7 @@ this.dbService.clear('people').subscribe((successDeleted) => {
 });
 ```
 
-### deleteDatabase(): Observable<boolean> 
+### deleteDatabase(): Observable<boolean>
 
 Returns true if successfully delete the DB.
 

diff --git a/angular.json b/angular.json
@@ -61,7 +61,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/playground",
+            "outputPath": {
+              "base": "dist/playground",
+              "browser": ""
+            },
             "index": "projects/playground/src/index.html",
             "browser": "projects/playground/src/main.ts",
             "polyfills": [
@@ -75,7 +78,8 @@
             "styles": [
               "projects/playground/src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "clearScreen": true
           },
           "configurations": {
             "production": {
@@ -109,7 +113,8 @@
               "sourceMap": true,
               "clearScreen": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -175,6 +180,101 @@
           }
         }
       }
+    },
+    "ssr-playground": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/ssr-playground",
+      "sourceRoot": "projects/ssr-playground/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/ssr-playground",
+            "index": "projects/ssr-playground/src/index.html",
+            "browser": "projects/ssr-playground/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/ssr-playground/tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/ssr-playground/public"
+              }
+            ],
+            "styles": [
+              "projects/ssr-playground/src/styles.css"
+            ],
+            "scripts": [],
+            "server": "projects/ssr-playground/src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "projects/ssr-playground/server.ts"
+            }
+          },
+          "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": "ssr-playground:build:production"
+            },
+            "development": {
+              "buildTarget": "ssr-playground:build:development",
+              "port": 4201
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/ssr-playground/tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/ssr-playground/public"
+              }
+            ],
+            "styles": [
+              "projects/ssr-playground/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
     }
   },
   "cli": {