@tkskto/vue-component-analyzer
Advanced tools
Comparing version 0.2.0 to 0.2.1
# 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. |
@@ -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()); |
/*! | ||
@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 @@ } |
{ | ||
"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", |
@@ -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. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
42433
1107
53
+ 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