Preact: 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:
developit/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 :tada:

[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

[shawnwall]

@ForsakenHarmony I'm not seeing that in my current setup. Only if I manually require preact/debug in one of my files do proptypes begin to actually validate.

[ForsakenHarmony]

Oh sorry I misread, I thought you were using preact-cli

[ForsakenHarmony]

https://github.com/preactjs/preact-cli/blob/d1718255d9a81c52ad022f3308e53bdda9917bc7/packages/cli/lib/lib/entry.js#L7

You can copy what we do there though, only enable it in dev, the check gets removed in a production build because of dead code elimination