/* * SonarQube * Copyright (C) 2009-2022 SonarSource SA * mailto:info AT sonarsource DOT com * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 3 of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { diffLines } from 'diff'; import { groupBy, keyBy } from 'lodash'; import { sanitizeString } from './sanitize'; const NUMBER_OF_EXAMPLES = 2; type DiffBlock = { noncompliant: Element; compliant: Element }; export default function applyCodeDifferences(element: Element | null) { if (element === null) { return; } const codeExamples = getExamplesFromDom(element); codeExamples.forEach(({ noncompliant, compliant }) => { if (noncompliant === undefined || compliant === undefined) { return; } const [markedNonCompliant, markedCompliantCode] = differentiateCode( noncompliant.innerHTML, compliant.innerHTML ); replaceInDom(noncompliant, markedNonCompliant); replaceInDom(compliant, markedCompliantCode); }); } function getExamplesFromDom(element: Element) { const pres = Array.from(element.querySelectorAll(`pre[data-diff-id]`)); return ( Object.values( groupBy( pres.filter(e => e.getAttribute('data-diff-id') !== undefined), e => e.getAttribute('data-diff-id') ) ) // If we have 1 or 3+ example we can't display any differences .filter(diffsBlock => diffsBlock.length === NUMBER_OF_EXAMPLES) .map( diffBlock => keyBy(diffBlock, block => block.getAttribute('data-diff-type')) as DiffBlock ) ); } function differentiateCode(compliant: string, nonCompliant: string) { const hunks = diffLines(compliant, nonCompliant); let nonCompliantCode = ''; let compliantCode = ''; hunks.forEach(hunk => { const value = sanitizeString(hunk.value); if (!hunk.added && !hunk.removed) { nonCompliantCode += `
${value}
`; compliantCode += `
${value}
`; } if (hunk.added) { compliantCode += `
${value}
`; } if (hunk.removed) { nonCompliantCode += `
${value}
`; } }); return [nonCompliantCode, compliantCode]; } function replaceInDom(current: Element, code: string) { const markedCode = document.createElement('pre'); markedCode.classList.add('code-difference-scrollable'); const flexDiv = document.createElement('div'); flexDiv.classList.add('code-difference-container'); flexDiv.innerHTML = code; markedCode.appendChild(flexDiv); current.parentNode?.replaceChild(markedCode, current); }