Merge pull request #294 from tkskto/develop

v0.8.0

Author: tkskto

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.8.0
+
+### enhancement
+
+-   \#289 add `html` export format.
+
+### Chores
+
+-   \#287 `mkdirp` to v3.0.0
+-   \#288 `globby` to v13.1.4
+-   \#292 `commander` to v10.0.1
+
 ## 0.7.1
 
 There is nothing enhancement, just update dependencies.

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

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;
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@tkskto/vue-component-analyzer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Analyze dependency tree for Vue.js SFC (Single File Component)",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -48,12 +48,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@typescript-eslint/parser": "5.57.0",
-    "commander": "10.0.0",
+    "@typescript-eslint/parser": "5.59.0",
+    "commander": "10.0.1",
     "ejs": "3.1.9",
     "express": "4.18.2",
-    "globby": "13.1.3",
-    "mkdirp": "2.1.6",
+    "globby": "13.1.4",
+    "mkdirp": "3.0.0",
     "opener": "1.5.2",
     "vue-eslint-parser": "9.1.1",
     "ws": "8.13.0"
@@ -62,28 +62,28 @@
     "@mitsue/eslint-config": "4.1.0",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.0.1",
-    "@rollup/plugin-terser": "0.4.0",
-    "@rollup/plugin-typescript": "11.0.0",
+    "@rollup/plugin-node-resolve": "15.0.2",
+    "@rollup/plugin-terser": "0.4.1",
+    "@rollup/plugin-typescript": "11.1.0",
     "@types/ejs": "3.1.2",
     "@types/express": "4.17.17",
-    "@types/jest": "29.5.0",
+    "@types/jest": "29.5.1",
     "@types/mkdirp": "1.0.2",
     "@types/node": "18.15.11",
     "@types/opener": "1.4.0",
     "@types/ws": "8.5.4",
-    "@typescript-eslint/eslint-plugin": "5.57.0",
-    "eslint": "8.37.0",
+    "@typescript-eslint/eslint-plugin": "5.59.0",
+    "eslint": "8.38.0",
     "husky": "8.0.3",
     "jest": "29.5.0",
-    "lint-staged": "13.2.0",
+    "lint-staged": "13.2.1",
     "npm-run-all": "^4.1.5",
     "nyc": "15.1.0",
-    "rollup": "3.20.2",
+    "rollup": "3.20.6",
     "rollup-plugin-license": "3.0.1",
-    "ts-jest": "29.0.5",
+    "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
-    "typescript": "5.0.3"
+    "typescript": "5.0.4"
   },
   "lint-staged": {
     "*.ts": [

package.json

@@ -29,7 +29,7 @@ const banner = `/*!
 
 export default [
   {
-    input: '.temp/index.js',
+    input: '.temp/server/index.js',
     output: [
       {
         file: 'dist/index.mjs',

rollup.config.mjs

@@ -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);
       }

src/client/ScreenCapture.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');
+  }
 }

src/client/Seed.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);
   }
 };

src/client/SeedOpenStateSwitcher.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');