PropTypes for Preact

[rumkin]

Hi. I've realised PropTypes's alike extensible type checker which produce nice-looking report object. Instead of PropTypes which print's some output into console. And I want to add integration for preact. Is there any way to make it play together without patching preact itself?

It could be used like so:

const TypedProps = require('typed-props');

const userShape = TypedProps.shape({
    username: TypedProps.string.isRequired,
    age: TypedProps.number,
});

TypedProps.check({}, userShape); // -> returns array of issues: {path:string[], rule:string, params:{}}

Thanks for any advise.

P.S. Here it is.

[pl12133]

Hey @rumkin thanks for the issue. Preact offers an (undocumented) hook at the end of the h function which is called with every created vNode. You can use this hook to monkey-patch class methods. In this way, I think you could achieve checking PropTypes on arbitrary class methods. Here is an example of patching render with the prop-types package from npm:

import { options } from 'preact';
import PropTypes from 'prop-types';


function patchWithPropTypes(PatchingComponent) {
	let name = PatchingComponent.displayName || PatchingComponent.name || 'component';
	let render = PatchingComponent.prototype.render;

	PatchingComponent.__patchedWithPropTypes = true;

	if (render) {
		PatchingComponent.prototype.render = function renderWithPropTypes(props, state, ctx) {
			if (PatchingComponent.propTypes) {
				for (let prop in props) {
					PropTypes.checkPropTypes(PatchingComponent.propTypes, props, prop, name);
				}
			}
			return render.call(this, props, state, ctx);
		}
	}
}

let nextVnode = options.vnode;
options.vnode = vnode => {
	if (typeof vnode.nodeName==='function' && !vnode.nameNode.__patchedWithPropTypes) {
		patchWithPropTypes(vnode.nodeName)
	}
	if (nextVnode) {
		nextVode(vnode);
	}
}

I hope this helps you extend preact with your own project. If you get this working, it would be great to hear if this has a performance impact on your code.

[developit]

Also worth noting: preact-compat does PropType checking right now in a slightly odd way, but @tkh44 has opened a PR that works very similarly to @pl12133's suggestion above. You can see it here:
preactjs/preact-compat#370

[marvinhagemeister]

Looks like we use prop-types + preact today without any necessary changes to core 🎉

@rumkin If you feel like the posted solutions don't solve your problem feel free to ping me to reopen this issue.

[pirelenito]

Hi @marvinhagemeister, what do you mean when you say:

Looks like we use prop-types + preact today without any necessary changes to core 🎉

I've tried just importing prop-types and juts anotating a component, such as:

Button.propTypes = {
	children: PropTypes.any.isRequired,
	variant: PropTypes.oneOf(['primary', 'secondary', 'cta']),
}

But there was no warning in the console.

I only managed to make it work by using the solution proposed by @pl12133 with a custom hack (based on preact-compact) that you can check on this gist. However that doesn't seem to work very well and I'm not really understanding what I'm doing 😅.

What is the recommended way going forward if I want to use prop-types with preact?

Cheers ❤️

[marvinhagemeister]

I stand corrected, we indeed don't support it out of the box in core :/ I'll try to get this into Preact X before it's out.

[marvinhagemeister]

Just an FYI: PropType checking will be possible in Preact X itself. That means that compat won't be needed just for PropTypes anymore. Merged the PR for it yesterday 🎉

[DonGissel]

Hot diggety! Thanks!

[marvinhagemeister]

We just released the alpha for Preact X which will check for prop-types via preact/debug. It just needs to be included once (done automatically in preact-cli) to get prop-type checking to work 🎉

[shawnwall]

@marvinhagemeister thanks for the info. If I'm not using preact-cli, what is the preferred method of requiring/including preact/debug for development builds to get prop-type checking working with webpack?

[ForsakenHarmony]

it should be included by default