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

Comparing version 0.2.0 to 0.2.1

CHANGELOG.md

 # Changelog
 
-## 0.1.5
+## 0.2.1
 
 ### Updates
 
+-   be able to expand and collapse all information.
+-   handling circular dependency.
+
+### Chores
+
+-   \#45 update `commander`
+-   \#47 update `globby`
+
+## 0.2.0
+
+### Updates
+
 -   be able to change to Tree Style.
@@ -8,0 +20,0 @@ -   be able to change props visibility.

dist/client.js

@@ -127,3 +127,3 @@ class MyCustomEvent {
         this._viewType = value;
-        this.dispatchEvent(Model.EVENT.VIEW_CHANGED);
+        this.dispatchEvent(Model.EVENT.SETTING_CHANGED);
     }
@@ -168,3 +168,2 @@ get visibleSettings() {
     DATA_UPDATE: 'dataUpdate',
-    VIEW_CHANGED: 'viewChanged',
     SETTING_CHANGED: 'settingChanged',
@@ -207,3 +206,3 @@ };
     renderDetails() {
-        return `<details>
+        return `<details class="detail">
         <summary>${this._name}</summary>
@@ -306,26 +305,22 @@ ${this.renderProps()}
     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();
-            }
+        let html = '';
+        for (let i = 0, len = this._tree.length; i < len; i++) {
+            const [root] = this._tree[i];
+            html += 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';
-                }
+        html = `<div class="root html">${html}</div>`;
+        const { entries } = this._model.data;
+        let text = '';
+        for (let i = 0, len = entries.length; i < len; i++) {
+            const entry = entries[i];
+            text += `${entry.name}\n`;
+            text += this.renderEntry(entries[i], 0);
+            if (i < len - 1) {
+                text += '\n';
             }
-            result = `<pre class="tree">${result}</pre>`;
         }
-        const group = `<div class="root">
-        ${result}
-    </div>`;
+        text = `<div class="root text"><pre class="tree">${text}</pre></div>`;
         if (this._app) {
-            this._app.innerHTML = group;
+            this._app.innerHTML = html + text;
+            console.log('rendered');
         }
@@ -383,3 +378,3 @@ }
     const onSettingsChanged = function () {
-        body.className = '';
+        body.className = `${model.viewType}`;
         if (model.visibleSettings) {
@@ -413,4 +408,52 @@ body.classList.add('show-settings');
 
+class SeedOpenStateSwitcher {
+    constructor(_button, model) {
+        this._isOpen = false;
+        this._details = null;
+        this._textElement = document.getElementById('btn-toggle-visible-state-text');
+        _button.addEventListener('click', this.onClick.bind(this));
+        model.addEventListener(Model.EVENT.DATA_UPDATE, this.onDataUpdated.bind(this));
+    }
+    open() {
+        if (this._details) {
+            this._details.forEach((detail) => {
+                detail.open = true;
+            });
+        }
+        if (this._textElement) {
+            this._textElement.textContent = 'collapse all';
+        }
+    }
+    close() {
+        if (this._details) {
+            this._details.forEach((detail) => {
+                detail.open = false;
+            });
+        }
+        if (this._textElement) {
+            this._textElement.textContent = 'expand all';
+        }
+    }
+    onClick() {
+        this._isOpen = !this._isOpen;
+        if (this._isOpen) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
+    }
+    onDataUpdated() {
+        this._details = document.querySelectorAll('.detail');
+    }
+}
+const setSeedOpenStateSwitcher = (model) => {
+    const btn = document.getElementById('btn-toggle-visible-state');
+    if (btn) {
+        new SeedOpenStateSwitcher(btn, model);
+    }
+};
+
 const model = new Model();
-const renderer = new Renderer(model);
+new Renderer(model);
 let ws;
@@ -429,2 +472,3 @@ try {
             const msg = JSON.parse(event.data);
+            setSeedOpenStateSwitcher(model);
             model.data = msg;
@@ -438,2 +482,1 @@ setSettings(model);
 });
-model.addEventListener(Model.EVENT.VIEW_CHANGED, () => renderer.render());

dist/index.js

 /*!
-  @tkskto/vue-component-analyzer v0.2.0
+  @tkskto/vue-component-analyzer v0.2.1
   https://github.com/tkskto/
   Released under the MIT License.
   dependencies: 
-    commander -- 7.1.0
+    commander -- 7.2.0
     ejs -- 3.1.6
     express -- 4.17.1
-    globby -- 11.0.2
+    globby -- 11.0.3
     mkdirp -- 1.0.4
@@ -227,6 +227,8 @@ opener -- 1.5.2
     constructor() {
-        this.getImportDeclarationTree = (fileName, isTest = false) => {
+        this.getImportDeclarationTree = (fileName, parents, isTest = false) => {
             const filename = path_1__default['default'].resolve(cwd, fileName);
             const shortFilename = filename.replace(cwd, '');
             const stat = fs_1__default['default'].statSync(filename);
+            const ancestorList = parents.concat();
+            ancestorList.push(fileName);
             console.log(`read ${filename}.`);
@@ -251,3 +253,8 @@ this._counter.add(shortFilename);
                         if (nextFilename) {
-                            component.addChildReport(this.getImportDeclarationTree(nextFilename, isTest));
+                            if (parents.includes(nextFilename)) {
+                                console.warn(`Circular dependency detected between ${nextFilename} and ${filename}`);
+                            }
+                            else {
+                                component.addChildReport(this.getImportDeclarationTree(nextFilename, ancestorList, isTest));
+                            }
                         }
@@ -295,2 +302,10 @@ }
     });
+    server.on('error', (err) => {
+        console.log(err);
+        if (server.listening) {
+            server.close((serverErr) => {
+                console.log(serverErr);
+            });
+        }
+    });
     server.listen(port, HOST, () => {
@@ -369,3 +384,3 @@ const addressPort = server.address().port || port;
             const entryFile = entries[i];
-            const children = analyzer.getImportDeclarationTree(entryFile);
+            const children = analyzer.getImportDeclarationTree(entryFile, []);
             entriesData.push(children);
@@ -372,0 +387,0 @@ }

package.json

 {
   "name": "@tkskto/vue-component-analyzer",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Analyze dependency tree for Vue.js SFC (Single File Component)",
@@ -48,6 +48,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "commander": "7.1.0",
+    "commander": "7.2.0",
     "ejs": "3.1.6",
     "express": "4.17.1",
-    "globby": "11.0.2",
+    "globby": "11.0.3",
     "mkdirp": "1.0.4",
@@ -54,0 +54,0 @@ "opener": "1.5.2",

README.md

@@ -9,5 +9,9 @@ # vue-component-analyzer
 
+or you can see simple text pattern.
+
+![](https://github.com/tkskto/vue-component-analyzer/blob/images/images/screenshot4.png?raw=true)
+
 ## Why?
 
-When you try to change the behavior of components, it will help you to　investigate the influence range. Because it is hard to know where the component is used.
+When you try to change the behavior of components, it will help you to investigate the influence range. Because it is hard to know where the component is used.
 
@@ -14,0 +18,0 @@ When you join a new big project using Vue.js, it will help you to understand dependencies.

No alert changes

Improved metrics

Total package byte prevSize

42433

increased by5.5%

Lines of code

1107

increased by6.03%

Number of lines in readme file

53

increased by8.16%

Dependency changes

• + Addedcommander@7.2.0(transitive)

• + Addedglobby@11.0.3(transitive)

• - Removedcommander@7.1.0(transitive)

• - Removedglobby@11.0.2(transitive)

• Updatedcommander@7.2.0

• Updatedglobby@11.0.3