fmt

Author: Thesephi

.github/workflows/deploy.yml

@@ -37,5 +37,3 @@ jobs:
           project: "fullsoak-examples"
           entrypoint: "src/main.ts"
           root: ""
-          
-          

README.md

@@ -3,10 +3,9 @@
 FullSoak is a no-build TypeScript fullstack SSR-first framework. This repo hosts
 several examples using FullSoak.
 
-WARNING: as the
-[FullSoak framework](https://jsr.io/@fullsoak/[email protected]) is still in
-an early development phase, breaking changes are expected. When in doubt, please
-feel free to open a PR / discussion. Thank you for your interest!
+WARNING: as the [FullSoak framework](https://jsr.io/@fullsoak/fullsoak) is still
+in an early development phase, breaking changes are expected. When in doubt,
+please feel free to open a PR / discussion. Thank you for your interest!
 
 ## Available commands
 

deno.jsonc

@@ -1,7 +1,8 @@
 {
   "imports": {
-    "fullsoak": "jsr:@fullsoak/[email protected]-rc.2",
+    "fullsoak": "jsr:@fullsoak/[email protected]",
     "preact": "npm:[email protected]",
+    "preact-iso": "npm:[email protected]",
     "@std/testing": "jsr:@std/testing@^1.0.9"
   },
   "nodeModulesDir": "auto",

deno.lock

@@ -16,21 +16,23 @@ export const MyComponent: FunctionComponent<MyProps> = ({ foo }) => {
     return () => alert(`unmounted component with initial props foo=${foo}`);
   }, []);
 
-  return <>
-    <section className="main">
-      <h1>MyComponent</h1>
-      <ul>
-        <li>props 'foo' is {foo}</li>
-        <li>
-          state count is {count}{" "}
-          <button onClick={() => setCount((x) => x + 1)}>+</button>
-          <button onClick={() => setCount((x) => x - 1)}>-</button>
-        </li>
-        <li>
-          <a href="/app">Route Aware App Component</a>
-        </li>
-      </ul>
-    </section>
-    <MyOtherComponent baz={count} />
-  </>;
+  return (
+    <>
+      <section className="main">
+        <h1>MyComponent</h1>
+        <ul>
+          <li>props 'foo' is {foo}</li>
+          <li>
+            state count is {count}{" "}
+            <button onClick={() => setCount((x) => x + 1)}>+</button>
+            <button onClick={() => setCount((x) => x - 1)}>-</button>
+          </li>
+          <li>
+            <a href="/app">Route Aware App Component</a>
+          </li>
+        </ul>
+      </section>
+      <MyOtherComponent baz={count} />
+    </>
+  );
 };

src/components/MyComponent/index.tsx

@@ -3,15 +3,17 @@ import { useEffect } from "preact/hooks";
 
 type Props = {
   baz: number;
-}
+};
 
 export const MyOtherComponent: FunctionComponent<Props> = ({ baz }: Props) => {
   useEffect(() => {
     alert(`MyOtherComponent mounted with initial props baz=${baz}`);
   }, []);
 
-  return <section style={{ padding: "1rem" }}>
-    <h2>MyOtherComponent</h2>
-    <span>props 'baz' is {baz}</span>
-  </section>;
+  return (
+    <section style={{ padding: "1rem" }}>
+      <h2>MyOtherComponent</h2>
+      <span>props 'baz' is {baz}</span>
+    </section>
+  );
 };

src/components/MyOtherComponent/index.tsx

@@ -1,26 +1,39 @@
-import { lazy, LocationProvider, ErrorBoundary, Router, Route } from 'fullsoak/preact-iso';
+import {
+  ErrorBoundary,
+  lazy,
+  LocationProvider,
+  Route,
+  Router,
+} from "preact-iso";
 
 // Synchronous
-import { Home } from './routes/Home.tsx';
-import { Profiles } from './routes/Profiles.tsx';
+import { Home } from "./routes/Home.tsx";
+import { Profiles } from "./routes/Profiles.tsx";
 
 // Asynchronous (throws a promise)
-const Profile = lazy(() => import('./routes/Profile.tsx').then(cmp => cmp.Profile));
-const NotFound = lazy(() => import('./routes/_404.tsx').then(cmp => cmp.NotFound));
+const Profile = lazy(() =>
+  import("./routes/Profile.tsx").then((cmp) => cmp.Profile)
+);
+const NotFound = lazy(() =>
+  import("./routes/_404.tsx").then((cmp) => cmp.NotFound)
+);
 
-type AppProps = { url: string }
+type AppProps = { url: string };
 
 export const MyRouteAwareComponent = ({ url }: AppProps) => (
-	<LocationProvider url={url} scope="/app">
-		<ErrorBoundary>
-			<Router>
-				<Home path="/app" />
-				{/* Alternative dedicated route component for better TS support */}
-				<Route path="/app/profiles" component={Profiles} />
-				<Route path="/app/profiles/:id" component={() => <Profile blah="foo" />} />
-				{/* `default` prop indicates a fallback route. Useful for 404 pages */}
-				<NotFound default />
-			</Router>
-		</ErrorBoundary>
-	</LocationProvider>
+  <LocationProvider url={url} scope="/app">
+    <ErrorBoundary>
+      <Router>
+        <Home path="/app" />
+        {/* Alternative dedicated route component for better TS support */}
+        <Route path="/app/profiles" component={Profiles} />
+        <Route
+          path="/app/profiles/:id"
+          component={() => <Profile blah="foo" />}
+        />
+        {/* `default` prop indicates a fallback route. Useful for 404 pages */}
+        <NotFound default />
+      </Router>
+    </ErrorBoundary>
+  </LocationProvider>
 );