Browser support

[timsuchanek]

I tried out running ink in the browser and there seem to be the following complications:

First point of failure is, that readline doesn't exist in the browser https://github.com/vadimdemedes/ink/blob/master/src/components/App.js#L1

As we just want a non-interactive renderer which we plug in to xterm.js, we don't need readline.

Removing readline gives the next error: stdin not defined.

That can also be fixed, by passing it into the render function.

Last problem: Chalk doesn't render the colors, even though xterm is able to render them.

I created an example app that even supports the keyboard events and rerendering with a spinner component: https://github.com/timsuchanek/ink-browser

Demo: https://ink-demo.netlify.com/

You can click into the terminal and go up and down in the select ;)

[vadimdemedes]

That's pretty cool! I was planning to make Ink work in the browser soon as well to create some interactive demos for its website.

First point of failure is, that readline doesn't exist in the browser /src/components/App.js@master#L1

I think it's possible to replace readline with your own fake module to suppress this error in the browser. The only method it needs to export is emitKeypressEvents, see https://github.com/vadimdemedes/ink/blob/master/src/components/App.js#L100.

Last problem: Chalk doesn't render the colors, even though xterm is able to render them.

Chalk doesn't render colors, because it checks for terminal color support first, and there's nothing it can find in the browser environment. See https://github.com/chalk/chalk/tree/v2.4.2#chalkenabled.

[timsuchanek]

Yes, you can have a look into the patches I did to make it work: https://github.com/timsuchanek/ink-browser/tree/master/patches

And we're already using it to document our CLI with mdx: https://prisma-specs.netlify.com/cli/init/ https://github.com/prisma/specs/tree/master/cli

[vadimdemedes]

That's amazing! Have you tried my suggestions above? I think these fixes should be enough to make Ink work in the browser and not require patches you've linked to, since these will most likely break eventually.

[deanrad]

I'm trying ink in the browser (v 2.4.0), and not running into the readline problem. Is it possible more work went into this but the issue never got closed? I'm not sure it's going to be worth it for me, since pixel math and fonts are tricky, but I was excited to even see divs with appropriate flexbox properties. Gotta love React (and your work on this lib @vadimdemedes!)

[vadimdemedes]

Hey @deanius, thanks! Ink got rid of emitKeypressEvents usage (https://github.com/vadimdemedes/ink/commit/4960ff799a9ba53dafbf66df2433f0156c01e4ac#diff-57aa11691094c3295e1f9dcbe8432ba2L100), so it's indeed should longer be an issue. Btw, I now realize this may have been a breaking change! Haven't had any reports so far, I assume most people have just used ink-text-input for user input and didn't use keypress events directly.

[mAAdhaTTah]

If we can get that working in the browser, it would be really awesome to be able to plug components into Storybook.

[skorfmann]

Here's a demo running ink with xtermjs in a browser https://ink-storybook.netlify.app/ - Would be cool to actually make this into a storybook component :) - see https://github.com/storybookjs/storybook/issues/11607 as well

[ar-to]

this feature could make this project more interesting.