[Add ComponentOfType] #146

congwenma · 2017-12-06T18:48:10Z

Adds ComponentOfType propType checker.

This helps check Component's type on the receiving end.

//  1. single expected
  propType = {
    label: elementOfType('label')
  }

// 2. multiple expected, multiple given
  propType = {
    children: elementOfType([ MyListItem, 'label' ])
  }

  propType = {
    children: elementOfType([ ...SVG_TAG_GROUP, MyCustomTag ])
  }

ljharb · 2017-12-06T20:01:20Z

Technically this is an element, not a component - it's similar to elementType in https://www.npmjs.com/package/airbnb-prop-types.

ljharb · 2017-12-06T22:05:11Z

README.md

@@ -89,11 +91,14 @@ MyComponent.propTypes = {
  // it as an enum.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

+  optionalElementOfType: PropTypes.elementOfType(['div', OtherComponent]),


why allow it to take an array of types instead of a single one? PropTypes.oneOfType is the established way to compose multiple validators.

Separately, I think "oneOf" is always in the name when it's taking an array of multiples; thus, I think elementOfType taking one, or oneOfElementType taking an array, is what would make sense - and I think the latter sounds silly.

The specific problem I'm trying to solve is the oneOfType scenario, but considering the need to whitelist more than one type of components:

<CustomTable> <CustomHeader/> <CustomTableRow/> <CustomTableRow/> <CustomTableRow/> <CustomFooter/> </CustomTable> // this is what I'm looking for CustomTable.propTypes = { children: elementsOfType([CustomHeader, CustomTableRow, CustomFooter]) } or <SVGSection> <use/> <g></g> <rectangle/> <CustomSvgLine /> </SVGSection> SVGSection.propTypes = { children: elementsOfType([ ...SVG_CHILDREN, ...MY_CUSTOM_SVG_CHILDREN ]) }

I'm hoping to capture these use cases so that when allow reusability of component, I'm always covered by this type checker.

PropTypes.oneOfType([ ...SVG_CHILDREN, ...MY_CUSTOM_SVG_CHILDREN ].map(x => PropType.elementOfType(x))) works just fine, without overcomplicating the propType validator.

@ljharb that sounds reasonable, I will make the change.

@ljharb fyi, one feature we will lose from this change is a error message that says expected one of type [div, span, CustomComponent], if we use oneOfType, we will only be seeing the generic message Invalid prop supplied ...

I believe there’s a way oneOfType can read info off of the validators it receives to improve the error message, but I’m not sure what it is.

@ljharb i wonder how that would work if each proptype returns a different error message.

ljharb · 2017-12-06T22:06:22Z

factoryWithTypeCheckers.js

+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      expectedTypes = [].concat(expectedTypes)


This should throw if expectedTypes isn't an array (if it takes an array), like oneOf/oneOfType do.

i'm hoping to give user some flexibility in case they only want to pass a single expected element type.

Flexibility in APIs leads to bugs; if they want to pass a single type, they can add [ ] without difficulty.

ljharb · 2017-12-07T18:25:32Z

__tests__/PropTypesDevelopmentStandalone-test.js

@@ -871,6 +871,82 @@ describe('PropTypesDevelopmentStandalone', () => {
    });
  });

