The Evolution of Web Component Modules in Raku: A Journey of Diverse Approaches

# App.rakumod
use MemoizedDOM;
use Todo;

class App does Tag {
    has @.todos;
    has Str $.new-title = "";

    method render {
        form(
            :event{
                :submit{
                    .preventDefault;
                    @!todos.push: {
                        :title($!new-title),
                        :!done
                    };
                    $!new-title = "";
                    self.call-render
                }
            },
            ul({ do for @!todos -> (Str :$title!, Bool :$done! is rw) {
                Todo(:$title, :$done, :toggle{ $done = !$done; self.call-render })
            }}),
            input(
                :type,
                :event{
                    :keyup{ $!new-title = . }
                },
                :value{ $!new-title }
            ),
            input(
                :type,
                :value,
            )
        )
    }
}


# Todo.rakumod
use MemoizedDOM;

class Todo does Tag {
    has Str  $.title;
    has Bool $.done is rw;
    has      &.toggle is required;

    method render {
        li(
            :style{
                $!done
                ?? { :textDecoration, :opacity<0.3> }
                !! { :textDecoration        , :opacity<1>   }
            },
            :event{
                :click( &!toggle )
            },
            input(
                :type,
                :checked{ $!done },
            ),
            $!title
        )
    }
}


# todo.raku
use App;

EVAL :lang, 'HTMLElement.prototype.defined = function() { return true }';
EVAL :lang, 'document.defined = function() { return true }';

my \document = EVAL :lang, 'return document';

my $app = App(:todos[
    {:title, :!done},
    {:title, :done },
    {:title, :!done},
]);

$app.mount-on: document.getElementById: 'todoapp';

# examples/todo/Todo.rakumod
use HTML::Component;
use HTML::Component::Endpoint;

unit class Todo does HTML::Component;

my @todos;

has UInt   $.id = ++$;
has Str()  $.description is required;
has Bool() $.done = False;

submethod TWEAK(|) {
  @todos[$!id - 1] := self;
}

method LOAD(UInt() :$id) {
  @todos[$id - 1]
}

multi method new($description) { self.new: :$description, |%_ }

method RENDER($_) {
  .li:
    :htmx-endpoint(self.toggle),
    :hx-swap,
    :class,
    {
      .input-checkbox:
        :checked($!done),
      ;
      if $!done {
        .del: $!description
      } else {
        .add-child: $!description
      }
    }
  ;
}

method toggle is endpoint{ :return-component } {
  $!done .= not
}



# examples/todo/TodoList.rakumod
use HTML::Component::Endpoint;
use HTML::Component;
use HTML::Component::Boilerplate;
use HTML::Component::Traits;
use Todo;

unit class TodoList does HTML::Component;

method new(|)  { $ //= self.bless }
method LOAD(|) { self.new }

has UInt $.id = ++$;
has Todo @.todos;

method RENDER($_) {
  .ol: {
    .add-children: @!todos;
  }
  .form: self.new-todo;
}

method new-todo(
  Str :$description! is no-label, #= What should be done?
) is endpoint{ :verb, :redirect> } {
  @!todos.push: Todo.new: :$description;
}



# examples/todo/App.rakumod
use TodoList;
use HTML::Component;
use HTML::Component::Boilerplate;
unit class App does HTML::Component;

method RENDER($) {
  boilerplate
    :title("My TODO list"),
    :body{
      .script: :src;
      .add-child: TodoList.new;
    }
  ;
}



# examples/todo/cro-todo.raku
use Cro::HTTP::Log::File;
use Cro::HTTP::Server;
use Cro::HTTP::Router;
use HTML::Component::CroRouter;
use Cro::HTTP::Log::File;
use lib "examples";
use App;

my $route = route {
    root-component App.new
}

my $app = Cro::HTTP::Server.new(
    host => '127.0.0.1',
    port => 10000,
    application => $route,
    after => [
        Cro::HTTP::Log::File.new(logs => $*OUT, errors => $*ERR)
    ],
  );

$app.start;
say "Listening at http://127.0.0.1:10000";

react whenever signal(SIGINT) {
    $app.stop;
    exit;
}

use Cromponent;
class AComponent does Cromponent {
    has $.data;

    method RENDER {
        Q:to/END/
        
        END
    }
}

sub EXPORT { AComponent.^exports }