Skip to content
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

update validation of component passed to the function returned by connect() #971

Closed
wants to merge 1 commit into from
Closed

update validation of component passed to the function returned by connect() #971

wants to merge 1 commit into from

Conversation

pgarciacamou
Copy link

@pgarciacamou pgarciacamou commented Jul 11, 2018

Fixes #914

This aims to remove the strict function check and use react-is to validate the component that is passed to the function returned by connect(). I first encountered this issue when I created an HOC that forwarded a reference to the composed component, as discussed in the issue referenced above.

@@ -2,6 +2,7 @@ import hoistStatics from 'hoist-non-react-statics'
import invariant from 'invariant'
import { Component, createElement } from 'react'
import { polyfill } from 'react-lifecycles-compat'
import * as ReactIs from 'react-is'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the purposes of tree shaking, you should import only the isValidElementType function.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timdorr I did try, it fails when running npm run build

src/index.js → dist/react-redux.js...
[!] Error: 'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/components/connectAdvanced.js (5:9)
3: import { Component, createElement } from 'react'
4: import { polyfill } from 'react-lifecycles-compat'
5: import { isValidElementType } from 'react-is'
            ^

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reference, here's the actual built file from the NPM package: https://unpkg.com/react-is@16.4.1/cjs/react-is.development.js .

The entire built react-is package is CJS, so I'm not sure there's any tree-shaking that's going to happen.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK, Rollup and Webpack are working on tree-shaking/DCE for CJS bundles (well, all code, really).

But react-is is built exactly like react, so I'm not sure why that doesn't work. Maybe our build tools need an upgrade?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timdorr I don't want this PR to get stale, is there anything you recommend me doing? E.g. maybe creating a PR (or issue) to react-is so that it exports individual modules to enable tree-shaking

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as mentioned in #914 (comment) it's not yet possible to import specific portions of react-is, but if you fix the build of react-is, it would then become possible

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@timdorr @cellog ok, here is my attempt facebook/react#13250. "There goes nothing", I can't say I didn't try :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Let's see if they can get that out soon enough. I'm not particularly worried about this aging quickly, as this part of the code isn't often touched.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I closed it because it was not the expected solution, also, it is over my head.

@markerikson
Copy link
Contributor

So do we still want to wait on react-is to be updated with an ESM build, or is it better to just go with the existing version?

It looks like react-is.production.min.js is 1.88K.

We could also copy-pasta this function, I suppose, and just inline it. Here's the main source: https://github.com/facebook/react/blob/b565f495319750d98628425d120312997bee410b/packages/shared/isValidElementType.js .

@markerikson
Copy link
Contributor

Note that per #914 and facebook/relay#2499 , connect and Relay apparently aren't getting along with each other because Relay is now using React.forwardRef.

@markerikson
Copy link
Contributor

Looks like there's some movement in facebook/react#13272 , so maybe we can wait for that to get worked out.

@pgarciacamou
Copy link
Author

pgarciacamou commented Aug 5, 2018

@markerikson

So do we still want to wait on react-is to be updated with an ESM build, or is it better to just go with the existing version?

that is a good question, but at this point, I feel like it hasn't moved forward because we should wait. Although no one has literally mentioned it.

It looks like @TrySound is working on the ESM feature in facebook/react#13321. We are rooting for you TrySound!

@TrySound
Copy link
Contributor

TrySound commented Aug 5, 2018

I do my best. For now you can use namedExports option of commonjs plugin.

@pgarciacamou
Copy link
Author

I'm waiting on facebook/react#13321 to update this PR. As soon as that get's merged I'll update the code.

@TrySound
Copy link
Contributor

I'm waiting this one facebook/react#13356

@pgarciacamou
Copy link
Author

Thanks, @TrySound!

I didn't mean to make it sound like I was pressuring you, I just wanted to comment to let other developers know that this PR is not stalled.

@pgarciacamou
Copy link
Author

Rebased.

@pgarciacamou
Copy link
Author

Closed in favor of #1000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants