Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
136 lines (108 sloc) 3.01 KB

Usage

Simple example

import dhtags.tags : div, span;
import dhtags.attrs : className;
import std.stdio : writeln;

void main() {
    auto someHtml = div(span(className="text")("Some text"));
    writeln(someHtml.toString);
}
<div><span class="text">Some text</span></div>

Compile-time evaluation is also possible.

enum someHtml = div(ul(["Coffee", "Tea", "Milk"].map!(x => li(x)))).toString;
writeln(someHtml);
<div>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

Note that the HTML here is formatted for easy viewing but the toString function spits it out with no formatting. If you want a pretty-printed string, use toPrettyString.

Tags

All HTML tags are available and you can also define your own tags.

mixin DefineTag!("ShoppingList");
mixin DefineTag!("Item");

writeln(
    ShoppingList(
        Item("Orange"),
        Item("Milk"),
        Item("Cheese")
    )
);
<ShoppingList>
    <Item>Orange</Item>
    <Item>Milk</Item>
    <Item>Cheese</Item>
</ShoppingList>

Attributes

All attributes can take strings and some can take values of other types like int or bool. Boolean attributes can also be passed in without a value.

div(contenteditable=false, hidden)(
    p(tabindex=1)("First"),
    p(tabindex=2)("Second")
)
<div contenteditable="false" hidden="hidden">
    <p tabindex="1">First</p>
    <p tabindex="2">Second</p>
</div>

You can define your own custom attributes that take a specific type.

The attr function is also available for convenience which creates an attribute that takes a value of any type.

mixin DefineAttr!("first-attr", int);
writeln(div(firstAttr=5));

writeln(div("second-attr".attr="Hello"));
<div first-attr="5"></div>
<div second-attr="Hello"></div>

Data attributes can be defined in one of two ways. The first method will automatically convert camelcase names to a hyphen-separated name.

div(data.numColumns=10)
div(data("num-columns")=10)
<div data-num-columns="10"></div>

Imports

The preferred way is just import the tags or attributes you need,

import dhtags.tags : div, span;
import dhtags.attrs : id, href;

though this might be impractical in some cases.

You can of course import all tags and attributes at once, but beware that this will dump a bunch of stuff into the current namespace.

In addition, some tag and attribute names clash so you'll have to prepend these with either tags or attrs respectively.

import dhtags;

auto someHtml =
    div(
        tags.form(id="some-form", action="/"),
        button(attrs.form="some-form")("Click me")
    );

writeln(someHtml.toString);
<div>
    <form id="some-form" action="/"></form>
    <button form="some-form">Click me</button>
</div>

Known Issues

  • Compile-time evaluation of attributes with float or double values is not possible right now. Instead, just use a string, e.g. step="0.1" instead of step=0.1.