Function XtermWrapper

packages/web/src/components/xtermWrapper.tsx:32–105

({
  source,
})

};

export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
  source,
}) => {
  const [measure, xtermElement] = useMeasure<HTMLDivElement>();
  const [theme, setTheme] = React.useState(currentDocumentTheme());
  const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default));
  const terminal = React.useRef<{ terminal: Terminal, fitAddon: FitAddon } | null>(null);

  React.useEffect(() => {
    addThemeListener(setTheme);
    return () => removeThemeListener(setTheme);
  }, []);

  React.useEffect(() => {
    const oldSourceWrite = source.write;
    const oldSourceClear = source.clear;

    (async () => {
      // Always load the module first.
      const { Terminal, FitAddon } = await modulePromise;
      const element = xtermElement.current;
      if (!element)
        return;

      const terminalTheme = theme === 'dark-mode' ? darkTheme : lightTheme;
      if (terminal.current && terminal.current.terminal.options.theme === terminalTheme)
        return;

      if (terminal.current)
        element.textContent = '';

      const newTerminal = new Terminal({
        convertEol: true,
        fontSize: 13,
        scrollback: 10000,
        fontFamily: 'monospace',
        theme: terminalTheme,
      });

      const fitAddon = new FitAddon();
      newTerminal.loadAddon(fitAddon);
      for (const p of source.pending)
        newTerminal.write(p);
      source.write = (data => {
        source.pending.push(data);
        newTerminal.write(data);
      });
      source.clear = () => {
        source.pending = [];
        newTerminal.clear();
      };
      newTerminal.open(element);
      fitAddon.fit();
      terminal.current = { terminal: newTerminal, fitAddon };
    })();
    return () => {
      source.clear = oldSourceClear;
      source.write = oldSourceWrite;