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
, andattributes
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')
%}