{"_id":"@applicvision/frontend-friends-diagnostics","_rev":"2-5f6f77f9307c14888a750c540a45df01","name":"@applicvision/frontend-friends-diagnostics","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@applicvision/frontend-friends-diagnostics","version":"1.0.0","license":"MIT","_id":"@applicvision/frontend-friends-diagnostics@1.0.0","maintainers":[{"name":"mansh","email":"accountmail@applicvision.com"}],"homepage":"https://github.com/applicvision/frontend-friends-dev-tools#readme","bugs":{"url":"https://github.com/applicvision/frontend-friends-dev-tools/issues"},"bin":{"diagnose-fragments":"bin/diagnose.bin.ts"},"dist":{"shasum":"6f69808c6b8d13fb6b63158e4a7bbabccc9c8f74","tarball":"https://registry.npmjs.org/@applicvision/frontend-friends-diagnostics/-/frontend-friends-diagnostics-1.0.0.tgz","fileCount":4,"integrity":"sha512-ZY9aEyqyb/odV55fKlaAGw/8N7GSjcPZKclC98dkDJDnBgGV+rO/1Dtrta9A36Kz8p3/wX6Zr1dh+HgsKQ4oTw==","signatures":[{"sig":"MEUCIQD32O9mZJtW2Za1xMJhWNrjIKCncq5VIrYu+y0427ynegIgZw47w9fAEKrmmNr1gTZcikBleFehqjiYAzpB+LG6ylo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22484},"type":"module","exports":{".":"./index.ts"},"gitHead":"d5bf34c5d3c46d5d7855858e2a5cc5a69561e9c5","scripts":{"test":"node --test test/test.ts"},"_npmUser":{"name":"mansh","email":"accountmail@applicvision.com"},"repository":{"url":"git+https://github.com/applicvision/frontend-friends-dev-tools.git","type":"git"},"_npmVersion":"11.6.2","description":"Diagnostics for your dynamic fragments in Frontend friends.","directories":{},"_nodeVersion":"24.11.1","dependencies":{"typescript":"^5.9.3","html-validate":"^10.7.0","@applicvision/js-toolbox":"^2.11.4","@applicvision/frontend-friends":"^1.16.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/node":"^24.10.1"},"_npmOperationalInternal":{"tmp":"tmp/frontend-friends-diagnostics_1.0.0_1772195903359_0.17574254525104038","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@applicvision/frontend-friends-diagnostics","version":"1.1.0","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"bin":{"diagnose-fragments":"dist/bin/diagnose.bin.js"},"scripts":{"build":"tsc -p tsconfig.build.json","prepare":"npm run build","test":"node --test test/test.ts"},"repository":{"type":"git","url":"git+https://github.com/applicvision/frontend-friends-dev-tools.git"},"license":"MIT","description":"Diagnostics for your dynamic fragments in Frontend friends.","type":"module","dependencies":{"@applicvision/frontend-friends":"^1.16.3","@applicvision/js-toolbox":"^2.11.4","html-validate":"^10.7.0","typescript":"^5.9.3"},"devDependencies":{"@types/node":"^24.10.1"},"gitHead":"993ea463a06246c1f540ddda83058a2e3ac83768","_id":"@applicvision/frontend-friends-diagnostics@1.1.0","bugs":{"url":"https://github.com/applicvision/frontend-friends-dev-tools/issues"},"homepage":"https://github.com/applicvision/frontend-friends-dev-tools#readme","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-imyVdz3oPiS1zDc7FzinRAdH9IfNGVgogJOVpIhmAXmYKr0cJrEvHW25/Dn6j1NPDIIh28i48b189Ad+NwR0IA==","shasum":"9f4e1491558b9d7869976791113aaa0cae1ddffe","tarball":"https://registry.npmjs.org/@applicvision/frontend-friends-diagnostics/-/frontend-friends-diagnostics-1.1.0.tgz","fileCount":6,"unpackedSize":25646,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHM/auEd7hOA9/TGTXO2pJ2DU9wHk0WdIA+w8Lxe/3WjAiEAguNRWtwjW24DL93moei19VGqXxablX5CLe9fT8DLxNE="}]},"_npmUser":{"name":"mansh","email":"accountmail@applicvision.com"},"directories":{},"maintainers":[{"name":"mansh","email":"accountmail@applicvision.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/frontend-friends-diagnostics_1.1.0_1772204348058_0.5551638963165804"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-27T12:38:23.276Z","modified":"2026-02-27T14:59:08.370Z","1.0.0":"2026-02-27T12:38:23.505Z","1.1.0":"2026-02-27T14:59:08.237Z"},"bugs":{"url":"https://github.com/applicvision/frontend-friends-dev-tools/issues"},"license":"MIT","homepage":"https://github.com/applicvision/frontend-friends-dev-tools#readme","repository":{"type":"git","url":"git+https://github.com/applicvision/frontend-friends-dev-tools.git"},"description":"Diagnostics for your dynamic fragments in Frontend friends.","maintainers":[{"name":"mansh","email":"accountmail@applicvision.com"}],"readme":"# Frontend Friends Diagnostics\n\nDiagnose the HTML and interpolations of dynamic fragments built with [Frontend friends](https://github.com/applicvision/frontend-friends).\n\n## Install\n\nAdd to your project as a dev dependency.\n\n```console\n$ npm install --save-dev @applicvision/frontend-friends-diagnostics\n```\n\n## Example\n\nLet's say we have the following JavaScript file.\n\n```js\nimport { html } from '@applicvision/frontend-friends'\n\nconst template = html`<div>\n    <button onclick=${'click'}>\n</div>`\n```\n\nThen we run the diagnostics:\n\n```console\n> npx diagnose-fragments\n3 Errors in sample.js\n  \n  A function is expected as event handler\n  \n  4 | <button onclick=${'click'}>\n              ^^^^^^^            \n  \n  Unclosed element '<button>'\n  \n  4 | <button onclick=${'click'}>\n       ^^^^^^                    \n  \n  End tag '</div>' seen but there were open elements\n  \n  5 | </div>`\n       ^^^^  \n\n```\n\n\n## CLI\n\nThe diagnostics package exposes a command called diagnose-fragments. Run it in your project directory:\n\n```console\n$ npx diagnose-fragments\n```\n\nOr add it to your package.json script section\n\n```json\n\"scripts\": {\n    \"diagnose\": \"diagnose-fragments\"\n}\n```\n\nBy default, it will look for a `tsconfig.json` or `jsconfig.json` in the current directory. But a custom config file can be provided with the option `--config`, or `-c`.\n\n```console\nnpx diagnose-fragments --config tsconfig.special.json\n```\n\nUnless otherwise specified the command will look for fragments to diagnose in the files of the project, as specified by the tsconfig. But it is possible to pass custom files:\n\n```console\nnpx diagnose-fragments src/views/**.js\n```\n\nThe tool will look up tagged templates with a tag function named `html`. It uses the wonderful library [html-validate](https://www.npmjs.com/package/html-validate) to diagnose the HTML parts of the templates. It also checks that the interpolations have valid values.\n\nIf no issues are found, the command prints no output and exits with code 0.\n\n## NodeJS\n\nThere is also a small API to use the validation programmatically.\n\n```js\nimport {diagnoseFile, getProgram} from '@applicvision/frontend-friends-diagnostics'\n\nconst tsProgram = getProgram()\nconst diagnostics = diagnoseFile(tsProgram, '/developer/project/file.ts')\n\nconsole.log(diagnostics)\n```\n\nThe diagnose function has the following signature:\n```ts\nfunction diagnoseFile(program: ts.Program, fileName: string): {\n    range: Range;\n    message: string;\n    line: string;\n    severity: 1 | 2 | 3 | 4;\n}[]\n\ntype TextPosition = { line: number, character: number }\ntype Range = { start: TextPosition, end: TextPosition }\n```\n\n\n<div align=\"center\">\n\n<br><br>\n\n*Have fun writing awesome web apps!*\n\n<br>\n<img src=\"https://raw.githubusercontent.com/applicvision/frontend-friends/refs/heads/main/docs/img/logo.svg\" alt=\"drawing\" width=\"200\"/>\n</div>\n","readmeFilename":"README.md"}