Proposal: <screen /> root component

[iamdustan]

This is just a quick proposal to change the current render/mount syntax.

The motivation is to remove the need to require both react-blessed and blessed and let react-blessed manage both.

import {Screen, render} from 'react-blessed';

const App = () => (
  <Screen
    autoPadding={true}
    smartCSR={true}
    title="react-blessed hello world"
  >
    <box top="center"
         left="center"
         width="50%"
         height="50%"
         border={{type: 'line'}}
         style={{border: {fg: 'blue'}}}>
      Hello World!
    </box>
  </Screen>
);

render(<App />);

[Yomguithereal]

The problem here is that you won't have a reference on the screen easily and this is required to handle blessed nicely. The render function could return such reference but should really return the mounted component because it is needed by some Flux-like implementations and hot module reloaders (plus this is consistent with react-dom).

[iamdustan]

Is that reference necessary because you’re escaping out to the raw blessed API regularly? I suppose the consistency is in the browser you always have access to the global document. This * could* still be accomplished with a ref, but definitely constrains the escape hatch a bit.

[Yomguithereal]

The other thing is that you might want, as with react-dom to mount your react app in a precise node of an existing blessed application, as you can mount your React app on a precise DOM node. Plus you need the reference to be able to exit it and quit the program if needed.

[iamdustan]

Ah cool. So you can do something like

import myExistingBlessedApp from './app';

class ReactBlessedApp extends React.Component { /* ... */ }

render(<ReactBlessedApp />, myExistingBlessedApp.children[1][2][3]); // no idea what that API actually looks like

[Yomguithereal]

Yes, for instance.

[davidmarkclements]

alternatively return both screen and component?

import {Screen, render} from 'react-blessed';

const App = () => (
  <Screen
    autoPadding={true}
    smartCSR={true}
    title="react-blessed hello world"
  >
    <box top="center"
         left="center"
         width="50%"
         height="50%"
         border={{type: 'line'}}
         style={{border: {fg: 'blue'}}}>
      Hello World!
    </box>
  </Screen>
);

const {screen, component} = render(<App />);

could attach screen and component to component e.g.

//..snip..
component.component = component
component.screen = screen
return component
//..snip..

then we support both:

const component = render(<App/>)

and

const {component, screen} = render(<App/>)

or maybe better to do it vv.

//..snip..
screen.component = component
screen.screen = screen
return screen
//..snip..

const screen = render(<App/>)

and

const {component, screen} = render(<App/>)

doesn't mean you can't support mount points as well

[Yomguithereal]

The initial point was not to bind react-blessed to a specific version of blessed so I don't have to upgrade the dependencies along with blessed each time a minor/patch is released. Plus the idea was to let people mount an app on an already existing blessed app the same way you would with react-dom. I don't particularly see what we win by creating a screen component in react-blessed.