(feat) propose new release v5.0.0

angular.json

@@ -6,89 +6,86 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
+      "schematics": {},
+      "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "aot": false,
-            "allowedCommonJsDependencies": [
-              "highcharts",
-              "highcharts-custom-events"
-            ],
-            "outputPath": "dist",
+            "outputPath": "dist/my-app",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "./tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/assets",
-              "src/favicon.ico"
+              {
+                "glob": "**/*",
+                "input": "src/public"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@highcharts/map-collection/custom/",
+                "output": "/highcharts/"
+              }
             ],
             "styles": [],
             "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "allowedCommonJsDependencies": ["*"]
           },
           "configurations": {
             "production": {
               "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "800kB",
+                  "maximumError": "1MB"
+                },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ]
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "my-app:build"
-          },
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "my-app:build:production"
+              "buildTarget": "my-app:build:production"
+            },
+            "development": {
+              "buildTarget": "my-app:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "my-app:build"
-          }
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
             "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "./tsconfig.spec.json",
-            "scripts": [],
-            "styles": [],
+            "polyfills": ["core-js/es/reflect", "zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
             "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
+              {
+                "glob": "**/*",
+                "input": "src/public"
+              }
+            ],
+            "styles": [],
+            "scripts": []
           }
         }
       }
@@ -121,20 +118,118 @@
           },
           "configurations": {
             "production": {
-              "project": "highcharts-angular/ng-package.prod.json",
               "tsConfig": "highcharts-angular/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "highcharts-angular/tsconfig.lib.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "./tsconfig.spec.json",
+            "karmaConfig": "highcharts-angular/karma.conf.js",
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "highcharts-angular/tsconfig.spec.json",
+            "scripts": [],
+            "styles": []
+          }
+        }
+      }
+    },
+    "my-ssr-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/my-ssr-app",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/public"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@highcharts/map-collection/custom/",
+                "output": "/highcharts/"
+              }
+            ],
+            "styles": [],
             "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "src/server.ts"
+            },
+            "allowedCommonJsDependencies": ["*"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "800kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "my-ssr-app:build:production"
+            },
+            "development": {
+              "buildTarget": "my-ssr-app:build:development"
+            }
+          },
+          "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": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/public"
+              }
+            ],
             "styles": [],
+            "scripts": []
           }
         }
       }

highcharts-angular/package.json

@@ -19,8 +19,8 @@
     "angular"
   ],
   "peerDependencies": {
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
     "highcharts": ">=9.0.0"
   },
   "dependencies": {

highcharts-angular/src/lib/highcharts-chart.component.ts

@@ -1,73 +1,16 @@
-import type { OnChanges, OnDestroy } from '@angular/core';
-import { Component, ElementRef, EventEmitter, Input, Output, NgZone, SimpleChanges } from '@angular/core';
-import type * as Highcharts from 'highcharts';
-import type HighchartsESM from 'highcharts/es-modules/masters/highcharts.src';
+import { ChangeDetectionStrategy, Component} from '@angular/core';
+import { HighchartsChartDirective } from './highcharts-chart.directive';
 
 @Component({
   selector: 'highcharts-chart',
-  template: ''
-})
-export class HighchartsChartComponent implements OnDestroy, OnChanges {
-  @Input() Highcharts: typeof Highcharts | typeof HighchartsESM;
-  @Input() constructorType: string;
-  @Input() callbackFunction: Highcharts.ChartCallbackFunction;
-  @Input() oneToOne: boolean; // #20
-  @Input() runOutsideAngular: boolean; // #75
-  @Input() options: Highcharts.Options | HighchartsESM.Options;
-  @Input() update: boolean;
-
-  @Output() updateChange = new EventEmitter<boolean>(true);
-  @Output() chartInstance = new EventEmitter<Highcharts.Chart | null>(); // #26
-
-  private chart: Highcharts.Chart | null;
-
-  constructor(
-    private el: ElementRef,
-    private _zone: NgZone // #75
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const update = changes.update?.currentValue;
-    if (changes.options || update) {
-      this.wrappedUpdateOrCreateChart();
-      if (update) {
-        this.updateChange.emit(false); // clear the flag after update
-      }
-    }
-  }
-
-  wrappedUpdateOrCreateChart() { // #75
-    if (this.runOutsideAngular) {
-      this._zone.runOutsideAngular(() => {
-        this.updateOrCreateChart()
-      });
-    } else {
-      this.updateOrCreateChart();
+  template: '',
+  hostDirectives: [
+    {
+      directive: HighchartsChartDirective,
+      inputs: ['Highcharts', 'constructorType', 'callbackFunction', 'oneToOne', 'runOutsideAngular', 'options', 'update'],
+      outputs: ['chartInstance', 'updateChange']
     }
-  }
-
-  updateOrCreateChart() {
-    if (this.chart?.update) {
-      this.chart.update(this.options, true, this.oneToOne || false);
-    } else {
-      this.chart = this.Highcharts[this.constructorType || 'chart'](
-        this.el.nativeElement,
-        this.options,
-        this.callbackFunction || null
-      );
-
-      // emit chart instance on init
-      this.chartInstance.emit(this.chart);
-    }
-  }
-
-  ngOnDestroy() { // #44
-    if (this.chart) {  // #56
-      this.chart.destroy();
-      this.chart = null;
-
-      // emit chart instance on destroy
-      this.chartInstance.emit(this.chart);
-    }
-  }
-}
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HighchartsChartComponent {}