@tkskto/vue-component-analyzer - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

bin/analyze.js

@@ -9,4 +9,2 @@ #!/usr/bin/env node
 function onCatchError(error) {
-  process.exit(1);
-
   const {version} = require('../package.json');
@@ -16,2 +14,4 @@
   console.error(`${error.message}`);
+
+  process.exit(1);
 }
@@ -18,0 +18,0 @@

CHANGELOG.md

 # Changelog
 
+## 0.1.5
+
+### Updates
+
+-   be able to change to Tree Style.
+-   be able to change props visibility.
+-   be able to change fileSize visibility.
+-   be able to change lastUpdated visibility.
+-   be able to change referenced count visibility.
+
+### Chores
+
+-   \#31 update `ejs`
+-   \#32 update `globby`
+-   \#33 update `vue-eslint-parser`
+-   \#34 update `ws`
+-   \#42 update `commander`
+
 ## 0.1.4
@@ -4,0 +22,0 @@

dist/client.js

@@ -101,2 +101,8 @@ class MyCustomEvent {
         };
+        this._viewType = 'GRAPH';
+        this._visibleSettings = false;
+        this._visibleProps = true;
+        this._visibleFileSize = true;
+        this._visibleLastUpdated = true;
+        this._visibleReferenceCount = true;
         this.getHowManyDaysAgo = (date) => {
@@ -117,5 +123,49 @@ const time = date.getTime();
     }
+    get viewType() {
+        return this._viewType;
+    }
+    set viewType(value) {
+        this._viewType = value;
+        this.dispatchEvent(Model.EVENT.VIEW_CHANGED);
+    }
+    get visibleSettings() {
+        return this._visibleSettings;
+    }
+    set visibleSettings(value) {
+        this._visibleSettings = value;
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
+    }
+    get visibleProps() {
+        return this._visibleProps;
+    }
+    set visibleProps(value) {
+        this._visibleProps = value;
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
+    }
+    get visibleFileSize() {
+        return this._visibleFileSize;
+    }
+    set visibleFileSize(value) {
+        this._visibleFileSize = value;
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
+    }
+    get visibleLastUpdated() {
+        return this._visibleLastUpdated;
+    }
+    set visibleLastUpdated(value) {
+        this._visibleLastUpdated = value;
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
+    }
+    get visibleReferenceCount() {
+        return this._visibleReferenceCount;
+    }
+    set visibleReferenceCount(value) {
+        this._visibleReferenceCount = value;
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
+    }
 }
 Model.EVENT = {
     DATA_UPDATE: 'dataUpdate',
+    VIEW_CHANGED: 'viewChanged',
+    SETTING_CHANGED: 'settingChanged',
 };
@@ -150,4 +200,4 @@
             return `
-        <span class="file__meta">FileSize: ${fileSize} KB</span>
-        <span class="file__meta">LastUpdated: ${lastUpdated} days ago</span>
+        <span class="file__meta meta__fileSize">FileSize: ${fileSize} KB</span>
+        <span class="file__meta meta__lastUpdated">LastUpdated: ${lastUpdated} days ago</span>
       `;
