v2.0.0 now places the party in the upper left-hand corner

[peterbe]

Describe the bug The sparkles (or confetti) are now in the upper left-hand corner of the page.

Here's how I run it:

<input
  onClick={(event) => {
    event.stopPropagation();
    if (true) {
      party.sparkles(event.target as HTMLElement, {
      });
    }
  }}
/>{

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/cool-paper-9urhf?file=/src/App.tsx

Expected behavior A clear and concise description of what you expected to happen.

Enviroment

• [x] Browser
• [ ] Node.js
• [ ] Other

Additional context

v2.0.0 just came out.

[yiliansource]

And I had hoped that I'd have ironed out all the quirky bugs at this point...

Thanks for the reproduceable example, I'll try to find a fix tomorrow when I'm back at my desktop. When testing this morning it worked fine on both bundle and package version.

[peterbe]

Is my Codesandbox sane though? That one uses React + Typescript. My other project, where I first discovered this, was Preact + Typescript but I don't know if that should matter.

Thanks in advance! It's a great looking lib!

[yiliansource]

I'm not even sure what's sane anymore. 😅

The issue seems to be that the renderer isn't applying the position to the particles, but it's not throwing errors. Might be generating faulty CSS declarations, but I'll have to look into it.

Edit: Something causing the sampler for HTMLElements to be messed up. If you use event.nativeEvent as the source instead it works (although it does cut off the particles at the bottom, will have to look into that). But since event.target should implement getBoundingClientRect() just fine, I don't see why this should return faulty values.

[yiliansource]

Apparently the particle instances have their location set to (NaN, NaN, 0), which causes the CSS styles to become corrupted. I'll see if I can make out the reason why.

[yiliansource]

Alright, I figured it out!

The party.dynamicSource(source) method tries to infer the source to use from the passed element by checking the available properties. For normal <div> elements this worked fine, but <input> elements have an additional width property, which makes the dynamic source think that the source is a Rect, not an HTMLElement.

https://github.com/yiliansource/party-js/blob/f254a1184a265971a64dff50c84d9121a0074913/src/systems/sources.ts#L17-L28

The workaround is to use party.elementSource(source), but I'll push a fix later today probably.

[yiliansource]

Fixed in v2.0.1 by using instanceof guards instead of in clauses.

[peterbe]

Forked. Upgraded. Confirmed to fixed: https://codesandbox.io/s/gracious-bush-pj564?file=/src/App.tsx