Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bitplorer/uidom
Blade like HTML Library for Python
https://github.com/bitplorer/uidom
alpinejs custom-elements dom hot-reload html htmx python ssr tailwindcss web-components
Last synced: 4 months ago
JSON representation
Blade like HTML Library for Python
- Host: GitHub
- URL: https://github.com/bitplorer/uidom
- Owner: bitplorer
- License: mit
- Created: 2022-07-10T04:13:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-21T09:09:40.000Z (over 1 year ago)
- Last Synced: 2023-07-01T04:45:22.517Z (over 1 year ago)
- Topics: alpinejs, custom-elements, dom, hot-reload, html, htmx, python, ssr, tailwindcss, web-components
- Language: Python
- Homepage:
- Size: 494 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-python-html - bitplorer/uidom
- awesome-python-html - bitplorer/uidom
README
# UiDOM
## An HTML library for python
This library is inspired from dominate html library and takes it further. It supports jinja templating and many more features that we expect from an html library. We can even create Custom Elements and Web Components in UiDOM.
## Installation
```cmd
> pip install uidom
```
## An Alpinejs toggle example
```python
#!/usr/bin/env python
# app.py
"""
This example should work as is.
"""
from fastapi import FastAPI
from uidom import Document
from uidom.dom import Component, script, title, div
from uidom.routing.fastapi import StreamingRoute
document = Document(body=[
script(src="https://unpkg.com/[email protected]/dist/cdn.min.js", defer=None, rel="prefetch")
])
api = FastAPI()
api.router.route_class = StreamingRoute
class ToggleButton(Component):
def render(self):
with div(x_data={'open': 'true'}) as toggle:
with div(x_on_click='open = !open'):
div("Opened", x_show="open"),
div("Closed", x_show="!open"),
return toggle
class App(Component):
def render(self, *args, **kwargs):
return document(*args, **kwargs, , head=title('App Page'))
@api.get('/')
def index():
return App(ToggleButton())
```
## A Jinja template example
```python
from uidom.dom import nav, ul, For, li, a, Var, JinjaElement
from collections import namedtuple as nt
class Nav(JinjaElement):
def render(self):
return nav(
ul(
For(
"item in menu_items",
li(a(Var("item.name"), href=Var("item.link"))),
)
)
)
# or we can write Jinja Element directly
Nav = lambda: JinjaElement(nav(ul(For("item in menu_items", li(a(Var("item.name"), href=Var("item.link")))))))
nav_bar = Nav()
menu_url = nt("menu_url", "name link")
# nav_bar element is a jinja template and has an internal representation as follows
```
```html
-
{{ item.name }}
{% for item in menu_items %}
{% endfor %}
```
```python
# now we can use nav_bar just like we use jinja templates and render it as follows
nav_bar(
menu_items=[
menu_url("Home", r"\home.html"),
menu_url("About", r"\about.html"),
menu_url("Contact Us", r"\contact_us.html"),
]
)
# it creates an element as follows
```
```html
```
## using markdown with uidom elements
```python
from uidom.dom import MarkdownElement
em_text = MarkdownElement("*hello world*")
print(em_text)
# it returns following string
```
```html
hello world
```
```python
# MarkdownElement can be used as follows too
class HelloWorld(MarkdownElement):
def render(self):
return "*hello world*"
# now HelloWorld instance gives the same
# output
print(HelloWorld())
```
```html
hello world
```
## using raw html with uidom elements
```python
from uidom.dom import *
class Modal(Component):
def render(self, *args, **kwargs):
return '''
Login
Confirm
Confirm
Cancel
```
## LICENSE
### this library is licensed under MIT (MIT-LICENSE)