Pre-render content in model before display to speed things up. Also add loading template

Author: CodyTolene

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proangular/ngx-gist",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets.",
   "author": "Pro Angular <webmaster@proangular.com>",
   "homepage": "https://www.proangular.com",

package.json

@@ -1,22 +1,34 @@
 import { NgxGist } from './ngx-gist.model';
 import { Pipe, PipeTransform } from '@angular/core';
+import { isStringArray } from './ngx-gist.utilities';
+import { isNonEmptyString } from 'dist/npm';
 
 @Pipe({ name: 'gistFileFilter' })
 export class GistFileFilterPipe implements PipeTransform {
   public transform(
-    files: NgxGist['files'] | null,
-    displayOnlyFileName?: string | null,
-  ): NgxGist['files'] {
+    files: NgxGist['highlightedFiles'] | null,
+    displayOnlyFileNames?: string | readonly string[] | null,
+  ): NgxGist['highlightedFiles'] {
     if (!files) {
-      return {};
+      return [];
     }
 
-    if (!displayOnlyFileName) {
+    if (!displayOnlyFileNames || displayOnlyFileNames === '') {
       return files;
     }
 
-    return {
-      [displayOnlyFileName]: files[displayOnlyFileName],
-    };
+    if (isNonEmptyString(displayOnlyFileNames)) {
+      return (
+        files.filter(({ filename }) => displayOnlyFileNames === filename) ?? []
+      );
+    }
+
+    if (isStringArray(displayOnlyFileNames)) {
+      return files.filter(({ filename }) =>
+        displayOnlyFileNames.includes(filename),
+      );
+    }
+
+    return files;
   }
 }

src/app/public/ngx-gist-content.pipe.ts

@@ -2,8 +2,8 @@ import { NgxGistService } from './ngx-gist.service';
 import { isNonEmptyValue } from './ngx-gist.utilities';
 import { NgxGist } from './ngx-gist.model';
 import { Component, Inject, Input, OnInit } from '@angular/core';
-import { Language, default as hljs } from 'highlight.js';
-import { filter, firstValueFrom, ReplaySubject } from 'rxjs';
+import { Language } from 'highlight.js';
+import { BehaviorSubject, filter, firstValueFrom, ReplaySubject } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DOCUMENT } from '@angular/common';
 
@@ -12,18 +12,16 @@ import { DOCUMENT } from '@angular/common';
   selector: 'ngx-gist',
   template: `
     <mat-card class="code-container">
-      <!-- TODO: LOADING ICON OR MESSAGE -->
-      <mat-tab-group *ngIf="gist as g">
+      <mat-tab-group *ngIf="gistChanges | async as gist; else loading">
         <mat-tab
           *ngFor="
-            let file of g.files | gistFileFilter: displayOnlyFileName | keyvalue
+            let file of gist.highlightedFiles
+              | gistFileFilter: displayOnlyFileName
           "
-          [label]="file.key"
+          [label]="file.filename"
         >
           <pre>
-            <code 
-              [innerHTML]="getHighlightJsContent(g | gistContent: file.key)"
-            ></code>
+            <code [innerHTML]="file.highlightedContent"></code>
           </pre>
         </mat-tab>
       </mat-tab-group>
@@ -36,6 +34,7 @@ import { DOCUMENT } from '@angular/common';
           <mat-icon>link</mat-icon> Open Gist on GitHub
         </a>
       </mat-card-footer>
+      <ng-template #loading> Loading Code Snippet... </ng-template>
     </mat-card>
   `,
   styleUrls: ['./ngx-gist.component.scss'],
