Support for wildcard attributes, implement data-* attribute

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
                     if (hasattr(arg, 'component_property') and
                             arg.component_property not in
-                            component.available_properties):
+                            component.available_properties and not
+                            any(arg.component_property.startswith(w) for w in
+                                component.available_wildcard_properties)):
                         raise exceptions.NonExistantPropException('''
                             Attempting to assign a callback with
                             the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
         # pylint: disable=super-init-not-called
         for k, v in list(kwargs.items()):
             # pylint: disable=no-member
-            if k not in self._prop_names:
+            k_in_propnames = k in self._prop_names
+            k_in_wildcards = any([k.startswith(w)
+                                  for w in
+                                  self._valid_wildcard_attributes])
+            if not k_in_propnames and not k_in_wildcards:
                 raise TypeError(
                     'Unexpected keyword argument `{}`'.format(k) +
                     '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
             setattr(self, k, v)
 
     def to_plotly_json(self):
+        # Add normal properties
+        props = {
+            p: getattr(self, p)
+            for p in self._prop_names  # pylint: disable=no-member
+            if hasattr(self, p)
+        }
+        # Add the wildcard properties data-* and aria-*
+        props.update({
+            k: getattr(self, k)
+            for k in self.__dict__
+            if any(k.startswith(w) for w in
+                   self._valid_wildcard_attributes)  # pylint:disable=no-member
+        })
         as_json = {
-            'props': {p: getattr(self, p)
-                      for p in self._prop_names  # pylint: disable=no-member
-                      if hasattr(self, p)},
+            'props': props,
             'type': self._type,  # pylint: disable=no-member
             'namespace': self._namespace  # pylint: disable=no-member
         }
@@ -225,8 +240,10 @@ def __init__(self, {default_argtext}):
         self._prop_names = {list_of_valid_keys}
         self._type = '{typename}'
         self._namespace = '{namespace}'
+        self._valid_wildcard_attributes = {list_of_valid_wildcard_attr_prefixes}
         self.available_events = {events}
         self.available_properties = {list_of_valid_keys}
+        self.available_wildcard_properties = {list_of_valid_wildcard_attr_prefixes}
 
         for k in {required_args}:
             if k not in kwargs:
@@ -236,15 +253,23 @@ def __init__(self, {default_argtext}):
         super({typename}, self).__init__({argtext})
 
     def __repr__(self):
-        if(any(getattr(self, c, None) is not None for c in self._prop_names
-               if c is not self._prop_names[0])):
-
-            return (
-                '{typename}(' +
-                ', '.join([c+'='+repr(getattr(self, c, None))
-                           for c in self._prop_names
-                           if getattr(self, c, None) is not None])+')')
-
+        if(any(getattr(self, c, None) is not None
+               for c in self._prop_names
+               if c is not self._prop_names[0])
+           or any(getattr(self, c, None) is not None
+                  for c in self.__dict__.keys()
+                  if any(c.startswith(wc_attr)
+                  for wc_attr in self._valid_wildcard_attributes))):
+            props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+                                      for c in self._prop_names
+                                      if getattr(self, c, None) is not None])
+            wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+                                      for c in self.__dict__.keys()
+                                      if any([c.startswith(wc_attr)
+                                      for wc_attr in
+                                      self._valid_wildcard_attributes])])
+            return ('{typename}(' + props_string +
+                   (', ' + wilds_string if wilds_string != '' else '') + ')')
         else:
             return (
                 '{typename}(' +
@@ -253,6 +278,8 @@ def __repr__(self):
 
     filtered_props = reorder_props(filter_props(props))
     # pylint: disable=unused-variable
+    list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+    # pylint: disable=unused-variable
     list_of_valid_keys = repr(list(filtered_props.keys()))
     # pylint: disable=unused-variable
     docstring = create_docstring(
@@ -273,11 +300,9 @@ def __repr__(self):
 
     required_args = required_props(props)
 
-    d = c.format(**locals())
-
     scope = {'Component': Component}
     # pylint: disable=exec-used
-    exec(d, scope)
+    exec(c.format(**locals()), scope)
     result = scope[typename]
     return result
 
@@ -366,6 +391,27 @@ def parse_events(props):
     return events
 
 
+def parse_wildcards(props):
+    """
+    Pull out the wildcard attributes from the Component props
+
+    Parameters
+    ----------
+    props: dict
+        Dictionary with {propName: propMetadata} structure
+
+    Returns
+    -------
+    list
+        List of Dash valid wildcard prefixes
+    """
+    list_of_valid_wildcard_attr_prefixes = []
+    for wildcard_attr in ["data-*", "aria-*"]:
+        if wildcard_attr in props.keys():
+            list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+    return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
     """
     If "children" is in props, then move it to the

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+# dash-html-components==0.4.0
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
         )
         """
 
+    def test_to_plotly_json_with_wildcards(self):
+        c = Component(id='a', **{'aria-expanded': 'true',
+                                 'data-toggle': 'toggled',
+                                 'data-none': None})
+        c._prop_names = ('id',)
+        c._type = 'MyComponent'
+        c._namespace = 'basic'
+        self.assertEqual(
+            c.to_plotly_json(),
+            {'namespace': 'basic',
+             'props': {
+                'aria-expanded': 'true',
+                'data-toggle': 'toggled',
+                'data-none': None,
+                'id': 'a',
+              },
+             'type': 'MyComponent'}
+        )
+
     def test_len(self):
         self.assertEqual(len(Component()), 0)
         self.assertEqual(len(Component(children='Hello World')), 1)

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
                 "description": "Children",
                 "required": false
             },
+            "data-*": {
+                "type": {
+                    "name": "string"
+                },
+                "description": "Wildcard data",
+                "required": false
+            },
+            "aria-*": {
+                "type": {
+                    "name": "string"
+                },
+                "description": "Wildcard aria",
+                "required": false
+            },
             "bar": {
                 "type": {
                     "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
             'foo': 'Hello World',
             'bar': 'Lah Lah',
             'baz': 'Lemons',
+            'data-foo': 'Blah',
+            'aria-bar': 'Seven',
+            'baz': 'Lemons',
             'children': 'Child'
         }
         AKwargs = {

tests/test_integration.py

@@ -1,4 +1,7 @@
 from multiprocessing import Value
+import datetime
+import itertools
+import re
 import dash_html_components as html
 import dash_core_components as dcc
 import dash_flow_example
@@ -67,6 +70,60 @@ def update_output(value):
 
         assert_clean_console(self)
 
+    def test_wildcard_callback(self):
+        app = dash.Dash(__name__)
+        app.layout = html.Div([
+            dcc.Input(
+                id='input',
+                value='initial value'
+            ),
+            html.Div(
+                html.Div([
+                    1.5,
+                    None,
+                    'string',
+                    html.Div(id='output-1', **{'data-cb': 'initial value',
+                                               'aria-cb': 'initial value'})
+                ])
+            )
+        ])
+
+        input_call_count = Value('i', 0)
+
+        @app.callback(Output('output-1', 'data-cb'), [Input('input', 'value')])
+        def update_data(value):
+            input_call_count.value = input_call_count.value + 1
+            return value
+
+        @app.callback(Output('output-1', 'children'),
+                      [Input('output-1', 'data-cb')])
+        def update_text(data):
+            return data
+
+        self.startServer(app)
+        output1 = self.wait_for_element_by_id('output-1')
+        wait_for(lambda: output1.text == 'initial value')
+        self.percy_snapshot(name='wildcard-callback-1')
+
+        input1 = self.wait_for_element_by_id('input')
+        input1.clear()
+
+        input1.send_keys('hello world')
+
+        output1 = lambda: self.wait_for_element_by_id('output-1')
+        wait_for(lambda: output1().text == 'hello world')
+        self.percy_snapshot(name='wildcard-callback-2')
+
+        self.assertEqual(
+            input_call_count.value,
+            # an initial call
+            1 +
+            # one for each hello world character
+            len('hello world')
+        )
+
+        assert_clean_console(self)
+
     def test_aborted_callback(self):
         """Raising PreventUpdate prevents update and triggering dependencies"""
 
@@ -116,6 +173,61 @@ def callback2(value):
 
         self.percy_snapshot(name='aborted')
 
+    def test_wildcard_data_attributes(self):
+        app = dash.Dash()
+        app.layout = html.Div([
+            html.Div(
+                id="inner-element",
+                **{
+                    'data-string': 'multiple words',
+                    'data-number': 512,
+                    'data-none': None,
+                    'data-date': datetime.datetime(2012, 1, 10),
+                    'aria-progress': 5
+                }
+            )
+        ], id='data-element')
+
+        self.startServer(app)
+
+        div = self.wait_for_element_by_id('data-element')
+
+        # React wraps text and numbers with e.g. <!-- react-text: 20 -->
+        # Remove those
+        comment_regex = '<!--[^\[](.*?)-->'
+
+        # Somehow the html attributes are unordered.
+        # Try different combinations (they're all valid html)
+        permutations = itertools.permutations([
+            'id="inner-element"',
+            'data-string="multiple words"',
+            'data-number="512"',
+            'data-date="2012-01-10"',
+            'aria-progress="5"'
+        ], 5)
+        passed = False
+        for i, permutation in enumerate(permutations):
+            actual_cleaned = re.sub(comment_regex, '',
+                                    div.get_attribute('innerHTML'))
+            expected_cleaned = re.sub(
+                comment_regex,
+                '',
+                "<div PERMUTE></div>"
+                .replace('PERMUTE', ' '.join(list(permutation)))
+            )
+            passed = passed or (actual_cleaned == expected_cleaned)
+            if passed:
+                break
+        if not passed:
+            raise Exception(
+                'HTML does not match\nActual:\n{}\n\nExpected:\n{}'.format(
+                    actual_cleaned,
+                    expected_cleaned
+                )
+            )
+
+        assert_clean_console(self)
+
     def test_flow_component(self):
         app = dash.Dash()
 

tox.ini

@@ -9,8 +9,9 @@ passenv = *
 basepython={env:TOX_PYTHON_27}
 commands =
     python --version
+    python -m unittest tests.development.test_base_component
+    python -m unittest tests.development.test_component_loader
     python -m unittest tests.test_integration
-    python -m unittest tests.test_react
     python -m unittest tests.test_resources
 
     flake8 dash setup.py
@@ -20,8 +21,9 @@ commands =
 basepython={env:TOX_PYTHON_36}
 commands =
     python --version
+    python -m unittest tests.development.test_base_component
+    python -m unittest tests.development.test_component_loader
     python -m unittest tests.test_integration
-    python -m unittest tests.test_react
     python -m unittest tests.test_resources
     flake8 dash setup.py
     pylint dash setup.py