+  describe('ElementOfType Types', () => {


Also, ‘of type” implies it receives propType validators; i think this should be called “elementOf”.

we are really checking if the given object has a .type attribute that matches the given accepted, hows ElementWithType

or maybe just elementType?

actually, there's already a createElementTypeChecker which is a little bit confusing.

createElementTypeTypeChecker :-D

ljharb

Can you add a test case that fails with { type: 'div' }? In other words, React.isValidElement should always be true in order for this validator to pass.

__tests__/PropTypesDevelopmentReact15.js

ljharb · 2017-12-08T21:47:07Z

factoryWithTypeCheckers.js

+    var ACCEPTABLE_TYPES_OF_EXPECTED_TYPES = ['string', 'function'];
+
+    if (ACCEPTABLE_TYPES_OF_EXPECTED_TYPES.indexOf(typeof expectedType) === -1) {
+      process.env.NODE_ENV !== 'production' ? warning(false, 'Invalid argument supplied to ElementWithType, expected an Html tag name or a Component.') : void 0;


this should not use warning here; I'm suggesting this have a literal throw statement.

this would be different from the behaviors of other type checkers.

https://github.com/congwenma/prop-types/blob/add-componentOfType/factoryWithTypeCheckers.js#L277

hm, that seems like a missed opportunity.

wouldn't this be a useful pattern by not making a big deal about prop types in production?

I'm not sure what you mean; invalid props are bugs. The point of not warning about them in production is performance; the exception I'm hoping for here would only apply to dev anyways, since the entire propType validator is compiled out anyways in production.

sorry I thought you mean replacing the entire line with a throw.
I think what you are suggesting can make things cleaner and easier, plus we'd be removing dependency on fbjs/warning, however I think theres some logic in fbjs/warning that helps debugging prop-types and handle some special cases, and this probably warrants a separate PR.

ljharb · 2019-02-28T04:47:20Z

@congwenma would you mind rebasing this, and addressing outstanding comments?

ljharb · 2019-03-07T06:55:02Z

@congwenma #146 (comment) in particular

factoryWithTypeCheckers.js

ljharb · 2019-03-07T06:57:28Z

factoryWithTypeCheckers.js

+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValues = [].concat(props[propName]);


this should just be props[propName]; there's no reason to support multiple values here.

Are you saying the support of multiple element types should be using oneOf?

oneOfType, yes.

factoryWithTypeCheckers.js

Co-Authored-By: congwenma <congwen.ma@gmail.com>

ljharb · 2019-03-08T05:22:17Z

factoryWithThrowingShims.js

@@ -51,6 +51,7 @@ module.exports = function() {
    objectOf: getShim,
    oneOf: getShim,
    oneOfType: getShim,
+    elementWithType: getShim,


also let’s name this elementType

elementType already exist, looks like this PR beated us to it. b67bbd4.

Whoops, indeed - looks like #211 may have replaced this.

ljharb · 2019-04-01T05:26:54Z

Replaced with #211.

Thanks for the contribution!

facebook-github-bot added the CLA Signed label Dec 6, 2017

congwenma mentioned this pull request Dec 6, 2017

PropTypes: define children component type facebook/react#1836

Closed

ljharb suggested changes Dec 6, 2017

View reviewed changes

ljharb reviewed Dec 7, 2017

View reviewed changes

ljharb suggested changes Dec 8, 2017

View reviewed changes

ljharb reviewed Dec 8, 2017

View reviewed changes

__tests__/PropTypesDevelopmentReact15.js Show resolved Hide resolved

__tests__/PropTypesDevelopmentReact15.js Show resolved Hide resolved

__tests__/PropTypesDevelopmentReact15.js Outdated Show resolved Hide resolved

ljharb reviewed Dec 8, 2017

View reviewed changes

janeklb mentioned this pull request Jan 2, 2018

[NO JIRA] add 'hasChildrenOfType' to bpk-react-utils Skyscanner/backpack#407

Closed

ljharb added the Semver: minor label Feb 28, 2019

[Add ComponentOfType]

f7f5fc1

ljharb reviewed Mar 7, 2019

View reviewed changes

ljharb and others added 4 commits March 7, 2019 09:06

Update factoryWithTypeCheckers.js

0135063

Co-Authored-By: congwenma <congwen.ma@gmail.com>

Update factoryWithTypeCheckers.js

25f5467

Co-Authored-By: congwenma <congwen.ma@gmail.com>

Update factoryWithTypeCheckers.js

d8d77b3

Co-Authored-By: congwenma <congwen.ma@gmail.com>

Update factoryWithTypeCheckers.js

4a43d01

Co-Authored-By: congwenma <congwen.ma@gmail.com>

ljharb reviewed Mar 8, 2019

View reviewed changes

updated some arrow functions to function declarations, added ReactIs

9823dfa

ljharb closed this Apr 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Add ComponentOfType] #146

[Add ComponentOfType] #146

congwenma commented Dec 6, 2017 •

edited

Loading

ljharb commented Dec 6, 2017

ljharb Dec 6, 2017

congwenma Dec 6, 2017

ljharb Dec 6, 2017

congwenma Dec 7, 2017

congwenma Dec 7, 2017

ljharb Dec 7, 2017

congwenma Dec 7, 2017

ljharb Dec 6, 2017

congwenma Dec 6, 2017

ljharb Dec 6, 2017

ljharb Dec 7, 2017

congwenma Dec 7, 2017

ljharb Dec 8, 2017

congwenma Dec 8, 2017 •

edited

Loading

ljharb Dec 8, 2017

ljharb left a comment

ljharb Dec 8, 2017

congwenma Dec 8, 2017

ljharb Dec 8, 2017

congwenma Dec 9, 2017

ljharb Dec 9, 2017

congwenma Dec 10, 2017 •

edited

Loading

ljharb commented Feb 28, 2019

ljharb commented Mar 7, 2019

ljharb Mar 7, 2019

congwenma Mar 7, 2019

ljharb Mar 8, 2019 •

edited

Loading

ljharb Mar 8, 2019

congwenma Mar 31, 2019

ljharb Apr 1, 2019

ljharb commented Apr 1, 2019

[Add ComponentOfType] #146

[Add ComponentOfType] #146

Conversation

congwenma commented Dec 6, 2017 • edited Loading

ljharb commented Dec 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

congwenma Dec 8, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

congwenma Dec 10, 2017 • edited Loading

Choose a reason for hiding this comment

ljharb commented Feb 28, 2019

ljharb commented Mar 7, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb Mar 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ljharb commented Apr 1, 2019

congwenma commented Dec 6, 2017 •

edited

Loading

congwenma Dec 8, 2017 •

edited

Loading

congwenma Dec 10, 2017 •

edited

Loading

ljharb Mar 8, 2019 •

edited

Loading