Migrate to Angular 15 and enable ivy (#2212)

This commit migrates the angular packages to Angular ^15. Support for older Angular versions is dropped. Support for newer Angular versions than 15 is not added with this commit. This gets rid of using Webpack for Angular builds. Only rollup is used there now. To achieve this without adding an Angular workspace at the repository root, a custom test runner was implemented. Relax the Angular package's ESLint configs to not show import/no-unresolved errors for the Angular packages due to a bug in the eslint import plugin: import-js/eslint-plugin-import#1810 Misc CI change: Adapted the coverage report merge to prepend paths. This improves and fixes the coverage report because coveralls can recognize the files from the merged report. Co-authored-by: Lucas Koehler <lkoehler@eclipsesource.com>
eclipsesource · Dec 11, 2023 · 18c0825 · 18c0825
1 parent da3321b
commit 18c0825
Show file tree

Hide file tree

Showing 37 changed files with 7,516 additions and 3,625 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,6 @@ stats.html
 !.vscode/settings.json
 
 .coveralls.yml
-packages/examples-react/build
+packages/examples-react/build
+
+**/.angular/cache
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "jsonforms-monorepo",
   "engines": {
-    "node": "^16.13",
+    "node": "^16.14",
     "pnpm": ">=7.13.4"
   },
   "scripts": {
     "lerna": "lerna",
     "preparePublish": "git clean -dfx && pnpm i --frozen-lockfile && pnpm run clean && pnpm run build && pnpm run doc && pnpm run test",
-    "merge-report": "mkdir -p coverage && lcov-result-merger 'packages/**/coverage/lcov.info' 'coverage/lcov.info'",
+    "merge-report": "mkdir -p coverage && lcov-result-merger 'packages/**/coverage/lcov.info' 'coverage/lcov.info' --prepend-source-files",
     "check-format": "echo 'temporarily disabled'",
     "build": "lerna run build",
     "bundle": "lerna run bundle",

diff --git a/packages/angular-material/.eslintrc.js b/packages/angular-material/.eslintrc.js
@@ -33,5 +33,21 @@ module.exports = {
         caughtErrorsIgnorePattern: '^_',
       },
     ],
+    // workaround for
+    // https://github.com/import-js/eslint-plugin-import/issues/1810:
+    "import/no-unresolved": [
+      "error",
+      {
+        ignore: [
+          "@angular/cdk/.*",
+          "@angular/core/.*",
+          "@angular/material/.*",
+          "@angular/platform-browser/.*",
+          "@angular/platform-browser-dynamic/.*",
+          "core-js/es7/.*",
+          "zone.js/.*",
+        ] 
+      }
+    ],
   },
 };
diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts
@@ -74,7 +74,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
     <div>
       <button (click)="changeLocale('de-DE')">Change locale to de-DE</button>
       <button (click)="changeLocale('en-US')">Change locale to en-US</button>
-      Current locale: {{ currentLocale }}
+      Current locale: {{ i18n.locale }}
       <button (click)="toggleReadonly()">
         {{ readonly ? 'Unset' : 'Set' }} Readonly
       </button>
@@ -85,19 +85,17 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [uischema]="selectedExample.uischema"
       [renderers]="renderers"
       [i18n]="i18n"
-      [uischemas]="uischemas"
       [readonly]="readonly"
