Help language development. Donate to The Perl Foundation
Create hypertext with Raku.
sub hyperscript(Str $tag, *%attrs, *@inner)
Str $tag:
'p#id.class'.$tag begins with a class or id shortcut, hyperscript uses a div element.*%attrs: HTML attributes on the element.*@inner: Inner contents for the element.
use Hyperscript;
constant &h = &hyperscript;
say h('h1', 'hello, world!');
# OUTPUT: <h1>hello, world!</h1>
use Hyperscript;
constant &h = &hyperscript;
my $html =
h('div#page',
h('div#header',
h('h1.classy', style => { background-color => '#22f'}, 'h')),
h('div#menu', style => { background-color => '#2f2' },
h('ul',
h('li', 'one'),
h('li', 'two'),
h('li', 'three'))),
h('h2', style => { background-color => '#f22' }, 'content title'),
h('p',
"so it's just like a templating engine, ",
"but easy to use inline with Raku"),
h('p',
"the intention is for this to be used to create ",
"reusable, interactive html widgets."));
By default, hyperscript outputs a condensed string of HTML. Sometimes it may be useful to have
a string representation that more closely reflects the nesting structure of your HTML. 'Pretty' output
can be enabled when needed by setting the $*hyperscript-style dynamic variable.
Running this Raku code:
use Hyperscript;
my &h = &hyperscript;
my @items = do for 1..3 {
h('li.condensed', h('a.condensed', :href("page$_.html"), h('b.condensed', "Page $_")))
}
my $site-nav = do {
my $*hyperscript-style = Hyperscript::Style::Pretty; # Enable pretty output
h('nav.pretty', h('ul.pretty', @items))
}
say $site-nav;
Will provide the following HTML:
<nav class="pretty">
<ul class="pretty">
<li class="condensed"><a class="condensed" href="page1.html"><b class="condensed">Page 1</b></a></li>
<li class="condensed"><a class="condensed" href="page2.html"><b class="condensed">Page 2</b></a></li>
<li class="condensed"><a class="condensed" href="page3.html"><b class="condensed">Page 3</b></a></li>
</ul>
</nav>
prove6 -l
MIT