developit / developit/htm

Ampersand escapes in text content handled differently to JSX

Open
#76 11 comments 5 reactions 0 assignees View on GitHub
discussion help wanted
Dominant language
JavaScript
Stars
9k
Forks
181
PR merge metrics
No merged PRs in 30d

Description

## Reproduction

With the following code:

```
import htm from "https://unpkg.com/htm@2.1.1/dist/htm.mjs";
import { h } from "https://unpkg.com/preact@8.4.2/dist/preact.mjs";
const html = htm.bind(h);

console.log(html`

<
`)
```

I get a VNode with `.children = ["<"]` — i.e. what I mean to render as `<` gets rendered as `<` instead.

## Expected results

Testing this in JSX via say , `

<
` gets transformed into `h("div", ["<"]);` as I originally expected.

I haven't poked into how they are doing this… seems like something that ultimately relies on a lookup table.

## Workaround

I am able to escape via string interpolation (e.g. `${'<'}` instead of `<`). Changing the last line in my sample code to:

```
// …

console.log(html`

${'<'}
`)
```

Results in a VNode with `.children = ["<"]` as I need. Is this the recommended style?

Contributor guide

Open the contributing guide

Research direction

Start with the tagged-template entry point shown in the reproduction: htm.bind(h) and the text content inside the template. Compare how literal ampersand escapes and interpolated strings are tokenized, using the provided VNode output as the baseline. Done means text entities such as < produce the corresponding decoded text, consistently with JSX, without breaking interpolation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.