client.terminal.log({ type: 'html', ...}) doesn't work in latest remix-project

[Yoon-Suji]

I'm developing a remix plugin using @remixplugin v0.3.31, and I used the code below to output the html log to the remix terminal.

const html = (
  <CallResult
    result={val}
    from={deployedContract}
    to={abi.name === undefined ? '' : abi.name}
    hash="asdf"
  />
);
await client.terminal.log({ type: 'html', value: renderToString(html) });

export const CallResult: React.FunctionComponent<{
  result: Object;
  from: string;
  to: string;
  hash: string;
}> = ({ result, from, to, hash = 'asdf' }) => {
  return (
    <span id={`tx${hash}`} key={hash}>
      <div className="remix_ui_terminal_log">
        <i className="remix_ui_terminal_txStatus remix_ui_terminal_call">view</i>
        <div>
          <span>
            <span className="remix_ui_terminal_tx">[view]</span>
            <div className="remix_ui_terminal_txItem">
              <span className="remix_ui_terminal_txItemTitle">from:</span> {from}
            </div>
            <div className="remix_ui_terminal_txItem">
              <span className="remix_ui_terminal_txItemTitle">to:</span> {to}
            </div>
          </span>
        </div>
      </div>
      <table
        className={`mt-1 mb-2 mr-4  align-self-center active`}
        id="txTable"
        data-id={`txLoggerTable${hash}`}
      >
        <tbody>
          <tr className="remix_ui_terminal_tr">
            <td className="remix_ui_terminal_td" data-shared={`key_${hash}`}>
              output
            </td>
            <td
              className="remix_ui_terminal_td"
              data-id={`txLoggerTableHash${hash}`}
              data-shared={`pair_${hash}`}
            >
              {JSON.stringify(result, null, 4)}
            </td>
          </tr>
        </tbody>
      </table>
    </span>
  );
};

However, it does not work after pulling the remix-project to the latest version master branch.
Even if I specify 'html' for type, the terminal displays it as text-log.


When I run remix-project with git checkout 736099d it works well. Could you look into this issue?

[Yoon-Suji]

I tested some codes and got the following results(answering from gitter):

await client.terminal.log({ type: 'html',  value: '<div>terminal, log, html</div>' }); // (1) text-log
await client.terminal.log({ type: 'logHtml', value: '<div>terminal, log, logHtml</div>' }); // (2) no output
await client.call('terminal', 'log', { type: 'html', value: '<div>call, log, html</div>' }); // (3) text-log
await client.call('terminal', 'log', { type: 'logHtml', value: '<div>call, log, logHtml</div' }); // (4) no output
await client.call('terminal', 'logHtml', {type: 'html', value: '<div>call, logHtml, html</div>'}); // (5) html
await client.call('terminal', 'logHtml', {type: 'logHtml', value: '<div>call, logHtml, logHtml</div>'}); // (6) html

In conclusion, I can output the html log to the terminal when using
client.call('terminal', 'logHtml', {type: 'html', value: ...})
or
client.call('terminal', 'logHtml', {type: ‘logHtml', value: ...}).

I think it would be better to update the docs. In docs, the example code await client.call(‘terminal’, { type: ‘info’, value: ‘I am a string’ }) throws an error!