New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create react-addons-dom-factories package #8356

Merged
merged 1 commit into from Apr 24, 2017

Conversation

Projects
None yet
6 participants
@nhunzaker
Collaborator

nhunzaker commented Nov 19, 2016

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 :)

screen shot 2016-11-20 at 12 54 27 pm

@@ -891,7 +894,6 @@ src/renderers/dom/stack/client/__tests__/ReactDOM-test.js
* should allow children to be passed as an argument
* should overwrite props.children with children argument
* should purge the DOM cache when removing nodes
* allow React.DOM factories to be called without warnings

This comment has been minimized.

@nhunzaker

nhunzaker Nov 20, 2016

Collaborator

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?

@nhunzaker

nhunzaker Nov 20, 2016

Collaborator

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?

This comment has been minimized.

@gaearon

gaearon Nov 21, 2016

Member

You shouldn't need --track-facts.

@gaearon

gaearon Nov 21, 2016

Member

You shouldn't need --track-facts.

This comment has been minimized.

@nhunzaker

nhunzaker Nov 21, 2016

Collaborator

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

@nhunzaker

nhunzaker Nov 21, 2016

Collaborator

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Nov 21, 2016

Member

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.

Member

gaearon commented Nov 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Nov 21, 2016

Collaborator

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

Collaborator

nhunzaker commented Nov 21, 2016

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

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Nov 22, 2016

Collaborator

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

screen shot 2016-11-21 at 8 56 45 pm

Collaborator

nhunzaker commented Nov 22, 2016

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

screen shot 2016-11-21 at 8 56 45 pm

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Nov 22, 2016

Collaborator

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.

Collaborator

nhunzaker commented Nov 22, 2016

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.

@gaearon gaearon self-assigned this Jan 23, 2017

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

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.

Collaborator

nhunzaker commented Jan 23, 2017

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.

Show outdated Hide outdated src/addons/__tests__/ReactDOMFactories-test.js
expect(a.type).toBe('a');
expect(p.type).toBe('p');
expectDev(console.error.calls.count()).toBe(1);

This comment has been minimized.

@aweary

aweary Jan 23, 2017

Member

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.

@aweary

aweary Jan 23, 2017

Member

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.

This comment has been minimized.

@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

Sure can.

@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

Sure can.

This comment has been minimized.

@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

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

@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

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

This comment has been minimized.

@flarnie

flarnie Apr 18, 2017

Contributor

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

@flarnie

flarnie Apr 18, 2017

Contributor

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

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Jan 23, 2017

Collaborator

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

Collaborator

nhunzaker commented Jan 23, 2017

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

@gaearon gaearon referenced this pull request Jan 24, 2017

Closed

React 16 Umbrella ☂️ (and 15.5) #8854

117 of 120 tasks complete
@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Feb 22, 2017

Collaborator

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

Collaborator

nhunzaker commented Feb 22, 2017

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

@aweary aweary referenced this pull request Apr 10, 2017

Closed

React 15.6 Umbrella #9398

41 of 49 tasks complete

@flarnie flarnie added this to the 15.6 milestone Apr 13, 2017

Show outdated Hide outdated docs/docs/addons-dom-factories.md
title: DOM Factories
permalink: docs/dom-factories.html
layout: docs
category: Add-Ons

This comment has been minimized.

@flarnie

flarnie Apr 18, 2017

Contributor

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

flarnie Apr 18, 2017

Contributor

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?

Show outdated Hide outdated src/isomorphic/React.js
// accesses to the React.DOM namespace and alert users to switch to
// the `react-addons-dom-factories` package.
if (typeof Proxy === 'function') {
var hasWarnedOfFactories = false;

This comment has been minimized.

@flarnie

flarnie Apr 18, 2017

Contributor

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.

@flarnie

flarnie Apr 18, 2017

Contributor

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.

This comment has been minimized.

@aweary

aweary Apr 18, 2017

Member

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.

@aweary

aweary Apr 18, 2017

Member

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.

This comment has been minimized.

@flarnie

flarnie Apr 18, 2017

Contributor

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.

@flarnie

flarnie Apr 18, 2017

Contributor

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.

This comment has been minimized.

@aweary

aweary Apr 19, 2017

Member

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);
    }
  }
}
@aweary

aweary Apr 19, 2017

