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" />
</form>

Rendering

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(
        Row(
            Col(m=6, s=12, Input('username')),
            Col(m=6, s=12, Input('password')),
        )
    )

Note

For the documentation of the constructor of each component, please fill in their docstrings under their signature in Python code, UTSL !

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.

Files for phtml, version 0.0.1
Filename, size File type Python version Upload date Hashes
Filename, size phtml-0.0.1.tar.gz (4.0 kB) File type Source Python version None Upload date Hashes View

Supported by

Pingdom Pingdom Monitoring Google Google Object Storage and Download Analytics Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page