Allow custom app to be a function

[sheerun]

Description

Currently it's possible to pass custom app, but it's not possible to attach it to underlying canvas created by react-pixi-fiber. Ideally this libarry would allow provided app to be function that accepts canvas reference, like so:

  <Stage app={view => new PIXI.Application({
    view: view,
    width: 800,
    height: 500,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    clearBeforeRender: false,
    backgroundColor: 0xFFFFFF
  })}>

Unless there's another way I don't know about :)

[michalochman]

@sheerun canvas is not created by react-pixi-fiber if you pass your own app – it is created by PIXI.Application not by react so it doesn't make sense for React to inject it to DOM, you can easily do it on your own using appendChild method, e.g. on body.

[sheerun]

@michalochman I'm afraid it is created by react-pixi-fiber:

https://github.com/michalochman/react-pixi-fiber/blob/master/src/hooks.js#L68-L69

[michalochman]

No, it is not:
https://github.com/michalochman/react-pixi-fiber/blob/master/src/hooks.js#L45-L48

The main problem with your proposed solution is that app would be created every time <Stage /> is rendered.

[michalochman]

Let's leave this issue open as this is an interesting idea generally.

[sheerun]

@michalochman I've implemented proof of concept like this:
sheerun@e14ecb1

And it seems to work when used like this (app is created only one time):

function App() {
  return <Stage
    createApp={options => {
      console.log('Creating app with options:', options)
      return new PIXI.Application(options)
    }}
    options={{
      width: 800,
      height: 500,
      resolution: window.devicePixelRatio || 1,
      autoDensity: true,
      clearBeforeRender: false,
      backgroundColor: 0xFFFFFF
    }}
  >
    <TextInput
      x={250}
      y={200}
      width={100}
    />
  </Stage>
}

You can try it with yarn and:

    "react-pixi-fiber": "npm:@sheerun/react-pixi-fiber@^0.13.0",

[sheerun]

Another API that could be implemented is:

function App({ width, height }) {
  const app = usePixiApp(options => {
    console.log('Creating app with options:', options)

    return new PIXI.Application({
      width: width,
      height: height,
      resolution: window.devicePixelRatio || 1,
      autoDensity: true,
      clearBeforeRender: false,
      backgroundColor: 0xFFFFFF,
      ...options
    })
  }, [width, height])

  return <Stage app={app}>
    <TextInput
      x={250}
      y={200}
      width={100}
    />
  </Stage>
}