[Feature] Add Templating mechanism for HyUIML Standards

[K1ntus]

Hello,

First of all, thanks for your work.

I have been building a bunch of pages and HUD, and I would like to easily manage the visual style across them through common modular elements (components, included in widgets, included in UI and HUD). Ideally with components being the only elements using natives types provided by your library (in order to avoid tight coupling but, not the topic here.

I have reach the conclusion to build a templating system, currently it is pre-processed through a python script before being written in the ressources/ folder of my mods.

Additionally, it would requires some update of the HyHUI web app.

Here is a first sample idea, need refinement:

<!--@widget: faction-entry
@id: W-FACTION-01
@description: Faction list entry with reputation bar
@uses: component/image, component/label, component/progress-bar
-->
<div id="{{$id}}" class="widget-faction-entry" data-state="{{$state|default}}" data-standing="{{$standing|neutral}}" style="layout-mode: Left;">
    
    <!-- Faction Icon -->
    <div class="faction-icon">
        {{@component/image:src=$factionIcon,width=48,height=48}}
    </div>
    
    <!-- Faction Info -->
    <div class="faction-info" style="layout-mode: Top; flex-weight: 1;">
        {{@component/label-body,content=$factionName}}
        {{@component/label-caption,color=$standingColor,content=$standingName}}
        
        <!-- Reputation Bar -->
        <div class="reputation-bar-container">
            {{@component/progress-bar:value=$reputation,max=$reputationMax,height=8}}
            <label class="reputation-text" data-style="tiny">{{$reputationText}}</label>
        </div>
    </div>
    
</div>

---

Next step for this kind of tool I have in mind is to either:

• Automate generation of a element library to, in code, do addComponentImageElement(...) directly, instead of writing the html code directly (as in https://github.com/Elliesaur/HyUI/blob/main/docs/page-building.md )
• or offer dynamic interface (template/generic methods? TBD)

---

Regards

[HageneeZ-Remco]

Hi @Elliesaur! 👋

I've implemented a TemplateProcessor that adds variable interpolation and reusable components:

Variables with filters:

Welcome, {{$playerName|Guest}}!

Gold: {{$gold|number}}

Progress: {{$percent|percent}}

Reusable components:
new TemplateProcessor()
.registerComponent("statCard", "

{{$label}}: {{$value}}

")
{{@statCard:label=Health,value=100}}

Fork: https://github.com/HageneeZ-Remco/HyUI-Enhanced
Demo: https://github.com/HageneeZ-Remco/HyUI-Showcase

Let me know if you'd like a PR or prefer to pull from the fork directly!

[Elliesaur]

This has now been added and will be included in 0.5.0.