Skip to main content

Refactor HTML in Python

Project description

phtml is a silly python library to generate HTML in Python like you would with a template, but refactor-oriented with a Pythonic React-like pattern based on nested components.

Component base

The base component class is Node:

from phtml import Node

form_layout = Node(
    'form',                     # node.tag
    {                           # node.attrs
        'class': 'foo',         # node.attrs['class']
        'method': 'POST',       # node.attrs['method']
    [                           # node.children
        '{{ form.as_p() }}',    # node.children[0]
        Node('input', {'type': 'submit'}, selfclose=True),

Casting form_layout to string will return the following:

<form class="foo" method="POST">
    {{ form.as_p() }}
    <input type="submit" />


While calling phtml.jinja.render(form_layout, form=YourForm()) will return the phtml output processed with form in the context and produce the final result.

The whole purpose is refactoring HTML generating logic into Python components:

from phtml import Form, Submit

form_layout = Form(
    {'class': 'foo'},
    ['{{ form.as_p() }}', Submit())],

Importing on the fly

from phtml import Node

form_layout = Node.factory(
    'phtml.Form', {'class': 'foo'},
    ['{{ form.as_p() }}', Node('phtml.Submit')],

Jinja and Materialize for the poor

Suppose you want to make a nice layout for the login form, please don’t repeat boring and verbose code like this because somewhere in the world a cat would probably die because of a side effect in an alternate reality or something:

from phtml import Form, Div

your_layout = Form(
    Div({'class': 'row'}, [
        Div({'class': 'col m6 s12'}, ['{{ form["username"] }}']),
        Div({'class': 'col m6 s12'}, ['{{ form["password"] }}']),

Refactored components for the rich

Instead make a beautiful layout with reusable components:

from phtml.django.mdc import Form, Row, Col, Input

class YourLoginForm(forms.LoginForm):
    _phtml = Form(
            Col(m=6, s=12, Input('username')),
            Col(m=6, s=12, Input('password')),

Silly and Stupid context based rendering

You could render as such in jinja (or in Python without the curly braces): {{ form._phtml.jinja(form) }}, since all rendering logic should already be in phtml.

Thank you

Thanks a lot for reading. Hope this will serve as a useful example for anybody on a mission to “refactor HTML in Python”.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

phtml-0.0.1.tar.gz (4.0 kB view hashes)

Uploaded Source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page