import { h, type FunctionComponent } from 'preact' import { useCallback, useEffect, useRef } from 'preact/hooks' import { LocationProvider, Route, Router } from 'preact-iso' import { get } from 'lowline' import Head from './head.ts' import Footer from './footer.tsx' import Header from './header.tsx' import ErrorPage from './error_page.tsx' import routes from '../routes.ts' import throttle from '../../shared/utils/throttle.ts' import s from './app.module.scss' type Props = { error?: Error title?: string } const scroll = () => { const offset = get(window.history, 'state.scrollTop') window.scrollTo(0, offset || 0) } const App: FunctionComponent = ({ error, title }) => { const loadRef = useRef(false) useEffect(() => { history.scrollRestoration = 'manual' const remember = throttle(function remember() { if (loadRef.current) return window.history.replaceState( { ...window.history.state, scrollTop: window.scrollY, }, '', null, ) }, 100) addEventListener('scroll', remember) return () => removeEventListener('scroll', remember) }, []) const onLoadStart = useCallback(() => { loadRef.current = true }, []) const onLoadEnd = useCallback(() => { scroll() loadRef.current = false }, []) const onRouteChange = useCallback(() => { if (!loadRef.current) scroll() }, []) return (
{title || 'Untitled'}
{error ? ( ) : ( {routes.map((route) => ( ))} )}
) } export default App