refactor(typescript): use generic instead of simple array type (#205)

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({

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)
 

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)

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',

examples/tuono-tutorial/src/components/PokemonView.tsx

@@ -1,4 +1,5 @@
 import { Link } from 'tuono'
+
 import styles from './PokemonView.module.css'
 
 interface Pokemon {

examples/tuono-tutorial/src/routes/index.tsx

@@ -9,7 +9,7 @@ interface Pokemon {
 }
 
 interface IndexProps {
-  results: Pokemon[]
+  results: Array<Pokemon>
 }
 
 export default function IndexPage({

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`
 

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

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 {

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,

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
 }

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]) => {

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)

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 (

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
 }

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
   }

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)
 

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)

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),

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 = {}