-
-
Notifications
You must be signed in to change notification settings - Fork 175
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft: React 18 support #338
Conversation
Hi @saitonakamura, Thanks this is amazing! Yeah Docz is a pain, I'm happy to ditch it for something else. Thanks for collaborating on this. I'm currently pretty stacked with work for the coming two week.. when I got time I can absolutely help you with this PR. Thanks and we'll be in touch |
@saitonakamura is there any update on this? |
@spassvogel if you want to try this out, i have a package If you use TS you can use paths feature, otherwise use webpack aliases or something like that to redirect I do this in
The api has changed to
Now app is created under the hood (it's a subject to change, I'm not sure about it) |
The |
Any chance this is coming to the official release soon? Beginning to run into dependency hell 😄 |
Hi, I'm having issues while trying to execute
In fact, when I inspect the package archive, the "peerDependencies": {
"pixi.js": "^6.0.0",
"prop-types": "^18.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.1"
}, But the Thank you for any hint |
I'm using @saitonakamura/react-pixi. it works well. waiting for a official release |
I have the same issue. @inlet @saitonakamura Did you have a chance to finish your job with upgrading React to 18? Or @saitonakamura Could you change "prop-types": "^18.0.0", to the correct version 15.8.1? |
@dmytro-podolianskyi-ew I don't have prop-types dependency and looks like it works. you can try to remove that entry |
I tried using yarn instead of npm, and it seems to work now. |
Sure will do next week. Sorry for not devoting time to it, got mixed up with other stuff |
* react 18 api working * Update some stuff * Update Stage to createRootApi * Update more * Fixed and updated some render tests
Hey, is there an eta on the release? I just want to know if I should wait a day or two for this or just install now and upgrade later. Thanks so much. |
We’re working on this in our spare time 😁 no eta yet for the release so yes install and upgrade when it’s available is probably a good idea! |
Ahh, alright thanks so much. Please don't rush and thanks for all the help. |
@Bevebage I'll keep you posted, for now I wanna make sure all the examples still work, so I'm migrating docz stories to storybook. Then I'll publish a new version with the previous "PIXI.Container as root" design (turned out it's more flexible, reasons are here). Then I plan to work on the tests If anyone can help with any of the stages, I'd be happy to explain things and provide content to read about |
Hey @saitonakamura, i would like to help here, I just need some context to understand how to help. |
Thank you so much for working on this, it will be a game-changer for my project! |
@wallynm I've added a checklist to the starting message. Currently I'm updating stories from docz to storybook, examples of this can be found in the last couple of commits, so you can help with that, or you can look into tests failing |
Released Other commits were related to tests, stories and stories deployment |
@inlet can you help me with the netlify? deploy looks to be successful, but when storybook is trying to load the assets it fails with 404. I check the storybook build locally and it's fine |
index.d.ts
Outdated
export const AnimatedSprite: React.FC<_ReactPixi.IAnimatedSprite>; | ||
export const Text: React.FC<_ReactPixi.IText> | ||
export const Sprite: React.FC<_ReactPixi.ISprite> | ||
export const Container: React.FC<_ReactPixi.IContainer> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const Container: React.FC<_ReactPixi.IContainer> | |
export const Container: React.FC<React.PropsWithChildren<_ReactPixi.IContainer>> |
Since React18, FC no longer includes children, Maybe we need PropsWithChildren? other components as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ryohey yeah, you're right, thanks for the suggestion!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed
A new small issue with this branch vs main: |
@mutewinter awesome that you've found it, I love how y'all helping with the testing! |
I’m currently on holiday but will help when I’m back, thanks 🙏 |
Here's a patch that fixes the crash when rendering in Node: index 7cbff42..700f3b7 100644
--- a/src/reconciler/hostconfig.js
+++ b/src/reconciler/hostconfig.js
@@ -98,6 +98,10 @@ function diffProperties(pixiElement, type, lastProps, nextProps, rootContainerEl
}
export function getEventPriority() {
+ // Escape hatch for Node renderer where we don't a Window.
+ if (typeof window === 'undefined') {
+ return DefaultEventPriority
+ }
let name = window?.event?.type
switch (name) {
case 'click': |
@mutewinter published a |
Hi guys. My project fundamentally relies on react-pixi. Looking to update to react 18 but see this is still WIP. What is still required in order to get this over the line for release? Obviously willing to help out if I can. Thanks |
Once finished I'll be glad to merge the PR! |
Been using this branch in production for weeks and it has been solid for me. |
I would like to use this package for an internal project at work, but I need support for React 18. What are the remaining todos for this PR? |
@alvinalexander you can try using @saitonakamura 's fork that has experimental (but pretty stable) react 18 support here: https://www.npmjs.com/package/@saitonakamura/react-pixi?activeTab=versions |
@saitonakamura can we help move this along? from the list on top it's not really clear to me exactly what is meant? |
Thanks for all your effort on making it compatible with React 18 @saitonakamura! I'm thrilled to announce that this library is acquired by the PixiJS Team and they're going to maintain this project from now on 👌 making it a rock-solid React layer for PIXI More news will be available soon |
@saitonakamura thanks for your awesome work on this! I'm going to be getting an official release working with React 18 as soon as possible. We're still deciding how to handle docs and examples along with a general revamp across the whole PIXI ecosystem - it will likely be a combination of docusaurus and storybook. In the short term getting React 18 support working is the top priority and it appears that is generally a small part of this PR (mainly related to |
I've opened a minimal PR just to get the library working with React 18 before we do a docs overhaul in the near future. @saitonakamura I think you've been doing a bigger overhaul including docs that may have extended beyond this original draft PR - it might be useful to sync to discuss? |
React 18 is now supported, including a matching |
Hello @inlet , thanks for your amazing work! I've started working on updating react-pixi to support react 18. We're currently using react-pixi along with react-three-fiber (for webxr stuff) and we're experiencing performance problems. R3F (react-three-fiber) is riding the concurrent train for a while so we decided to give it a shot, but react-pixi (among other things though) is blocking us right now. It's only a draft but i got the first version working. The main painpoint is that docz is pretty much dead and i'm not sure picking it up to support react 18 worth the time. I'm currently looking into using storybook with mdx addon, so let's see how it goes. I'll keep you posted and feel free to comment
Fixes #337
src/render/index.js
to react 18src/stage/index.js
to react 18