feat(svelte): support svelte syntax highlighting

packages/elements/package.json

@@ -53,6 +53,7 @@
     "mutation-testing-report-schema": "2.0.3",
     "postcss": "8.4.31",
     "postcss-loader": "7.3.3",
+    "prism-svelte": "0.5.0",
     "prismjs": "1.29.0",
     "resemblejs": "5.0.0",
     "rxjs": "7.8.1",

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

@@ -54,7 +54,9 @@ export class MutationTestReportFileIconComponent extends LitElement {
       case ProgrammingLanguage.vue:
         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>`;
       case ProgrammingLanguage.gherkin:
-        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>`;
+        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>`;
+      case ProgrammingLanguage.svelte:
+        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>`;
     }
   }
 }

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

@@ -12,6 +12,7 @@ export enum ProgrammingLanguage {
   typescript = 'typescript',
   vue = 'vue',
   gherkin = 'gherkin',
+  svelte = 'svelte',
 }
 
 /**
@@ -51,6 +52,8 @@ export function determineLanguage(fileName: string): ProgrammingLanguage | undef
       return ProgrammingLanguage.vue;
     case 'feature':
       return ProgrammingLanguage.gherkin;
+    case 'svelte':
+      return ProgrammingLanguage.svelte;
     default:
       return undefined;
   }

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

@@ -15,6 +15,9 @@ import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-php';
 
+// Svelte
+import 'prism-svelte';
+
 // Don't strip pre-existing HTML to keep the popups and badges working
 import 'prismjs/plugins/keep-markup/prism-keep-markup';
 // 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

@@ -49,6 +49,7 @@ describe(MutationTestReportFileIconComponent.name, () => {
       ['scala', ProgrammingLanguage.scala],
       ['php', ProgrammingLanguage.php],
       ['vue', ProgrammingLanguage.vue],
+      ['svelte', ProgrammingLanguage.svelte],
     ] as const
   ).forEach(([extension, expected]) => {
     it(`should choose show a ${expected} svg file for foo.${extension}`, async () => {

packages/elements/testResources/index.html

@@ -30,6 +30,7 @@ <h1 class="display-1">Test resources</h1>
             <a class="list-group-item list-group-item-action" href="/large-example">Large example</a>
             <a class="list-group-item list-group-item-action" href="/unsanitized-example">Unsanitized example</a>
             <a class="list-group-item list-group-item-action" href="/realtime-reporting-example">🚀 Realtime reporting example</a>
+            <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>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Svelte example - Mutation test elements</title>
+    <script src="/mutation-test-elements.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=0.5" />
+  </head>
+
+  <body>
+    <a href="/">Back</a>
+    <mutation-test-report-app src="mutation-report.json"></mutation-test-report-app>
+    <script>
+      const app = document.getElementsByTagName('mutation-test-report-app').item(0);
+      function updateTheme() {
+        document.body.style.backgroundColor = app.themeBackgroundColor;
+      }
+      app.addEventListener('theme-changed', updateTheme);
+      updateTheme();
+    </script>
+  </body>
+</html>