elemi.html

This module defines the old HTML syntax for Elemi.

For the new syntax, see elemi.generator.

HTML generation in Elemi is based on Elemi's XML generator. Practically speaking, the HTML layer just auto-detects void elements. As a consequence, Elemi-generated HTML documents are also valid XHTML or XML.

Elemi can be learned by example!

Public Imports

elemi.attribute public import elemi.attribute;: Undocumented in source.

elemi.element public import elemi.element;: Undocumented in source.

Members

Aliases

add alias add = addH: Undocumented in source.
elem alias elem = elemH: Undocumented in source.

Functions

addH Element addH(Element parent, Ts args): Add a new node as a child of this node.
addH Element addH(Element parent, Ts args): Add a new node as a child of this node.
isVoidTag bool isVoidTag(string tag): A void element in HTML accepts no children, and has no closing tag. Contrast for example, the self-closing <input/> with the usual <div></div> — no </input> tag follows.

Templates

addH template addH(Ts...): Add a new node as a child of this node.
elemH template elemH(string name, Ts...): Create a HTML element. This template wraps elemX, implementing support for HTML void tags.

Examples

The elem template is your key to Elemi's HTML generation. It can be used to create elements, specify attributes, and add contents.

auto e = elem!"p"("Hello, World!");
// The template argument ("p" above) specifies element type

assert(e == "<p>Hello, World!</p>");

You can nest other elements, text — mix and match.

auto e = elem!"p"(
    "Hello, ",
    elem!"strong"("World"),
    "!",
);

assert(e == "<p>Hello, <strong>World</strong>!</p>");

Add attributes with attr:

auto e = elem!"input"(
    attr("type") = "text",
    attr("name") = "name",
    attr("placeholder") = "Your name…",
);

assert(e == `<input type="text" name="name" placeholder="Your name…"/>`);

Elemi is designed to work with dynamic content, so it escapes all input automatically.

Warning: javascript schema URLs are NOT escaped! If you want your users to specify link targets, make sure to block all javascript: links.

auto e = elem!"div"(
    attr("data-text") = `No jail">break`,
    "<script>alert('Fooled!')</script>",
);

assert(e == `<div data-text="No jail&quot;&gt;break">`
    ~ `&lt;script&gt;`
    ~ `alert(&#39;Fooled!&#39;)`
    ~ `&lt;/script&gt;`
    ~ `</div>`);

Append attributes, children, text, at runtime.

auto e = elem!"div"();
e ~= attr("class") = "one";
e ~= elem!"span"("Two");
e ~= "Three";

assert(e == `<div class="one">`
    ~ `<span>Two</span>`
    ~ `Three`
    ~ `</div>`);

If you need to group a few elements together, you can do it with elems.

auto child = elems(
    "Hello, ",
    elemX!"strong"("World"),
);
auto parent = elem!"div"(
    child,
);

assert(child == "Hello, <strong>World</strong>");
assert(parent == "<div>Hello, <strong>World</strong></div>");

If combined with a fresh compiler, Elemi also supports interpolated strings.

auto e = elem!"div"(
    attr("data-expression") = i"1+2 = $(1+2)",
    i"1+2 is $(1+2)",
);

assert(e == `<div data-expression="1+2 = 3">1+2 is 3</div>`);