Merge pull request #13 from preactjs/refactor/migrate-to-prerender-plugin

refactor: Migrate off of Vike and to `@preact/preset-vite`'s prerender functionality

Author: rschristian

package.json

@@ -30,4 +30,4 @@
 		"typescript": "^5.0.0"
 	},
 	"prettier": "prettier-config-rschristian"
-}
+}

src/index.js

@@ -24,7 +24,7 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
 		),
 	);
 
-	const { dir, language, useRouter, useESLint, appType } = await prompts.group(
+	const { dir, language, useRouter, usePrerender, useESLint } = await prompts.group(
 		{
 			dir: () =>
 				prompts.text({
@@ -38,15 +38,6 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
 						}
 					},
 				}),
-			appType: () =>
-				prompts.select({
-					message: 'Project Type:',
-					initialValue: 'spa',
-					options: [
-						{ value: 'spa', label: 'Single Page Application (only client-side)' },
-						{ value: 'ssg', label: 'Static Site Generation (prerenders pages)' },
-					],
-				}),
 			language: () =>
 				prompts.select({
 					message: 'Project language:',
@@ -56,13 +47,16 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
 						{ value: 'ts', label: 'TypeScript' },
 					],
 				}),
-			useRouter: ({ results }) =>
-				results.appType === 'spa'
-					? prompts.confirm({
-							message: 'Use router?',
-							initialValue: false,
-					  })
-					: Promise.resolve(false),
+			useRouter: () =>
+				prompts.confirm({
+					message: 'Use router?',
+					initialValue: false,
+				}),
+			usePrerender: () =>
+				prompts.confirm({
+					message: 'Prerender app (SSG)?',
+					initialValue: false,
+				}),
 			useESLint: () =>
 				prompts.confirm({
 					message: 'Use ESLint?',
@@ -81,13 +75,13 @@ const brandColor = /** @type {const} */ ([174, 128, 255]);
 
 	await useSpinner(
 		'Setting up your project directory...',
-		() => scaffold(targetDir, { useTS, useRouter, useESLint, appType }),
+		() => scaffold(targetDir, { useTS, useRouter, usePrerender, useESLint }),
 		'Set up project directory',
 	);
 
 	await useSpinner(
 		'Installing project dependencies...',
-		() => installDeps(targetDir, packageManager, { useTS, useRouter, useESLint, appType }),
+		() => installDeps(targetDir, packageManager, { useTS, useRouter, usePrerender, useESLint }),
 		'Installed project dependencies',
 	);
 
@@ -116,9 +110,9 @@ async function useSpinner(startMessage, fn, finishMessage) {
 /**
  * @typedef {Object} ConfigOptions
  * @property {boolean} useTS
- * @property {unknown} useRouter
+ * @property {boolean} useRouter
+ * @property {boolean} usePrerender
  * @property {boolean} useESLint
- * @property {string} appType
  */
 
 /**
@@ -131,11 +125,7 @@ async function scaffold(to, opts) {
 	await fs.mkdir(to, { recursive: true });
 
 	const __dirname = dirname(fileURLToPath(import.meta.url));
-	if (opts.appType === 'spa') {
-		await templateDir(resolve(__dirname, '../templates', 'base'), to, opts.useTS);
-	} else {
-		await templateDir(resolve(__dirname, '../templates', 'ssr'), to, opts.useTS);
-	}
+	await templateDir(resolve(__dirname, '../templates', 'base'), to, opts.useTS);
 
 	if (opts.useRouter) {
 		await templateDir(
@@ -145,6 +135,19 @@ async function scaffold(to, opts) {
 		);
 	}
 
+	if (opts.usePrerender) {
+		await templateDir(
+			resolve(
+				__dirname,
+				'../templates',
+				'config',
+				opts.useRouter ? 'prerender-router' : 'prerender',
+			),
+			to,
+			opts.useTS,
+		);
+	}
+
 	if (opts.useTS) {
 		await fs.rename(resolve(to, 'jsconfig.json'), resolve(to, 'tsconfig.json'));
 
@@ -203,7 +206,7 @@ async function installDeps(to, packageManager, opts) {
 		await install(['typescript'], { prefer: packageManager, cwd: to, dev: true });
 	}
 
-	if (opts.useRouter) {
+	if (opts.useRouter || opts.usePrerender) {
 		await install(['preact-iso', 'preact-render-to-string'], {
 			prefer: packageManager,
 			cwd: to,

templates/base/src/index.jsx

@@ -1,4 +1,5 @@
 import { render } from 'preact';
+
 import preactLogo from './assets/preact.svg';
 import './style.css';
 

templates/config/prerender-router/src/index.jsx

@@ -0,0 +1,28 @@
+import { LocationProvider, Router, Route, hydrate, prerender as ssr } from 'preact-iso';
+
+import { Header } from './components/Header.jsx';
+import { Home } from './pages/Home/index.jsx';
+import { NotFound } from './pages/_404.jsx';
+import './style.css';
+
+export function App() {
+	return (
+		<LocationProvider>
+			<Header />
+			<main>
+				<Router>
+					<Route path="/" component={Home} />
+					<Route default component={NotFound} />
+				</Router>
+			</main>
+		</LocationProvider>
+	);
+}
+
+if (typeof window !== 'undefined') {
+	hydrate(<App />, document.getElementById('app'));
+}
+
+export async function prerender(data) {
+	return await ssr(<App {...data} />);
+}

templates/config/prerender-router/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import preact from '@preact/preset-vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [
+		preact({
+			prerender: {
+				enabled: true,
+				renderTarget: '#app',
+				additionalPrerenderRoutes: ['/404'],
+			},
+		}),
+	],
+});

templates/ssr/pages/index/index.page.jsx renamed to templates/config/prerender/src/index.jsx

@@ -1,7 +1,9 @@
-import preactLogo from '../assets/preact.svg';
+import { hydrate, prerender as ssr } from 'preact-iso';
+
+import preactLogo from './assets/preact.svg';
 import './style.css';
 
-export function Page() {
+export function App() {
 	return (
 		<div>
 			<a href="https://preactjs.com" target="_blank">
@@ -37,3 +39,11 @@ function Resource(props) {
 		</a>
 	);
 }
+
+if (typeof window !== 'undefined') {
+	hydrate(<App />, document.getElementById('app'));
+}
+
+export async function prerender(data) {
+	return await ssr(<App {...data} />);
+}

templates/ssr/vite.config.js renamed to templates/config/prerender/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite';
 import preact from '@preact/preset-vite';
-import ssr from 'vike/plugin';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [preact(), ssr({ prerender: true })],
+	plugins: [
+		preact({
+			prerender: {
+				enabled: true,
+				renderTarget: '#app',
+			},
+		}),
+	],
 });