DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Vesa Piittinen
Vesa Piittinen

Posted on

How to display/output as template string?

I'm trying to make prettier HTML for my tests so that they are easy to read. This means I want to write them as template strings.

The problem is that tools do not output template strings, instead giving me diffs like this:

"'\\n<ul class=\"list\">\\n    <li class=\"list-item\">\\n        <input\\n            type=\"radio\"\\n            checked=\"\"\\n            name=\"item\"\\n            value=\"1\"\\n        />\\n    </li>\\n</ul>\\n'"
Enter fullscreen mode Exit fullscreen mode

Which I would like to see as:

`
<ul class="list">
    <li class="list-item">
        <input
            type="radio"
            checked=""
            name="item"
            value="1"
        />
    </li>
</ul>
`
Enter fullscreen mode Exit fullscreen mode

I could write a custom solution but is there an existing tool for this?

Top comments (2)

Collapse
 
merri profile image
Vesa Piittinen • Edited on

The poor man's solution... open Codepen and throw these codes:

<textarea rows="40" cols="120" style="font-family:monospace"></textarea>

.

document.getElementsByTagName('textarea')[0].textContent = eval(
    // copy-and-paste the above type of string here
)

Could automate more. Also noticed that apparently my setup for tap-nirvana isn't probably working right as I'm getting deepEqual comparisons in a very unfriendly syntax and the whole purpose for tap-nirvana is to give me pretty colors and diffs.

Collapse
 
merri profile image
Vesa Piittinen

Replaced tap-nirvana with tap-difflet and no more issues with double escaped strings and diffs are easier to read :)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!