[ { "path": ".editorconfig", "content": "[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 4\nend_of_line = lf\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nmax_line_length = 100\n" }, { "path": ".eslintrc", "content": "{\n \"root\": true,\n \"parser\": \"@typescript-eslint/parser\",\n \"plugins\": [\n \"@typescript-eslint\"\n ],\n \"ignorePatterns\": [\"dist/**/*.js\", \"bin/**/*.js\"],\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:@typescript-eslint/eslint-recommended\",\n \"plugin:@typescript-eslint/recommended\"\n ],\n \"rules\": {\n \"semi\": [\"error\", \"always\"],\n \"max-len\": [\"error\", 120]\n }\n}\n" }, { "path": ".github/workflows/node.js.yml", "content": "name: Push (lint + unit tests)\n\non: [push]\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [16.x]\n\n steps:\n - uses: actions/checkout@v3\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v3\n with:\n node-version: ${{ matrix.node-version }}\n - name: npm install, build, and test\n run: |\n npm install\n npm run build\n npm run lint\n npm run test\n env:\n CI: true" }, { "path": ".gitignore", "content": "node_modules\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n" }, { "path": ".nvmrc", "content": "18.6\n" }, { "path": "LICENSE.txt", "content": "MIT License\n\nCopyright (c) 2021-2022 Martina Scharrer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "README.md", "content": "# vuensight 👀\nVisualize Vue.js **component relationships** and **communication channels**, i.e. props, events and slots. This tool operates on the \ncommand line and is made for developers. The aim of vuensight is to provide visual insight into the components of a \nVue.js project and to support developers before and during refactoring, e.g. by visually analyzing which prop is used \nin which parent component or by highlighting unused components or channels.\n\nAn example visualization of vuensight itself:\n![demo image of vuensight](docs/vuensight-demo.png)\n\nThis tool is built on top of the two awesome packages:\n- [dependency-cruiser](https://github.com/sverweij/dependency-cruiser) for building the dependency tree \n- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) for parsing the Vue files\n\n## Getting started 🚀\n### Install\nFirst, install the cli package either locally in the project you want to visualize:\n```\nnpm i -D @vuensight/cli\n```\n\nOr globally on your machine if you intend to visualize multiple projects:\n```\nnpm i -g @vuensight/cli\n```\n\n### Run\nThen run the tool in your project folder:\n```\nvuensight\n```\n\n#### Options\n- `--dir` or `-d` (optional): Specify the directory that should be parsed relative from your current working directory, default is `src`\n- `--port` or `-p` (optional): Start the application in a different port, default is 4444\n- `--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.\n- `--ts-config` or `-tsc` (optional): Specify the path to your TypeScript config file (from your current working directory).\n\nAn example usage:\n```\nvuensight --dir resources/js --port 9999 --webpack-config ./webpack-config.json --ts-config ./tsconfig.json\n```\n\n## Licencse\n[MIT](LICENSE.txt)\n\n\n## Development\n### Requirements\n- `npm version >= 7` (the project is a monorepo and uses npm workspaces which require at least npm version 7) \n\n### Installing dependencies\n- `npm i` (in root directory) to install all dependencies of all packages\n- `npm i ` to add a global dependency for all packages \n- `npm i --workspace @vuensight/` to add a new dependency to a specific package\n\n### Build packages\n- `npm run build` in root folder (to build all packages at the same time)\n- `npm run build` in each package\n\n#### or use a watcher\n- `npm run build:watch` in every package separately \n\n### Link locally\nFor testing vuensight locally in a Vue project run `npm link` in the cli package and `npm link @vuensight/cli` in the \nproject you want to test it on. Make sure you use a correct node version and ran `npm i` in the root directory \nbeforehand as this links the packages together internally.\n\n### Unit tests\n- `npm run test` in root (to run tests for all packages)\n- `npm run test` in each package\n\n### Publish\n- `npm publish` in each package\n" }, { "path": "package.json", "content": "{\n \"name\": \"vuensight\",\n \"description\": \"`vuensight` is a cli tool for parsing and visualizing Vue.js projects. The ultimate goal is to visualize the components communication e.g. their props, events and slots in an interactive web app. **This project is currently a work in progress!**\",\n \"scripts\": {\n \"build\": \"npm run build --workspaces\",\n \"lint\": \"npm run lint --workspaces\",\n \"test\": \"npm run test --workspaces\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/martinascharrer/vuensight.git\"\n },\n \"author\": \"Martina Scharrer\",\n \"license\": \"(MIT)\",\n \"bugs\": {\n \"url\": \"https://github.com/martinascharrer/vuensight/issues\"\n },\n \"homepage\": \"https://github.com/martinascharrer/vuensight#readme\",\n \"workspaces\": [\n \"./packages/types\",\n \"./packages/parser\",\n \"./packages/app\",\n \"./packages/cli\"\n ],\n \"devDependencies\": {\n \"@types/node\": \"^17.0.22\",\n \"@typescript-eslint/eslint-plugin\": \"^5.16.0\",\n \"@typescript-eslint/parser\": \"^5.16.0\",\n \"eslint\": \"^8.11.0\",\n \"jest\": \"^27.5.1\",\n \"jest-cli\": \"^27.5.1\",\n \"ts-jest\": \"^27.1.3\",\n \"typescript\": \"^4.6.2\"\n }\n}\n" }, { "path": "packages/app/.browserslistrc", "content": "> 1%\nlast 2 versions\nnot dead\n" }, { "path": "packages/app/.editorconfig", "content": "[*.{js,jsx,ts,tsx,vue}]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ntrim_trailing_whitespace = true\ninsert_final_newline = true\nmax_line_length = 120\n" }, { "path": "packages/app/.eslintrc.js", "content": "module.exports = {\n root: true,\n env: {\n node: true,\n },\n extends: [\n 'plugin:vue/vue3-essential',\n '@vue/airbnb',\n '@vue/typescript/recommended',\n ],\n parserOptions: {\n ecmaVersion: 2020,\n },\n rules: {\n 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n 'max-len': ['error', 120],\n 'import/no-unresolved': 'warn',\n 'import/extensions': 'warn',\n },\n overrides: [\n {\n files: [\n '**/__tests__/*.{j,t}s?(x)',\n '**/tests/unit/**/*.spec.{j,t}s?(x)',\n ],\n env: {\n jest: true,\n },\n },\n ],\n};\n" }, { "path": "packages/app/.gitignore", "content": ".DS_Store\nnode_modules\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n/dist\ntsconfig.tsbuildinfo" }, { "path": "packages/app/.npmignore", "content": "*\n\n!dist/app/**/*\ndist/app/**/*.js.map\n!dist/server/*.js\n!dist/server/*.d.ts\n!package.json\n!readme.md" }, { "path": "packages/app/LICENSE.txt", "content": "MIT License\n\nCopyright (c) 2021-2022 Martina Scharrer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "packages/app/README.md", "content": "# @vuensight/app\n> ⚠️ **General information about usage and setup of `vuensight` can be found [here](https://github.com/martinascharrer/vuensight)** \n\nThe `app` package visualizes the parsed Vue project as force-directed graph. \nThe visualization is built with [d3.js](https://d3js.org/) and [webCola](https://github.com/tgdwyer/WebCola).\n\n## Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n```\nnpm run build\n```\n\n### Run your unit tests\n```\nnpm run test:unit\n```\n\n### Lints and fixes files\n```\nnpm run lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n## Licencse\n[MIT](LICENSE.txt)" }, { "path": "packages/app/babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/cli-plugin-babel/preset',\n ],\n};\n" }, { "path": "packages/app/jest.config.js", "content": "module.exports = {\n preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',\n transform: {\n '^.+\\\\.vue$': '@vue/vue3-jest',\n },\n testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],\n moduleFileExtensions: [\n 'js',\n 'ts',\n ],\n};\n" }, { "path": "packages/app/package.json", "content": "{\n \"name\": \"@vuensight/app\",\n \"version\": \"0.3.3\",\n \"main\": \"dist/server/index.js\",\n \"description\": \"The front-end of @vuensight that visualizes Vue.js projects.\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/martinascharrer/vuensight.git\"\n },\n \"author\": \"Martina Scharrer\",\n \"license\": \"(MIT)\",\n \"bugs\": {\n \"url\": \"https://github.com/martinascharrer/vuensight/issues\"\n },\n \"homepage\": \"https://github.com/martinascharrer/vuensight#readme\",\n \"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"rm -rf dist/ && echo 'Building app...' && vue-cli-service build --dest dist/app && echo 'Building server...' && cd server && tsc -p tsconfig.pkg.json\",\n \"build:watch\": \"vue-cli-service build --watch\",\n \"test\": \"vue-cli-service test:unit\",\n \"lint\": \"vue-cli-service lint\",\n \"prepublish\": \"npm run build\"\n },\n \"dependencies\": {\n \"@vuensight/parser\": \"^0.1.4\",\n \"@vuensight/types\": \"^0.1.0\",\n \"@vueuse/core\": \"^8.3.1\",\n \"connect-history-api-fallback\": \"^1.6.0\",\n \"core-js\": \"^3.21.1\",\n \"d3\": \"^5.16.0\",\n \"express\": \"^4.17.3\",\n \"vue\": \"^3.2.31\",\n \"vue-router\": \"^4.0.14\",\n \"webcola\": \"^3.4.0\"\n },\n \"devDependencies\": {\n \"@types/connect-history-api-fallback\": \"^1.3.5\",\n \"@types/d3\": \"^7.1.0\",\n \"@types/express\": \"^4.17.13\",\n \"@vue/cli-plugin-babel\": \"^5.0.4\",\n \"@vue/cli-plugin-eslint\": \"^5.0.4\",\n \"@vue/cli-plugin-router\": \"^5.0.4\",\n \"@vue/cli-plugin-typescript\": \"^5.0.4\",\n \"@vue/cli-plugin-unit-jest\": \"^5.0.4\",\n \"@vue/cli-service\": \"^5.0.4\",\n \"@vue/compiler-sfc\": \"^3.2.31\",\n \"@vue/eslint-config-airbnb\": \"^6.0.0\",\n \"@vue/eslint-config-typescript\": \"^10.0.0\",\n \"@vue/test-utils\": \"^2.0.0-rc.17\",\n \"@vue/vue3-jest\": \"^27.0.0\",\n \"eslint-plugin-import\": \"^2.25.4\",\n \"eslint-plugin-vue\": \"^8.5.0\",\n \"sass\": \"^1.49.9\",\n \"sass-loader\": \"^12.6.0\"\n }\n}\n" }, { "path": "packages/app/public/index.html", "content": "\n\n \n \n \n \n favicon.ico\">\n <%= htmlWebpackPlugin.options.title %>\n \n \n \n
\n \n \n\n" }, { "path": "packages/app/server/index.ts", "content": "import history from 'connect-history-api-fallback';\nimport express from 'express';\nimport { join } from 'path';\n\nimport { parse } from '@vuensight/parser';\n\nexport default async (directory: string, port?: number, webpackConfigPath?: string, tsConfigPath?: string) => {\n const app = express();\n\n const localPort = port || 4444;\n\n app.get('/parse-result', async (request, response) => {\n const parseResult = await parse(directory, 'vue', webpackConfigPath, tsConfigPath);\n response.json(parseResult);\n });\n\n app.use(history());\n\n app.use(express.static(join(__dirname, '../app')));\n\n app.listen((+localPort), () => {\n console.log(`👀 vuensight: http://localhost:${localPort}`);\n });\n};\n" }, { "path": "packages/app/server/tsconfig.pkg.json", "content": "{\n \"extends\": \"../../../tsconfig.build.json\",\n \"compilerOptions\": {\n \"outDir\": \"../dist/server\"\n },\n \"include\": [\n \"./**/*.ts\"\n ]\n}\n" }, { "path": "packages/app/src/App.vue", "content": "\n\n\n" }, { "path": "packages/app/src/assets/css/border-radius.css", "content": ":root {\n --border-radius--xs: 2px;\n --border-radius--s: 5px;\n --border-radius--m: 10px;\n --border-radius--l: 15px;\n --border-radius--xl: 20px;\n --border-radius--2xl: 25px;\n}" }, { "path": "packages/app/src/assets/css/box-shadow.css", "content": ":root {\n --box-shadow--xs: 0px 0px 2px rgba(0,0,0,0.2);\n --box-shadow--s: 0px 0px 4px rgba(0,0,0,0.23);\n --box-shadow--m: 0px 0px 8px rgba(0,0,0,0.3);\n}" }, { "path": "packages/app/src/assets/css/color.css", "content": ":root {\n --mint-grey: #CBE5DE;\n --mint-10: #CDF6EB;\n --mint-30: #A0E2CF;\n --mint-50: #61c799;\n --mint-70: #369D6F;\n\n --red-grey: #E9D0C9;\n --red-10: #F6DCD4;\n --red-30: #FFB7A1;\n --red-50: #F57A5F;\n --red-70: #C54C31;\n\n --purple-grey: #c7b1c9;\n --purple-30: #E9BCEF;\n --purple-50: #C37ECD;\n --purple-70: #854D8D;\n\n --yellow-30: #F6D697;\n --yellow-50: #EDAB2C;\n\n --grey-5: #FaFaFa;\n --grey-10: #F2F2F2;\n --grey-15: #d7d7d7;\n --grey-20: #CECECE;\n --grey-30: #9a9a9a;\n --grey-50: #7c7c7c;\n\n --navy-50: #7A8497;\n --navy-90: #212c41;\n}" }, { "path": "packages/app/src/assets/css/font.css", "content": ":root {\n font-size: 16px;\n\n --font-size--3xs: 0.35em;\n --font-size--2xs: 0.5em;\n --font-size--xs: 0.75em;\n --font-size--s: 0.875em;\n --font-size--m: 1em;\n --font-size--l: 1.125em;\n --font-size--xl: 1.25em;\n --font-size--2xl: 1.5em;\n --font-size--3xl: 2em;\n --font-size--4xl: 2.75em;\n\n}\n" }, { "path": "packages/app/src/assets/css/icon.css", "content": ":root {\n --icon--xs: 0.75rem;\n --icon--s: 1rem;\n --icon--m: 1.25rem;\n --icon--l: 1.5rem;\n --icon--xl: 1.75rem;\n --icon--2xl: 2rem;\n}" }, { "path": "packages/app/src/assets/css/spacing.css", "content": ":root {\n --spacing--2xs: 0.125rem;\n --spacing--xs: 0.25rem;\n --spacing--s: 0.5rem;\n --spacing--m: 0.75rem;\n --spacing--l: 1rem;\n --spacing--xl: 1.5rem;\n --spacing--2xl: 2rem;\n --spacing--3xl: 2.75rem;\n --spacing--4xl: 4rem;\n --spacing--5xl: 6rem;\n}" }, { "path": "packages/app/src/components/CardCommunicationChannel.test.ts", "content": "// eslint-disable-next-line import/no-extraneous-dependencies\nimport { mount, MountingOptions } from '@vue/test-utils';\nimport CardCommunicationChannel from '@/components/CardCommunicationChannel.vue';\n\ndescribe('CardCommunicationChannel.vue', () => {\n it('renders the card with correct name and counter', () => {\n const wrapper = mount(CardCommunicationChannel, {\n props: {\n channel: {\n name: 'foo prop',\n },\n dependents: [\n {\n name: 'Bar',\n fullPath: 'foo/bar.vue',\n },\n {\n name: 'Test',\n fullPath: 'foo/test.vue',\n },\n ],\n },\n } as MountingOptions); // eslint-disable-line @typescript-eslint/no-explicit-any\n expect(wrapper.find('[data-qa=\"name\"]').text()).toBe('foo prop');\n expect(wrapper.find('[data-qa=\"counter\"]').text()).toBe('2');\n });\n});\n" }, { "path": "packages/app/src/components/CardCommunicationChannel.vue", "content": "\n \n \n\n\n\n\n\n" }, { "path": "packages/app/src/components/ForceGraph.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/MenuCommunication.vue", "content": "\n\n\n\n" }, { "path": "packages/app/src/components/SidebarCommunication.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/SidebarCommunicationEventsTab.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/SidebarCommunicationPropsTab.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/SidebarCommunicationSlotsTab.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseArrowIcon.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseBadge.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseCard.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseCheckIcon.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseDelimiter.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseDropdown.vue", "content": "\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseIcon.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseIconButton.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseList.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseLoadingSpinner.vue", "content": "\n\n\n" }, { "path": "packages/app/src/components/base/BaseRadioButtonGroup.vue", "content": "\n\n\n\n" }, { "path": "packages/app/src/components/base/BaseSubNav.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/components/icons/IconCross.vue", "content": "\n" }, { "path": "packages/app/src/components/icons/IconFilter.vue", "content": "\n" }, { "path": "packages/app/src/components/icons/IconSearch.vue", "content": "\n" }, { "path": "packages/app/src/components/icons/IconSelect.vue", "content": "\n" }, { "path": "packages/app/src/components/layout/LayoutSplitView.vue", "content": "\n\n\n\n\n" }, { "path": "packages/app/src/composables/fetch.ts", "content": "import { ref, readonly } from 'vue';\n\nexport const useFetch = (fetcher: () => Promise) => { // eslint-disable-line @typescript-eslint/no-explicit-any\n const data = ref(null);\n const isLoading = ref(false);\n const isError = ref(false);\n\n const get = async () => {\n isLoading.value = true;\n data.value = null;\n isError.value = false;\n try {\n data.value = await fetcher();\n } catch (e) {\n isError.value = true;\n console.error(e);\n }\n isLoading.value = false;\n };\n\n return {\n data: readonly(data),\n isLoading: readonly(isLoading),\n isError: readonly(isError),\n get,\n };\n};\n\nexport default {\n useFetch,\n};\n" }, { "path": "packages/app/src/main.ts", "content": "import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\n\ncreateApp(App).use(router).mount('#app');\n" }, { "path": "packages/app/src/router/index.ts", "content": "import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';\nimport PageCommunication from '../views/PageCommunication.vue';\nimport SidebarCommunicationEventsTab from '../components/SidebarCommunicationEventsTab.vue';\nimport SidebarCommunicationPropsTab from '../components/SidebarCommunicationPropsTab.vue';\nimport SidebarCommunicationSlotsTab from '../components/SidebarCommunicationSlotsTab.vue';\n\nconst routes: Array = [\n {\n path: '/',\n name: 'page-communication',\n component: PageCommunication,\n children: [\n {\n path: '',\n name: 'Props',\n component: SidebarCommunicationPropsTab,\n },\n {\n path: 'events',\n name: 'Events',\n component: SidebarCommunicationEventsTab,\n },\n {\n path: 'slots',\n name: 'Slots',\n component: SidebarCommunicationSlotsTab,\n },\n ],\n },\n];\n\nconst router = createRouter({\n history: createWebHistory(process.env.BASE_URL),\n routes,\n});\n\nexport default router;\n" }, { "path": "packages/app/src/services/parser.ts", "content": "import { VueComponent } from '@vuensight/types';\n\nexport const get = ():Promise => fetch('/parse-result')\n .then((result) => result.json());\n\nexport default {\n get,\n};\n" }, { "path": "packages/app/src/shims-vue.d.ts", "content": "/* eslint-disable */\ndeclare module '*.vue' {\n import type { DefineComponent } from 'vue'\n const component: DefineComponent<{}, {}, any>\n export default component\n}" }, { "path": "packages/app/src/types/color.ts", "content": "export type Color = 'mint' | 'red' | 'purple' | 'light-mint' | 'light-red' | 'light-purple';\n" }, { "path": "packages/app/src/types/force.ts", "content": "import { VueComponent } from '@vuensight/types';\n\nexport type Link = {\n source: string,\n target: string,\n}\n\nexport type ForceLayout = {\n nodes: VueComponent[],\n links: Link[],\n}\n" }, { "path": "packages/app/src/types/nodeSizeAttributeType.ts", "content": "const nodeSizeAttributeType = {\n PROP: 'props',\n EVENT: 'events',\n SLOT: 'slots',\n CHANNELS: 'channels',\n DEPENDENTS: 'dependents',\n DEPENDENCIES: 'dependencies',\n NONE: 'none',\n};\nObject.freeze(nodeSizeAttributeType);\n\nexport default nodeSizeAttributeType;\n" }, { "path": "packages/app/src/views/PageCommunication.vue", "content": "\n \n \n\n\n\n\n" }, { "path": "packages/app/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"module\": \"esnext\",\n \"strict\": true,\n \"jsx\": \"preserve\",\n \"importHelpers\": true,\n \"moduleResolution\": \"node\",\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"sourceMap\": true,\n \"composite\": true,\n \"baseUrl\": \"./\",\n \"types\": [\n \"webpack-env\",\n \"jest\"\n ],\n \"paths\": {\n \"@/*\": [\n \"src/*\"\n ]\n },\n \"lib\": [\n \"esnext\",\n \"dom\",\n \"dom.iterable\",\n \"scripthost\"\n ]\n },\n \"include\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"src/**/*.vue\",\n \"tests/**/*.ts\",\n \"tests/**/*.tsx\"\n ],\n \"exclude\": [\n \"node_modules\",\n \"server/**/*\"\n ]\n}\n" }, { "path": "packages/cli/.eslintrc", "content": "{\n \"ignorePatterns\": [\"bin/**/*.js\"]\n}\n" }, { "path": "packages/cli/.gitignore", "content": "/dist\n" }, { "path": "packages/cli/.npmignore", "content": "*\n!dist/*\n!package.json\n!readme.md" }, { "path": "packages/cli/LICENSE.txt", "content": "MIT License\n\nCopyright (c) 2021-2022 Martina Scharrer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "packages/cli/README.md", "content": "# vuensight 👀\nVisualize Vue.js **component relationships** and **communication channels**, i.e. props, events and slots. This tool operates on the\ncommand line and is made for developers. The aim of vuensight is to provide visual insight into the components of a\nVue.js project and to support developers before and during refactoring, e.g. by visually analyzing which prop is used\nin which parent component or by highlighting unused components or channels.\n\nAn example visualization of vuensight itself:\n![demo image of vuensight](docs/vuensight-demo.png)\n\nThis tool is built on top of the two awesome packages:\n- [dependency-cruiser](https://github.com/sverweij/dependency-cruiser) for building the dependency tree\n- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) for parsing the Vue files\n\n## Getting started 🚀\n### Install\nFirst, install the cli package either locally in the project you want to visualize:\n```\nnpm i -D @vuensight/cli\n```\n\nOr globally on your machine if you plan to visualize multiple projects:\n```\nnpm i -g @vuensight/cli\n```\n\n### Run\nThen run the tool in your project folder:\n```\nvuensight\n```\n\n#### Options\n- `--dir` or `-d` (optional): Specify the directory that should be parsed relative from your current working directory, default is `src`\n- `--port` or `-p` (optional): Start the application in a different port, default is 4444\n- `--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.\n- `--ts-config` or `-tsc` (optional): Specify the path to your TypeScript config file (from your current working directory).\n\nAn example usage:\n```\nvuensight --dir resources/js --port 9999 --webpack-config ./webpack-config.json --ts-config ./tsconfig.json\n```\n\n## Licencse\n[MIT](LICENSE.txt)\n" }, { "path": "packages/cli/package.json", "content": "{\n \"name\": \"@vuensight/cli\",\n \"version\": \"0.1.5\",\n \"description\": \"Command line interface of @vuensight.\",\n \"main\": \"bin/index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/martinascharrer/vuensight.git\"\n },\n \"scripts\": {\n \"build\": \"rm -rf dist/* && tsc -p tsconfig.pkg.json\",\n \"build:watch\": \"tsc -w -p tsconfig.pkg.json\",\n \"lint\": \"eslint --ext ts\",\n \"test\": \"echo 'no tests yet in cli'\",\n \"prepublish\": \"npm run build\"\n },\n \"bin\": {\n \"vuensight\": \"dist/index.js\"\n },\n \"keywords\": [\n \"cli\",\n \"node.js\"\n ],\n \"author\": \"Martina Scharrer\",\n \"license\": \"(MIT)\",\n \"bugs\": {\n \"url\": \"https://github.com/martinascharrer/vuensight/issues\"\n },\n \"homepage\": \"https://github.com/martinascharrer/vuensight#readme\",\n \"dependencies\": {\n \"@vuensight/app\": \"^0.3.1\",\n \"commander\": \"^9.1.0\"\n }\n}\n" }, { "path": "packages/cli/src/index.ts", "content": "#!/usr/bin/env node\n\nimport { program } from 'commander';\nimport startServer from '@vuensight/app';\n\nprogram\n .description('Vue Component Insight CLI')\n .option('-d, --dir [dir]', 'specify the directory that should be analyzed (default is src)', 'src')\n .option('-p, --port [port]', 'start the application in a different port (default is 4444)')\n .option('-wpc, --webpack-config [webpackConfig]', 'path to webpack config file')\n .option('-tsc, --ts-config [tsConfig]', 'path to TypeScript config file')\n .parse();\n\nconst dir = program.opts().dir;\nconst port = program.opts().port;\nconst webpackConfig = program.opts().webpackConfig;\nconst tsConfig = program.opts().tsConfig;\n\nconst init = async () => {\n try {\n await startServer(dir, port, webpackConfig, tsConfig);\n } catch (e) {\n console.error('Something went wrong parsing the project', e);\n }\n};\n\ninit();\n\n" }, { "path": "packages/cli/tsconfig.pkg.json", "content": "{\n \"extends\": \"../../tsconfig.build.json\",\n \"compilerOptions\": {\n \"outDir\": \"./dist/\"\n },\n \"include\": [\n \"./src/*.ts\"\n ],\n \"paths\": {\n \"@/*\": [\n \"src/*\"\n ]\n }\n}\n" }, { "path": "packages/parser/.eslintrc", "content": "{\n \"ignorePatterns\": [\"test/project/*\"]\n}\n" }, { "path": "packages/parser/.gitignore", "content": "/dist\n/coverage\n" }, { "path": "packages/parser/.npmignore", "content": "*\n!dist/**/*.js\ndist/tsconfig.pkg.tsbuildinfo\n!package.json\n!readme.md" }, { "path": "packages/parser/LICENSE.txt", "content": "MIT License\n\nCopyright (c) 2021-2022 Martina Scharrer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "packages/parser/README.md", "content": "# @vuensight/parser\n> ⚠️ **General information about usage and setup of `vuensight` can be found [here](https://github.com/martinascharrer/vuensight)**\n\nThe `parser` extracts information about component dependencies as well as their used props/events/slots of a\ngiven Vue.js project.\n\n## Development\nCompile typescript files to `dist` folder\n```\nnpm run build\n```\n\nRun eslint\n```\nnpm run lint\n```\n\nRun unit tests + coverage\n```\nnpm test\n```\n\nRun unit test watcher\n```\nnpm run test:watch\n```\n\n## Licencse\n[MIT](LICENSE.txt)" }, { "path": "packages/parser/package.json", "content": "{\n \"name\": \"@vuensight/parser\",\n \"version\": \"0.1.8\",\n \"main\": \"dist/index.js\",\n \"description\": \"This parser extracts information regarding the dependencies and their used props, events and slots of a given Vue.js project.\",\n \"scripts\": {\n \"build\": \"rm -rf dist/* && tsc -p tsconfig.pkg.json\",\n \"build:watch\": \"tsc -w -p tsconfig.pkg.json\",\n \"test\": \"jest --coverage\",\n \"test:watch\": \"jest --watch\",\n \"lint\": \"eslint --ext ts\",\n \"prepublish\": \"npm run build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/martinascharrer/vuensight.git\"\n },\n \"keywords\": [\n \"parser\",\n \"vue\"\n ],\n \"author\": \"Martina Scharrer\",\n \"license\": \"(MIT)\",\n \"bugs\": {\n \"url\": \"https://github.com/martinascharrer/vuensight/issues\"\n },\n \"homepage\": \"https://github.com/martinascharrer/vuensight#readme\",\n \"jest\": {\n \"preset\": \"ts-jest\",\n \"testEnvironment\": \"node\",\n \"moduleNameMapper\": {\n \"dependency-cruiser/config-utl/extract-ts-config\": \"dependency-cruiser/src/config-utl/extract-ts-config\",\n \"dependency-cruiser/config-utl/extract-webpack-resolve-config\": \"dependency-cruiser/src/config-utl/extract-webpack-resolve-config\"\n }\n },\n \"dependencies\": {\n \"dependency-cruiser\": \"^12.10.0\",\n \"fs\": \"^0.0.1-security\",\n \"jsdom\": \"^21.1.0\",\n \"vue-docgen-api\": \"^4.60.0\"\n },\n \"devDependencies\": {\n \"@types/jsdom\": \"^21.1.0\",\n \"@vuensight/types\": \"^0.1.0\"\n }\n}\n" }, { "path": "packages/parser/src/index.ts", "content": "import { VueComponent } from '@vuensight/types';\n\nimport { findDependencies } from './vue/dependencies';\nimport { analyzeComponents, analyzeCommunicationChannelUsage } from './vue/analyzer';\n\nexport const parse = async (\n directory: string,\n fileType = 'vue',\n webpackConfigPath?: string,\n tsConfigPath?: string\n): Promise => {\n const modules = findDependencies(directory, fileType, webpackConfigPath, tsConfigPath);\n if (!modules) return new Array();\n\n const components: VueComponent[] = await analyzeComponents(modules);\n return analyzeCommunicationChannelUsage(components);\n};\n" }, { "path": "packages/parser/src/utils/files.test.ts", "content": "import { getFileNameFromPath } from './files';\n\ndescribe('files', () => {\n describe('getFileNameFromPath', () => {\n it('should extract the filename from the path', () => {\n expect(getFileNameFromPath('src/test/asdf/TestFile.vue')).toBe('TestFile.vue');\n });\n\n it('should extract the filename from the path', () => {\n expect(getFileNameFromPath('src\\\\test\\\\asdf\\\\TestFile.vue')).toBe('TestFile.vue');\n });\n });\n});\n" }, { "path": "packages/parser/src/utils/files.ts", "content": "export const getFileNameFromPath = (path: string): string => {\n const lastDirectoryIndex = path.lastIndexOf('\\\\') !== -1 ? path.lastIndexOf('\\\\') : path.lastIndexOf('/');\n return path.substring(lastDirectoryIndex + 1, path.length);\n};\n" }, { "path": "packages/parser/src/utils/kababize.ts", "content": "export const kebabize = (str: string):string => str.split('')\n .map((letter, idx) => (letter.toUpperCase() === letter\n ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n : letter)).join('');\n\nexport default {\n kebabize,\n};\n" }, { "path": "packages/parser/src/utils/kebabize.test.ts", "content": "import { kebabize } from './kababize';\n\ndescribe('kebabize', () => {\n it('should convert the string to kebab-style', () => {\n expect(kebabize('FooBar')).toBe('foo-bar');\n });\n});\n" }, { "path": "packages/parser/src/utils/vue.test.ts", "content": "import {\n extractScriptContent,\n findTemplate,\n getComponentImportName,\n getTemplateContent\n} from './vue';\n\nconst TEST_FILE = '';\nconst TEST_FILE_WITHOUT_TEMPLATE = '';\n\nconst makeTestFileWithScript = (script: string) => `\n\n\n\n`;\n\ndescribe('vue', () => {\n describe('findTemplate', () => {\n it('should find the template string in the file', () => {\n expect(findTemplate(TEST_FILE)).toBe('');\n });\n\n it('should not find the template string in the file when there is none', () => {\n expect(findTemplate(TEST_FILE_WITHOUT_TEMPLATE)).toBe(null);\n });\n });\n\n describe('getTemplateContent', () => {\n it('should return the content of the template without the template tag', () => {\n expect(getTemplateContent(TEST_FILE)).toBe('Hello');\n });\n\n it('should return null when there is no template', () => {\n expect(getTemplateContent(TEST_FILE_WITHOUT_TEMPLATE)).toBe(null);\n });\n });\n\n describe('extractScriptContent', () => {\n it('should extract the script content from the given file', () => {\n const script = `const test = 3`;\n const testFile = makeTestFileWithScript(script);\n\n expect(extractScriptContent(testFile)).toBe(script);\n });\n });\n\n describe('getComponentImportName', () => {\n it('should find the import name of a component in a js script', () => {\n const script = `import Button from '@/components/base/BaseButton';`;\n const testFile = makeTestFileWithScript(script);\n\n expect(getComponentImportName(testFile, 'BaseButton')).toBe('Button');\n });\n\n it('should not find the import name of a component if it is not imported', () => {\n const script = `import Test from '@/components/base/Test';`;\n const testFile = makeTestFileWithScript(script);\n\n expect(getComponentImportName(testFile, 'BaseButton')).toBe(null);\n });\n });\n});\n" }, { "path": "packages/parser/src/utils/vue.ts", "content": "export const findTemplate = (fileContent: string): string | null => {\n const templateBody = fileContent.match(/(?