dhtags 0.2.0

HTML construction library


To use this package, put the following dependency into your project's dependencies section:

dub.json
dub.sdl

D HTML Tags

dhtags is an XML/HTML construction library for D, inspired by projects like j2html and ScalaTags. The goal is to extend the benefits of using a statically typed language by being able to create readable HTML in pure D.

In short, it takes D code that looks like this:

html(
  head(
    title("My page"),
    script(type="text/javascript")("Some script")
  ),
  body_(
    div(id="main", cls="greeting")(
      h1("Hello!"),
      a(href="https://www.example.com")("Example link")
    )
  )
)

and turns it into this:

<html>
	<head>
    	<title>My page</title>
        <script type="text/javascript">Some script</script>
   	</head>
    <body>
    	<div id="main" class="greeting">
        	<h1>Hello!</h1>
            <a href="https://www.example.com">Example link</a>
       	</div>
    </body>
</html>
Simple example
auto frag = div(span(cls="text")("Some text"));
writeln(frag.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. An attr function is also available for convenience which creates an attribute that takes a value of any type.

mixin DefineAttr!("danger-level", int);
writeln(div(dangerLevel=5));

writeln(div("my-attr".attr="Hello"));
<div danger-level="5"></div>
<div my-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 fragment = 
	div(
		tags.form(id="some-form", action="/"),
		button(attrs.form="some-form")("Click me")
	);

writeln(fragment.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.

Authors: Jatan Patel

Dependencies: none

Versions:
0.2.0 2016-Apr-15
0.1.0 2016-Apr-05
~master 2017-Jan-01
~develop 2016-Dec-02
Show all 4 versions
Stats:
  • 0 downloads today

  • 0 downloads this week

  • 0 downloads this month

  • 51 downloads total