Agnostic framework FE-272 (#326)

Author: ahumadamatias

CHANGELOG.md

@@ -6,12 +6,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+## [3.0.0] - 2021-08-17
+
+### Added
+
+-   Compatibility with other frameworks in addition to angular was added to the library. The behavior of the http.service.ts file was changed, it stopped using http client by axios to give compatibility with other libraries. It changed the way the library is initialized, a bootstrap was created that is found in the jsonapi-bootstrap file ([#326](https://github.com/reyesoft/ngx-jsonapi/pull/326))
+
 ## [2.3.0] - 2021-05-19
 
 ### Changed
 
 -   Angular version upgraded to 10, and vulnerabilities updated. ([#306](https://github.com/reyesoft/ngx-jsonapi/pull/306))
 
+## [2.2.3] - 2021-06-24
+
+### Fixed
+
+-   Fix trackBy params of document-collection.ts. ([#299](https://github.com/reyesoft/ngx-jsonapi/pull/299))
+
 ## [2.2.2] - 2021-05-19
 
 ### Fixed

README.md

@@ -34,6 +34,7 @@ Data is obtained from [Json Api Playground](https://jsonapiplayground.reyesoft.c
 ## Migration
 
 -   [Migration v1 to v2 update guide](https://github.com/reyesoft/ngx-jsonapi/blob/v2.0/docs/migration.md)
+-   [Migration v2 to v3 Angular update guide](https://github.com/reyesoft/ngx-jsonapi/blob/v2.0/docs/migration-v2-to-v3.md)
 
 ## Usage
 
@@ -52,51 +53,75 @@ yarn add [email protected] --save
 
 1.  Add Jsonapi dependency.
 2.  Configure your url and other paramemeters.
-3.  Inject JsonapiCore somewhere before you extend any class from `Jsonapi.Resource`.
+
+-   Angular
 
 ```typescript
 /* .. */
 import { NgxJsonapiModule } from 'ngx-jsonapi';
 
-@NgModule({
-    imports: [
-        NgxJsonapiModule.forRoot({
-            url: '//jsonapiplayground.reyesoft.com/v2/'
-        })
-    ]
-})
-export class AppModule {}
+@NgModule()
+export class AppModule {
+    public constructor() {
+        JsonapiBootstrap({
+            user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' }
+        });
+    }
+}
+```
+
+-   React
+
+```typescript
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+
+const App = () => {
+    JsonapiBootstrap({
+        user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' }
+    });
+
+    return <div>Hello world</div>;
+};
 ```
 
 ### Enable Local Cache
 
 Library cache anything memory. With Local Store, also store all on IndexDb on browser. Faster apps when we reuse a lot of data.
 
+-   Angular
+
 ```typescript
 /* .. */
 import { NgxJsonapiModule } from 'ngx-jsonapi';
-import { JSONAPI_RIPPER_SERVICE, JSONAPI_STORE_SERVICE } from './core';
 import { StoreService } from 'ngx-jsonapi/sources/store.service';
 import { JsonRipper } from 'ngx-jsonapi/services/json-ripper';
 
-@NgModule({
-    imports: [
-        NgxJsonapiModule.forRoot({
-            url: '//jsonapiplayground.reyesoft.com/v2/'
-        })
-    ],
-    providers: [
-        {
-            provide: JSONAPI_RIPPER_SERVICE,
-            useClass: JsonRipperFake
-        },
-        {
-            provide: JSONAPI_STORE_SERVICE,
-            useClass: StoreFakeService
-        }
-    ]
-})
-export class AppModule {}
+@NgModule()
+export class AppModule {
+    public constructor() {
+        JsonapiBootstrap({
+            user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' },
+            jsonapiStore: new StoreFakeService(),
+            jsonRipper: new JsonRipperFake()
+        });
+    }
+}
+```
+
+-   React
+
+```typescript
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+
+const App = () => {
+    JsonapiBootstrap({
+        user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' },
+        jsonapiStore: new StoreFakeService(),
+        jsonRipper: new JsonRipperFake()
+    });
+
+    return <div>Hello world</div>;
+};
 ```
 
 ## Examples
@@ -153,6 +178,9 @@ export class AuthorsComponent {
         authorsService
             .all({
                 // include: ['books', 'photos'],
+                // fields: {
+                //     authors: ['name']
+                // }
             })
             .subscribe(authors => (this.authors = authors));
     }

demo/app/app.component.ts

@@ -9,19 +9,17 @@ import { JsonapiCore } from 'ngx-jsonapi';
 export class AppComponent /* implements OnInit */ {
     public loading = '';
 
-    public constructor(
-        private jsonapiCore: JsonapiCore
-    ) {
-        jsonapiCore.loadingsStart = (): void => {
+    public constructor() {
+        JsonapiCore.getInstance().loadingsStart = (): void => {
             this.loading = 'LOADING...';
         };
-        jsonapiCore.loadingsDone = (): void => {
+        JsonapiCore.getInstance().loadingsDone = (): void => {
             this.loading = '';
         };
-        jsonapiCore.loadingsOffline = (error): void => {
+        JsonapiCore.getInstance().loadingsOffline = (error): void => {
             this.loading = 'No connection!!!';
         };
-        jsonapiCore.loadingsError = (error): void => {
+        JsonapiCore.getInstance().loadingsError = (error): void => {
             this.loading = 'No connection 2!!!';
         };
     }

demo/app/app.module.ts

@@ -3,16 +3,14 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 import { environment } from '../environments/environment';
-import { NgxJsonapiModule, JSONAPI_RIPPER_SERVICE, JSONAPI_STORE_SERVICE } from 'ngx-jsonapi';
 
 import { AppComponent } from './app.component';
 import { AuthorsService } from './authors/authors.service';
 import { BooksService } from './books/books.service';
 import { PhotosService } from './photos/photos.service';
 import { SharedModule } from './shared/shared.module';
 
-import { StoreService } from 'ngx-jsonapi/sources/store.service';
-import { JsonRipper } from 'ngx-jsonapi/services/json-ripper';
+import { JsonapiBootstrap } from 'ngx-jsonapi';
 import { AuthorsModule } from './authors/authors.module';
 import { BooksModule } from './books/books.module';
 
@@ -34,14 +32,6 @@ const appRoutes: Routes = [
 
 @NgModule({
     providers: [
-        {
-            provide: JSONAPI_RIPPER_SERVICE,
-            useClass: JsonRipper
-        },
-        {
-            provide: JSONAPI_STORE_SERVICE,
-            useClass: StoreService
-        },
         AuthorsService,
         BooksService,
         PhotosService
@@ -50,12 +40,13 @@ const appRoutes: Routes = [
         BrowserModule,
         HttpClientModule,
         SharedModule,
-        RouterModule.forRoot(appRoutes, { useHash: true }),
-        NgxJsonapiModule.forRoot({
-            url: environment.jsonapi_url
-        })
+        RouterModule.forRoot(appRoutes, { useHash: true })
     ],
     declarations: [AppComponent],
     bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+    public constructor() {
+        JsonapiBootstrap.bootstrap({ user_config: { url: environment.jsonapi_url } });
+    }
+}

docs/migration-v2-to-v3.md

@@ -0,0 +1,84 @@
+# ngx-jsonapi v2 to v3 update guide
+
+ngx-jsonapi v3 has arrived! While this is a major version change (from 2.x to 3.x), we've put in a lot of work to keep the hard breaking changes to a minimum.
+
+## Library bootstrap
+
+### Before
+
+```typescript
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+
+@NgModule({
+    imports: [
+        NgxJsonapiModule.forRoot({
+            url: '//jsonapiplayground.reyesoft.com/v2/'
+        })
+    ]
+})
+export class AppModule {}
+```
+
+#### Enable Local Cache
+
+```typescrypt
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+import { JSONAPI_RIPPER_SERVICE, JSONAPI_STORE_SERVICE } from './core';
+import { StoreService } from 'ngx-jsonapi/sources/store.service';
+import { JsonRipper } from 'ngx-jsonapi/services/json-ripper';
+
+@NgModule({
+    imports: [
+        NgxJsonapiModule.forRoot({
+            url: '//jsonapiplayground.reyesoft.com/v2/'
+        })
+    ],
+    providers: [
+        {
+            provide: JSONAPI_RIPPER_SERVICE,
+            useClass: JsonRipperFake
+        },
+        {
+            provide: JSONAPI_STORE_SERVICE,
+            useClass: StoreFakeService
+        }
+    ]
+})
+export class AppModule {}
+```
+
+### After
+
+```typescript
+/* .. */
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+
+@NgModule()
+export class AppModule {
+    public constructor() {
+        JsonapiBootstrap({
+            user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' }
+        });
+    }
+}
+```
+
+#### Enable Local Cache
+
+```typescript
+/* .. */
+import { NgxJsonapiModule } from 'ngx-jsonapi';
+import { StoreService } from 'ngx-jsonapi/sources/store.service';
+import { JsonRipper } from 'ngx-jsonapi/services/json-ripper';
+
+@NgModule()
+export class AppModule {
+    public constructor() {
+        JsonapiBootstrap({
+            user_config: { url: '//jsonapiplayground.reyesoft.com/v2/' },
+            jsonapiStore: new StoreFakeService(),
+            jsonRipper: new JsonRipperFake()
+        });
+    }
+}
+```

package.json

@@ -151,6 +151,7 @@
     "zone.js": "~0.10.2"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "dexie": "^2.0.4",
     "lodash-es": "^4.17.15",
     "rxjs": "6.6.7",

src/bootstraps/jsonapi-bootstrap.ts

@@ -0,0 +1,23 @@
+import { Core } from '../core';
+import { IBootstrapConfig } from '../interfaces/bootstrap-config';
+import { JsonapiConfig } from '../jsonapi-config';
+import { JsonRipperFake } from '../services/json-ripper-fake';
+import { Http } from '../sources/http.service';
+import { StoreFakeService } from '../sources/store-fake.service';
+
+export class JsonapiBootstrap {
+    public static bootstrap(bootstrapConfig: IBootstrapConfig): void {
+        let config = new JsonapiConfig();
+
+        for (let k in config) {
+            (<any>config)[k] = bootstrapConfig.user_config[k] !== undefined ? bootstrapConfig.user_config[k] : (<any>config)[k];
+        }
+
+        Core.getInstance().injectedServices = {
+            JsonapiStoreService: bootstrapConfig.jsonapiStore ? bootstrapConfig.jsonapiStore : new StoreFakeService(),
+            JsonapiHttp: new Http(),
+            json_ripper: bootstrapConfig.jsonRipper ? bootstrapConfig.jsonRipper : new JsonRipperFake(),
+            rsJsonapiConfig: config
+        };
+    }
+}

src/cloned-document-resource.ts

@@ -42,20 +42,15 @@ export class ClonedDocumentResource {
         }
         let parent_included = this.parent_resource_object.included;
         this.resource_object.included = this.resource_object.included.filter(included_resource => {
-            return !isEqual(
-                included_resource,
-                parent_included.find(include => include.id === included_resource.id)
-            );
+            return !isEqual(included_resource, parent_included.find(include => include.id === included_resource.id));
         });
         this.resource_object.included = this.resource_object.included.map(included => {
             if (!parent_included.find(include => include.id === included.id)) {
                 return included;
             }
 
-            return new ClonedDocumentResource(
-                included,
-                parent_included.find(include => include.id === included.id)
-            ).getResourceObject().data;
+            return new ClonedDocumentResource(included, parent_included.find(include => include.id === included.id)).getResourceObject()
+                .data;
         });
 
         return this;