feat: add type coverage

coverage-ts/assets/source-file.css

@@ -0,0 +1,21 @@
+.uncovered {
+  background: rgba(235, 26, 26, 0.3);
+}
+.CodeMirror {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  height: auto;
+}
+.TS-lineuncovered {
+  background: rgba(255, 255, 255, 0.3);
+  width: 24px;
+}
+/* NOTE: I have to increase the specificity because of semantic-ui */
+p.footer-text {
+  text-align: center;
+  margin: 3em 0;
+}
+.gutter-marker {
+  text-align: center;
+  font-size: 0.6em;
+}

coverage-ts/assets/source-file.js

@@ -0,0 +1,38 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const myTextArea = document.getElementById('editor');
+  const codeMirrorInstance = CodeMirror.fromTextArea(myTextArea, {
+    readOnly: true,
+    lineNumbers: true,
+    lineWrapping: false,
+    mode: 'text/typescript',
+    gutters: ['TS-lineuncovered', 'CodeMirror-linenumbers'],
+  });
+  const annotations = JSON.parse(document.getElementById('annotations').textContent);
+  const gutters = {};
+
+  annotations.forEach((annotation) => {
+    gutters[annotation.line] = (gutters[annotation.line] || 0) + 1;
+    codeMirrorInstance.markText(
+      { line: annotation.line, ch: annotation.character },
+      {
+        line: annotation.line,
+        ch: annotation.character + annotation.text.length,
+      },
+      {
+        className: 'uncovered',
+      }
+    );
+  });
+
+  Object.entries(gutters).forEach(([line, count]) => {
+    const gutterMarker = document.createElement('div');
+
+    gutterMarker.textContent = count + 'x';
+    gutterMarker.classList.add('gutter-marker');
+    gutterMarker.style.background = 'rgba(255,0,0,' + count * 0.2 + ')';
+
+    codeMirrorInstance.setGutterMarker(+line, 'TS-lineuncovered', gutterMarker);
+  });
+});