Components

Components in Fubam provide reusable UI building blocks that can be shared across multiple templates and layouts. They help maintain modularity and clean structure by encapsulating repeated interface elements into standalone units.

Unlike layouts (which define overall page structure), components are self-contained pieces of UI such as cards, buttons, navbars, or banners.

1. Component Folder Structure

It’s recommended to organize components in a separate folder:

Templates/
├── components/
│   └── card.pmx
├── layouts/
│   └── base.pmx
└── pages/
    └── home.pmx

• components/ contains all reusable UI blocks
• layouts/ contains page structures
• pages/ contains templates that use layouts and components

2. Creating a Component

A component is a .pmx file that defines a reusable UI structure.

Example: card.pmx

# Templates/components/card.pmx
 
Export = wrapper(
    div(
        h3(title if "title" in globals() else "Default Title"),
        p(description if "description" in globals() else "Default description"),
        className="card"
    )
)

Notes:

• Components can access variables passed from the page
• You can define fallback defaults using Python logic
• wrapper() binds multiple tags together (similar to JSX fragments <> </>)
• Components should remain focused and reusable

3. Using a Component in a Page

You can render a component inside a page template:

Example: home.pmx

# Templates/pages/home.pmx
 
Export = HTML(
    h2("Featured Section"),
    useComponent("card.pmx",
        title="Fubam Engine",
        description="A lightweight functions-based templating system."
    )
)

• useComponent("card.pmx", ...) renders the component
• Passed arguments become accessible inside the component
• The returned HTML becomes part of the page output

4. Passing Dynamic Variables

Components can receive dynamic values from Python logic:

user_name = "Aman"
 
Export = HTML(
    useComponent("card.pmx",
        title=f"Welcome, {user_name}",
        description="Glad to see you here."
    )
)

• Variables defined in the page are passed into the component
• This allows dynamic and data-driven UI composition
• Encourages reusable and flexible interface blocks

5. Using Components Inside Layouts

Components can also be used within layouts:

# Templates/layouts/base.pmx
 
Export = HTML(
    header(
        useComponent("navbar.pmx")
    ),
    main(__content__),
    footer(
        useComponent("footer.pmx")
    )
)

• Components help keep layouts clean and modular
• Common elements like navigation and footers should be components
• This promotes separation of concerns

6. Best Practices

• Keep components small and focused
• Avoid embedding heavy page logic inside components
• Use clear and descriptive variable names
• Organize components in Templates/components/
• Prefer composition over duplication

Summary

• Components define reusable UI blocks
• They accept variables (similar to props)
• They can be used in pages and layouts
• They improve modularity and maintainability
• They reinforce Fubam’s function-based paradigm