williamngan / react-pts-canvas Goto Github PK

After upgrading to tsup build, using this react component will result in a "Maximum call stack" error.

Looks like the issue is related to babel, where "Super call in arrow function causing infinite recursion"
babel/babel#15148

For now, this component will use Pts v0.10.x instead of v0.11.x until we can find a solution to this.

Hi @williamngan,

This is a follow up to #16 for which I'll post a PR in a minute.

Zooming out from that specific issue, I'm wondering if there are other things that should be removed when unmounting: event listeners, bound methods, animation requests, others?. Maybe space should have a dispose method? This is to ensure that applications which open/close the canvas many times do not suffer bad performance.

I am motivated to make the PRs for this but might need your guidance to know where are potential performance issues / handlers leaks. Not sure if there is anything at all (do you know of a way to debug that easily?), but worth stopping to think about it I guess.

What do you think?

Also this might be better listed in the pts repo, let me know if you want to change that.

Only seems to work with react 15 or 16, can we get this to work with 17 or should we just force it to install?

offscreen and pixelDensity in CanvasSpaceOptions are not implemented yet

Is there any roadmap or interest in supporting useX-style / react hook functions with this?

Over the past year I've began using functional components more to control components. Though not quite sure whether or not PtsCanvas could be extrapolated to hooks yet.

Verify if React 18 will work as is, and then update package.json to use '>=' instead of '~' in React versioning.

Description

When using react-pts-canvas in a setup w/ SSR-rendering (e.g. Next.js), the usage of useLayoutEffect causes an issue as the hook is only allowed to run on the client. Subsequently, a warning is logged to the console.

The line causing the issue is here.

Solution

useLayoutEffect should only be used on the client, therefore an isomorphic variant is required that runs safely on both client + server. Example of an existing package. As the change is basically a one-liner, I wouldn't propose to use a package but rather implement it directly.

I would be grateful to work on it.

Repo to reproduce

• https://github.com/flaming-codes/react-pts-canvas-ssr-layout-effect-issue

Screenshots

Description	Image
Warning log

After fixing a replay issue, I found that maybePlay get called twice after a state change in the parent component.

Repro:

1. run the example and click the Play/Stop button on top-left
2. Edit maybePlay with console.log

const maybePlay = () => {
    const space = spaceRef.current
    if (!space) return
    if (play) {
      if (space.isPlaying) {
        space.resume()
        console.log('resume!')
      } else {
        space.replay() // if space has stopped, replay
        console.log('replay')
      }
    } else {
      space.pause(true)
      console.log('pause!')
    }
  }

3. See that console.log get 'pause!' and 'resume!' on a single click

Hi @williamngan, it seems that the listener for resize events is not removed when the component unmounts. The listener gets set in the main pts lib from this line:

From there it ends up here in pts:

https://github.com/williamngan/pts/blob/fdb8fd52b8f9d45bfe6a77d2bccd0bda72f9d86b/src/Canvas.ts#L173-L180

I think we could add a componentWillUnmount lifecycle method that calls this.space.autoResize(false). Would that work?

But I also feel it would be better that pts handles this on its own by deregistering event handlers when the element is unmounted. I couldn't find anywhere that tracks unmounting though and not sure how to proceed.

Happy to try to code that but I might need some pointers ;).

I can re-open this in the pts repo if that's more suitable.

Hi @williamngan,

I've had some performance issue in my app which I narrowed down to the PtsCanvas component. To be precise, when this component gets re-rendered many times (e.g. from prop change, the CPU usage goes up to more than 90%).

I've checked and it seems to come from the call to play() L25 below:

I'm guessing play() should only be called if there was a change in props, not every time. Another way would be to make sure play doesn't cause this kind of performance issue in the ptsjs lib.

I can try to open a PR, but would rather get your opinion on this first.
✌️

Any way to set the canvas size?

Hi,

First i would like to thank you for this rly rly great library.

I have a small problem and maybe you can help me.
I would like to make multiple api calls in the onStart method but sadly the method is not async. How could i solve this ?

Best Regards
Thomas

I've been having an issue where there are a 3-annoying-little-pixels space at the bottom between the container and the canvas. Just wanted to highlight that I got rid of it by adding lineHeight: 0 to the style prop. Not really an issue with the lib per se, but might be useful for others. Feel free to close ;)