Change:
const tokenText = semTokenText || tmTokenText || ''; <del> let result = ''; result += `<h2 class="tiw-token">${tokenText}<span class="tiw-token-length">(${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'})</span></h2>`; result += `<hr class="tiw-metadata-separator" style="clear:both"/>`; result += `<table class="tiw-metadata-table"><tbody>`; result += `<tr><td class="tiw-metadata-key">language</td><td class="tiw-metadata-value">${escape(tmMetadata?.languageIdentifier.language || '')}</td></tr>`; result += `<tr><td class="tiw-metadata-key">standard token type</td><td class="tiw-metadata-value">${this._tokenTypeToString(tmMetadata?.tokenType || StandardTokenType.Other)}</td></tr>`; result += this._formatMetadata(semMetadata, tmMetadata); result += `</tbody></table>`; </del> <ins> dom.reset(this._domNode, $('h2.tiw-token', undefined, tokenText, $('span.tiw-token-length', undefined, `${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'}`))); dom.append(this._domNode, $('hr.tiw-metadata-separator', { 'style': 'clear:both' })); dom.append(this._domNode, $('table.tiw-metadata-table', undefined, $('tbody', undefined, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'language'), $('td.tiw-metadata-value', undefined, tmMetadata?.languageIdentifier.language || '') ), $('tr', undefined, $('td.tiw-metadata-key', undefined, 'standard token type' as string), $('td.tiw-metadata-value', undefined, this._tokenTypeToString(tmMetadata?.tokenType || StandardTokenType.Other)) ), ...this._formatMetadata(semMetadata, tmMetadata) ) )); </ins> if (semanticTokenInfo) { <del> result += `<hr class="tiw-metadata-separator"/>`; result += `<table class="tiw-metadata-table"><tbody>`; result += `<tr><td class="tiw-metadata-key">semantic token type</td><td class="tiw-metadata-value">${semanticTokenInfo.type}</td></tr>`; </del> <ins> dom.append(this._domNode, $('hr.tiw-metadata-separator')); const table = dom.append(this._domNode, $('table.tiw-metadata-table', undefined)); const tbody = dom.append(table, $('tbody', undefined, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'semantic token type' as string), $('td.tiw-metadata-value', undefined, semanticTokenInfo.type) ) )); </ins> if (semanticTokenInfo.modifiers.length) { <del> result += `<tr><td class="tiw-metadata-key">modifiers</td><td class="tiw-metadata-value">${semanticTokenInfo.modifiers.join(' ')}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'modifiers'), $('td.tiw-metadata-value', undefined, semanticTokenInfo.modifiers.join(' ')), )); </ins> } if (semanticTokenInfo.metadata) { const properties: (keyof TokenStyleData)[] = ['foreground', 'bold', 'italic', 'underline']; const propertiesByDefValue: { [rule: string]: string[] } = {}; <del> const allDefValues = []; // remember the order </del> <ins> const allDefValues = new Array<[Array<HTMLElement | string>, string]>(); // remember the order </ins> // first collect to detect when the same rule is used for multiple properties for (let property of properties) { if (semanticTokenInfo.metadata[property] !== undefined) { const definition = semanticTokenInfo.definitions[property]; const defValue = this._renderTokenStyleDefinition(definition, property); <del> let properties = propertiesByDefValue[defValue]; </del> <ins> const defValueStr = defValue.map(el => el instanceof HTMLElement ? el.outerHTML : el).join(); let properties = propertiesByDefValue[defValueStr]; </ins> if (!properties) { <del> propertiesByDefValue[defValue] = properties = []; allDefValues.push(defValue); </del> <ins> propertiesByDefValue[defValueStr] = properties = []; allDefValues.push([defValue, defValueStr]); </ins> } properties.push(property); } } <del> for (let defValue of allDefValues) { result += `<tr><td class="tiw-metadata-key">${propertiesByDefValue[defValue].join(', ')}</td><td class="tiw-metadata-value">${defValue}</td></tr>`; </del> <ins> for (const [defValue, defValueStr] of allDefValues) { dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, propertiesByDefValue[defValueStr].join(', ')), $('td.tiw-metadata-value', undefined, ...defValue) )); </ins> } } <del> result += `</tbody></table>`; </del> } if (textMateTokenInfo) { let theme = this._themeService.getColorTheme(); <del> result += `<hr class="tiw-metadata-separator"/>`; result += `<table class="tiw-metadata-table"><tbody>`; </del> <ins> dom.append(this._domNode, $('hr.tiw-metadata-separator')); const table = dom.append(this._domNode, $('table.tiw-metadata-table')); const tbody = dom.append(table, $('tbody')); </ins> if (tmTokenText && tmTokenText !== tokenText) { <del> result += `<tr><td class="tiw-metadata-key">textmate token</td><td class="tiw-metadata-value">${tmTokenText} (${tmTokenText.length})</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'textmate token' as string), $('td.tiw-metadata-value', undefined, `${tmTokenText} (${tmTokenText.length})`) )); </ins> } <del> let scopes = ''; </del> <ins> const scopes = new Array<HTMLElement | string>(); </ins> for (let i = textMateTokenInfo.token.scopes.length - 1; i >= 0; i--) { <del> scopes += escape(textMateTokenInfo.token.scopes[i]); </del> <ins> scopes.push(textMateTokenInfo.token.scopes[i]); </ins> if (i > 0) { <del> scopes += '<br>'; </del> <ins> scopes.push($('br')); </ins> } } <del> result += `<tr><td class="tiw-metadata-key">textmate scopes</td><td class="tiw-metadata-value tiw-metadata-scopes">${scopes}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'textmate scopes' as string), $('td.tiw-metadata-value.tiw-metadata-scopes', undefined, ...scopes), )); </ins> let matchingRule = findMatchingThemeRule(theme, textMateTokenInfo.token.scopes, false); const semForeground = semanticTokenInfo?.metadata?.foreground; if (matchingRule) { <del> let defValue = `<code class="tiw-theme-selector">${matchingRule.rawSelector}n${JSON.stringify(matchingRule.settings, null, 't')}</code>`; </del> if (semForeground !== textMateTokenInfo.metadata.foreground) { <ins> let defValue = $('code.tiw-theme-selector', undefined, matchingRule.rawSelector, $('br'), JSON.stringify(matchingRule.settings, null, 't')); </ins> if (semForeground) { <del> defValue = `
${defValue}
`; </del> <ins> defValue = $('s', undefined, defValue); </ins> } <del> result += `<tr><td class="tiw-metadata-key">foreground</td><td class="tiw-metadata-value">${defValue}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'foreground'), $('td.tiw-metadata-value', undefined, defValue), )); </ins> } } else if (!semForeground) { <del> result += `<tr><td class="tiw-metadata-key">foreground</td><td class="tiw-metadata-value">No theme selector</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'foreground'), $('td.tiw-metadata-value', undefined, 'No theme selector' as string), )); </ins> } <del> result += `</tbody></table>`; </del> } <del> return result; </del> } <del> private _formatMetadata(semantic?: IDecodedMetadata, tm?: IDecodedMetadata) { let result = ''; </del> <ins> private _formatMetadata(semantic?: IDecodedMetadata, tm?: IDecodedMetadata): Array<HTMLElement | string> { const elements = new Array<HTMLElement | string>(); </ins> function render(property: 'foreground' | 'background') { let value = semantic?.[property] || tm?.[property]; if (value !== undefined) { const semanticStyle = semantic?.[property] ? 'tiw-metadata-semantic' : ''; <del> result += `<tr><td class="tiw-metadata-key">${property}</td><td class="tiw-metadata-value ${semanticStyle}">${value}</td></tr>`; </del> <ins> elements.push($('tr', undefined, $('td.tiw-metadata-key', undefined, property), $(`td.tiw-metadata-value.${semanticStyle}`, undefined, value) )); </ins> } return value; }

Discussion:
<!-- Do Not Delete This! featurerequesttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Describe the feature you'd like. --The next step in resolving . Simirarly to , it aims to replace construction of HTML elements by string concatenation in file. The code contains mainly a table construction by concatenating strings of . The goal is to replace them all with function calls.
I verified by running the monaco editor from source and testing the inspect token hover
To verify, open the hover and verify it looks all proper.