hyperscript

Create hypertext with Raku.

api

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

• Str $tag:
  • The HTML tag to be created.
  • Supports class and id shortcuts, e.g.: 'p#id.class'.
  • if $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.

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?

• It produces HTML from Raku code, instead of a separate templating language.
• It's a way to learn Raku module development.

prior art

• Hyperscript (JavaScript library): https://github.com/hyperhype/hyperscript

testing

prove6 -l

license

MIT