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