lui-templates 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lui-templates",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "transform html templates into lui components",
 	"repository": {
 		"type": "git",

package/src/parser.js

@@ -55,3 +55,136 @@ export const html_is_self_closing = tag => html_self_closing.includes(tag);
 
 const html_boolean_attrs = new Set('disabled,checked,selected,readonly,required,autofocus,autoplay,controls,loop,muted,open,hidden,multiple,defer,async,novalidate,formnovalidate'.split(','));
 export const html_is_boolean_attr = attr => html_boolean_attrs.has(attr.toLowerCase());
+
+const html_entity_map = new Map([
+	// Common punctuation and symbols
+	['lt', '<'],
+	['gt', '>'],
+	['amp', '&'],
+	['quot', '"'],
+	['apos', "'"],
+	// Common Latin characters with diacritics
+	['auml', 'ä'],
+	['Auml', 'Ä'],
+	['ouml', 'ö'],
+	['Ouml', 'Ö'],
+	['uuml', 'ü'],
+	['Uuml', 'Ü'],
+	['szlig', 'ß'],
+	['euml', 'ë'],
+	['Euml', 'Ë'],
+	['iuml', 'ï'],
+	['Iuml', 'Ï'],
+	['yuml', 'ÿ'],
+	['Yuml', 'Ÿ'],
+	['aacute', 'á'],
+	['Aacute', 'Á'],
+	['eacute', 'é'],
+	['Eacute', 'É'],
+	['iacute', 'í'],
+	['Iacute', 'Í'],
+	['oacute', 'ó'],
+	['Oacute', 'Ó'],
+	['uacute', 'ú'],
+	['Uacute', 'Ú'],
+	['yacute', 'ý'],
+	['Yacute', 'Ý'],
+	['agrave', 'à'],
+	['Agrave', 'À'],
+	['egrave', 'è'],
+	['Egrave', 'È'],
+	['igrave', 'ì'],
+	['Igrave', 'Ì'],
+	['ograve', 'ò'],
+	['Ograve', 'Ò'],
+	['ugrave', 'ù'],
+	['Ugrave', 'Ù'],
+	['acirc', 'â'],
+	['Acirc', 'Â'],
+	['ecirc', 'ê'],
+	['Ecirc', 'Ê'],
+	['icirc', 'î'],
+	['Icirc', 'Î'],
+	['ocirc', 'ô'],
+	['Ocirc', 'Ô'],
+	['ucirc', 'û'],
+	['Ucirc', 'Û'],
+	['atilde', 'ã'],
+	['Atilde', 'Ã'],
+	['ntilde', 'ñ'],
+	['Ntilde', 'Ñ'],
+	['otilde', 'õ'],
+	['Otilde', 'Õ'],
+	['aring', 'å'],
+	['Aring', 'Å'],
+	['ccedil', 'ç'],
+	['Ccedil', 'Ç'],
+	['aelig', 'æ'],
+	['AElig', 'Æ'],
+	['oslash', 'ø'],
+	['Oslash', 'Ø'],
+	['eth', 'ð'],
+	['ETH', 'Ð'],
+	['thorn', 'þ'],
+	['THORN', 'Þ'],
+	// Common symbols and special characters
+	['nbsp', '\u00A0'],
+	['copy', '©'],
+	['reg', '®'],
+	['trade', '™'],
+	['euro', '€'],
+	['cent', '¢'],
+	['pound', '£'],
+	['yen', '¥'],
+	['sect', '§'],
+	['para', '¶'],
+	['deg', '°'],
+	['plusmn', '±'],
+	['micro', 'µ'],
+	['middot', '·'],
+	['bull', '•'],
+	['hellip', '…'],
+	['prime', '′'],
+	['Prime', '″'],
+	['lsquo', '\u2018'],
+	['rsquo', '\u2019'],
+	['ldquo', '\u201C'],
+	['rdquo', '\u201D'],
+	['sbquo', '\u201A'],
+	['bdquo', '\u201E'],
+	['dagger', '†'],
+	['Dagger', '‡'],
+	['permil', '‰'],
+	['lsaquo', '‹'],
+	['rsaquo', '›'],
+	['ndash', '\u2013'],
+	['mdash', '\u2014'],
+	['minus', '−'],
+	['times', '×'],
+	['divide', '÷'],
+	['frac14', '¼'],
+	['frac12', '½'],
+	['frac34', '¾'],
+]);
+
+function html_entity_translate(match, entity) {
+	if (entity[0] === '#') {
+		const codePoint = (
+			entity[1].toLowerCase() === 'x'
+			?	parseInt(entity.slice(2), 16)
+			:	parseInt(entity.slice(1), 10)
+		);
+		if (
+			codePoint >= 0 && codePoint < 0x110000 &&
+			(codePoint < 0xD800 || codePoint >= 0xE000)
+		) {
+			return String.fromCodePoint(codePoint);
+		}
+	}
+	return html_entity_map.get(entity) || match;
+}
+
+export const html_unescape = text => text.replace(
+	/&([a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#[xX][0-9a-fA-F]+);/g,
+	html_entity_translate
+);

package/src/parsers/html.js

@@ -3,14 +3,15 @@ import {
 	VALUE_TYPE_STATIC,
 } from '../constants.js';
 import {
+	html_attr_to_dom,
 	html_is_self_closing,
 	html_is_whitespace,
-	html_attr_to_dom,
+	html_unescape,
 	html_whitespaces,
 } from '../parser.js';
 
-const TOKEN_HTML_START = 0;
-const TOKEN_HTML_END = 1;
+const TOKEN_TAG_START = 0;
+const TOKEN_TAG_END = 1;
 const TOKEN_TEXT = 2;
 
 export default async function parse_html(src, path) {
@@ -140,7 +141,7 @@ class Tokenizer {
 				this.chars_consume('>');
 
 				tokens.push({
-					type: TOKEN_HTML_END,
+					type: TOKEN_TAG_END,
 					...position,
 					tag_name,
 				});
@@ -175,7 +176,7 @@ class Tokenizer {
 		this.chars_consume('>');
 
 		const start_token = {
-			type: TOKEN_HTML_START,
+			type: TOKEN_TAG_START,
 			...position,
 			tag_name,
 			props,
@@ -188,7 +189,7 @@ class Tokenizer {
 			return [
 				start_token,
 				{
-					type: TOKEN_HTML_END,
+					type: TOKEN_TAG_END,
 					...position,
 					tag_name,
 				}
@@ -250,7 +251,7 @@ function build_nodes(tokens, index, index_end) {
 	for (; index < index_end; index++) {
 		const token = tokens[index];
 		switch (token.type) {
-		case TOKEN_HTML_START: {
+		case TOKEN_TAG_START: {
 			const {tag_name, props} = token;
 			const index_start = ++index;
 
@@ -259,10 +260,10 @@ function build_nodes(tokens, index, index_end) {
 			loop: for (; index < index_end; index++) {
 				const token = tokens[index];
 				switch (token.type) {
-				case TOKEN_HTML_START:
+				case TOKEN_TAG_START:
 					if (token.tag_name === tag_name) depth++;
 					break;
-				case TOKEN_HTML_END:
+				case TOKEN_TAG_END:
 					if (
 						token.tag_name === tag_name &&
 						--depth === 0
@@ -291,7 +292,7 @@ function build_nodes(tokens, index, index_end) {
 			});
 			break;
 		}
-		case TOKEN_HTML_END:
+		case TOKEN_TAG_END:
 			error(`Unexpected closing tag </${token.tag_name}>`, token);
 		case TOKEN_TEXT: {
 			let {value} = token;
@@ -333,7 +334,7 @@ function build_nodes(tokens, index, index_end) {
 				props: {
 					innerText: {
 						type: VALUE_TYPE_STATIC,
-						data: value,
+						data: html_unescape(value),
 					},
 				},
 				children: [],