-      [config]="config"
     ></jsonforms>
   `,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;
   readonly examples = getExamples();
-  selectedExample: ExampleDescription;
+  selectedExample: ExampleDescription | undefined;
   i18n: JsonFormsI18nState;
   private dateAdapter;
-  private readonly = false;
+  readonly = false;
   data: any;
   uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[] = [
     { tester: itemTester, uischema: uiSchema },
@@ -114,7 +112,7 @@ export class AppComponent {
     this.selectedExample = this.examples.find(
       (e) => e.name === ev.target.value
     );
-    this.i18n = this.selectedExample.i18n ?? defaultI18n;
+    this.i18n = this.selectedExample?.i18n ?? defaultI18n;
   }
 
   changeLocale(locale: string) {

diff --git a/packages/angular-material/karma.conf.js b/packages/angular-material/karma.conf.js
@@ -0,0 +1,54 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      subdir: '.',
+      reporters: [
+        { type: 'lcov' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml', 'dots'],
+
+    browsers: [ config.singleRun ? 'ChromeHeadlessNoSandbox' : 'Chrome' ],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    restartOnFileChange: true,
+    logLevel: config.LOG_INFO,
+
+    webpackMiddleware: {
+      stats: 'detailed',
+    },
+
+    webpackServer: {
+      noInfo: true,
+    },
+  });
+};
diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
@@ -39,16 +39,17 @@
   "typings": "./lib/esm/index.d.ts",
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
-    "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js",
+    "dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "doc": "typedoc --name 'JSON Forms Angular Material Renderers' --out docs src",
-    "test": "karma start ./test-config/karma.conf.js --single-run",
-    "test-ci": "karma start ./test-config/karma.conf.js --single-run",
-    "test-cov": "karma start ./test-config/karma.conf.js --coverage --single-run",
+    "test-dbg": "node ./test-runner",
+    "test": "node ./test-runner --single-run",
+    "test-ci": "node ./test-runner --single-run",
+    "test-cov": "node ./test-runner --coverage --single-run",
     "e2e": "npm run e2e-update && npm run e2e-test",
     "e2e-test": "protractor ./test-config/protractor.conf.js",
     "e2e-update": "webdriver-manager update --standalone false --gecko false"
@@ -60,93 +61,94 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/cdk": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/flex-layout": "^12.0.0-beta || ^13.0.0-beta || ^14.0.0-beta",
-    "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/platform-browser": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/router": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@angular/animations": "^15.0.0",
+    "@angular/cdk": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/flex-layout": "^15.0.0-beta",
+    "@angular/forms": "^15.0.0",
+    "@angular/material": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/router": "^15.0.0",
     "@jsonforms/angular": "3.2.0-alpha.3",
+    "@jsonforms/angular-test": "^3.2.0-alpha.3",
     "@jsonforms/core": "3.2.0-alpha.3",
-    "core-js": "^2.5.3",
-    "rxjs": "^6.5.3 || ^7.4.0"
+    "rxjs": "^6.6.0 || ^7.4.0"
   },
   "dependencies": {
     "hammerjs": "2.0.8",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "^12.0.0",
-    "@angular-eslint/eslint-plugin-template": "^12.0.0",
-    "@angular-eslint/schematics": "^12.0.0",
-    "@angular-eslint/template-parser": "^12.0.0",
-    "@angular/animations": "^12.0.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/flex-layout": "^12.0.0-beta",
-    "@angular/forms": "^12.0.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@angular-devkit/build-angular": "~15.2.10",
+    "@angular-eslint/eslint-plugin": "^15.0.0",
+    "@angular-eslint/eslint-plugin-template": "^15.0.0",
+    "@angular-eslint/schematics": "^15.0.0",
+    "@angular-eslint/template-parser": "^15.0.0",
+    "@angular/animations": "^15.0.0",
+    "@angular/cdk": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/compiler-cli": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/flex-layout": "^15.0.0-beta",
+    "@angular/forms": "^15.0.0",
+    "@angular/material": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/angular-test": "workspace:*",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
+    "@ngtools/webpack": "^15.0.0",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@types/node": "^16.18.34",
+    "@types/jasmine": "~3.8.0",
+    "@types/lodash": "4.14.149",
+    "@types/node": "^18.10.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "angular2-template-loader": "^0.6.2",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.5",
-    "core-js": "^2.5.3",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "html-loader": "^0.5.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "http-server": "^14.1.1",
     "jasmine": "^3.99.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^3.1.4",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-coverage": "~2.0.3",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
+    "ng-packagr": "^15.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
-    "protractor": "^5.4.1",
-    "request": "^2.88.0",
+    "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.3.1",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^5.4.1",
-    "rxjs": "^6.5.3",
+    "rxjs": "^6.6.0",
     "ts-loader": "^6.2.1",
     "tslib": "^2.5.0",
-    "typedoc": "~0.21.9",
-    "typescript": "4.2.3",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0",
+    "typedoc": "~0.25.3",
+    "typescript": "~4.9.5",
+    "webpack": "^5.78.0",
+    "yargs": "^17.7.2",
     "zone.js": "^0.11.4"
   }
 }
diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/rollup.example.config.js
@@ -10,7 +10,7 @@ import typescript from 'rollup-plugin-typescript2';
  * @type {import('rollup').RollupOptions}
  */
 const config = {
-  input: 'example/main.ts',
+  input: 'example/dist/example/main.js',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',

diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts
@@ -108,6 +108,7 @@ export class AutocompleteControlRenderer
   @Input() options: string[];
   filteredOptions: Observable<string[]>;
   shouldFilter: boolean;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);

diff --git a/packages/angular-material/src/controls/date.renderer.ts b/packages/angular-material/src/controls/date.renderer.ts
@@ -54,6 +54,8 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateControlRenderer extends JsonFormsControl {
+  focused = false;
+
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

diff --git a/packages/angular-material/src/controls/number.renderer.ts b/packages/angular-material/src/controls/number.renderer.ts
@@ -69,6 +69,7 @@ export class NumberControlRenderer extends JsonFormsControl {
   locale: string;
   numberFormat: Intl.NumberFormat;
   decimalSeparator: string;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);

diff --git a/packages/angular-material/src/controls/range.renderer.ts b/packages/angular-material/src/controls/range.renderer.ts
@@ -38,16 +38,17 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
         label
       }}</label>
       <mat-slider
-        [value]="data || scopedSchema.default"
-        (change)="onChange($event)"
         [disabled]="!isEnabled()"
         [max]="max"
         [min]="min"
         [step]="multipleOf"
-        [thumbLabel]="true"
-        tickInterval="auto"
+        [discrete]="true"
         [id]="id"
-      ></mat-slider>
+        showTickMarks
+        #ngSlider
+      >
+        <input matSliderThumb />
+      </mat-slider>
       <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
         description
       }}</mat-hint>
@@ -60,6 +61,7 @@ export class RangeControlRenderer extends JsonFormsControl {
   min: number;
   max: number;
   multipleOf: number;
+  focused = false;
 
   constructor(
     jsonformsService: JsonFormsAngularService,

diff --git a/packages/angular-material/src/controls/text.renderer.ts b/packages/angular-material/src/controls/text.renderer.ts
@@ -49,6 +49,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextControlRenderer extends JsonFormsControl {
+  focused = false;
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

diff --git a/packages/angular-material/src/controls/textarea.renderer.ts b/packages/angular-material/src/controls/textarea.renderer.ts
@@ -48,6 +48,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextAreaRenderer extends JsonFormsControl {
+  focused = false;
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -95,7 +95,7 @@ import {
           first as first
         "
       >
-        <mat-card>
+        <mat-card appearance="outlined">
           <mat-card-content>
             <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
           </mat-card-content>