Merge pull request #289 from tkskto/feature/export-html

tkskto · web-flow · commit 79682bed8a2e · 2023-04-19T21:59:24.000+09:00
Feature/export html
diff --git a/README.md b/README.md
@@ -42,8 +42,8 @@ npm exec vca -- --dir .
 
 *   `--dir` : analyze target directory. default is `src`. `node_modules` will be ignored by default.
 *   `--silent` : running without almost logs.
-*   `-f` or `--format` : report type. choose one from [browser | json | both]. default is `browser`.
-*   `-o` or `--out` : output directory. JSON file will output here.
+*   `-f` or `--format` : report type. choose one from [browser | json | html]. default is `browser`.
+*   `-o` or `--out` : output directory. JSON or HTML file will output here.
 *   `-p` or `--port` : select a port number for the local server.
 
 ## API
diff --git a/dist/style.css b/dist/style.css
@@ -114,6 +114,9 @@ header {
 .js .filename {
   border: 1px solid #ffff00;
 }
+.ts .filename {
+  border: 1px solid #3178c6;
+}
 details {
   line-height: 1.7;
 }
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -29,7 +29,7 @@ const banner = `/*!
 
 export default [
   {
-    input: '.temp/index.js',
+    input: '.temp/server/index.js',
     output: [
       {
         file: 'dist/index.mjs',
diff --git a/src/client/ScreenCapture.ts b/src/client/ScreenCapture.ts
@@ -93,7 +93,11 @@ export const setScreenCapture = function (): void {
   if (btnCapture) {
     btnCapture.addEventListener('click', async () => {
       try {
-        await customDialog.showExportDialog();
+        customDialog.load();
+
+        const img = await capture();
+
+        await customDialog.showExportDialog(img);
       } catch (err) {
         console.error(err);
       }
diff --git a/src/client/Seed.ts b/src/client/Seed.ts
@@ -76,7 +76,9 @@ export class Seed {
   }
 
   private renderDetails(): string {
-    return `<details class="detail">
+    const openAttribute = this._model.env === 'node' ? ' open' : '';
+
+    return `<details class="detail"${openAttribute}>
         ${this.renderSummary()}
         ${this.renderProps()}
         ${this.renderMetaData()}
@@ -98,6 +100,10 @@ export class Seed {
       seedClassName += ' js';
     }
 
+    if (this.isTS()) {
+      seedClassName += ' ts';
+    }
+
     return `<div class="seed${seedClassName}">
       <div class="file">
         <div class="filename">
@@ -133,4 +139,11 @@ export class Seed {
   isJS(): boolean {
     return this._name.endsWith('.js');
   }
+
+  /**
+   * @return boolean
+   */
+  isTS(): boolean {
+    return this._name.endsWith('.ts');
+  }
 }
diff --git a/src/client/SeedOpenStateSwitcher.ts b/src/client/SeedOpenStateSwitcher.ts
@@ -1,17 +1,15 @@
-import {Model} from './model';
-
 class SeedOpenStateSwitcher {
   private _isOpen = false;
 
   private _details: NodeListOf<HTMLDetailsElement> | null = null;
 
   private _textElement: HTMLElement | null;
 
-  constructor(_button: HTMLButtonElement, model: Model) {
+  constructor(_button: HTMLButtonElement) {
     this._textElement = document.getElementById('btn-toggle-visible-state-text');
-    _button.addEventListener('click', this.onClick.bind(this));
+    this._details = document.querySelectorAll<HTMLDetailsElement>('.detail');
 
-    model.addEventListener(Model.EVENT.DATA_UPDATE, this.onDataUpdated.bind(this));
+    _button.addEventListener('click', this.onClick.bind(this));
   }
 
   private open() {
@@ -47,16 +45,12 @@ class SeedOpenStateSwitcher {
       this.close();
     }
   }
-
-  private onDataUpdated() {
-    this._details = document.querySelectorAll<HTMLDetailsElement>('.detail');
-  }
 }
 
-export const setSeedOpenStateSwitcher = (model: Model): void => {
+export const setSeedOpenStateSwitcher = (): void => {
   const btn = document.getElementById('btn-toggle-visible-state');
 
   if (btn) {
-    new SeedOpenStateSwitcher(btn as HTMLButtonElement, model);
+    new SeedOpenStateSwitcher(btn as HTMLButtonElement);
   }
 };
diff --git a/src/client/client.ts b/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');
diff --git a/src/client/dialog/index.ts b/src/client/dialog/index.ts
@@ -1,4 +1,3 @@
-import {capture} from '../ScreenCapture';
 import {disableTabIndex, resetTabIndex} from '../common';
 
 class CustomDialog {
@@ -18,33 +17,31 @@ class CustomDialog {
     }
   }
 
-  show() {
+  private show() {
     document.body.classList.add('-dialog-show');
     disableTabIndex('#dialog');
   }
 
-  close() {
+  private close() {
     document.body.classList.remove('-dialog-show');
     resetTabIndex();
   }
 
-  load() {
+  public load() {
     this.show();
 
     if (this._contents) {
       this._contents.innerHTML = '<p>now loading...</p>';
     }
   }
 
-  complete(html: string) {
+  private complete(html: string) {
     if (this._contents) {
       this._contents.innerHTML = html;
     }
   }
 
-  async showExportDialog() {
-    this.load();
-    const img = await capture();
+  showExportDialog(img: HTMLImageElement) {
     this._btnExport.href = img.src;
     this.complete(img.outerHTML);
   }
diff --git a/src/client/eventDispatcher.ts b/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;
 
diff --git a/src/client/model.ts b/src/client/model.ts
@@ -12,8 +12,9 @@ export class Model extends CustomEventDispatcher {
 
   private _viewType: VIEW_TYPE = 'GRAPH';
 
+  private _env: 'browser' | 'node' = 'browser';
+
   public static EVENT = {
-    DATA_UPDATE: 'dataUpdate',
     SETTING_CHANGED: 'settingChanged',
   };
 
@@ -44,7 +45,6 @@ export class Model extends CustomEventDispatcher {
 
   set data(value: AnalyzeReport) {
     this._data = value;
-    this.dispatchEvent(Model.EVENT.DATA_UPDATE);
   }
 
   /**
@@ -111,4 +111,12 @@ export class Model extends CustomEventDispatcher {
     this._visibleReferenceCount = value;
     this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
   }
+
+  get env(): 'browser' | 'node' {
+    return this._env;
+  }
+
+  set env(value: 'browser' | 'node') {
+    this._env = value;
+  }
 }
diff --git a/src/client/renderer.ts b/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;
   }
 }
diff --git a/src/server/Commander.ts b/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);
diff --git a/src/server/Constant.ts b/src/server/Constant.ts
@@ -2,4 +2,5 @@ export const FORMAT = {
   BROWSER: 'browser',
   JSON: 'json',
   BOTH: 'both',
+  HTML: 'html',
 };
diff --git a/src/server/Output.ts b/src/server/Output.ts
@@ -0,0 +1,51 @@
+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;
+    clientModel.env = 'node';
+
+    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);
+    }
+  }
+}
diff --git a/src/server/index.ts b/src/server/index.ts
diff --git a/test/fixture/syntaxTest/langIsTypeScript.vue b/test/fixture/syntaxTest/langIsTypeScript.vue
diff --git a/test/fixture/syntaxTest/langIsTypeScriptWithSetup.vue b/test/fixture/syntaxTest/langIsTypeScriptWithSetup.vue
diff --git a/test/specs/syntax.test.ts b/test/specs/syntax.test.ts
diff --git a/views/static.ejs b/views/static.ejs

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,9 @@ header {`
`114`	`114`	`.js .filename {`
`115`	`115`	`border: 1px solid #ffff00;`
`116`	`116`	`}`
	`117`	`+.ts .filename {`
	`118`	`+ border: 1px solid #3178c6;`
	`119`	`+}`
`117`	`120`	`details {`
`118`	`121`	`line-height: 1.7;`
`119`	`122`	`}`
Original file line number	Diff line number	Diff line change
@@ -29,7 +29,7 @@ const banner = `/*!
`29`	`29`
`30`	`30`	`export default [`
`31`	`31`	`{`
`32`		`- input: '.temp/index.js',`
	`32`	`+ input: '.temp/server/index.js',`
`33`	`33`	`output: [`
`34`	`34`	`{`
`35`	`35`	`file: 'dist/index.mjs',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import {capture} from '../ScreenCapture';`
`2`	`1`	`import {disableTabIndex, resetTabIndex} from '../common';`
`3`	`2`
`4`	`3`	`class CustomDialog {`
`@@ -18,33 +17,31 @@ class CustomDialog {`
`18`	`17`	`}`
`19`	`18`	`}`
`20`	`19`
`21`		`- show() {`
	`20`	`+ private show() {`
`22`	`21`	`document.body.classList.add('-dialog-show');`
`23`	`22`	`disableTabIndex('#dialog');`
`24`	`23`	`}`
`25`	`24`
`26`		`- close() {`
	`25`	`+ private close() {`
`27`	`26`	`document.body.classList.remove('-dialog-show');`
`28`	`27`	`resetTabIndex();`
`29`	`28`	`}`
`30`	`29`
`31`		`- load() {`
	`30`	`+ public load() {`
`32`	`31`	`this.show();`
`33`	`32`
`34`	`33`	`if (this._contents) {`
`35`	`34`	`this._contents.innerHTML = '<p>now loading...</p>';`
`36`	`35`	`}`
`37`	`36`	`}`
`38`	`37`
`39`		`- complete(html: string) {`
	`38`	`+ private complete(html: string) {`
`40`	`39`	`if (this._contents) {`
`41`	`40`	`this._contents.innerHTML = html;`
`42`	`41`	`}`
`43`	`42`	`}`
`44`	`43`
`45`		`- async showExportDialog() {`
`46`		`- this.load();`
`47`		`- const img = await capture();`
	`44`	`+ showExportDialog(img: HTMLImageElement) {`
`48`	`45`	`this._btnExport.href = img.src;`
`49`	`46`	`this.complete(img.outerHTML);`
`50`	`47`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export class CustomEventDispatcher {`
`59`	`59`	`e = new MyCustomEvent(type);`
`60`	`60`	`}`
`61`	`61`
`62`		`- if (this.listeners[type] !== null) {`
	`62`	`+ if (this.listeners[type] !== null && this.listeners[type] !== undefined) {`
`63`	`63`	`const len: number = this.listeners[type].length;`
`64`	`64`	`e.currentTarget = this;`
`65`	`65`