Uncaught Error: Unexpected token '.' in solid js for using "solid-js/html"

Question

Why html from "solid-js/html" is not working even though input to html`${output}` is given as string. en thought i wrap it with a the output is printer as div element spicetify v2.15.0 that b tag and content inside are strings

import Titlebar from "./components/Titlebar/Titlebar"
import "./Utils/Utils"
import { createSignal } from "solid-js"
import Convert from "ansi-to-html"
import html from "solid-js/html"

var convert = new Convert()

let shellOutput = []
const [currentShellOutput, setCurrentShellOutput] = createSignal(shellOutput)
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (args) => {
    args = convert.toHtml(args)
    setCurrentShellOutput((value) => {
        console.log(args) // args is a string eg: "<b>spicetify v2.15.0</b>"
        return value.concat([args])
    })
})

export default function App() {
    return (
        <>
            <Titlebar></Titlebar>
            {currentShellOutput().map((output) => html`${output}`)}
        </>
    )
}

Answer 1

If convert.toHtml(args) outputs an HTML element, then you can render it directly, so no need to stringify and parse again in (output) => html`${output}`).

If it is returning a valid HTML as a string, then you can create an element manually and set its innerHTML to the mapped value:

{currentShellOutput().map((output) => {
  const el = document.createElement('div');
  el.innerHTML = output;
  return el;
})}