DEV Community

Fernando Correa de Oliveira
Fernando Correa de Oliveira

Posted on • Edited on

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! πŸŠβ€β™‚οΈ

βΈ»

  1. 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. ❀️‍πŸ”₯

βΈ»

  1. 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
  1. 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 { ... }
Enter fullscreen mode Exit fullscreen mode
  • Zero plumbing πŸ› οΈ
  • Type-safe input πŸ›‘οΈ
  • Self-documenting signatures πŸ“œ

Route pattern:

/ComponentName/<ids…>/profile
Enter fullscreen mode Exit fullscreen mode
  1. 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. 🎷

βΈ»

  1. 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;
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

HTMX button:

<button hx-put="/poll-item/42/vote" hx-target="closest .poll" hx-swap="outerHTML">πŸ—³οΈ Vote</button>
Enter fullscreen mode Exit fullscreen mode

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> </|> </|>
Enter fullscreen mode Exit fullscreen mode
  1. 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! 🎊

βΈ»

  1. Key Take-aways πŸ’‘
  2. Context traits (is cookie πŸͺ, is query ❓, is header πŸ“‘, is auth πŸ”) shred boilerplate.
  3. IDS + REDRAW inject WebSocket magic with two methods. ✨
  4. Everything lives in one file: model + template + behaviour – still plain Raku, still testable. πŸ§ͺ

Result: back-end-driven UX with instant updates and zero JavaScript. πŸš€

βΈ»

  1. Further Reading πŸ“š
  2. 🌟 Cromponent β†’ https://github.com/FCO/Cromponent
  3. πŸ“œ Cro docs β†’ https://cro.services
  4. πŸ—„οΈ Red ORM β†’ https://github.com/FCO/Red
  5. ⚑ HTMX β†’ https://htmx.org
  6. πŸ”Œ htmx-ws extension β†’ https://htmx.org/extensions/ws/
  7. 🧠 Dynamic vars in Raku β†’ https://docs.raku.org/language/variables#Dynamic_variables

Happy hacking – and may your components stay Crom-pact! πŸ¦€πŸŽˆ

Top comments (0)