From c76464bf8a12337a3b35f50e779bdca9f91a0a83 Mon Sep 17 00:00:00 2001
From: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com>
Date: Sat, 7 Dec 2024 11:58:58 +0100
Subject: [PATCH] refactor(typescript): use generic instead of simple array
 type (#205)

---
 .../src/components/breadcrumbs/breadcrumbs.tsx            | 2 +-
 .../src/components/table-of-content/get-headings.ts       | 6 +++---
 .../src/components/table-of-content/table-of-content.tsx  | 6 +++---
 eslint.config.js                                          | 2 +-
 examples/tuono-tutorial/src/components/PokemonView.tsx    | 1 +
 examples/tuono-tutorial/src/routes/index.tsx              | 2 +-
 packages/fs-router-vite-plugin/src/build-route-config.ts  | 2 +-
 packages/fs-router-vite-plugin/src/generator.ts           | 8 ++++----
 packages/fs-router-vite-plugin/src/has-parent-route.ts    | 2 +-
 packages/fs-router-vite-plugin/src/sort-route-nodes.ts    | 2 +-
 packages/fs-router-vite-plugin/src/types.ts               | 2 +-
 packages/fs-router-vite-plugin/src/utils.ts               | 6 +++---
 packages/router/src/components/RouteMatch.tsx             | 7 +++++--
 packages/router/src/hooks/useRoute.tsx                    | 2 +-
 packages/router/src/hooks/useRouterStore.tsx              | 6 +++---
 packages/router/src/route.ts                              | 4 ++--
 packages/router/src/router.ts                             | 2 +-
 packages/router/src/utils.ts                              | 6 +++---
 packages/tuono/src/build/utils.ts                         | 2 +-
 packages/tuono/src/ssr/index.tsx                          | 8 ++++----
 20 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
index 7ee868e4..e13fcbf9 100644
--- a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -9,7 +9,7 @@ interface Breadcrumb {
   label: string
 }
 interface BreadcrumbsProps {
-  breadcrumbs: Breadcrumb[]
+  breadcrumbs: Array<Breadcrumb>
 }
 
 export default function TuonoBreadcrumbs({
diff --git a/apps/documentation/src/components/table-of-content/get-headings.ts b/apps/documentation/src/components/table-of-content/get-headings.ts
index 2c0a50a8..acee9300 100644
--- a/apps/documentation/src/components/table-of-content/get-headings.ts
+++ b/apps/documentation/src/components/table-of-content/get-headings.ts
@@ -8,8 +8,8 @@ export interface Heading {
   getNode: () => HTMLHeadingElement
 }
 
-function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
-  const result: Heading[] = []
+function getHeadingsData(headings: Array<HTMLHeadingElement>): Array<Heading> {
+  const result: Array<Heading> = []
 
   for (const heading of headings) {
     if (heading.id) {
@@ -26,7 +26,7 @@ function getHeadingsData(headings: HTMLHeadingElement[]): Heading[] {
   return result
 }
 
-export function getHeadings(): Heading[] {
+export function getHeadings(): Array<Heading> {
   const root = document.getElementById('mdx-root')
   console.log(root)
 
diff --git a/apps/documentation/src/components/table-of-content/table-of-content.tsx b/apps/documentation/src/components/table-of-content/table-of-content.tsx
index f66f259d..cebb5977 100644
--- a/apps/documentation/src/components/table-of-content/table-of-content.tsx
+++ b/apps/documentation/src/components/table-of-content/table-of-content.tsx
@@ -14,7 +14,7 @@ interface TableOfContentsProps {
   withTabs: boolean
 }
 
-function getActiveElement(rects: DOMRect[]): number {
+function getActiveElement(rects: Array<DOMRect>): number {
   if (rects.length === 0) {
     return -1
   }
@@ -40,8 +40,8 @@ export function TableOfContents({
   withTabs,
 }: TableOfContentsProps): JSX.Element | null {
   const [active, setActive] = useState(0)
-  const [headings, setHeadings] = useState<Heading[]>([])
-  const headingsRef = useRef<Heading[]>([])
+  const [headings, setHeadings] = useState<Array<Heading>>([])
+  const headingsRef = useRef<Array<Heading>>([])
   const router = useRouter()
 
   const filteredHeadings = headings.filter((heading) => heading.depth > 1)
diff --git a/eslint.config.js b/eslint.config.js
index 58f0248d..467a89a7 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -48,7 +48,7 @@ export default tseslint.config(
     },
     rules: {
       // #region @typescript-eslint
-      '@typescript-eslint/array-type': 'error',
+      '@typescript-eslint/array-type': ['error', { default: 'generic' }],
       '@typescript-eslint/no-wrapper-object-types': 'error',
       '@typescript-eslint/no-empty-object-type': 'error',
       '@typescript-eslint/no-unsafe-function-type': 'error',
diff --git a/examples/tuono-tutorial/src/components/PokemonView.tsx b/examples/tuono-tutorial/src/components/PokemonView.tsx
index 0f643aab..f631ccdf 100644
--- a/examples/tuono-tutorial/src/components/PokemonView.tsx
+++ b/examples/tuono-tutorial/src/components/PokemonView.tsx
@@ -1,4 +1,5 @@
 import { Link } from 'tuono'
+
 import styles from './PokemonView.module.css'
 
 interface Pokemon {
diff --git a/examples/tuono-tutorial/src/routes/index.tsx b/examples/tuono-tutorial/src/routes/index.tsx
index dc08aced..79d26d55 100644
--- a/examples/tuono-tutorial/src/routes/index.tsx
+++ b/examples/tuono-tutorial/src/routes/index.tsx
@@ -9,7 +9,7 @@ interface Pokemon {
 }
 
 interface IndexProps {
-  results: Pokemon[]
+  results: Array<Pokemon>
 }
 
 export default function IndexPage({
diff --git a/packages/fs-router-vite-plugin/src/build-route-config.ts b/packages/fs-router-vite-plugin/src/build-route-config.ts
index 1ab66c1e..11484d90 100644
--- a/packages/fs-router-vite-plugin/src/build-route-config.ts
+++ b/packages/fs-router-vite-plugin/src/build-route-config.ts
@@ -1,7 +1,7 @@
 import { spaces } from './utils'
 import type { RouteNode } from './types'
 
-export function buildRouteConfig(nodes: RouteNode[], depth = 1): string {
+export function buildRouteConfig(nodes: Array<RouteNode>, depth = 1): string {
   const children = nodes.map((node) => {
     const route = `${node.variableName}Route`
 
diff --git a/packages/fs-router-vite-plugin/src/generator.ts b/packages/fs-router-vite-plugin/src/generator.ts
index 3fc56301..41a7628b 100644
--- a/packages/fs-router-vite-plugin/src/generator.ts
+++ b/packages/fs-router-vite-plugin/src/generator.ts
@@ -36,9 +36,9 @@ let skipMessage = false
 
 async function getRouteNodes(
   config = defaultConfig,
-): Promise<{ routeNodes: RouteNode[]; rustHandlersNodes: string[] }> {
-  const routeNodes: RouteNode[] = []
-  const rustHandlersNodes: string[] = []
+): Promise<{ routeNodes: Array<RouteNode>; rustHandlersNodes: Array<string> }> {
+  const routeNodes: Array<RouteNode> = []
+  const rustHandlersNodes: Array<string> = []
 
   async function recurse(dir: string): Promise<void> {
     const fullDir = path.resolve(config.folderName, dir)
@@ -127,7 +127,7 @@ export async function routeGenerator(config = defaultConfig): Promise<void> {
 
   const preRouteNodes = sortRouteNodes(beforeRouteNodes)
 
-  const routeNodes: RouteNode[] = []
+  const routeNodes: Array<RouteNode> = []
 
   // Loop over the flat list of routeNodes and
   // build up a tree based on the routeNodes' routePath
diff --git a/packages/fs-router-vite-plugin/src/has-parent-route.ts b/packages/fs-router-vite-plugin/src/has-parent-route.ts
index 12b137c5..9f85fcbe 100644
--- a/packages/fs-router-vite-plugin/src/has-parent-route.ts
+++ b/packages/fs-router-vite-plugin/src/has-parent-route.ts
@@ -3,7 +3,7 @@ import { multiSortBy } from './utils'
 import type { RouteNode } from './types'
 
 export function hasParentRoute(
-  routes: RouteNode[],
+  routes: Array<RouteNode>,
   node: RouteNode,
   routePathToCheck = '/',
 ): RouteNode | null {
diff --git a/packages/fs-router-vite-plugin/src/sort-route-nodes.ts b/packages/fs-router-vite-plugin/src/sort-route-nodes.ts
index 9273f997..70286dc1 100644
--- a/packages/fs-router-vite-plugin/src/sort-route-nodes.ts
+++ b/packages/fs-router-vite-plugin/src/sort-route-nodes.ts
@@ -4,7 +4,7 @@ import { ROOT_PATH_ID } from './constants'
 
 // Routes need to be sorted in order to iterate over the handleNode fn
 // with first the items that might be parent routes
-export const sortRouteNodes = (routes: RouteNode[]): RouteNode[] =>
+export const sortRouteNodes = (routes: Array<RouteNode>): Array<RouteNode> =>
   multiSortBy(routes, [
     (d): number => (d.routePath === '/' ? -1 : 1),
     (d): number => d.routePath.split('/').length,
diff --git a/packages/fs-router-vite-plugin/src/types.ts b/packages/fs-router-vite-plugin/src/types.ts
index 10ade7a2..ccf2399f 100644
--- a/packages/fs-router-vite-plugin/src/types.ts
+++ b/packages/fs-router-vite-plugin/src/types.ts
@@ -5,7 +5,7 @@ export interface RouteNode {
   path?: string
   cleanedPath?: string
   isLayout?: boolean
-  children?: RouteNode[]
+  children?: Array<RouteNode>
   parent?: RouteNode
   variableName?: string
 }
diff --git a/packages/fs-router-vite-plugin/src/utils.ts b/packages/fs-router-vite-plugin/src/utils.ts
index e6a5daf2..c1d949a5 100644
--- a/packages/fs-router-vite-plugin/src/utils.ts
+++ b/packages/fs-router-vite-plugin/src/utils.ts
@@ -34,9 +34,9 @@ export function routePathToVariable(routePath: string): string {
 }
 
 export function multiSortBy<T>(
-  arr: T[],
-  accessors: ((item: T) => unknown)[] = [(d): unknown => d],
-): T[] {
+  arr: Array<T>,
+  accessors: Array<(item: T) => unknown> = [(d): unknown => d],
+): Array<T> {
   return arr
     .map((d, i) => [d, i] as const)
     .sort(([a, ai], [b, bi]) => {
diff --git a/packages/router/src/components/RouteMatch.tsx b/packages/router/src/components/RouteMatch.tsx
index 21c9f6da..31ffbfd4 100644
--- a/packages/router/src/components/RouteMatch.tsx
+++ b/packages/router/src/components/RouteMatch.tsx
@@ -36,7 +36,7 @@ interface ParentProps<TData = unknown> {
 }
 
 interface TraverseRootComponentsProps<TData = unknown> {
-  routes: Route[]
+  routes: Array<Route>
   data: TData
   isLoading: boolean
   children?: React.ReactNode
@@ -84,7 +84,10 @@ const TraverseRootComponents = React.memo(
   },
 )
 
-const loadParentComponents = (route: Route, loader: Route[] = []): Route[] => {
+const loadParentComponents = (
+  route: Route,
+  loader: Array<Route> = [],
+): Array<Route> => {
   const parentComponent = route.options.getParentRoute?.() as Route
 
   loader.push(parentComponent)
diff --git a/packages/router/src/hooks/useRoute.tsx b/packages/router/src/hooks/useRoute.tsx
index 538097d4..b7566066 100644
--- a/packages/router/src/hooks/useRoute.tsx
+++ b/packages/router/src/hooks/useRoute.tsx
@@ -47,7 +47,7 @@ export default function useRoute(pathname?: string): Route | undefined {
   for (const dynamicRoute of dynamicRoutes) {
     const dynamicRouteSegments = dynamicRoute.split('/').filter(Boolean)
 
-    const routeSegmentsCollector: string[] = []
+    const routeSegmentsCollector: Array<string> = []
 
     for (let i = 0; i < dynamicRouteSegments.length; i++) {
       if (
diff --git a/packages/router/src/hooks/useRouterStore.tsx b/packages/router/src/hooks/useRouterStore.tsx
index 180969e9..e2e74d8c 100644
--- a/packages/router/src/hooks/useRouterStore.tsx
+++ b/packages/router/src/hooks/useRouterStore.tsx
@@ -16,9 +16,9 @@ interface RouterState {
   isTransitioning: boolean
   status: 'idle'
   location: ParsedLocation
-  matches: string[]
-  pendingMatches: string[]
-  cachedMatches: string[]
+  matches: Array<string>
+  pendingMatches: Array<string>
+  cachedMatches: Array<string>
   statusCode: 200
   updateLocation: (loc: ParsedLocation) => void
 }
diff --git a/packages/router/src/route.ts b/packages/router/src/route.ts
index 7891a5e3..2f5c8d1f 100644
--- a/packages/router/src/route.ts
+++ b/packages/router/src/route.ts
@@ -24,7 +24,7 @@ export class Route {
   path?: string
   fullPath!: string
 
-  children?: Route[]
+  children?: Array<Route>
   parentRoute?: Route
   originalIndex?: number
   component: RouteComponent
@@ -77,7 +77,7 @@ export class Route {
     this.fullPath = fullPath || ''
   }
 
-  addChildren(routes: Route[]): Route {
+  addChildren(routes: Array<Route>): Route {
     this.children = routes
     return this
   }
diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts
index 89a07aef..3d3bb5fe 100644
--- a/packages/router/src/router.ts
+++ b/packages/router/src/router.ts
@@ -59,7 +59,7 @@ export class Router {
   }
 
   #buildRouteTree = (): void => {
-    const recurseRoutes = (childRoutes: Route[]): void => {
+    const recurseRoutes = (childRoutes: Array<Route>): void => {
       childRoutes.forEach((route: Route, i: number) => {
         route.init(i)
 
diff --git a/packages/router/src/utils.ts b/packages/router/src/utils.ts
index 08236d6a..81f829c8 100644
--- a/packages/router/src/utils.ts
+++ b/packages/router/src/utils.ts
@@ -1,6 +1,6 @@
 import type { Segment } from './types'
 
-export function joinPaths(paths: (string | undefined)[]): string {
+export function joinPaths(paths: Array<string | undefined>): string {
   return cleanPath(paths.filter(Boolean).join('/'))
 }
 
@@ -9,14 +9,14 @@ function cleanPath(path: string): string {
   return path.replace(/\/{2,}/g, '/')
 }
 
-export function parsePathname(pathname?: string): Segment[] {
+export function parsePathname(pathname?: string): Array<Segment> {
   if (!pathname) {
     return []
   }
 
   pathname = cleanPath(pathname)
 
-  const segments: Segment[] = []
+  const segments: Array<Segment> = []
 
   if (pathname.slice(0, 1) === '/') {
     pathname = pathname.substring(1)
diff --git a/packages/tuono/src/build/utils.ts b/packages/tuono/src/build/utils.ts
index 21624d1e..45be8a1b 100644
--- a/packages/tuono/src/build/utils.ts
+++ b/packages/tuono/src/build/utils.ts
@@ -45,7 +45,7 @@ const normalizeViteAlias = (alias?: AliasOptions): AliasOptions | undefined => {
   if (!alias) return
 
   if (Array.isArray(alias)) {
-    return (alias as Extract<AliasOptions, readonly unknown[]>).map(
+    return (alias as Extract<AliasOptions, ReadonlyArray<unknown>>).map(
       ({ replacement, ...userAliasDefinition }) => ({
         ...userAliasDefinition,
         replacement: normalizeAliasPath(replacement),
diff --git a/packages/tuono/src/ssr/index.tsx b/packages/tuono/src/ssr/index.tsx
index fb89d2af..2275d317 100644
--- a/packages/tuono/src/ssr/index.tsx
+++ b/packages/tuono/src/ssr/index.tsx
@@ -22,14 +22,14 @@ window.__vite_plugin_react_preamble_installed__ = true
 <script type="module" src="http://localhost:${TUONO_DEV_SERVER_PORT}${VITE_PROXY_PATH}/@vite/client"></script>
 <script type="module" src="http://localhost:${TUONO_DEV_SERVER_PORT}${VITE_PROXY_PATH}/client-main.tsx"></script>`
 
-function generateCssLinks(cssBundles: string[], mode: Mode): string {
+function generateCssLinks(cssBundles: Array<string>, mode: Mode): string {
   if (mode === 'Dev') return ''
   return cssBundles.reduce((acc, value) => {
     return acc + `<link rel="stylesheet" type="text/css" href="/${value}" />`
   }, '')
 }
 
-function generateJsScripts(jsBundles: string[], mode: Mode): string {
+function generateJsScripts(jsBundles: Array<string>, mode: Mode): string {
   if (mode === 'Dev') return ''
   return jsBundles.reduce((acc, value) => {
     return acc + `<script type="module" src="/${value}"></script>`
@@ -44,8 +44,8 @@ export function serverSideRendering(routeTree: RouteTree) {
     >
 
     const mode = serverProps.mode as Mode
-    const jsBundles = serverProps.jsBundles as string[]
-    const cssBundles = serverProps.cssBundles as string[]
+    const jsBundles = serverProps.jsBundles as Array<string>
+    const cssBundles = serverProps.cssBundles as Array<string>
     const router = createRouter({ routeTree }) // Render the app
 
     const helmetContext = {}