From 7722bb2ddf3da65b7ed71d59c09fab7c60b84905 Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Sun, 10 Nov 2024 19:21:30 +0300
Subject: [PATCH] refactor: refactor preview code

---
 bin/todoctor.js                        | 11 ++++++----
 env.d.ts => environment.d.ts           |  0
 preview/blocks/footer.svelte           |  6 +++++-
 preview/blocks/graph.svelte            |  4 ++--
 preview/blocks/header.svelte           | 18 ++++++++++------
 preview/blocks/info.svelte             | 14 ++++++------
 preview/elements/avatar.svelte         |  2 +-
 preview/elements/chart-doughnut.svelte |  8 +++++--
 preview/elements/chart.svelte          | 14 ++++++------
 preview/elements/note.svelte           | 15 ++++++++-----
 preview/elements/table-comment.svelte  |  4 ++--
 preview/elements/table.svelte          | 13 +++++------
 preview/stores/data.ts                 | 30 +++++++++++++-------------
 preview/stores/theme.ts                | 10 +++++----
 preview/view/app.svelte                |  4 +++-
 preview/view/index.ts                  |  4 ++--
 scripts/build.js                       | 24 ++++++++++-----------
 scripts/create-packages.js             | 26 ++++++++++++++--------
 scripts/get-package-json.js            |  2 +-
 scripts/version.js                     |  7 ++----
 vite.config.ts                         | 22 +++++++++----------
 21 files changed, 135 insertions(+), 103 deletions(-)
 rename env.d.ts => environment.d.ts (100%)

diff --git a/bin/todoctor.js b/bin/todoctor.js
index ac52210..12ad8d1 100755
--- a/bin/todoctor.js
+++ b/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)
diff --git a/env.d.ts b/environment.d.ts
similarity index 100%
rename from env.d.ts
rename to environment.d.ts
diff --git a/preview/blocks/footer.svelte b/preview/blocks/footer.svelte
index 7e15db8..1f5f59e 100644
--- a/preview/blocks/footer.svelte
+++ b/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>
diff --git a/preview/blocks/graph.svelte b/preview/blocks/graph.svelte
index fa82ecc..62e2845 100644
--- a/preview/blocks/graph.svelte
+++ b/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">
diff --git a/preview/blocks/header.svelte b/preview/blocks/header.svelte
index 4cdd41e..480a299 100644
--- a/preview/blocks/header.svelte
+++ b/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>
diff --git a/preview/blocks/info.svelte b/preview/blocks/info.svelte
index 79932e3..a543fd4 100644
--- a/preview/blocks/info.svelte
+++ b/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}
diff --git a/preview/elements/avatar.svelte b/preview/elements/avatar.svelte
index 814d1f8..83504db 100644
--- a/preview/elements/avatar.svelte
+++ b/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
diff --git a/preview/elements/chart-doughnut.svelte b/preview/elements/chart-doughnut.svelte
index 2b9d52a..5a5f6b6 100644
--- a/preview/elements/chart-doughnut.svelte
+++ b/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} />
diff --git a/preview/elements/chart.svelte b/preview/elements/chart.svelte
index 99d6a23..09fa014 100644
--- a/preview/elements/chart.svelte
+++ b/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 {
diff --git a/preview/elements/note.svelte b/preview/elements/note.svelte
index eaa4187..d368b34 100644
--- a/preview/elements/note.svelte
+++ b/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}
diff --git a/preview/elements/table-comment.svelte b/preview/elements/table-comment.svelte
index 4b3d88d..f9540e0 100644
--- a/preview/elements/table-comment.svelte
+++ b/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}
diff --git a/preview/elements/table.svelte b/preview/elements/table.svelte
index 5687e0b..89ef03a 100644
--- a/preview/elements/table.svelte
+++ b/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}
diff --git a/preview/stores/data.ts b/preview/stores/data.ts
index 44850e2..ee9d05b 100644
--- a/preview/stores/data.ts
+++ b/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)
diff --git a/preview/stores/theme.ts b/preview/stores/theme.ts
index 4667d60..f136d36 100644
--- a/preview/stores/theme.ts
+++ b/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
 })
diff --git a/preview/view/app.svelte b/preview/view/app.svelte
index 7f903e9..95a7a0e 100644
--- a/preview/view/app.svelte
+++ b/preview/view/app.svelte
@@ -10,12 +10,14 @@
   $: if ($data.name) {
     document.title = `${$data.name} | Todoctor`
   }
