diff --git a/README.md b/README.md index 06c4c19..7e92c20 100644 --- a/README.md +++ b/README.md @@ -147,7 +147,7 @@ render(( ## Use Without Webpack/Browserify -`preact-compat` and its single dependency [`proptypes`](https://git.io/proptypes) are both published as UMD modules as of `preact-compat` version `0.6`. This means you can use them via a ` @@ -168,7 +168,7 @@ You can see the above in action with this [JSFiddle Example](https://jsfiddle.ne ### PropTypes -`preact-compat` adds support for validating PropTypes out of the box. This can be disabled the same way it is when using React, by defining a global `process.env.NODE_ENV='production'`. PropType errors should work the same as in React - the [`proptypes`](https://git.io/proptypes) module used here is extracted verbatim from the React source into a standalone module. +`preact-compat` adds support for validating PropTypes out of the box. This can be disabled the same way it is when using React, by defining a global `process.env.NODE_ENV='production'`. PropType errors should work the same as in React - the [`proptypes`](https://github.com/reactjs/prop-types) module used here is extracted verbatim from the React source into a standalone module. PropType validation example output diff --git a/package.json b/package.json index 7a1f67b..2792368 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "immutability-helper": "^2.1.2", "preact-render-to-string": "^3.6.0", "preact-transition-group": "^1.1.0", - "proptypes": "^0.14.3", + "prop-types": "^15.5.7", "standalone-react-addons-pure-render-mixin": "^0.1.1" } } diff --git a/rollup.config.js b/rollup.config.js index 9221e3d..d14decd 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -21,7 +21,7 @@ export default { useStrict: false, globals: { 'preact': 'preact', - 'proptypes': 'PropTypes' + 'prop-types': 'PropTypes' }, plugins: [ format==='umd' && memory({ diff --git a/src/index.js b/src/index.js index aa9c2da..ac0532c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import PropTypes from 'proptypes'; +import PropTypes from 'prop-types'; import { render as preactRender, cloneElement as preactCloneElement, h, Component as PreactComponent, options } from 'preact'; const version = '15.1.0'; // trick libraries to think we are react @@ -515,13 +515,8 @@ function propsHook(props, context) { let ctor = typeof this==='function' ? this : this.constructor, propTypes = this.propTypes || ctor.propTypes; if (propTypes) { - for (let prop in propTypes) { - if (propTypes.hasOwnProperty(prop) && typeof propTypes[prop]==='function') { - const displayName = this.displayName || ctor.name; - let err = propTypes[prop](props, prop, displayName, 'prop'); - if (err) console.error(new Error(err.message || err)); - } - } + const displayName = this.displayName || ctor.name; + PropTypes.checkPropTypes(propTypes, props, 'prop', displayName); } } } diff --git a/test/component.js b/test/component.js index cb2a877..7845436 100644 --- a/test/component.js +++ b/test/component.js @@ -177,9 +177,7 @@ describe('components', () => { sinon.stub(console, 'error'); React.render(, scratch); - expect(console.error).to.have.been.calledWithMatch({ - message: 'Required prop `func` was not specified in `Foo`.' - }); + expect(console.error).to.have.been.calledWithMatch('Failed prop type: The prop `func` is marked as required in `Foo`, but its value is `undefined`.'); console.error.reset(); @@ -187,9 +185,7 @@ describe('components', () => { expect(console.error).not.to.have.been.called; React.render({}} bool="one" />, scratch); - expect(console.error).to.have.been.calledWithMatch({ - message: 'Invalid prop `bool` of type `string` supplied to `Foo`, expected `boolean`.' - }); + expect(console.error).to.have.been.calledWithMatch('Failed prop type: Invalid prop `bool` of type `string` supplied to `Foo`, expected `boolean`.'); console.error.restore(); }