Draft: React 18 support #338

saitonakamura · 2022-04-24T19:32:03Z

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

inlet · 2022-04-24T19:48:43Z

Hi @saitonakamura,

Thanks this is amazing! Yeah Docz is a pain, I'm happy to ditch it for something else.
Maybe switch to docusaurus?

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
Patrick

spassvogel · 2022-05-06T05:35:38Z

@saitonakamura is there any update on this?

saitonakamura · 2022-05-06T12:58:28Z

@spassvogel if you want to try this out, i have a package npm i @saitonakamura/react-pixi@7.0.0-alpha

If you use TS you can use paths feature, otherwise use webpack aliases or something like that to redirect @inlet/react-pixi to @saitonakamura/react-pixi

I do this in tsconfig.json

"paths": {
  "@inlet/react-pixi": ["../node_modules/@saitonakamura/react-pixi"],
}

The api has changed to

import { createRoot, Container } from '@inlet/react-pixi`

const canvas = document.createElement('canvas')
document.appendChild(canvas)

const root = createRoot(canvas, { width: 800, height: 600 })
root.render(<Container></Container>)

Now app is created under the hood (it's a subject to change, I'm not sure about it)

spassvogel · 2022-05-15T11:00:00Z

The tsconfig thing doesnt work with CRA, but just replacing @inlet/react-pixi with @saitonakamura/react-pixi works. Seems to work pretty solid so far, except the TODO implement clearContainer warning.

Heilemann · 2022-06-14T21:08:13Z

Any chance this is coming to the official release soon? Beginning to run into dependency hell 😄

MonsieurNaexec · 2022-06-16T21:55:33Z

Hi,

I'm having issues while trying to execute npm i @saitonakamura/react-pixi@7.0.0-alpha
The full output is the following:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/react-pixi@7.0.0-alpha
npm WARN Found: prop-types@15.8.1
npm WARN node_modules/prop-types
npm WARN   prop-types@"^15.8.1" from eslint-plugin-react@7.30.0
npm WARN   node_modules/eslint-plugin-react
npm WARN     eslint-plugin-react@"^7.27.1" from eslint-config-react-app@7.0.1
npm WARN     node_modules/eslint-config-react-app
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer prop-types@"^18.0.0" from @saitonakamura/react-pixi@7.0.0-alpha
npm WARN node_modules/@saitonakamura/react-pixi
npm WARN   @saitonakamura/react-pixi@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/react-pixi@7.0.0-alpha
npm WARN Found: prop-types@undefined
npm WARN node_modules/prop-types
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer prop-types@"^18.0.0" from @saitonakamura/react-pixi@7.0.0-alpha
npm WARN node_modules/@saitonakamura/react-pixi
npm WARN   @saitonakamura/react-pixi@"*" from the root project
npm ERR! code ETARGET
npm ERR! notarget No matching version found for prop-types@^18.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

In fact, when I inspect the package archive, the package.json contains this:

  "peerDependencies": {
    "pixi.js": "^6.0.0",
    "prop-types": "^18.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.1"
  },

But the prop-types package doesn't have a 18.0.0 version.
I'm not very familiar with package dependencies so maybe there's something I get wrong, but I wonder why nobody reported this issue. Is it related to the Windows environment? Or did I miss something during the installation process?
Also, I'm using CRA with the typescript template.

Thank you for any hint

pluveto · 2022-06-26T15:17:23Z

I'm using @saitonakamura/react-pixi. it works well. waiting for a official release

dmytro-podolianskyi-ew · 2022-06-28T21:06:16Z

Hi,

I'm having issues while trying to execute npm i @saitonakamura/react-pixi@7.0.0-alpha The full output is the following:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/react-pixi@7.0.0-alpha
npm WARN Found: prop-types@15.8.1
npm WARN node_modules/prop-types
npm WARN   prop-types@"^15.8.1" from eslint-plugin-react@7.30.0
npm WARN   node_modules/eslint-plugin-react
npm WARN     eslint-plugin-react@"^7.27.1" from eslint-config-react-app@7.0.1
npm WARN     node_modules/eslint-config-react-app
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer prop-types@"^18.0.0" from @saitonakamura/react-pixi@7.0.0-alpha
npm WARN node_modules/@saitonakamura/react-pixi
npm WARN   @saitonakamura/react-pixi@"*" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/react-pixi@7.0.0-alpha
npm WARN Found: prop-types@undefined
npm WARN node_modules/prop-types
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer prop-types@"^18.0.0" from @saitonakamura/react-pixi@7.0.0-alpha
npm WARN node_modules/@saitonakamura/react-pixi
npm WARN   @saitonakamura/react-pixi@"*" from the root project
npm ERR! code ETARGET
npm ERR! notarget No matching version found for prop-types@^18.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

