Custom renderer components show up on the root level

[HriBB]

Should I do something on my end, is this by design or is this a bug?

Here's a reproduction case https://github.com/HriBB/react-repro and package.json. As you can see, I am using all the latest versions of packages.

{
  "name": "react-repro",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "start": "next start",
    "build": "next build"
  },
  "dependencies": {
    "fbjs": "^1.0.0",
    "next": "^7.0.2",
    "paper": "^0.11.8",
    "react": "^16.7.0-alpha.0",
    "react-dom": "^16.7.0-alpha.0",
    "react-reconciler": "^0.17.0-alpha.0",
    "scheduler": "^0.11.0-alpha.0"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "flow-bin": "0.85.0"
  }
}

[bvaughn]

I believe this should be fixed by the 3.4.3 DevTools release that I just posted to Chrome and Firefox. Give it an hour or so to make sure it's propagated, then restart your browser. If the problem persists, let me know! I'm going to close this issue for now though under the assumption that it's fixed. 😄

[michalochman]

@bvaughn this is still not fixed, take a look at the following screenshot. I believe that, if this issue was resolved, <MyRectangle /> should render as a child of <canvas />.

---

React Dev Tools:

[bvaughn]

My apologies. 😦 I read this too fast initially and assumed the thing you were reporting was the "TODO_NOT_IMPLEMENTED_YET" tag names.

I'm not sure the behavior you're describing sounds like a bug. To be honest, I haven't really considered this case. I'll re-open for now.

[michalochman]

I'm not sure if it's a bug now, but the author of this issue was asking whether it is a bug or by design 😃I just happen to work on different renderer, but I have the same question.

It would be really great if there was only one tree in dev tools in such scenario, but I understand it may difficult as here the canvas element exists both as a DOM element that is rendered by react-dom and as a root container of another renderer (react-paper-renderer)

[bvaughn]

Understood. DevTools intentionally displays each injected renderer as its own root. I think it's rare for renderers to be mixed or nested in this way.

[michalochman]

I guess it's not common, but not that rare too: react-art, react-pdf, aframe-react, react-pixi-fiber, react-paperjs, all render in DOM context, just to name a few. It may have not been the case at all when react-devtools first came out, but it all changed after react-reconciler was made public.

This dev tool is already perfectly capable of working with various renderers and the issue mentioned here is probably only problematic when there are multiple instances of non react-dom renderers injected. After all, multiple react-dom renders on one page are also separate trees in devtools.

[HriBB]

@bvaughn I think @sophiebits did some work on react-art on this.

So if this is a bug, is there anything I can do to help?

Also, I have a use case, where I want to open a portal back to primary DOM renderer from inside my PaperJS renderer children. This is not possible yet

Something like:

import React, { useState } from 'react'
import Dialog from '@material-ui/core/Dialog'
import { View, Circle, MagicalPortal } from 'react-paper-renderer'

import { Layout } from './Layout'

function App() {
  return (
    <Layout>
      <View>
        <MyIcon comment="Portal through renderer" />
      </View>
    </Layout>
  )
}

function MyIcon({ comment }) {
  const [open, setOpen] = useState(false)
  return (
    <>
      {/* render this with custom renderer */}
      <Circle
        center={[100,200]}
        radius={16}
        fillColor={'red'}
        onClick={() => setOpen(true)}
      />
      {/* render this with primary renderer */}
      <MagicalPortal open={open}>
        <Dialog>...</Dialog>
      </MagicalPortal>
    </>
  )
}

So how would that look like?

[bvaughn]

@bvaughn I think @sophiebits did some work on react-art on this.

Can you clarify what you mean by this?

So if this is a bug, is there anything I can do to help?

I don't think it's a bug. I think it's probably working as designed.

Also, I have a use case, where I want to open a portal back to primary DOM renderer from inside my PaperJS renderer children.

Seems pretty different from what we're talking about? So maybe comment on the issue you linked to?

[HriBB]

@bvaughn you're right, it's not a bug. @sophiebits fixed ReactART not showing up in devtools in #167.

Closing.

[bvaughn]

Thanks for the update!