Comments (5)
HTM doesn't decode HTML Entities because doing so requires one of two things:
- a huge map of entities, which would be many times larger than HTM itself and would destroy performance (there's one in Babel, and probably 50 in your node_modules right now); or
- runtime entity decoding via innerHTML, which is extremely slow and only works in the browser.
Since neither of those two options are viable, we just don't support HTML Entities. They're only supported in JSX because doing so made sense in a very different context (in build tools in 2014).
@rozek 's solutions are what I'd recommend, or just use the character you want as a literal. If you want an emoji, paste the emoji into your editor and make sure your bundles are served with a utf-8 mime encoding - that's better than hand writing surrogate pairs π§ββοΈ.
from htm.
Similar issue with all Unicode HTML codes like 😀
(the smiley emoji). The htm library does not seem to handle HTML codes correctly.
I tried implementing the example below using the htm library instead of JSX, and it prints the code instead of the character.
https://codesandbox.io/s/8w7058yp9?from-embed=&file=/src/index.js
@openHawkes have you heard anything back or have you found a solution?
from htm.
@tim-lynn-clark I have not been contacted or found a solution past sort of hackily inserting whitespace in a somewhat odd place in my template instead of using
. Fortunately or unfortunately, that's allowed me to move on for the time being instead of cracking open the code of HTM [which for the most part I've really enjoyed using!].
from htm.
Just a small note (in case that somebody likes it):
as long as HTML entities will not be rendered properly, I'll use alternatives such as ${'\xA0'}
(for non-breaking spaces), ${'\x--'}
for arbitrary ASCII codes or ${'\u----'}
for arbitrary Unicode code points instead.
If you prefer s.th. more human-readable, you could define
const nbsp = '\xA0'
return html`${nbsp}`
This approach can also be used for decimal character codes (in case that you don't want to convert them into hexadecimal):
const SmileyEmoji = String.fromCodePoint(128512)
return html`${SmileyEmoji}`
(the character code was taken from a previous message in this issue, it does not show any emoji on my machine...)
from htm.
Thank you for clarifying this!
Wouldn't you like to add this constraint to the docs? This would prevent others to run into the same problem - and you could close this issue afterwards...
from htm.
Related Issues (20)
- createRef not available via unpkg HOT 1
- Syntax highlighting for Sublime Text? HOT 1
- async function is not renderd HOT 1
- just a small note: standalone bundle of htm with preact and preact/signals HOT 2
- different attribute handling in div/span etc. and svg HOT 5
- Zero is translated as empty string when htm is bound to vhtml HOT 1
- https://mobidrivems.page.link/?link=https://mobidrive.com/sharelink/u/6uCDyxQyzUTH0BaAaUu4Jn5sdtlGxm32pJYzqnYSgR9n?sharelink%3D6uCDyxQyzUTH0BaAaUu4Jn5sdtlGxm32pJYzqnYSgR9n&isi=1558848373&ibi=com.mobisystems.MobiDrive&cid=176997065316222436&_fpb=CKwGEPcCGgVuYi1OTw==&_cpt=cpit&_iumenbl=1&_iumchkactval=1&_plt=1072&_uit=4490&_cpb=1&_icp=1 HOT 2
- Difficulty combining htm with preact and material ui HOT 2
- type of htm/preact and htm directly are different HOT 1
- no build preact/htm from browser and no modules HOT 1
- possibility to return monomorphic shape?
- RΓ‘dio online
- Some documentation would be nice
- html string added in template form treated as string, not html HOT 1
- Hooks Problem HOT 7
- Trimming newlines near elements
- Add support iterator HOT 1
- Can we say htm as internal dsl HOT 1
- How to correctly handle these double quotes? HOT 2
- Syntax goals HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from htm.