In fact, when I inspect the package archive, the package.json contains this:

  "peerDependencies": {
    "pixi.js": "^6.0.0",
    "prop-types": "^18.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.1"
  },

But the prop-types package doesn't have a 18.0.0 version. I'm not very familiar with package dependencies so maybe there's something I get wrong, but I wonder why nobody reported this issue. Is it related to the Windows environment? Or did I miss something during the installation process? Also, I'm using CRA with the typescript template.

Thank you for any hint

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?

pluveto · 2022-06-29T02:11:40Z

@dmytro-podolianskyi-ew I don't have prop-types dependency and looks like it works. you can try to remove that entry

MonsieurNaexec · 2022-06-29T06:35:29Z

I'm having issues while trying to execute npm i @saitonakamura/react-pixi@7.0.0-alpha

I tried using yarn instead of npm, and it seems to work now.
Having to change package managers is quite annoying though...

saitonakamura · 2022-06-30T06:01:35Z

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

Bevebage · 2022-07-06T18:21:02Z

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.

inlet · 2022-07-06T18:34:07Z

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!

Bevebage · 2022-07-06T18:40:47Z

Ahh, alright thanks so much. Please don't rush and thanks for all the help.

saitonakamura · 2022-07-13T10:43:30Z

@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

wallynm · 2022-07-16T02:52:19Z

Hey @saitonakamura, i would like to help here, I just need some context to understand how to help.
Maybe a markdown file, with listed tasks we need to address?

hevans90 · 2022-07-19T07:37:23Z

Thank you so much for working on this, it will be a game-changer for my project!

saitonakamura · 2022-07-19T14:37:17Z

@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

saitonakamura · 2022-08-08T12:53:04Z

Released @saitonakamura/react-pixi@7.0.0-beta-2. Only 2 fixes were made in the lib code: d.ts fix and fix of wrong warning

Other commits were related to tests, stories and stories deployment

cc @mutewinter @joukosaastamoinen

saitonakamura · 2022-08-09T13:48:35Z

@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

ryohey · 2022-08-10T05:13:14Z

index.d.ts

-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>


Suggested change

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.

@ryohey yeah, you're right, thanks for the suggestion!

mutewinter · 2022-08-11T22:10:19Z

A new small issue with this branch vs main: window is accessed here: https://github.com/wisebits-tech/react-pixi/blob/39e23a3dfa09ff032723815ca73a304708423d90/src/reconciler/hostconfig.js#L101, which causes rendering in Node to fail without a polyfill. Previously, one could get away without a polyfill of window by providing resolution and autoDensity: false. This code is commented in such a way that it doesn't appear done, so this may be on the todo list.

saitonakamura · 2022-08-12T09:49:38Z

@mutewinter awesome that you've found it, I love how y'all helping with the testing!
Implementation of getEventPriority is just copied from the react-dom counterpart, TODO is left to think if we can do better. But you're indeed right that it should not fail the node so I'm gonna insert a check beforehand for now

inlet · 2022-08-16T14:45:43Z

@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

I’m currently on holiday but will help when I’m back, thanks 🙏

mutewinter · 2022-09-06T22:07:58Z

@mutewinter awesome that you've found it, I love how y'all helping with the testing!
Implementation of getEventPriority is just copied from the react-dom counterpart, TODO is left to think if we can do better. But you're indeed right that it should not fail the node so I'm gonna insert a check beforehand for now

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':

saitonakamura · 2022-09-19T14:52:18Z

@mutewinter published a beta-5 with your fix

nigel-loops · 2022-10-17T10:40:02Z

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

inlet · 2022-10-17T12:12:07Z

Once finished I'll be glad to merge the PR!

mutewinter · 2022-10-23T19:33:14Z

Been using this branch in production for weeks and it has been solid for me.

alvinalexander · 2022-11-24T21:34:15Z

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?

hevans90 · 2022-11-25T13:25:18Z

@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

spassvogel · 2022-12-04T21:59:51Z

@saitonakamura can we help move this along? from the list on top it's not really clear to me exactly what is meant?

inlet · 2022-12-12T15:01:57Z

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

baseten · 2022-12-19T18:29:59Z

@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 createRoot changes) compared with docs changes?

