Added host to hooks for instanceof check

[nerocui]

Hi @ZeeCoder , thanks for creating this library. We are using this package, and we'd like to help make it better. Our use case includes passing in child window's window object. instanceof checks the prototype, and that's unique on each window. So to make sure instanceof works reliably, we need to pass in the host object and compare to the correct Element. Default case is the global window object.

Hope you could give this PR a look when you are free. Thank you!

[ZeeCoder]

Hi @nerocui 👋

First of all: thank you, I really appreciate the effort here!

Can you provide a reproduction of your issue in codesandbox, so that I better understand your use-case please? 🙏

[nerocui]

@ZeeCoder Happy new year. Hope you had a good holiday break.
I was not able to get it to work with codesandbox, but I uploaded a minimal repro to here https://github.com/nerocui/host-repro
It's just a express app that host two static html pages. Essentially it's just showing that instanceof returns false if an element is created from a different window. So in order to get instanceof to work reliably, it needs to be called with the type from the host window.

Please let me know if this helps.

[ZeeCoder]

Sorry I didn't come back to you yet, I'm extremely busy with personal stuff right now but I just wanted you to know I appreciate the time you've invested here.
Seems like the issue stems from useResolvedElement's use of instanceof here:

use-resize-observer/src/utils/useResolvedElement.ts

Lines 30 to 37 in 490429f

	// Ugly ternary. But smaller than an if-else block.
	const element: T | null = cbElement
	? cbElement
	: refOrElement
	? refOrElement instanceof Element
	? refOrElement
	: refOrElement.current
	: null;

I think one solution would be to change this:

    const element: T | null = cbElement
      ? cbElement
      : refOrElement
      ? refOrElement instanceof Element
        ? refOrElement
        : refOrElement.current
      : null;

To this:

    const element: T | null = cbElement
      ? cbElement
      : refOrElement
      ? "current" in refOrElement
        ? refOrElement.current
        : refOrElement
      : null;

☝️ Basically by not using instanceof at all, we circumvent the issue altogether.

Could be a minor release. 🤔

[ZeeCoder]

Would need an additional test case ofc to ensure there'd be no regressions.
Which is where most of the work lies tbh.

[nerocui]

@ZeeCoder Thank you so much for looking into it! Yes getting rid of interaction with global objects would solve this issue.

[nerocui]

I'll update the PR with the recommendation and test cases.

[bpinto]

Alternatively, using hasOwnProperty:

    const element =
      cbElement ||
      (refOrElement
        ? Object.prototype.hasOwnProperty.call(refOrElement, 'current')
          ? refOrElement.current
          : refOrElement
        : null)

[ZeeCoder]

@bpinto looks about right, it's a shame that TS doesn't handle it properly though:

I mean there must be a reason why this isn't working. 🤔

[bpinto]

Sorry @ZeeCoder, I have 0 experience with TS but a google search showed me the following solution:

Type assertion since we know it's a ref and not an element/state:

const element =
  cbElement ||
  (refOrElement
    ? Object.prototype.hasOwnProperty.call(refOrElement, 'current')
      ? (refOrElement as RefObject<T>).current
      : refOrElement as T
    : null)

I tested it here