fix/simplify i18n in templates

fix: double-translation, regressed in cc7eba9
This commit is contained in:
tophf 2022-02-12 01:44:30 +03:00
parent 648b295ef2
commit f9a2b9de35

View File

@ -13,6 +13,7 @@ Object.assign(t, {
template: {}, template: {},
parser: new DOMParser(), parser: new DOMParser(),
ALLOWED_TAGS: ['a', 'b', 'code', 'i', 'sub', 'sup', 'wbr'], ALLOWED_TAGS: ['a', 'b', 'code', 'i', 'sub', 'sup', 'wbr'],
PREFIX: 'i18n-',
RX_WORD_BREAK: new RegExp([ RX_WORD_BREAK: new RegExp([
'(', '(',
/[\d\w\u007B-\uFFFF]{10}/, /[\d\w\u007B-\uFFFF]{10}/,
@ -33,10 +34,12 @@ Object.assign(t, {
}, },
NodeList(nodes) { NodeList(nodes) {
const PREFIX = 'i18n-'; if (nodes instanceof Node) {
nodes = [nodes, ...nodes.getElementsByTagName('*')];
}
for (let n = nodes.length; --n >= 0;) { for (let n = nodes.length; --n >= 0;) {
const node = nodes[n]; const node = nodes[n];
if (node.nodeType !== Node.ELEMENT_NODE) { if (!node.localName) {
continue; continue;
} }
if (node.localName === 'template') { if (node.localName === 'template') {
@ -46,10 +49,10 @@ Object.assign(t, {
for (let a = node.attributes.length; --a >= 0;) { for (let a = node.attributes.length; --a >= 0;) {
const attr = node.attributes[a]; const attr = node.attributes[a];
const name = attr.nodeName; const name = attr.nodeName;
if (!name.startsWith(PREFIX)) { if (!name.startsWith(t.PREFIX)) {
continue; continue;
} }
const type = name.substr(PREFIX.length); const type = name.substr(t.PREFIX.length);
const value = t(attr.value); const value = t(attr.value);
let toInsert, before; let toInsert, before;
switch (type) { switch (type) {
@ -73,6 +76,7 @@ Object.assign(t, {
if (toInsert) { if (toInsert) {
node.insertBefore(toInsert, before || null); node.insertBefore(toInsert, before || null);
} }
node.removeAttribute(name);
} }
} }
}, },
@ -84,20 +88,16 @@ Object.assign(t, {
}, },
createTemplate(node) { createTemplate(node) {
const elements = node.content.querySelectorAll('*'); const el = node.content.firstElementChild.cloneNode(true);
t.NodeList(elements); t.NodeList(el);
t.template[node.dataset.id] = elements[0]; t.template[node.dataset.id] = el;
// compress inter-tag whitespace to reduce number of DOM nodes by 25% // compress inter-tag whitespace to reduce number of DOM nodes by 25%
const walker = document.createTreeWalker(elements[0], NodeFilter.SHOW_TEXT); const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
const toRemove = []; for (let n; (n = walker.nextNode());) {
while (walker.nextNode()) { if (!/[\xA0\S]/.test(n.textContent)) { // allow \xA0 to keep  
const textNode = walker.currentNode; n.remove();
if (!/[\xA0\S]/.test(textNode.nodeValue)) { // allow \xA0 to keep  
toRemove.push(textNode);
} }
} }
t.stopObserver();
toRemove.forEach(el => el.remove());
}, },
createText(str) { createText(str) {
@ -109,7 +109,7 @@ Object.assign(t, {
if (!trusted) { if (!trusted) {
t.sanitizeHtml(root); t.sanitizeHtml(root);
} else if (str.includes('i18n-')) { } else if (str.includes('i18n-')) {
t.NodeList(root.getElementsByTagName('*')); t.NodeList(root);
} }
const bin = document.createDocumentFragment(); const bin = document.createDocumentFragment();
while (root.firstChild) { while (root.firstChild) {
@ -122,7 +122,7 @@ Object.assign(t, {
let el = t.template[name]; let el = t.template[name];
if (!el) { if (!el) {
el = (await download(url, {responseType: 'document'})).body.firstElementChild; el = (await download(url, {responseType: 'document'})).body.firstElementChild;
t.NodeList(el.getElementsByTagName('*')); t.NodeList(el);
t.template[name] = el; t.template[name] = el;
} }
return el; return el;
@ -201,7 +201,7 @@ Object.assign(t, {
t.stopObserver(); t.stopObserver();
}, {once: true}); }, {once: true});
t.NodeList(document.getElementsByTagName('*')); t.NodeList(document);
start(); start();
function process(mutations) { function process(mutations) {