refactor: refactor preview code

bin/todoctor.js

@@ -28,10 +28,13 @@ try {
   process.exit(1)
 }
 
-let distPath = path.join(dirname, '../dist')
-let args = process.argv.slice(2)
-let env = { ...process.env, DIST_PATH: distPath }
-let child = spawn(binaryPath, args, { stdio: 'inherit', env })
+let distributionPath = path.join(dirname, '../dist')
+let arguments_ = process.argv.slice(2)
+let environment = { ...process.env, DIST_PATH: distributionPath }
+let child = spawn(binaryPath, arguments_, {
+  stdio: 'inherit',
+  env: environment,
+})
 
 child.on('exit', code => {
   process.exit(code)

preview/blocks/footer.svelte

@@ -12,7 +12,11 @@
         <Typography size="m">Released under the MIT License</Typography>
         <Typography size="m">Copyright © {currentYear} Azat S.</Typography>
       </div>
-      <a href="https://github.com/azat-io/todoctor" target="_blank">
+      <a
+        href="https://github.com/azat-io/todoctor"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
         <Typography size="m">Source code on GitHub</Typography>
       </a>
     </div>

preview/blocks/graph.svelte

@@ -8,8 +8,8 @@
     $data.history?.sort(
       (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
     ) ?? []
-  $: labels = history?.map(({ date }) => date)
-  $: values = history?.map(({ count }) => count)
+  $: labels = history.map(({ date }) => date)
+  $: values = history.map(({ count }) => count)
 </script>
 
 <div class="graph-wrapper">

preview/blocks/header.svelte

@@ -7,6 +7,8 @@
 
   // eslint-disable-next-line no-unused-expressions
   $theme
+
+  let { version, name } = $data
 </script>
 
 <header class="header">
@@ -18,21 +20,25 @@
           <div>
             <div class="title-wrapper">
               <Typography size="2xl" tag="h1" bold>Todoctor</Typography>
-              {#if $data.version}
-                <sub class="version">v{$data.version}</sub>
+              {#if version}
+                <sub class="version">v{version}</sub>
               {/if}
             </div>
-            {#if $data.name}
-              <Typography size="m">{$data.name}</Typography>
+            {#if name}
+              <Typography size="m">{name}</Typography>
             {/if}
           </div>
         </div>
       </div>
       <div class="links">
-        <button on:click={toggleTheme} class="button">
+        <button on:click={toggleTheme} class="button" type="button">
           <Typography color="brand" size="m">Toggle Theme</Typography>
         </button>
-        <a href="https://github.com/azat-io/todoctor" target="_blank">
+        <a
+          href="https://github.com/azat-io/todoctor"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
           <Typography color="brand" size="m">GitHub</Typography>
         </a>
       </div>

preview/blocks/info.svelte

@@ -10,12 +10,12 @@
   $: todosByKind =
     $data.data?.reduce((accumulator: Record<string, number>, { kind }) => {
       if (kind in accumulator) {
-        accumulator[kind] = accumulator[kind] + 1
+        accumulator[kind] += 1
       } else {
         accumulator[kind] = 1
       }
       return accumulator
-    }, {}) || {}
+    }, {}) ?? {}
 
   $: todosEntries = Object.entries(todosByKind).sort(([, a], [, b]) => b - a)
 
@@ -42,7 +42,7 @@
     'senary',
   ]
 
-  $: notes = [] as {
+  let notes = [] as {
     content: string[]
     title: string
   }[]
@@ -69,7 +69,7 @@
     let todosByAuthors = $data.data.reduce(
       (accumulator: Record<string, number>, { blame }) => {
         if (blame.author in accumulator) {
-          accumulator[blame.author] = accumulator[blame.author] + 1
+          accumulator[blame.author] += 1
         } else {
           accumulator[blame.author] = 1
         }
@@ -128,7 +128,7 @@
       <div class="notes-wrapper">
         <Typography size="xl" tag="h2" mbe="l">Did You Know That?</Typography>
         <div class="notes">
-          {#each notes as { content, title }}
+          {#each notes as { content, title } (title)}
             <Note {title} {content} />
           {/each}
         </div>
@@ -143,12 +143,12 @@
       </div>
     </div>
     <div class="legend">
-      {#each finalTodosEntries as [kind], index}
+      {#each finalTodosEntries as [kind], index (kind)}
         <div class="legend-element">
           <div
             style={`--color: var(--color-additional-${colors[index]});`}
             class="legend-color"
-          ></div>
+          />
           <Typography size="s" tag="span">{kind.toUpperCase()}</Typography>
         </div>
       {/each}

preview/elements/avatar.svelte

@@ -9,7 +9,7 @@
   let transformToCode = (string: string, length: number): number => {
     let hash = 0
 
-    for (let len = string.length, i = 0; i < len; i++) {
+    for (let stringLength = string.length, i = 0; i < stringLength; i++) {
       let chr = string.charCodeAt(i)
       hash = (hash << 5) - hash + chr
       hash |= 0

preview/elements/chart-doughnut.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import type { ChartOptions, ChartData } from 'chart.js'
 
+  import { onMount } from 'svelte'
+
   import Chart from '~/elements/chart.svelte'
   import { theme } from '~/stores/theme'
 
   export let values: number[]
 
-  $: computedStyles = getComputedStyle(document.body)
+  let computedStyles = getComputedStyle(document.body)
 
   $: data = {
     datasets: [
@@ -27,7 +29,7 @@
     ],
   } as ChartData<'doughnut'>
 
-  theme.subscribe(() => {
+  let unsubscribe = theme.subscribe(() => {
     computedStyles = getComputedStyle(document.body)
   })
 
@@ -70,6 +72,8 @@
       },
     },
   } as ChartOptions<'doughnut'>
+
+  onMount(() => () => unsubscribe)
 </script>
 
 <Chart type="doughnut" height={null} {options} {data} />

preview/elements/chart.svelte

@@ -14,17 +14,17 @@
   export let options: ChartOptions<T>
   export let height: number | null = null
 
-  let canvasRef: HTMLCanvasElement
+  let canvasReference: HTMLCanvasElement
   let chart: Chart<T> | null = null
 
-  let resizeObserver: ResizeObserver
+  let resizeObserver: ResizeObserver | null = null
 
-  let createChart = () => {
+  let createChart = (): void => {
     if (chart) {
       chart.destroy()
     }
 
-    chart = new Chart(canvasRef, {
+    chart = new Chart(canvasReference, {
       options: {
         ...options,
         maintainAspectRatio: false,
@@ -42,8 +42,8 @@
       chart?.resize()
     })
 
-    if (canvasRef.parentElement) {
-      resizeObserver.observe(canvasRef.parentElement)
+    if (canvasReference.parentElement) {
+      resizeObserver.observe(canvasReference.parentElement)
     }
   })
 
@@ -63,7 +63,7 @@
   })
 </script>
 
-<canvas class="canvas" bind:this={canvasRef} {height}></canvas>
+<canvas class="canvas" bind:this={canvasReference} {height} />
 
 <style>
   .canvas {

preview/elements/note.svelte

@@ -4,10 +4,15 @@
   export let title = ''
   export let content: string[] = []
 
-  let processLine = (line: string) => {
-    let parts: Array<{ bold: boolean; text: string }> = []
+  interface Part {
+    bold: boolean
+    text: string
+  }
+
+  let processLine = (line: string): Part[] => {
+    let parts: Part[] = []
 
-    let regex = /<b>(.*?)<\/b>/gi
+    let regex = /<b>(?<content>.*?)<\/b>/giu
 
     let lastIndex = 0
     let match
@@ -31,9 +36,9 @@
 <div class="note">
   <Typography size="l" tag="h3" mbe="s">{title}</Typography>
 
-  {#each content as line}
+  {#each content as line (line)}
     <Typography size="m" tag="p" mbe="2xs">
-      {#each processLine(line) as part}
+      {#each processLine(line) as part (part.text)}
         {#if part.bold}
           <b>{part.text}</b>
         {:else}

preview/elements/table-comment.svelte

@@ -4,7 +4,7 @@
   export let value = ''
   export let kind = ''
 
-  let highlightedParts: Array<{ highlighted: boolean; text: string }> = []
+  let highlightedParts: { highlighted: boolean; text: string }[]
 
   $: {
     let regex = new RegExp(`(${kind})`, 'i')
@@ -16,7 +16,7 @@
 </script>
 
 <Typography size="m">
-  {#each highlightedParts as part}
+  {#each highlightedParts as part (part.text)}
     {#if part.highlighted}
       <i>{part.text}</i>
     {:else}

preview/elements/table.svelte

@@ -61,10 +61,10 @@
 <div class="wrapper">
   <table class="table">
     <thead>
-      {#each table.getHeaderGroups() as headerGroup}
+      {#each table.getHeaderGroups() as headerGroup, headerGroupIndex (headerGroupIndex)}
         <tr class="tr">
-          <th style="inline-size: 40px" class="th">#</th>
-          {#each headerGroup.headers as header}
+          <th style:inline-size="40px" class="th">#</th>
+          {#each headerGroup.headers as header, headerIndex (headerIndex)}
             <th
               style={header.getSize()
                 ? `inline-size: ${header.getSize()}px`
@@ -77,6 +77,7 @@
                   class:cursor-pointer={header.column.getCanSort()}
                   class:select-none={header.column.getCanSort()}
                   class="button"
+                  type="button"
                 >
                   <FlexRender
                     content={header.column.columnDef.header}
@@ -95,10 +96,10 @@
       {/each}
     </thead>
     <tbody>
-      {#each table.getRowModel().rows as row, index}
+      {#each table.getRowModel().rows as row, rowIndex (rowIndex)}
         <tr class="tr">
-          <td style="inline-size: 40px" class="td td-index">{index + 1}</td>
-          {#each row.getVisibleCells() as cell}
+          <td style:inline-size="40px" class="td td-index">{rowIndex + 1}</td>
+          {#each row.getVisibleCells() as cell, cellIndex (cellIndex)}
             <td style={`inline-size: ${cell.column.getSize()}px`} class="td">
               <FlexRender
                 content={cell.column.columnDef.cell}

preview/stores/data.ts

@@ -2,45 +2,45 @@ import { readable, writable } from 'svelte/store'
 
 import type { Data } from '~/typings/index.d'
 
-let decodeHtmlEntities = (str: string): string => {
+let decodeHtmlEntities = (string: string): string => {
   let textArea = document.createElement('textarea')
-  textArea.innerHTML = str
+  textArea.innerHTML = string
   return textArea.value
 }
 
-let traverseAndDecode = <T>(obj: T): T => {
-  if (typeof obj === 'string') {
-    return decodeHtmlEntities(obj) as T
+let traverseAndDecode = <T>(object: T): T => {
+  if (typeof object === 'string') {
+    return decodeHtmlEntities(object) as T
   }
 
-  if (Array.isArray(obj)) {
-    return obj.map(item => traverseAndDecode(item)) as T
+  if (Array.isArray(object)) {
+    return object.map(item => traverseAndDecode(item) as T) as T
   }
 
-  if (typeof obj === 'object' && obj !== null) {
+  if (typeof object === 'object' && object !== null) {
     let result = {} as { [K in keyof T]: T[K] }
-    for (let key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        result[key] = traverseAndDecode(obj[key])
+    for (let key in object) {
+      if (key in object) {
+        result[key] = traverseAndDecode(object[key])
       }
     }
     return result
   }
 
-  return obj
+  return object
 }
 
 export let loading = writable(true)
 
 export let data = readable<Partial<Data>>({}, set => {
-  let fetchData = async () => {
+  let fetchData = async (): Promise<void> => {
     let dataValue: Data
     if (import.meta.env.MODE === 'production') {
       // @ts-ignore
-      dataValue = window.data
+      dataValue = globalThis.data as Data
     } else {
       let dataResponse = await fetch('/data.json')
-      dataValue = await dataResponse.json()
+      dataValue = (await dataResponse.json()) as Data
     }
     set(traverseAndDecode(dataValue))
     loading.set(false)

preview/stores/theme.ts

@@ -1,16 +1,18 @@
 import { writable } from 'svelte/store'
 
 let userTheme =
-  localStorage.getItem('theme') ||
-  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+  localStorage.getItem('theme') ??
+  (globalThis.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light')
 
 export let theme = writable(userTheme)
 
-export let toggleTheme = () => {
+export let toggleTheme = (): void => {
   theme.update(value => (value === 'dark' ? 'light' : 'dark'))
 }
 
 theme.subscribe(value => {
   localStorage.setItem('theme', value)
-  window.document.documentElement.setAttribute('data-theme', value)
+  globalThis.document.documentElement.dataset.theme = value
 })