"))
39 | b = dash_to_dict(html.Div([html.Div(["hi"])]))
40 | assert a == b
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023, Najeem Muhammed
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/.github/workflows/python-pytest.yml:
--------------------------------------------------------------------------------
1 | # This workflow will install Python dependencies, run tests and lint with a variety of Python versions
2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-python
3 |
4 | name: Python package
5 |
6 | on:
7 | push:
8 | branches: [ "main" ]
9 | pull_request:
10 | branches: [ "main" ]
11 |
12 | jobs:
13 | build:
14 |
15 | runs-on: ubuntu-latest
16 | strategy:
17 | fail-fast: false
18 | matrix:
19 | python-version: ["3.8", "3.9", "3.10"]
20 |
21 | steps:
22 | - uses: actions/checkout@v3
23 | - name: Set up Python ${{ matrix.python-version }}
24 | uses: actions/setup-python@v3
25 | with:
26 | python-version: ${{ matrix.python-version }}
27 | - name: Install dependencies
28 | run: |
29 | python -m pip install --upgrade pip
30 | python -m pip install flake8 pytest
31 | pip install .
32 | if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
33 | - name: Lint with flake8
34 | run: |
35 | # stop the build if there are Python syntax errors or undefined names
36 | flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
37 | # exit-zero treats all errors as warnings. The GitHub editor is 127 chars wide
38 | flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
39 | - name: Test with pytest
40 | run: |
41 | pytest
42 |
--------------------------------------------------------------------------------
/docs/_src/_templates/custom-module-template.rst:
--------------------------------------------------------------------------------
1 | {{ fullname | escape | underline}}
2 |
3 | .. automodule:: {{ fullname }}
4 |
5 | {% block attributes %}
6 | {% if attributes %}
7 | .. rubric:: Module attributes
8 |
9 | .. autosummary::
10 | :toctree:
11 | {% for item in attributes %}
12 | {{ item }}
13 | {%- endfor %}
14 | {% endif %}
15 | {% endblock %}
16 |
17 | {% block functions %}
18 | {% if functions %}
19 | .. rubric:: {{ _('Functions') }}
20 |
21 | .. autosummary::
22 | :toctree:
23 | :nosignatures:
24 | {% for item in functions %}
25 | {{ item }}
26 | {%- endfor %}
27 | {% endif %}
28 | {% endblock %}
29 |
30 | {% block classes %}
31 | {% if classes %}
32 | .. rubric:: {{ _('Classes') }}
33 |
34 | .. autosummary::
35 | :toctree:
36 | :template: custom-class-template.rst
37 | :nosignatures:
38 | {% for item in classes %}
39 | {{ item }}
40 | {%- endfor %}
41 | {% endif %}
42 | {% endblock %}
43 |
44 | {% block exceptions %}
45 | {% if exceptions %}
46 | .. rubric:: {{ _('Exceptions') }}
47 |
48 | .. autosummary::
49 | :toctree:
50 | {% for item in exceptions %}
51 | {{ item }}
52 | {%- endfor %}
53 | {% endif %}
54 | {% endblock %}
55 |
56 | {% block modules %}
57 | {% if modules %}
58 | .. autosummary::
59 | :toctree:
60 | :template: custom-module-template.rst
61 | :recursive:
62 | {% for item in modules %}
63 | {{ item }}
64 | {%- endfor %}
65 | {% endif %}
66 | {% endblock %}
67 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # HTML Files
2 | *.htm*
3 | # Byte-compiled / optimized / DLL files
4 | __pycache__/
5 | *.py[cod]
6 | *$py.class
7 |
8 | # C extensions
9 | *.so
10 |
11 | # Distribution / packaging
12 | .Python
13 | build/
14 | develop-eggs/
15 | dist/
16 | downloads/
17 | eggs/
18 | .eggs/
19 | lib/
20 | lib64/
21 | parts/
22 | sdist/
23 | var/
24 | wheels/
25 | *.egg-info/
26 | .installed.cfg
27 | *.egg
28 | MANIFEST
29 |
30 | # PyInstaller
31 | # Usually these files are written by a python script from a template
32 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
33 | *.manifest
34 | *.spec
35 |
36 | # Installer logs
37 | pip-log.txt
38 | pip-delete-this-directory.txt
39 |
40 | # Unit test / coverage reports
41 | htmlcov/
42 | .tox/
43 | .coverage
44 | .coverage.*
45 | .cache
46 | nosetests.xml
47 | coverage.xml
48 | *.cover
49 | .hypothesis/
50 | .pytest_cache/
51 |
52 | # Translations
53 | *.mo
54 | *.pot
55 |
56 | # Django stuff:
57 | *.log
58 | local_settings.py
59 | db.sqlite3
60 |
61 | # Flask stuff:
62 | instance/
63 | .webassets-cache
64 |
65 | # Scrapy stuff:
66 | .scrapy
67 |
68 | # Sphinx documentation
69 | docs/_build/
70 |
71 | # PyBuilder
72 | target/
73 |
74 | # Jupyter Notebook
75 | .ipynb_checkpoints
76 |
77 | # pyenv
78 | .python-version
79 |
80 | # celery beat schedule file
81 | celerybeat-schedule
82 |
83 | # SageMath parsed files
84 | *.sage.py
85 |
86 | # Environments
87 | .env
88 | .venv
89 | env/
90 | venv/
91 | ENV/
92 | env.bak/
93 | venv.bak/
94 |
95 | # Spyder project settings
96 | .spyderproject
97 | .spyproject
98 |
99 | # Rope project settings
100 | .ropeproject
101 |
102 | # mkdocs documentation
103 | /site
104 |
105 | # mypy
106 | .mypy_cache/
107 |
--------------------------------------------------------------------------------
/examples/markdown_to_dash.py:
--------------------------------------------------------------------------------
1 | # You'll have to install markdownit to run this example
2 | # pip install markdown-it-py[plugins]
3 | from dash import Dash, html, dcc
4 | from html2dash import html2dash
5 | import dash_mantine_components as dmc
6 | from markdown_it import MarkdownIt
7 | from mdit_py_plugins.attrs.index import attrs_block_plugin, attrs_plugin
8 | from mdit_py_plugins.container.index import container_plugin
9 | from mdit_py_plugins.admon.index import admon_plugin
10 | from functools import partial
11 | from dash_iconify import DashIconify
12 |
13 | md = (
14 | MarkdownIt()
15 | .enable("table")
16 | .use(attrs_block_plugin)
17 | .use(attrs_plugin)
18 | .use(container_plugin, "container")
19 | .use(container_plugin, "stack")
20 | .use(admon_plugin)
21 | )
22 | h = md.render(
23 | """
24 | # Hello World
25 | This is a paragraph.
26 |
27 | {#subtitle}
28 | ## This is a subtitle with an ID
29 | **Bold text** and *italic text*.
30 |
31 |
32 | ## This is a table
33 |
34 | {striped=True withBorder=True}
35 | | Name | Age |
36 | | ---- | --- |
37 | | John | 30 |
38 | | Jane | 28 |
39 |
40 | {#my-list}
41 | ## This is a list
42 | - Item 1
43 | - Item 2
44 | - Item 3
45 |
46 | ## This is a code block
47 |
48 | {language=python withLineNumbers=True}
49 | ```python
50 | if __name__ == "__main__":
51 | print("Hello World")
52 | ```
53 |
54 | ## This is a link
55 | [Click here](https://google.com)
56 |
57 | ## This is a blockquote
58 | > This is a blockquote
59 |
60 | ## This is a horizontal rule
61 | ---
62 |
63 | {p=xl fluid=True}
64 | :::: container
65 | This is a container
66 |
67 | {align=center}
68 | ::: stack
69 | Hello there
70 |
71 | Another paragraph
72 | :::
73 | ::::
74 | """
75 | )
76 |
77 | def custom_div(children, **kwargs):
78 | if "className" in kwargs and kwargs["className"] == "container":
79 | return dmc.Container(children, **kwargs)
80 | elif "className" in kwargs and kwargs["className"] == "stack":
81 | return dmc.Stack(children, **kwargs)
82 | return html.Div(children, **kwargs)
83 |
84 | modules = [dmc, html, dcc]
85 |
86 | element_map = {
87 | "h1": dmc.Title,
88 | "h2": partial(dmc.Title, order=2),
89 | "p": partial(dmc.Text, weight=500),
90 | "img": dmc.Image,
91 | "ul": partial(dmc.List, icon=dmc.ThemeIcon(DashIconify(icon="mdi:check"))),
92 | "li": dmc.ListItem,
93 | "code": dmc.Prism,
94 | "div": custom_div,
95 | }
96 |
97 | app = Dash(__name__)
98 |
99 |
100 | app.layout = html2dash(h, module_list=modules, element_map=element_map)
101 |
102 | if __name__ == "__main__":
103 | app.run_server(debug=True)
104 |
--------------------------------------------------------------------------------
/docs/_src/conf.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python3
2 | # -*- coding: utf-8 -*-
3 | from pathlib import Path
4 | import sys
5 | sys.path.append(str(Path(__file__).parent.parent.parent))
6 | from html2dash import __version__
7 |
8 | __title__ = "html2dash"
9 | __author__ = "Najeem Muhammed"
10 | __description__ = "Convert an html layout to a dash layout"
11 |
12 | from datetime import datetime
13 |
14 | tls_verify = False
15 | extensions = [
16 | "sphinx.ext.autodoc",
17 | "sphinx.ext.autosummary",
18 | "sphinx.ext.napoleon",
19 | "sphinx.ext.doctest",
20 | "sphinx.ext.intersphinx",
21 | "sphinx.ext.todo",
22 | "sphinx.ext.coverage",
23 | "sphinx.ext.mathjax",
24 | "sphinx.ext.viewcode",
25 | "sphinx_click",
26 | ]
27 |
28 | autosummary_generate = True
29 | autoclass_content = "both"
30 | add_module_names = False
31 | autosummary_imported_members = True
32 | autodoc_default_options = {
33 | "members": True,
34 | }
35 |
36 |
37 | # Add any paths that contain templates here, relative to this directory.
38 | templates_path = ["_templates"]
39 |
40 | # The suffix(es) of source filenames.
41 | # You can specify multiple suffix as a list of string:
42 | #
43 | # source_suffix = ['.rst', '.md']
44 | source_suffix = ".rst"
45 |
46 | # The master toctree document.
47 | master_doc = "index"
48 |
49 | # General information about the project.
50 | project = __title__
51 | copyright = f"{datetime.now().year}, {__author__}"
52 | author = __author__
53 |
54 | version = __version__
55 | # The full version, including alpha/beta/rc tags.
56 | release = __version__
57 |
58 | exclude_patterns = ["_build", "**.ipynb_checkpoints"]
59 |
60 | pygments_style = "sphinx"
61 |
62 | todo_include_todos = True
63 |
64 |
65 | html_theme = "furo"
66 | html_title = f"{__title__} v{__version__}"
67 | html_logo = ""
68 | html_theme_options = {
69 | "navigation_with_keys": True,
70 | }
71 | html_static_path = ["_static"]
72 | htmlhelp_basename = f"{__title__}doc"
73 | latex_elements = {
74 | }
75 | latex_documents = [
76 | (
77 | master_doc,
78 | f"{__title__}.tex",
79 | f"{__title__} Documentation",
80 | __author__,
81 | "manual",
82 | ),
83 | ]
84 | man_pages = [
85 | (master_doc, __title__, f"{__title__} Documentation", [author], 1)]
86 | texinfo_documents = [
87 | (
88 | master_doc,
89 | __title__,
90 | f"{__title__} Documentation",
91 | author,
92 | __title__,
93 | __description__,
94 | "Miscellaneous",
95 | ),
96 | ]
97 | intersphinx_mapping = {
98 | "python": ("https://docs.python.org/3/", None),
99 | }
100 |
101 |
102 | # Napoleon settings
103 | napoleon_google_docstring = True
104 | napoleon_numpy_docstring = True
105 | napoleon_include_init_with_doc = False
106 | napoleon_include_private_with_doc = False
107 | napoleon_include_special_with_doc = True
108 | napoleon_use_admonition_for_examples = False
109 | napoleon_use_admonition_for_notes = False
110 | napoleon_use_admonition_for_references = False
111 | napoleon_use_ivar = False
112 | napoleon_use_param = True
113 | napoleon_use_rtype = True
114 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # html2dash
2 |
3 | Write your dash layout in html/xml form.
4 |
5 | ## Why does this package exist?
6 |
7 | Dash is a great framework for building web apps using only python (no html/css/
8 | javascript). If you have used dash long enough, you must have noticed some of the
9 | following.
10 |
11 | - For larger layouts, the python code becomes very long and hard to read.
12 | - Sometimes I get the html form of a class (like pandas dataframe), but I
13 | cannot easily display that in dash.
14 | - Use html from markdown parsers
15 | - Cannot copy paste html code from examples on the web.
16 | - Cannot use tools like emmet to generate html code.
17 |
18 | html2dash solves these problems by allowing you to write your dash layout in
19 | html/xml form. It converts the html/xml code to equivalent dash layout code.
20 |
21 | ## Installation
22 |
23 | ```bash
24 | pip install html2dash
25 | ```
26 |
27 | ## Examples
28 |
29 | Here is a simple example:
30 |
31 | ```python
32 | from dash import Dash
33 | from html2dash import html2dash
34 |
35 | app = Dash(__name__)
36 |
37 | layout = """
38 |
39 |
Hello World
40 |
This is a paragraph
41 |
42 |
Subheading
43 |
Another paragraph
44 |
45 |
46 | """
47 |
48 | app.layout = html2dash(layout)
49 | ```
50 |
51 | You can define attributes like `id`, `class`, `style` etc. These
52 | will be converted to equivalent dash attributes. For example:
53 |
54 | ```python
55 | layout = """
56 |
57 |
Hello World
58 |
This is a paragraph
59 |
60 |
Subheading
61 |
Another paragraph
62 |
63 |
64 | """
65 | ```
66 |
67 | This is equivalent to:
68 |
69 | ```python
70 | layout = html.Div(
71 | id="my-div",
72 | className="my-class",
73 | style={"color": "red"},
74 | children=[
75 | html.H1("Hello World"),
76 | html.P("This is a paragraph"),
77 | html.Div(
78 | children=[
79 | html.H2("Subheading"),
80 | html.P("Another paragraph"),
81 | ]
82 | )
83 | ]
84 | )
85 | ```
86 |
87 | You can use any html tag that appears in `dash.html` module. If `html2dash` does
88 | not find the tag in `dash.html`, it will search in the `dash.dcc` module.
89 |
90 | ```python
91 | from html2dash import html2dash
92 |
93 | layout = html2dash("""
94 |
95 |
Hello World
96 |
This is a paragraph
97 |
98 |
99 | """)
100 | ```
101 |
102 | Here, `Input` is not found in `dash.html` module. So, it will search in `dash.dcc`
103 | module and find `dcc.Input` and convert it to `dcc.Input(id="my-input", value="Hello World")`.
104 |
105 | The order in which `html2dash` searches for tags is:
106 |
107 | 1. `dash.html`
108 | 2. `dash.dcc`
109 |
110 | You can change the list of modules that `html2dash` searches for tags by
111 | passing in `module_list` argument.
112 |
113 | ```python
114 | from dash import Dash, html, dcc
115 | from html2dash import html2dash
116 | import dash_mantine_components as dmc
117 |
118 | modules = [html, dcc, dmc]
119 |
120 | layout = html2dash("""
121 |
122 |
Hello World
123 |
This is a paragraph
124 |
125 | Default
126 | Outline
127 |
128 |
129 | """, module_list=modules)
130 | ```
131 |
132 | You can also map html tags to dash components. For example, if you dont want to
133 | use `` tag, you can map it to `DashIconify` as follows.
134 |
135 | ```python
136 | from html2dash import html2dash
137 | from dash_iconify import DashIconify
138 |
139 | element_map = {"icon": DashIconify}
140 |
141 | layout = html2dash("""
142 |
143 |
Icon example
144 |
145 |
146 | """, element_map=element_map)
147 | ```
148 |
149 | The `element_map` is a dictionary that maps html tags to dash components.
150 | The `element_map` will be searched first before searching in the `module_list`.
151 |
152 | The mapped component does not have to be a dash component. It can be any
153 | function that takes `children` and `**kwargs` as arguments and returns a dash
154 | component.
155 |
156 | ```python
157 | from html2dash import html2dash
158 |
159 | def my_component(children, **kwargs):
160 | return html.Div(children=children, **kwargs)
161 |
162 | element_map = {"my-component": my_component}
163 |
164 | layout = html2dash("""
165 |
166 |
My component
167 |
168 |
My component
169 |
This is my component
170 |
171 |
172 |
173 |
My component 2
174 |
This is my component 2
175 |
176 |
177 | """, element_map=element_map)
178 | ```
179 |
180 | ## Example usecase: Display a pandas dataframe in dash
181 |
182 | Since pandas dataframes come with a `to_html` method, you can easily display
183 | them in dash using `html2dash`.
184 |
185 | ```python
186 | import pandas as pd
187 | from html2dash import html2dash
188 |
189 | df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
190 | layout = html2dash(df.to_html())
191 | ```
192 |
193 | If you want to use `dash_mantine_components` to display the dataframe, you can
194 | do the following.
195 |
196 | ```python
197 | import pandas as pd
198 | from html2dash import html2dash
199 | import dash_mantine_components as dmc
200 |
201 | #
would have been mapped to dash.html.Table
202 | # But, we want to use dmc.Table instead.
203 | element_map = {"table": dmc.Table}
204 |
205 | df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
206 | layout = html2dash(df.to_html(), element_map=element_map)
207 | ```
208 |
209 | `html2dash` can handle multi-index dataframes as well.
210 |
211 | ```python
212 | import pandas as pd
213 | from html2dash import html2dash, settings
214 | import dash_mantine_components as dmc
215 |
216 | df = pd.DataFrame(
217 | {
218 | ("a", "b"): [1, 2, 3],
219 | ("a", "c"): [4, 5, 6],
220 | ("d", "e"): [7, 8, 9],
221 | }
222 | )
223 |
224 | element_map = {"table": dmc.Table}
225 |
226 | layout = html2dash(df.to_html(), element_map=element_map)
227 | ```
228 |
229 | ## Case sensitivity of html tags
230 |
231 | html tags are case insensitive. So, `
` and `
` are equivalent. But,
232 | html2dash is partly case sensitive. For any tag, it first tries to find the tag
233 | with the given case. If it does not find the tag, it tries to find the tag with
234 | the first letter capitalized.
235 |
236 | For example, if you have the following layout:
237 |
238 | ```python
239 | layout = html2dash("""
240 |
241 |
Hello World
242 |
This is a paragraph
243 |
244 |
245 | """)
246 | ```
247 |
248 | In the above, all tags except `input` are found in `dash.html` module.
249 | And for input tag, the following will be the sequence of searches:
250 |
251 | 1. Search for `input` in `dash.html` >> Not found
252 | 2. Search for `Input` in `dash.html` >> Not found
253 | 3. Search for `input` in `dash.dcc` >> Not found
254 | 4. Search for `Input` in `dash.dcc` >> Found
--------------------------------------------------------------------------------
/html2dash/html2dash.py:
--------------------------------------------------------------------------------
1 | """html2dash
2 |
3 | Converts HTML to Dash components.
4 |
5 | Usage:
6 | from html2dash import html2dash
7 | app.layout = html2dash(Path("layout.html").read_text())
8 |
9 | """
10 | from __future__ import annotations
11 | from typing import Mapping
12 | from bs4 import BeautifulSoup, element, Comment
13 | from dash import html, dcc
14 | import re
15 | import logging
16 | import json
17 |
18 | logger = logging.getLogger(__name__)
19 |
20 | ATTRIBUTE_MAP = {
21 | "autocomplete": "autoComplete",
22 | "autofocus": "autoFocus",
23 | "class": "className",
24 | "colspan": "colSpan",
25 | "for": "htmlFor",
26 | "maxlength": "maxLength",
27 | "minlength": "minLength",
28 | "novalidate": "noValidate",
29 | "readonly": "readOnly",
30 | "rowspan": "rowSpan",
31 | "tabindex": "tabIndex",
32 | }
33 |
34 |
35 | def html2dash(
36 | html_str: str,
37 | module_list: list | None = None,
38 | element_map: Mapping[str, object] | None = None,
39 | parent_div: bool = True,
40 | on_missing_element: str = "warn",
41 | on_missing_attribute: str = "warn",
42 | ) -> html.Div | list[object]:
43 | """Convert the HTML string to dash components.
44 |
45 | Args:
46 | html_str (str): The HTML string to convert.
47 | module_list (list, optional): A list of modules to search for elements.
48 | Defaults to [html, dcc].
49 | element_map (dict, optional): A dictionary mapping HTML elements to dash
50 | components. Defaults to {}.
51 | parent_div (bool, optional): Whether to enclose the converted Dash components
52 | on_missing_element (str, optional): What to do when an element is not found.
53 | Defaults to "warn". Can be "warn", "raise", or "ignore".
54 | on_missing_attribute (str, optional): What to do when an attribute is not found.
55 | Defaults to "warn". Can be "warn", "raise", or "ignore".
56 |
57 | Returns:
58 | html.Div: The converted Dash components enclosed inside a html.Div object.
59 | """
60 | html_str_iter = f"{html_str}"
61 | soup = BeautifulSoup(html_str_iter, "xml")
62 | if soup.body is not None:
63 | soup = soup.body
64 | if module_list is None:
65 | module_list = [html, dcc]
66 | if element_map is None:
67 | element_map = {}
68 | settings = {
69 | "module-list": module_list,
70 | "element-map": element_map,
71 | "on-missing-element": on_missing_element,
72 | "on-missing-attribute": on_missing_attribute,
73 | }
74 | children = [parse_element(child, **settings) for child in soup.children] # type: ignore
75 | if parent_div:
76 | return html.Div(children=children)
77 | return children
78 |
79 |
80 | def parse_element(tag: element.Tag, **settings) -> object:
81 | """Parse the HTML element and return the Dash component.
82 |
83 | Args:
84 | tag (element.Tag): The HTML element to parse.
85 | settings (dict): The settings to use.
86 |
87 | Returns:
88 | object: The Dash component.
89 | """
90 | if tag is None or isinstance(tag, Comment):
91 | return None
92 | elif isinstance(tag, element.NavigableString):
93 | text = str(tag)
94 | if text.strip():
95 | return text
96 | return None
97 | dash_element = None
98 | for module in settings.get("module-list", []):
99 | mapped_element = settings["element-map"].get(tag.name)
100 | if mapped_element is not None:
101 | dash_element = mapped_element
102 | break
103 | elif hasattr(module, tag.name):
104 | dash_element = getattr(module, tag.name)
105 | break
106 | elif hasattr(module, tag.name.title()):
107 | dash_element = getattr(module, tag.name.title())
108 | break
109 | if not dash_element:
110 | if settings.get("on-missing-element") == "warn":
111 | logger.warning(
112 | f"Could not find the element '{tag.name}'" f" in any of the modules."
113 | )
114 | elif settings.get("on-missing-element") == "raise":
115 | raise ValueError(
116 | f"Could not find the element '{tag.name}'" f" in any of the modules."
117 | )
118 | return None
119 | attrs = {k: v for k, v in tag.attrs.items()}
120 | attrs = fix_attrs(attrs)
121 | children = []
122 | for child in tag.children:
123 | child_object = parse_element(child, **settings) # type: ignore
124 | if child_object is not None:
125 | children.append(child_object)
126 | if children:
127 | attrs["children"] = children
128 | while True:
129 | try:
130 | return dash_element(**attrs)
131 | except TypeError as e:
132 | match = re.search(
133 | r"received an unexpected keyword argument: `(.*)`", str(e)
134 | )
135 | if match is None:
136 | raise e
137 | attrs.pop(match.group(1))
138 | if settings["on-missing-attribute"] == "warn":
139 | logger.warning(
140 | f"Removed the attribute '{match.group(1)}' from the element '{tag.name}'"
141 | f" because it was not valid."
142 | )
143 | elif settings.get("on-missing-attribute") == "raise":
144 | raise ValueError(
145 | f"Unrecognized attribute '{match.group(1)}' in the element '{tag.name}'"
146 | )
147 |
148 |
149 | def fix_attrs(attrs: dict) -> dict:
150 | """Fix the attributes to be valid Dash attributes.
151 |
152 | Args:
153 | attrs (dict): The attributes to fix.
154 |
155 | Returns:
156 | dict: The fixed attributes.
157 | """
158 | return_attrs = {}
159 | for k, v in attrs.items():
160 | if v in ["true", "false"]:
161 | v = eval(v.title())
162 | if k == "style":
163 | return_attrs[k] = style_str_to_dict(v)
164 | elif k in ATTRIBUTE_MAP:
165 | return_attrs[ATTRIBUTE_MAP[k]] = v
166 | elif k.startswith("data-") or k.startswith("aria-"):
167 | return_attrs[k] = v
168 | elif isinstance(v, list):
169 | return_attrs[k] = " ".join(v)
170 | else:
171 | if isinstance(v, str) and any([s in v for s in ["{", "["]]):
172 | try:
173 | return_attrs[fix_hyphenated_attr(k)] = json.loads(v)
174 | except Exception:
175 | return_attrs[fix_hyphenated_attr(k)] = v
176 | else:
177 | return_attrs[fix_hyphenated_attr(k)] = v
178 | return return_attrs
179 |
180 |
181 | def fix_hyphenated_attr(attr: str) -> str:
182 | """Fix the hyphenated attribute to be camel case.
183 |
184 | Args:
185 | attr (str): The attribute to fix.
186 |
187 | Returns:
188 | str: The fixed attribute.
189 | """
190 | return re.sub(r"-(\w)", lambda m: m.group(1).upper(), attr)
191 |
192 |
193 | def style_str_to_dict(style_str: str) -> dict:
194 | """Convert the style string to a dictionary.
195 |
196 | Args:
197 | style_str (str): The style string to convert.
198 |
199 | Returns:
200 | dict: The converted style dictionary.
201 | """
202 | style_dict = {}
203 | for item in style_str.split(";"):
204 | if ":" in item:
205 | key, value = item.split(":")
206 | style_dict[fix_hyphenated_attr(key.strip())] = value.strip()
207 | return style_dict
208 |
--------------------------------------------------------------------------------
/examples/tabler.html:
--------------------------------------------------------------------------------
1 |
1168 | All icons come from the Tabler Icons set and are
1169 | MIT-licensed. Visit
1170 | tabler-icons.io, download any of the 4637 icons in SVG, PNG or React
1176 | and use them in your favourite design tools.
1177 |