Skip to main content

Alapa Components

Alapa Components offer a robust, React-like templating experience for your applications. They are reusable, customizable, and designed to seamlessly integrate into your templates.

Key Features

  • Component Structure: Defined using HTML-like syntax with the <component> tag.
  • Reusability: Import and use components across your project.
  • Dynamic Rendering: Use attributes like props, content, and attributes to customize rendering dynamically.

Getting Started

Creating a Component

Components are defined with the <component> tag in a .html file. Below is an example of a Layout component:

views/components/layout.html

{% import '/components/navbar.html' %}

<component default Layout props>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Alapa App</title>
<link rel="stylesheet" href="{{static('css/app.css')}}" />
</head>
<body class="bg-gray-100 dark:bg-gray-900 dark:text-gray-300">
<x:NavBar />
<Render props.content />
</body>
<script src="{{static('js/app.js')}}"></script>
</html>
</component>

Using the Layout Component

views/index.html
{% import "/components/layout.html" %}
<X:Layout>
<div>
<p>Hello, World</p>
</div>
</X:Layout>

Component Properties

1. Props

props contains the properties passed to a component. For example:

Creating a Button Component:

/views/components/button.html
<component Button props>
<button class="btn" type="{{ props.type }}">
<Render props.content />
</button>
</component>

Using the Button Component:

/views/index.html
{% import {Button} from '/components/button'; %}
<X:Button type="button">My Button</X:Button>

Output:

When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/
<button class="btn" type="button">
My Button
</button>

2. Content

content is shorthand for props.content and represents the inner content of a component.

Example:

views/components/button.html
<component default Button props>
<button class="btn" type="{{ props.type }}">
<Render content />
</button>
</component>

Usage:

views/index.html
{% import '/components/button'; %}
<X:Button type="button">Click Me!</X:Button>

Output:

When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/
<button class="btn" type="button">
Click Me!
</button>

3. Attributes

Attributes provide raw or processed values for customizing the component.

Example:

views/components/button.html
<component default Button props>
<button class="btn" type="{{ attributes.type }}">
<Render content />
</button>
</component>

Usage:

views/button.html
{% import Button from '/components/button'; %}
<X:Button type="button">Submit</X:Button>

Output:

When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/
<button class="btn" type="button">Submit</button>

4. String Attributes

stringAttributes passes raw strings directly into the component.

Example:

views/components/button.html
<component default Button props>
<button class="btn" {{{ props.stringAttributes }}}>
<Render content />
</button>
</component>

Usage:

views/components/button.html
{% import button from '/components/button'; %}
<X:Button id="uniqueButton" type="submit">Send</X:Button>
When you view the source code of http://localhost:3000/ in your browser, you should see the result shown below.
view-source:http://localhost:3000/

Output:

<button class="btn" id="uniqueButton" type="submit">Send</button>

Importing Components

Alapa allows flexible import styles to include components in your templates. Examples include:

untitled
{%
import { Button, Input } from 'modules/form';
import Default { OtherComponent } from 'component/path';

// Import with alias
import { Button as PrimaryButton } from 'form';

// Default imports
import DefaultMember from 'components/default.component';
import 'component/button';

// Dynamic import
import('component/button')
%}