These are chat archives for skatejs/skatejs

12th
Apr 2017
Tauren Mills
@tauren
Apr 12 2017 20:57
@treshugart I keep having problems with @skatejs/val eating attributes. It calls createElement with attrs of {key, ref}, but none of the original attributes passed. Is this really the correct behavior?
For instance, I have this markup:
<u-tabs>
  <section title="Tab 1” icon=“google">content panel 1</section>
  <section title="Tab 2” icon=“twitter">content panel 2</section>
  <section title="Tab 3” icon=“facebook” selected>content panel 3</section>
</u-tabs>
And u-tabs contains this:
  renderCallback() {
    const tabs = map(this.querySelectorAll('[title]'), (el, i) => {
      return (
        <li selected={el.selected}>
          {el.attributes.icon && <u-icons icon={el.attributes.icon.value} />}
          <span>{el.title}</span>
        </li>
      )
    })

    return [
      <style>{styles.toString()}</style>,
      <ul id="tabs" class={this.dark ? 'dark' : null}>
        {tabs}
      </ul>,
      <div id="panels">
        <slot id="panelsSlot"></slot>
      </div>
    ];
  }
Tauren Mills
@tauren
Apr 12 2017 21:04
But el.attributes doesn't contain icon (it is a NamedNodeMap)
The strange thing is this logic used to be working, and I’m not sure if something changed in skatejs that would cause it to break. I’ve made some changes to my project, but I don’t think they would break this.

If I hack @skatejs/val to pass icon, everything works as expected:

  // Ensures attrs, events and props are all set as the consumer intended.
function ensureAttrs (objs) {
  const { attrs, events, ref, key, dangerouslySetInnerHTML, icon, ...props } = objs || {};
  const newRef = ensureRef({ attrs, events, props, ref });
  return { ref: newRef, key, dangerouslySetInnerHTML, icon }
}

Note that I’ve also included dangerouslySetInnerHTML as that is also required by a dependency of my app.

Trey Shugart
@treshugart
Apr 12 2017 22:44
@tauren remember, with @skatejs/val, if you want to explicitly set an attribute, you have to pass { attrs: { icon } }
otherwise it’s passed as a property
in 5.x, built-in props (props.string etc) default to only one-way attribute binding
(not sure which version you’re using)