Member

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);
    }
  }
}

This comment has been minimized.

@nhunzaker

nhunzaker Apr 19, 2017

Collaborator

I like this, 👍

@nhunzaker

nhunzaker Apr 19, 2017

Collaborator

I like this, 👍

@flarnie flarnie changed the base branch from master to 15.6-dev Apr 18, 2017

@flarnie flarnie changed the base branch from 15.6-dev to master Apr 18, 2017

@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Apr 18, 2017

Contributor

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. :)

Contributor

flarnie commented Apr 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Apr 19, 2017

Collaborator

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

Collaborator

nhunzaker commented Apr 19, 2017

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

flarnie added a commit to flarnie/react-codemod that referenced this pull request Apr 20, 2017

Add codemod for 'React.DOM.div' -> 'React.createElement("div"'
Since we are deprecating the 'React.DOM.*' factories,[1] we want to
provide a codemod so that it's easier for folks to upgrade their code.

This will include an option to use 'React.createFactory' instead of
'React.createElement' in case there is a use case where that is
preferred.

There is one use of `React.DOM.*` that I have seen which is not covered
here - sometimes it has mistakenly been used for Flow typing. In the
cases I have found it is not proper syntax and doesn't seem like
something we should cover with this codemod.

[1]: facebook/react#9398
and facebook/react#8356

flarnie added a commit to flarnie/react-codemod that referenced this pull request Apr 20, 2017

Add codemod for 'React.DOM.div' -> 'React.createElement("div"'
Since we are deprecating the 'React.DOM.*' factories,[1] we want to
provide a codemod so that it's easier for folks to upgrade their code.

This will include an option to use 'React.createFactory' instead of
'React.createElement' in case there is a use case where that is
preferred.

There is one use of `React.DOM.*` that I have seen which is not covered
here - sometimes it has mistakenly been used for Flow typing. In the
cases I have found it is not proper syntax and doesn't seem like
something we should cover with this codemod.

[1]: facebook/react#9398
and facebook/react#8356

flarnie added a commit to flarnie/react-codemod that referenced this pull request Apr 20, 2017

Add codemod for 'React.DOM.div' -> 'React.createElement("div"'
Since we are deprecating the 'React.DOM.*' factories,[1] we want to
provide a codemod so that it's easier for folks to upgrade their code.

This will include an option to use 'React.createFactory' instead of
'React.createElement' in case there is a use case where that is
preferred.

There is one use of `React.DOM.*` that I have seen which is not covered
here - sometimes it has mistakenly been used for Flow typing. In the
cases I have found it is not proper syntax and doesn't seem like
something we should cover with this codemod.

[1]: facebook/react#9398
and facebook/react#8356
@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Apr 20, 2017

Collaborator

I've rebased this with master:

  • consolidated the doc page with the readme for the new react-dom-factories package
  • Squashed everything down for easy cherry-picking

I haven't integrated the package into the new build process yet, but I wanted to get this commit up. This should be in a good spot to fork off for a PR targeting 15.6-dev.

Now to hook this up with the new build process.

Collaborator

nhunzaker commented Apr 20, 2017

I've rebased this with master:

  • consolidated the doc page with the readme for the new react-dom-factories package
  • Squashed everything down for easy cherry-picking

I haven't integrated the package into the new build process yet, but I wanted to get this commit up. This should be in a good spot to fork off for a PR targeting 15.6-dev.

Now to hook this up with the new build process.

Show outdated Hide outdated src/addons/ReactDOMFactories.js
'stop': createDOMFactory('stop'),
'svg': createDOMFactory('svg'),
'text': createDOMFactory('text'),
'tspan': createDOMFactory('tspan'),

This comment has been minimized.

@nhunzaker

nhunzaker Apr 20, 2017

Collaborator

I think I read somewhere that React is getting into the habit of wrapping keys that shouldn't get modified with quotes. I went ahead and did it.

@nhunzaker

nhunzaker Apr 20, 2017

Collaborator

I think I read somewhere that React is getting into the habit of wrapping keys that shouldn't get modified with quotes. I went ahead and did it.

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Apr 21, 2017

Collaborator

Gross. Working on those test failures.

Collaborator

nhunzaker commented Apr 21, 2017

Gross. Working on those test failures.

