Overview
This document outlines the five core composition rules used in the Arshu Assembler framework. These rules define how HTML templates and JSON data are merged to generate the final output.
1 Direct Composition
Mechanism
The main template uses a {{'{{'}}ComponentName{{'}}'}} placeholder. The engine replaces this
placeholder with the content of ComponentName.html, which is typically located in a
Component/ subdirectory.
Example
<div>
{{'{{'}}Html1AContent{{'}}'}}
</div>
<!-- Component/Html1AContent.html -->
<h3>This is the content</h3>
2 Slotted Composition
Mechanism
- A layout template (e.g.,
center.html) defines a slot using a{{'{{'}}$SlotName{{'}}'}}placeholder. - The main template invokes the layout using a
{{'{{'}}#LayoutName}}...{{'{{'}} /LayoutName{{'}}'}}block. - Inside this block, the main template specifies the content for a slot using an
{{'{{'}}@SlotName}}...{{'{{'}}/@SlotName{{'}}'}}block.
This allows for creating reusable page layouts where only specific sections change.
Example
<div class="center">
{{'{{'}}$Content{{'}}'}}
</div>
<!-- main.html -->
{{'{{'}}#Center}}
{{'{{'}}@Content}}
<h1>Hello World</h1>
{{'{{'}}/@Content}}
{{'{{'}} /Center}}
3 Contextual Composition
Mechanism
The main template (e.g., html3A.html) uses a {{'{{'}}ComponentName{{'}}'}} placeholder.
The engine resolves this by looking for ComponentName.html within a context-specific
Views/ directory. This allows different views to use the same placeholder name but load different content.
4 JSON Key Composition
Mechanism
- A template (e.g.,
json1A.html) is paired with a data file of the same name (json1A.json). - The JSON file contains simple key-value pairs.
- The template uses
{{'{{'}}$JsonKey{{'}}'}}placeholders to access and display the values from the JSON file.
Example
{
"Title": "Welcome",
"Description": "Hello World"
}
<!-- template.html -->
<h1>{{'{{'}}$Title{{'}}'}}</h1>
<p>{{'{{'}}$Description{{'}}'}}</p>
5 JSON Array Composition
Mechanism
- A JSON file contains a key that holds an array of objects.
- The template uses a
{{'{{'}}@ArrayKey}}...{{'{{'}} /ArrayKey{{'}}'}}block to loop through the array. - Inside the loop,
{{'{{'}}$ObjectKey{{'}}'}}placeholders are used to access the properties of each object in the current iteration. - The framework also supports:
- Conditional blocks:
{{'{{'}}@ConditionKey}}...{{'{{'}} /ConditionKey{{'}}'}}to render content if a key is true/truthy - Empty-state blocks:
{{'{{'}}^ArrayKey}}...{{'{{'}} /ArrayKey{{'}}'}}for when the array is missing or empty
- Conditional blocks:
Example
{
"Items": [
{ "Name": "Item 1", "Price": 10 },
{ "Name": "Item 2", "Price": 20 }
]
}
<!-- template.html -->
{{'{{'}}@Items}}
<div>
<h3>{{'{{'}}$Name{{'}}'}}</h3>
<p>Price: ${{'{{'}}$Price{{'}}'}}</p>
</div>
{{'{{'}} /Items}}
{{'{{'}}^Items}}
<p>No items available</p>
{{'{{'}} /Items}}
Summary
These five composition rules form the foundation of the Arshu Assembler framework, enabling powerful and flexible template-based content generation across multiple programming languages.