build: bump to angualr 19

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  }
+}

.yarnrc.yml

@@ -2,4 +2,4 @@ enableImmutableInstalls: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.2.cjs

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-github-button",
-  "version": "17.0.0",
+  "version": "19.0.0",
   "description": "Unofficial GitHub buttons in Angular.",
   "author": "cipchk <cipchk@qq.com>",
   "license": "MIT",

lib/spec/component.spec.ts

@@ -1,10 +1,10 @@
 import { Component, ViewChild, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { HttpClientTestingModule, HttpTestingController, TestRequest } from '@angular/common/http/testing';
+import { HttpTestingController, provideHttpClientTesting, TestRequest } from '@angular/common/http/testing';
 
-import { GithubButtonModule } from '../src/module';
 import { GithubButtonComponent } from '../src/component';
+import { provideHttpClient } from '@angular/common/http';
 
 describe('github-button', () => {
   let fixture: ComponentFixture<TestComponent>;
@@ -22,8 +22,8 @@ describe('github-button', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, GithubButtonModule],
-      declarations: [TestComponent],
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+      imports: [TestComponent],
     });
     fixture = TestBed.createComponent(TestComponent);
     context = fixture.componentInstance;
@@ -123,6 +123,7 @@ describe('github-button', () => {
   template: `
     <github-button #comp [showZero]="showZero" [type]="type" [size]="size" [namespace]="namespace" [repo]="repo"></github-button>
   `,
+  imports: [GithubButtonComponent],
 })
 class TestComponent {
   @ViewChild('comp')

lib/src/component.ts

@@ -6,11 +6,11 @@ import {
   ChangeDetectorRef,
   OnInit,
   ViewEncapsulation,
-  OnDestroy,
+  inject,
+  DestroyRef,
 } from '@angular/core';
 import { GithubButtonService } from './service';
-import { Subscription } from 'rxjs';
-import { CommonModule, NgStyle } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const isSSR = !(typeof document === 'object' && !!document);
 
@@ -21,7 +21,7 @@ const isSSR = !(typeof document === 'object' && !!document);
       <span class="gh-ico" aria-hidden="true"></span>
       <span class="gh-text">{{ typeToLabel[type] }}</span>
     </a>
-    <a class="gh-count" target="_blank" [attr.href]="count_url" [ngStyle]="{ display: showZero || count > 0 ? 'block' : 'none' }">
+    <a class="gh-count" target="_blank" [attr.href]="count_url" [style.display]="showZero || count > 0 ? 'block' : 'none'">
       {{ count }}
     </a>
     <ng-content></ng-content>
@@ -33,11 +33,11 @@ const isSSR = !(typeof document === 'object' && !!document);
   encapsulation: ViewEncapsulation.Emulated,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [NgStyle],
 })
-export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
-  private notify$?: Subscription;
+export class GithubButtonComponent implements OnChanges, OnInit {
+  private srv = inject(GithubButtonService);
+  private cdr = inject(ChangeDetectorRef);
+  private d$ = inject(DestroyRef);
   typeToLabel = {
     stargazers: 'Star',
     subscribers: 'Watch',
@@ -62,15 +62,13 @@ export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
     return `//github.com/${this.namespace}/${this.repo}/${this.typeToPath[this.type] || this.type}/`;
   }
 
-  constructor(private srv: GithubButtonService, private cdr: ChangeDetectorRef) {}
-
   private setCount(data: any): void {
     this.count = data ? data[`${this.type}_count`] : 0;
     this.cdr.detectChanges();
   }
 
   ngOnInit(): void {
-    this.notify$ = this.srv.notify.subscribe((res) => this.setCount(res));
+    this.srv.notify.pipe(takeUntilDestroyed(this.d$)).subscribe((res) => this.setCount(res));
   }
 
   ngOnChanges(): void {
@@ -79,8 +77,4 @@ export class GithubButtonComponent implements OnChanges, OnInit, OnDestroy {
     }
     this.srv.req(this.namespace, this.repo);
   }
-
-  ngOnDestroy(): void {
-    this.notify$?.unsubscribe();
-  }
 }

lib/src/service.ts

@@ -1,18 +1,17 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
 @Injectable({ providedIn: 'root' })
 export class GithubButtonService {
+  private http = inject(HttpClient);
   private cached: { [url: string]: any } = {};
   private _notify = new BehaviorSubject<{ [url: string]: any } | null>(null);
 
   get notify(): Observable<{ [url: string]: any } | null> {
     return this._notify.asObservable();
   }
 
-  constructor(private http: HttpClient) {}
-
   req(namespace: string, repo: string): void {
     const url = `https://api.github.com/repos/${namespace}/${repo}`;
     if (this.cached[url] != null) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-github-button",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Unofficial GitHub buttons in Angular.",
   "keywords": [
     "angular",
@@ -32,41 +32,42 @@
     "release:next": "npm run build && cd publish && npm publish --access public --tag next"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "ngx-highlight-js": "^19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.4",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^18.0.4",
-    "@angular/compiler-cli": "^18.0.0",
-    "@types/file-saver": "^2.0.5",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-eslint/builder": "^18.4.1",
+    "@angular-eslint/eslint-plugin": "^18.4.1",
+    "@angular-eslint/eslint-plugin-template": "^18.4.1",
+    "@angular-eslint/schematics": "^18.4.1",
+    "@angular-eslint/template-parser": "^18.4.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "eslint": "^8.53.0",
     "file-saver": "^2.0.5",
-    "jasmine-core": "~5.1.0",
+    "jasmine-core": "~5.4.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.0.0",
-    "ngx-highlight-js": "^18.0.0",
-    "typescript": "~5.4.2"
-  }
+    "ng-packagr": "^19.0.1",
+    "typescript": "~5.6.2"
+  },
+  "packageManager": "yarn@4.5.2"
 }

src/app.ts

@@ -4,8 +4,41 @@ import { HighlightJsDirective } from 'ngx-highlight-js';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.html',
-  standalone: true,
+  template: `<h1>ng-github-button</h1>
+    <p>Unofficial GitHub buttons in Angular.</p>
+    <div style="margin-top: 24px;">
+      <button type="button" (click)="update()">Update</button>
+      <github-button type="stargazers" size="large" [namespace]="ns" [repo]="repo"></github-button>
+      <div style="margin-top: 8px">
+        <textarea highlight-js>
+      &lt;github-button type="stargazers" size="large" namespace="cipchk" repo="ng-github-button"></github-button>
+    </textarea>
+      </div>
+    </div>
+    <div style="margin-top: 24px;">
+      <github-button type="subscribers" namespace="cipchk" repo="ng-github-button"></github-button>
+      <div style="margin-top: 8px">
+        <textarea highlight-js>
+      &lt;github-button type="subscribers" namespace="cipchk" repo="ng-github-button"></github-button>
+    </textarea>
+      </div>
+    </div>
+    <div style="margin-top: 24px;">
+      <github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true"></github-button>
+      <div style="margin-top: 8px">
+        <textarea highlight-js>
+      &lt;github-button type="forks" namespace="cipchk" repo="ng-github-button" [showZero]="true"></github-button>
+    </textarea>
+      </div>
+    </div> `,
   imports: [GithubButtonComponent, HighlightJsDirective],
 })
-export class AppComponent {}
+export class AppComponent {
+  ns = 'cipchk';
+  repo = 'ng-github-button';
+
+  update() {
+    this.ns = 'ng-alain';
+    this.repo = 'ng-alain';
+  }
+}