blessed-contrib support

[fbaiodias]

Hey @Yomguithereal!

What are your plans for blessed-contrib support? Were you thinking of adding its widgets to this module or would you create a different one?

I'm asking this because I wanted to use some of their widgets with react-blessed and didn't find any good way of doing it.

I did a little test where I hacked blessed-contrib into react-blessed and it seems to work fine.

Please let me know what was your idea :)

[Yomguithereal]

Hello @xicombd, I haven't chosen a way to integrate blessed-contrib yet but I have two possible options:

1. The one you display in your branch, i.e. make blessed-contrib widgets full-fledged react-blessed primitives (however, I feel that putting a dash between contrib and the widget name would be more readable: contrib-line rather than contribline.
2. Create an external react-blessed-contrib with full components able to render blessed-contrib widgets.

So, my opinion about this lately is the following: The first solution is the easiest to develop while the second is conceptually better (because blessed-contrib widgets are in fact higher-order blessed components over blessed primitives), but tedious to develop.

What do you think?

[fbaiodias]

Yeah, the first option is definitely easier to implement and to use.

Initially I was using the dash, but my syntax highlighter didn't like it, so I decided to follow the html naming and don't include anything between (eg. textarea, fieldset, etc). But I'm happy to change that if you think it's better.

I still don't see a good way of doing the second option, as from the way I'm seeing this, we would still want to use react-blessed the renderer, and what we're doing would be the equivalent of extending html with new tags and not composing new react components.

If you want to go with the second let me know and I'll do the PR.

[Yomguithereal]

Which syntax highlighter do you use? We could also try the : which reminds of xml namespaces.

[Yomguithereal]

@yaronn: sorry for bothering you but do you have an opinion about this topic and would it be fine with you if blessed-contrib widgets became primitives in react-blessed along with standard blessed ones?

[fbaiodias]

Which syntax highlighter do you use?

The Atom's default one with the Monokai theme.

[yaronn]

@Yomguithereal I don't have a strong opinion, I think it would be good if people can write their custom widgets and use them without turning them into primitives. From my perspective blessed contrib can be a primitive in react-blessed. If you do it please add a link to blessed-contrib in the first line of the readme. Good luck!

[Yomguithereal]

As I said, I would personally prefer the second solution which seems conceptually better and more extensible would someone need to create widgets on its own. The thing is I don't really know how to devise components without at least wrapping them within an element node and this feels really cumbersome.

[iamdustan]

Any reason to not make them full fledged components like:

import {ContibLine} from 'react-blessed';

Rather than the magic of the generic component string implementation?

[Yomguithereal]

@iamdustan, if I go this way, I'll make a different lib called react-blessed-contrib. The thing here is that is difficult to render the contrib components without wrapping them in unnecessary element tags if they are not primitive in the library. So I need to devise a better way to handle extensions of the native widgets. Do you have any idea how we could implement this?

[iamdustan]

On my phone right now so I'll respond fuller later, but the general I'm doing in react hardware (and taken from RN) is havethe component constructor take a making if valid attributes and provide a bunch of composite components out of the box.

A NativeMethodsMixin which extends the core components can give access to the underlying APIs.

What do you mean by wrapping in unnecessary tags? Could I see some example code of that?

[Yomguithereal]

Wrapping native methods seems to be the way to go. Are there examples of this in react-hardware I could base myself upon?

What I want to avoid is the following:

class ContribLine extends Component {

  componentDidMount() {
    const host = this.refs.host;

    host.append(contrib.line());
  }

  render() {

    // This element is actually useless and is
    // just a wrapper
    return <element ref="host" />;
  } 
}

[iamdustan]

The pattern (taken shamelessly from React Native) is to have your core React{Renderer}Component, a creator for it that has a bit of sugar for declaring the valid attributes for that property, and then the component itself.

Example component: https://github.com/iamdustan/react-hardware/blob/master/src/components/Potentiometer.js

https://github.com/iamdustan/react-hardware/blob/master/src/createReactHardwareComponentClass.js https://github.com/iamdustan/react-hardware/blob/master/src/ReactHardwareNativeComponent.js

Applying this to the <input />—for example—would automatically handle focus management with tab, a placeholder implementation, event handlers, etc.

class Input extends Component {
  componentDidMount() {
    this.refs.element.on('key', function(a, b) {
      this.props.onChange({value: this.refs.element.getValue(), target: this});
    });
    this.refs.element.readLine(function(a, b) {
      this.props.onChange({value: this.refs.element.getValue(), target: this});
    });
  }
  componentWillUnmount() {
    // undo the things
  }
  render() {
    // This is our private, internal component that we decorate here to make it behave like
    // a web `input` element
    return <Element ref="host" />;
  } 
}

const Element = createBlessedComponent({
  validAttributes: {
    placeholder: true,
    onChange: true,
    onFocus: true,
    onBlur: true,
    ...
  }
});

[Yomguithereal]

Thanks @iamdustan. Will check that.

[dundalek]

Hi all,

I wanted to use contrib widgets in a project, so I created a wrapper library (as suggested by the second solution). The components are passed into the react-blessed renderer. It is implemented by extending the ReactBlessedComponent so there is no need for host element for most widgets.

Here is the module https://github.com/dundalek/react-blessed-contrib with examples included.

[LordZardeck]

Where does this stand? It's been 5 Years since the last discussion, and react-blessed-contrib hasn't been updated in 3 years and doesn't seem to work with the latest version of this library.

[Yomguithereal]

@LordZardeck I may be mistaken since I haven't used blessed and blessed-contrib since quite some time now but I think it is now possible to create some kind of wrapper component that uses a ref to the rendered blessed node so that you can attach any blessed-contrib widget on it, no?