Cromponent new features

#rakulang #webcomponents #htmx

Cromponent 🎉 now lets your components bind cookies, query-string params, headers and HTTP-auth credentials directly in the method signature 🍪❓📑🔐 and push live HTML over WebSockets with two tiny hooks 🔌🛰️.
Paired with HTMX on the client, that means real-time Raku apps with zero JavaScript 🚀. Below you’ll find the new API plus a complete “live poll” example. Dive in! 🏊‍♂️

⸻

Why Cromponent? 🤔✨

Cromponent glues together Cro’s reactive HTTP / WebSocket server and Cro Templates to give Raku developers a component abstraction à la modern SPA frameworks – but rendered on the server and streamed as HTML fragments.
The latest release focuses on state & interaction: declarative request-context binding and built-in WebSocket wiring. ❤️‍🔥

⸻

Prerequisites at a Glance 📚🔎

Layer	Role	1-Liner
HTMX ⚡	Enriches plain HTML with AJAX, SSE & WebSockets via attributes.	`hx-put, hx-target, hx-ext="ws"`, …
Cro 🧩	Reactive HTTP/WebSocket server & router for Raku.	`route { … }`
Cro Templates 🖋️	HTML-centric templating DSL compiled on first use.	`template 'view.crotmp', %data`
Red ORM 🗄️	DB-agnostic ORM with migrations & relationships.	`model Foo { has Int $.id is serial … }`
Dynamic vars 🌐	`$*foo` passes per-request context through deep calls.	`$*user` in our example

New API: Context Traits 🍪❓📑🔐

Any method tagged is accessible becomes an endpoint and auto-binds request data:

method profile(
    Str :$uuid   is cookie,
    Str :$q      is query,
    Str :$accept is header,
    Str :$creds  is auth
) is accessible { ... }

Zero plumbing 🛠️
Type-safe input 🛡️
Self-documenting signatures 📜

Route pattern:

/ComponentName/<ids…>/profile

New API: Automatic WebSockets 🔌🛰️
1. Channel key – method IDS { $!id } groups browsers in the same room.
2. Re-render hook – method REDRAW(:$*user is cookie) { $.Str } returns fresh HTML when you redraw $component.
3. <|WebSocket> cromponent adds hx-ext="ws" ws-connect="/ws" and the htmx-ws extension swaps fragments for you.

No manual frames, pings or reconnect loops – Cro & HTMX handle all that jazz. 🎷

⸻

Building a Live Poll 🗳️⚡

5.1. Router & DB Setup 🛣️

my $routes = route {
    red-defaults "SQLite";
    PollItem.^add-cromponent-routes;   # auto REST 🆓
    WebSocket.^add-cromponent-routes;  # auto WS  🆓

    get -> 'polls', Str :$*user is cookie = UUID.new.Str {
        response.set-cookie: :name<user>, :value($*user);
        template 'polls.crotmp', { :$*user, :@polls = Poll.^all }
    }
}
Cro::HTTP::Server.new(:host<0.0.0.0>, :port(2000), :$routes).start;

First visit ➡️ generates UUID ➡️ saves in 🍪 ➡️ available as $*user.

5.2. Poll Component 📊

model Poll does Cromponent {
    has UInt $.id    is serial;
    has Str  $.descr is column;
    has      @.items is relationship(*.poll-id, :model<PollItem>);
    has      @.votes is relationship(*.poll-id, :model<PollVote>);

    method LOAD($id)       { Poll.^load: $id }  # rebuild
    method IDS             { $!id }             # WS room
    method REDRAW(:$*user) { $.Str }            # push update

    method did-user-vote($who = $*user) {
        ?@.votes.first: *.user eq $who
    }

    method RENDER { … }   # the template
}

5.3. PollItem Component ✅

method vote(Str :$*user is cookie)
      is accessible { :http-method<PUT>, :returns-cromponent } {
    red-do :transaction, {
        $!votes++;
        self.^save;
        $!poll.votes.create: :$*user;
        redraw $!poll;      # broadcast 🌍
        $!poll
    }
}

HTMX button:

<button
  hx-put="/poll-item/42/vote"
  hx-target="closest .poll"
  hx-swap="outerHTML">🗳️ Vote</button>

5.4. WebSocket-Enabled Page 🖥️

<|Boilerplate(:title('Polls 🗳️'), :htmx, :style-sheets('/css'))>
  <|WebSocket>
    <h6>Logged in as <.user> 🙋‍♂️</h6>
    <@.polls><&HTML($_)></@>
    <a href="/polls">All polls 📋</a>
  </|>
</|>

Generated Endpoints Recap 🛤️

Method	Path	Source
GET	`/polls`	manual route	❌
GET	`/polls/<id>`	manual route	❌
PUT	`/poll-item/<id>/vote`	PollItem.vote	✅
GET	`/cromponent-ws`	WebSocket	✅

One call to .^add-cromponent-routes ➡️ endpoints galore! 🎊

⸻

Key Take-aways 💡
Context traits (is cookie 🍪, is query ❓, is header 📑, is auth 🔐) shred boilerplate.
IDS + REDRAW inject WebSocket magic with two methods. ✨
Everything lives in one file: model + template + behaviour – still plain Raku, still testable. 🧪

Result: back-end-driven UX with instant updates and zero JavaScript. 🚀

⸻