feat: Migrate to standalone components, closes #260

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

@@ -1,12 +1,37 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { Gist } from 'ngx-highlightjs/plus';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { NgScrollbarModule } from 'ngx-scrollbar';
 import { HighlightLoader } from 'ngx-highlightjs';
+import { Gist } from 'ngx-highlightjs/plus';
+import { GistComponent } from './gist/gist.component';
+import { HeaderComponent } from './header/header.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatToolbarModule,
+    NgScrollbarModule,
+    FlexLayoutModule,
+    HeaderComponent,
+    GistComponent
+  ]
 })
 export class AppComponent implements OnInit {
 

projects/ngx-highlightjs-demo/src/app/code/code.component.ts

@@ -1,16 +1,17 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { HighlightModule } from 'ngx-highlightjs';
 
 @Component({
-  selector: 'app-code',
-  template: `
-<!--    <ng-scrollbar track="horizontal" appearance="standard" pointerEventsMethod="scrollbar">-->
+    selector: 'app-code',
+    template: `
       <pre>
         <code [highlight]="code" [lineNumbers]="lineNumbers" [languages]="languages"></code>
       </pre>
-<!--    </ng-scrollbar>-->
   `,
-  styleUrls: ['./code.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+    styleUrls: ['./code.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HighlightModule]
 })
 export class CodeComponent {
   @Input() code!: string;

projects/ngx-highlightjs-demo/src/app/gist/gist.component.ts

@@ -1,13 +1,31 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { BehaviorSubject, map } from 'rxjs';
 import { HighlightLoader } from 'ngx-highlightjs';
-import { Gist } from 'ngx-highlightjs/plus';
+import { Gist, HighlightPlusModule } from 'ngx-highlightjs/plus';
+import { CodeComponent } from '../code/code.component';
 
 @Component({
   selector: 'app-gist',
   templateUrl: './gist.component.html',
   styleUrls: ['./gist.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatCardModule,
+    MatTabsModule,
+    MatButtonModule,
+    MatProgressBarModule,
+    HighlightPlusModule,
+    CodeComponent
+  ]
 })
 export class GistComponent implements OnInit {
 

projects/ngx-highlightjs-demo/src/app/header/header.component.ts

@@ -1,17 +1,13 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FlexModule } from '@angular/flex-layout/flex';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [FlexModule]
 })
-export class HeaderComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+export class HeaderComponent {
 }
-

projects/ngx-highlightjs-demo/src/main.ts

@@ -1,22 +1,52 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { GIST_OPTIONS } from 'ngx-highlightjs/plus';
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
 
 if (environment.production) {
   enableProdMode();
 }
 
 function bootstrap() {
-     platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
-   };
+  bootstrapApplication(AppComponent, {
+    providers: [
+      importProvidersFrom(BrowserModule.withServerTransition({ appId: 'serverApp' })),
+      provideHttpClient(),
+      {
+        provide: HIGHLIGHT_OPTIONS,
+        useValue: {
+          // fullLibraryLoader: () => import('highlight.js'),
+          lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
+          coreLibraryLoader: () => import('highlight.js/lib/core'),
+          languages: {
+            typescript: () => import('highlight.js/lib/languages/typescript'),
+            css: () => import('highlight.js/lib/languages/css'),
+            xml: () => import('highlight.js/lib/languages/xml')
+          },
+          themePath: 'assets/styles/androidstudio.css'
+        }
+      },
+      {
+        provide: GIST_OPTIONS,
+        useValue: {
+          // clientId:
+          // clientSecret:
+        }
+      },
+      provideAnimations()
+    ]
+  })
+    .catch(err => console.error(err));
+};
+
 
+if (document.readyState === 'complete') {
+  bootstrap();
+} else {
+  document.addEventListener('DOMContentLoaded', bootstrap);
+}
 
- if (document.readyState === 'complete') {
-   bootstrap();
- } else {
-   document.addEventListener('DOMContentLoaded', bootstrap);
- }
-

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

@@ -3,7 +3,8 @@ import { Observable } from 'rxjs';
 import { CodeLoader } from './code-loader';
 
 @Pipe({
-  name: 'codeFromUrl'
+  name: 'codeFromUrl',
+  standalone: true
 })
 export class CodeFromUrlPipe implements PipeTransform {
 

projects/ngx-highlightjs/plus/src/code-loader.ts

@@ -19,7 +19,7 @@ export class CodeLoader {
     if (this.isOAuthProvided()) {
       params = new HttpParams().set('client_id', this._options.clientId).set('client_secret', this._options.clientSecret);
     }
-    return this.fetchFile(`https://api.github.com/gists/${id}`, { params, responseType: 'json' });
+    return this.fetchFile(`https://api.github.com/gists/${ id }`, { params, responseType: 'json' });
   }
 
   /**

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

@@ -3,7 +3,8 @@ import { CodeLoader } from './code-loader';
 import { Gist } from './gist.model';
 
 @Directive({
-  selector: '[gist]'
+  selector: '[gist]',
+  standalone: true
 })
 export class GistDirective {
 
@@ -21,7 +22,8 @@ export class GistDirective {
 }
 
 @Pipe({
-  name: 'gistFile'
+  name: 'gistFile',
+  standalone: true
 })
 export class GistFilePipe implements PipeTransform {
   transform(gist: Gist, fileName: string): string | null {

projects/ngx-highlightjs/plus/src/highlight-plus.module.ts

@@ -1,21 +1,14 @@
 import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-import { HighlightModule } from 'ngx-highlightjs';
 import { GistFilePipe, GistDirective } from './gist';
 import { CodeFromUrlPipe } from './code-from-url';
 
 @NgModule({
   imports: [
-    HighlightModule,
-    HttpClientModule
-  ],
-  declarations: [
     GistDirective,
     GistFilePipe,
     CodeFromUrlPipe
   ],
   exports: [
-    HighlightModule,
     GistDirective,
     GistFilePipe,
     CodeFromUrlPipe

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

@@ -9,10 +9,9 @@ import { HIGHLIGHT_OPTIONS, HighlightLibrary, HighlightOptions } from './highlig
 })
 export class HighlightLoader {
   // Stream that emits when hljs library is loaded and ready to use
-  private readonly _ready = new BehaviorSubject<HighlightLibrary | null>(null);
+  private readonly _ready: BehaviorSubject<HighlightLibrary> = new BehaviorSubject<HighlightLibrary>(null);
   readonly ready: Observable<HighlightLibrary> = this._ready.asObservable().pipe(
     filter((hljs: HighlightLibrary | null) => !!hljs),
-    map((hljs: HighlightLibrary | null) => hljs as HighlightLibrary),
     take(1)
   );
 
@@ -150,7 +149,7 @@ export class HighlightLoader {
  */
 const importModule = (moduleLoader: Promise<any>): Observable<any> => {
   return from(moduleLoader).pipe(
-    filter((module: any) => !!module && !!module.default),
+    filter((module: any) => !!module?.default),
     map((module: any) => module.default)
   );
 };

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { Highlight } from './highlight';
 
 @NgModule({
-  declarations: [Highlight],
+  imports: [Highlight],
   exports: [Highlight]
 })
 export class HighlightModule {

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

@@ -8,7 +8,8 @@ import { HighlightLoader } from './highlight.loader';
 import { HighlightLibrary } from './highlight.model';
 
 @Component({
-  template: `<code [highlight]="code"></code>`
+  template: `<code [highlight]="code"></code>`,
+  standalone: true
 })
 class TestHighlightComponent implements OnInit {
   @Input() code: string;
@@ -33,7 +34,7 @@ describe('Highlight Directive', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [Highlight, TestHighlightComponent],
+      imports: [Highlight, TestHighlightComponent],
       providers: [
         { provide: PLATFORM_ID, useValue: 'browser' },
         { provide: HighlightLoader, useValue: highlightLoaderStub }

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

@@ -22,7 +22,8 @@ import { trustedHTMLFromStringBypass } from './trusted-types';
   host: {
     '[class.hljs]': 'true'
   },
-  selector: '[highlight]'
+  selector: '[highlight]',
+  standalone: true
 })
 export class Highlight implements OnChanges {