From 831da9ba1e5013f4eeb1fe80fdbdc4eb67ba57cc Mon Sep 17 00:00:00 2001 From: lilbeqiri Date: Sat, 6 Apr 2024 02:12:32 +0200 Subject: [PATCH] refactor: do cleanups to theme, version and content loader services at adev (#55234) Keep theme constants in sync betwee index.html file and theme manager. Move versions config static data to their own file, and replace the deprecated toPromise() api with the new firstValueFrom() api PR Close #55234 --- adev/src/app/core/constants/versions.ts | 74 +++++++++++++++++++ .../core/services/content-loader.service.ts | 14 ++-- .../core/services/theme-manager.service.ts | 4 +- .../core/services/version-manager.service.ts | 69 +---------------- adev/src/index.html | 4 +- 5 files changed, 88 insertions(+), 77 deletions(-) create mode 100644 adev/src/app/core/constants/versions.ts diff --git a/adev/src/app/core/constants/versions.ts b/adev/src/app/core/constants/versions.ts new file mode 100644 index 00000000000..6b5cb1b424d --- /dev/null +++ b/adev/src/app/core/constants/versions.ts @@ -0,0 +1,74 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +export const VERSIONS_CONFIG = { + currentVersion: 'stable', + historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev', + mainVersions: [ + { + version: 'stable', + url: 'https://angular.dev', + }, + { + version: 'v16', + url: 'https://v16.angular.io/docs', + }, + { + version: 'v15', + url: 'https://v15.angular.io/docs', + }, + { + version: 'v14', + url: 'https://v14.angular.io/docs', + }, + { + version: 'v13', + url: 'https://v13.angular.io/docs', + }, + { + version: 'v12', + url: 'https://v12.angular.io/docs', + }, + { + version: 'v11', + url: 'https://v11.angular.io/docs', + }, + { + version: 'v10', + url: 'https://v10.angular.io/docs', + }, + { + version: 'v9', + url: 'https://v9.angular.io/docs', + }, + { + version: 'v8', + url: 'https://v8.angular.io/docs', + }, + { + version: 'v7', + url: 'https://v7.angular.io/docs', + }, + { + version: 'v6', + url: 'https://v6.angular.io/docs', + }, + { + version: 'v5', + url: 'https://v5.angular.io/docs', + }, + { + version: 'v4', + url: 'https://v4.angular.io/docs', + }, + { + version: 'v2', + url: 'https://v2.angular.io/docs', + }, + ], +}; diff --git a/adev/src/app/core/services/content-loader.service.ts b/adev/src/app/core/services/content-loader.service.ts index a6ad13ab441..f4579acb5f1 100644 --- a/adev/src/app/core/services/content-loader.service.ts +++ b/adev/src/app/core/services/content-loader.service.ts @@ -10,6 +10,7 @@ import {HttpClient} from '@angular/common/http'; import {Injectable, inject} from '@angular/core'; import {DocContent, DocsContentLoader} from '@angular/docs'; import {Router} from '@angular/router'; +import {firstValueFrom} from 'rxjs'; import {map} from 'rxjs/operators'; @Injectable() @@ -27,12 +28,13 @@ export class ContentLoader implements DocsContentLoader { try { this.cache.set( path, - this.httpClient - .get(`assets/content/${path}`, { - responseType: 'text', - }) - .pipe(map((contents) => ({contents, id: path}))) - .toPromise(), + firstValueFrom( + this.httpClient + .get(`assets/content/${path}`, { + responseType: 'text', + }) + .pipe(map((contents) => ({contents, id: path}))), + ), ); } catch { this.router.navigateByUrl('/404'); diff --git a/adev/src/app/core/services/theme-manager.service.ts b/adev/src/app/core/services/theme-manager.service.ts index 84ffc065a6a..97ef7e6e92f 100644 --- a/adev/src/app/core/services/theme-manager.service.ts +++ b/adev/src/app/core/services/theme-manager.service.ts @@ -82,7 +82,7 @@ export class ThemeManager { } private watchPreferredColorScheme() { - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { + window.matchMedia(PREFERS_COLOR_SCHEME_DARK).addEventListener('change', (event) => { const preferredScheme = event.matches ? 'dark' : 'light'; this.setThemeBodyClasses(preferredScheme); }); @@ -90,5 +90,5 @@ export class ThemeManager { } function preferredScheme(): 'dark' | 'light' { - return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + return window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches ? 'dark' : 'light'; } diff --git a/adev/src/app/core/services/version-manager.service.ts b/adev/src/app/core/services/version-manager.service.ts index f88d312dcb3..0fee266271c 100644 --- a/adev/src/app/core/services/version-manager.service.ts +++ b/adev/src/app/core/services/version-manager.service.ts @@ -7,74 +7,7 @@ */ import {Injectable, VERSION, computed, signal} from '@angular/core'; - -// TODO(josephperrott): extract this out of the file into a managed location. -const VERSIONS_CONFIG = { - currentVersion: 'stable', - historicalVersionsLinkPattern: 'https://v{{version}}.angular.dev', - mainVersions: [ - { - version: 'stable', - url: 'https://angular.dev', - }, - { - version: 'v16', - url: 'https://v16.angular.io/docs', - }, - { - version: 'v15', - url: 'https://v15.angular.io/docs', - }, - { - version: 'v14', - url: 'https://v14.angular.io/docs', - }, - { - version: 'v13', - url: 'https://v13.angular.io/docs', - }, - { - version: 'v12', - url: 'https://v12.angular.io/docs', - }, - { - version: 'v11', - url: 'https://v11.angular.io/docs', - }, - { - version: 'v10', - url: 'https://v10.angular.io/docs', - }, - { - version: 'v9', - url: 'https://v9.angular.io/docs', - }, - { - version: 'v8', - url: 'https://v8.angular.io/docs', - }, - { - version: 'v7', - url: 'https://v7.angular.io/docs', - }, - { - version: 'v6', - url: 'https://v6.angular.io/docs', - }, - { - version: 'v5', - url: 'https://v5.angular.io/docs', - }, - { - version: 'v4', - url: 'https://v4.angular.io/docs', - }, - { - version: 'v2', - url: 'https://v2.angular.io/docs', - }, - ], -}; +import {VERSIONS_CONFIG} from '../constants/versions'; export interface Version { displayName: string; diff --git a/adev/src/index.html b/adev/src/index.html index d9cdd0c2009..1f75cbb5765 100644 --- a/adev/src/index.html +++ b/adev/src/index.html @@ -9,10 +9,12 @@ const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference'; const DARK_MODE_CLASS_NAME = 'docs-dark-mode'; const LIGHT_MODE_CLASS_NAME = 'docs-light-mode'; + const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)'; + const theme = localStorage.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) ?? 'auto'; const prefersDark = - window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + window.matchMedia && window.matchMedia(PREFERS_COLOR_SCHEME_DARK).matches; const documentClassList = this.document.documentElement.classList; // clearing classes before setting them.