Skip to content

Commit ec22df7

Browse files
nicojshugo-vrijswijk
nicojs
and
hugo-vrijswijk
authored
feat(svelte): support svelte syntax highlighting (#2807)
Add svelte file type and syntax highlighting Co-authored-by: Hugo van Rijswijk <git@hugovr.nl>
1 parent c59504b commit ec22df7

File tree

10 files changed

+1644
-2410
lines changed

10 files changed

+1644
-2410
lines changed

‎package-lock.json

Lines changed: 1600 additions & 2409 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/elements/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"mutation-testing-report-schema": "2.0.3",
5454
"postcss": "8.4.31",
5555
"postcss-loader": "7.3.3",
56+
"prism-svelte": "0.5.0",
5657
"prismjs": "1.29.0",
5758
"resemblejs": "5.0.0",
5859
"rxjs": "7.8.1",

‎packages/elements/src/components/file-icon/file-icon.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ export class MutationTestReportFileIconComponent extends LitElement {
5454
case ProgrammingLanguage.vue:
5555
return svg`<svg class="${this.cssClass}" aria-label="vue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1000"><path d="M600 495.9l159.1-275.4h-84.4L600 349.7l-74.6-129.2h-84.5z"/><path d="M793.7 220.5L600 555.9 406.3 220.5H277l323 559 323-559z"/></svg>`;
5656
case ProgrammingLanguage.gherkin:
57-
return svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.129,2a12.348,12.348,0,0,0-2.35,24.465V30c7.371-1.114,13.9-6.982,14.384-14.684a12.8,12.8,0,0,0-5.9-11.667c-.223-.132-.449-.262-.682-.377s-.481-.231-.729-.33c-.079-.033-.156-.063-.235-.094-.216-.08-.435-.17-.658-.236A12.188,12.188,0,0,0,16.129,2Z" style="fill:var(--mut-file-gherkin-color)"/><path d="M18.68,6.563a1.345,1.345,0,0,0-1.178.472,5.493,5.493,0,0,0-.518.9,2.9,2.9,0,0,0,.377,3.023A3.317,3.317,0,0,0,19.763,9,2.388,2.388,0,0,0,20,8,1.411,1.411,0,0,0,18.68,6.563Zm-5.488.071A1.441,1.441,0,0,0,11.85,8,2.388,2.388,0,0,0,12.085,9a3.427,3.427,0,0,0,2.473,1.96,3.141,3.141,0,0,0-.212-3.85,1.322,1.322,0,0,0-1.154-.472Zm-3.7,3.637a1.3,1.3,0,0,0-.73,2.338,5.663,5.663,0,0,0,.895.543,3.386,3.386,0,0,0,3.179-.307,3.492,3.492,0,0,0-2.049-2.338,2.69,2.69,0,0,0-1.06-.236,1.369,1.369,0,0,0-.236,0Zm11.611,4.582a3.44,3.44,0,0,0-1.955.567A3.492,3.492,0,0,0,21.2,17.758a2.69,2.69,0,0,0,1.06.236,1.329,1.329,0,0,0,.966-2.362,5.47,5.47,0,0,0-.895-.52,3.247,3.247,0,0,0-1.225-.26Zm-10.292.071a3.247,3.247,0,0,0-1.225.26,2.575,2.575,0,0,0-.895.543A1.34,1.34,0,0,0,9.73,18.065a2.426,2.426,0,0,0,1.06-.236,3.185,3.185,0,0,0,1.955-2.338,3.366,3.366,0,0,0-1.931-.567Zm3.815,2.314a3.317,3.317,0,0,0-2.4,1.96,2.286,2.286,0,0,0-.236.968,1.4,1.4,0,0,0,2.426.992,5.492,5.492,0,0,0,.518-.9,3.109,3.109,0,0,0-.306-3.023Zm2.8.071a3.141,3.141,0,0,0,.212,3.85,1.47,1.47,0,0,0,2.5-.9,2.388,2.388,0,0,0-.236-.992,3.427,3.427,0,0,0-2.473-1.96Z" style="fill:#fff"/></svg>`;
57+
return svg`<svg class="${this.cssClass}" aria-label="gherkin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.129,2a12.348,12.348,0,0,0-2.35,24.465V30c7.371-1.114,13.9-6.982,14.384-14.684a12.8,12.8,0,0,0-5.9-11.667c-.223-.132-.449-.262-.682-.377s-.481-.231-.729-.33c-.079-.033-.156-.063-.235-.094-.216-.08-.435-.17-.658-.236A12.188,12.188,0,0,0,16.129,2Z" style="fill:var(--mut-file-gherkin-color)"/><path d="M18.68,6.563a1.345,1.345,0,0,0-1.178.472,5.493,5.493,0,0,0-.518.9,2.9,2.9,0,0,0,.377,3.023A3.317,3.317,0,0,0,19.763,9,2.388,2.388,0,0,0,20,8,1.411,1.411,0,0,0,18.68,6.563Zm-5.488.071A1.441,1.441,0,0,0,11.85,8,2.388,2.388,0,0,0,12.085,9a3.427,3.427,0,0,0,2.473,1.96,3.141,3.141,0,0,0-.212-3.85,1.322,1.322,0,0,0-1.154-.472Zm-3.7,3.637a1.3,1.3,0,0,0-.73,2.338,5.663,5.663,0,0,0,.895.543,3.386,3.386,0,0,0,3.179-.307,3.492,3.492,0,0,0-2.049-2.338,2.69,2.69,0,0,0-1.06-.236,1.369,1.369,0,0,0-.236,0Zm11.611,4.582a3.44,3.44,0,0,0-1.955.567A3.492,3.492,0,0,0,21.2,17.758a2.69,2.69,0,0,0,1.06.236,1.329,1.329,0,0,0,.966-2.362,5.47,5.47,0,0,0-.895-.52,3.247,3.247,0,0,0-1.225-.26Zm-10.292.071a3.247,3.247,0,0,0-1.225.26,2.575,2.575,0,0,0-.895.543A1.34,1.34,0,0,0,9.73,18.065a2.426,2.426,0,0,0,1.06-.236,3.185,3.185,0,0,0,1.955-2.338,3.366,3.366,0,0,0-1.931-.567Zm3.815,2.314a3.317,3.317,0,0,0-2.4,1.96,2.286,2.286,0,0,0-.236.968,1.4,1.4,0,0,0,2.426.992,5.492,5.492,0,0,0,.518-.9,3.109,3.109,0,0,0-.306-3.023Zm2.8.071a3.141,3.141,0,0,0,.212,3.85,1.47,1.47,0,0,0,2.5-.9,2.388,2.388,0,0,0-.236-.992,3.427,3.427,0,0,0-2.473-1.96Z" style="fill:#fff"/></svg>`;
58+
case ProgrammingLanguage.svelte:
59+
return svg`<svg class="${this.cssClass}" aria-label="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path xmlns="http://www.w3.org/2000/svg" d="M26.47,5.7A8.973,8.973,0,0,0,14.677,3.246L7.96,7.4a7.461,7.461,0,0,0-3.481,5.009,7.686,7.686,0,0,0,.8,5.058,7.358,7.358,0,0,0-1.151,2.8,7.789,7.789,0,0,0,1.4,6.028,8.977,8.977,0,0,0,11.794,2.458L24.04,24.6a7.468,7.468,0,0,0,3.481-5.009,7.673,7.673,0,0,0-.8-5.062,7.348,7.348,0,0,0,1.152-2.8A7.785,7.785,0,0,0,26.47,5.7" style="fill:#ff3e00"/><path xmlns="http://www.w3.org/2000/svg" d="M14.022,26.64A5.413,5.413,0,0,1,8.3,24.581a4.678,4.678,0,0,1-.848-3.625,4.307,4.307,0,0,1,.159-.61l.127-.375.344.238a8.76,8.76,0,0,0,2.628,1.274l.245.073-.025.237a1.441,1.441,0,0,0,.271.968,1.63,1.63,0,0,0,1.743.636,1.512,1.512,0,0,0,.411-.175l6.7-4.154a1.366,1.366,0,0,0,.633-.909,1.407,1.407,0,0,0-.244-1.091,1.634,1.634,0,0,0-1.726-.622,1.509,1.509,0,0,0-.413.176l-2.572,1.584a4.934,4.934,0,0,1-1.364.582,5.415,5.415,0,0,1-5.727-2.06A4.678,4.678,0,0,1,7.811,13.1,4.507,4.507,0,0,1,9.9,10.09l6.708-4.154a4.932,4.932,0,0,1,1.364-.581A5.413,5.413,0,0,1,23.7,7.414a4.679,4.679,0,0,1,.848,3.625,4.272,4.272,0,0,1-.159.61l-.127.375-.344-.237a8.713,8.713,0,0,0-2.628-1.274l-.245-.074.025-.237a1.438,1.438,0,0,0-.272-.968,1.629,1.629,0,0,0-1.725-.622,1.484,1.484,0,0,0-.411.176l-6.722,4.14a1.353,1.353,0,0,0-.631.908,1.394,1.394,0,0,0,.244,1.092,1.634,1.634,0,0,0,1.726.621,1.538,1.538,0,0,0,.413-.175l2.562-1.585a4.9,4.9,0,0,1,1.364-.581,5.417,5.417,0,0,1,5.728,2.059,4.681,4.681,0,0,1,.843,3.625A4.5,4.5,0,0,1,22.1,21.905l-6.707,4.154a4.9,4.9,0,0,1-1.364.581" style="fill:#fff"/></svg>`;
5860
}
5961
}
6062
}

