Resizing not working on Svelte

[BearToCode]

Resizing causes the text to disappear on Svelte. This is a simple REPL you can try online:
https://svelte.dev/repl/49e256b936604e9ab94e357930891130?version=3.49.0
Ideally, it should work like this (React):
https://codesandbox.io/s/9szg9?file=/src/App

Old post

I'm trying to handle xterm resize in a desktop app (Tauri - Svelte - Vite), but resizing using fitAddon.fit() causes loss of data and does not resize correctly:

This is seems like an old issue fixed time ago:
#325 #616

This is basically my terminal component:
UPDATE: look my other comment for cleaner code

<script lang="ts">
	import { onDestroy, onMount } from 'svelte';
	import { FitAddon } from 'xterm-addon-fit';
	import resolveConfig from 'tailwindcss/resolveConfig';
	import tailwindConfig from 'tailwind.config.cjs';
	import 'xterm/css/xterm.css';

	// tailwind
	const fullConfig = resolveConfig(tailwindConfig);

	let termElem: HTMLElement;
	let xterm: any;
	
	let term: any;
	let fitAddon: any;

	onMount(async () => {
		xterm = await import('xterm');
		fitAddon = new FitAddon();
		term = new xterm.Terminal({
			theme: {
				background: fullConfig.theme.colors.primary['700'],
			},
		});

		term.loadAddon(fitAddon);
		term.open(termElem);
		fitAddon.fit();

		term.onKey(key => {
                      const char = key.domEvent.key;
                      if (char === "Enter") {
                        this.prompt();
                      } else if (char === "Backspace") {
                        term.write("\b \b");
                      } else {
                        term.write(char);
                      }
                    });

		term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $   ');
	});

	// Handle resize
	export const resizeTerminal = () => {
		fitAddon.fit();
		term.write(`${term.cols} /`);
	}

	window.addEventListener('resize', resizeTerminal);

	onDestroy(() => {
		window.removeEventListener('resize', resizeTerminal);
	})
</script>

<div
class="w-full h-full text-primary-200 border border-red-500"
id="terminal"
bind:this={termElem}
/>

How to reproduce

With tauri prerequisites installed (https://tauri.app/v1/guides/getting-started/prerequisites) download my repo:
https://github.com/BearToCode/xterm-resize-not-working
Use npm install and npm run tauri dev.

Details

• Browser and browser version:
  Webview2: 103.0.1264.4 (Tauri on Windows 11)
• OS version:
  OS: Windows 10.0.22000 X64 (Windows 11)
• xterm.js version:
  xterm@4.19.0, xterm-addon-fit@0.5.0

[Tyriar]

Can you clarify where the data loss is in the gif?

[BearToCode]

The problem is that the text that goes outside the screen is not sent to the row below but just disappear. This is another example:

Numerus.2022-07-06.14-43-13.mp4

Another thing I noticed is that, even thought I call fitAddont.fit() in the onMount() method, the terminal does not immediately fit the container.

[BearToCode]

Some cleaner code:

<script lang="ts">
	import { onMount } from 'svelte';
	import 'xterm/css/xterm.css';
	import * as xterm from 'xterm';
	import * as fit from 'xterm-addon-fit';
	import ResizeObserver from 'svelte-resize-observer';
	
	let terminalElement: HTMLElement;
	let terminalController: xterm.Terminal;
	let termFit: fit.FitAddon;
	$: {
		if (terminalController) {
			// ...
		}
	}
	function initalizeXterm() {
		terminalController = new xterm.Terminal();
		termFit = new fit.FitAddon();
		terminalController.loadAddon(termFit);
		terminalController.open(terminalElement);
		termFit.fit();
		terminalController.write('I am a terminal!');
		terminalController.onData((e) => {
			console.log(e);
		})
	}
	onMount(async () => {
		initalizeXterm();
	})
	function handleTermResize() {
		if (termFit) {
			termFit.fit();
			console.log("Resizing!");
		}
	}
</script>

<!-- Actual terminal -->
<div 
	id="terminal"
	bind:this="{terminalElement}"
/>

<!-- Resize observer -->
<div class="absolute top-0 bottom-0 left-0 right-0">
	<ResizeObserver on:resize={handleTermResize}/>
</div>

[Tyriar]

When this happens it means reflow isn't working properly which is controlled by this:

xterm.js/src/common/buffer/Buffer.ts

Lines 255 to 257 in 54cbbf6

	private get _isReflowEnabled(): boolean {
	return this._hasScrollback && !this._optionsService.rawOptions.windowsMode;
	}

Could you try debugging into that and checking what the values are?

[BearToCode]

Debugging into that it looks like the function returns true. I created a basic repo so that you can test it yourself if you'd like:
https://github.com/BearToCode/xterm-resize-not-working
Use npm run tauri dev to execute, you need to have rust installed (https://tauri.app/v1/guides/getting-started/prerequisites).

[BearToCode]

I tried to only use svelte and it also does not work. I used the same code as before and the same issue appear, so it has do to with svelte (or my code)! I also could not find any successful implementation of fitAddon with svelte online.

[BearToCode]

This is an online example:
https://svelte.dev/repl/49e256b936604e9ab94e357930891130?version=3.49.0
I also updated my first message

[BearToCode]

Found the issue!! This happens because I do not have a '\n' at the end of the line! I have no clue why it works this way but now it started working! Check the REPL