fix: correct container and baseElement typings

[SavePointSam]

adjusts the typings of container and baseElement to better correlate to their real world application. fixes #265.

[kentcdodds]

Oh nice! So a Node is a subclass of HTMLElement that has a firstChild then?

[SavePointSam]

HTMLElements do not have a firstChild property as it hasn't been added to the render tree. A Node does have a firstChild as it has been rendered in some way from being an HTMLElement and exists in a tree structure.

[SavePointSam]

I'm not 100% sure that is the best typing, but it accomplishes what we need as we aren't in full control of the renderer and it's typing. This is also the best I could find. It may break in the future if the response of react's renderer doesn't happen to match the API of a DOM Node.

[SavePointSam]

It be more accurate we would need to dig into React DOM more and determine what the actual typing of the render response is.

[kentcdodds]

Well, we're adding typings to container and baseElement both of which we create ourselves so we know their type and it's HTMLDivElement for both of them. I think that would be the most accurate.

[SavePointSam]

The input types are different than the outputs because they are passed to the react renderer. When I dove into the renderer typings it just generically said Element which doesn't have a type for firstChild, that I could find.

[kentcdodds]

Right but we create the container and baseElement so we know what type they are. Go ahead and try editing your node_modules to use HTMLDivElement` for both of those and you'll see it works great :)

[SavePointSam]

Hmm, I tried it before and it wasn't working. I'll try with HTMLDivElement again later today.

[julienw]

The hierarchy is (according to MDN):
EventTarget -> Node -> Element -> HTMLElement -> HTMLDivElement
firstChild is defined in Node.
I'm not sure what we're trying to fix here :) What's the specific error you get in #265?

[SavePointSam]

@julienw

[ts] Property 'firstChild' does not exist on type 'HTMLElement'. [2339]

[SavePointSam]

@kentcdodds, I'm still getting the does not exist error with HTMLDivElement. It only works if I use Node

[ts] Property 'firstChild' does not exist on type 'HTMLDivElement'. [2339]

[SavePointSam]

Same with just Element

[ts] Property 'firstChild' does not exist on type 'Element'. [2339]

[julienw]

Can you please show the full code that's failing for you?

[SavePointSam]

I'm working on building a Codesandbox that reproduces the error. However, it appears to be working fine there. Double checking what's different about my development environment.

[SavePointSam]

Ok, found my issue. Turns out my repo didn't list "dom" and "dom.iterable" in the lib section of my tsconfig. No type update is needed. I can look at updating the README to have a TypeScript settings section to avoid people hitting this in the future if you would like @kentcdodds.

[kentcdodds]

Yeah, some docs updates would be appreciated!