feat(forwardRef): add forwardRefFactory

[layershifter]

Replaces #2306.

---

React 16.3 gives the wonderful forwardRef API, this PR implements the forwardRefFactory that allows to use it.

Some ideas are taken from klimashkin/react-forwardref-utils.

[layershifter]

This factory allows to use stateless components too 😺

[layershifter]

This hack allows to don't map ref in the every component

[layershifter]

@levithomason this is an initial pass, no tests, just PoC. Will be interesting to hear your thoughts.

[mihai-dinculescu]

Could add displayName, it's quite useful in Dev Tools.

[levithomason]

Why do we hoist { $$typeof: true, render: true } here? Also, the values are conflicting with the docblock on this function.

[levithomason]

Perhaps we also add:

export const isStatelessComponent = Component =>
  typeof Component === 'function' && Component.prototype && !Component.prototype.render

export const supportsRef = Component => 
  typeof Component === 'string' || isClassComponent(Component)

It may help clarify the factory function, see below.

[levithomason]

What do you think of explicitly handling the ref for supported use cases and returning the Component in all other cases?:

import { isStatelessComponent, supportsRef } from './componentUtils.js'

export const forwardFunctionFactory = Component => (props, ref) => {
  /* eslint-disable react/prop-types */

  if (isStatelessComponent(props.as)) {
    return (
      <Ref innerRef={ref}>
        <Component {...props} />
      </Ref>
    )
  }

  if (supportsRef(props.as)) {
    return <Component {...{ [forwardRefSymbol]: ref, ...props }} />
  }

  return Component
}

[levithomason]

This implementation is far better, thanks!

Also, this pattern should definitely be implemented in the v2 fork. I'm about to post a set of specification proposals for the lib directory. This directory is becoming a core lib called "Stardust". Our library and others will be built on the standards there. Dealing with refs is one of those standards.

[layershifter]

We decided to stop our work there, microsoft/fluent-ui-react#587 (comment).

There is a RFC reactjs/rfcs#97 that possibly will simplify all.