Move ReactDOMFactories into separate package
- Update examples to no longer use React.DOM
- Add package and documentation entries for react-addons-dom-factories
- Update dom-factories readme
- Set up proxy to intercept React.DOM usage
- Update ReactDOM children tests to use createElement
- Add more specific warning assertion for React DOM factories
- Do not use expectDev in ReactDOMFactories tests
@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Apr 21, 2017

Collaborator

Tests should now pass. Also it looks like prettier doesn't like the quotes around the property names so I've nixed them.

Collaborator

nhunzaker commented Apr 21, 2017

Tests should now pass. Also it looks like prettier doesn't like the quotes around the property names so I've nixed them.

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Apr 21, 2017

Member

@spicyj Could you take over this PR and finalize the review / merge?

Member

gaearon commented Apr 21, 2017

@spicyj Could you take over this PR and finalize the review / merge?

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Apr 21, 2017

Member

Sorry, I meant to leave this message in another PR 😄
@flarnie is managing this one.

Member

gaearon commented Apr 21, 2017

Sorry, I meant to leave this message in another PR 😄
@flarnie is managing this one.

@flarnie flarnie merged commit 86dd083 into facebook:master Apr 24, 2017

1 check passed

ci/circleci Your tests passed on CircleCI!
Details
@@ -0,0 +1,25 @@
{
"name": "react-dom-factories",
"version": "16.0.0-alpha",

This comment has been minimized.

@gaearon

gaearon Apr 24, 2017

Member

Shall we remove them immediately in master and keep them only in 15.6?

@gaearon

gaearon Apr 24, 2017

Member

Shall we remove them immediately in master and keep them only in 15.6?

This comment has been minimized.

@flarnie

flarnie May 3, 2017

Contributor

I would think that makes sense - it was nice to have them put back in this PR though, so I can more easily cherry-pick it to the 15.6 branch. Removing can be in a follow-up that does not get cherry-picked.

@flarnie

flarnie May 3, 2017

Contributor

I would think that makes sense - it was nice to have them put back in this PR though, so I can more easily cherry-pick it to the 15.6 branch. Removing can be in a follow-up that does not get cherry-picked.

flarnie added a commit that referenced this pull request May 9, 2017

Move ReactDOMFactories into separate package (#8356)
- Update examples to no longer use React.DOM
- Add package and documentation entries for react-addons-dom-factories
- Update dom-factories readme
- Set up proxy to intercept React.DOM usage
- Update ReactDOM children tests to use createElement
- Add more specific warning assertion for React DOM factories
- Do not use expectDev in ReactDOMFactories tests

flarnie added a commit that referenced this pull request May 9, 2017

Minor tweak to adjust ReactDOM-test for #8356
**what is the change?:**
Changed a test to look for the warning we added in https://github.com/facebook/react/pull/8356/files

**why make this change?:**
To update our tests for new behavior.

**test plan:**
`npm run test`

**issue:**
#9398

flarnie added a commit to flarnie/react that referenced this pull request May 9, 2017

Add PR #8356 to the change log for v15.6
Another change log update ~ v15.6 is closer than ever! :)

Issue:

flarnie added a commit that referenced this pull request May 9, 2017

Add PR #8356 to the change log for v15.6 (#9636)
Another change log update ~ v15.6 is closer than ever! :)

Issue:

flarnie added a commit to flarnie/react that referenced this pull request Jun 7, 2017

Move ReactDOMFactories into separate package (#8356)
- Update examples to no longer use React.DOM
- Add package and documentation entries for react-addons-dom-factories
- Update dom-factories readme
- Set up proxy to intercept React.DOM usage
- Update ReactDOM children tests to use createElement
- Add more specific warning assertion for React DOM factories
- Do not use expectDev in ReactDOMFactories tests

flarnie added a commit to flarnie/react that referenced this pull request Jun 7, 2017

Minor tweak to adjust ReactDOM-test for #8356
**what is the change?:**
Changed a test to look for the warning we added in https://github.com/facebook/react/pull/8356/files

**why make this change?:**
To update our tests for new behavior.

**test plan:**
`npm run test`

**issue:**
facebook#9398

@bvaughn bvaughn referenced this pull request Aug 1, 2017

Closed

React 16 RC #10294

@renovate renovate bot referenced this pull request Feb 2, 2018

Open

Update dependency react to v16 #29

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment