Temponent

Temponent is for template + component

I want to build a template framework in python that support component-based development like what front-end frameworks do.

Quick Start

New an html skeleton and a component, then render them with some context.

main.py is the html generator

from src.template import Template
a = Template.load_template("index.html")
html = a.render({"nums": [1,2,3]})
print(html)

index.html is the html skeleton

{% import "counter.html" as Counter %}
<div>
    <h1> Click Me! </h1>
    {% for i in nums %}
        {% Counter %}
            {{ i }}
        {% endCounter %}
    {% endfor %}
</div>

button.html is the component template

<button onclick="arguments[0].target.innerText++">
    {% slot %}
</button>

Run main.py and you will get

<div>
    <h1> Click Me! </h1>
    <button onclick="arguments[0].target.innerText++">
        1
    </button>
    <button onclick="arguments[0].target.innerText++">
        2
    </button>
    <button onclick="arguments[0].target.innerText++">
        3
    </button>
</div>

IDE Support 🌹

We try to make use of IDE support for existing template engines. In fact, this is one of the major purposes of Temponent's syntax design. Now, if you use PyCharm, you can enable syntax highlight of template tokens by choosing Jinja2 as template language here.

• indent inside a slot when reformatting the code
• navigation to a component file
• highlight of different tokens are different
• other basic IDE usages

Future Features (or TODOs?)

• support spaces inside expression like {{ a + b }}
• implement import syntax
• support slot syntax
  • using a component without inputting slot is just like {% Component ~ %}
• components with parameters
  • maybe like {% Component arg1 arg2 kwarg1=1 kwarg2=2 %}
• support something like named slot syntax
  • or maybe not named slot, it can be a special nullable parameter
  • a slot may be like {% slot ~ Name %} and it will generate name = context.get("name")
  • the used component only renders once, after the end tag (a buffer seems to be unavoidable)
  • an elevation of slot statements may be the necessary and sufficient condition
• support while loop and isolated variable declaration
• else and elif tag
• lazy compiling(assembling)
• directory based routing
• auto refresh when template file changes detected (only in dev mode and template is valid)
• caching (and cache-controls maybe?)
• implement more loaders, and complete test cases of components' grammar