HTML::Functional Style

hfstyle.raku

#| convert camel case fieldnames like 'firstName' to labels like 'First Name: '
sub camel2label(Str $camel) {
    $camel.subst( /(<lower>)(.*)(<upper>)?(.*)?/, {$0.uc~$1~($2//'')~($3//'')~': '} );
}


#| convert name to crotmp variable form eg. 'firstName' => '<.firstName>'
sub crotmpvar(Str $name) {
    $name.subst( /(.*)/, {"<.$0>"} );
}


############################ Model ############################

my $base = 'click_to_edit/contact/0';

my $data = {
    firstName => "Joe",
    lastName  => "Blow",
    email     => "joe@blow.com",
};

my @names  = <firstName lastName email>;

############################ View #############################

my @labels = @names.map: *.&camel2label;
my @values = @names.map: *.&crotmpvar;
my @types  = @names.map: { $_ ne 'email' ?? 'text' !! $_ };

my %tp;

{
    use HTML::Functional;

    %tp<default> :=
    div( :hx-target<this> :hx-swap<outerHTML>, [

        zip(@labels, @values).flat.map: {p $^label, $^value}

        button :hx-get("$base/edit"), 'Click To Edit',
    ]);

    %tp<edit> :=
    form( :hx-put("$base"), :hx-target<this> :hx-swap<outerHTML>, [

        zip(@labels, @types, @names, @values).map:
        -> ($label,  $type,  $name,  $value) {
            div label $label, input :$type, :$name, :$value
        }

        button('Submit'),
        button(:hx-get("$base"), 'Cancel'),
    ]);
}