Component Properties

Component properties are key-value pairs accessible within the local scope of a component template. They enable customization and dynamic rendering of components. The default properties object is named props, but this can be changed as needed.

---

Creating a Button Component

Here is an example of defining a button component:

views/components/button.html

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

Using the Button Component

To use the button component in another template, such as form.html, you can import and render it as follows:

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>

Changing the Properties Identifier

The default properties identifier is props, but you can use any valid identifier by specifying it in the component definition.

Example:

views/components/button.html

<component default Button myProps>
  <button>{{{ myProps.content }}}</button>
</component>

---

Built-in Component Attributes

Components include several predefined attributes that provide flexibility and ease of use:

Name	Type	Description
content	string	Represents the inner content of the component
attributes	object	Contains processed attributes of the component
stringAttributes	string	Contains attribute strings of the component

1. Content

The content property is a shorthand for props.content, representing the inner content of the component.

Example:

Creating the component:

views/components/button.html

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

Using the component:

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>

2. Attributes

The attributes property contains processed attributes for the component, useful for passing dynamic values.

Example:

Creating the component:

views/components/button.html

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

Using the component:

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

Output:

<button class="btn" type="button">Submit</button>

3. Raw Attributes

The stringAttributes property provides raw strings for directly applying attributes to the component.

Example:

Creating the component:

views/components/button.html

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

Using the component:

views/index.html

{% import Button from '/components/button'; %}

<x:Button id="uniqueButton" type="submit">Send</x:Button>

Output:

When you open the link http://localhost:3000/ in your browser, you should see the result shown below.

http://localhost:3000/

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

tip

When your attribute contains template code, use the Render tag to ensure proper content rendering.

---

Passing Dynamic Values

To pass dynamic variables as attribute values, use a colon (:) or at symbol (@) before the attribute name:

views/index.html

import Button from "/components/button"

{% const addNumber = 1+1  %}
<X:Button :value="addNumber" type="submit">Send</X:Button>

You can also use valid expressions:

views/index.html

import Button from "/components/button"

<X:Button :value="1+1" type="submit">Send</X:Button>
<X:Button :value="condition ? true : false" type="submit">Send</X:Button>
<X:Button :value="validMethodName()" type="submit">Send</X:Button>

Additionally, you can use globally declared variables within your template, typically passed through the context or plugins or native javascript code:

views/index.html

import Button from "/components/button"

<X:Button @value="appName" type="submit">Send</X:Button>

---

Summary

Component properties in Alapa enable:

1. Flexible customization using props and its variations.
2. Dynamic rendering with content, attributes, and rawAttributes.
3. Simplified component reuse and integration across templates.

Experiment with these attributes to unlock the full potential of your component design.