A small document
A paragraph with strong and emphasized text, a link and inline code.
First item
Second item
HTML
Jeder Knotentyp beschreibt sein HTML einmal. Editierfläche und ausgelieferte Seite werden beide daraus abgeleitet und können nicht auseinanderlaufen.
Semantik
Eine Beschreibung, zwei Ausgaben
HtmlSemantics beschreibt einen Knoten ohne seine Kinder. Die Kinder gehören der UI-Runtime; es gibt keinen zweiten Ansichtsbaum, der abgeglichen werden müsste.
scala
val paragraph: HtmlSemantics[ParagraphNode] = new HtmlSemantics[ParagraphNode]:
val nodeType: NodeType[ParagraphNode] = ParagraphNode
def shapeOf(node: ParagraphNode, profile: RenderProfile): HtmlShape =
HtmlShape.Element("p")
Ausgabe
Inhalt ohne Editor-Metadaten
renderToHtml rendert ein Document einmalig, ohne Sitzung. RenderProfile.Content lässt jedes Editor-Attribut konstruktionsbedingt weg; RenderProfile.Editor ergänzt Knoten-IDs für die Editierfläche.
HTML, live
Bei jedem Commit mit RenderProfile.Content gerendert.
20 Wörter · 21 Knoten
<article><h2><span>A small document</span></h2><p><span>A paragraph with </span><span><strong>strong</strong></span><span> and </span><span><em>emphasized</em></span><span> text, a </span><a href="https://anjunar.com"><span>link</span></a><span> and </span><span><code>inline code</code></span><span>.</span></p><ol><li><p><span>First item</span></p></li><li><p><span>Second item</span></p></li></ol></article>
scala
DocumentView.renderToHtml(document, TableSupport.views, RenderProfile.Content)
Anker für die Hydration
Die echte Ausgabe enthält zusätzlich die Gruppenanker der UI-Runtime, etwa <!--ui:KeyedChildren:start-->. Sie sind unsichtbar, tragen keine Bedeutung und lassen den Browser das Markup übernehmen; der Inspektor oben lässt sie weg.
Regeln
Semantisch und eng
Das HTML sagt, was gemeint ist, und nur eine kurze Liste von Attributen darf darin vorkommen.
Entscheidungen
article für die Wurzel, strong und em statt b und i.
Jeder Textlauf steckt in einem span; Server-Textknoten verschmelzen nie, und die Hydration kann Positionen zuordnen.
Erlaubte Attribute: id, lang, dir, href, title, alt, src, width, height und data-ember-*.
onclick oder style sind Fehler, keine Attribute: Event-Handler und CSS gelangen nie in ein Dokument.