refactor: Delegate all prefetching/preloading at app root (#1354)

* refactor: Delegate all prefetching/preloading at app root

* Apply suggestion from @rschristian

Author: rschristian

src/components/app.jsx

@@ -1,13 +1,15 @@
 import { LocationProvider, ErrorBoundary } from 'preact-iso';
 import { LanguageProvider } from '../lib/i18n';
 import { PrerenderDataProvider } from '../lib/prerender-data.jsx';
+import { useDelegatedPrefetch } from '../lib/use-delegated-prefetch.js';
 import Header from './header';
 import Routes from './routes';
 
 /**
  * @param {{ prerenderData?: import('../types.d.ts').PrerenderData }} props
  */
 export default function App({ prerenderData }) {
+	useDelegatedPrefetch();
 	return (
 		<ErrorBoundary>
 			<LocationProvider>

src/components/blog-overview/index.jsx

@@ -1,8 +1,6 @@
 import config from '../../config.json';
 import { useLanguage, useTranslation, getRouteName } from '../../lib/i18n';
 import { Time } from '../time';
-import { prefetchContent } from '../../lib/use-content';
-import { BlogPage } from '../routes.jsx';
 import s from './style.module.css';
 
 export default function BlogOverview() {
@@ -16,21 +14,16 @@ export default function BlogOverview() {
 					const name = getRouteName(post, lang);
 					const excerpt = post.excerpt[lang] || post.excerpt.en;
 
-					const prefetchAndPreload = () => {
-						BlogPage.preload();
-						prefetchContent(post.path);
-					};
-
 					return (
 						<article class={s.post}>
 							<div class={s.meta}>
 								<Time value={post.date} />
 							</div>
 							<h2 class={s.title}>
-								<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload}>{name}</a>
+								<a href={post.path}>{name}</a>
 							</h2>
 							<p class={s.excerpt}>{excerpt}</p>
-							<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload} class="btn-small">
+							<a href={post.path} class="btn-small">
 								{continueReading} &rarr;
 							</a>
 						</article>

src/components/content-region/index.jsx

@@ -4,33 +4,9 @@ import widgets from '../widgets';
 import style from './style.module.css';
 import { useTranslation } from '../../lib/i18n';
 import { TocContext } from '../table-of-contents';
-import { prefetchContent } from '../../lib/use-content';
-import { ReplPage, TutorialPage, CodeEditor } from '../routes';
 
 const COMPONENTS = {
-	...widgets,
-	a(props) {
-		if (props.href && props.href.startsWith('/')) {
-			const url = new URL(props.href, location.origin);
-
-			const prefetchAndPreload = () => {
-				if (props.href.startsWith('/repl')) {
-					ReplPage.preload();
-					CodeEditor.preload();
-				} else if (props.href.startsWith('/tutorial')) {
-					TutorialPage.preload();
-					CodeEditor.preload();
-				}
-
-				prefetchContent(url.pathname);
-			};
-
-			props.onMouseOver = prefetchAndPreload;
-			props.onTouchStart = prefetchAndPreload;
-		}
-
-		return <a {...props} />;
-	}
+	...widgets
 };
 
 function SiblingNav({ route, lang, start }) {
@@ -73,7 +49,11 @@ export default function ContentRegion({ content, components, ...props }) {
 	}, [props.current]);
 
 	return (
-		<content-region name={props.current} data-page-nav={hasNav} can-edit={props.canEdit}>
+		<content-region
+			name={props.current}
+			data-page-nav={hasNav}
+			can-edit={props.canEdit}
+		>
 			{content && (
 				<TocContext.Provider value={{ toc: props.toc }}>
 					<Markup

src/components/header/index.jsx

@@ -9,8 +9,6 @@ import Corner from './corner';
 import { useOverlayToggle } from '../../lib/toggle-overlay';
 import { useLocation } from 'preact-iso';
 import { useLanguage, useTranslation, useNavTranslation } from '../../lib/i18n';
-import { prefetchContent } from '../../lib/use-content';
-import { ReplPage, TutorialPage, CodeEditor } from '../routes';
 
 export default function Header() {
 	const { url } = useLocation();
@@ -240,21 +238,6 @@ function ExpandableNavLink({ isOpen, label, children, ...rest }) {
 	);
 }
 
-/**
- * @param {string} href
- */
-const prefetchAndPreload = href => {
-	if (href.startsWith('/repl')) {
-		ReplPage.preload();
-		CodeEditor.preload();
-	} else if (href.startsWith('/tutorial')) {
-		TutorialPage.preload();
-		CodeEditor.preload();
-	}
-
-	prefetchContent(href);
-};
-
 /**
  * @typedef {Object} NavLinkProps
  * @property {string} props.href
@@ -273,8 +256,6 @@ function NavLink({ href, flair, clsx, isOpen, ...rest }) {
 	return (
 		<a
 			href={href}
-			onMouseOver={() => prefetchAndPreload(href)}
-			onTouchStart={() => prefetchAndPreload(href)}
 			class={cx(pathMatchesHref(path, href) && style.current, clsx)}
 			{...rest}
 		>

src/components/sidebar/sidebar-nav.jsx

@@ -1,6 +1,5 @@
 import { useRoute } from 'preact-iso';
 import cx from '../../lib/cx';
-import { prefetchContent } from '../../lib/use-content';
 import style from './sidebar-nav.module.css';
 
 /**
@@ -69,8 +68,6 @@ function SidebarNavLink(props) {
 		<a
 			href={href}
 			onClick={onClick}
-			onMouseOver={() => prefetchContent(href)}
-			onTouchStart={() => prefetchContent(href)}
 			class={cx(style.link, activeCss, style['level-' + level])}
 		>
 			{children}

src/lib/use-delegated-prefetch.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'preact/hooks';
+
+import { prefetchContent } from './use-content.js';
+import {
+	ReplPage,
+	TutorialPage,
+	CodeEditor,
+	BlogPage
+} from '../components/routes.jsx';
+
+export function useDelegatedPrefetch() {
+	useEffect(() => {
+		const prefetchAndPreload = e => {
+			if (e.target.tagName === 'A') {
+				if (!e.target.href.startsWith(location.origin)) return;
+				const pathname = new URL(e.target.href).pathname;
+
+				if (pathname.startsWith('/repl')) {
+					ReplPage.preload();
+					CodeEditor.preload();
+				} else if (pathname.startsWith('/tutorial')) {
+					TutorialPage.preload();
+					CodeEditor.preload();
+				} else if (pathname.startsWith('/blog/')) {
+					BlogPage.preload();
+				}
+
+				prefetchContent(pathname);
+			}
+		};
+
+		addEventListener('mouseover', prefetchAndPreload);
+		addEventListener('touchstart', prefetchAndPreload);
+
+		return () => {
+			removeEventListener('mouseover', prefetchAndPreload);
+			removeEventListener('touchstart', prefetchAndPreload);
+		};
+	}, []);
+}