WebReflection / hyperHTML

A Fast & Light Virtual DOM Alternative
ISC License
3.06k stars 112 forks source link

intent for attributes renders that attribute in no matter what #330

Closed atirip closed 5 years ago

atirip commented 5 years ago

This is pure cosmetical issue, everything works, but I would like that attribute to be not rendered in when I choose so. The documentation example:

    hyperHTML.define(
      'color-style',
      (node, value) => {
        node.style.cssText = `color:${value};`;
      }
    );

    hyperHTML.bind(document.body)`
    <section color-style=${'red'} id="info">
      ${'Welcome'}
    </section>

renders into:

    <section id="info" color-style style="color: red;">
      Welcome
    </section>

without return value - "Its optionally returned value will be used as attribute value." - one would assume that 'color-style' attribute should be missing from DOM as is the case with boolean attributes in general. Also, quite surprisingly return false; renders into color-style="false"

If you wonder what I am doing, then it is easier for me to pass all arguments as an object in our HTML editor like this:

hyperHTML.define('all-attributes', function(node, value) {
    var attrs = ['data', 'className', 'style', 'checked', 'name', 'value', 'id', 'method', 'action', 'src', 'href', 'aria', 'type'];
    attrs.forEach(function(attr) {
        if (!(attr in value)) return;
        switch (attr) {
            case 'aria':
                Object.keys(value.aria).forEach(function(prop) {
                    node.setAttribute('aria-' + prop.replace(/([A-Z])/g, '-$1').toLowerCase(), value.aria[prop]);
                });
                break;
            case 'data':
                Object.keys(value.data).forEach(function(prop) {
                    node.setAttribute('data-' + prop.replace(/([A-Z])/g, '-$1').toLowerCase(), value.data[prop]);
                });
                break;
            case 'className':
                var className = U.trim(value.className);
                if (!U.empty(className)) node.className = className;
                break;
            case 'style':
                CSS.set(node, value.style);
                break;
            case 'checked':
                if (value.checked) node.setAttribute(attr, '');
                break;
            default:
                if (!U.empty(value[attr])) node.setAttribute(attr, value[attr]);
        }
    });

});
WebReflection commented 5 years ago
hyperHTML.define(
      'color-style',
      (node, value) => {
        node.style.cssText = `color:${value};`;
                node.removeAttribute('color-style');
      }
    );
atirip commented 5 years ago

Nope. This does not work. https://codepen.io/anon/pen/OroBEG?editors=0010

WebReflection commented 5 years ago

v2.24 fixes this 👋

atirip commented 5 years ago

Thank you.