Don't replace existing attribute

[ephetic]

Given

class componentWithExistingAttribute extends Component {
  render() {
    return <div data-qa="hello">
        <h1>Hello world</h1>
      </div>;
  }
}

class componentWithDyanmicAttribute extends Component {
  render() {
    const qa = "hello"
    return <div data-qa={qa}>
        <h1>Hello world</h1>
      </div>;
  }
}

I'd expect neither of these to have the transform applied (or at least to have the attribute applied earlier so that it gets shadowed by the explicit attribute).

       class componentWithExistingAttribute extends Component {
         render() {
      -    return <div data-qa="hello" data-qa="component-with-existing-attribute">
      +    return <div data-qa="hello">
               <h1>Hello world</h1>
             </div>;
         }
       }

       class componentWithDynamicAttribute extends Component {
         render() {
           const qa = "hello";
      -    return <div data-qa={qa} data-qa="component-with-dynamic-attribute">
      +    return <div data-qa={qa}>
               <h1>Hello world</h1>
             </div>;
         }
       }

[ephetic]

Simply changing the .push to .unshift accomplishes the shadowing solution.

[davesnx]

That makes total sense...

[chiplay]

We'd also like to see this change, to be able to have explicit "overrides" for when components are collapsing to the same div in a way that promotes the wrong component name. Would you accept a PR with this simple change?

[davesnx]

Hey @chiplay, thanks for pushing this forward.

Don't see the use-case of this yet. Having two attributes with the same name seems not how should work.

Maybe having data-qa="data-qa component-with-dynamic-attribute"?

[shepitchakpavlo]

#29

[davesnx]

Published in 1.5.0