@@ -175,8 +225,8 @@ }
         return `<div class="seed${seedClassName}">
-      <span class="file">
-        <span class="filename">
-          <span class="file__text">${contents}</span>
+      <div class="file">
+        <div class="filename">
+          <div class="file__text">${contents}</div>
           ${this.getCountText()}
-        </span>
-      </span>
+        </div>
+      </div>
       ${childHTML}
@@ -207,9 +257,11 @@ </div>`;
         this.ready = () => {
-            const { data } = this._model;
-            const { entries } = data;
-            for (let i = 0, len = entries.length; i < len; i++) {
-                const entry = entries[i];
-                if (data) {
-                    const root = new Seed(entry, 0, this._model);
-                    this._tree.push(this.generateSeed(entry, root));
+            if ('GRAPH' === this._model.viewType) {
+                const { data } = this._model;
+                const { entries } = data;
+                for (let i = 0, len = entries.length; i < len; i++) {
+                    const entry = entries[i];
+                    if (data) {
+                        const root = new Seed(entry, 0, this._model);
+                        this._tree.push(this.generateSeed(entry, root));
+                    }
                 }
@@ -237,10 +289,42 @@ }
     }
+    renderLine(name, level, isLast) {
+        let line = ' ';
+        for (let i = 0; i < level; i++) {
+            line += '│   ';
+        }
+        line += isLast ? '└─ ' : '├─ ';
+        line += name;
+        return `${line}\n`;
+    }
+    renderEntry(entry, level) {
+        let result = '';
+        for (let i = 0, len = entry.children.length; i < len; i++) {
+            const child = entry.children[i];
+            result += this.renderLine(child.name, level, i === (len - 1));
+            result += this.renderEntry(child, level + 1);
+        }
+        return result;
+    }
     render() {
-        let html = '';
-        for (let i = 0, len = this._tree.length; i < len; i++) {
-            const [root] = this._tree[i];
-            html += root.render();
+        let result = '';
+        if ('GRAPH' === this._model.viewType) {
+            for (let i = 0, len = this._tree.length; i < len; i++) {
+                const [root] = this._tree[i];
+                result += root.render();
+            }
         }
+        else if ('TEXT' === this._model.viewType) {
+            const { entries } = this._model.data;
+            for (let i = 0, len = entries.length; i < len; i++) {
+                const entry = entries[i];
+                result += `${entry.name}\n`;
+                result += this.renderEntry(entries[i], 0);
+                if (i < len - 1) {
+                    result += '\n';
+                }
+            }
+            result = `<pre class="tree">${result}</pre>`;
+        }
         const group = `<div class="root">
-        ${html}
+        ${result}
     </div>`;
@@ -253,2 +337,79 @@ if (this._app) {
 
+class VisibleSwitcher {
+    constructor(_elm, _model) {
+        this._elm = _elm;
+        this._model = _model;
+        this._type = _elm.dataset.settingName;
+        _elm.addEventListener('change', this.onChange.bind(this));
+    }
+    onChange() {
+        switch (this._type) {
+            case 'props':
+                this._model.visibleProps = this._elm.checked;
+                break;
+            case 'fileSize':
+                this._model.visibleFileSize = this._elm.checked;
+                break;
+            case 'lastUpdated':
+                this._model.visibleLastUpdated = this._elm.checked;
+                break;
+            case 'referenceCount':
+                this._model.visibleReferenceCount = this._elm.checked;
+                break;
+            default:
+                throw new Error(`not supported type: ${this._type}`);
+        }
+    }
+}
+
+class ViewSwitcher {
+    constructor(_elm, _type, _model) {
+        this._elm = _elm;
+        this._type = _type;
+        this._model = _model;
+        _elm.addEventListener('change', this.onChange.bind(this));
+    }
+    onChange() {
+        this._model.viewType = this._type;
+    }
+}
+
+const setSettings = function (model) {
+    const { body } = document;
+    const btnSwitchSettings = document.getElementById('btn-settings');
+    const nodeListOfSwitch = body.querySelectorAll('.js-settings-toggle');
+    const switcherElmForGraph = document.getElementById('js-view-switch-graph');
+    const switcherElmForText = document.getElementById('js-view-switch-text');
+    new ViewSwitcher(switcherElmForGraph, 'GRAPH', model);
+    new ViewSwitcher(switcherElmForText, 'TEXT', model);
+    const onSettingsChanged = function () {
+        body.className = '';
+        if (model.visibleSettings) {
+            body.classList.add('show-settings');
+        }
+        if (!model.visibleProps) {
+            body.classList.add('no-props');
+        }
+        if (!model.visibleFileSize) {
+            body.classList.add('no-fileSize');
+        }
+        if (!model.visibleLastUpdated) {
+            body.classList.add('no-lastUpdated');
+        }
+        if (!model.visibleReferenceCount) {
+            body.classList.add('no-referenceCount');
+        }
+    };
+    nodeListOfSwitch.forEach((node) => {
+        new VisibleSwitcher(node, model);
+    });
+    model.addEventListener(Model.EVENT.SETTING_CHANGED, onSettingsChanged);
+    if (btnSwitchSettings) {
+        btnSwitchSettings.addEventListener('click', () => {
+            model.visibleSettings = !model.visibleSettings;
+        });
+    }
+    onSettingsChanged();
+};
+
 const model = new Model();
@@ -270,2 +431,3 @@ const renderer = new Renderer(model);
             model.data = msg;
+            setSettings(model);
         });
@@ -277,1 +439,2 @@ }
 });
