Templatical

Qualität ​

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

Linter ​

LinterWas er erkenntStandard-Schweregrade
BarrierefreiheitFehlender Alt-Text, niedriger Kontrast, vage CTAs, übersprungene Überschriftenebenen, zu kleine Touch-Ziele, lange GROSSBUCHSTABEN, target=_blank ohne rel, fehlender Preheader, …überwiegend error/warning
StrukturDoppelte Block-IDs, Sektionen mit falscher Spaltenanzahl, verschachtelte Sektionen, leere Sektionen, leere Spalten, Heros, die als normale Sektion dargestellt werden, Hintergrundbilder, die Outlook unter Windows nicht übereinanderlegen kannüberwiegend error; einige warning
LinksGefährliche URL-Schemata (javascript:), nicht unterstützte Protokolle, fehlerhafte mailto: / tel:, relative URLs, Staging-/localhost-URLs, die ins Template leckenüberwiegend warning; link.javascript-protocol ist error
ZustellbarkeitAbweichender URL-Linktext, URL-Kürzer, IP-Links und bildlastige E-Mails mit wenig Textwarning oder info
KompatibilitätNicht unterstütztes durchgereichtes HTML und CSS sowie kompilierte Gmail-Größewarning oder info
LokalisierungFehlende Übersetzungen, veraltete Quell-Hashes und abweichende Merge-Tagswarning

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

Alles mit einem Aufruf ausführen. lintTemplate(content, options?) ist der einzelne aggregierte Einstiegspunkt — er führt alle Linter aus und liefert die zusammengeführten LintIssue[] (zuerst Barrierefreiheit, dann Struktur, dann Links, dann Zustellbarkeit, dann Kompatibilität, dann Lokalisierung). Greifen Sie standardmäßig dazu; die einzelnen Linter-Funktionen bleiben exportiert, falls Sie nur eine Teilmenge ausführen wollen. Um eine Kategorie zu überspringen, setzen Sie ihren Schlüssel auf false: lintTemplate(content, { structure: false }). Siehe Headless-Nutzung.

contentLocale wählt die geprüfte Version, locale die Meldungssprache. Wörterbücher bleiben eine Vereinigung aller Sprachen. Die drei localization.*-Regeln stehen unter Optionen, mit Fallback, Veraltung und Merge-Tag-Verhalten.

Architektur ​

TemplateContentJSON-Blockbaumaus Editor oder DBlintAccessibility()a11y.* RegelnlintStructure()structure.* RegelnlintLinks()link.* RegelnlintDeliverability()deliverability.* RegelnlintCompatibility()compat.* ruleslintLocalization()LintIssue[]Schweregrad · Nachricht · Vorschlag ·reference · blockId · optionaler fixVerwendet vonPanel „Probleme“Editor-SidebarCanvas-BadgesSymbole pro BlockHeadless / CIgespeicherte Templates

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

Installation ​

@templatical/quality ist eine optionale Abhängigkeit des Editors und wird standardmäßig mitinstalliert. Sie können es weglassen: Der Editor funktioniert ohne das Paket und blendet den Tab „Probleme“ aus. Für die Headless-Nutzung oder um es wieder hinzuzufügen, installieren Sie es ausdrücklich:

bash
npm install @templatical/quality
bash
pnpm add @templatical/quality
bash
yarn add @templatical/quality
bash
bun add @templatical/quality

CDN-Nutzer

Wenn Sie Templatical per CDN laden, 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 ​

Übergeben Sie lint an init() oder initCloud():

ts
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.*"],
    },
    deliverability: { thresholds: { minTextLength: 250 } },
    compatibility: { thresholds: { maxHtmlBytes: 92_160 } },
  },
});

Im Playground öffnen

Der Tab „Probleme“ und die Canvas-Badges erscheinen automatisch, sobald das Quality-Paket verfügbar ist. Bei lint.disabled === true — oder wenn jeder Linter-Key (accessibility, structure, links, deliverability, compatibility) auf false steht — lädt der Editor das Paket gar nicht erst nach: kein Chunk-Download, keine UI.

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

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

Schnellzugriff ​