Ink: Multiple ink apps

[asadm]

Hi,

I am trying to run one ink app, wait until it exits and then start another ink app. This doesn't seem to work. Here is an example code:

import {Color, AppContext, render} from 'ink';
import React, {Component} from 'react'

class Elem extends Component{
  constructor(){
    super()
    setTimeout(() => {
      this.props.exit()
    }, 2000);
  }

  render(){
    return (<Color bold>{this.props.text}</Color>)
  }
}

const ElemApp = ({text})=>(
  <AppContext.Consumer>
    {({ exit }) => (
      <Elem text={text} exit={exit}/>
    )}
  </AppContext.Consumer>
)

async function start(){
  const app = render(<ElemApp text="App 1" />);
  await app.waitUntilExit()
  const app2 = render(<ElemApp text="App 2" />);
  await app2.waitUntilExit()
  console.log("finished")
}

start()

App 1 renders fine but App 2 never renders and directly jumps to finished line.
Am I doing it wrong?
Thanks

[vadimdemedes]

I'll take a look and reply back here, thanks!

[Jarred-Sumner]

I'm having a similar issue, except instead of skipping the 2nd render, it just hangs. It doesn't render the 2nd Ink app.

export function startDevServer(cwd: string) {
  const stores = {
    components: observable.array([])
  };

  const { waitUntilExit } = render(
    <Provider {...stores}>
      <DevServerComponent cwd={cwd} />
    </Provider>
  );

  return waitUntilExit();
}

const getNameAndChoice = (defaultName: string | null): Promise<any> => {
  return new Promise(resolve => {
    const { unmount } = render(
      <BoilerplatePicker
        defaultName={defaultName || null}
        onSelect={(choice, name) => {
          resolve([choice, name]);
          unmount();
        }}
      />
    );
  });
};

export async function newCommand(
  defaultName: string | null,
  destination: string | null,
  autoOpen: boolean
) {
  const user = await requireLogin();

  const _destination = destination || __dirname;

  const [choice, name] = await getNameAndChoice(defaultName);

  // ... unrelated code that prints some logs and writes some files

  await startDevServer(_destination);
}

Edit: nevermind. It's the same behavior. I put the log in the wrong place. 🤦‍♂

[Jarred-Sumner]

I worked around it by forking the process :joy:

return require("child_process").fork(cmdName, ["dev"], {
    cwd: _destination,
    env: process.env,
    detached: false
  });

[vadimdemedes]

Thanks for a detailed bug report, guys! Issue should be fixed via https://github.com/vadimdemedes/ink/commit/6889f47e5c67210e780c357f0fbb51297a25f5e2.

@Jarred-Sumner @asadm would you be able to pull Ink's master (npm install vadimdemedes/ink) and verify that it solved your problem? I will do a new release afterwards.

[vadimdemedes]

Fixed in 2.3.0.