release: 14.0.0 (#16)

cipchk · Jun 24, 2022 · a29f74d · a29f74d
1 parent 4121327
commit a29f74d
Show file tree

Hide file tree

Showing 14 changed files with 1,306 additions and 107 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -23,7 +23,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -40,7 +40,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 
@@ -54,7 +54,7 @@ jobs:
       - name: checkout
         uses: actions/checkout@master
 
-      - uses: borales/actions-yarn@v2.3.0
+      - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install
 

diff --git a/README.md b/README.md
@@ -17,6 +17,19 @@ Angular for syntax highlighting with highlight.js
 npm install --save ngx-highlight-js
 ```
 
+### 2、Add highlight.js
+
+Load the [highlight.js](https://highlightjs.org/download/) and theme css in page.
+
+```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css" />
+<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
+```
+
+## Usage
+
+**NgModule**
+
 Import the `HighlightJsModule` in to your root `AppModule`.
 
 ```typescript
@@ -29,17 +42,20 @@ export class AppModule {
 }
 ```
 
-### 2、Add highlight.js
-
-Load the [highlight.js](https://highlightjs.org/download/) and theme css in page.
+**Standalone**
 
-```html
-<link rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
+```typescript
+import { Component } from '@angular/core';
+import { HighlightJsDirective } from 'ngx-highlight-js';
+@Component({
+  selector: 'test',
+  template: `<textarea highlight-js [lang]="'bash'">npm install --save ngx-highlight-js</textarea>`,
+  standalone: true,
+  imports: [HighlightJsDirective],
+})
+export class SimpleComponent {}
 ```
 
-## Usage
 ### Simple mode
 
 ```html

diff --git a/angular.json b/angular.json
@@ -84,7 +84,10 @@
             "main": "lib/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js"
+            "karmaConfig": "karma.conf.js",
+            "scripts": [
+              "src/assets/highlight.min.js"
+            ]
           }
         },
         "lint": {
@@ -101,8 +104,9 @@
       }
     }
   },
-  "defaultProject": "ngx-highlight-js",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/lib/package.json b/lib/package.json
@@ -1,13 +1,14 @@
 {
   "name": "ngx-highlight-js",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Angular for syntax highlighting with highlight.js",
   "keywords": [
     "highlight",
     "ngx-highlight-js",
     "highlight.js",
     "highlight-js",
-    "syntax highlighting"
+    "syntax highlighting",
+    "angular standalone library"
   ],
   "author": "cipchk <[email protected]>",
   "license": "MIT",

diff --git a/lib/spec/directive.spec.ts b/lib/spec/directive.spec.ts
@@ -16,16 +16,16 @@ describe('Component: ngx-highlight-js', () => {
     });
     fixture = TestBed.createComponent(TestComponent);
     context = fixture.componentInstance;
-    (window as any).hljs = {
-      configure: jasmine.createSpy(),
-      highlightBlock: jasmine.createSpy(),
-    };
     fixture.detectChanges();
   });
 
   it('should be working', () => {
-    const el = (fixture.nativeElement as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
+    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`);
   });
 });
 

diff --git a/lib/src/highlight-js.directive.ts b/lib/src/highlight-js.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, OnDestroy, AfterViewInit, Inject, Optional } from '@angular/core';
+import { Directive, ElementRef, Input, OnDestroy, AfterViewInit, Inject, Optional, NgZone } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { NgModel } from '@angular/forms';
 import { Subscription } from 'rxjs';
@@ -12,6 +12,7 @@ declare const hljs: any;
     '[style.display]': `mode === 'simple' ? 'none' : null`,
   },
   exportAs: 'highlightJs',
+  standalone: true,
 })
 export class HighlightJsDirective implements AfterViewInit, OnDestroy {
   @Input() options: any;
@@ -29,6 +30,7 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
     @Optional() private ngModel: NgModel,
     @Inject(DOCUMENT) private doc: any,
     @Optional() @Inject(HIGHLIGHTJS_CONFIG) cog: HighlightJsConfig,
+    private ngZone: NgZone,
   ) {
     Object.assign(this, cog);
   }
