Fix lint errors

package.json

@@ -33,6 +33,7 @@
  },
  "devDependencies": {
  "@codemirror/lang-javascript": "^6.2.2",
+ "@types/jsdom": "^21.1.6",
  "@types/node": "^20.11.19",
  "@typescript-eslint/eslint-plugin": "^7.0.2",
  "@typescript-eslint/parser": "^7.0.2",

src/components/AnnotatedCode/index.astro

@@ -3,16 +3,16 @@ import { codeToHtml } from 'shiki';
 import { JSDOM } from 'jsdom';
 const { props } = Astro;
 
-const begin = (name) => `__SLOT_BEGIN_${name}`;
-const end = (name) => `__SLOT_END_${name}`;
+const begin = (name: string) => `__SLOT_BEGIN_${name}`;
+const end = (name: string) => `__SLOT_END_${name}`;
 
 const rawCode = props.code({ begin, end });
 
 // Split raw lines into blocks separated by begin/end (and regions between)
 const rawLines = rawCode.split(/\n/g);
 let currentLine = 0;
 const rows = [];
-let currentRow = null;
+let currentRow: { code: string; slot?: string; startLine?: number; endLine?: number } | null = null;
 for (const line of rawLines) {
  const startMatch = /__SLOT_BEGIN_(\w+)/.exec(line);
  if (startMatch) {
@@ -58,30 +58,30 @@ const html = await codeToHtml(code, {
 // Turn it into a DOM tree we can query
 const parsed = new JSDOM(html)
 const dom = parsed.window.document
-const preTag = dom.querySelector('pre')
-const codeTag = dom.querySelector('code')
+const preTag = dom.querySelector('pre')!
+const codeTag = dom.querySelector('code')!
 
 // Extract code lines
 const lines = [...dom.querySelectorAll('span.line')]
 
 // Extract the style attributes on the code/pre tags (we'll manually add these back)
-const preAttrs = {};
+const preAttrs: Record<string, string> = {};
 for (const attr of preTag.attributes) {
  if (attr.name === 'style') continue
  preAttrs[attr.name] = attr.value;
 }
-const preStyle = preTag.attributes.style.value;
-const codeAttrs = {};
+const preStyle = preTag.getAttribute('style');
+const codeAttrs: Record<string, string> = {};
 for (const attr of codeTag.attributes) {
  codeAttrs[attr.name] = attr.value;
 }
 ---
  <table class="h-1">
  <tbody>
- {rows.map((row, i) => {
+ {rows.map(row => {
  const lineNodes = lines.slice(row.startLine, row.endLine);
  return (
- <tr key={i}>
+ <tr>
  <td class="align-top" style="height:100%; margin:0">
  <pre {...preAttrs} style={`${preStyle};height:100%`}><code {...codeAttrs} set:html={lineNodes.map((n) => n.outerHTML).join('\n')} /></pre>
  </td>