wip: initial lazy loading support

src/diff2html.ts

@@ -12,6 +12,7 @@ export interface Diff2HtmlConfig
     HoganJsUtilsConfig {
   outputFormat?: OutputFormatType;
   drawFileList?: boolean;
+  lazy?: boolean;
 }
 
 export const defaultDiff2HtmlConfig = {
@@ -19,6 +20,7 @@ export const defaultDiff2HtmlConfig = {
   ...defaultSideBySideRendererConfig,
   outputFormat: OutputFormatType.LINE_BY_LINE,
   drawFileList: true,
+  lazy: false,
 };
 
 export function parse(diffInput: string, configuration: Diff2HtmlConfig = {}): DiffFile[] {
@@ -36,8 +38,18 @@ export function html(diffInput: string | DiffFile[], configuration: Diff2HtmlCon
 
   const diffOutput =
     config.outputFormat === 'side-by-side'
-      ? new SideBySideRenderer(hoganUtils, config).render(diffJson)
+      ? new SideBySideRenderer(hoganUtils, config).render(config.lazy ? [] : diffJson)
-      : new LineByLineRenderer(hoganUtils, config).render(diffJson);
+      : new LineByLineRenderer(hoganUtils, config).render(config.lazy ? [] : diffJson);
 
   return fileList + diffOutput;
 }
+
+export function htmlFile(diffFile: DiffFile, configuration: Diff2HtmlConfig = {}): string {
+  const config = { ...defaultDiff2HtmlConfig, ...configuration };
+
+  const hoganUtils = new HoganJsUtils(config);
+
+  return config.outputFormat === 'side-by-side'
+      ? new SideBySideRenderer(hoganUtils, config).renderFile(diffFile)
+      : new LineByLineRenderer(hoganUtils, config).renderFile(diffFile);
+}

src/line-by-line-renderer.ts

@@ -55,6 +55,11 @@ export default class LineByLineRenderer {
     return this.hoganUtils.render(genericTemplatesPath, 'wrapper', { content: diffsHtml });
   }
 
+  renderFile(diffFile: DiffFile): string {
+    const diffs = diffFile.blocks.length ? this.generateFileHtml(diffFile) : this.generateEmptyDiff();
+    return this.makeFileDiffHtml(diffFile, diffs);
+  }
+
   makeFileDiffHtml(file: DiffFile, diffs: string): string {
     if (this.config.renderNothingWhenEmpty && Array.isArray(file.blocks) && file.blocks.length === 0) return '';
 

src/side-by-side-renderer.ts

@@ -40,21 +40,16 @@ export default class SideBySideRenderer {
   }
 
   render(diffFiles: DiffFile[]): string {
-    const diffsHtml = diffFiles
+    const diffsHtml = diffFiles.map(this.renderFile).join('\n');
-      .map(file => {
-        let diffs;
-        if (file.blocks.length) {
-          diffs = this.generateFileHtml(file);
-        } else {
-          diffs = this.generateEmptyDiff();
-        }
-        return this.makeFileDiffHtml(file, diffs);
-      })
-      .join('\n');
 
     return this.hoganUtils.render(genericTemplatesPath, 'wrapper', { content: diffsHtml });
   }
 
+  renderFile(diffFile: DiffFile): string {
+    const diffs = diffFile.blocks.length ? this.generateFileHtml(diffFile) : this.generateEmptyDiff();
+    return this.makeFileDiffHtml(diffFile, diffs);
+  }
+
   makeFileDiffHtml(file: DiffFile, diffs: FileHtml): string {
     if (this.config.renderNothingWhenEmpty && Array.isArray(file.blocks) && file.blocks.length === 0) return '';
 

src/ui/js/diff2html-ui-base.ts

@@ -1,6 +1,6 @@
 import { closeTags, nodeStream, mergeStreams, getLanguage } from './highlight.js-helpers';
 
-import { html, Diff2HtmlConfig, defaultDiff2HtmlConfig } from '../../diff2html';
+import { html, parse, Diff2HtmlConfig, defaultDiff2HtmlConfig, htmlFile } from '../../diff2html';
 import { DiffFile } from '../../types';
 import { HighlightResult, HLJSApi } from 'highlight.js';
 
@@ -15,6 +15,7 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
    */
   smartSelection?: boolean;
   fileContentToggle?: boolean;
+  lazy?: boolean;
 }
 
 export const defaultDiff2HtmlUIConfig = {
@@ -29,10 +30,12 @@ export const defaultDiff2HtmlUIConfig = {
    */
   smartSelection: true,
   fileContentToggle: true,
+  lazy: true,
 };
 
 export class Diff2HtmlUI {
   readonly config: typeof defaultDiff2HtmlUIConfig;
+  readonly diffFiles: DiffFile[];
   readonly diffHtml: string;
   readonly targetElement: HTMLElement;
   readonly hljs: HLJSApi | null = null;
@@ -41,13 +44,15 @@ export class Diff2HtmlUI {
 
   constructor(target: HTMLElement, diffInput?: string | DiffFile[], config: Diff2HtmlUIConfig = {}, hljs?: HLJSApi) {
     this.config = { ...defaultDiff2HtmlUIConfig, ...config };
-    this.diffHtml = diffInput !== undefined ? html(diffInput, this.config) : target.innerHTML;
+    this.diffFiles = typeof diffInput === 'string' ? parse(diffInput, this.config) : diffInput ?? [];
+    this.diffHtml = diffInput !== undefined ? html(this.diffFiles, this.config) : target.innerHTML;
     this.targetElement = target;
     if (hljs !== undefined) this.hljs = hljs;
   }
 
   draw(): void {
     this.targetElement.innerHTML = this.diffHtml;
+    if (this.config.lazy) this.bindDrawFiles();
     if (this.config.synchronisedScroll) this.synchronisedScroll();
     if (this.config.highlight) this.highlightCode();
     if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
@@ -76,6 +81,22 @@ export class Diff2HtmlUI {
     });
   }
 
+  bindDrawFiles(): void {
+    const fileListItems: NodeListOf<HTMLElement> = this.targetElement.querySelectorAll('.d2h-file-name');
+    fileListItems.forEach((i, idx) =>
+      i.addEventListener('click', () => {
+        console.log('HERE');
+
+        const tmpDiv = document.createElement('div');
+        tmpDiv.innerHTML = htmlFile(this.diffFiles[idx], this.config);
+
+        if (tmpDiv.firstChild) {
+          this.targetElement.querySelector('.d2h-wrapper')?.appendChild(tmpDiv.firstChild);
+        }
+      }),
+    );
+  }
+
   fileListToggle(startVisible: boolean): void {
     const showBtn: HTMLElement | null = this.targetElement.querySelector('.d2h-show');
     const hideBtn: HTMLElement | null = this.targetElement.querySelector('.d2h-hide');