baseten · 2022-12-21T12:13:25Z

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.

#358

@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?

baseten · 2023-01-31T14:06:11Z

React 18 is now supported, including a matching createRoot API as of v7.0.0 available at @pixi/react

inlet mentioned this pull request May 20, 2022

Typescript error when add children to a Container component (may be related with React 18) #341

Closed

inlet added the help wanted Extra attention is needed label Jun 11, 2022

saitonakamura force-pushed the react-18 branch from 852e900 to 89adcc0 Compare July 1, 2022 13:46

Draft: react 18

b4361e7

* react 18 api working * Update some stuff * Update Stage to createRootApi * Update more * Fixed and updated some render tests

saitonakamura force-pushed the react-18 branch from 89adcc0 to b4361e7 Compare July 1, 2022 14:38

Storybook test

4fbadfa

hevans90 mentioned this pull request Jul 12, 2022

build: update to react 18 hevans90/idleverse#126

Merged

saitonakamura added 2 commits July 13, 2022 17:24

Migrated README.mdx

1da3629

Migrated some stories

c6996e9

migrated wven more components

55cc4cb

saitonakamura and others added 2 commits July 19, 2022 17:50

Migrated ParticleContainer

3d79940

Updates stories mdx file

4eb0484

Fixed storybook build

de3113c

ryohey reviewed Aug 10, 2022

View reviewed changes

saitonakamura added 3 commits August 10, 2022 17:07

Fixed children

1a05254

Fixed order of the stories and added component to Meta

6b59a8e

Added links

39e23a3

Fix animated types

4d27228

nanachi-code mentioned this pull request Sep 14, 2022

Erro with Container component type #350

Closed

Fixed issue with node no window

bea7760

saitonakamura mentioned this pull request Sep 19, 2022

React pixi crashes with opened dev-tools #351

Closed

designspin mentioned this pull request Oct 20, 2022

ERROR - unable to resolve dependency tree #354

Closed

Fixed typo

597e24e

Zyie force-pushed the master branch from 4bb37dc to 6da04c5 Compare January 24, 2023 10:59

baseten closed this Jan 31, 2023

	export const Container: React.FC<_ReactPixi.IContainer>
	export const Container: React.FC<React.PropsWithChildren<_ReactPixi.IContainer>>

Draft: React 18 support #338

Draft: React 18 support #338

Conversation

saitonakamura commented Apr 24, 2022 • edited

inlet commented Apr 24, 2022

spassvogel commented May 6, 2022

saitonakamura commented May 6, 2022

spassvogel commented May 15, 2022 • edited

Heilemann commented Jun 14, 2022

MonsieurNaexec commented Jun 16, 2022

pluveto commented Jun 26, 2022

dmytro-podolianskyi-ew commented Jun 28, 2022

pluveto commented Jun 29, 2022

MonsieurNaexec commented Jun 29, 2022

saitonakamura commented Jun 30, 2022

Bevebage commented Jul 6, 2022

inlet commented Jul 6, 2022

Bevebage commented Jul 6, 2022 • edited

saitonakamura commented Jul 13, 2022

wallynm commented Jul 16, 2022 • edited

hevans90 commented Jul 19, 2022

saitonakamura commented Jul 19, 2022

saitonakamura commented Aug 8, 2022

saitonakamura commented Aug 9, 2022

ryohey Aug 10, 2022

Choose a reason for hiding this comment

saitonakamura Aug 10, 2022

Choose a reason for hiding this comment

saitonakamura Aug 10, 2022

Choose a reason for hiding this comment

mutewinter commented Aug 11, 2022

saitonakamura commented Aug 12, 2022

inlet commented Aug 16, 2022

mutewinter commented Sep 6, 2022

saitonakamura commented Sep 19, 2022 • edited

nigel-loops commented Oct 17, 2022 • edited

inlet commented Oct 17, 2022

mutewinter commented Oct 23, 2022

alvinalexander commented Nov 24, 2022

hevans90 commented Nov 25, 2022

spassvogel commented Dec 4, 2022

inlet commented Dec 12, 2022

baseten commented Dec 19, 2022

baseten commented Dec 21, 2022

baseten commented Jan 31, 2023

saitonakamura commented Apr 24, 2022 •

edited

spassvogel commented May 15, 2022 •

edited

Bevebage commented Jul 6, 2022 •

edited

wallynm commented Jul 16, 2022 •

edited

saitonakamura commented Sep 19, 2022 •

edited

nigel-loops commented Oct 17, 2022 •

edited