Ampersand escapes in text content handled differently to JSX · developit/htm#76

(11 comments) (5 reactions) (0 assignees)JavaScript (8,453 stars) (181 forks)batch import

discussionhelp wanted

説明

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`<div>&lt;</div>`)

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 https://jsx.egoist.moe/?mode=vue, <div><</div> 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`<div>${'<'}</div>`)

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

コントリビューターガイド

技術スタック: javascript
領域: frontend
Issue 種別: bug
難度: 2
推定時間: under 1 hour
活動状況: stale
明確さ: clear
前提条件: knowledge of htmunderstanding of HTML entitiesbasic JavaScript
初心者向け度: 60
調査方針: The issue is about ampersand escapes not being decoded in htm's template literal processing. The fix likely requires adding a lookup table for HTML entities in the tag function. Look at the source file (likely htm.mjs) for how text content is parsed from the template strings. The current behavior escapes entities as literal text. The expected behavior is to decode them, similar to JSX. A concrete first step is to identify where the text nodes are created and add a simple entity decoding step using a mapping of common entities like <, >, &, ", etc.