+
+  $: length = $data.data?.length ?? 0
 </script>
 
 <Header />
 <main>
   {#if !$loading}
-    {#if $data.data?.length}
+    {#if length}
       <Graph />
       <Info />
       <List />
diff --git a/preview/view/index.ts b/preview/view/index.ts
index e148afb..0d3bc96 100644
--- a/preview/view/index.ts
+++ b/preview/view/index.ts
@@ -2,10 +2,10 @@ import { hydrate, unmount, mount } from 'svelte'
 
 import App from './app.svelte'
 
-let target = document.getElementById('root')!
+let target = document.querySelector('#root')!
 let render = target.firstChild?.nextSibling ? hydrate : mount
 
 let app = render(App, { target })
 
 // @ts-ignore
-window.unmount = () => unmount(app)
+globalThis.unmount = () => unmount(app)
diff --git a/scripts/build.js b/scripts/build.js
index a340294..1cdc591 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,5 +1,5 @@
+import fs from 'node:fs/promises'
 import path from 'node:path'
-import fs from 'node:fs'
 import os from 'node:os'
 
 import { platforms } from './platforms.js'
@@ -7,11 +7,12 @@ import { platforms } from './platforms.js'
 let platform = os.platform()
 let arch = os.arch()
 
-let userPlatform = platforms.find(p => p.name === platform)
+let userPlatform = platforms.find(
+  currentPlatform => currentPlatform.name === platform,
+)
 
 if (!userPlatform?.arch.includes(arch)) {
-  console.error(`Unsupported platform or architecture: ${platform}, ${arch}`)
-  process.exit(1)
+  throw new Error(`Unsupported platform or architecture: ${platform}, ${arch}`)
 }
 
 let binaryName = ['todoctor', userPlatform.extension].filter(Boolean).join('.')
@@ -23,21 +24,20 @@ let sourcePath = path.join(
   'release',
   binaryName,
 )
-let destDir = path.join(
+let destinationDirectory = path.join(
   import.meta.dirname,
   '../packages/',
   `${platform}-${arch}`,
 )
-let destPath = path.join(destDir, binaryName)
+let destinationPath = path.join(destinationDirectory, binaryName)
 
-if (!fs.existsSync(destDir)) {
-  fs.mkdirSync(destDir, { recursive: true })
+if (!(await fs.exists(destinationDirectory))) {
+  await fs.mkdir(destinationDirectory, { recursive: true })
 }
 
 try {
-  fs.copyFileSync(sourcePath, destPath)
-  fs.chmodSync(destPath, 0o755)
+  await fs.copyFile(sourcePath, destinationPath)
+  await fs.chmod(destinationPath, 0o755)
 } catch (error) {
-  console.error(`Error copying file: ${error.message}`)
-  process.exit(1)
+  throw new Error(`Error copying file: ${error.message}`)
 }
diff --git a/scripts/create-packages.js b/scripts/create-packages.js
index 1fa31e7..b3acca4 100644
--- a/scripts/create-packages.js
+++ b/scripts/create-packages.js
@@ -6,23 +6,31 @@ import path from 'node:path'
 import { getPackageJson } from './get-package-json.js'
 import { platforms } from './platforms.js'
 
-let packagesDir = path.join(import.meta.dirname, '../packages')
+let packagesDirectory = path.join(import.meta.dirname, '../packages')
 let rootPackageJson = await getPackageJson()
 
+let packageTypes = []
+
 for (let platform of platforms) {
   for (let arch of platform.arch) {
-    let packageDir = path.join(packagesDir, `${platform.name}-${arch}`)
+    packageTypes.push([platform.name, arch])
+  }
+}
 
-    await fs.mkdir(packageDir, {
+await Promise.all(
+  packageTypes.map(async ([platform, arch]) => {
+    let packageDirectory = path.join(packagesDirectory, `${platform}-${arch}`)
+
+    await fs.mkdir(packageDirectory, {
       recursive: true,
     })
 
-    let name = `@todoctor/${platform.name}-${arch}`
-    let displayName = platform.name[0].toUpperCase() + platform.name.slice(1)
+    let name = `@todoctor/${platform}-${arch}`
+    let displayName = platform.toUpperCase() + platform.slice(1)
     let displayArch = arch.toUpperCase()
 
     fs.writeFile(
-      path.join(packageDir, 'package.json'),
+      path.join(packageDirectory, 'package.json'),
       JSON.stringify(
         {
           name,
@@ -41,7 +49,7 @@ for (let platform of platforms) {
     )
 
     fs.writeFile(
-      path.join(packageDir, 'readme.md'),
+      path.join(packageDirectory, 'readme.md'),
       [
         `# Todoctor (${displayName}, ${displayArch})`,
         '',
@@ -71,5 +79,5 @@ for (let platform of platforms) {
         'MIT &copy; [Azat S.](https://azat.io)',
       ].join('\n'),
     )
-  }
-}
+  }),
+)
diff --git a/scripts/get-package-json.js b/scripts/get-package-json.js
index e4273e7..3fe9b1f 100644
--- a/scripts/get-package-json.js
+++ b/scripts/get-package-json.js
@@ -3,5 +3,5 @@ import path from 'node:path'
 
 export let getPackageJson = async () => {
   let rootPackageJsonPath = path.join(import.meta.dirname, '../package.json')
-  return JSON.parse(await fs.readFile(rootPackageJsonPath, 'utf-8'))
+  return JSON.parse(await fs.readFile(rootPackageJsonPath, 'utf8'))
 }
diff --git a/scripts/version.js b/scripts/version.js
index f8f1c29..cfff498 100644
--- a/scripts/version.js
+++ b/scripts/version.js
@@ -5,13 +5,10 @@ import { getPackageJson } from './get-package-json.js'
 
 let rootPackageJson = await getPackageJson()
 
-let { version } = rootPackageJson
+let { optionalDependencies, version } = rootPackageJson
 
 rootPackageJson.optionalDependencies = Object.fromEntries(
-  Object.keys(rootPackageJson.optionalDependencies).map(key => [
-    key,
-    `^${version}`,
-  ]),
+  Object.keys(optionalDependencies).map(key => [key, `^${version}`]),
 )
 
 await fs.writeFile(
diff --git a/vite.config.ts b/vite.config.ts
index 88b8da9..006c908 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,9 +14,9 @@ import os from 'node:os'
 import { data } from './preview/mock/data'
 
 let htmlMinify = (): Plugin => ({
-  transformIndexHtml: async html => {
+  transformIndexHtml: async (html): Promise<void> => {
     try {
-      return await minify(html, {
+      await minify(html, {
         removeStyleLinkTypeAttributes: true,
         removeScriptTypeAttributes: true,
         removeRedundantAttributes: true,
@@ -26,26 +26,26 @@ let htmlMinify = (): Plugin => ({
         minifyCSS: true,
         minifyJS: true,
       })
-    } catch (_error) {
-      return html
+    } catch (error) {
+      console.error('HTML minification failed', error)
     }
   },
   name: 'vite-plugin-html-minify',
 })
 
-let injectBeforeHead = (html: string) => ({
+let injectBeforeHead = (html: string): Plugin => ({
   transformIndexHtml: (htmlValue: string) =>
-    htmlValue.replace('</head>', html + '</head>'),
+    htmlValue.replace('</head>', `${html}</head>`),
   name: 'vite-plugin-inject-before-head',
 })
 
 let createFilePlugin = (filename: string, content: string): Plugin => ({
   generateBundle: async () => {
-    let outputDir = path.resolve(import.meta.dirname, 'dist')
+    let outputDirectory = path.resolve(import.meta.dirname, 'dist')
 
     try {
-      await fs.mkdir(outputDir, { recursive: true })
-      let filePath = path.join(outputDir, filename)
+      await fs.mkdir(outputDirectory, { recursive: true })
+      let filePath = path.join(outputDirectory, filename)
 
       await fs.writeFile(filePath, content, 'utf8')
     } catch (error) {
@@ -56,7 +56,7 @@ let createFilePlugin = (filename: string, content: string): Plugin => ({
   apply: 'build',
 })
 
-let isDocs = process.env.DOCS === 'true'
+let isDocumentation = process.env.DOCS === 'true'
 
 export default defineConfig({
   plugins: [
@@ -64,7 +64,7 @@ export default defineConfig({
       include: ['preview/mock/**/*.mock.ts'],
       prefix: ['^/data.json$'],
     }),
-    ...(isDocs
+    ...(isDocumentation
       ? [
           injectBeforeHead(
             `<script>window.data = ${JSON.stringify(data)};</script>`,