html library

Typed, escaped HTML for Daravel responses (Laravel's Blade, as Dart functions), and the htmx request helpers. A separate import, because names such as a, p and text would clash with ordinary variables:

import 'package:daravel/html.dart';

Classes

Element

An element with attributes and children.

Fragment

Several nodes without a wrapping element.

HtmlDocument

A whole page: <!doctype html>, <head> with title, charset and viewport, and body.

HtmlNode

A typed HTML tree: text and attributes are escaped, raw markup has to be asked for (raw), and a node returned from a handler is sent as HTML.

RawHtml

Markup written as is (Blade's {!! $value !!}): only for trusted HTML.

RawTextNode

The content of a <script> or <style> element. HTML entities mean nothing there, so it is not escaped; instead every </script is written <\/script (</style as <\/style), and in a script every <!-- is written <\!--, so the content cannot end the element early or switch the parser into a state where it misses the end tag. Inside a JavaScript string or a CSS string both spellings mean the same characters.

TextNode

Text, escaped (Blade's {{ $value }}).

Extensions

HtmxRequest on Request

The request headers htmx sends (htmx.org/reference/#request_headers).

Functions

a(List<Object?> children, {required String href, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <a> linking to the given URL.

article(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <article>.

br({String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <br>.

button(List<Object?> children, {String type = 'button', String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <button>.

code(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <code>.

div(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <div>.

document(List<Object?> body, {String title = '', List<Object?> head = const [], String lang = 'en', Map<String, Object?> bodyAttributes = const {}}) → HtmlDocument

A whole page; bodyAttributes go on <body>.

el(String tag, [List<Object?> children = const [], String? id, String? classes, Map<String, Object?> attributes = const {}]) → Element

Any element: el('details', [...], attributes: {'open': true}).

em(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <em>.

escapeHtml(String value) → String

value with & < > " ' escaped, for HTML text and attribute values: Laravel's e() (htmlspecialchars with ENT_QUOTES), so ' becomes '.

footer(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <footer>.

form(List<Object?> children, {required String action, String method = 'POST', String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <form>.

fragment(List<Object?> children) → Fragment

Nodes without a wrapping element.

h1(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <h1>.

h2(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <h2>.

h3(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <h3>.

header(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <header>.

hr({String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <hr>.

htmxRedirect(Request request, String location, {int status = 302}) → Response

A redirect to location that htmx follows as a page navigation.

img({required String src, required String alt, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <img>.

input({required String name, String type = 'text', Object? value, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <input>.

jsonScript(Object? data, {required String id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <script type="application/json"> holding data as JSON, the safe way to give a script server data: <, >, &, U+2028 and U+2029 are written as \u escapes, so no value can close the element. Read it with JSON.parse(document.getElementById(id).textContent).

label(List<Object?> children, {String? forId, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <label>.

li(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <li>.

link({required String rel, required String href, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <link rel=... href=...>; attributes carries integrity, crossorigin, media, as, type...

mainEl(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

<main> (main is the Dart entry point name).

meta({String? name, String? content, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <meta>: meta(name: 'description', content: '...'), or any other form through attributes ({'property': 'og:title', 'content': ...}).

nav(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <nav>.

ol(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An <ol>.

p(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <p>.

pre(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <pre>.

raw(String html) → RawHtml

Trusted markup, written as is.

script({String? src, String? content, bool defer = false, bool async = false, bool module = false, String? nonce, String? integrity, String? crossorigin, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <script>: an external one (script(src: '/app.js', defer: true)) or an inline one (script(content: 'start()')), not both.

section(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <section>.

span(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <span>.

strong(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <strong>.

style(String css, {String? media, String? nonce, String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

An inline <style> with css; a </style in it is defused (see RawTextNode). nonce is the request's Content-Security-Policy nonce.

table(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <table>.

tbody(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <tbody> (an htmx row-swap target: attributes: {'hx-target': ...}).

td(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <td>.

text(Object? value) → TextNode

Escaped text.

textarea({required String name, String value = '', String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <textarea>.

th(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <th>.

thead(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <thead>.

tr(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <tr>.

ul(List<Object?> children, {String? id, String? classes, Map<String, Object?> attributes = const {}}) → Element

A <ul>.