├── client
    ├── .nuxtrc
    ├── package.json
    ├── app.vue
    ├── nuxt.config.ts
    └── pages
    │   └── index.vue
├── .npmrc
├── .nuxtrc
├── test
    ├── fixtures
    │   └── basic
    │   │   ├── package.json
    │   │   ├── app.vue
    │   │   └── nuxt.config.ts
    └── basic.test.ts
├── src
    ├── runtime
    │   └── plugin.ts
    ├── module.ts
    └── devtools.ts
├── playground
    ├── app.vue
    ├── package.json
    └── nuxt.config.ts
├── vue-mess-detector-nuxt-devtools.png
├── renovate.json
├── tsconfig.json
├── .editorconfig
├── rpc-types.ts
├── .github
    └── workflows
    │   ├── autofix.yml
    │   └── unit-tests.yml
├── CHANGELOG.md
├── .gitignore
├── eslint.config.js
├── package.json
└── README.md


/client/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=true
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=false
2 | typescript.includeWorkspace=true
3 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "vue-mess-detector-client"
4 | }
5 | 


--------------------------------------------------------------------------------
/client/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "basic",
4 |   "type": "module"
5 | }
6 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>basic</div>
3 | </template>
4 | 
5 | <script setup>
6 | </script>
7 | 


--------------------------------------------------------------------------------
/src/runtime/plugin.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtPlugin } from '#app'
2 | 
3 | export default defineNuxtPlugin((_nuxtApp) => {
4 | })
5 | 


--------------------------------------------------------------------------------
/playground/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     Nuxt module playground!
4 |   </div>
5 | </template>
6 | 
7 | <script setup>
8 | </script>
9 | 


--------------------------------------------------------------------------------
/vue-mess-detector-nuxt-devtools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrd108/vue-mess-detector-nuxt-devtools/HEAD/vue-mess-detector-nuxt-devtools.png


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "config:recommended"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./.nuxt/tsconfig.json",
3 |   "exclude": [
4 |     "dist",
5 |     "node_modules",
6 |     "playground",
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/test/fixtures/basic/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import vueMessDetector from '../../../src/module'
2 | 
3 | export default defineNuxtConfig({
4 |   devtools: {
5 |     enabled: true,
6 |   },
7 |   modules: [vueMessDetector],
8 | })
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_size = 2
 5 | indent_style = space
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "vue-mess-detector-nuxt-devtools-playground",
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "dev": "nuxi dev",
 7 |     "build": "nuxi build",
 8 |     "generate": "nuxi generate"
 9 |   },
