feat: prompts hljs is not found in development environment (#23)

README.md

@@ -103,7 +103,7 @@ Will render each `<pre><code>`:
 | Property | Description | Type | Default | Global Config |
 |----------|-------------|------|---------|---------------|
 | `[mode]` | - `default` Will render each `<pre><code>`<br>- `simple` Render all content according to `lang` language | `default, simple` | `simple` | ✅ |
-| `[options]` | Equar [configure(options)](http://highlightjs.readthedocs.io/en/latest/api.html#configure-options) | `any` | - | ✅ |
+| `[options]` | Equar [configure(options)](https://highlightjs.readthedocs.io/en/latest/api.html#configure) | `any` | - | ✅ |
 | `[lang]` | Uses language detection by default but you can specify the language | `string` | `html` | ✅ |
 | `[code]` | Specify content | `string` | `html` | - |
 

lib/ng-package.json

@@ -5,5 +5,5 @@
   "lib": {
     "entryFile": "public_api.ts"
   },
-  "allowedNonPeerDependencies": ["tslib", "angular"]
+  "allowedNonPeerDependencies": ["tslib", "angular", "highlight.js"]
 }

lib/package.json

@@ -19,5 +19,8 @@
   "bugs": {
     "url": "https://github.com/cipchk/ngx-highlight-js/issues"
   },
-  "homepage": "https://cipchk.github.io/ngx-highlight-js/"
+  "homepage": "https://cipchk.github.io/ngx-highlight-js/",
+  "dependencies": {
+    "highlight.js": "^11.0.0"
+  }
 }

lib/spec/directive.spec.ts

@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HighlightJsModule } from '../src/highlight-js.module';
-
-const html = ``;
+import { DOCUMENT } from '@angular/common';
 
 describe('Component: ngx-highlight-js', () => {
   let fixture: ComponentFixture<any>;
@@ -14,19 +13,31 @@ describe('Component: ngx-highlight-js', () => {
       declarations: [TestComponent],
       imports: [HighlightJsModule],
     });
+  });
+
+  function createComp() {
     fixture = TestBed.createComponent(TestComponent);
     context = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }
 
   it('should be working', () => {
+    createComp();
     const rootEl = fixture.nativeElement as HTMLDivElement;
     const el = rootEl.querySelector('textarea') as HTMLTextAreaElement;
     expect(el.style.display).toBe('none');
     const hljsEl = rootEl.querySelector('.hljs') as HTMLDivElement;
     expect(hljsEl != null).toBe(true);
     expect(hljsEl.classList).toContain(`typescript`);
   });
+
+  it(`can't load hljs in window`, () => {
+    spyOn(console, 'warn');
+    const doc = TestBed.inject(DOCUMENT);
+    spyOnProperty(doc as any, 'defaultView').and.returnValue({});
+    createComp();
+    expect(console.warn).toHaveBeenCalled();
+  });
 });
 
 @Component({

lib/src/highlight-js.config.ts

@@ -1,4 +1,5 @@
 import { InjectionToken } from '@angular/core';
+import type { HLJSOptions } from 'highlight.js';
 
 export interface HighlightJsConfig {
   /**
@@ -12,9 +13,9 @@ export interface HighlightJsConfig {
    */
   lang?: string;
   /**
-   * Equar [configure(options)](http://highlightjs.readthedocs.io/en/latest/api.html#configure-options)
+   * Equar [configure(options)](https://highlightjs.readthedocs.io/en/latest/api.html#configure)
    */
-  options?: any;
+  options?: Partial<HLJSOptions>;
 }
 
 export const HIGHLIGHTJS_CONFIG = new InjectionToken<HighlightJsConfig>('HighlightJs-Config');

lib/src/highlight-js.directive.ts

@@ -3,8 +3,9 @@ import { DOCUMENT } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { HighlightJsConfig, HIGHLIGHTJS_CONFIG } from './highlight-js.config';
+import type { HLJSApi, HLJSOptions } from 'highlight.js';
 
-declare const hljs: any;
+declare const ngDevMode: boolean;
 
 @Directive({
   selector: '[highlight-js]',
@@ -15,15 +16,15 @@ declare const hljs: any;
   standalone: true,
 })
 export class HighlightJsDirective implements AfterViewInit, OnDestroy {
-  @Input() options: any;
+  @Input() options?: Partial<HLJSOptions>;
   @Input() lang = 'html';
-  @Input() code!: string;
+  @Input() code?: string;
   @Input() mode: 'default' | 'simple' = 'simple';
 
   protected codeEl?: HTMLElement;
-  protected parentEl!: HTMLElement;
+  protected parentEl?: HTMLElement;
   private modelValue$?: Subscription;
-  private observer!: MutationObserver;
+  private observer?: MutationObserver;
 
   constructor(
     private el: ElementRef<HTMLElement>,
@@ -44,7 +45,8 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
       this.destroy();
       const el = this.el.nativeElement;
       const code = this.code || '' + el.innerHTML.trim();
-      this.codeEl = this.doc.createElement(this.mode === 'default' ? 'div' : 'pre') as HTMLElement;
+      const doc = this.doc as Document;
+      this.codeEl = doc.createElement(this.mode === 'default' ? 'div' : 'pre') as HTMLElement;
       if (this.codeEl == null) return;
 
       const isSimple = this.mode === 'simple';
@@ -60,12 +62,20 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
         this.parentEl.appendChild(this.codeEl);
       }
       this.codeEl.innerHTML = code;
+      const hljs: HLJSApi = (doc.defaultView as any).hljs;
+      if (hljs == null) {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+          console.warn(`Can't find hljs under window`);
+        }
+        return;
+      }
+
       hljs.configure({ ...this.options });
 
       if (isSimple) {
         hljs.highlightElement(this.codeEl);
       } else {
-        this.codeEl.querySelectorAll('pre code').forEach((block) => {
+        this.codeEl.querySelectorAll<HTMLElement>('pre code').forEach((block) => {
           hljs.highlightElement(block);
         });
       }
@@ -114,9 +124,6 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
   }
 
   private destroyMutation(): void {
-    if (!this.observer) {
-      return;
-    }
-    this.observer.disconnect();
+    this.observer?.disconnect();
   }
 }

package.json

@@ -39,7 +39,8 @@
     "@angular/router": "^16.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.13.0",
+    "highlight.js": "^11.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.3",

src/app/components/demo.component.html

@@ -56,8 +56,7 @@ <h5 class="mt-5 mb-3">Only `&lt;textarea>` Tag</h5>
       <div class="col-sm-6">
         <p>
           <strong>[options]</strong> equar
-          <a href="http://highlightjs.readthedocs.io/en/latest/api.html#configure-options" target="_blank">configure(options)</a>.
-          (optional)
+          <a href="https://highlightjs.readthedocs.io/en/latest/api.html#configure" target="_blank">configure(options)</a>. (optional)
         </p>
         <p><strong>[lang]</strong> uses language detection by default but you can specify the language. (optional)</p>
       </div>