Skip to content

Commit aff6e9e

Browse files
ThesephiThesephi
committed
upgraded to [email protected]; updated UI
1 parent 067fec5 commit aff6e9e

File tree

9 files changed

+71
-51
lines changed

9 files changed

+71
-51
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ deno task test
2929

3030
## Other platforms
3131

32+
- Examples for Node.js runtime: https://github.com/fullsoak/nodejs-examples
3233
- Examples for Bun runtime: https://github.com/fullsoak/bun-examples
3334
- Examples for Cloudflare Workers:
3435
https://github.com/fullsoak/cloudflare-workers-examples

‎deno.jsonc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"imports": {
3-
"fullsoak": "jsr:@fullsoak/fullsoak@0.10.0",
3+
"fullsoak": "jsr:@fullsoak/fullsoak@0.14.0",
44
"preact": "npm:[email protected]",
55
"preact-iso": "npm:[email protected]",
66
"@std/testing": "jsr:@std/testing@^1.0.9"

‎deno.lock‎

Lines changed: 8 additions & 8 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: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { locationStub } from "preact-iso/prerender";
1414

1515
// Asynchronous (throws a promise)
1616
import type { Props as ProfileProps } from "./routes/Profile.tsx";
17+
import { Media } from "./routes/Media/index.tsx";
1718
const Profile = lazy(() =>
1819
import("./routes/Profile.tsx").then((cmp) => cmp.Profile)
1920
);
@@ -31,14 +32,16 @@ export const MyRouteAwareComponent: FunctionComponent<AppProps> = (
3132
<LocationProvider scope="/app">
3233
<ErrorBoundary>
3334
<Router>
35+
{/* example: using component directly as route component itself */}
3436
<Home path="/app" foo={foo} />
35-
{/* Alternative dedicated route component for better TS support */}
37+
<Media path="/app/media/:id" />
38+
{/* example: Alternative dedicated route component */}
3639
<Route path="/app/profiles" component={Profiles} />
3740
<Route<ProfileProps>
3841
path="/app/profiles/:id"
3942
component={({ id }) => <Profile id={id} />}
4043
/>
41-
{/* `default` prop indicates a fallback route. Useful for 404 pages */}
44+
{/* example: `default` prop indicates a fallback route. Useful for 404 pages */}
4245
<NotFound default />
4346
</Router>
4447
</ErrorBoundary>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ export const Home: FunctionComponent<Props> = ({ foo }) => (
1111
<li>
1212
<a href="/app/profiles">Profiles</a>
1313
</li>
14+
<li>
15+
<a href="/app/media/0">Media Viewer</a>
16+
</li>
1417
<li>
1518
<a href="/app/whatever">Whatever</a>
1619
</li>

‎src/components/MyRouteAwareComponent/routes/Media/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { FunctionComponent } from "preact";
2+
import type { RoutableProps } from "preact-iso";
3+
4+
type Props = RoutableProps & {
5+
id?: string
6+
}
7+
8+
export const Media: FunctionComponent<Props> = ({ id }) => {
9+
10+
return <section className="page-media">
11+
{id && <h1>Showing media for id {id}</h1>}
12+
{!id && <small>Please provide a source url to view its content</small>}
13+
</section>;
14+
}

‎src/components/MyRouteAwareComponent/routes/Media/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.page-media {
2+
background-color: beige;
3+
}

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

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
export const snapshot = {};
22

33
snapshot[`MyComponent 1`] = `
4-
'<!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">
5-
{
6-
"imports": {
7-
"preact": "https://esm.sh/[email protected]",
8-
"preact/hooks": "https://esm.sh/[email protected]/hooks",
9-
"react": "https://esm.sh/[email protected]",
10-
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
11-
"preact/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
12-
"react-dom": "https://esm.sh/[email protected]/compat/",
13-
"react-dom/*": "https://esm.sh/[email protected]/compat/*",
14-
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
15-
"preact-iso": "https://esm.sh/preact-iso?external=preact",
16-
"preact-iso/prerender": "/fullsoak",
17-
"fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
18-
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
19-
"fullsoak": "/fullsoak",
20-
"@fullsoak/fullsoak": "/fullsoak"
21-
}
22-
}
23-
</script><script type="text/javascript"></script><style></style></head><body><main id="fullsoak-htmlshell-main"><section class="main"><h1>MyComponent</h1><ul><li>props &#39;foo&#39; is bar</li><li>state count is 0 <button >+</button><button >-</button></li><li><a href="/app">Route Aware App Component</a></li></ul></section><section style="padding:1rem;"><h2>MyOtherComponent</h2><span>props &#39;baz&#39; is 0</span></section><footer><span>source code of this website:</span> <a href="https://github.com/fullsoak/deno-examples">https://github.com/fullsoak/deno-examples</a></footer></main><script type="text/javascript">window.preloadedProps = {"foo":"bar"}</script><script type="module" src="/js/MyComponent/mount.js"></script></body></html>'
4+
'<!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">{
5+
"imports": {
6+
"preact": "https://esm.sh/[email protected]",
7+
"preact/hooks": "https://esm.sh/[email protected]/hooks",
8+
"react": "https://esm.sh/[email protected]",
9+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
10+
"preact/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
11+
"react-dom": "https://esm.sh/[email protected]/compat/",
12+
"react-dom/*": "https://esm.sh/[email protected]/compat/*",
13+
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
14+
"preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
15+
"preact-iso/prerender": "/fullsoak",
16+
"fullsoak/preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
17+
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
18+
"fullsoak": "/fullsoak",
19+
"@fullsoak/fullsoak": "/fullsoak"
20+
}
21+
}</script><script type="text/javascript"></script><style></style></head><body><main id="fullsoak-htmlshell-main"><section class="main"><h1>MyComponent</h1><ul><li>props &#39;foo&#39; is bar</li><li>state count is 0 <button >+</button><button >-</button></li><li><a href="/app">Route Aware App Component</a></li></ul></section><section style="padding:1rem;"><h2>MyOtherComponent</h2><span>props &#39;baz&#39; is 0</span></section><footer><span>source code of this website:</span> <a href="https://github.com/fullsoak/deno-examples">https://github.com/fullsoak/deno-examples</a></footer></main><script type="text/javascript">window.preloadedProps = {"foo":"bar"}</script><script type="module" src="/components/MyComponent/mount"></script></body></html>'
2422
`;

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

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
export const snapshot = {};
22

33
snapshot[`MyRouteAwareComponent 1`] = `
4-
'<!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">
5-
{
6-
"imports": {
7-
"preact": "https://esm.sh/[email protected]",
8-
"preact/hooks": "https://esm.sh/[email protected]/hooks",
9-
"react": "https://esm.sh/[email protected]",
10-
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
11-
"preact/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
12-
"react-dom": "https://esm.sh/[email protected]/compat/",
13-
"react-dom/*": "https://esm.sh/[email protected]/compat/*",
14-
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
15-
"preact-iso": "https://esm.sh/preact-iso?external=preact",
16-
"preact-iso/prerender": "/fullsoak",
17-
"fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
18-
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso?external=preact",
19-
"fullsoak": "/fullsoak",
20-
"@fullsoak/fullsoak": "/fullsoak"
21-
}
22-
}
23-
</script><script type="text/javascript"></script><style></style></head><body><main id="fullsoak-htmlshell-main">,,[object Promise]</main><script type="text/javascript">window.preloadedProps = {"url":"http://localhost/bar"}</script><script type="module" src="/js/MyRouteAwareComponent/mount.js"></script></body></html>'
4+
'<!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">{
5+
"imports": {
6+
"preact": "https://esm.sh/[email protected]",
7+
"preact/hooks": "https://esm.sh/[email protected]/hooks",
8+
"react": "https://esm.sh/[email protected]",
9+
"react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
10+
"preact/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
11+
"react-dom": "https://esm.sh/[email protected]/compat/",
12+
"react-dom/*": "https://esm.sh/[email protected]/compat/*",
13+
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
14+
"preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
15+
"preact-iso/prerender": "/fullsoak",
16+
"fullsoak/preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
17+
"@fullsoak/fullsoak/preact-iso": "https://esm.sh/preact-iso@^2.9.0?external=preact",
18+
"fullsoak": "/fullsoak",
19+
"@fullsoak/fullsoak": "/fullsoak"
20+
}
21+
}</script><script type="text/javascript"></script><style></style></head><body><main id="fullsoak-htmlshell-main"><main><h1>NotFound</h1><a href="/app">Back</a></main></main><script type="text/javascript">window.preloadedProps = {"url":"http://localhost/bar"}</script><script type="module" src="/components/MyRouteAwareComponent/mount"></script></body></html>'
2422
`;

0 commit comments

Comments
 (0)