10 |   "dependencies": {
11 |     "nuxt": "^3.13.2"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/rpc-types.ts:
--------------------------------------------------------------------------------
 1 | export interface AnalysisResult {
 2 |   output: { info: string }[]
 3 |   reportOutput: Record<string, Array<{ id: string, description: string, message: string }>>
 4 |   codeHealthOutput: { info: string }[]
 5 | }
 6 | 
 7 | export interface ServerFunctions {
 8 |   getResults: () => Promise<AnalysisResult>
 9 | }
10 | 
11 | export interface ClientFunctions {
12 |   _doNothing: () => void
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/workflows/autofix.yml:
--------------------------------------------------------------------------------
 1 | name: autofix.ci
 2 | on:
 3 |   pull_request:
 4 |   push:
 5 |     branches: [main]
 6 | permissions:
 7 |   contents: read
 8 | 
 9 | jobs:
10 |   autofix:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v4
14 |       - uses: actions/setup-node@v4
15 |         with:
16 |           node-version: '20'
17 |           cache: yarn
18 | 
19 |       - name: Install dependencies
20 |         run: yarn install
21 |       - name: Run yarn lint --fix
22 |         run: yarn lint:fix
23 | 
24 |       - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
25 | 


--------------------------------------------------------------------------------
/.github/workflows/unit-tests.yml:
--------------------------------------------------------------------------------
 1 | name: Run Unit Tests
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [main]
 6 |   pull_request:
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   test:
11 |     runs-on: ubuntu-latest
12 | 
13 |     steps:
14 |       - uses: actions/checkout@v4
15 | 
16 |       - name: Use Node.js
17 |         uses: actions/setup-node@v4
18 |         with:
19 |           node-version: "20"
20 |           cache: yarn
21 | 
22 |       - name: Install dependencies
23 |         run: yarn install
24 | 
25 |       - name: Prepare
26 |         run: yarn dev:prepare
27 | 
28 |       - name: Run tests
29 |         run: yarn test
30 | 


--------------------------------------------------------------------------------
/client/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'pathe'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   ssr: false,
 5 | 
 6 |   modules: [
 7 |     '@nuxt/devtools-ui-kit',
 8 |   ],
 9 | 
10 |   nitro: {
11 |     output: {
12 |       publicDir: resolve(__dirname, '../dist/client'),
13 |     },
14 |   },
15 | 
16 |   app: {
17 |     baseURL: '/__vue-mess-detector',
18 |   },
19 | 
20 |   vite: {
21 |     server: {
22 |       hmr: {
23 |         // Instead of go through proxy, we directly connect real port of the client app
24 |         clientPort: +(process.env.PORT || 3300),
25 |       },
26 |     },
27 |   },
28 | 
29 |   devtools: {
30 |     enabled: true,
31 |   },
32 | 
33 |   compatibilityDate: '2024-08-21',
34 | })
35 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | 
 4 | ## v0.1.2
 5 | 
 6 | [compare changes](https://github.com/rrd108/vue-mess-detector-nuxt-devtools/compare/v0.1.1...v0.1.2)
 7 | 
 8 | ### 🏡 Chore
 9 | 
10 | - **release:** V0.1.1 ([07cb9fe](https://github.com/rrd108/vue-mess-detector-nuxt-devtools/commit/07cb9fe))
11 | 
12 | ### ❤️ Contributors
13 | 
14 | - Rrd108 ([@rrd108](http://github.com/rrd108))
15 | 
16 | ## v0.1.1
17 | 
18 | [compare changes](https://github.com/rrd108/vue-mess-detector-nuxt-devtools/compare/v0.1.0...v0.1.1)
19 | 
20 | ### 🏡 Chore
21 | 
22 | - **release:** V0.0.1 ([4e2f25a](https://github.com/rrd108/vue-mess-detector-nuxt-devtools/commit/4e2f25a))
23 | 
24 | ### ❤️ Contributors
25 | 
26 | - Rrd108 ([@rrd108](http://github.com/rrd108))
27 | 
28 | ## v0.0.1
29 | 
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .vercel_build_output
23 | .build-*
24 | .env
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 | 
44 | # Intellij idea
45 | *.iml
46 | .idea
47 | 
48 | # OSX
49 | .DS_Store
50 | .AppleDouble
51 | .LSOverride
52 | .AppleDB
53 | .AppleDesktop
54 | Network Trash Folder
55 | Temporary Items
56 | .apdisk
57 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
 3 | 
 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively
 5 | export default createConfigForNuxt({
 6 |   features: {
 7 |     // Rules for module authors
 8 |     tooling: true,
 9 |     // Rules for formatting
10 |     stylistic: true,
11 |   },
12 |   dirs: {
13 |     root: [
14 |       '',
15 |       'playground',
16 |       'client',
17 |     ],
18 |   },
19 | })
20 |   .append(
21 |     // Add the rule configuration here
22 |     {
23 |       rules: {
24 |         'no-console': 'off',
25 |         'no-debugger': 'off',
26 |         'semi': ['error', 'never'],
27 |         'eqeqeq': 'off',
28 |         'eol-last': ['error', 'always'],
29 |         'comma-dangle': ['error', 'always-multiline'], 'vue/multi-word-component-names': ['error', {
30 |           ignores: ['index'],
31 |         }],
32 |         'vue/no-v-html': 'off',
33 |       },
34 |     },
35 |   )
36 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import { defineNuxtModule } from '@nuxt/kit'
 3 | import { startSubprocess } from '@nuxt/devtools-kit'
 4 | 
 5 | export default defineNuxtConfig({
 6 |   devtools: {
 7 |     enabled: true,
 8 |   },
 9 | 
10 |   modules: [
11 |     /**
12 |      * Vue Mess Detector
13 |      */
14 |     '../src/module',
15 |     /**
16 |      * Start a sub Nuxt Server for developing the client
17 |      *
18 |      * The terminal output can be found in the Terminals tab of the devtools.
19 |      */
20 |     defineNuxtModule({
21 |       setup(_, nuxt) {
22 |         if (!nuxt.options.dev) {
23 |           return
24 |         }
25 | 
26 |         const _process = startSubprocess(
27 |           {
28 |             command: 'npx',
29 |             args: ['nuxi', 'dev', '--port', '3300'],
30 |             cwd: resolve(__dirname, '../client'),
31 |           },
32 |           {
33 |             id: 'vue-mess-detector:client',
34 |             name: 'Vue Mess Detector Client Dev',
35 |           },
36 |         )
37 |       },
38 |     }),
39 |   ],
40 | 
41 |   vueMessDetector: {},
42 | 
43 |   compatibilityDate: '2024-08-21',
44 | })
45 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
 2 | import { extendServerRpc, onDevToolsInitialized } from '@nuxt/devtools-kit'
 3 | import { analyze, FLAT_RULES } from 'vue-mess-detector'
 4 | import type { ClientFunctions, ServerFunctions } from '../rpc-types'
 5 | import { setupDevToolsUI } from './devtools'
 6 | 
 7 | export interface ModuleOptions {
 8 |   devtools: boolean
 9 | }
10 | 
11 | export default defineNuxtModule<ModuleOptions>({
12 |   meta: {
13 |     name: 'vue-mess-detector',
14 |     configKey: 'vueMessDetector',
15 |   },
16 | 
17 |   defaults: {
18 |     devtools: true,
19 |   },
20 | 
21 |   setup(options, nuxt) {
22 |     const resolver = createResolver(import.meta.url)
23 | 
24 |     addPlugin(resolver.resolve('./runtime/plugin'))
25 | 
26 |     if (options.devtools) {
27 |       setupDevToolsUI(nuxt, resolver)
28 |     }
29 | 
30 |     onDevToolsInitialized(async () => {
31 |       extendServerRpc<ClientFunctions, ServerFunctions>('vueMessDetector', {
32 |         getResults: async () => {
33 |           const results = await analyze({ dir: './', apply: FLAT_RULES })
34 |           return results
35 |         },
36 |       })
37 |     })
38 |   },
39 | })
40 | 


--------------------------------------------------------------------------------
/src/devtools.ts:
--------------------------------------------------------------------------------
 1 | import { existsSync } from 'node:fs'
 2 | import type { Nuxt } from 'nuxt/schema'
 3 | import type { Resolver } from '@nuxt/kit'
 4 | import { addCustomTab } from '@nuxt/devtools-kit'
 5 | 
 6 | const DEVTOOLS_UI_ROUTE = '/__vue-mess-detector'
 7 | const DEVTOOLS_UI_LOCAL_PORT = 3300
 8 | 
 9 | export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
10 |   const clientPath = resolver.resolve('./client')
11 |   const isProductionBuild = existsSync(clientPath)
12 | 
13 |   // Serve production-built client (used when package is published)
14 |   if (isProductionBuild) {
15 |     nuxt.hook('vite:serverCreated', async (server) => {
16 |       const sirv = await import('sirv').then(r => r.default || r)
17 |       server.middlewares.use(
18 |         DEVTOOLS_UI_ROUTE,
19 |         sirv(clientPath, { dev: true, single: true }),
20 |       )
21 |     })
22 |   }
23 | 
24 |   if (!isProductionBuild) { // In local development, start a separate Nuxt Server and proxy to serve the client
25 |     nuxt.hook('vite:extendConfig', (config) => {
26 |       config.server = config.server || {}
27 |       config.server.proxy = config.server.proxy || {}
28 |       config.server.proxy[DEVTOOLS_UI_ROUTE] = {
29 |         target: 'http://localhost:' + DEVTOOLS_UI_LOCAL_PORT + DEVTOOLS_UI_ROUTE,
30 |         changeOrigin: true,
31 |         followRedirects: true,
32 |         rewrite: path => path.replace(DEVTOOLS_UI_ROUTE, ''),
33 |       }
34 |     })
35 |   }
36 | 
37 |   addCustomTab({
38 |     name: 'vue-mess-detector',
39 |     title: 'Vue Mess Detector',
40 |     icon: 'tabler:analyze',
41 |     view: {
42 |       type: 'iframe',
43 |       src: DEVTOOLS_UI_ROUTE,
44 |     },
45 |   })
46 | }
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mess-detector-nuxt-devtools",
 3 |   "version": "0.1.2",
 4 |   "description": "Vue Mess Detector for Nuxt Devtools",
 5 |   "repository": "https://github.com/rrd108/vue-mess-detector-nuxt-devtools",
 6 |   "license": "MIT",
 7 |   "type": "module",
 8 |   "exports": {
 9 |     ".": {
10 |       "types": "./dist/types.d.ts",
11 |       "import": "./dist/module.mjs",
12 |       "require": "./dist/module.cjs"
13 |     }
14 |   },
15 |   "main": "./dist/module.cjs",
16 |   "types": "./dist/types.d.ts",
17 |   "files": [
18 |     "dist"
19 |   ],
20 |   "scripts": {
21 |     "prepack": "nuxt-module-build build",
22 |     "dev": "nuxi dev playground",
23 |     "dev:build": "nuxi build playground",
24 |     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
25 |     "release:patch": "yarn lint && yarn test && yarn prepack && changelogen --release --patch && yarn publish && git push --follow-tags",
26 |     "release:minor": "yarn lint && yarn test && yarn prepack && changelogen --release --minor && yarn publish && git push --follow-tags",
27 |     "lint": "eslint .",
28 |     "lint:fix": "eslint . --fix",
29 |     "test": "vitest run",
30 |     "test:watch": "vitest watch"
31 |   },
32 |   "dependencies": {
33 |     "@nuxt/devtools-kit": "^1.4.1",
34 |     "@nuxt/kit": "^3.13.1",
35 |     "sirv": "^2.0.4",
36 |     "vue-mess-detector": "latest"
37 |   },
38 |   "devDependencies": {
39 |     "@iconify-json/carbon": "^1.2.1",
40 |     "@nuxt/devtools": "^1.4.1",
41 |     "@nuxt/devtools-ui-kit": "^1.4.1",
42 |     "@nuxt/eslint-config": "^0.5.5",
43 |     "@nuxt/module-builder": "^0.8.3",
44 |     "@nuxt/schema": "^3.13.1",
45 |     "@nuxt/test-utils": "^3.14.1",
46 |     "changelogen": "^0.5.5",
47 |     "eslint": "^9.9.1",
48 |     "nuxt": "^3.12.4",
49 |     "vitest": "^2.0.5"
50 |   },
51 |   "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
52 | }
53 | 


--------------------------------------------------------------------------------
/test/basic.test.ts:
--------------------------------------------------------------------------------
 1 | import { describe, it, expect, vi } from 'vitest'
 2 | import { addCustomTab } from '@nuxt/devtools-kit'
 3 | import type { Nuxt } from '@nuxt/schema'
 4 | import type { Resolver } from '@nuxt/kit'
 5 | import { setupDevToolsUI } from '../src/devtools'
 6 | 
 7 | vi.mock('@nuxt/devtools-kit', () => ({
 8 |   addCustomTab: vi.fn(),
 9 | }))
10 | 
11 | vi.mock('vue-mess-detector', () => ({
12 |   analyze: vi.fn(),
13 |   FLAT_RULES: {},
14 | }))
15 | 
16 | describe('setupDevToolsUI', () => {
17 |   it('calls addCustomTab with correct parameters', () => {
18 |     const mockNuxt = {
19 |       hook: vi.fn(),
20 |     } as unknown as Nuxt
21 |     const mockResolver = {
22 |       resolve: vi.fn().mockReturnValue('./client'),
23 |     } as unknown as Resolver
24 | 
25 |     setupDevToolsUI(mockNuxt, mockResolver)
26 | 
27 |     expect(addCustomTab).toHaveBeenCalledWith({
28 |       name: 'vue-mess-detector',
29 |       title: 'Vue Mess Detector',
30 |       icon: 'tabler:analyze',
31 |       view: {
32 |         type: 'iframe',
33 |         src: '/__vue-mess-detector',
34 |       },
35 |     })
36 |   })
37 | 
38 |   it('sets up production middleware when client path exists', () => {
39 |     vi.mock('node:fs', () => ({
40 |       existsSync: () => true,
41 |     }))
42 | 
43 |     const mockNuxt = {
44 |       hook: vi.fn(),
45 |     } as unknown as Nuxt
46 |     const mockResolver = {
47 |       resolve: vi.fn().mockReturnValue('./client'),
48 |     } as unknown as Resolver
49 | 
50 |     setupDevToolsUI(mockNuxt, mockResolver)
51 | 
52 |     expect(mockNuxt.hook).toHaveBeenCalledWith('vite:extendConfig', expect.any(Function))
53 |   })
54 | 
55 |   it('sets up development proxy when client path does not exist', () => {
56 |     vi.mock('node:fs', () => ({
57 |       existsSync: () => false,
58 |     }))
59 | 
60 |     const mockNuxt = {
61 |       hook: vi.fn(),
62 |     } as unknown as Nuxt
63 |     const mockResolver = {
64 |       resolve: vi.fn().mockReturnValue('./client'),
65 |     } as unknown as Resolver
66 | 
67 |     setupDevToolsUI(mockNuxt, mockResolver)
68 | 
69 |     expect(mockNuxt.hook).toHaveBeenCalledWith('vite:extendConfig', expect.any(Function))
70 |   })
71 | })
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Mess Detector Nuxt Devtools Plugin
 2 | 
 3 | [![npm version][npm-version-src]][npm-version-href]
 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href]
 5 | [![License][license-src]][license-href]
 6 | [![Nuxt][nuxt-src]][nuxt-href]
 7 | 
 8 | Vue Mess Detector module integrated with the [Nuxt Devtools](https://github.com/nuxt/devtools).
 9 | 
10 | [Vue Mess Detector](https://vue-mess-detector.webmania.cc/) is a comprehensive code analysis and quality assessment tool.
11 | That provides actionable insights into code health, helping developers identify and resolve potential issues in Vue.js and Nuxt.js projects.
12 | 
13 | This package contains only the devtools integration; Vue Mess Detector is added as a dependency. 
14 | 
15 | ## Features
16 | 
17 | - 😻 NPM and JSR Support
18 | - 🤖 PNPM, Bun, Yarn and NPM
19 | - 🔩 Focus on Important Rules
20 | - 🚀 Run the analyzer directly from dev tools
21 | 
22 | ## Quick Setup
23 | 
24 | 1. Add `vue-mess-detector-nuxt-devtools` dependency to your project
25 | 
26 | ```bash
27 | # Using pnpm
28 | pnpm add -D vue-mess-detector-nuxt-devtools
29 | 
30 | # Using yarn
31 | yarn add --dev vue-mess-detector-nuxt-devtools
32 | 
33 | # Using npm
34 | npm install --save-dev vue-mess-detector-nuxt-devtools
35 | ```
36 | 
37 | 2. Add `vue-mess-detector-nuxt-devtools` to the `modules` section of `nuxt.config.ts`
38 | 
39 | ```js
40 | export default defineNuxtConfig({
41 |   modules: ["vue-mess-detector-nuxt-devtools"],
42 | });
43 | ```
44 | 
45 | That's it! You can now use Vue Mess Detector in your Nuxt app ✨
46 | 
47 | ## Screenshot
48 | 
49 | ![Vue Mess Detector Nuxt Devtools](vue-mess-detector-nuxt-devtools.png)
50 | 
51 | ## Development
52 | 
53 | ```bash
54 | # Install dependencies
55 | npm install
56 | 
57 | # Generate type stubs
58 | npm run dev:prepare
59 | 
60 | # Develop with playground, with devtools client ui
61 | npm run dev
62 | 
63 | # Develop with playground, with bundled client ui
64 | npm run play:prod
65 | 
66 | # Run ESLint
67 | npm run lint
68 | 
69 | # Run Vitest
70 | npm run test
71 | npm run test:watch
72 | 
73 | # Release new version
74 | npm run release
75 | ```
76 | 
77 | <!-- Badges -->
78 | 
79 | [npm-version-src]: https://img.shields.io/npm/v/vue-mess-detector-nuxt-devtools/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
80 | [npm-version-href]: https://npmjs.com/package/vue-mess-detector-nuxt-devtools
81 | [npm-downloads-src]: https://img.shields.io/npm/dm/vue-mess-detector-nuxt-devtools.svg?style=flat&colorA=18181B&colorB=28CF8D
82 | [npm-downloads-href]: https://npmjs.com/package/vue-mess-detector-nuxt-devtools
83 | [license-src]: https://img.shields.io/npm/l/vue-mess-detector-nuxt-devtools.svg?style=flat&colorA=18181B&colorB=28CF8D
84 | [license-href]: https://npmjs.com/package/vue-mess-detector-nuxt-devtools
85 | [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
86 | [nuxt-href]: https://nuxt.com
87 | 


--------------------------------------------------------------------------------
/client/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <!-- eslint-disable vue/no-v-html -->
  2 | <!-- eslint-disable vue/no-v-html -->
  3 | <script setup lang="ts">
  4 | import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
  5 | import type { BirpcReturn } from 'birpc'
  6 | import type {
  7 |   AnalysisResult,
  8 |   ClientFunctions,
  9 |   ServerFunctions,
 10 | } from '../../rpc-types'
 11 | import { ref } from '#imports'
 12 | 
 13 | const results = ref<AnalysisResult>({} as AnalysisResult)
 14 | const loading = ref(false)
 15 | 
 16 | const showButton = ref(false)
 17 | let rpc: BirpcReturn<ServerFunctions, ClientFunctions>
 18 | 
 19 | const getAnalysisReport = async () => {
 20 |   loading.value = true
 21 |   results.value = await rpc.getResults()
 22 |   loading.value = false
 23 | }
 24 | 
 25 | onDevtoolsClientConnected(async (client) => {
 26 |   rpc = client.devtools.extendClientRpc<ServerFunctions, ClientFunctions>(
 27 |     'vueMessDetector',
 28 |     { _doNothing: () => {} },
 29 |   )
 30 |   getAnalysisReport()
 31 |   showButton.value = true
 32 | })
 33 | 
 34 | const htmlize = (str: string) => {
 35 |   const urlPattern = /(\bhttps:\/\/[-\w+&@#/%?=~|!:,.;]*[-\w+&@#/%=~|])/gi
 36 |   str = str.replace(
 37 |     urlPattern,
 38 |     '🔗 <a href="$1" target="_blank" rel="noopener noreferrer">$1</a>',
 39 |   )
 40 | 
 41 |   return str
 42 |     .replace(/<bg_err>/g, '<span class="bg-err">')
 43 |     .replace(/<bg_warn>/g, '<span class="bg-warn">')
 44 |     .replace(/<bg_info>/g, '<span class="bg-info">')
 45 |     .replace(/<bg_ok>/g, '<span class="bg-ok">')
 46 |     .replace(/<\/bg_err>|<\/bg_warn>|<\/bg_info>|<\/bg_ok>/g, '</span>')
 47 |     .replace(/<text_warn>/g, '<span class="text-warn">')
 48 |     .replace(/<text_info>/g, '<span class="text-info">')
 49 |     .replace(/<\/text_warn>|<\/text_info>/g, '</span>')
 50 |     .replace(/\n/g, '<br>')
 51 | }
 52 | </script>
 53 | 
 54 | <template>
 55 |   <section>
 56 |     <h1>
 57 |       Vue Mess Detector Analysis
 58 | 
 59 |       <button
 60 |         v-show="showButton"
 61 |         @click="getAnalysisReport"
 62 |       >
 63 |         Refresh Report
 64 |       </button>
 65 |     </h1>
 66 | 
 67 |     <main v-show="loading">
 68 |       <h2>Loading...</h2>
 69 |     </main>
 70 | 
 71 |     <main v-show="!loading && results.output">
 72 |       <h2>Overview</h2>
 73 |       <ul>
 74 |         <li
 75 |           v-for="item in results.output"
 76 |           :key="item.info"
 77 |         >
 78 |           <p v-html="htmlize(item.info)" />
 79 |         </li>
 80 |       </ul>
 81 | 
 82 |       <h2>Analysis Report</h2>
 83 |       <ul>
 84 |         <li
 85 |           v-for="(item, key) in results.reportOutput"
 86 |           :key="key"
 87 |         >
 88 |           <h3 v-html="htmlize(key)" />
 89 |           <ul>
 90 |             <li
 91 |               v-for="message in item"
 92 |               :key="message.id"
 93 |             >
 94 |               <p v-html="htmlize(message.id)" />
 95 |               <p v-html="htmlize(message.description)" />
 96 |               <p v-html="htmlize(message.message)" />
 97 |             </li>
 98 |           </ul>
 99 |         </li>
100 |       </ul>
101 | 
102 |       <h2>Code Health</h2>
103 |       <ul>
104 |         <li
105 |           v-for="item in results.codeHealthOutput"
106 |           :key="item.info"
107 |         >
108 |           <p v-html="htmlize(item.info)" />
109 |         </li>
110 |       </ul>
111 |     </main>
112 |   </section>
113 | </template>
114 | 
115 | <style scoped>
116 | section {
117 |   padding: 0.5rem;
118 | }
119 | 
120 | h1 {
121 |   font-size: 2rem;
122 |   margin-top: 2rem;
123 |   display: flex;
124 |   justify-content: space-between;
125 |   align-items: center;
126 | }
127 | button {
128 |   background-color: #2ecc71;
129 |   color: #fff;
130 |   border: none;
131 |   padding: 0.5rem 1rem;
132 |   border-radius: 0.25em;
133 |   cursor: pointer;
134 |   font-size: 1rem;
135 | }
136 | 
137 | h2 {
138 |   font-size: 1.5rem;
139 |   margin-top: 1.5rem;
140 | }
141 | 
142 | ul ul {
143 |   padding-left: 1rem;
144 | }
145 | 
146 | li {
147 |   padding: 0.5em;
148 |   border-radius: 0.25em;
149 | }
150 | 
151 | ul ul li:nth-child(even) {
152 |   background-color: #222;
153 | }
154 | 
155 | :deep(a) {
156 |   text-decoration: underline;
157 | }
158 | :deep(.bg-info) {
159 |   background-color: #3498db;
160 |   color: #fff;
161 | }
162 | 
163 | :deep(.bg-warn) {
164 |   background-color: #f39c12;
165 |   color: #000;
166 | }
167 | 
168 | :deep(.bg-err) {
169 |   background-color: #e74c3c;
170 |   color: #fff;
171 | }
172 | 
173 | :deep(.bg-ok) {
174 |   background-color: #2ecc71;
175 |   color: #000;
176 | }
177 | 
178 | :deep(.text-warn) {
179 |   color: #f39c12;
180 | }
181 | 
182 | :deep(.text-info) {
183 |   color: #3498db;
184 | }
185 | </style>
186 | 


--------------------------------------------------------------------------------