Remove attribute merging for functional components with no prop definition

[blake-newman]

What problem does this feature solve?

Currently when using functional components without prop definition, all attributes will be rendered when using JSX spread.

This is because the context.data.attrs remain after they are merged.

Current

Usage:<Example type="blue" fill={true} class="extra-class" aria-label="I'm a label" />

Implementation:

export default {
  functional: true,
  
  render({ data, props }) {
    const { type, fill } = props

    const buttonClass = {
      'button--fill': fill,
      [`button--${type}`]: !!type
    }

    <button {...data} class={buttonClass} >
  }
}

Output: <button fill="true" type="blue" class="extra-class button--fill button--blue" aria-label="I'm a label" />

What does the proposed API look like?

It should be explicit what attributes to render to dom when using a functional component with no prop definition.

With fix delete data.attrs

Explicitly passing attributes

You can use spread notation to get all remaining attrs, and replacing the data.attrs object

Usage: <Example type="blue" fill={true} class="extra-class" aria-label="I'm a label" />

Implementation:

export default {
  functional: true,
  
  render({ data, props }) {
    const { fill, type, ...attrs } = props
    data.attrs = attrs

    const buttonClass = {
      'button--fill': fill,
      [`button--${type}`]: !!type
    }

    <button {...data} class={buttonClass} >
  }
}

Output: <button class="extra-class button--fill button--blue" aria-label="I'm a label" />

Explicitly passing attributes 2

Usage: <Example type="blue" fill={true} class="extra-class" formtarget="id" dummy-attr="lol" />

Implementation:

export default {
  functional: true,
  
  render({ data, props }) {
    const { fill, type, formtarget } = props

    const buttonClass = {
      'button--fill': fill,
      [`button--${type}`]: !!type
    }

    <button {...data} formtarget={formtarget} class={buttonClass} >
  }
}

Output: <button class="extra-class button--fill button--blue" formtarget="id" />

Conclusion

Both examples show how the behaviour of the attributes should be left with the child when dictating what attributes shoud be rendered. You can either do a and rest approach or explcititly name attributes to pass onto element.

The original all props/attrs will be rendered as attributes, which adds polution to the DOM especially with attributes that are array's/objects/functions/symbols.