refactor: Minor adjustments to entry point / client script

Author: rschristian

packages/cli/global.d.ts

@@ -16,6 +16,11 @@ declare module 'shelljs' {
 	export = shell;
 }
 
+declare module 'preact-cli-entrypoint' {
+	const app: any;
+	export default app;
+}
+
 declare module '*.module.css' {
 	const classes: { [key: string]: string };
 	export default classes;

packages/cli/src/lib/entry.js

@@ -1,7 +1,6 @@
 /* global __webpack_public_path__ */
 
-import * as Preact from 'preact';
-const { h, render, hydrate } = Preact;
+import { h, render, hydrate } from 'preact';
 
 const interopDefault = m => (m && m.default ? m.default : m);
 
@@ -27,36 +26,40 @@ if (process.env.NODE_ENV === 'development') {
 	);
 }
 
-let app = interopDefault(require('preact-cli-entrypoint'));
+const App = interopDefault(require('preact-cli-entrypoint'));
 
-if (typeof app === 'function') {
-	let root =
-		document.getElementById('preact_root') || document.body.firstElementChild;
-
-	let init = () => {
-		let app = interopDefault(require('preact-cli-entrypoint'));
-		let preRenderData = {};
-		const inlineDataElement = document.querySelector(
-			'[type="__PREACT_CLI_DATA__"]'
+if (typeof App === 'function') {
+	const init = () => {
+		const prerenderDataElement = document.querySelector(
+			'script[type="__PREACT_CLI_DATA__"]'
 		);
-		if (inlineDataElement) {
-			preRenderData =
-				JSON.parse(decodeURI(inlineDataElement.innerHTML)).preRenderData ||
-				preRenderData;
+		let prerenderData = {};
+
+		const root =
+			(prerenderDataElement && prerenderDataElement.parentElement) ||
+			document.body;
+
+		if (prerenderDataElement) {
+			prerenderData =
+				JSON.parse(decodeURI(prerenderDataElement.innerHTML)).prerenderData ||
+				prerenderData;
 		}
+
 		/* An object named CLI_DATA is passed as a prop,
 		 * this keeps us future proof if in case we decide,
 		 * to send other data like at some point in time.
 		 */
-		const CLI_DATA = { preRenderData };
-		const currentURL = preRenderData.url ? normalizeURL(preRenderData.url) : '';
-		const canHydrate =
-			process.env.PRERENDER &&
-			process.env.NODE_ENV === 'production' &&
-			hydrate &&
-			currentURL === normalizeURL(location.pathname);
-		const doRender = canHydrate ? hydrate : render;
-		doRender(h(app, { CLI_DATA }), document.body, root);
+		const CLI_DATA = { prerenderData };
+		const currentURL = prerenderData.url ? normalizeURL(prerenderData.url) : '';
+
+		if (
+			prerenderDataElement &&
+			currentURL === normalizeURL(location.pathname)
+		) {
+			hydrate(h(App, { CLI_DATA }), root);
+		} else {
+			render(h(App, { CLI_DATA }), root);
+		}
 	};
 
 	if (module.hot) module.hot.accept('preact-cli-entrypoint', init);

packages/cli/src/lib/webpack/render-html-plugin.js

@@ -140,8 +140,8 @@ module.exports = async function renderHTMLPlugin(config, env) {
 							config
 						),
 						env,
-						preRenderData: values,
-						CLI_DATA: { preRenderData: { url, ...routeData } },
+						prerenderData: values,
+						CLI_DATA: { prerenderData: { url, ...routeData } },
 						ssr: config.prerender ? await prerender(config, values) : '',
 						entrypoints,
 					},