chore: add type safety to CsvTable and csv data loader

.vitepress/theme/index.ts

@@ -1,10 +1,7 @@
 import type { Theme } from 'vitepress';
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client';
 import DefaultTheme from 'vitepress/theme';
-
-// https://vitepress.dev/guide/custom-theme
 import { h } from 'vue';
-
 import CsvTable from '@/components/CsvTable.vue';
 import './style.css';
 

components/CsvTable.vue

@@ -1,20 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { data } from './csv-loader.data';
 
-const props = defineProps({
-  csvUrl: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: false,
-    default: '',
-  },
-});
+const { csvUrl, title = '' } = defineProps<{
+  csvUrl: string;
+  title?: string;
+}>();
 
-const csvData = computed(() => data[props.csvUrl]);
+const csvData = computed(() => data[csvUrl]);
 </script>
 
 <template>

components/csv-loader.data.ts

@@ -1,30 +1,36 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import Papa from 'papaparse';
+import { defineLoader } from 'vitepress';
 
-interface CsvData {
+export interface CsvData {
   headers: string[];
   rows: string[][];
 }
 
-export default {
-  watch: ['public/files/*.csv'], // Watch for changes in CSV files
-  async load(watchedFiles: string[]) {
-    const data: Record<string, CsvData> = {};
+export type CsvDataRecord = Record<string, CsvData>;
+
+declare const data: CsvDataRecord;
+
+export { data };
+
+export default defineLoader({
+  watch: ['public/files/*.csv'],
+  async load(watchedFiles): Promise<CsvDataRecord> {
+    const data: CsvDataRecord = {};
 
     for (const filePath of watchedFiles) {
       const csvContent = fs.readFileSync(filePath, 'utf-8');
-      const parsed = Papa.parse(csvContent);
+      const parsed: { data: string[][] } = Papa.parse(csvContent);
 
-      // Convert absolute path to public URL path
       const publicPath = `/files/${path.basename(filePath)}`;
 
       data[publicPath] = {
         headers: parsed.data[0],
-        rows: parsed.data.slice(1).filter(row => row.some(cell => cell)), // Filter empty rows
+        rows: parsed.data.slice(1).filter((row: string[]) => row.some(cell => cell)),
       };
     }
 
     return data;
   },
-};
+});

eslint.config.mjs

@@ -16,7 +16,7 @@ export default rotki({
     '@stylistic/spaced-comment': 'off',
   },
 }, {
-  files: ['.vitepress/theme/index.ts', '.vitepress/config.mts'],
+  files: ['.vitepress/theme/index.ts', '.vitepress/config.mts', '**/*.data.ts'],
   rules: {
     'import/no-default-export': 'off',
   },

package.json

@@ -2,8 +2,9 @@
   "name": "@rotki/docs",
   "version": "1.0.0",
   "private": true,
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.32.1",
   "description": "rotki's user guide and facing documentation",
+  "type": "module",
   "keywords": [
     "static",
     "documentation",
@@ -26,25 +27,25 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "6.0.4",
-    "vue": "3.5.28"
+    "@vitejs/plugin-vue": "6.0.5",
+    "vue": "3.5.30"
   },
   "devDependencies": {
-    "@rotki/eslint-config": "4.5.0",
-    "@rotki/eslint-plugin": "1.2.0",
+    "@rotki/eslint-config": "5.0.1",
+    "@rotki/eslint-plugin": "1.3.2",
     "@types/node": "24.10.13",
-    "@vue/compiler-sfc": "3.5.28",
-    "@vue/runtime-dom": "3.5.28",
+    "@vue/compiler-sfc": "3.5.30",
+    "@vue/runtime-dom": "3.5.30",
     "cheerio": "1.2.0",
-    "eslint": "9.39.2",
+    "eslint": "9.39.4",
     "husky": "9.1.7",
     "image-size": "2.0.2",
-    "lint-staged": "16.2.7",
+    "lint-staged": "16.4.0",
     "markdown-it": "14.1.1",
     "papaparse": "5.5.3",
     "url": "0.11.4",
     "vitepress": "1.6.4",
-    "vitepress-plugin-tabs": "0.7.3"
+    "vitepress-plugin-tabs": "0.8.0"
   },
   "engines": {
     "node": ">=24 <25",