@@ -66,12 +65,13 @@ export class NgxGistComponent implements OnInit {
    *
    * Default: `undefined`
    */
-  @Input() public gist?: NgxGist;
-  // We want reactive behavior for `gistId` so we can update gists asynchronously
-  private readonly gistIdSubject = new ReplaySubject<
-    NgxGistComponent['gistId']
-  >(1);
-  public readonly gistIdChanges = this.gistIdSubject.asObservable();
+  @Input() public set gist(value: NgxGist | undefined) {
+    this.gistSubject.next(value);
+  }
+  private readonly gistSubject = new BehaviorSubject<NgxGistComponent['gist']>(
+    undefined,
+  );
+  public readonly gistChanges = this.gistSubject.asObservable();
   /**
    * Provide the GitHub gist id to be fetched and loaded. This can be found in
    * URL of the gists you create. For example the id `TH1515th31DT0C0PY` in:
@@ -82,6 +82,11 @@ export class NgxGistComponent implements OnInit {
   @Input() public set gistId(value: string) {
     this.gistIdSubject.next(value);
   }
+  // We want reactive behavior for `gistId` so we can update gists asynchronously
+  private readonly gistIdSubject = new ReplaySubject<
+    NgxGistComponent['gistId']
+  >(1);
+  public readonly gistIdChanges = this.gistIdSubject.asObservable();
   /**
    * When defined, override automatic language detection [and styling] and
    * treat all gists as this lanuage.
@@ -137,31 +142,17 @@ export class NgxGistComponent implements OnInit {
       });
   }
 
-  // TODO: Work on speeding this call up. Or possibly pre-render instead.
-  public getHighlightJsContent(value: string): string {
-    const userSpecifiedLanguage = this.languageName;
-    if (userSpecifiedLanguage) {
-      return hljs.highlight(value, { language: userSpecifiedLanguage }).value;
-    }
-
-    return hljs.highlightAuto(value).value;
-  }
-
   private async fetchAndSetGist(gistId: string): Promise<void> {
-    // Use the initial gist model as a fallback for a failed fetch. This
-    // enables us to have a fallback gist snippet should we be offline or
-    // the data is unavailable for some reason.
-    const initialGist = this.gist ? { ...this.gist } : undefined;
-
     // Fetch and hydrate model or fallback to initial gist.
-    this.gist =
-      (await firstValueFrom(this.ngxGistService.get(gistId))) ?? initialGist;
+    const fetcheGist =
+      (await firstValueFrom(this.ngxGistService.get(gistId))) ?? undefined;
+    this.gist = fetcheGist;
 
-    if (this.useCache && this.gist) {
+    if (this.useCache && fetcheGist) {
       // Set value in cache for reuse saving on the amount of HTTP requests.
       // Set refresh time to be a hard coded 24 hours. This was once configurable
       // but I decided against it for simplicities sake on ease of use.
-      this.ngxGistService.setToCache(this.gist, 1440);
+      this.ngxGistService.setToCache(fetcheGist, 1440);
     }
   }
 

src/app/public/ngx-gist-file-filter.pipe.ts

@@ -5,9 +5,10 @@ import {
   isNonEmptyString,
   parsedJsonFromStringCodec,
 } from './ngx-gist.utilities';
+import { default as hljs } from 'highlight.js';
 
 export class NgxGist implements Gist {
-  public constructor(args: Gist) {
+  public constructor(args: Gist & Pick<NgxGist, 'languageOverride'>) {
     this.comments = args.comments;
     this.comments_url = args.comments_url;
     this.commits_url = args.commits_url;
@@ -28,8 +29,23 @@ export class NgxGist implements Gist {
     this.updated_at = new Date(args.updated_at);
     this.url = args.url;
     this.user = args.user;
+
+    // Additional properties
+    this.languageOverride = args.languageOverride;
+    const highlightedFiles: NgxGist['highlightedFiles'] = [];
+    for (const key in this.files) {
+      if (this.files[key]) {
+        const file = this.files[key];
+        highlightedFiles.push({
+          ...file,
+          highlightedContent: getHighlightedContent(file.content),
+        });
+      }
+    }
+    this.highlightedFiles = highlightedFiles;
   }
 
+  /** Core gist properties */
   /* eslint-disable @typescript-eslint/naming-convention */
   public readonly comments: number;
   public readonly comments_url: string;
@@ -53,23 +69,36 @@ export class NgxGist implements Gist {
   public readonly user?: unknown;
   /* eslint-enable @typescript-eslint/naming-convention */
 
+  /** Additional properties */
+  public readonly highlightedFiles: Array<
+    io.TypeOf<typeof gistFilesContent> & HighlightedContent
+  >;
+  public readonly languageOverride?: string;
+
   /**
    * Create a local, static gist object. Do not use this for fetched data.
    * Used for creating and displaying local code samples.
    *
+   * Use `deserialize` sibling function for remote "unknown" responses.
+   *
    * @param args Minimally necessary paramaters for displaying local code.
    * @returns A 'partial' model in which unnecessary fields are dummny data.
    */
   public static create(
-    args: Pick<Gist, 'files' | 'created_at' | 'description'>,
+    args: Pick<Gist, 'files' | 'created_at' | 'description'> &
+      Pick<NgxGist, 'languageOverride'>,
   ): NgxGist {
     return new NgxGist({
-      comments: 0,
-      comments_url: '',
-      commits_url: '',
+      // Properties with settable values. These are the mimimum values needed
+      // for displaying non "remote".
       created_at: new Date(args.created_at),
       description: args.description,
       files: args.files,
+      languageOverride: args.languageOverride,
+      // Empty properties that aren't needed for displaying non "remote" gists
+      comments: 0,
+      comments_url: '',
+      commits_url: '',
       forks: [],
       forks_url: '',
       git_pull_url: '',
@@ -88,7 +117,7 @@ export class NgxGist implements Gist {
   }
 
   /**
-   * Deserialize and decode fetched/unkown data into the full model.
+   * Deserialize and decode fetched/unknown data into the full model.
    *
    * @param value Unknown value, but expects a full model either by object or JSON string.
    * @returns Either the full model or null if deserialization fails.
@@ -102,15 +131,30 @@ export class NgxGist implements Gist {
         ? decodeValueElseNull(gistFromJsonStringCodec)(value)
         : null);
     return decoded
-      ? {
+      ? new NgxGist({
           ...decoded,
           created_at: new Date(decoded.created_at),
           updated_at: new Date(decoded.updated_at),
-        }
+        })
       : null;
   }
 }
 
+interface HighlightedContent {
+  highlightedContent: string;
+}
+
+function getHighlightedContent(
+  baseContent: string,
+  languageOverride?: string,
+): string {
+  if (languageOverride) {
+    return hljs.highlight(baseContent, { language: languageOverride }).value;
+  }
+
+  return hljs.highlightAuto(baseContent).value;
+}
+
 const gitHubUserCodec = io.readonly(
   io.type({
     avatar_url: io.string,
@@ -155,21 +199,17 @@ const gistHistoryCodec = io.readonly(
   'GistHistory',
 );
 
-const gistFilesCodec = io.readonly(
-  io.record(
-    io.string,
-    io.type({
-      content: io.string,
-      filename: io.string,
-      language: io.string,
-      raw_url: io.string,
-      size: io.number,
-      truncated: io.boolean,
-      type: io.string,
-    }),
-  ),
-  'GistFiles',
-);
+const gistFilesContent = io.type({
+  content: io.string,
+  filename: io.string,
+  language: io.string,
+  raw_url: io.string,
+  size: io.number,
+  truncated: io.boolean,
+  type: io.string,
+});
+
+const gistFilesCodec = io.record(io.string, gistFilesContent);
 
 export const gistCodec = io.readonly(
   io.intersection([
@@ -207,7 +247,7 @@ const gistFromJsonStringCodec = parsedJsonFromStringCodec.pipe(
 );
 
 /**
- * Official Gist objecio.
+ * Official Gist object
  * https://docs.github.com/en/rest/gists
  */
 type Gist = io.TypeOf<typeof gistCodec>;

src/app/public/ngx-gist.component.ts

@@ -4,12 +4,11 @@ import { NgxGistComponent } from './ngx-gist.component';
 import { NgxGistService } from './ngx-gist.service';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
-import { GistContentPipe } from './ngx-gist-content.pipe';
 import { GistFileFilterPipe } from './ngx-gist-file-filter.pipe';
 import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
-  declarations: [NgxGistComponent, GistContentPipe, GistFileFilterPipe],
+  declarations: [NgxGistComponent, GistFileFilterPipe],
   imports: [
     // Needs to be imported at root.
     // BrowserAnimationsModule,

src/app/public/ngx-gist.model.ts

@@ -61,11 +61,11 @@ export class NgxGistService {
 
     const gist = storedGist.value;
     // All is good, return unexpired gist
-    return {
+    return new NgxGist({
       ...gist,
       created_at: new Date(gist.created_at),
       updated_at: new Date(gist.updated_at),
-    };
+    });
   }
 
   public setToCache(gist: NgxGist, expiresInMin?: number): void {