Support onLoad and onError on <link>

[roderickhsiao]

This PR add onLoad and onError to <link /> component.

HTML spec

Similar to #6815 ,probably just miss it when migrating to Fiber.

Added unit test related to this case (we probably want to add more for other component such as object, iframe as well)

Before

After

link preload such as
<link rel="preload" href="external.css" as="style" onLoad="this.rel='stylesheet'"> should work

[nhunzaker]

Looks good to me, just some requested test updates.

[nhunzaker]

Can you use jest.fn() instead of console.log? I know other tests use console, but it avoids needing the __DEV__ flag. More or less:

const onLoad = jest.fn();

ReactDOM.render(<link href="http://example.org/link" onLoad={onLoad} />)

// ... dispatch

expect(onLoad).toHaveBeenCalledTimes(1)

Also, could you make the load and error event separate tests?

[nhunzaker]

For some background:

I imagine we'll hit this again in the future as new HTML elements support onLoad/onError (though that's probably rare). As far as I understand it, we need to do this eager attachment because error and load to not bubble, so you could technically do:

<div onLoad={() => alert('load!')>
  <img src="image.jpg" />
</div>

I sort of wonder if we should just respect the existing DOM behavior and avoid needing to eagerly attach these listeners. I'll write up an RFC for it!

[roderickhsiao]

@nhunzaker updated thanks for the feedback

[nhunzaker]

I am sorry for two final nits, but do you mind updating this to read:

it('should receive an error event on <link> elements')

Likewise for load. I'm also happy to make this change if you'd like.

[roderickhsiao]

absolutely, thanks for the feedback

outdated

[gaearon]

seems ok to me

[roderickhsiao]

Thanks Dan