preact iso

JoviDeCroock · JoviDeCroock · commit 337a43149805 · 2023-03-12T11:05:04.000+01:00
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -18,6 +18,7 @@
   "dependencies": {
     "@preact/preset-vite": "^2.5.0",
     "express": "^4.18.2",
-    "preact": "^10.12.1"
+    "preact": "^10.13.1",
+    "preact-iso": "^2.3.0"
   }
 }
diff --git a/demo/src/App.jsx b/demo/src/App.jsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { Suspense, lazy } from 'preact/compat';
+import { lazy, Router, Route, ErrorBoundary } from 'preact-iso';
 
 export function App({ head }) {
 	const Counter = lazy(
@@ -16,9 +16,11 @@ export function App({ head }) {
 			<body>
 				<main>
 					<h1>Our Counter application</h1>
-					<Suspense fallback={<p>Loading...</p>}>
-						<Counter />
-					</Suspense>
+					<ErrorBoundary>
+						<Router fallback={<p>Loading...</p>}>
+							<Route component={Counter} path="/" />
+						</Router>
+					</ErrorBoundary>
 				</main>
 				{import.meta.env.DEV && (
 					<script type="module" src="/src/entry-client.jsx" />
diff --git a/demo/src/entry-client.jsx b/demo/src/entry-client.jsx
@@ -1,4 +1,5 @@
 import { hydrate } from 'preact';
+import { LocationProvider } from 'preact-iso';
 import { App } from './App';
 
 const config = { attributes: true, childList: true, subtree: true };
@@ -16,4 +17,9 @@ const mut = new MutationObserver((mutationList, observer) => {
 });
 mut.observe(document, config);
 
-hydrate(<App />, document);
+hydrate(
+	<LocationProvider>
+		<App />
+	</LocationProvider>,
+	document
+);
diff --git a/demo/src/entry-server.jsx b/demo/src/entry-server.jsx
@@ -1,23 +1,34 @@
+import { LocationProvider } from 'preact-iso';
 import { renderToPipeableStream } from '../../src/stream-node';
 import { App } from './App';
 
+// @ts-ignore
+global.location = {
+	origin: 'http://localhost:3000'
+};
+
 export function render({ res, head }) {
 	res.socket.on('error', (error) => {
 		console.error('Fatal', error);
 	});
-	const { pipe, abort } = renderToPipeableStream(<App head={head} />, {
-		onShellReady() {
-			res.statusCode = 200;
-			res.setHeader('Content-type', 'text/html');
-			pipe(res);
-		},
-		onErrorShell(error) {
-			res.statusCode = 500;
-			res.send(
-				`<!doctype html><p>An error ocurred:</p><pre>${error.message}</pre>`
-			);
+	const { pipe, abort } = renderToPipeableStream(
+		<LocationProvider url="/">
+			<App head={head} />
+		</LocationProvider>,
+		{
+			onShellReady() {
+				res.statusCode = 200;
+				res.setHeader('Content-type', 'text/html');
+				pipe(res);
+			},
+			onErrorShell(error) {
+				res.statusCode = 500;
+				res.send(
+					`<!doctype html><p>An error ocurred:</p><pre>${error.message}</pre>`
+				);
+			}
 		}
-	});
+	);
 
 	// Abandon and switch to client rendering if enough time passes.
 	// Try lowering this to see the client recover.

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@`
`18`	`18`	`"dependencies": {`
`19`	`19`	`"@preact/preset-vite": "^2.5.0",`
`20`	`20`	`"express": "^4.18.2",`
`21`		`- "preact": "^10.12.1"`
	`21`	`+ "preact": "^10.13.1",`
	`22`	`+ "preact-iso": "^2.3.0"`
`22`	`23`	`}`
`23`	`24`	`}`