Unnecessary props passed to DOM

[breadadams]

Some props are leaking through to the DOM (unnecessarily) ☝️ (autoplay, controls, etc)

[Kikobeats]

I know, but I consider the effort to remove it implies more cost than simply pass it

what do you think?

[breadadams]

Yeah I had a quick go at it and gave up quickly 😅

I was thinking we could create a small util. method, where we pass props & the keys of props we want to exclude from a return object. Eg:

const propCleaner = (obj, excludeKeys) => {
  const objKeys = Object.keys(obj)

  return objKeys.reduce((acc, key) => {
    if (!excludeKeys.include(key)) {
      acc[key] = obj[key]
    }
    return acc
  })
}
 
<Component {...propCleaner(props, ['apiKey', 'autoPlay'])} />

(not ran/tested)

[Kikobeats]

Maybe https://www.npmjs.com/package/clean-tag?activeTab=readme

[breadadams]

Yep that seems to do basically what I was suggesting.

We'll have to see how the size looks with it included - https://bundlephobia.com/result?p=clean-tag@1.0.4

[Kikobeats]

I would not worry unless it represents a problem

The cost of add 11kb extra size into the library vs 0kb, also not logic for handle this 🙂

[breadadams]

Just came across this @Kikobeats. Lodash's omit should do the trick.

I think we should implement this as we're generating slightly unsemantic markup, passing "media" attributes (autoplay, etc) to DOM elements that shouldn't receive them.

[Kikobeats]

agree!