Reusing components

Mayu has a resource system which builds a dependency graph of everything that the application consists of.

You can use import() in the first :ruby-filter to import other components.

To render child elements passed to a component, use %slot.

Example:

app/components/Button.haml

%button{**props}
  %slot
:css
  button {
    border: none;
    background: var(--blue);
    color: var(--white);
  }

app/pages/my-page/page.haml

:ruby
  Button = import("/app/components/Button")
%Button Click here!

This would replace %slot with the string Click here!.

Named slots

Slots can also be named, here’s an example:

app/components/Wrapper.haml

:ruby
  Header = import("./Header")
  Footer = import("./Footer")
%div
  %Header
  %slot(name="after-header")
  %h1= $title
  %slot
    %p Optional fallback content, if no children are passed in.
  %Footer
  %slot(name="after-footer")

src/pages/hello/page.haml

:ruby
  Wrapper = import("/app/components/Wrapper")
%Wrapper(title="Hello world")
  %h2 Hello world
  %p Hello to the world and welcome to my webpage.
  %p(slot="after-footer") Copyright 2024