+model.addEventListener(Model.EVENT.VIEW_CHANGED, () => renderer.render());

dist/index.js

 /*!
-  @tkskto/vue-component-analyzer v0.1.4
+  @tkskto/vue-component-analyzer v0.2.0
   https://github.com/tkskto/
   Released under the MIT License.
   dependencies: 
-    commander -- 6.1.0
-    ejs -- 3.1.5
+    commander -- 7.1.0
+    ejs -- 3.1.6
     express -- 4.17.1
-    globby -- 11.0.1
+    globby -- 11.0.2
     mkdirp -- 1.0.4
     opener -- 1.5.2
-    vue-eslint-parser -- 7.1.1
-    ws -- 7.3.1
+    vue-eslint-parser -- 7.6.0
+    ws -- 7.4.4
 */
@@ -26,3 +26,3 @@ 'use strict';
 var mkdirp = require('mkdirp');
-var commander = require('commander');
+var require$$3 = require('commander');
 var globby = require('globby');
@@ -41,3 +41,3 @@
 var mkdirp__default = /*#__PURE__*/_interopDefaultLegacy(mkdirp);
-var commander__default = /*#__PURE__*/_interopDefaultLegacy(commander);
+var require$$3__default = /*#__PURE__*/_interopDefaultLegacy(require$$3);
 var globby__default = /*#__PURE__*/_interopDefaultLegacy(globby);
