Draft: React 18 support

[saitonakamura]

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

• [x] Update src/render/index.js to react 18
• [x] Update src/stage/index.js to react 18
• [x] Update all stories to storybook
• [x] Fix prod storybook build
• [ ] Fix netlify preview
• [ ] Update docs to use new api
• [ ] Update codepens
• [x] Fix tests
• [ ] Fix Suspense tests
• [ ] Fix 'receives different events in different containers' test

[inlet]

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]

@saitonakamura is there any update on this?

[saitonakamura]

@spassvogel if you want to try this out, i have a package npm i @saitonakamura/[email protected]

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]

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]

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

[MonsieurNaexec]

Hi,

I'm having issues while trying to execute npm i @saitonakamura/[email protected] The full output is the following:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/prop-types
npm WARN   prop-types@"^15.8.1" from [email protected]
npm WARN   node_modules/eslint-plugin-react
npm WARN     eslint-plugin-react@"^7.27.1" from [email protected]
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/[email protected]
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/[email protected]
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/[email protected]
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]

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

[dmytro-podolianskyi-ew]

Hi,

I'm having issues while trying to execute npm i @saitonakamura/[email protected] The full output is the following:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @saitonakamura/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/prop-types
npm WARN   prop-types@"^15.8.1" from [email protected]
npm WARN   node_modules/eslint-plugin-react
npm WARN     eslint-plugin-react@"^7.27.1" from [email protected]
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/[email protected]
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/[email protected]
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/[email protected]
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]

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

[MonsieurNaexec]

I'm having issues while trying to execute npm i @saitonakamura/[email protected]

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

[saitonakamura]

Sure will do next week. Sorry for not devoting time to it, got mixed up with other stuff

[Bevebage]

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]

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]

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

[saitonakamura]

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

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]

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

[saitonakamura]

@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

[wallynm]

Hey @saitonakamura , just sent a PR to your repo, https://github.com/wisebits-tech/react-pixi/pull/1 That's not much yet, but im gonna open others pr's along the week, if you see any issues just comment in the PR plx

[inlet]

Great to see you guys are collab on this, let me know when I can review a PR

[saitonakamura]

@wallynm awesome, merged it

[saitonakamura]

I've published @saitonakamura/[email protected], the createRoot api (which were changed initially) returned back to previous design with app.stage as a root container

import { createRoot, Text } from '@inlet/react-pixi';
import { Application } from 'pixi.js';

const app = new Application({
  width: 800,
  height: 600,
  backgroundColor: 0x10bb99,
  view: document.getElementById('my-canvas'),
});

const root = createRoot(app.stage);
root.render(<Text text="Hello World" x={200} y={200} />);

You check out the basic example with createRoot at https://codesandbox.io/s/j112mb?file=/src/index.jsx

<Stage> component should work as before

cc @spassvogel @Bevebage @hevans90 @pluveto

I also update prop-types version to a proper one, cc @pluveto @MonsieurNaexec

[inlet]

@saitonakamura is it stable enough to have this PR merged? Thanks!

[saitonakamura]

@inlet Nah, a lot of tests still failing. But if you can release to npm under next tag or something like that it would certainly be great for the folk out there. Because it's stable enough so the examples and stories works

[wallynm]

@saitonakamura, next PR i gonna try to start fixing tests so we can ensure a better version! I think today i can make some PR's improving tests

[saitonakamura]

We're slowly getting there guys

[Specy]

Wait will this new version still work for older react versions?

[saitonakamura]

@Specy no, this one only for react 18 But this consists of nothing new but support for react 18. If you use older versions you can just use react-pixi@6.*

Eventually we will stumble upon problems when we'll do fixes or new features/ cause we'll need to backport them to the other version . But let the future us worry about it

[saitonakamura]

Only 5 more test suits to go!

[mutewinter]

I'm using @saitonakamura/[email protected] and I spotted an edge-case bug:

On iOS Safari (tested on iOS 15.6 and iPadOS 15.6) React 18's new double effect firing in StrictMode causes the Application to be created twice in quick succession. This causes the GL context Pixi uses to be created twice, as well. In turn, this causes the Pixi app to throw with the error: Invalid value of 0 passed to checkMaxIfStatementsInShader.

I believe this is due to only one GL context being allowed at a time on iOS, but I may be wrong.

I temporarily fixed this by disabling strict mode. However, it seems like one would want to reuse Pixi Applications across subsequent renders like this.

To reproduce: run this branch with React 18 and StrictMode enabled on iOS.

Edit

On further inspection, it appears that Pixi always creates at least one additional canvas (presumably for testing). So this means we're likely hitting the 4 GL context limit, which makes more sense.