Skip to content

Instantly share code, notes, and snippets.

@Archmonger

Archmonger/html_syntaxes.py

Last active February 14, 2025 00:46
Show Gist options
  • Save Archmonger/f6833cb0b0e2b85220202bff5b38e755 to your computer and use it in GitHub Desktop.
Save Archmonger/f6833cb0b0e2b85220202bff5b38e755 to your computer and use it in GitHub Desktop.
Download ZIP
Experimental syntaxes for writing HTML within Python
Raw
html_syntaxes.py
# type: ignore
# pylint: skip-file
# <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
# <div class="modal-dialog">
# <div class="modal-content">
# modal_header(title="Modal Title")
# modal_body()
# <div class="modal-footer">
# <hr>
# <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
# <button type="button" class="btn btn-primary">Save changes</button>
# </div>
# </div>
# </div>
# </div>
from idom import component, html
@component
def modal_header(title: str):
return title
@component
def modal_body():
return None
# --- ATTRIBUTE DICT (OLD) ---
html.div(
{
"class_name": "modal fade",
"id": "exampleModal",
"tab_index": "-1",
"aria_labeledby": "exampleModalLabel",
"aria_hidden": "true",
},
html.div(
{"class_name": "modal-dialog"},
html.div(
{"class_name": "modal-content"},
modal_header(title="Modal Title"),
modal_body(),
html.div(
{"class_name": "modal-footer"},
html.hr(),
[
html.button(
{
"type": "button",
"class_name": "btn btn-secondary",
"data_bs_dismiss": "modal",
"aria_label": "Close",
},
"Close",
),
html.button(
{
"type": "button",
"class_name": "btn btn-primary",
"data_bs_dismiss": "modal",
},
"Save Changes",
),
],
),
),
),
)
# --- ARG CHILDREN, KWARG ATTRIBUTES ---
html.div(
html.div(
html.div(
modal_header(title="Modal Title"),
modal_body(),
html.div(
html.hr(),
[
html.button(
"Close",
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
),
html.button(
"Save Changes",
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
),
],
class_name="modal-footer",
),
class_name="modal-content",
),
class_name="modal-dialog",
),
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
)
# --- BRACKET CHILDREN ---
html.div(
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
)[
html.div(class_name="modal-dialog")[
html.div(class_name="modal-content")[
modal_header(title="Modal Title"),
modal_body(),
html.div(class_name="modal-footer")[
html.hr(),
[
html.button(
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
)["Close"],
html.button(
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
)["Save Changes"],
],
],
]
]
]
# --- PARENTHESES CHILDREN ---
html.div(
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
)(
html.div(class_name="modal-dialog")(
html.div(class_name="modal-content")(
modal_header(title="Modal Title"),
modal_body(),
html.div(class_name="modal-footer")(
html.hr(),
[
html.button(
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
)("Close"),
html.button(
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
)("Save Changes"),
],
),
)
)
)
# --- BRACKET ONLY ---
html.div[
"class_name":"modal fade",
"id":"exampleModal",
"tab_index":"-1",
"aria_labeledby":"exampleModalLabel",
"aria_hidden":"true",
html.div[
"class_name":"modal-dialog",
html.div[
"class_name":"modal-content",
modal_header(title="Modal Title"),
modal_body(),
html.div[
"class_name":"modal-footer",
html.hr[],
[
html.button[
"type":"button",
"class_name":"btn btn-secondary",
"data_bs_dismiss":"modal",
"aria_label":"Close",
"Close",
],
html.button[
"type":"button",
"class_name":"btn btn-primary",
"data_bs_dismiss":"modal",
"Save Changes",
],
],
],
],
],
]
# --- CONTEXT MANAGERS ---
with html.div(
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
):
with html.div(class_name="modal-dialog"):
with html.div(class_name="modal-content"):
modal_header(title="Modal Title")
modal_body()
with html.div(class_name="modal-footer"):
html.hr()
[
html.button(
"Close",
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
),
html.button(
"Save Changes",
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
),
]
# --- CHIDLREN KEYWORD ---
html.div(
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
children=html.div(
class_name="modal-dialog",
children=html.div(
class_name="modal-content",
children=(
modal_header(title="Modal Title"),
modal_body(),
html.div(
class_name="modal-footer",
children=(
html.hr(),
[
html.button(
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
children="Close",
),
html.button(
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
children="Save Changes",
),
],
),
),
),
),
),
)
# --- CHIDLREN FUNCTION ---
html.div(
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
).children(
html.div(class_name="modal-dialog").children(
html.div(class_name="modal-content").children(
modal_header(title="Modal Title"),
modal_body(),
html.div(class_name="modal-footer").children(
html.hr(),
[
html.button(
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
).children("Close"),
html.button(
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
).children("Save Changes"),
],
),
)
)
)
# --- USER TAGGED BRACKET CHILDREN ---
html(
"div",
class_name="modal fade",
id="exampleModal",
tab_index="-1",
aria_labeledby="exampleModalLabel",
aria_hidden="true",
)[
html("div", class_name="modal-dialog")[
html("div", class_name="modal-content")[
modal_header(title="Modal Title"),
modal_body(),
html("div", class_name="modal-footer")[
html.hr(),
[
html(
"button",
type="button",
class_name="btn btn-secondary",
data_bs_dismiss="modal",
aria_label="Close",
)["Close"],
html(
"button",
type="button",
class_name="btn btn-primary",
data_bs_dismiss="modal",
)["Save Changes"],
],
],
]
]
]
# --- USER TAGGED ATTRIBUTE DICT ---
html(
"div",
{
"class_name": "modal fade",
"id": "exampleModal",
"tab_index": "-1",
"aria_labeledby": "exampleModalLabel",
"aria_hidden": "true",
},
html(
"div",
{"class_name": "modal-dialog"},
html(
"div",
{"class_name": "modal-content"},
modal_header(title="Modal Title"),
modal_body(),
html(
"div",
{"class_name": "modal-footer"},
html("hr"),
[
html(
"button",
{
"type": "button",
"class_name": "btn btn-secondary",
"data_bs_dismiss": "modal",
"aria_label": "Close",
},
"Close",
),
html(
"button",
{
"type": "button",
"class_name": "btn btn-primary",
"data_bs_dismiss": "modal",
},
"Save Changes",
),
],
),
),
),
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment