Preload chunks when links are visible in the viewport (#24)

* feat: preload chunk when links are visible in the viewport

* feat: update version to v0.9.0

packages/router/src/components/Link.tsx

@@ -1,11 +1,25 @@
 import * as React from 'react'
 import { useRouter } from '../hooks/useRouter'
 import type { AnchorHTMLAttributes, MouseEvent } from 'react'
+import useRoute from '../hooks/useRoute'
+import { useInView } from 'react-intersection-observer'
+
+interface TuonoLinkProps {
+  preload?: boolean
+}
 
 export default function Link(
-  props: AnchorHTMLAttributes<HTMLAnchorElement>,
+  componentProps: AnchorHTMLAttributes<HTMLAnchorElement> & TuonoLinkProps,
 ): JSX.Element {
+  const { preload = true, ...props } = componentProps
   const router = useRouter()
+  const route = useRoute(props.href)
+  const { ref } = useInView({
+    onChange(inView) {
+      if (inView && preload) route?.component.preload()
+    },
+    triggerOnce: true,
+  })
 
   const handleTransition = (e: MouseEvent<HTMLAnchorElement>): void => {
     e.preventDefault()
@@ -14,7 +28,7 @@ export default function Link(
   }
 
   return (
-    <a {...props} onClick={handleTransition}>
+    <a {...props} ref={ref} onClick={handleTransition}>
       {props.children}
     </a>
   )

packages/router/src/components/Matches.spec.tsx

@@ -1,38 +0,0 @@
-import { afterEach, describe, expect, test, vi } from 'vitest'
-import { getRouteByPathname } from './Matches'
-import { cleanup } from '@testing-library/react'
-
-describe('Test getRouteByPathname fn', () => {
-  afterEach(() => {
-    cleanup()
-  })
-
-  test('match routes by ids', () => {
-    vi.mock('../hooks/useInternalRouter.tsx', () => ({
-      useInternalRouter: (): { routesById: Record<string, any> } => {
-        return {
-          routesById: {
-            '/': { id: '/' },
-            '/about': { id: '/about' },
-            '/posts/': { id: '/posts/' }, // posts/index
-            '/posts/[post]': { id: '/posts/[post]' },
-            '/posts/defined-post': { id: '/posts/defined-post' },
-            '/posts/[post]/[comment]': { id: '/posts/[post]/[comment]' },
-          },
-        }
-      },
-    }))
-
-    expect(getRouteByPathname('/')?.id).toBe('/')
-    expect(getRouteByPathname('/not-found')?.id).toBe(undefined)
-    expect(getRouteByPathname('/about')?.id).toBe('/about')
-    expect(getRouteByPathname('/posts/')?.id).toBe('/posts/')
-    expect(getRouteByPathname('/posts/dynamic-post')?.id).toBe('/posts/[post]')
-    expect(getRouteByPathname('/posts/defined-post')?.id).toBe(
-      '/posts/defined-post',
-    )
-    expect(getRouteByPathname('/posts/dynamic-post/dynamic-comment')?.id).toBe(
-      '/posts/[post]/[comment]',
-    )
-  })
-})

packages/router/src/components/Matches.tsx

@@ -1,71 +1,18 @@
 import * as React from 'react'
-import { useInternalRouter } from '../hooks/useInternalRouter'
 import { useRouterStore } from '../hooks/useRouterStore'
-import type { Route } from '../route'
 import { RouteMatch } from './RouteMatch'
 import NotFound from './NotFound'
+import useRoute from '../hooks/useRoute'
 
 interface MatchesProps {
   // user defined props
   serverSideProps: any
 }
 
-const DYNAMIC_PATH_REGEX = /\[(.*?)\]/
-
-/*
- * This function is also implemented on server side to match the bundle
- * file to load at the first rendering.
- *
- * File: crates/tuono_lib/src/payload.rs
- *
- * Optimizations should occour on both
- */
-export function getRouteByPathname(pathname: string): Route | undefined {
-  const { routesById } = useInternalRouter()
-
-  if (routesById[pathname]) return routesById[pathname]
-
-  const dynamicRoutes = Object.keys(routesById).filter((route) =>
-    DYNAMIC_PATH_REGEX.test(route),
-  )
-
-  if (!dynamicRoutes.length) return
-
-  const pathSegments = pathname.split('/').filter(Boolean)
-
-  let match = undefined
-
-  // TODO: Check algo efficiency
-  for (const dynamicRoute of dynamicRoutes) {
-    const dynamicRouteSegments = dynamicRoute.split('/').filter(Boolean)
-
-    const routeSegmentsCollector: string[] = []
-
-    for (let i = 0; i < dynamicRouteSegments.length; i++) {
-      if (
-        dynamicRouteSegments[i] === pathSegments[i] ||
-        DYNAMIC_PATH_REGEX.test(dynamicRouteSegments[i] || '')
-      ) {
-        routeSegmentsCollector.push(dynamicRouteSegments[i] ?? '')
-      } else {
-        break
-      }
-    }
-
-    if (routeSegmentsCollector.length === pathSegments.length) {
-      match = `/${routeSegmentsCollector.join('/')}`
-      break
-    }
-  }
-
-  if (!match) return
-  return routesById[match]
-}
-
 export function Matches({ serverSideProps }: MatchesProps): JSX.Element {
   const location = useRouterStore((st) => st.location)
 
-  const route = getRouteByPathname(location.pathname)
+  const route = useRoute(location.pathname)
 
   if (!route) {
     return <NotFound />

packages/router/src/components/RouteMatch.spec.tsx

@@ -14,7 +14,7 @@ const root = {
   component: ({ children }: Props) => (
     <div data-testid="root">root route {children}</div>
   ),
-} as Route
+} as unknown as Route
 
 const parent = {
   component: ({ children }: Props) => (
@@ -23,14 +23,14 @@ const parent = {
   options: {
     getParentRoute: () => root,
   },
-} as Route
+} as unknown as Route
 
 const route = {
   component: () => <p data-testid="route">current route</p>,
   options: {
     getParentRoute: () => parent,
   },
-} as Route
+} as unknown as Route
 
 describe('Test RouteMatch component', () => {
   afterEach(() => {