Skip to main content

Composable HTML generation in python

Project description

html-compose

✨ Composable HTML generation in Python 3.10+ with extensive type hinting 📚

from html_compose import a, article, body, br, head, html, p, strong, title

>>> username = "github wanderer"
>>> print(
  html()[
    head()[title()[f"Welcome, {username}!"]],
    body()[
        article()[
            p()["Welcome to the internet", strong()[username], "!"],
            br(),
            p()[
                "Have you checked out this cool thing called a ",
                a(href="https://google.com")["search engine"],
                "?",
            ],
        ]
    ],
  ].render()
)
<html><head><title>Welcome, github wanderer!</title></head><body><article><p>Welcome to the internet<strong>github wanderer</strong>!</p><br /><p>Have you checked out this cool thing called a <a href="https://google.com">search engine</a>?</p></article></body></html>

Features ✨

  • ⚡ Lazy evaluation leading to performance gains
  • 🛏 Define children via [] syntax:
    from html_compose import p, strong
    p()["a", strong()["bold"], "statement"]
    #<p>a <strong>bold</strong> statement
    # The above is identical to
    p().append(["a", strong()["bold"], "statement"])
    
  • 🧩 Skip constructor via same [] syntax for text only elements.
    from html_compose import ul, li
    ul[
        li["Look ma!"]
        li["No constructor!"],
        li["This feels natural"],
        li["for text elements"]
    ]
    
  • 🌐 Define attributes in a variety of ways:
    from html_compose import div
    
    ## With type hints
    div(tabindex=1)
    div(attrs=[div.tabindex(1)])
    # <div tabindex=1></div>
    
    ## Positionally
    div([div.tabindex(1)])
    # <div tabindex=1></div>
    div({"data-for-something": "foo"})
    # <div data-for-something="foo"></div>
    ## With class dictionary resolution
    is_dark_mode = False
    div(class_={"dark-mode": is_dark_mode, "flex": True})
    # <div class="flex"></div>
    
    ## Combine the two `
    div(attrs=[div.class_("flex")], class_={"dark-mode": True})
    # <div class="flex dark-mode"></div>
    
  • 🎭 Type hints for the editor generated from WhatWG spec

Goals 🛠️

  • Be a stable layer for further abstraction of client-server model applications and libraries
  • Put web developer documentation in the hands of developers via their IDE
  • 🚀 Opinionate as few things as possible favoring expression; stay out of the way
  • Clearly mark any potentially breaking changes through discovered development optimizations in changelog

Magic decisions 🪄

The code base is littered with "Magic" decisions to make your life easier, but the keen developer will want to know exactly what these are.

Children 🌟

The children iterator/resolver makes some decisions to marshal input into strings:

  • 🔒 All text elements and attribute values are escaped by default to prevent XSS
    • To inject unsafe text it must explicitly be marked unsafe via html_compose.unsafe_text.
  • 💡 Bools are translated to string true/false
  • ✨ Floats passed as-is are converted to strings by rounding to a fixed precision. The default is defined in ElementBase.FLOAT_PRECISION and can be overridden in two ways:
    • Set ElementBase.FLOAT_PRECISION to the desired value - global
    • Set YourElement.FLOAT_PRECISION to the desired value - applies just to the element. i.e. td.FLOAT_PRECISION
  • 🏷️ Children can be callables, like functions, lambdas, or classes that implement __call__. These are resolved at render time.

Inspiration ✨

Inspiration and motivation for this library are listed below.

  • Throw out your templates by Tavis Rudd
  • The Principle from pydantic FastUI
  • htpy for its syntax ideas, which itself is inspired by projects not in this list
  • htmx Transition library to a "dumb client" model
  • alpinejs Another "dumb client" transition library
  • hyperaxe Similar tool for JavaScript
  • flexx A Python super toolkit for developing user applications
  • lit lit and the web component engine that it wraps

The WhatWG spec 📝

The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies.

They produce a document which defines the HTML spec.

https://html.spec.whatwg.org

We parse this document to produce code-generated type hints and annotations.

Generating ⚙️

For maintainers.

In the virtual environment, run python tools/spec_generator.py followed by python tools/generate_attributes.py or python tools/generate_elements.py

This will update the tools/generated directory.

We track this in git so we can see 1:1 changes to our generation.

The generated code is moved into the actual src directory and then the repo tooling is run over it:

  • rye lint --fix
  • rye fmt

Maintaining ⚖️

Elements or attributes may be slightly different from the live package. These should be merged in.

Code generation was used as a trick to bootstrap this package quickly, but the web spec changes quickly, as tools such as the popover API were recently added.

Maintainers will run the generating step, which will update the tools/generated/ classes.

Updates pertaining to those changes should be shipped into the actual module under src.

Dependencies

  • PalletsProjects markupsafe for text escaping
  • beautifulsoup4 to optionally beautify HTML

Development tools ⚙️

License

MIT.

Download files

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

Source Distribution

html_compose-0.5.0.tar.gz (123.9 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

html_compose-0.5.0-py3-none-any.whl (87.5 kB view details)

Uploaded Python 3

File details

Details for the file html_compose-0.5.0.tar.gz.

File metadata

  • Download URL: html_compose-0.5.0.tar.gz
  • Upload date:
  • Size: 123.9 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.12.3

File hashes

Hashes for html_compose-0.5.0.tar.gz
Algorithm Hash digest
SHA256 b4c7d0d18f96d8156d34aaa5cb0d99e31ac0a4e990d1d5164734d91482a9a8e3
MD5 e1b08c51cc3a1fabab3826e582ce6336
BLAKE2b-256 4f10ad5dae92dfc0cdc23c843b4ed90380e598931722d6a80fd977f5180a2bbb

See more details on using hashes here.

File details

Details for the file html_compose-0.5.0-py3-none-any.whl.

File metadata

  • Download URL: html_compose-0.5.0-py3-none-any.whl
  • Upload date:
  • Size: 87.5 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/5.1.1 CPython/3.12.3

File hashes

Hashes for html_compose-0.5.0-py3-none-any.whl
Algorithm Hash digest
SHA256 df4f3d14f33c04f0ba1047864537b6594331424bccd4477d306b739a3f6611b5
MD5 bb545f6ee7807e18852ce653b1d3392c
BLAKE2b-256 c960618714807c6d8b5f3a7f5982b08ddcc0c94d8b955e84735f6db31c21dcce

See more details on using hashes here.

Supported by

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