refactor: Use prerender data API (#1192)

* refactor: Use prerender data API * refactor: Switch to proper prerender data provider * docs: Fix home page github stars repl example
preactjs · Nov 18, 2024 · 1b7b7da · 1b7b7da
1 parent a0bc595
commit 1b7b7da
Show file tree

Hide file tree

Showing 21 changed files with 155 additions and 134 deletions.
diff --git a/content/de/index.md b/content/de/index.md
@@ -204,7 +204,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/en/index.md b/content/en/index.md
@@ -200,7 +200,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/es/index.md b/content/es/index.md
@@ -210,7 +210,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/fr/index.md b/content/fr/index.md
@@ -203,7 +203,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/it/index.md b/content/it/index.md
@@ -210,7 +210,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/ja/index.md b/content/ja/index.md
@@ -199,7 +199,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/kr/index.md b/content/kr/index.md
@@ -195,7 +195,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/pt-br/index.md b/content/pt-br/index.md
@@ -200,7 +200,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/ru/index.md b/content/ru/index.md
@@ -200,7 +200,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/tr/index.md b/content/tr/index.md
@@ -212,7 +212,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/content/zh/index.md b/content/zh/index.md
@@ -203,7 +203,7 @@ export default class Stars extends Component {
     }
 }
 // --repl-after
-render(&lt;Stars /&gt;, document.getElementById("app"));
+render(&lt;Stars repo="preactjs/preact" /&gt;, document.getElementById("app"));
         </code></pre>
     </div>
     <div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.1",
     "@docsearch/react": "^3.6.0",
-    "@preact/preset-vite": "^2.8.3",
+    "@preact/preset-vite": "^2.9.1",
     "@preact/signals": "^1.1.3",
     "@preact/signals-core": "^1.2.3",
     "@rollup/browser": "^3.18.0",

diff --git a/src/components/app.jsx b/src/components/app.jsx
@@ -1,15 +1,21 @@
 import { LocationProvider, ErrorBoundary } from 'preact-iso';
 import { LanguageProvider } from '../lib/i18n';
+import { PrerenderDataProvider } from '../lib/prerender-data.jsx';
 import Header from './header';
 import Routes from './routes';
 
-export default function App() {
+/**
+ * @param {{ prerenderData?: import('../types.d.ts').PrerenderData }} props
+ */
+export default function App({ prerenderData }) {
 	return (
 		<ErrorBoundary>
 			<LocationProvider>
 				<LanguageProvider>
-					<Header />
-					<Routes />
+					<PrerenderDataProvider value={prerenderData}>
+						<Header />
+						<Routes />
+					</PrerenderDataProvider>
 				</LanguageProvider>
 			</LocationProvider>
 		</ErrorBoundary>

diff --git a/src/components/controllers/tutorial/index.jsx b/src/components/controllers/tutorial/index.jsx
@@ -8,12 +8,11 @@ import {
 	useMemo,
 	useCallback
 } from 'preact/hooks';
-import { useLocation, useRoute } from 'preact-iso';
+import { useLocation } from 'preact-iso';
 import { TutorialContext, SolutionContext } from './contexts';
 import { ErrorOverlay } from '../repl/error-overlay';
 import { parseStackTrace } from '../repl/errors';
 import cx from '../../../lib/cx';
-import { InjectPrerenderData } from '../../../lib/prerender-data';
 import { useResource } from '../../../lib/use-resource';
 import { useLanguage } from '../../../lib/i18n';
 import { Splitter } from '../../splitter';
@@ -220,11 +219,6 @@ export function Tutorial({ html, meta }) {
 						<ButtonContainer meta={meta} showCode={showCode} help={help} />
 					</div>
 				</Splitter>
-
-				<InjectPrerenderData
-					name={url}
-					data={{ html, meta }}
-				/>
 			</div>
 		</TutorialContext.Provider>
 	);

diff --git a/src/components/github-stars.jsx b/src/components/github-stars.jsx
@@ -1,6 +1,6 @@
-import { Component } from 'preact';
-import { localStorageGet, localStorageSet } from '../lib/localstorage';
-import { fallbackData, repoInfo } from '../lib/github';
+import { useEffect, useState } from 'preact/hooks';
+import { repoInfo } from '../lib/github';
+import { usePrerenderData } from '../lib/prerender-data.jsx';
 
 const githubStars = repo =>
 	repoInfo(repo).then(d => d.stargazers_count);
@@ -10,53 +10,42 @@ const formatNumber = num => (num + '').replace(/(\d{3})$/g, ',$1');
 // make available to homepage REPL demo
 if (typeof window !== 'undefined') window.githubStars = githubStars;
 
-export default class GithubStars extends Component {
-	state = {
-		stars: localStorageGet('_stars') || fallbackData.preactStargazers
-	};
+export default function GitHubStars({ user, repo, simple, children }) {
+	const { preactStargazers } = usePrerenderData();
+	const [stars, setStars] = useState(preactStargazers);
 
-	setStars = stars => {
-		if (stars && stars != this.state.stars) {
-			localStorageSet('_stars', stars);
-			this.setState({ stars });
-		}
-	};
-
-	componentDidMount() {
-		let { user, repo } = this.props;
-		githubStars(user + '/' + repo).then(this.setStars);
-	}
-
-	render({ user, repo, simple, children }, { stars }) {
-		let url = `https://github.com/${user}/${repo}/`;
-		if (simple) {
-			return (
-				<a href={url} class="stars" target="_blank" rel="noopener noreferrer">
-					⭐️ {stars} Stars
-				</a>
-			);
-		}
+	useEffect(() => {
+		githubStars(`${user}/${repo}`).then(setStars);
+	}, []);
 
+	const url = `https://github.com/${user}/${repo}/`;
+	if (simple) {
 		return (
-			<span class="github-btn">
-				<a
-					class="gh-btn"
-					href={url}
-					target="_blank"
-					rel="noopener noreferrer"
-					aria-label="Star on GitHub"
-				>
-					<span class="gh-ico" /> Star
-				</a>
-				<a
-					class="gh-count"
-					href={url}
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					{stars ? formatNumber(Math.round(stars)) : children || '..'}
-				</a>
-			</span>
+			<a href={url} class="stars" target="_blank" rel="noopener noreferrer">
+				⭐️ {stars} Stars
+			</a>
 		);
 	}
+
+	return (
+		<span class="github-btn">
+			<a
+				class="gh-btn"
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label="Star on GitHub"
+			>
+				<span class="gh-ico" /> Star
+			</a>
+			<a
+				class="gh-count"
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{stars ? formatNumber(Math.round(stars)) : children || '..'}
+			</a>
+		</span>
+	);
 }
diff --git a/src/components/header/gh-version.jsx b/src/components/header/gh-version.jsx
@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'preact/hooks';
-import { fallbackData, fetchRelease } from '../../lib/github';
+import { fetchRelease } from '../../lib/github';
+import { usePrerenderData } from '../../lib/prerender-data.jsx';
 import config from '../../config.json';
 
 export default function ReleaseLink({ ...props }) {
+	const { preactReleaseURL, preactVersion } = usePrerenderData();
 	const [release, setRelease] = useState({
-		url: globalThis.prerenderPreactReleaseUrl || fallbackData.preactReleaseUrl,
-		version: globalThis.prerenderPreactVersion || fallbackData.preactVersion
+		url: preactReleaseURL,
+		version: preactVersion
 	});
 
 	useEffect(() => {