@@ -47,16 +47,7 @@
 
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
-		}
-	}, fn(module, module.exports), module.exports;
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
 }
 
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
 var utils = createCommonjsModule(function (module, exports) {
@@ -67,6 +58,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const { resolve, extname, dirname } = path_1__default['default'];
-exports.getImportDeclaration = (nodeArr) => {
+const getImportDeclaration = (nodeArr) => {
     return nodeArr.filter((node) => node.type === 'ImportDeclaration');
 };
-exports.getDeclarationSyntax = (tokens, targetKeyName) => {
+exports.getImportDeclaration = getImportDeclaration;
+const getDeclarationSyntax = (tokens, targetKeyName) => {
     let isTargetToken = false;
@@ -107,3 +99,4 @@ let result = '{';
 };
-exports.resolveFile = (_filename, _currentFileName) => {
+exports.getDeclarationSyntax = getDeclarationSyntax;
+const resolveFile = (_filename, _currentFileName) => {
     let filename = '';
@@ -134,2 +127,3 @@ if (_filename.startsWith('../')) {
 };
+exports.resolveFile = resolveFile;
 });
@@ -282,6 +276,2 @@
 
-var server = createCommonjsModule(function (module, exports) {
-Object.defineProperty(exports, "__esModule", { value: true });
-
-
 const { renderFile } = require$$0__default['default'];
@@ -292,3 +282,3 @@
 const projectRoot = path_1__default['default'].resolve(__dirname, '..');
-const startServer = (port, json) => {
+const startServer$1 = (port, json) => {
     const HOST = '127.0.0.1';
@@ -327,5 +317,8 @@ const app = express__default['default']();
 };
-exports.startServer = startServer;
-});
+var startServer_1 = startServer$1;
 
+var server = /*#__PURE__*/Object.defineProperty({
+	startServer: startServer_1
+}, '__esModule', {value: true});
+
 var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -345,4 +338,4 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 
+const { program } = require$$3__default['default'];
 
-
 const FORMAT = {
@@ -363,8 +356,10 @@ BROWSER: 'browser',
 (() => __awaiter(void 0, void 0, void 0, function* () {
+    console.log('start analyzing.');
     try {
-        commander__default['default'].option('--dir [dir]', 'root directory of src.', 'src');
-        commander__default['default'].option('-f, --format [type]', 'Add the specified type of report [browser, json or both]', FORMAT.BROWSER);
-        commander__default['default'].option('-o, --out [dir]', 'output directory (enable with setting --format option to "json" or "both")', 'out');
-        commander__default['default'].option('-p, --port [number]', 'select a port number for the local server', '8888');
-        const argv = commander__default['default'].parse(process.argv);
+        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('-p, --port [number]', 'select a port number for the local server', '8888');
+        program.parse(process.argv);
+        const argv = program.opts();
         if (argv.format !== FORMAT.BROWSER && argv.format !== FORMAT.JSON && argv.format !== FORMAT.BOTH) {
@@ -371,0 +366,0 @@ console.error(`not support ${argv.format} format.`);

package.json

 {
   "name": "@tkskto/vue-component-analyzer",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Analyze dependency tree for Vue.js SFC (Single File Component)",
@@ -48,33 +48,33 @@ "main": "dist/index.js",
   "dependencies": {
-    "commander": "6.1.0",
-    "ejs": "3.1.5",
+    "commander": "7.1.0",
+    "ejs": "3.1.6",
     "express": "4.17.1",
-    "globby": "11.0.1",
+    "globby": "11.0.2",
     "mkdirp": "1.0.4",
     "opener": "1.5.2",
-    "vue-eslint-parser": "7.1.1",
-    "ws": "7.3.1"
+    "vue-eslint-parser": "7.6.0",
+    "ws": "7.4.4"
   },
   "devDependencies": {
     "@mitsue/eslint-config": "3.0.0",
-    "@rollup/plugin-commonjs": "15.1.0",
+    "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "9.0.0",
-    "@rollup/plugin-typescript": "6.0.0",
-    "@types/express": "4.17.8",
-    "@types/mocha": "8.0.3",
-    "@types/node": "14.11.8",
+    "@rollup/plugin-node-resolve": "11.2.0",
+    "@rollup/plugin-typescript": "8.2.0",
+    "@types/express": "4.17.11",
+    "@types/mocha": "8.2.2",
+    "@types/node": "14.14.35",
     "@types/opener": "1.4.0",
-    "@types/ws": "7.2.7",
-    "@typescript-eslint/eslint-plugin": "4.4.1",
-    "@typescript-eslint/parser": "4.4.1",
-    "eslint": "7.11.0",
-    "husky": "4.3.0",
-    "lint-staged": "10.4.0",
-    "mocha": "8.1.3",
+    "@types/ws": "7.4.0",
+    "@typescript-eslint/eslint-plugin": "4.18.0",
+    "@typescript-eslint/parser": "4.18.0",
+    "eslint": "7.22.0",
+    "husky": "4.3.8",
+    "lint-staged": "10.5.4",
+    "mocha": "8.3.2",
     "nyc": "15.1.0",
-    "rollup": "2.30.0",
-    "rollup-plugin-license": "2.2.0",
-    "ts-mocha": "7.0.0",
-    "typescript": "4.0.3"
+    "rollup": "2.42.1",
+    "rollup-plugin-license": "2.3.0",
+    "ts-mocha": "8.0.0",
+    "typescript": "4.2.3"
   },
@@ -81,0 +81,0 @@ "lint-staged": {

No alert changes

Improved metrics

Total package byte prevSize

40221

increased by27.04%

Lines of code

1044

increased by29.69%

Dependency changes

• + Addedcommander@7.1.0(transitive)

• + Addedejs@3.1.6(transitive)

• + Addedglobby@11.0.2(transitive)

• + Addedvue-eslint-parser@7.6.0(transitive)

• + Addedws@7.4.4(transitive)

• - Removedcommander@6.1.0(transitive)

• - Removedejs@3.1.5(transitive)

• - Removedglobby@11.0.1(transitive)

• - Removedvue-eslint-parser@7.1.1(transitive)

• - Removedws@7.3.1(transitive)

• Updatedcommander@7.1.0

• Updatedejs@3.1.6

• Updatedglobby@11.0.2

• Updatedvue-eslint-parser@7.6.0

• Updatedws@7.4.4