fix: Reduce tearing issues (#1113)

* fix: 'Outdated docs' banner flash & simplify guide check * refactor: Swap in `useRoute` where possible * refactor: Swap out fake suspense impl
preactjs · Apr 9, 2024 · 1c1a08f · 1c1a08f
1 parent a1485d4
commit 1c1a08f
Show file tree

Hide file tree

Showing 23 changed files with 38 additions and 80 deletions.
diff --git a/content/de/index.md b/content/de/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 

diff --git a/content/en/index.md b/content/en/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 description: 'Fast 3kB alternative to React with the same modern API.'
 ---
 

diff --git a/content/es/index.md b/content/es/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 

diff --git a/content/fr/index.md b/content/fr/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 <jumbotron>

diff --git a/content/it/index.md b/content/it/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 

diff --git a/content/ja/index.md b/content/ja/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 description: 'Preact is a fast 3kB alternative to React with the same modern API'
 ---
 

diff --git a/content/kr/index.md b/content/kr/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 description: 'Fast 3kB alternative to React with the same modern API.'
 ---
 

diff --git a/content/pt-br/index.md b/content/pt-br/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 

diff --git a/content/ru/index.md b/content/ru/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 description: 'Быстрая 3КБ-альтернатива React с тем же современным API.'
 ---
 

diff --git a/content/tr/index.md b/content/tr/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 ---
 
 

diff --git a/content/zh/index.md b/content/zh/index.md
@@ -1,7 +1,6 @@
 ---
 layout: home
 title: Preact
-toc: false
 description: 'React 的 3kb 轻量级替代方案，拥有相同的现代 API。'
 ---
 

diff --git a/src/components/code-block/index.jsx b/src/components/code-block/index.jsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'preact/hooks';
+import { Suspense } from 'preact/compat';
 import { wrap } from 'comlink';
-import { FakeSuspense, useResource } from '../../lib/use-resource';
+import { useResource } from '../../lib/use-resource';
 
 let prismWorker;
 
@@ -75,9 +76,9 @@ function HighlightedCodeBlock({ code, lang }) {
 	return (
 		<div class="highlight-container">
 			<pre class="highlight">
-				<FakeSuspense fallback={fallback}>
+				<Suspense fallback={fallback}>
 					<HighlightedCode code={code} lang={lang} />
-				</FakeSuspense>
+				</Suspense>
 			</pre>
 			{repl && (
 				<a class="repl-link" href={`/repl?code=${encodeURIComponent(source)}`}>

diff --git a/src/components/controllers/blog-page.jsx b/src/components/controllers/blog-page.jsx
@@ -1,4 +1,4 @@
-import { useRoute, useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import { useContent } from '../../lib/use-resource';
 import { useTitle, useDescription } from './utils';
 import { NotFound } from './not-found';
@@ -20,7 +20,7 @@ export default function BlogPage() {
 }
 
 function BlogLayout() {
-	const { path } = useLocation();
+	const { path } = useRoute();
 	const [lang] = useLanguage();
 
 	const { html, meta } = useContent([lang, path === '/' ? 'index' : path]);

diff --git a/src/components/controllers/doc-page.jsx b/src/components/controllers/doc-page.jsx
@@ -1,15 +1,15 @@
-import { useRoute, useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import { useContent } from '../../lib/use-resource';
 import { useTitle, useDescription } from './utils';
 import config from '../../config.json';
 import { NotFound } from './not-found';
 import cx from '../../lib/cx';
-import { LATEST_MAJOR, isDocPage } from '../../lib/docs';
 import { useLanguage } from '../../lib/i18n';
 import { MarkdownRegion } from './markdown-region';
 import Sidebar from '../sidebar';
 import Footer from '../footer/index';
 import { docRoutes } from '../../lib/route-utils';
+import { LATEST_MAJOR } from '../doc-version';
 import style from './style.module.css';
 
 export function DocPage() {
@@ -20,29 +20,27 @@ export function DocPage() {
 		return <NotFound />;
 	}
 
-	return <DocLayout />;
+	return <DocLayout isGuide />;
 }
 
-export function DocLayout() {
-	const { path } = useLocation();
+export function DocLayout({ isGuide = false }) {
+	const { path } = useRoute();
 	const [lang] = useLanguage();
 
 	const { html, meta } = useContent([lang, path === '/' ? 'index' : path]);
 	useTitle(meta.title);
 	useDescription(meta.description);
 
-	const hasSidebar = meta.toc !== false && isDocPage(path);
-
 	return (
-		<div class={cx(style.page, hasSidebar && style.withSidebar)}>
+		<div class={cx(style.page, isGuide && style.withSidebar)}>
 			<div class={style.outer}>
-				{hasSidebar && (
+				{isGuide && (
 					<div class={style.sidebarWrap}>
 						<Sidebar />
 					</div>
 				)}
 				<div class={style.inner}>
-					<OldDocsWarning />
+					{isGuide && <OldDocsWarning />}
 					<MarkdownRegion html={html} meta={meta} />
 					<Footer />
 				</div>
@@ -53,9 +51,8 @@ export function DocLayout() {
 
 function OldDocsWarning() {
 	const { name, version } = useRoute().params;
-	const { path } = useLocation();
 
-	if (!isDocPage(path) || version === LATEST_MAJOR) {
+	if (version === LATEST_MAJOR) {
 		return null;
 	}
 

diff --git a/src/components/controllers/markdown-region.jsx b/src/components/controllers/markdown-region.jsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import EditThisPage from '../edit-button';
 import ContentRegion from '../content-region';
 import BlogMeta from '../blog-meta';
@@ -10,7 +10,7 @@ import BlogMeta from '../blog-meta';
  * @propery {any} [components]
  */
 export function MarkdownRegion({ html, meta, components }) {
-	const { path } = useLocation();
+	const { path } = useRoute();
 
 	const canEdit = path !== '/' && !path.startsWith('/tutorial');
 	const isBlogArticle = path.startsWith('/blog/');

diff --git a/src/components/controllers/tutorial-page.jsx b/src/components/controllers/tutorial-page.jsx
@@ -1,4 +1,4 @@
-import { useRoute, useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import { SolutionProvider } from './tutorial/contexts';
 import { useContent } from '../../lib/use-resource';
 import { useTitle, useDescription } from './utils';
@@ -19,8 +19,7 @@ export default function TutorialPage() {
 }
 
 function TutorialLayout() {
-	const { path } = useLocation();
-	const { params } = useRoute();
+	const { path, params } = useRoute();
 	const [lang] = useLanguage();
 
 	const { html, meta } = useContent([lang, !params.step ? 'tutorial/index' : path]);

diff --git a/src/components/controllers/tutorial/index.jsx b/src/components/controllers/tutorial/index.jsx
@@ -8,7 +8,7 @@ import {
 	useMemo,
 	useCallback
 } from 'preact/hooks';
-import { useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import linkState from 'linkstate';
 import { TutorialContext, SolutionContext } from './contexts';
 import cx from '../../../lib/cx';
@@ -168,7 +168,7 @@ function TutorialView({
 
 	const [showCodeOverride, toggleCode] = useReducer(s => !s, true);
 
-	const { url } = useLocation();
+	const { path } = useRoute();
 	const [lang] = useLanguage();
 	const { solved } = useContext(SolutionContext);
 
@@ -183,7 +183,7 @@ function TutorialView({
 		if (!loading && !initialLoad) {
 			content.current.scrollTo(0, 0);
 		}
-	}, [url, loading, initialLoad]);
+	}, [path, loading, initialLoad]);
 
 	const reRun = useCallback(() => {
 		let code = tutorial.state.code;
@@ -211,7 +211,7 @@ function TutorialView({
 								<div class={style.output} key="output">
 									{!initialLoad && (
 										<Runner
-											key={url}
+											key={path}
 											ref={tutorial.runner}
 											onSuccess={tutorial.onSuccess}
 											onRealm={tutorial.onRealm}
@@ -226,7 +226,7 @@ function TutorialView({
 												close
 											</button>
 											<ErrorOverlay
-												key={'e:' + url}
+												key={'e:' + path}
 												class={style.error}
 												name={error.name}
 												message={error.message}
@@ -298,7 +298,7 @@ function TutorialView({
 			</Splitter>
 
 			<InjectPrerenderData
-				name={url}
+				name={path}
 				data={{
 					html,
 					meta

diff --git a/src/components/doc-version/index.jsx b/src/components/doc-version/index.jsx
@@ -3,14 +3,16 @@ import { useLocation, useRoute } from 'preact-iso';
 import config from '../../config.json';
 import style from './style.module.css';
 
-export const AVAILABLE_DOCS = [10, 8];
+export const LATEST_MAJOR = 'v10';
+export const AVAILABLE_DOCS = ['10', '8'];
 
 /**
  * Select box to switch the currently displayed docs version
  */
 export default function DocVersion() {
-	const { path, route } = useLocation();
-	const { version, name } = useRoute().params;
+	const { route } = useLocation();
+	const { params, path } = useRoute();
+	const { version, name } = params;
 
 	const onChange = useCallback(
 		e => {
@@ -28,7 +30,7 @@ export default function DocVersion() {
 			Version:{' '}
 			<select value={version} class={style.select} onChange={onChange}>
 				{AVAILABLE_DOCS.map(v => {
-					const suffix = v === 10 ? ' (current)' : '';
+					const suffix = LATEST_MAJOR.slice(1) == v ? ' (current)' : '';
 					return (
 						<option key={v} value={`v${v}`}>
 							{v}.x{suffix}

diff --git a/src/components/edit-button/index.jsx b/src/components/edit-button/index.jsx
@@ -1,9 +1,9 @@
-import { useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import { useLanguage } from '../../lib/i18n';
 import style from './style.module.css';
 
 export default function EditThisPage({ isFallback }) {
-	let { path } = useLocation();
+	let { path } = useRoute();
 	const [lang] = useLanguage();
 
 	path = !isFallback ? path + '.md' : '';

diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx
@@ -1,6 +1,6 @@
 import config from '../../config.json';
 import { useState, useEffect, useCallback } from 'preact/hooks';
-import { useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import style from './style.module.css';
 import { useLanguage } from '../../lib/i18n';
 
@@ -42,8 +42,8 @@ function useContributors(deps) {
 }
 
 export default function Footer() {
-	const { url } = useLocation();
-	const contrib = useContributors([url]);
+	const { path } = useRoute();
+	const contrib = useContributors([path]);
 	const [lang, setLang] = useLanguage();
 
 	const onSelect = useCallback(e => setLang(e.target.value), [setLang]);

diff --git a/src/components/sidebar/sidebar-nav.jsx b/src/components/sidebar/sidebar-nav.jsx
@@ -1,4 +1,4 @@
-import { useLocation } from 'preact-iso';
+import { useRoute } from 'preact-iso';
 import cx from '../../lib/cx';
 import style from './sidebar-nav.module.css';
 
@@ -13,7 +13,7 @@ import style from './sidebar-nav.module.css';
  * @param {SidebarNavProps} props
  */
 export default function SidebarNav({ items, onClick }) {
-	const { path } = useLocation();
+	const { path } = useRoute();
 
 	return (
 		<nav

diff --git a/src/lib/docs.js b/src/lib/docs.js
diff --git a/src/lib/use-resource.js b/src/lib/use-resource.js
@@ -53,12 +53,3 @@ export function useResource(fn, deps) {
 	else if (state.status === 'error') throw state.result;
 	throw state.promise;
 }
-
-export function FakeSuspense(props) {
-	this.__c = childDidSuspend;
-	return this.state && this.state.suspended ? props.fallback : props.children;
-}
-
-function childDidSuspend(err) {
-	err.then(() => this.forceUpdate());
-}