How to use xterm js in Tauri? | Tauri Apps | Page 1

Hi. I want to use xterm js to embed a terminal in my tauri app. I have written this code but it doesn't seems to work. Please help.

import { Box, BoxProps, VStack } from "@chakra-ui/react";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
export type XtermTerminalProps = BoxProps & {onInitializeTerminal?: (terminal: Terminal) => void;};
export const XtermTerminal: React.FC<XtermTerminalProps> = (props) => {
    const { onInitializeTerminal, ...boxProps } = props;
    const containerRef = useRef<HTMLDivElement>();
    const fitAddonRef = useRef<FitAddon>();
    const termRef = useRef<Terminal>();
    useEffect(() => {
        if (!containerRef.current) {return;}
        const term = new Terminal({fontFamily: "JetBrainsMono", fontSize: 12,});
        const fitAddon = new FitAddon();
        term.loadAddon(fitAddon);
        term.open(containerRef.current);
        fitAddonRef.current = fitAddon;
        termRef.current = term;
        function fitTerminal() {
            fitAddon.fit();
            void invoke<string>("async_resize_pty", {rows: term.rows,cols: term.cols,});
        }
        function writeToTerminal(ev: Event<string>) {term.write(ev.payload)}
        function writeToPty(data: string) { void invoke("async_write_to_pty", {data,}); }
        term.onData(writeToPty);
        window.addEventListener("resize", fitTerminal);
        listen("data", writeToTerminal);
        fitTerminal();
        return () => { term.dispose();
            window.removeEventListener("resize", fitTerminal); }
    }, [containerRef, fitAddonRef, termRef]);
    useEffect(() => {
        if (termRef.current && onInitializeTerminal) { onInitializeTerminal(termRef.current); }
    }, [onInitializeTerminal, termRef]);
    return (
        <VStack bg="black" p={2} {...boxProps} spacing={0} alignItems="stretch">
            <Box flex="1 0 0" overflow="hidden" ref={containerRef as MutableRefObject<HTMLDivElement>} />
        </VStack>
    );
};

#How to use xterm js in Tauri?