refactor(docs-infra): use resource() to highlight code in the home page code block

The home page code block created a new Promise in a `computed` whenever
the code, language or theme changed, and unwrapped it with the `async`
pipe.

Load the highlighted code with `resource()` instead. Its params track the
code, language and theme, so the code is highlighted again when any of
them changes, and the template reads the value directly. This removes
the last `AsyncPipe` usage in adev.

Unlike the `async` pipe, `resource()` tracks its loading as pending work,
so the application is only considered stable once the code has been
highlighted.

Add a spec covering the initial highlight, theme changes and the
language input.

Author: MeAkib

adev/src/app/features/home/components/code-block/code-block.spec.ts

@@ -0,0 +1,78 @@
+/*!
+ * @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
+ */
+
+import {signal} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ThemeManager} from '../../../../core/services/theme-manager.service';
+import {CodeHighlighter} from '../../code-highlighting/code-highlighter';
+import {CodeBlock} from './code-block';
+
+interface HighlightOptions {
+  cssVariablePrefix: string;
+  lang: string;
+  theme: string;
+}
+
+describe('CodeBlock', () => {
+  let fixture: ComponentFixture<CodeBlock>;
+  let codeToHtml: jasmine.Spy<(code: string, options: HighlightOptions) => Promise<string>>;
+  const resolvedTheme = signal<'dark' | 'light'>('light');
+
+  function renderedCode(): string {
+    return fixture.nativeElement.querySelector('code').innerHTML;
+  }
+
+  beforeEach(async () => {
+    resolvedTheme.set('light');
+    codeToHtml = jasmine
+      .createSpy('codeToHtml')
+      .and.callFake(
+        async (code: string, options: HighlightOptions) =>
+          `<span class="${options.theme}">${code}</span>`,
+      );
+
+    TestBed.configureTestingModule({
+      providers: [
+        {provide: CodeHighlighter, useValue: {codeToHtml}},
+        {provide: ThemeManager, useValue: {resolvedTheme}},
+      ],
+    });
+
+    fixture = TestBed.createComponent(CodeBlock);
+    fixture.componentRef.setInput('code', 'const answer = 42;');
+    await fixture.whenStable();
+  });
+
+  it('should render the highlighted code', () => {
+    expect(codeToHtml).toHaveBeenCalledOnceWith('const answer = 42;', {
+      cssVariablePrefix: '--shiki-',
+      lang: 'angular-ts',
+      theme: 'github-light',
+    });
+    expect(renderedCode()).toBe('<span class="github-light">const answer = 42;</span>');
+  });
+
+  it('should highlight the code again when the theme changes', async () => {
+    resolvedTheme.set('dark');
+    await fixture.whenStable();
+
+    expect(renderedCode()).toBe('<span class="github-dark">const answer = 42;</span>');
+  });
+
+  it('should highlight the code with the given language', async () => {
+    fixture.componentRef.setInput('language', 'angular-html');
+    await fixture.whenStable();
+
+    expect(codeToHtml).toHaveBeenCalledWith('const answer = 42;', {
+      cssVariablePrefix: '--shiki-',
+      lang: 'angular-html',
+      theme: 'github-light',
+    });
+  });
+});

adev/src/app/features/home/components/code-block/code-block.ts

@@ -6,16 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {AsyncPipe} from '@angular/common';
-import {Component, computed, inject, input} from '@angular/core';
+import {Component, inject, input, resource} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {ThemeManager} from '../../../../core/services/theme-manager.service';
 import {CodeHighlighter} from '../../code-highlighting/code-highlighter';
 
 @Component({
   selector: 'adev-code-block',
-  template: `<pre><code [innerHTML]="highlightedCode() | async"></code></pre>`,
-  imports: [AsyncPipe],
+  template: `<pre><code [innerHTML]="highlightedCode.value()"></code></pre>`,
   styles: `
     ::ng-deep pre {
       margin: 0;
@@ -29,15 +27,19 @@ export class CodeBlock {
   sanitizer = inject(DomSanitizer);
   theme = inject(ThemeManager);
 
-  highlightedCode = computed(() => {
-    return this.codeHighlighter
-      .codeToHtml(this.code(), {
+  highlightedCode = resource({
+    params: () => ({
+      code: this.code(),
+      lang: this.language(),
+      theme: this.theme.resolvedTheme() === 'dark' ? 'github-dark' : 'github-light',
+    }),
+    loader: async ({params: {code, lang, theme}}) => {
+      const highlightedHtml = await this.codeHighlighter.codeToHtml(code, {
         cssVariablePrefix: '--shiki-',
-        lang: this.language(),
-        theme: this.theme.resolvedTheme() === 'dark' ? 'github-dark' : 'github-light',
-      })
-      .then((hightlightedHtml) => {
-        return this.sanitizer.bypassSecurityTrustHtml(hightlightedHtml);
+        lang,
+        theme,
       });
+      return this.sanitizer.bypassSecurityTrustHtml(highlightedHtml);
+    },
   });
 }