API change in type Size about react-virtualized-auto-sizer

[bennettdams]

Sorry for bringing this up again, but maybe this can be fixed by using conditional types & overloads based on the props? I've never used conditional types/overloads together with class components, so not sure if this would work at all...

I created an oversimplified example, which would result in the following (screenshot). Depending on the props, you would get type-safe access to the height/width property based on whatever has been disabled via props. Look at the expected errors:

---

Here's the example code:

Playground link

type PropsConfig = {
    disableWidth?: boolean
    disableHeight?: boolean
}

type Props = {
    otherProps?: string
} & PropsConfig

type Size = {
    width: number
    height: number
}

type AutoSizerReturn<TSize extends Partial<Size>> = () => TSize

type SizeConditional<TKeyToOmit extends keyof Size> = Omit<Size, TKeyToOmit>

// simulating a component..
function autoSizer<TProps extends Props>(props: TProps):
    TProps["disableWidth"] extends true
    ? (TProps["disableHeight"] extends true
        ? AutoSizerReturn<SizeConditional<"width" | "height">>
        : AutoSizerReturn<SizeConditional<"width">>)
    : TProps["disableHeight"] extends true
    ? AutoSizerReturn<SizeConditional<"height">>
    : AutoSizerReturn<Size> {

    const size: Size = {
        width: 123,
        height: 123
    }

    // simulating render props..
    return () => size
}

// Example 1: nothing disabled, both height & width are there
const size1 = autoSizer({})()
const size1Height = size1.height
const size1Width = size1.width

// Example 2: disable height, only width is there
const size2 = autoSizer({ disableHeight: true })()
const size2Height = size2.height
const size2Width = size2.width

// Example 3: disable width, only height is there
const size3 = autoSizer({ disableWidth: true })()
const size3Height = size3.height
const size3Width = size3.width

// Example 4: disable both, none are there
const size4 = autoSizer({ disableHeight: true, disableWidth: true })()
const size4Height = size4.height
const size4Width = size4.width

[bvaughn]

@bennettdams That does seem like a nice DevX improvement. Thanks for the playground link.

I'd be happy to review a PR for this. Else I'll try to get around to it at some point.

[bvaughn]

In an effort to minimize churn, here's what I've settled on: TypeScript playground link

[shhider]

+1, it caused typechecking problems

[Vader19695]

Also seeing a problem with this change. I would need to modify a lot of my codebase to handle this change. Heads up that reverting to v1.0.7 seems to fix the issue.

[bvaughn]

I'm sorry this changed cause type issues for you, but the new Size type is more accurate type than was there prior, as both width and height params are conditional based on the disableWidth and disableHeight props.

[bvaughn]

1.0.18