Qualität

@templatical/quality ist das Dachpaket für die Template-Qualitäts-Werkzeuge von Templatical — deterministische, ausschließlich JSON-basierte Linter, die Autorenfehler im Editor und in Headless- / CI-Prüfungen erkennen. MIT-lizenziert, ESM, kein Vue, kein DOM.

Linter

Linter	Was er erkennt	Standard-Schweregrade
Barrierefreiheit	Fehlender Alt-Text, niedriger Kontrast, vage CTAs, übersprungene Überschriftenebenen, zu kleine Touch-Ziele, lange GROSSBUCHSTABEN, target=_blank ohne rel, fehlender Preheader, …	überwiegend error/warning
Struktur	Doppelte Block-IDs, Sektionen mit falscher Spaltenanzahl, verschachtelte Sektionen, leere Sektionen, leere Spalten	überwiegend error; einige warning

Beide Linter liefern dieselbe LintIssue-Struktur und teilen sich dieselbe Optionsfläche (LintOptions) — Konsumenten können sie also in jeder Kombination ausführen, Ergebnisse zusammenführen und beim Gruppieren nach ruleId-Präfix (a11y.*, structure.*) filtern.

Architektur

Das Paket trifft keine UI-Annahmen. Das useTemplateLint-Composable des Editors lädt @templatical/quality per dynamischem Import nach, ruft jeden exportierten Linter bei (entprellten) Inhaltsänderungen auf und führt die Ergebnisse in einen einzigen Issue-Strom zusammen, der den Issues-Sidebar-Tab und die Per-Block-Canvas-Badges speist. applyFix(issue) führt jeden Patch über den bestehenden Block-Update-Pfad des Editors aus — Fixes landen so als ordentliche Undo-Einträge.

Installation

npm

npm install @templatical/quality

pnpm

pnpm add @templatical/quality

yarn

yarn add @templatical/quality

bun

bun add @templatical/quality

Das Paket ist ein optionaler Peer von @templatical/editor. Installiere es, um den Issues-Tab und die Canvas-Badges zu aktivieren. Lass es weg und der Editor bleibt schlank — der dynamische Import ist gegated und tree-shakeable, der Linter-Chunk wird nie geladen.

CDN-Nutzer

Wenn du Templatical per CDN lädst, gibt es nichts zu installieren. Das Editor-CDN-Bundle liefert @templatical/quality als separat ausgelagerten Code-Split-Chunk aus, der automatisch nachgeladen wird, sobald Linting aktiv ist.

Editor anbinden

Übergib lint an init() oder initCloud():

import { init } from "@templatical/editor";

const editor = init({
  container: "#editor",
  locale: "de",
  lint: {
    rules: {
      "a11y.img-missing-alt": "warning",      // von Standard 'error' herabstufen
      "a11y.text-all-caps": "off",            // komplett deaktivieren
      "structure.empty-column": "info",       // von warning auf info herabstufen
    },
    thresholds: { minFontSize: 16 },
  },
});

Der Issues-Tab und die Canvas-Badges erscheinen automatisch, sobald der optionale Peer aufgelöst ist. Bei lint.disabled === true lädt der Editor das Paket gar nicht erst nach — kein Chunk-Download, keine UI.

Schnellzugriff

• Optionen — disabled, locale, rules, thresholds (von jedem Linter geteilt).
• Schweregrade & Fixes — Schweregrad-Modell + wie Auto-Fix-Patches im Editor landen.
• Headless-Nutzung — Validierung gespeicherter Templates in CI / Server-Save-Handlern.
• Lokalen beitragen — Regel-Nachrichten + Vague-Text-Dictionaries hinzufügen.
• Barrierefreiheits-Linter — was er erkennt, Regelkatalog.
• Struktur-Linter — was er erkennt, Regelkatalog.