add basic HTML serializer for header and footer

dash_html_components/__init__.py

@@ -2,6 +2,7 @@
 import dash as _dash
 import sys as _sys
 from .version import __version__
+from ._to_html5 import _to_html5
 
 _current_path = _os.path.dirname(_os.path.abspath(__file__))
 
@@ -24,3 +25,4 @@
 for component in _components:
     setattr(_this_module, component.__name__, component)
     setattr(component, '_js_dist', _js_dist)
+    setattr(component, 'to_html5', _to_html5)

dash_html_components/_to_html5.py

@@ -0,0 +1,65 @@
+import collections
+from dash.development.base_component import Component
+import re
+
+_VOID_ELEMENTS = [
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen',
+    'link', 'meta', 'param', 'source', 'track', 'wbr'
+]
+
+_CAMELCASE_REGEX = re.compile('([a-z0-9])([A-Z])')
+
+
+def _camel_case_to_css_case(name):
+    return _CAMELCASE_REGEX.sub(r'\1-\2', name).lower()
+
+
+def _attribute(name, value):
+    if name == 'className':
+        return ('class', value,)
+    elif name == 'style':
+        # Dash CSS is camel-cased but CSS is hyphenated
+        # convert e.g. fontColor to font-color
+        inline_style = '; '.join([
+            '='.join([_camel_case_to_css_case(k), v])
+            for (k, v) in value.iteritems()
+        ])
+        return (name, inline_style,)
+    else:
+        return (name, value,)
+
+
+def _to_html5(self):
+    def __to_html5(component):
+        if not isinstance(component, Component):
+            return str(component)
+        component_type = component._type.lower()
+
+        children = ''
+        if component_type not in _VOID_ELEMENTS:
+            children = getattr(component, 'children', '')
+            if isinstance(children, Component):
+                children = __to_html5(children)
+            elif isinstance(children, collections.MutableSequence):
+                children = '\n'.join([__to_html5(child) for child in children])
+            else:
+                children = str(children)
+            if children != '':
+                children = '\n' + children
+
+        closing = ''
+        if component_type not in _VOID_ELEMENTS:
+            closing = '\n</{}>'.format(component_type)
+
+        return '<{type}{properties}>{children}{closing}'.format(
+            type=component_type,
+            properties=''.join([
+                ' {}="{}"'.format(
+                    _attribute(p, getattr(component, p)))
+                for p in component._prop_names
+                if (hasattr(component, p) and p is not 'children')
+            ]),
+            children=children,
+            closing=closing)
+
+    return __to_html5(self)

tests/test_dash_html_components.py

@@ -39,3 +39,77 @@ def test_sample_items(self):
         self.assertEqual(
             layout._namespace, 'dash_html_components'
         )
+
+    def test_to_html5(self):
+        test_cases = [
+            {
+                'name': 'None Children',
+                'input': html.Div(),
+                'output': '<div></div>'
+            },
+            {
+                'name': 'Text Children',
+                'input': html.Script('alert'),
+                'output': '<script>alert</script>'
+            },
+            {
+                'name': 'Numerical Children',
+                'input': html.Div(3),
+                'output': '<div>3</div>'
+            },
+            {
+                'name': 'Single Attribute',
+                'input': html.Script('alert', type='text/javascript'),
+                'output': '<script type="text/javascript">alert</script>'
+            },
+            {
+                'name': 'Multiple Attributes',
+                'input': html.A(href='codepen', target='_blank'),
+                'output': '<a href="codepen" target="_blank"></a>'
+            },
+            {
+                'name': 'Void Elements',
+                'input': html.Link(rel='stylesheet', type='text/css'),
+                'output': '<link rel="stylesheet" type="text/css">'
+            },
+            {
+                'name': 'Style',
+                'input': html.Div(style={'fontSize': '15px', 'color': 'blue'}),
+                'output': '<div style="font-size: 15px; color: blue"></div>'
+            },
+            {
+                'name': 'className',
+                'input': html.Div(className='container'),
+                'output': '<div class="container"></div>'
+            },
+            {
+                'name': 'Nested Children',
+                'input': html.Div([
+                    3,
+                    html.H1('header'),
+                    html.Div(),
+                    html.Div(
+                        html.P([
+                            html.Img(src='imgur', className='full-bleed')
+                        ])
+                    )
+                ], className='parent'),
+                'output': '\n'.join([
+                    '<div class="parent">',
+                    '3',
+                    '<h1>header</h1>',
+                    '<div></div>',
+                    '<div>',
+                    '<p>',
+                    '<img src="imgur" class="full-bleed">'
+                    '</p>',
+                    '</div>',
+                    '</div>'
+                ])
+            }
+        ]
+        for test_case in test_cases:
+            self.assertEqual(
+                test_case['input'].to_html5(),
+                test_case['output']
+            )