Skip to content

Commit 8050ee6

Browse files
ThesephiThesephi
committed
dep upgrades; improved DX
1 parent 8b8f2ff commit 8050ee6

File tree

9 files changed

+103
-81
lines changed

9 files changed

+103
-81
lines changed

‎deno.jsonc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"imports": {
3-
"fullsoak": "jsr:@fullsoak/fullsoak@0.9.0",
4-
"preact": "npm:preact@10.25.4",
3+
"fullsoak": "jsr:@fullsoak/fullsoak@0.10.0",
4+
"preact": "npm:preact@10.26.2",
55
"preact-iso": "npm:[email protected]",
66
"@std/testing": "jsr:@std/testing@^1.0.9"
77
},

‎deno.lock‎

Lines changed: 40 additions & 40 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/MyRouteAwareComponent/index.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import type { FunctionComponent } from "preact";
12
import {
23
ErrorBoundary,
34
lazy,
@@ -9,31 +10,38 @@ import {
910
// Synchronous
1011
import { Home } from "./routes/Home.tsx";
1112
import { Profiles } from "./routes/Profiles.tsx";
13+
import { locationStub } from "preact-iso/prerender";
1214

1315
// Asynchronous (throws a promise)
16+
import type { Props as ProfileProps } from "./routes/Profile.tsx";
1417
const Profile = lazy(() =>
1518
import("./routes/Profile.tsx").then((cmp) => cmp.Profile)
1619
);
1720
const NotFound = lazy(() =>
1821
import("./routes/_404.tsx").then((cmp) => cmp.NotFound)
1922
);
2023

21-
type AppProps = { url: string };
24+
type AppProps = { path: string; foo: string };
2225

23-
export const MyRouteAwareComponent = ({ url }: AppProps) => (
24-
<LocationProvider url={url} scope="/app">
25-
<ErrorBoundary>
26-
<Router>
27-
<Home path="/app" />
28-
{/* Alternative dedicated route component for better TS support */}
29-
<Route path="/app/profiles" component={Profiles} />
30-
<Route
31-
path="/app/profiles/:id"
32-
component={() => <Profile blah="foo" />}
33-
/>
34-
{/* `default` prop indicates a fallback route. Useful for 404 pages */}
35-
<NotFound default />
36-
</Router>
37-
</ErrorBoundary>
38-
</LocationProvider>
39-
);
26+
export const MyRouteAwareComponent: FunctionComponent<AppProps> = (
27+
{ path, foo },
28+
) => {
29+
locationStub(path);
30+
return (
31+
<LocationProvider scope="/app">
32+
<ErrorBoundary>
33+
<Router>
34+
<Home path="/app" foo={foo} />
35+
{/* Alternative dedicated route component for better TS support */}
36+
<Route path="/app/profiles" component={Profiles} />
37+
<Route<ProfileProps>
38+
path="/app/profiles/:id"
39+
component={({ id }) => <Profile id={id} />}
40+
/>
41+
{/* `default` prop indicates a fallback route. Useful for 404 pages */}
42+
<NotFound default />
43+
</Router>
44+
</ErrorBoundary>
45+
</LocationProvider>
46+
);
47+
};

‎src/components/MyRouteAwareComponent/routes/Home.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
export const Home = () => (
1+
import type { FunctionComponent } from "preact";
2+
import type { RoutableProps } from "preact/iso";
3+
4+
type Props = RoutableProps & { foo: string };
5+
6+
export const Home: FunctionComponent<Props> = ({ foo }) => (
27
<main>
38
<h1>Home</h1>
9+
<h2>{foo}</h2>
410
<ol>
511
<li>
612
<a href="/app/profiles">Profiles</a>

‎src/components/MyRouteAwareComponent/routes/Profile.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
type Props = {
2-
blah?: string;
1+
export type Props = {
2+
id?: string;
33
};
44

5-
export const Profile = ({ blah }: Props) => (
5+
export const Profile = ({ id }: Props) => (
66
<main>
7-
<h1>Profile {blah}</h1>
7+
<h1>Profile {id}</h1>
88
<ol>
99
<li>
1010
<a href="/app/profiles">Profiles</a>

‎src/components/MyRouteAwareComponent/routes/_404.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
export const NotFound = () => (
1+
import type { FunctionComponent } from "preact";
2+
import type { RoutableProps } from "preact/iso";
3+
4+
export const NotFound: FunctionComponent<RoutableProps> = () => (
25
<main>
36
<h1>NotFound</h1>
47
<a href="/app">Back</a>

‎src/main.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ class MyController {
2424
@Get("/app/:page")
2525
@Get("/app/:page/:sup1")
2626
renderMyRouteAwareComponent(ctx: Context) {
27-
return ssr(MyRouteAwareComponent, { url: ctx.request.url.href });
27+
return ssr(MyRouteAwareComponent, {
28+
foo: "Lorem Ipsum",
29+
path: ctx.request.url.pathname,
30+
});
2831
}
2932
}
3033

‎tests/__snapshots__/MyComponent.test.ts.snap‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ snapshot[`MyComponent 1`] = `
44
'<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"><title></title><script type="importmap">
55
{
66
"imports": {
7-
"preact": "https://esm.sh/preact@10.25.4",
8-
"preact/hooks": "https://esm.sh/preact@10.25.4/hooks",
9-
"react": "https://esm.sh/preact@10.25.4",
10-
"react/jsx-runtime": "https://esm.sh/preact@10.25.4/jsx-runtime",
11-
"preact/jsx-runtime": "https://esm.sh/preact@10.25.4/jsx-runtime",
12-
"react-dom": "https://esm.sh/preact@10.25.4/compat/",
13-
"react-dom/*": "https://esm.sh/preact@10.25.4/compat/*",
7+
"preact": "https://esm.sh/preact@10.26.2",
8+
"preact/hooks": "https://esm.sh/preact@10.26.2/hooks",
9+
"react": "https://esm.sh/preact@10.26.2",
10+
"react/jsx-runtime": "https://esm.sh/preact@10.26.2/jsx-runtime",
11+
"preact/jsx-runtime": "https://esm.sh/preact@10.26.2/jsx-runtime",
12+
"react-dom": "https://esm.sh/preact@10.26.2/compat/",
13+
"react-dom/*": "https://esm.sh/preact@10.26.2/compat/*",
1414
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
1515
"preact-iso": "https://esm.sh/preact-iso?external=preact",
16+
"preact-iso/prerender": "/fullsoak",
1617
"fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
1718
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
1819
"fullsoak": "/fullsoak",

‎tests/__snapshots__/MyRouteAwareComponent.test.ts.snap‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ snapshot[`MyRouteAwareComponent 1`] = `
44
'<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"><title></title><script type="importmap">
55
{
66
"imports": {
7-
"preact": "https://esm.sh/preact@10.25.4",
8-
"preact/hooks": "https://esm.sh/preact@10.25.4/hooks",
9-
"react": "https://esm.sh/preact@10.25.4",
10-
"react/jsx-runtime": "https://esm.sh/preact@10.25.4/jsx-runtime",
11-
"preact/jsx-runtime": "https://esm.sh/preact@10.25.4/jsx-runtime",
12-
"react-dom": "https://esm.sh/preact@10.25.4/compat/",
13-
"react-dom/*": "https://esm.sh/preact@10.25.4/compat/*",
7+
"preact": "https://esm.sh/preact@10.26.2",
8+
"preact/hooks": "https://esm.sh/preact@10.26.2/hooks",
9+
"react": "https://esm.sh/preact@10.26.2",
10+
"react/jsx-runtime": "https://esm.sh/preact@10.26.2/jsx-runtime",
11+
"preact/jsx-runtime": "https://esm.sh/preact@10.26.2/jsx-runtime",
12+
"react-dom": "https://esm.sh/preact@10.26.2/compat/",
13+
"react-dom/*": "https://esm.sh/preact@10.26.2/compat/*",
1414
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
1515
"preact-iso": "https://esm.sh/preact-iso?external=preact",
16+
"preact-iso/prerender": "/fullsoak",
1617
"fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
1718
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
1819
"fullsoak": "/fullsoak",

0 commit comments

Comments
 (0)