@@ -38,32 +40,36 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
   }
 
   private init(): void {
-    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 isSimple = this.mode === 'simple';
-    if (isSimple) {
-      if (this.lang) {
-        this.codeEl.className = this.lang;
+    this.ngZone.runOutsideAngular(() => {
+      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;
+      if (this.codeEl == null) return;
+
+      const isSimple = this.mode === 'simple';
+      if (isSimple) {
+        if (this.lang) {
+          this.codeEl.className = this.lang;
+        }
+        this.parentEl = el.parentNode as HTMLElement;
+        this.parentEl.insertBefore(this.codeEl, el.nextSibling);
+      } else {
+        this.parentEl = el;
+        this.parentEl.innerHTML = ``;
+        this.parentEl.appendChild(this.codeEl);
       }
-      this.parentEl = el.parentNode as HTMLElement;
-      this.parentEl.insertBefore(this.codeEl, el.nextSibling);
-    } else {
-      this.parentEl = el;
-      this.parentEl.innerHTML = ``;
-      this.parentEl.appendChild(this.codeEl);
-    }
-    this.codeEl.innerHTML = code;
-    hljs.configure({ ...this.options });
+      this.codeEl.innerHTML = code;
+      hljs.configure({ ...this.options });
 
-    if (isSimple) {
-      hljs.highlightBlock(this.codeEl);
-    } else {
-      this.codeEl.querySelectorAll('pre code').forEach((block) => {
-        hljs.highlightBlock(block);
-      });
-    }
+      if (isSimple) {
+        hljs.highlightElement(this.codeEl);
+      } else {
+        this.codeEl.querySelectorAll('pre code').forEach((block) => {
+          hljs.highlightElement(block);
+        });
+      }
+    });
   }
 
   private destroy(): void {
@@ -97,11 +103,13 @@ export class HighlightJsDirective implements AfterViewInit, OnDestroy {
     if (typeof MutationObserver === 'undefined') {
       return;
     }
-    this.observer = new MutationObserver(this.init.bind(this));
-    this.observer.observe(this.el.nativeElement, {
-      characterData: true,
-      childList: true,
-      subtree: true,
+    this.ngZone.runOutsideAngular(() => {
+      this.observer = new MutationObserver(this.init.bind(this));
+      this.observer.observe(this.el.nativeElement, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      });
     });
   }
 

diff --git a/lib/src/highlight-js.module.ts b/lib/src/highlight-js.module.ts
@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HighlightJsDirective } from './highlight-js.directive';
 
+const DIRECTIVES = [HighlightJsDirective];
+
 @NgModule({
-  imports: [FormsModule],
-  declarations: [HighlightJsDirective],
-  exports: [HighlightJsDirective],
+  imports: [FormsModule, ...DIRECTIVES],
+  exports: DIRECTIVES,
 })
 export class HighlightJsModule {}
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "ngx-highlight-js",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "description": "Angular for syntax highlighting with highlight.js",
   "keywords": [
     "highlight",
     "ngx-highlight-js",
     "highlight.js",
     "highlight-js",
-    "syntax highlighting"
+    "syntax highlighting",
+    "angular standalone library"
   ],
   "author": "cipchk <[email protected]>",
   "license": "MIT",
@@ -21,47 +22,46 @@
   "homepage": "https://cipchk.github.io/ngx-highlight-js/",
   "scripts": {
     "analyze": "ng b --stats-json --source-map",
-    "lint": "ng l",
+    "lint": "ng lint",
     "test": "ng t --no-progress --browsers=ChromeHeadlessCI --code-coverage --no-watch",
     "build": "node scripts/build.js",
     "release:next": "npm run build && cd publish && npm publish --access public --tag next",
     "release": "npm run build && cd publish && npm publish --access public"
   },
   "dependencies": {
-    "@angular/animations": "~13.1.1",
-    "@angular/common": "~13.1.1",
-    "@angular/compiler": "~13.1.1",
-    "@angular/core": "~13.1.1",
-    "@angular/forms": "~13.1.1",
-    "@angular/platform-browser": "~13.1.1",
-    "@angular/platform-browser-dynamic": "~13.1.1",
-    "@angular/router": "~13.1.1",
-    "rxjs": "~7.4.0",
-    "tslib": "^2.3.1",
+    "@angular/animations": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.1.2",
-    "@angular/cli": "~13.1.2",
-    "@angular/compiler-cli": "~13.1.0",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~3.10.0",
+    "@angular-devkit/build-angular": "^14.0.3",
+    "@angular/cli": "~14.0.3",
+    "@angular/compiler-cli": "^14.0.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.1.0",
     "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-chrome-launcher": "~3.1.1",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.5.2",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/schematics": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
+    "typescript": "~4.7.4",
+    "@angular-eslint/builder": "^14.0.0",
+    "@angular-eslint/eslint-plugin": "^14.0.0",
+    "@angular-eslint/eslint-plugin-template": "^14.0.0",
+    "@angular-eslint/schematics": "^14.0.0",
+    "@angular-eslint/template-parser": "^14.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "codecov": "^3.8.3",
-    "eslint": "^8.5.0",
-    "ng-packagr": "^13.1.2"
+    "eslint": "^8.18.0",
+    "ng-packagr": "^14.0.2"
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { DemoComponent } from './components/demo.component';
 
 @Component({
   selector: 'app-root',
@@ -8,5 +9,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
     <demo></demo>
   `,
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [DemoComponent],
 })
 export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts