feat: add function for export html file.

Author: tkskto

src/client/client.ts

@@ -6,7 +6,7 @@ import {setSeedOpenStateSwitcher} from './SeedOpenStateSwitcher';
 import {setScreenCapture} from './ScreenCapture';
 
 const model = new Model();
-new Renderer(model);
+const renderer = new Renderer(model);
 let ws: WebSocket;
 
 try {
@@ -21,13 +21,21 @@ document.addEventListener('DOMContentLoaded', () => {
   if (ws) {
     ws.addEventListener('message', (event) => {
       const msg = JSON.parse(event.data);
+      const app = document.querySelector<HTMLElement>('#app');
 
-      setSeedOpenStateSwitcher(model);
+      if (!app) {
+        return;
+      }
 
-      model.data = msg; // emit Model.EVENT.DATA_UPDATE event
+      model.data = msg;
+
+      const html = renderer.render();
+
+      app.innerHTML = html;
 
       setSettings(model);
       setScreenCapture();
+      setSeedOpenStateSwitcher();
     });
   } else {
     console.warn('Couldn\'t connect to analyzer websocket server so you\'ll have to reload page manually to see updates in the treemap');

src/client/eventDispatcher.ts

@@ -59,7 +59,7 @@ export class CustomEventDispatcher {
       e = new MyCustomEvent(type);
     }
 
-    if (this.listeners[type] !== null) {
+    if (this.listeners[type] !== null && this.listeners[type] !== undefined) {
       const len: number = this.listeners[type].length;
       e.currentTarget = this;
 

src/client/model.ts

@@ -13,7 +13,6 @@ export class Model extends CustomEventDispatcher {
   private _viewType: VIEW_TYPE = 'GRAPH';
 
   public static EVENT = {
-    DATA_UPDATE: 'dataUpdate',
     SETTING_CHANGED: 'settingChanged',
   };
 
@@ -44,7 +43,6 @@ export class Model extends CustomEventDispatcher {
 
   set data(value: AnalyzeReport) {
     this._data = value;
-    this.dispatchEvent(Model.EVENT.DATA_UPDATE);
   }
 
   /**

src/client/renderer.ts

@@ -5,14 +5,12 @@ import {Seed} from './Seed';
 import {Model} from './model';
 
 export class Renderer {
-  private readonly _app: HTMLElement | null;
+  private _model: Model;
 
   private _tree: Seed[][] = [];
 
-  constructor(private _model: Model) {
-    this._app = document.getElementById('app');
-
-    _model.addEventListener(Model.EVENT.DATA_UPDATE, this.ready);
+  constructor(_model: Model) {
+    this._model = _model;
   }
 
   /**
@@ -42,23 +40,22 @@ export class Renderer {
     return tree;
   }
 
+  /**
+   * transform json to Tree data for rendering
+   */
   private ready = () => {
-    if ('GRAPH' === this._model.viewType) {
-      const {data} = this._model;
-      const {entries} = data;
+    const {data} = this._model;
+    const {entries} = data;
 
-      for (let i = 0, len = entries.length; i < len; i++) {
-        const entry = entries[i];
+    for (let i = 0, len = entries.length; i < len; i++) {
+      const entry = entries[i];
 
-        if (data) {
-          const root = new Seed(entry, 0, this._model);
+      if (data) {
+        const root = new Seed(entry, 0, this._model);
 
-          this._tree.push(this.generateSeed(entry, root));
-        }
+        this._tree.push(this.generateSeed(entry, root));
       }
     }
-
-    this.render();
   };
 
   private renderLine(name: string, level: number, isLast: boolean): string {
@@ -91,9 +88,11 @@ export class Renderer {
    * rendering DOM from tree.
    * @private
    */
-  public render():void {
+  public render(): string {
     let html = '';
 
+    this.ready();
+
     for (let i = 0, len = this._tree.length; i < len; i++) {
       const [root] = this._tree[i];
 
@@ -118,8 +117,6 @@ export class Renderer {
 
     text = `<div class="root text"><pre class="tree">${text}</pre></div>`;
 
-    if (this._app) {
-      this._app.innerHTML = html + text;
-    }
+    return html + text;
   }
 }

src/server/Commander.ts

@@ -9,8 +9,8 @@ export const getOptions = (_argv: string[]): {
   silent: boolean,
 } => {
   program.option('--dir [dir]', 'root directory of src.', 'src');
-  program.option('-f, --format [type]', 'Add the specified type of report [browser, json or both]', FORMAT.BROWSER);
-  program.option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "both")', 'out');
+  program.option('-f, --format [type]', 'Add the specified type of report [browser, json, html)]', FORMAT.BROWSER);
+  program.option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "html")', 'out');
   program.option('-p, --port [number]', 'select a port number for the local server', '8888');
   program.option('--silent', 'do not show logs with silent flag');
   program.parse(_argv);

src/server/Constant.ts

@@ -2,4 +2,5 @@ export const FORMAT = {
   BROWSER: 'browser',
   JSON: 'json',
   BOTH: 'both',
+  HTML: 'html',
 };

src/server/Output.ts

@@ -0,0 +1,50 @@
+import {AnalyzeReport} from '../../types';
+import {Renderer} from '../client/renderer';
+import {Model} from '../client/model';
+import mkdirp from 'mkdirp';
+import path from 'path';
+import {writeFileSync} from 'fs';
+import {render} from 'ejs';
+import {fileURLToPath} from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.resolve(__dirname, '..');
+
+export async function writeFileExtra(_filename: string, data: string) {
+  const filename = _filename.endsWith('.json') ? _filename : `${_filename}/result.json`;
+
+  try {
+    await mkdirp(path.dirname(filename));
+
+    writeFileSync(filename, data);
+    console.log(`output completed ${filename}`);
+  } catch (err: unknown) {
+    if (err instanceof Error) {
+      throw new Error(err.message);
+    }
+  }
+}
+
+export async function writeHTML(_filename: string, result: AnalyzeReport) {
+  const filename = _filename.endsWith('.html') ? _filename : `${_filename}/result.html`;
+
+  try {
+    await mkdirp(path.dirname(filename));
+
+    const clientModel = new Model();
+
+    clientModel.data = result;
+
+    const renderer = new Renderer(clientModel);
+    const htmlString = renderer.render();
+    const html = render('<%- include("/views/static.ejs", {html: html}); %>', {html: htmlString}, {root: `${projectRoot}`});
+
+    writeFileSync(filename, html);
+    console.log(`output completed ${filename}`);
+  } catch (err: unknown) {
+    if (err instanceof Error) {
+      throw new Error(err.message);
+    }
+  }
+}

src/server/index.ts

@@ -6,23 +6,13 @@ import {getOptions} from './Commander';
 import {getImportDeclarationTree} from './Analyzer';
 import {startServer} from './server';
 import {fileCounter} from './FileCounter';
-import {writeFileSync} from 'fs';
+import {writeFileExtra, writeHTML} from './Output';
 import {globby} from 'globby';
 import path from 'path';
-import mkdirp from 'mkdirp';
 
 // TODO: add log system
 // TODO: add error system
 
-function writeFileExtra(filename: string, data: string) {
-  mkdirp(path.dirname(filename)).then(() => {
-    writeFileSync(filename, data);
-  }).catch((err: Error) => {
-    if (err) {
-      throw new Error(err.message);
-    }
-  });
-}
 
 const analyze = (entries: string[]): Promise<AnalyzeReport> => {
   return new Promise((resolve, reject) => {
@@ -80,11 +70,13 @@ export const analyzeFromCLI = async (): Promise<void> => {
 
   if (argv.format === FORMAT.BOTH) {
     startServer(argv.port, result);
-    writeFileExtra(path.resolve(process.cwd(), `${argv.out}/result.json`), JSON.stringify(result, null, 4));
+    await writeFileExtra(path.resolve(process.cwd(), argv.out), JSON.stringify(result, null, 4));
   } else if (argv.format === FORMAT.BROWSER) {
     startServer(argv.port, result);
   } else if (argv.format === FORMAT.JSON) {
-    writeFileExtra(path.resolve(process.cwd(), `${argv.out}/result.json`), JSON.stringify(result, null, 4));
+    await writeFileExtra(path.resolve(process.cwd(), argv.out), JSON.stringify(result, null, 4));
+  } else if (argv.format === FORMAT.HTML) {
+    await writeHTML(path.resolve(process.cwd(), argv.out), result);
   }
 
   console.log('finished analyzing.');