Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pierxuy/html-to-dash
Convert HTML to dash format.
https://github.com/pierxuy/html-to-dash
dash dash-svg html svg
Last synced: about 1 month ago
JSON representation
Convert HTML to dash format.
- Host: GitHub
- URL: https://github.com/pierxuy/html-to-dash
- Owner: PierXuY
- License: apache-2.0
- Created: 2023-09-12T13:02:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-11T13:46:15.000Z (about 1 year ago)
- Last Synced: 2024-09-17T10:29:24.377Z (2 months ago)
- Topics: dash, dash-svg, html, svg
- Language: Python
- Homepage:
- Size: 84 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-to-dash
Convert HTML to dash format.
# Installation
`pip install html-to-dash`
# Examples
## Basic usage
```python
from html_to_dash import parse_html
element_str = """
"""
parse_html(element_str)
```
Print:
```
# Tags : Unsupported [svg] removed.
Result:
html.Div(
children=[
html.Div(
className="bg-gray-800",
style={"color": "red", "margin": "10px"},
children=[html.A(href="#", id="link1", children=["A"])],
),
html.Div(children=["text"]),
html.Div(
children=[
html.A(href="#", id="link1", children=["a1"]),
html.Span(children=["tail1"]),
html.A(href="#", id="link2", children=["a2"]),
html.Span(children=["tail2"]),
]
),
]
)
```
- By default, only tags in the dash.html module are supported.
- Tags and attributes are checked, and those that are not supported are automatically removed.
- The tags and attributes are case-insensitive.
- If the provided HTML string is unclosed, div will be automatically added as the root tag.
- The html, body, and head tags will be automatically removed without notification, as these tags may be automatically supplemented by the lxml module and are not supported in dash.
- The tail(Text after element's end tag, but before the next sibling element's start tag) will automatically be converted into the text of a span tag.
## Enable dash_svg
Use [dash-svg](https://github.com/stevej2608/dash-svg) module to render SVG tags.
```python
from html_to_dash import parse_html
element_str = """
"""
parse_html(element_str, enable_dash_svg=True)
```
Print:
```
Result:
dash_svg.Svg(
xmlns=" http://www.w3.org/2000/svg ",
version="1.1",
width="300",
height="300",
children=[
dash_svg.Rect(x="100", y="100", width="100", height="100", fill="#e74c3c"),
dash_svg.Polygon(points="100,100 200,100 150,50", fill="#c0392b"),
dash_svg.Polygon(points="200,100 200,200 250,150", fill="#f39c12"),
dash_svg.Polygon(points="100,100 150,50 150,150 100,200", fill="#f1c40f"),
dash_svg.Polygon(points="150,50 200,100 250,50 200,0", fill="#2ecc71"),
dash_svg.Polygon(points="100,200 150,150 200,200 150,250", fill="#3498db"),
],
)
```
- In the dash application, `import dash_svg` module will render normally.
- The dash_svg has higher priority than dash.html, but lower priority than extra module.
## Expanded usage
```python
from html_to_dash import parse_html
element_str = """
"""
extra_mod = [{"dcc": {"Input": ["id", "type", "placeholder", "aria-*"]}}]
def tag_attr_func(tag, items):
if tag == "Input":
k, v = items
if "-" in k:
return f'**{{"{k}": "{v}"}}'
parsed_ret = parse_html(
element_str,
tag_map={"svg": "img"},
skip_tags=['script'],
extra_mod=extra_mod,
tag_attr_func=tag_attr_func,
if_return=True,
)
print(parsed_ret)
```
Print:
```
# Tags : Unsupported [script] removed.
# Attrs: Unsupported [name] in dcc.Input removed.
html.Div(
children=[
dcc.Input(
type="text",
id="username",
**{"aria-label": "Enter your username"},
**{"aria-required": "true"}
),
html.Div(
className="bg-gray-800",
style={"color": "red", "margin": "10px"},
children=[html.A(href="#", id="link1", children=["A"])],
),
html.Div(children=["text"]),
html.Img(),
html.Div(children=[html.A(href="#", id="link2", children=["B"])]),
]
)
```
- The \* sign is supported as a wildcard, like data-\*, aria-\*.
- Both class and className can be handled correctly.
- In fact, attributes with the "-" symbol are processed by default, which is only used here as an example. Similarly, the style attribute can be handled correctly.
- If tag_map param is provided, will convert the corresponding tag names in the HTML based on the dict content before formal processing.
- Tag in skip_tags will remove itself and its text.The priority of tag_map is higher than skip_tags.
- Supports any custom module, not limited to HTML and DCC. Essentially, it is the processing of strings.
- Custom module prioritize in order and above the default dash.html module.
- The tag_attr_func param is a function that handle attribute formatting under the tag.
When adding quotation marks within a string, `double quotation marks` should be added to avoid the black module being unable to parse.
For example,`f'**{{"{k}": "{v}"}}'` instead of `f"**{{'{k}': '{v}'}}"`、`f'{k}="{v}"'` instead of `f"{k}='{v}'"`
- If the HTML structure is huge, set huge_tree to True.
# References
- https://github.com/mhowell86/convert-html-to-dash
- https://github.com/xhluca/convert-html-to-dash