destructuring p5 / working with typescript

[LasseMunk]

Hi thank you for this package - just what I was looking for :)

Is it possible to destructure p5 like const { fill } = p5;

If I try to do it I get an error:

"react.js:10078 Uncaught TypeError: Cannot read properties of undefined (reading '_renderer')"

Also - does there exist typedefinitions so all the p5. methods / types is not 'any' ? :)

Best Lasse

[LasseMunk]

Types:

npm install --save @types/p5
https://www.npmjs.com/package/@types/p5

[jamesrweb]

Please read the Typescript section of the README, it shows you by example how to use p5 methods via sketches passed to the wrapper.

[jamesrweb]

If you see this issue from restructuring WITHIN the sketch function that you're passing to the wrapper, then I'll need to take a look.

[LasseMunk]

Hi James,

I tried to destructure the functions from the p5 prop like

const { fill } = p5

where p5 is the prop / type. Like you are doing in the typescript example :)

"... sketch(p5: P5CanvasInstance) { ...."

That is what I normally do with objects being passed as props, and would just hope it was possible in this case also, so I don't have to prepend p5. every time I call a function from within p5 :)

I get the error: Uncaught TypeError: Cannot read properties of undefined (reading '_renderer')

I am happy to make a full example for you if it makes it easier for you :)

Also! I didn't see how to get typedefinitions using typescript and your p5-wrapper.

Installing

npm install --save @types/p5
https://www.npmjs.com/package/@types/p5

Solves that problem :) Would be great to add to the documentation :)

[jamesrweb]

The types are bundled with the package so you shouldn't have to manually install them. Weird. Glad it worked though!

As for the destructuring, if you could share a minimal example of the failure, I would appreciate it. Perhaps a ReplIt or StackBlitz instance or similar, for example?

[LasseMunk]

Hi James,

Sorry life with small kids.. goes a bit slow :)

Ofcourse - happy to help :)

Does this link work for you ?

https://codesandbox.io/p/sandbox/react-p5-1-vdrtxn?file=%2Fsrc%2FApp.tsx%3A10%2C39

In the App.tsx there are two components. The working one is displayed by default. If you comment it out, and uncomment the not working one, then you will see the error which is thrown, when I try to desctructure p5 and get the circle directly :)

[jamesrweb]

After some testing, I honestly don't know why this doesn't work for this example 😓. I can only imagine that it has to do with either:

• The way the project is bundled
• Something upstream to do with the p5 instance mode which we piggy back from

Sorry I can't be more help on this one. Quite the confusing one with your case, I will keep it in mind for future also to consider why for some it works and others not, it shouldn't be an issue, yet it is.