Create react-addons-dom-factories package

[nhunzaker]

Moves React DOM factories out of React, makes new react-addons-dom-factories package. Adds basic documentation for new addon.

I hope this is most of the legwork for #6169.

Sort of tangental, but this reduces React down to 5.3kb gzipped. Pretty neat :)

[nhunzaker]

Did some furniture moving of the factory tests, which failed CI. So I updated the test recording using:

scripts/fiber/record-tests --track-facts

Did I do this correctly?

[gaearon]

You shouldn't need --track-facts.

[nhunzaker]

Yeah, I figured that out later, when I hit a permissions issue not having write access to the repo. Everything else worked perfectly.

[gaearon]

We can't do this in a single pass. As a first step we should create the new package and add a deprecation warning when you access React.DOM which points to the package. Then we can release this in a minor and do another pass where we actually remove React.DOM.

[nhunzaker]

Ah. Makes sense. I'll bring it back.

[nhunzaker]

Done, I've set up a Proxy to intercept React.DOM when available:

[nhunzaker]

Sort of tangental, but this was my first pseudo-production use of a Proxy. What a cool API. It's a bummer Proxy.revocable isn't quite as well supported.

[nhunzaker]

I've upstreamed it with master, fixed some tests, and re-recorded the fiber output.

I don't want this PR to be too much of a thorn in your side. I'll periodically keep it up to date with master so it's not difficult to update whenever it makes sense to evaluate it.

[aweary]

Can you add an assertion on the content of the warning? It's not a big deal, but I like to make sure the tests are checking for the correct warning, not just any warning.

[nhunzaker]

Sure can.

[nhunzaker]

Done, though it feels a bit cumbersome. Do you know of a better way to make this check?

[flarnie]

I think the way you did it is how it is done throughout the React tests.

[nhunzaker]

Ack! those double quotes get me every time. Fixed.

[nhunzaker]

Conflicts resolved. Anything else I can do here to help move this along?

[flarnie]

We removed the 'Add-Ons' section of the docs from the main navigation when we deprecated most of them in v15.5. (#9359) I think it's worth having this documentation - maybe we could put it in the README for the new separate module?

[flarnie]

I really like this use of a Proxy. I'm wondering though about the fact that, according to MDN, Proxy is not yet supported in IE. To also show this warning in IE, we may want to switch and add the warning in the copy of ReactDOMFactories that remains in React. We could do that in a follow-up PR though.

[aweary]

Maybe we should instead use Object.defineProperty to define getters for each method, so we don't have to rely on Proxy at all and split up the logic for these warnings.

[flarnie]

Using Object.defineProperty could be handy.
With Object.defineProperty it might look like this:

if (__DEV__) {
  // React.DOM factories are deprecated. ...(rest of comment)
  var hasWarnedOfFactories = false;
  var DOMFactoryMethodNameList = ['a', 'abbr', 'address', ... 'text', 'tspan'];
  DOMFactoryMethodNameList.forEach((method) => {
    React.DOM = Object.defineProperty(React.DOM, method, {
      get: function() {
        if (!hasWarnedOfFactories) {
          warning(
            false,
            'Accessing factories like React.DOM.%s has been deprecated ' +
            'and will be removed in the future. Use the ' +
            'react-addons-dom-factories package instead.',
            method
          );

          hasWarnedOfFactories = true;
        }
        return React.DOM[method];
      },
    });
  });

  }

Unless there is a way to define a generic 'get' for all object attributes with Object.defineProperty?

If not then it seems just as easy to do without the Object.defineProperty call I think, something like this;

if (__DEV__) {
  // React.DOM factories are deprecated. ...(rest of comment)
  var hasWarnedOfFactories = false;
  var DOMFactoryMethodNameList = ['a', 'abbr', 'address', ... 'text', 'tspan'];
  DOMFactoryMethodNameList.forEach((method) => {
    var wrappedMethod = React.DOM[method];
    React.DOM[method] = function() {
      if (!hasWarnedOfFactories) {
        warning(
          false,
          'Accessing factories like React.DOM.%s has been deprecated ' +
          'and will be removed in the future. Use the ' +
          'react-addons-dom-factories package instead.',
          method
        );

        hasWarnedOfFactories = true;
      }
      return wrappedMethod.apply(null, Array.prototype.slice.call(arguments));
    });
  });

  }

Both of these instantiate an extra wrapper function for every factory method, which is annoying. I figure a follow-up PR, either by me or someone else, can come up with a good approach.

[aweary]

We could simply it further by using a for ... in loop over ReactDOMFactories!

if (__DEV__) {
  var warnedForFactories = false;
  for (var factory in ReactDOMFactories) {
    React.DOM[factory] = function(...args) {
      if (!warnedForFactories) {
        warning(
          false,
          'Accessing factories like React.DOM.%s has been deprecated ' +
          'and will be removed in the future. Use the ' +
          'react-addons-dom-factories package instead.',
          factory
        )
        warnedForFactories = true;
      }
      return ReactDOMFactories[factory](...args);
    }
  }
}

[nhunzaker]

I like this, 👍

[flarnie]

Thanks for your patience on this PR @nhunzaker! We plan on merging it both into master, which will be v16.0, and the v15.6-dev branch. Unfortunately the build process on master has changed quite a bit.

I think the simplest way is this:

1. I (or you if you have time first) will cherry-pick the commits from this PR into a new PR to make against v15.6-dev branch. That should be pretty easy to merge with minimal updates.
2. I (or you if you have time first) can make a commit on this PR updating it to work with the build process on master, and we will then be able to merge it there.

Hope that makes sense. :)

[nhunzaker]

@flarnie Sorry for the late response. All of this makes a ton of sense. I should be able to resolve the feedback later today.