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
Links	Gefährliche URL-Schemata (javascript:), nicht unterstützte Protokolle, fehlerhafte mailto: / tel:, Staging-/localhost-URLs, die ins Template lecken	überwiegend warning; link.javascript-protocol ist error

Alle drei 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.*, link.*) filtern. Die Schweregrad-Overrides und tool-spezifischen Stellschrauben jedes Linters liegen unter seinem eigenen Namensraum (accessibility, structure, links); setze einen davon auf false, um den jeweiligen Linter komplett zu deaktivieren.

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: {
    accessibility: {
      rules: {
        "a11y.img-missing-alt": "warning",   // von Standard 'error' herabstufen
        "a11y.text-all-caps": "off",         // komplett deaktivieren
      },
      thresholds: { minFontSize: 16 },
    },
    structure: {
      rules: { "structure.empty-column": "info" }, // warning → info
    },
    links: {
      rules: { "link.localhost-or-staging": "error" }, // vor Versand hochstufen
      nonProductionHosts: ["*.staging.*", "*.preview.*"],
    },
  },
});

Der Issues-Tab und die Canvas-Badges erscheinen automatisch, sobald der optionale Peer aufgelöst ist. Bei lint.disabled === true — oder wenn jeder Linter-Key (accessibility, structure, links) auf false steht — lädt der Editor das Paket gar nicht erst nach: kein Chunk-Download, keine UI.

Setze einen einzelnen Linter auf false, um nur dessen Regeln auszuschalten:

init({ container: "#editor", lint: { links: false } });

Schnellzugriff

• Optionen — disabled, locale, pro-Tool-Namensräume accessibility / structure / links.
• 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.
• Links-Linter — was er erkennt, Regelkatalog.