Question: compatibility with ink components?

[bard]

Can ink components be used with react-cli?

[mgrip]

That's a great question. My first guess is no, but let me investigate a bit and confirm

[mgrip]

Yup - as an example here's the ink-spinner component source code. Currently react-ink doesn't actually use react, it mimics a lot of the basic ideas from react in its own framework. So you can see in this component its using the Component class from react-ink as opposed to react itself. I think that means most/all react-ink components won't work with this library unfortunately.

On the other hand, this also means that other existing react components can be used with this library (assuming they don't render any DOM elements).

[bard]

I actually gave ink-spinner a try and it almost worked out of the box, I only had to change this:

  render(props, {frame}) {

Into this:

  render() {
    const { props, state: { frame } } = this

And removed <Color> (to keep things simple).

Maybe porting other components wouldn't be as smooth.

(By the way, please consider putting up an example project that can be clone and built... I ended up using startd as a starter)

[mgrip]

Huh that's interesting - did you also have ink installed as a dependency? Because I believe ink-spinner depends on that as a peer dependency. Anyways good to know though that it hopefully wouldn't be much work to convert other ink components!

And yes great idea about putting up an example project - I'll open a new issue for that right now!

[bard]

I didn't install the component via npm, I just copy/pasted its source in the project, so no, ink was nowhere in sight. Agreed it's promising. :)

[cspotcode]

You only had to change the render() method. Does this mean we could implement some sort of Ink adapter class that converts the method signatures appropriately? So that a bunch of Ink components could be compiled or loaded against this React-CLI compatibility layer?

[mgrip]

Potentially. I'm still a little un-easy about guaranteeing or encouraging inter-op between ink and this library, since ink doesn't use the actual react library. I totally understand that there are already a lot of ink components that have been built out, and being able to piggy-back off those would really help people to start using this library - I'm just not sure about "officially" supporting that under this repo.

@cspotcode + @bard if anyone wants to attempt something like @cspotcode mentioned above, as a separate repository, we could definitely let people know about it in the README, and I'd be happy to help/give advice where I can!

[cspotcode]

@mgrip @bard check it out! I wrote a hack that (hopefully) makes Ink components run on React.

https://github.com/cspotcode/ink-on-reactcli

Give it a whirl and let me know what you think.

"./src/example/ui.tsx" has a minimal example using ink-spinner. You can add more components (everything from Ink's README is installed as devDependencies) and see if they behave. npm run example, to see it in action.

[mgrip]

This is awesome, thanks @cspotcode! I'll update the README to let people know about your repo if they're interested in re-using ink components 😄

[mgrip]

Also just a heads up before anyone invests too much more time in this project... #10