Theo's Typesafe Cult•2y ago

Typing self-returning proxy

function div(){
    const props = {}
    function createChainable(obj: any = {}){
        return new Proxy(() => obj, {
            get: (target, prop) => {
                return (value) => {
                    props[prop] = value;
                    return createChainable(props);
                }
            },
            apply: () => {
                return createElement("div", props);
            }
        })
    }
    return createChainable();
}
div().className("mx-auto").children("sick").ok("wow")()

function div(){
    const props = {}
    function createChainable(obj: any = {}){
        return new Proxy(() => obj, {
            get: (target, prop) => {
                return (value) => {
                    props[prop] = value;
                    return createChainable(props);
                }
            },
            apply: () => {
                return createElement("div", props);
            }
        })
    }
    return createChainable();
}
div().className("mx-auto").children("sick").ok("wow")()

How would I type this? The props would be JSX.IntrinsicElements["div"] but I'm unsure how to type it with chaining as well as calling it div().className("p-4")()

3 Replies

bentenOP•2y ago

type Div= {
    [key in keyof Required<JSX.IntrinsicElements["div"]>]: (value: any) => Div
} & (() => JSX.Element)

type Div= {
    [key in keyof Required<JSX.IntrinsicElements["div"]>]: (value: any) => Div
} & (() => JSX.Element)

lfg

JacobMGEvans•2y ago

Nice

bentenOP•2y ago

in case anyone cares, here it is but generic and with the prop actually typed

type GenericElement<T extends keyof JSX.IntrinsicElements> = {
    [key in keyof Required<JSX.IntrinsicElements[T]>]: (
        value: JSX.IntrinsicElements[T][key]
    ) => GenericElement<T>;
} & (() => JSX.Element);

type GenericElement<T extends keyof JSX.IntrinsicElements> = {
    [key in keyof Required<JSX.IntrinsicElements[T]>]: (
        value: JSX.IntrinsicElements[T][key]
    ) => GenericElement<T>;
} & (() => JSX.Element);

Gaming

Programming

Typing self-returning proxy