Generate native python functions from HTML templates
Project description
Tempered (Alpha)
Generate native python functions from HTML templates
A jinja2 inspired, type checked, compiled, scoped css, html templates
pip install tempered
Features
- Type checked
- Compiled
- Scoped CSS
Example
<!-- templates/image.html -->
{!param src: str}
{!param alt: str = ""}
<img src="{{src}}" alt="{{alt}}">
<style>
img {
width: 100px;
height: 100px;
}
</style>
import tempered
tempered.add_template_folder("./templates")
components = tempered.build()
print(components.image(
src="/example.png",
alt="Example Post",
with_styles=True,
))>
<!-- Generated -->
<style>img.styles-1ad5be0d {width: 100px;height: 100px;}</style>
<img class='styles-1ad5be0d' src="/example.png" alt="Example Post">
Compiled
Since tempered is runtime compiled and loaded, it provides increase speed compared to jinja. From initial benchmarks, it's roughly 10x faster than jinja2.
Additionally, it allows IDEs to provide intelisense to components
# __components.py
# This file is dynamicly generated when you build the templates
from tempered import _internals as __internals
IMAGE_STYLE = "<style>img.styles-1ad5be0d {width: 100px;height: 100px;}</style>"
def image(*, src: str, alt: str = "", with_styles: bool = True) -> str:
__html = ""
if with_styles:
__html += IMAGE_STYLE
__html += "<img class='styles-1ad5be0d' src=\""
__html += __internals.escape(src)
__html += "\" alt=\""
__html += __internals.escape(alt)
__html += "\">"
return __html
Requirements
- Scoped CSS
- Typed Python Components
- Components Import
Templating
Parameters
Use {!param} for parameters, this must placed at the root level
{!param a: str = "A"} <!-- Typed Default Value Parameter-->
{!param b = 2} <!-- Default Value Parameter-->
{!param c: list} <!-- Typed Parameter-->
{!param d} <!-- Parameter -->
<!DOCTYPE HTML>
Style Placement
Use {!styles} for styles, this is where styles are placed
<head>
{!styles}
</head>
If omitted, styles are placed at the end of the component
Style Include
<head>
{!styles post}
</head>
Manually add a component styles to the HTML
This is useful for when you need to include the CSS for dynamically create components, such as with HTMX
Component
Use {%component %} for a component, call this like
<div>
{% component post(title=1) %}
</div>
Html
Use {%html %} to include literal html without escaping
{!param markdown_html: str}
<div>
{% html markdown_html %}
</div>
Expressions
Use {{ VALUE }} for expressions, these are escaped for parameters and HTML
{!param src: str}
{!param text: str}
<a src="{{src}}">
{{text}}
</a>
Important:
if
Use {%if %} and {% endif %} for control flow, there are two control flow structures
{!param link: str|None = None}
{% if link %}
<a href="{{link}}">
Link
</a>
{% endif %}
You can also have an else block
{!param src: str|None = None}
{% if src %}
<img src="{{src}}" alt=""/>
{% else %}
<img src="/images/missing.png" alt=""/>
{% endif %}
for
Use {%for %}
{!param commments: list[str] }
{% for comment in comments %}
<span>
{{comment}}
</span>
{% endif %}
{!param commments: list[str] }
<ul>
{% for x in range(10) %}
<li>{{x}}</li>
{% endif %}
</ul>
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for tempered-0.0.2-py2.py3-none-any.whl
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | c0ad842a11ddb003e866a6434d1f3a36269e2daf5e47715a81e95bd0c3382116 |
|
| MD5 | 374e02b1b1b001dfa90835ddce2b4a20 |
|
| BLAKE2b-256 | e6fa722950ec5a29b6c04994e86e14d8a12546d243138d468f4a7243a6e9e094 |
