Simple Greeting with Lit

simple-greeting-lit.raku

#!/usr/bin/env raku

#this example inspired by https://lit.dev/playground/
#untested

use Air::Functional :BASE;
use Air::Base;
use Air::Component;

class Simple-Greeting does Component {
    has Str $.name = 'Somebody';
    
    ## put head JS / CSS methods here (see below)
    
    method STYLE {
        Q|p {color:blue}|
    }

    method SCRIPT {
        Q|
            import {html, css, LitElement} from 'lit';
            import {customElement, property} from 'lit/decorators.js';

            @customElement('simple-greeting')
            export class SimpleGreeting extends LitElement {
              static styles = css`p { color: blue }`;

              @property()
              name = 'Somebody';

              render() {
                return html`<p>Hello, ${this.name}!</p>`;
              }
            }
        |;
    }

    method HTML {
        '<simple-greeting name="' ~ $!name ~ '"></simple-greeting>'
    }
}
sub simple-greeting(*@a, *%h) { Simple-Greeting.new( |@a, |%h ) }

my $site =
    site :register(Simple-Greeting.new),
        page
            main
                simple-greeting :name<World>;

$site.serve;

--- below is the source of the class Site applied by method register

method enqueue-all {
        return if $loaded++;

        for @!register.unique( as => *.^name ) -> $registrant {
            my $head = @!pages.first.html.head;  # NB. head is a singleton

            #| SCRIPT inserts script tag (default)
            #| at end of body on every page
            for @!pages -> $page {
                with $registrant.?SCRIPT {
                    $page.html.body.scripts.append: Script.new($_)
                }
            }

            #| SCRIPT-HEAD inserts script tag in the shared head
            with $registrant.?SCRIPT-HEAD {
                $head.scripts.append: Script.new($_)
            }

            #| SCRIPT-LINKS inserts script tags in the shared head (default)
            #| takes list of script src urls
            for $registrant.?SCRIPT-LINKS -> $src {
                $head.scripts.append: Script.new( :$src ) with $src;
            }

            #| SCRIPT-LINKS-BODY inserts script tag in every page body
            for @!pages -> $page {
                for $registrant.?SCRIPT-LINKS-BODY -> $src {
                    $page.html.body.scripts.append: Script.new( :$src ) with $src;
                }
            }

            #| STYLE-LINKS inserts link tag in the shared head
            #| takes list of link href urls
            for $registrant.?STYLE-LINKS -> $href {
                next unless $href.defined;
                $head.links.append: Link.new( :$href, :rel<stylesheet> );
            }

            #| STYLE insert style tag into shard head
            with $registrant.?STYLE {
                $head.styles.append: Style.new($_)
            }

            with $registrant.?SCSS {
                $!scss-gather ~= "\n\n" ~ $_;
            }
        }
    }