martinascharrer / vuensight Goto Github PK

Visualize Vue.js component relationships and communication channels, i.e. props, events and slots. This developer tool operates on the command line and aims to give in-depth insight into a Vue.js project to support refactoring.

License: MIT License

JavaScript 2.07% HTML 0.66% Vue 67.14% TypeScript 28.29% CSS 1.84%

vue vue-components vuejs javascript typescript visualize

vuensight's Introduction

vuensight 👀

Visualize Vue.js component relationships and communication channels, i.e. props, events and slots. This tool operates on the command line and is made for developers. The aim of vuensight is to provide visual insight into the components of a Vue.js project and to support developers before and during refactoring, e.g. by visually analyzing which prop is used in which parent component or by highlighting unused components or channels.

An example visualization of vuensight itself:

This tool is built on top of the two awesome packages:

dependency-cruiser for building the dependency tree
vue-docgen-api for parsing the Vue files

Getting started 🚀

Install

First, install the cli package either locally in the project you want to visualize:

npm i -D @vuensight/cli

Or globally on your machine if you intend to visualize multiple projects:

npm i -g @vuensight/cli

Run

Then run the tool in your project folder:

vuensight

Options

--dir or -d (optional): Specify the directory that should be parsed relative from your current working directory, default is src
--port or -p (optional): Start the application in a different port, default is 4444
--webpack-config or -wpc (optional): Specify the path to your webpack-config (from your current working directory). This is particularly important if you use aliases.
--ts-config or -tsc (optional): Specify the path to your TypeScript config file (from your current working directory).

An example usage:

vuensight --dir resources/js --port 9999 --webpack-config ./webpack-config.json --ts-config ./tsconfig.json

Licencse

MIT

Development

Requirements

npm version >= 7 (the project is a monorepo and uses npm workspaces which require at least npm version 7)

Installing dependencies

npm i (in root directory) to install all dependencies of all packages
npm i <package-name> to add a global dependency for all packages
npm i <package-name> --workspace @vuensight/<vuensight-package-name> to add a new dependency to a specific package

Build packages

npm run build in root folder (to build all packages at the same time)
npm run build in each package

or use a watcher

npm run build:watch in every package separately

Link locally

For testing vuensight locally in a Vue project run npm link in the cli package and npm link @vuensight/cli in the project you want to test it on. Make sure you use a correct node version and ran npm i in the root directory beforehand as this links the packages together internally.

Unit tests

npm run test in root (to run tests for all packages)
npm run test in each package

Publish

npm publish in each package

vuensight's People

Contributors

Stargazers

Watchers

Forkers

redemption198 markthree abhimediratta vikingdadmedic systemexecutellc uhodav

vuensight's Issues

Support globally imported components

Often base components are registered globally for every Vue component with Vue.compont(...) or app.component(...) in Vue 3.
What could be a strategy for parsing such components as well?

Regex for '.vue' files matches not only the extension but everything with 'vue' in the name

Same component being showed twice: @/components/MyCmp.vue vs. ../MyCmp.vue

Same component is being showed twice because it is imported using absolute path in some places and relative path in others

@/components/MyCmp.vue
../MyCmp.vue

Search results are invisible when a node is selected

Vue props/events for v-model are not recognized

Does not check for index.vue files

Hi! It seems the tool currently checks if an index.js(x) file exists at a given path but not for an equivalent .vue file. is this by design? we have a convention to have filepaths like so:

Components/Data/DataTable/index.vue

where the tool fails with:

Neither 'Components/Data/DataTable.vue' nor 'Components/Data/DataTable.js(x)' or 'Components/Data/DataTable/index.js(x)' or 'Components/Data/DataTable/index.ts(x)' could be found in 'Frontend/Components/Data'

is this something that can be fixed/added in the forseable future?

cheers,
daniel

The default slot is never resolved

Add port option for cli

It should be possible to start the application in a different port (default currently is 4444).
The cli option should be --port and -p

Typescript & Nuxt 2

This looks amazing but is there a chance to get this running with old nuxt 2 typescript project?

The main problem is that Nuxt 2 hides the web pack config and I'm struggling with creating it for vuensight.

I tried that with ts-node but get errors because of imports in nuxt.config.ts after rewriting those script in typescript:
nuxt/nuxt#4286

Props with modifiers (e.g. .sync) are not recognized

Components that are imported with another name are not found in template

Import e.g.

<ConfirmModal />
...
import ConfirmModal from '@/components/BaseConfirmModal';

Such components are recognized as dependencies, but when assessing the component props/slots/events the instance is not found in the template, as the name that's used for the search is wrong.

Parser dosen't resolve aliases

Currently an error is thrown in the console if path aliases (e.g. @/folder) are used.
The vue-docgen-api needs a correct webpack/ts config to resolve aliases correctly.