hyperscript-markup

This is a Babel plugin that transpiles markup into hyperscript. Compatible with any hyperscript library that accepts hyperscript in the form of hyperscriptFunction(tag, attributes, [children]). Works with React, Mithril, and Hyperapp.

Template Syntax

Views are declared by the magic sequence $>. This will transpile the template that follows it into hyperscript calls.

You can specify which hyperscript function to call like this:

• $> -- Transpile to React.createElement().
• $m> -- Transpile to m().
• $h> -- Transpile to h().
• $yourFunc> -- Transpile to yourFunc().

1const view = $>
2    	(div.intro)
3    		(ul)
4    			(li > 'Some')
5    			(li > 'List items')
6    		(ul.another-list)
7    			(list => item)
8    				(li > item)
9    		(form)
10    			(input(type="text", value = "Text value", onfocus = focus))
11    			(input(type="checkbox", required=true)
12					('Check this')
13
14ReactDOM.render(view, document.getElementById('react-app'))

Elements

Any html element can be expressed in parentheses:

1(img)

CSS classes can be set using the . operator:

1(img.my-class-name.my-other-class-name)

An element id can be set with the + operator (as # wouldn't be valid haxe syntax):

1(img+my-id)

Attributes can be used inside the selector:

1(img(src="img.jpg"))

Attributes can also be expressed separately:

1(img(src="img.jpg", alt=""))
2(img(src="img.jpg", aFunctionCallReturningAttributes()))

A component needs to have it's first letter capitialized:

1(div)
2    (MyComponent(param=1))
3    (MyOtherComponent(param=2))

Children

A shortcut for defining one child:

1(h1 > 'My title')

More than one child can be nested by using indentation:

1    (nav)
2    	(ul.links)
3    		(li)
4    			(a(href="http://haxe.org") > 'Haxe')
5    		(li)
6    			(a(href="http://github.com") > 'Github')

Inline expressions

Strings and template strings are supported.

1(h1)
2	('A string for example')
3(button)
4	(`${this.buttonLabel}`)

Prefix an expression or identifier with the tilde operator ~ to embed an expression without a call to the hyperscript functor.

1(div)
2	(~expression)

Would translate to:

1React.createElement('div', {}, expression)

Conditionals

$if, $elseif, and $else can be used inside templates:

1($if (headerSize == 1))
2	(h1 > 'Big')
3($elseif (headerSize == 2))
4	(h2 > 'Not that big')
5($else)
6	(p > 'Paragraph')

Map

The following syntax can be used for any object (in this case links) with a map method:

1(links => link)
2	(a (href=link.url, target='_blank') > link.title)

Map with null check

Using the >> operator adds a null check prior to map execution.

1(links >> link)
2	(a (href=link.url, target='_blank') > link.title)
3

Translates to:

1if (links != null)
2	links.map(function(link) React.createElement('a', { href: link.url, target: '_blank' }, [ link.title ]);
3else
4	[];

Sample

An example can be found at examples/simple.

Initial build:

1cd examples/simple
2npm install
3npm run build
4cd htdocs
5see index.html