From 75ff08ed93d36c2179de974d8b7a8ea1911aa26b Mon Sep 17 00:00:00 2001 From: Suguru Inatomi Date: Fri, 29 Nov 2024 12:22:09 +0900 Subject: [PATCH] refactor: use Angular modern styles (#493) --- src/app/app.config.ts | 10 +++---- src/app/pages/home/home.component.ts | 4 +-- .../pages/markdown/markdown-page.component.ts | 15 ++++++----- src/app/shared/card/card.component.html | 9 ------- src/app/shared/card/card.component.ts | 13 ++++++++-- .../icons/icon-book/icon-book.component.ts | 1 - .../icon-calendar/icon-calendar.component.ts | 1 - .../icon-external-link.component.ts | 1 - .../icons/icon-home/icon-home.component.ts | 1 - .../icons/icon-menu/icon-menu.component.ts | 1 - .../icon-online/icon-online.component.ts | 1 - .../icon-people/icon-people.component.ts | 1 - .../markdown-outlet.component.ts | 26 +++++++------------ src/app/shared/nav-list/nav-list.ts | 2 -- 14 files changed, 35 insertions(+), 51 deletions(-) delete mode 100644 src/app/shared/card/card.component.html diff --git a/src/app/app.config.ts b/src/app/app.config.ts index f386f987..4d59a4b0 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,10 +1,10 @@ -import { provideHttpClient } from '@angular/common/http'; +import { provideHttpClient, withFetch } from '@angular/common/http'; import { ApplicationConfig } from '@angular/core'; -import { provideClientHydration } from '@angular/platform-browser'; +import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser'; import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router'; -import { routes } from './app.routes'; import { provideAppTitleStrategy } from './app-title-strategy'; +import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [ @@ -16,8 +16,8 @@ export const appConfig: ApplicationConfig = { }), withComponentInputBinding(), ), - provideHttpClient(), - provideClientHydration(), + provideHttpClient(withFetch()), + provideClientHydration(withIncrementalHydration()), provideAppTitleStrategy('Angular Japan User Group'), ], }; diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 5c669527..0fe48508 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -6,13 +6,11 @@ import { ICON_COMPONENTS } from '../../shared/icons'; @Component({ imports: [RouterLink, CardComponent, ICON_COMPONENTS], templateUrl: './home.component.html', - styles: [ - ` + styles: ` :host { display: block; } `, - ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomePageComponent {} diff --git a/src/app/pages/markdown/markdown-page.component.ts b/src/app/pages/markdown/markdown-page.component.ts index 92d0bd00..c0bef2b8 100644 --- a/src/app/pages/markdown/markdown-page.component.ts +++ b/src/app/pages/markdown/markdown-page.component.ts @@ -1,19 +1,20 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { MarkdownOutletComponent } from '../../shared/markdown-outlet/markdown-outlet.component'; @Component({ imports: [MarkdownOutletComponent], - template: ``, - styles: [ - ` + template: ` + @defer (hydrate never) { + + } + `, + styles: ` :host { display: block; } `, - ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MarkdownPageComponent { - @Input({ required: true }) - readonly content!: string; + readonly content = input.required(); } diff --git a/src/app/shared/card/card.component.html b/src/app/shared/card/card.component.html deleted file mode 100644 index 7df16246..00000000 --- a/src/app/shared/card/card.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- - -
-
- -
-
diff --git a/src/app/shared/card/card.component.ts b/src/app/shared/card/card.component.ts index bb123f9d..4badef7e 100644 --- a/src/app/shared/card/card.component.ts +++ b/src/app/shared/card/card.component.ts @@ -2,8 +2,17 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-card', - standalone: true, - templateUrl: './card.component.html', + template: ` +
+
+ + +
+
+ +
+
+ `, styleUrls: ['./card.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/shared/icons/icon-book/icon-book.component.ts b/src/app/shared/icons/icon-book/icon-book.component.ts index 7df7f7bd..4ba8a0fc 100644 --- a/src/app/shared/icons/icon-book/icon-book.component.ts +++ b/src/app/shared/icons/icon-book/icon-book.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-icon-book', - standalone: true, template: ` diff --git a/src/app/shared/icons/icon-online/icon-online.component.ts b/src/app/shared/icons/icon-online/icon-online.component.ts index 1e1e788b..663e68b8 100644 --- a/src/app/shared/icons/icon-online/icon-online.component.ts +++ b/src/app/shared/icons/icon-online/icon-online.component.ts @@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-icon-online', - standalone: true, template: ` } `, @@ -22,14 +18,12 @@ import { processMarkdown } from '../markdown'; }) export class MarkdownOutletComponent { readonly #sanitizer = inject(DomSanitizer); - readonly #content = signal(null); - readonly rendered$ = toObservable(this.#content).pipe( - switchMap((content) => processMarkdown(content ?? '')), - map((html) => this.#sanitizer.bypassSecurityTrustHtml(html)), - ); - - @Input() - set content(value: string) { - this.#content.set(value); - } + readonly content = input.required(); + readonly renderedContent = resource({ + request: () => this.content() ?? undefined, + loader: async ({ request: content }) => { + const html = await processMarkdown(content); + return this.#sanitizer.bypassSecurityTrustHtml(html); + }, + }); } diff --git a/src/app/shared/nav-list/nav-list.ts b/src/app/shared/nav-list/nav-list.ts index 07bc19cd..6ec0650f 100644 --- a/src/app/shared/nav-list/nav-list.ts +++ b/src/app/shared/nav-list/nav-list.ts @@ -4,7 +4,6 @@ import { RouterLinkActive } from '@angular/router'; @Directive({ // eslint-disable-next-line @angular-eslint/component-selector selector: '[appNavListItem]', - standalone: true, // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { class: 'flex items-center h-12 px-4 no-underline text-black hover:bg-gray-100', @@ -22,7 +21,6 @@ export class NavListItemDirective { @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector selector: '[appNavList]', - standalone: true, // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { class: 'flex flex-col py-2',