chroe: migrate to SAC + inject()

src/app/app.component.html

@@ -58,7 +58,7 @@
         Built with ❤ by
         <a href="https://twitter.com/manekinekko">Wassim Chegham</a>
       </span>
-      &nbsp;&nbsp;|&nbsp;&nbsp;<span> Build: {{ version }}</span>
+      &nbsp;&nbsp;|&nbsp;&nbsp;<span> Build: {{ version() }}</span>
       &nbsp;&nbsp;|&nbsp;&nbsp;
       <a
         href="https://www.algolia.com"

src/app/app.component.ts

@@ -1,34 +1,58 @@
-import { Component, ViewChild, signal } from '@angular/core';
-import { Event, Router, RoutesRecognized } from '@angular/router';
+import { NgIf } from '@angular/common';
+import { Component, ViewChild, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {
+  Event,
+  Router,
+  RouterLink,
+  RouterOutlet,
+  RoutesRecognized,
+} from '@angular/router';
 import { environment } from 'src/environments/environment';
-import { PromptUpdateService } from './prompt-update.service';
+import { PromptUpdateService } from './shared/prompt-update.service';
 import { ThemeManagerService } from './shared/theme-manager.service';
 import { ViewTransitionDirective } from './shared/view-transition.directive';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [
+    ViewTransitionDirective,
+    NgIf,
+    RouterLink,
+    RouterOutlet,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+  ],
 })
 export class AppComponent {
-  version = environment.version;
-  isDarkMode = signal(false);
-  shouldShowBackButton = signal(false);
-
   @ViewChild(ViewTransitionDirective, { static: true })
   viewTransitionRef!: ViewTransitionDirective;
 
+  version = signal(environment.version);
+  isDarkMode = signal(false);
+  shouldShowBackButton = signal(false);
   locationHistory = signal<string[]>(['/']);
 
-  constructor(
-    private promptUpdateService: PromptUpdateService,
-    private themeManager: ThemeManagerService,
-    private router: Router
-  ) {
+  promptUpdateService = inject(PromptUpdateService);
+  themeManager = inject(ThemeManagerService);
+  router = inject(Router);
+
+  constructor() {
     this.promptUpdateService.check();
-    this.isDarkMode.set(this.themeManager.isDarkMode);
+    this.isDarkMode.set(this.themeManager.isDarkMode());
 
-    router.events.subscribe((event: Event) => {
+    this.router.events.subscribe((event: Event) => {
       if (event instanceof RoutesRecognized) {
         const { url } = event;
         this.shouldShowBackButton.set(url.startsWith('/pkg'));
@@ -46,7 +70,7 @@ export class AppComponent {
 
   toggleDarkTheme() {
     this.themeManager.toggleDarkTheme();
-    this.isDarkMode.update(() => this.themeManager.isDarkMode);
+    this.isDarkMode.update(() => this.themeManager.isDarkMode());
   }
 
   navigateBack() {

src/app/core/algolia/algolia.service.ts

@@ -1,25 +1,29 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import * as algoliasearchHelper from 'algoliasearch-helper';
 import { Observable } from 'rxjs';
 import { SearchResult } from 'src/typings';
-import { ALGOLIA_APPLICATION_ID, ALGOLIA_INDEX, ALGOLIA_SEARCH_API_KEY } from './injection-tokens';
+import {
+  ALGOLIA_APPLICATION_ID,
+  ALGOLIA_INDEX,
+  ALGOLIA_SEARCH_API_KEY,
+} from './injection-tokens';
 
 export interface SearchState {
   search$: Observable<any>;
   result$: Observable<{
-    results: SearchResult,
-    state: algoliasearchHelper.SearchParameters
+    results: SearchResult;
+    state: algoliasearchHelper.SearchParameters;
   }>;
   change$: Observable<any>;
   error$: Observable<any>;
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AlgoliaService {
   indices: { [key: string]: any } = {
-    'npm-search': algoliasearchHelper
+    'npm-search': algoliasearchHelper,
   };
 
   client: any;
@@ -29,16 +33,19 @@ export class AlgoliaService {
    */
   searchState: SearchState;
 
-  constructor(
-    @Inject(ALGOLIA_APPLICATION_ID) private applicationID: string,
-    @Inject(ALGOLIA_SEARCH_API_KEY) private searchApiKey: string,
-    @Inject(ALGOLIA_INDEX) private indexName: string
-  ) {
-    this.client = (window as any)['algoliasearch'](this.applicationID, this.searchApiKey);
+  applicationID = inject(ALGOLIA_APPLICATION_ID);
+  searchApiKey = inject(ALGOLIA_SEARCH_API_KEY);
+  indexName = inject(ALGOLIA_INDEX);
+
+  constructor() {
+    this.client = (window as any)['algoliasearch'](
+      this.applicationID,
+      this.searchApiKey
+    );
 
     this.searchState = {} as any;
 
-    this.configureMasterIndex(indexName);
+    this.configureMasterIndex(this.indexName);
   }
 
   /**
@@ -60,11 +67,14 @@ export class AlgoliaService {
 
     // map algolia's events to observables
     ['search', 'result', 'change', 'error'].forEach((eventName: string) => {
-      (this.searchState as any)[eventName + `$`] = new Observable(observer => {
-        const handler = (event: any) => observer.next(event);
-        this.indices[indexName].on(eventName, handler);
-        return () => this.indices[indexName].removeListener(eventName, handler);
-      });
+      (this.searchState as any)[eventName + `$`] = new Observable(
+        (observer) => {
+          const handler = (event: any) => observer.next(event);
+          this.indices[indexName].on(eventName, handler);
+          return () =>
+            this.indices[indexName].removeListener(eventName, handler);
+        }
+      );
     });
   }
 
@@ -82,7 +92,6 @@ export class AlgoliaService {
    * @param query The user query used for search.
    */
   private search(indexName: string, query: string, extra = '') {
-
     this.indices[this.indexName]
       .setIndex(indexName)
       .setQueryParameter('query', query)
@@ -99,7 +108,9 @@ export class AlgoliaService {
    * @param facet The facet name and query
    */
   toggleFacetRefinement(facet: { name: string; query: string } = {} as any) {
-    this.indices[this.indexName].toggleFacetRefinement(facet.name, facet.query).search();
+    this.indices[this.indexName]
+      .toggleFacetRefinement(facet.name, facet.query)
+      .search();
   }
 
   /**
@@ -118,7 +129,11 @@ export class AlgoliaService {
 
   filterBySchematics(query: string) {
     // query = query || this.indices[this.indexName].state.query;
-    this.search(this.indexName, query, 'AND (computedKeywords:angular-cli-schematic)');
+    this.search(
+      this.indexName,
+      query,
+      'AND (computedKeywords:angular-cli-schematic)'
+    );
   }
 
   sortByBestMatch(query: string) {

src/app/details/details.component.ts

@@ -1,25 +1,28 @@
-import { Component, OnInit, signal } from '@angular/core';
+import { NgIf } from '@angular/common';
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import * as showdown from 'showdown';
 import { PackageType } from 'src/typings';
-
+import { CardComponent } from '../shared/card/card.component';
+import { ViewTransitionDirective } from '../shared/view-transition.directive';
 
 @Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
-  styleUrls: ['./details.component.css']
+  styleUrls: ['./details.component.css'],
+  standalone: true,
+  imports: [CardComponent, ViewTransitionDirective, NgIf, MatCardModule],
 })
 export class DetailsComponent implements OnInit {
-
   pkg = signal<PackageType | null>(null);
   query = signal('');
 
-  constructor(private router: Router, private sanitizer: DomSanitizer) {
-  }
+  router = inject(Router);
+  sanitizer = inject(DomSanitizer);
 
   ngOnInit(): void {
-
     const { pkg, query } = window.history.state;
 
     if (!pkg) {
@@ -29,11 +32,12 @@ export class DetailsComponent implements OnInit {
 
     this.query.set(query);
     this.pkg.set(pkg as PackageType);
-
   }
 
   readme() {
     const converter = new showdown.Converter();
-    return this.sanitizer.bypassSecurityTrustHtml(converter.makeHtml(this.pkg()?.readme || ''));
+    return this.sanitizer.bypassSecurityTrustHtml(
+      converter.makeHtml(this.pkg()?.readme || '')
+    );
   }
 }