Update seed to new jsonforms root component

This updates the seed to use the new root component.
- Removed the store
- move necessary parameters into app.component
- update to jsonform 2.5.0-alpha.0

Author: eneufeld

package-lock.json

@@ -23,9 +23,9 @@
     "@angular/platform-browser": "^9.0.2",
     "@angular/platform-browser-dynamic": "^9.0.2",
     "@angular/router": "^9.0.2",
-    "@jsonforms/angular": "^2.4.1",
-    "@jsonforms/angular-material": "^2.4.1",
-    "@jsonforms/core": "^2.4.1",
+    "@jsonforms/angular": "^2.5.0-alpha.0",
+    "@jsonforms/angular-material": "^2.5.0-alpha.0",
+    "@jsonforms/core": "^2.5.0-alpha.0",
     "core-js": "^2.4.1",
     "json-refs": "^3.0.4",
     "libphonenumber-js": "^1.6.8",

package.json

@@ -5,4 +5,11 @@ <h1>
   </h1>
   <img width="150" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
-<jsonforms-outlet></jsonforms-outlet>
+<jsonforms
+    [data]="data"
+    [schema]="schema"
+    [uischema]="uischema"
+    [renderers]="renderers"
+    [locale]="'de-DE'"
+    [ajv]="ajv"
+></jsonforms>

src/app/app.component.html

@@ -1,9 +1,68 @@
 import { Component } from '@angular/core';
+import { angularMaterialRenderers } from '@jsonforms/angular-material';
+import { and, createAjv, isControl, optionIs, rankWith, schemaTypeIs, scopeEndsWith, Tester } from '@jsonforms/core';
+import { CustomAutocompleteControlRenderer } from './custom.autocomplete';
+import { DataDisplayComponent } from './data.control';
+import { LangComponent } from './lang.control';
+import uischemaAsset from '../assets/uischema.json';
+import schemaAsset from '../assets/schema.json';
+import dataAsset from './data';
+import AJV from 'ajv';
+import { parsePhoneNumber } from 'libphonenumber-js';
+
+const departmentTester: Tester = and(
+  schemaTypeIs('string'),
+  scopeEndsWith('department')
+);
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+  renderers = [
+    ...angularMaterialRenderers,
+    { tester: rankWith(5, departmentTester), renderer: CustomAutocompleteControlRenderer },
+    {
+      renderer: DataDisplayComponent,
+      tester: rankWith(
+        6,
+        and(
+          isControl,
+          scopeEndsWith('___data')
+        )
+      )
+    },
+    {
+      renderer: LangComponent,
+      tester: rankWith(
+        6,
+        and(
+          isControl,
+          optionIs('lang', true)
+        )
+      )
+    },
+  ];
+  uischema = uischemaAsset;
+  schema = schemaAsset;
+  data = dataAsset;
+  ajv = createAjv({
+    schemaId: 'auto',
+    allErrors: true,
+    jsonPointers: true,
+    errorDataPath: 'property'
+  });
+  constructor() {
+    this.ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
+    this.ajv.addFormat('tel', maybePhoneNumber => {
+      try {
+        parsePhoneNumber(maybePhoneNumber, 'DE');
+        return true;
+      } catch (_) {
+        return false;
+      }
+    });
+  }
 }

src/app/app.component.ts

@@ -1,63 +1,17 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { JsonFormsAngularService, JsonFormsModule } from '@jsonforms/angular';
+import { JsonFormsModule } from '@jsonforms/angular';
 import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
-import { Actions, setLocale, UISchemaElement } from '@jsonforms/core';
-import AJV from 'ajv';
-import JsonRefs from 'json-refs';
-import { parsePhoneNumber } from 'libphonenumber-js';
-import { forkJoin } from 'rxjs';
 import { AppComponent } from './app.component';
 import { CustomAutocompleteControlRenderer } from './custom.autocomplete';
-import data from './data';
 import { DataDisplayComponent } from './data.control';
 import { LangComponent } from './lang.control';
-import { initialState } from './store';
 
-export const loadCore = (jsonformsService: JsonFormsAngularService, http: HttpClient): () => Promise<void> => {
-  return () => {
-    const ajv = new AJV({
-      schemaId: 'auto',
-      allErrors: true,
-      jsonPointers: true,
-      errorDataPath: 'property'
-    });
-    ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
-    ajv.addFormat('tel', maybePhoneNumber => {
-      try {
-        parsePhoneNumber(maybePhoneNumber, 'DE');
-        return true;
-      } catch (_) {
-        return false;
-      }
-    });
 
-    return forkJoin({
-      uischema: http.get('./assets/uischema.json'),
-      schema: http.get('./assets/schema.json')
-    }).toPromise().then(result => {
-      const { schema, uischema } = result;
-      return JsonRefs.resolveRefs(schema)
-        .then(
-          (res: any) => {
-            jsonformsService.updateCore(
-              Actions.init(
-                data,
-                res.resolved,
-                uischema as UISchemaElement,
-                ajv as any
-              )
-            );
-          }
-
-        );
-    });
-  };
-};
 @NgModule({
   declarations: [
     AppComponent,
@@ -75,23 +29,8 @@ export const loadCore = (jsonformsService: JsonFormsAngularService, http: HttpCl
     HttpClientModule
   ],
   schemas: [],
-  providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: loadCore,
-      deps: [JsonFormsAngularService, HttpClient],
-      multi: true
-    }
-  ],
   entryComponents: [CustomAutocompleteControlRenderer, LangComponent, DataDisplayComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule {
-  constructor(jsonformsService: JsonFormsAngularService) {
-    jsonformsService.init(initialState.jsonforms);
-
-    jsonformsService.updateLocale(setLocale('de-DE'));
-
-
-  }
 }

src/app/app.module.ts

@@ -18,7 +18,8 @@
       "es2018",
       "dom"
     ],
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,