‎packages/elements/src/lib/code-helpers.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export enum ProgrammingLanguage {
1212
typescript = 'typescript',
1313
vue = 'vue',
1414
gherkin = 'gherkin',
15+
svelte = 'svelte',
1516
}
1617

1718
/**
@@ -51,6 +52,8 @@ export function determineLanguage(fileName: string): ProgrammingLanguage | undef
5152
return ProgrammingLanguage.vue;
5253
case 'feature':
5354
return ProgrammingLanguage.gherkin;
55+
case 'svelte':
56+
return ProgrammingLanguage.svelte;
5457
default:
5558
return undefined;
5659
}

‎packages/elements/src/style/prism-plugins.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import 'prismjs/components/prism-markup';
1515
import 'prismjs/components/prism-markup-templating';
1616
import 'prismjs/components/prism-php';
1717

18+
// Svelte
19+
import 'prism-svelte';
20+
1821
// Don't strip pre-existing HTML to keep the popups and badges working
1922
import 'prismjs/plugins/keep-markup/prism-keep-markup';
2023
// Removed auto-loader plugin because of https://github.com/stryker-mutator/mutation-testing-elements/issues/393

‎packages/elements/test/unit/components/file-icon.component.spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ describe(MutationTestReportFileIconComponent.name, () => {
4949
['scala', ProgrammingLanguage.scala],
5050
['php', ProgrammingLanguage.php],
5151
['vue', ProgrammingLanguage.vue],
52+
['svelte', ProgrammingLanguage.svelte],
5253
] as const
5354
).forEach(([extension, expected]) => {
5455
it(`should choose show a ${expected} svg file for foo.${extension}`, async () => {

‎packages/elements/testResources/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ <h1 class="display-1">Test resources</h1>
3030
<a class="list-group-item list-group-item-action" href="/large-example">Large example</a>
3131
<a class="list-group-item list-group-item-action" href="/unsanitized-example">Unsanitized example</a>
3232
<a class="list-group-item list-group-item-action" href="/realtime-reporting-example">🚀 Realtime reporting example</a>
33+
<a class="list-group-item list-group-item-action" href="/svelte-example"><img style="width: 30px" src="./svelte-example/svelte-logo.svg"> Svelte example</a>
3334
</div>
3435
</div>
3536
</div>

‎packages/elements/testResources/svelte-example/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Svelte example - Mutation test elements</title>
5+
<script src="/mutation-test-elements.js"></script>
6+
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
7+
</head>
8+
9+
<body>
10+
<a href="/">Back</a>
11+
<mutation-test-report-app src="mutation-report.json"></mutation-test-report-app>
12+
<script>
13+
const app = document.getElementsByTagName('mutation-test-report-app').item(0);
14+
function updateTheme() {
15+
document.body.style.backgroundColor = app.themeBackgroundColor;
16+
}
17+
app.addEventListener('theme-changed', updateTheme);
18+
updateTheme();
19+
</script>
20+
</body>
21+
</html>

0 commit comments

Comments
 (0)