feat: ssr

Author: HitkoDev

projects/ngx-highlightjs-demo/src/app/app.config.ts

@@ -4,9 +4,11 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import { provideGistOptions } from 'ngx-highlightjs/plus';
 import { environment } from '../environments/environment';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideClientHydration(withEventReplay()),
     provideHttpClient(withFetch()),
     provideHighlightOptions({
       // fullLibraryLoader: () => import('highlight.js'),

projects/ngx-highlightjs/line-numbers/src/line-numbers-lib.ts

@@ -1,7 +1,6 @@
-export function activateLineNumbers() {
-  const w: any = window;
-  const d: Document = document;
+import { type HLJSApi } from "highlight.js";
 
+export function activateLineNumbers(hljs: HLJSApi, document: Document) {
   const TABLE_NAME: string = 'hljs-ln',
     LINE_NAME: string = 'hljs-ln-line',
     CODE_BLOCK_NAME: string = 'hljs-ln-code',
@@ -10,15 +9,11 @@ export function activateLineNumbers() {
     DATA_ATTR_NAME: string = 'data-line-number',
     BREAK_LINE_REGEXP: RegExp = /\r\n|\r|\n/g;
 
-  if (w.hljs) {
-    w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
-    w.hljs.lineNumbersBlock = lineNumbersBlock;
-    w.hljs.lineNumbersValue = lineNumbersValue;
+  (hljs as any).initLineNumbersOnLoad = initLineNumbersOnLoad;
+  (hljs as any).lineNumbersBlock = lineNumbersBlock;
+  (hljs as any).lineNumbersValue = lineNumbersValue;
 
-    addStyles();
-  } else {
-    w.console.error('highlight.js not detected!');
-  }
+  addStyles();
 
   function isHljsLnCodeDescendant(domElt): boolean {
     let curElt = domElt;
@@ -128,7 +123,7 @@ export function activateLineNumbers() {
   });
 
   function addStyles() {
-    const css: HTMLStyleElement = d.createElement('style');
+    const css: HTMLStyleElement = document.createElement('style');
     css.type = 'text/css';
     css.innerHTML = format(
       '.{0}{border-collapse:collapse}' +
@@ -139,22 +134,22 @@ export function activateLineNumbers() {
         NUMBER_LINE_NAME,
         DATA_ATTR_NAME
       ]);
-    d.getElementsByTagName('head')[0].appendChild(css);
+    document.getElementsByTagName('head')[0].appendChild(css);
   }
 
   function initLineNumbersOnLoad(options) {
-    if (d.readyState === 'interactive' || d.readyState === 'complete') {
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
       documentReady(options);
     } else {
-      w.addEventListener('DOMContentLoaded', function () {
+      document.addEventListener('DOMContentLoaded', function () {
         documentReady(options);
       });
     }
   }
 
   function documentReady(options): void {
     try {
-      const blocks: NodeListOf<Element> = d.querySelectorAll('code.hljs,code.nohighlight');
+      const blocks: NodeListOf<Element> = document.querySelectorAll('code.hljs,code.nohighlight');
 
       for (const i in blocks) {
         if (blocks.hasOwnProperty(i)) {
@@ -164,7 +159,7 @@ export function activateLineNumbers() {
         }
       }
     } catch (e) {
-      w.console.error('LineNumbers error: ', e);
+      console.error('LineNumbers error: ', e);
     }
   }
 
@@ -177,9 +172,7 @@ export function activateLineNumbers() {
       return;
     }
 
-    async(function () {
-      element.innerHTML = lineNumbersInternal(element, options);
-    });
+    element.innerHTML = lineNumbersInternal(element, options);
   }
 
   function lineNumbersValue(value, options) {
@@ -336,10 +329,6 @@ export function activateLineNumbers() {
   /// HELPERS
   ///
 
-  function async(func) {
-    w.setTimeout(func, 0);
-  }
-
   /**
    * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
    * @param {string} format

projects/ngx-highlightjs/line-numbers/src/line-numbers.ts

@@ -3,10 +3,10 @@ import {
   inject,
   numberAttribute,
   booleanAttribute,
-  afterRenderEffect,
   input,
   ElementRef,
-  InputSignalWithTransform
+  InputSignalWithTransform,
+  effect
 } from '@angular/core';
 import { HIGHLIGHT_OPTIONS, HighlightJS, HighlightBase, LineNumbersOptions } from 'ngx-highlightjs';
 
@@ -20,9 +20,6 @@ export class HighlightLineNumbers {
   private readonly _highlight: HighlightBase = inject(HighlightBase);
   private readonly _nativeElement: HTMLElement = inject(ElementRef<HTMLElement>).nativeElement;
 
-  // Temp observer to observe when line numbers has been added to code element
-  private _lineNumbersObs: MutationObserver;
-
   readonly startFrom: InputSignalWithTransform<number, unknown> = input<number, unknown>(this.options?.startFrom, {
     transform: numberAttribute
   });
@@ -32,40 +29,24 @@ export class HighlightLineNumbers {
   });
 
   constructor() {
-    afterRenderEffect({
-      write: () => {
-        if (this._highlight.highlightResult()) {
-          this.addLineNumbers();
-        }
+    effect(() => {
+      if (this._highlight.highlightResult()) {
+        this.addLineNumbers();
       }
     });
   }
 
-  private addLineNumbers(): void {
-    // Clean up line numbers observer
-    this.destroyLineNumbersObserver();
-    requestAnimationFrame(async () => {
-      // Add line numbers
-      await this._hljs.lineNumbersBlock(this._nativeElement, {
-        startFrom: this.startFrom(),
-        singleLine: this.singleLine()
-      });
-      // If lines count is 1, the line numbers library will not add numbers
-      // Observe changes to add 'hljs-line-numbers' class only when line numbers is added to the code element
-      this._lineNumbersObs = new MutationObserver(() => {
-        if (this._nativeElement.firstElementChild?.tagName.toUpperCase() === 'TABLE') {
-          this._nativeElement.classList.add('hljs-line-numbers');
-        }
-        this.destroyLineNumbersObserver();
-      });
-      this._lineNumbersObs.observe(this._nativeElement, { childList: true });
+  private async addLineNumbers(): Promise<void> {
+    // Add line numbers
+    await this._hljs.lineNumbersBlock(this._nativeElement, {
+      startFrom: this.startFrom(),
+      singleLine: this.singleLine()
     });
-  }
-
-  private destroyLineNumbersObserver(): void {
-    if (this._lineNumbersObs) {
-      this._lineNumbersObs.disconnect();
-      this._lineNumbersObs = null;
+    // If lines count is 1, the line numbers library will not add numbers
+    if (this._nativeElement.firstElementChild?.tagName.toUpperCase() === 'TABLE') {
+      this._nativeElement.classList.add('hljs-line-numbers');
+    } else {
+      this._nativeElement.classList.remove('hljs-line-numbers');
     }
   }
 }

projects/ngx-highlightjs/plus/src/code-from-url.ts

@@ -1,5 +1,5 @@
-import { inject, Pipe, PipeTransform } from '@angular/core';
-import { Observable } from 'rxjs';
+import { inject, PendingTasks, Pipe, PipeTransform } from '@angular/core';
+import { Observable, tap } from 'rxjs';
 import { CodeLoader } from './code-loader';
 import { HIGHLIGHT_FILE_LOCATION, CodeFileLocation } from './code-file-location';
 import { isUrl } from './gist.model';
@@ -13,7 +13,11 @@ export class CodeFromUrlPipe implements PipeTransform {
 
   private _loader: CodeLoader = inject(CodeLoader);
 
+  private _pendingTasks: PendingTasks = inject(PendingTasks);
+
   transform(url: string): Observable<string> {
-    return this._loader.getCodeFromUrl(isUrl(url) ? url : `${ this._location.getPathname() }/${ url }`);
+    const done = this._pendingTasks.add()
+    return this._loader.getCodeFromUrl(isUrl(url) ? url : `${this._location.getPathname()}/${url}`)
+      .pipe(tap(done));
   }
 }

projects/ngx-highlightjs/plus/src/gist.ts

@@ -1,4 +1,4 @@
-import { Directive, Pipe, Input, Output, PipeTransform, EventEmitter, inject } from '@angular/core';
+import { Directive, Pipe, Input, Output, PipeTransform, EventEmitter, inject, PendingTasks } from '@angular/core';
 import { CodeLoader } from './code-loader';
 import { Gist } from './gist.model';
 
@@ -9,10 +9,16 @@ export class GistDirective {
 
   private _loader: CodeLoader = inject(CodeLoader);
 
+  private _pendingTasks: PendingTasks = inject(PendingTasks);
+
   @Input()
   set gist(value: string) {
     if (value) {
-      this._loader.getCodeFromGist(value).subscribe((gist: Gist) => this.gistLoad.emit(gist));
+      const done = this._pendingTasks.add()
+      this._loader.getCodeFromGist(value).subscribe((gist: Gist) => {
+        done()
+        this.gistLoad.emit(gist)
+      });
     }
   }
 

projects/ngx-highlightjs/src/lib/highlight-base.ts

@@ -1,12 +1,12 @@
 import {
   Directive,
   inject,
-  afterRenderEffect,
   ElementRef,
   InputSignal,
   WritableSignal,
   SecurityContext,
-  OutputEmitterRef
+  OutputEmitterRef,
+  effect
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import type { AutoHighlightResult, HighlightResult } from 'highlight.js';
@@ -32,40 +32,44 @@ export abstract class HighlightBase {
 
 
   constructor() {
-    afterRenderEffect({
-      write: () => {
-        const code: string = this.code();
-        // Set code text before highlighting
+    let codeInitial = true
+    effect(() => {
+      const code: string = this.code();
+      // Set code text before highlighting
+      if (codeInitial) {
+        // Effects run once to create dependency tree, avoid setting initial undefined content
+        codeInitial = false
+      } else {
         this.setTextContent(code || '');
-        if (code) {
-          this.highlightElement(code);
-        }
+      }
+      if (code) {
+        this.highlightElement(code);
       }
     });
 
-    afterRenderEffect({
-      write: () => {
-        const res: AutoHighlightResult = this.highlightResult();
+    let resultInitial = true
+    effect(() => {
+      const res: AutoHighlightResult = this.highlightResult();
+      if (resultInitial) {
+        // Effects run once to create dependency tree, avoid setting initial undefined content
+        resultInitial = false
+      } else {
         this.setInnerHTML(res?.value);
         // Forward highlight response to the highlighted output
         this.highlighted.emit(res);
       }
     });
   }
 
-  protected abstract highlightElement(code: string): Promise<void> ;
+  protected abstract highlightElement(code: string): Promise<void>;
 
   private setTextContent(content: string): void {
-    requestAnimationFrame(() =>
-      this._nativeElement.textContent = content
-    );
+    this._nativeElement.textContent = content
   }
 
   private setInnerHTML(content: string | null): void {
-    requestAnimationFrame(() =>
-      this._nativeElement.innerHTML = trustedHTMLFromStringBypass(
-        this._sanitizer.sanitize(SecurityContext.HTML, content) || ''
-      )
-    );
+    this._nativeElement.innerHTML = trustedHTMLFromStringBypass(
+      this._sanitizer.sanitize(SecurityContext.HTML, content) || ''
+    )
   }
 }