Framework-dekking

Wat Agnes begrijpt, en wat nog niet

Agnes analyseert de broncode van je repository zonder die uit te voeren, dus wat gecontroleerd kan worden hangt af van de bestanden en conventies van je framework. Deze pagina laat zien waar de dekking volledig is, waar die gedeeltelijk is en wat nog ontbreekt.

Dekking per framework

De dependency-controles werken voor elk framework, omdat ze je lockfile lezen. De andere controles hangen af van de bestanden en conventies van het framework.

Welke controles Agnes per framework uitvoert
FrameworkDependencies & securityAdvisories, licenties, secretsCodekwaliteitLinting, duplicatie, complexiteitTemplates & stijlenMarkup en CSSDode codeOngebruikte bestanden en exportsToegankelijkheidOptioneel per project
HTML, CSS and JavaScript Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
React (Vite, Create React App) Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
Next.js Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
TanStack Start Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
React Router and Remix Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
Solid, Qwik and Preact Ondersteund Gedeeltelijk Ondersteund Gedeeltelijk Gedeeltelijk
Vue Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
Nuxt Ondersteund Ondersteund Ondersteund Gedeeltelijk Ondersteund
Svelte Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
SvelteKit Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
Astro Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund
Angular Ondersteund Ondersteund Ondersteund Ondersteund Ondersteund

Ondersteund betekent dat de controle draait en de conventies van het framework kent. Gedeeltelijk betekent dat hij draait met de beperkingen hieronder. Nog niet betekent dat de controle voor dat framework wordt overgeslagen.

Goed om te weten

Frameworks met een beperking, of een conventie die uitleg verdient.

  • TanStack Start

    Routes en de gegenereerde routeboom tellen als entrypoints, dus routebestanden worden nooit als ongebruikt gemeld. De eigen packages van het framework worden niet op ongebruik gecontroleerd.

  • React Router and Remix

    De routes in de app-map en de bestanden die in routes.ts worden genoemd tellen als entrypoints. routes.ts wordt als tekst gelezen en nooit uitgevoerd, dus bij routes die met code worden opgebouwd, zoals lussen of hulpfuncties, kunnen de bestanden als ongebruikt worden gemeld.

  • Solid, Qwik and Preact

    Geanalyseerd als gewone TypeScript en JSX. We hebben deze frameworks niet specifiek getest, dus React-specifieke regels kunnen dingen aanmerken die hier prima zijn, en de resultaten voor dode code hangen af van een index.html of een entrypoint in package.json.

  • Vue

    Naast de code- en templatecontroles meldt Agnes props die een component wijzigt, refs zonder .value en v-html (een securitybevinding om na te kijken). Stijlblokken worden gelint, ongeacht hun lang. Vue 2-deprecatiewaarschuwingen blijven buiten beschouwing.

  • Nuxt

    Pagina's, layouts, middleware, plugins en servercode tellen als entrypoints. De mappen components, composables, utils en stores ook, omdat Nuxt die automatisch importeert. Ongebruikte code in die mappen wordt dus niet gemeld.

  • Svelte

    De eigen reactiviteitswaarschuwingen en waarschuwingen over ongebruikte stijlen van de Svelte-compiler worden gemeld, plus eslint-plugin-svelte-regels zoals ontbrekende each-keys en {@html} (een securitybevinding om na te kijken). De regel die elke interne link aanmerkt omdat resolve() niet wordt gebruikt, is weggelaten omdat hij te veel ruis geeft.

  • Astro

    Pagina's zijn entrypoints en componenten worden gecontroleerd op scripts, templates en stijlen. De toegankelijkheidscontroles voor Astro betreffen de templates.

  • Angular

    TypeScript, templates en inline templates worden gecontroleerd met de aanbevolen lintregels van Angular, en componentstijlen worden gelint zoals elke andere stylesheet (::ng-deep, :host en :host-context worden begrepen). Inline stijlen in de component-decorator worden niet gelint. Templates worden gevonden via de templateUrl van elke component, dus bestandsnamen doen er niet toe.

Bekende hiaten

Deze gelden niet voor één framework. We noemen ze zodat je weet wat een goede score wel en niet zegt.

  • Stylus

    Stylus-bestanden worden niet geanalyseerd. De enige beschikbare parser voor Stylus wordt niet meer onderhouden en leest gewone Stylus-syntax verkeerd. SCSS, Sass en Less worden gelint, met de standaardregels voor CSS en SCSS.

  • Onderhoudbaarheidsscore van componentscripts

    De cognitieve complexiteit wordt gemeten in de scripts van .vue-, .svelte- en .astro-bestanden, maar de onderhoudbaarheidsscore per bestand leest alleen JavaScript- en TypeScript-bestanden.

  • Een lockfile is nodig

    De controles op dependencies, advisories en licenties lezen package-lock.json, yarn.lock, pnpm-lock.yaml of bun.lock, en de advisorycontrole leest ook composer.lock. Zonder lockfile blijft dat deel van de score weg.

  • npm, plus Composer-advisories

    Composer-packages worden op bekende advisories gecontroleerd, maar niet op verouderde of deprecated versies of op hun licenties. Dependencies uit andere ecosystemen, of uit Deno, worden niet gecontroleerd.

  • Je eigen lintconfig wordt niet gelezen

    Agnes draait haar tools met eigen regels in een sandbox en voert je configbestanden nooit uit, dus projectspecifieke ESLint-, Biome- of Stylelint-regels veranderen het rapport niet.

  • Vooral frontend-repositories

    Minstens 60% van de regels broncode moet frontendcode zijn. Een monorepo met veel backendcode kan daaronder vallen en wordt dan niet geanalyseerd. Templates (Blade, Twig, Nunjucks, Handlebars, Liquid, MDX) tellen aan geen van beide kanten mee, dus de Blade-views van een Laravel-app trekken die er niet onder.

Wat telt als frontend-repository

Agnes telt de regels in HTML-, CSS- (inclusief SCSS, Sass en Less), JavaScript-, TypeScript-, Vue-, Svelte- en Astro-bestanden en analyseert een repository als minstens 60% van de regels broncode in deze talen staat. Gegenereerde en meegeleverde mappen zoals node_modules, dist, .next, .nuxt, .svelte-kit en .astro worden genegeerd.

De controles komen van open-source tools. Zie welke dat zijn, en waar ze aan bijdragen, op de pagina Tools