Raku Land

Hyperscript

cpan:JACKMILES

hyperscript

Create hypertext with Raku.

api

sub hyperscript(Str $tag, *%attrs, *@inner)

example

use Hyperscript;
constant &h = &hyperscript;

say h('h1', 'hello, world!');
# OUTPUT: <h1>hello, world!</h1>

slightly longer example

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."));

'pretty' output

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>

why?

prior art

testing

prove6 -l

license

MIT