Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(docs-infra): drop support for providing a file diff in docs-code

Browse source 
Drop support for exposing a diff view in the docs-code element as it is unused and costly to even check for
This commit is contained in:
Joey Perrott 2025-11-20 20:39:18 +00:00 committed by Kirill Cherkashin
parent fee79e37d5
commit 8ec0a4ee5c
9 changed files with 2 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
adev/shared-docs/components/copy-source-code-button/copy-source-code-button.component.spec.ts
View file

@ -56,24 +56,6 @@ describe('CopySourceCodeButton', () => {
expect(copySpy.calls.argsFor(0)[0].trim()).toBe(expectedCodeToBeCopied);
});
it('should not copy lines marked as deleted when code snippet contains diff', async () => {
const codeInHtmlFormat = `
<code>
<div class="line remove"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let product of products"</span>&gt;</span></div>
<div class="line add"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let product of products()"</span>&gt;</span></div>
</code>
`;
const expectedCodeToBeCopied = `<div *ngFor="let product of products()">`;
component.code.set(codeInHtmlFormat);
await fixture.whenStable();
const button = fixture.debugElement.query(By.directive(CopySourceCodeButton)).nativeElement;
button.click();
expect(copySpy.calls.argsFor(0)[0].trim()).toBe(expectedCodeToBeCopied);
});
it(`should set ${SUCCESSFULLY_COPY_CLASS_NAME} for ${CONFIRMATION_DISPLAY_TIME_MS} ms when copy was executed properly`, () => {
const clock = jasmine.clock().install();
component.code.set('example');

3
adev/shared-docs/pipeline/shared/marked/extensions/docs-code/docs-code.mts
View file

@ -27,7 +27,6 @@ const classRule = /class="([^"]*)"/;
const headerRule = /header="([^"]*)"/;
const linenumsRule = /linenums/;
const highlightRule = /highlight="([^"]*)"/;
const diffRule = /diff="([^"]*)"/;
const languageRule = /language="([^"]*)"/;
const visibleLinesRule = /visibleLines="([^"]*)"/;
const visibleRegionRule = /visibleRegion="([^"]*)"/;
@ -49,7 +48,6 @@ export const docsCodeExtension = {
const header = headerRule.exec(attr);
const linenums = linenumsRule.exec(attr);
const highlight = highlightRule.exec(attr);
const diff = diffRule.exec(attr);
const language = languageRule.exec(attr);
const visibleLines = visibleLinesRule.exec(attr);
const visibleRegion = visibleRegionRule.exec(attr);
@ -73,7 +71,6 @@ export const docsCodeExtension = {
header: header?.[1],
linenums: !!linenums,
highlight: highlight?.[1],
diff: diff?.[1],
language: language?.[1],
visibleLines: visibleLines?.[1],
visibleRegion: visibleRegion?.[1],

56
adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/diff.mts
View file

@ -1,56 +0,0 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.dev/license
*/
import {diffLines, Change as DiffChange} from 'diff';
import {CodeToken} from './index.mjs';
import {loadWorkspaceRelativeFile} from '../../../helpers.mjs';
export interface DiffMetadata {
code: string;
linesAdded: number[];
linesRemoved: number[];
}
/**
* Updates the provided token with diff information if a path to a diff is provided.
*/
export function calculateDiff(token: CodeToken) {
if (!token.diff) {
return;
}
const diffCode = loadWorkspaceRelativeFile(token.diff);
const change = diffLines(diffCode, token.code);
const getLinesRange = (start: number, count: number): number[] =>
Array.from(Array(count).keys()).map((i) => i + start);
let processedLines = 0;
token.diffMetadata = change.reduce(
(prev: DiffMetadata, part: DiffChange) => {
const diff: DiffMetadata = {
code: `${prev.code}${part.value}`,
linesAdded: part.added
? [...prev.linesAdded, ...getLinesRange(processedLines, part.count ?? 0)]
: prev.linesAdded,
linesRemoved: part.removed
? [...prev.linesRemoved, ...getLinesRange(processedLines, part.count ?? 0)]
: prev.linesRemoved,
};
processedLines += part.count ?? 0;
return diff;
},
{
code: '',
linesAdded: [],
linesRemoved: [],
},
);
token.code = token.diffMetadata.code;
}

18
adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/highlight.mts
View file

@ -13,9 +13,6 @@ import {HighlighterGeneric} from 'shiki';
import {codeToHtml} from '../../../../shiki.mjs';
const lineNumberClassName: string = 'shiki-ln-number';
const lineAddedClassName: string = 'add';
const lineRemovedClassName: string = 'remove';
const lineHighlightedClassName: string = 'highlighted';
/**
* Updates the provided token's code value to include syntax highlighting.
@ -49,26 +46,13 @@ export function highlightCode(highlighter: HighlighterGeneric<any, any>, token:
let resultFileLineIndex = 1;
do {
const isRemovedLine = token.diffMetadata?.linesRemoved.includes(lineIndex);
const isAddedLine = token.diffMetadata?.linesAdded.includes(lineIndex);
const addClasses = (el: Element) => {
if (isRemovedLine) {
el.classList.add(lineRemovedClassName);
}
if (isAddedLine) {
el.classList.add(lineAddedClassName);
}
};
const currentline = lines[lineIndex];
addClasses(currentline);
if (!!token.linenums) {
const lineNumberEl = JSDOM.fragment(
`<span role="presentation" class="${lineNumberClassName}"></span>`,
).firstElementChild!;
addClasses(lineNumberEl);
lineNumberEl.textContent = isRemovedLine ? '-' : isAddedLine ? '+' : `${resultFileLineIndex}`;
lineNumberEl.textContent = `${resultFileLineIndex}`;
currentline.parentElement!.insertBefore(lineNumberEl, currentline);
resultFileLineIndex++;

10
adev/shared-docs/pipeline/shared/marked/extensions/docs-code/format/index.mts
View file

@ -7,7 +7,6 @@
*/
import {Tokens} from 'marked';
import {DiffMetadata, calculateDiff} from './diff.mjs';
import {highlightCode} from './highlight.mjs';
import {extractRegions} from './region.mjs';
import {JSDOM} from 'jsdom';
@ -28,8 +27,6 @@ export interface CodeToken extends Tokens.Generic {
header?: string;
/* Whether styling should include line numbers */
linenums?: boolean;
/* The example path to determine diff (lines added/removed) */
diff?: string;
/* The lines viewable in collapsed view */
visibleLines?: string;
/* The name of the viewable region in the collapsed view */
@ -41,9 +38,6 @@ export interface CodeToken extends Tokens.Generic {
/* The lines to display highlighting on */
highlight?: string;
/** The generated diff metadata if created in the code formatting process. */
diffMetadata?: DiffMetadata;
// additional classes for the element
classes?: string[];
}
@ -54,7 +48,6 @@ export function formatCode(token: CodeToken, context: RendererContext): string {
}
extractRegions(token);
calculateDiff(token);
highlightCode(context.highlighter, token);
const containerEl = JSDOM.fragment(`
@ -106,9 +99,6 @@ function buildHeaderElement(token: CodeToken) {
function applyContainerAttributesAndClasses(el: Element, token: CodeToken) {
// Attributes
// String value attributes
if (token.diff) {
el.setAttribute('path', token.diff);
}
if (token.path) {
el.setAttribute('path', token.path);
}

3
adev/shared-docs/pipeline/shared/marked/test/docs-code/docs-code.md
View file

@ -5,7 +5,4 @@ this is code
<docs-code path="./example-with-eslint-comment.ts" />
<docs-code path="./example-with-region.ts" />
<docs-code path="./new-code.ts"
diff="./old-code.ts" />
<docs-code header="src/locale/messages.fr.xlf (<trans-unit>)" path="./messages.fr.xlf.html" />

17
adev/shared-docs/pipeline/shared/marked/test/docs-code/docs-code.spec.mts
View file

@ -43,23 +43,8 @@ describe('markdown to html', () => {
expect(codeBlock?.textContent?.trim()).not.toContain('docregion');
});
it('properly shows the diff of two provided file paths', () => {
const codeBlock = markdownDocument.querySelectorAll('code')[3];
expect(codeBlock).toBeTruthy();
const codeLines = codeBlock.querySelectorAll('.line');
expect(codeLines[8].textContent).toContain('oldFuncName');
expect(codeLines[8].classList.contains('remove')).toBeTrue();
expect(codeLines[9].textContent).toContain('newName');
expect(codeLines[9].classList.contains('add')).toBeTrue();
expect(codeLines[10].classList.contains('add')).toBeFalse();
expect(codeLines[10].classList.contains('remove')).toBeFalse();
});
it('should load header and html code', () => {
const codeBlock = markdownDocument.querySelectorAll('code')[4];
const codeBlock = markdownDocument.querySelectorAll('code')[3];
expect(codeBlock).toBeTruthy();
});
});

18
adev/shared-docs/styles/docs/_code.scss
View file

@ -349,24 +349,6 @@ $code-font-size: 0.875rem;
background-color: inherit;
}
}
&.remove {
background-color: color-mix(in srgb, var(--orange-red) 11%, var(--page-background));
color: color-mix(in srgb, var(--hot-red) 80%, var(--full-contrast));
span {
background-color: inherit;
}
}
&.add {
background-color: color-mix(in srgb, var(--super-green) 14%, var(--page-background));
color: color-mix(in srgb, var(--super-green), var(--full-contrast) 50%);
span {
background-color: inherit;
}
}
}
.hidden {

5
adev/src/content/kitchen-sink.md
View file

@ -184,11 +184,6 @@ You can create multifile examples by wrapping the examples inside a `<docs-code-
<docs-code-multifile
path="adev/src/content/examples/hello-world/src/app/app.component.ts"
preview>
<docs-code
path="adev/src/content/examples/hello-world/src/app/app.component.ts"
diff="adev/src/content/examples/hello-world/src/app/app.component-old.ts"
linenums
visibleLines="[3, 11]"/>
<docs-code
path="adev/src/content/examples/hello-world/src/app/app.component.html"
highlight="[1]"