refactor: refactor preview code

Author: azat-io

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)

env.d.ts renamed to environment.d.ts

@@ -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/footer.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/graph.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/header.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/blocks/info.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/avatar.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-doughnut.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/chart.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}