Preserving escape sequences with Tauri shell API and Vue3

Question

I'm creating a Tauri + Vue3 desktop app that uses Tauri's "shell" API to interact much like a terminal. I need to capture output from the shell and then display it in Vue. I want to preserve the escape sequences of the shell response (which I will then convert to HTML, but that's not the issue).

The issue is that I know how to preserve escape sequences with echo, but not with other shell commands that use escape sequences (e.g. for color output).

This works:

// (extra slashes to escape the escapes)
const str = `echo "\\033[1;37;42m SUCCESS! \\033[0m"`

const process = new Command("sh", ["-c", str])
const response = ref([])
   process.stdout.on("data", (line) => {
   console.log(line)
response.value.push(line)
})
process.spawn()

Outputs: [1;37;42m SUCCESS! [0m <-- good!

The problem:

How can I do the same thing with a shell command other than echo that has escape sequences? For example, "lsd" is a cli that lists directory items with color, so it must include escape sequences. But when I pass it to my string the same way as echo:

const str = `lsd -la`

I get the result without the escape sequences:

Outputs: (note: color below added by Stack Overflow. My results have no escape sequences for producing color).

drwxr-xr-x laz staff 576 B  Sat Nov  4 11:36:34 2023 ..
.rw-r--r-- laz staff  74 B  Wed Nov  1 20:46:35 2023 .gitignore
.rw-r--r-- laz staff  39 B  Wed Nov  1 20:46:35 2023 build.rs
.rw-r--r-- laz staff  89 KB Thu Nov  2 11:03:19 2023 Cargo.lock
.rw-r--r-- laz staff 608 B  Sat Nov  4 11:36:33 2023 Cargo.toml

Any help greatly appreciated.

Answer 1

OK I figured it out if it's helpful to others:

The problem was that lsd (and other cli tools) only send color in certain contexts. This solved the problem:

const str = `lsd -la --color always`