feat(examples/tuono-tutorial): rewrite tuono-tutorial (#449)

apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx

@@ -132,28 +132,30 @@ Now the Pokémon are correctly fetched and hydrated on the client side, so we ca
 import type { JSX } from 'react'
 import type { TuonoProps } from 'tuono'
 
-interface Pokemon {
-  name: string
-}
-
 interface IndexProps {
-  results: Pokemon[]
+  results: Array<{ name: string; url: string }>
 }
 
 export default function IndexPage({
   data,
 }: TuonoProps<IndexProps>): JSX.Element | null {
-  if (!data?.results) {
-    return null
-  }
+  if (!data?.results) return null
 
   return (
     <>
       <header className="header">
-        <a href="https://crates.io/crates/tuono" target="_blank">
+        <a
+          href="https://crates.io/crates/tuono"
+          target="_blank"
+          rel="noreferrer"
+        >
           Crates
         </a>
-        <a href="https://www.npmjs.com/package/tuono" target="_blank">
+        <a
+          href="https://www.npmjs.com/package/tuono"
+          target="_blank"
+          rel="noreferrer"
+        >
           Npm
         </a>
       </header>
@@ -168,7 +170,7 @@ export default function IndexPage({
       </div>
       <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
         {data.results.map((pokemon, i) => (
-          <li key={`${pokemon.name}-${i}`}>{pokemon.name}</li>
+          <li key={i + 1}>{pokemon.name}</li>
         ))}
       </ul>
     </>

apps/documentation/src/routes/documentation/tutorial/components.mdx

@@ -28,22 +28,21 @@ Create the following file `src/components/PokemonLink.tsx` and fill the content
 import type { JSX } from 'react'
 import { Link } from 'tuono'
 
-interface Pokemon {
+interface PokemonLinkProps {
+  id: number
   name: string
 }
 
 export default function PokemonLink({
-  pokemon,
   id,
-}: {
-  pokemon: Pokemon
-  id: number
-}): JSX.Element {
+  name,
+}: PokemonLinkProps): JSX.Element {
   return (
-    <Link href={`/pokemons/${pokemon.name}`}>
-      {pokemon.name}
+    <Link href={`/pokemons/${name}`} className={styles.link} id={id.toString()}>
+      {name}
       <img
         src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+        alt=""
       />
     </Link>
   )
@@ -58,13 +57,12 @@ Now that the link is done, let’s import it into the `index.tsx` file
 ++  import PokemonLink from '../components/PokemonLink'
 
 // ...
-	<ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
---      {pokemons.map((pokemon) => {
---        return pokemon.name;
-++      {pokemons.map((pokemon, i) => {
-++        return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />;
-      })}
-	</ul>
+      <ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
+        {pokemons.map((pokemon, i) => (
+--        <li key={i + 1}>{pokemon.name}</li>
+++        <PokemonLink key={i + 1} name={pokemon.name} id={i + 1} />
+        })}
+      </ul>
 // ...
 ```
 
@@ -111,26 +109,29 @@ Then import the styles into the `PokemonLink` component as following:
 ```diff
 // src/components/PokemonLink.tsx
 import type { JSX } from 'react'
-import { Link } from "tuono"
-import type { Pokemon } from "./../types/pokemon"
+import { Link } from 'tuono'
+
 ++ import styles from './PokemonLink.module.css'
 
+interface PokemonLinkProps {
+  id: number
+  name: string
+}
+
 export default function PokemonLink({
-  pokemon,
   id,
-}: {
-  pokemon: Pokemon;
-  id: number;
-}): JSX.Element {
+  name,
+}: PokemonLinkProps): JSX.Element {
   return (
---    <Link href={`/pokemons/${pokemon.name}`}>
-++    <Link className={styles.link} href={`/pokemons/${pokemon.name}`}>
-      {pokemon.name}
+--  <Link href={`/pokemons/${name}`} id={id.toString()}>
+++  <Link href={`/pokemons/${name}`} className={styles.link} id={id.toString()}>
+      {name}
       <img
         src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+        alt=""
       />
     </Link>
-  );
+  )
 }
 ```
 

apps/documentation/src/routes/documentation/tutorial/dynamic-routes.mdx

@@ -63,80 +63,92 @@ async fn get_pokemon(req: Request, fetch: Client) -> Response {
 Then let’s work on the frontend. Paste into the `[pokemon].tsx` file the following code:
 
 ```tsx
+// src/routes/pokemons/[pokemon].tsx
 import type { JSX } from 'react'
-import { TuonoProps } from 'tuono'
+import type { TuonoProps } from 'tuono'
+import { Link } from 'tuono'
+
 import PokemonView from '../../components/PokemonView'
 
-export default function Pokemon({ data }: TuonoProps): JSX.Element {
-  return <PokemonView pokemon={data} />
-}
-```
-
-The browser should complain that the component `PokemonView` does not exist. Let’s create it then!
-
-```tsx
-// components/PokemonView.tsx
-import { Link } from 'tuono'
-import styles from './PokemonView.module.css'
-
 interface Pokemon {
+  id: number
   name: string
-  id: string
   weight: number
   height: number
 }
 
-export default function PokemonView({
-  pokemon,
-}: {
-  pokemon?: Pokemon
-}): JSX.Element {
+export default function PokemonPage({
+  isLoading,
+  data,
+}: TuonoProps<Pokemon>): JSX.Element {
   return (
     <div>
-      <Link className={styles['back-btn']} href="/">
-        Back
-      </Link>
-      {pokemon?.name && (
-        <div className={styles.pokemon}>
-          <div>
-            <h1 className={styles.name}>{pokemon.name}</h1>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Weight:</dt>
-              <dd>{pokemon.weight}lbs</dd>
-            </dl>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Height:</dt>
-              <dd>{pokemon.height}ft</dd>
-            </dl>
-          </div>
-          <img
-            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-          />
-        </div>
+      <Link href="/">Back</Link>
+
+      {isLoading && (
+        <>
+          <div>Loading...</div>
+        </>
+      )}
+
+      {data?.id && (
+        <>
+          <PokemonView pokemon={data} />
+        </>
       )}
     </div>
   )
 }
 ```
 
-<br />
+The browser should complain that the component `PokemonView` does not exist. Let’s create it then!
+
+```tsx
+// src/components/PokemonView.tsx
+import type { JSX } from 'react'
+
+import styles from './PokemonView.module.css'
+
+interface Pokemon {
+  id: number
+  name: string
+  weight: number
+  height: number
+}
+
+interface PokemonViewProps {
+  pokemon: Pokemon
+}
+
+export default function PokemonView({
+  pokemon,
+}: PokemonViewProps): JSX.Element {
+  return (
+    <div className={styles.pokemon}>
+      <div>
+        <h1 className={styles.name}>{pokemon.name}</h1>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Weight: </dt>
+          <dd>{pokemon.weight}lbs</dd>
+        </dl>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Height: </dt>
+          <dd>{pokemon.height}ft</dd>
+        </dl>
+      </div>
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
+        alt=""
+      />
+    </div>
+  )
+}
+```
+
+To have the proper style consider adding a new css module file:
 
 ```css
-/* components/PokemonView.module.css */
-.back-btn {
-  background-color: white;
-  border-radius: 10px;
-  padding: 7px 15px;
-  color: black;
-  text-decoration: none;
-  border: solid #f0f0f0 1px;
-  font-size: 20px;
-}
-
-.back-btn:hover {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-
+/* src/components/PokemonView.module.css */
 .pokemon {
   display: flex;
   justify-content: space-between;

apps/documentation/src/routes/documentation/tutorial/redirections.mdx

@@ -39,12 +39,13 @@ Now let's create the button in the home page to actually point to it!
 ```diff
 // src/routes/index.tsx
 
-<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
+      <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
 ++      <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
-        {data.results.map((pokemon, i) => {
-          return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
-        })}
-</ul>
+++
+        {data.results.map((pokemon, i) => (
+          <PokemonLink key={i + 1} name={pokemon.name} id={i + 1} />
+        ))}
+      </ul>
 ```
 
 Now at [http://localhost:3000/](http:/localhost:3000/) You will find a new link at the beginning of the list.

apps/documentation/src/routes/documentation/tutorial/seo.mdx

@@ -28,32 +28,36 @@ tags](https://react.dev/reference/react-dom/components/title). Let's update the
 ```diff
 // src/routes/index.tsx
 import type { JSX } from 'react'
-import type { TuonoProps } from "tuono";
+import type { TuonoProps } from 'tuono'
 
-interface Pokemon {
-  name: string
-}
+import PokemonLink from '../components/PokemonLink'
 
 interface IndexProps {
-  results: Pokemon[]
+  results: Array<{ name: string; url: string }>
 }
 
 export default function IndexPage({
   data,
-}: TuonoProps<IndexProps>): JSX.Element {
-  if (!data?.results) {
-    return <></>;
-  }
+}: TuonoProps<IndexProps>): JSX.Element | null {
+  if (!data?.results) return null
 
   return (
     <>
 ++    <title>Tuono tutorial</title>
 
       <header className="header">
-        <a href="https://crates.io/crates/tuono" target="_blank">
+        <a
+          href="https://crates.io/crates/tuono"
+          target="_blank"
+          rel="noreferrer"
+        >
           Crates
         </a>
-        <a href="https://www.npmjs.com/package/tuono" target="_blank">
+        <a
+          href="https://www.npmjs.com/package/tuono"
+          target="_blank"
+          rel="noreferrer"
+        >
           Npm
         </a>
       </header>
@@ -66,13 +70,15 @@ export default function IndexPage({
           <img src="react.svg" className="react" />
         </div>
       </div>
-      <ul style={{ flexWrap: "wrap", display: "flex", gap: 10 }}>
-        {data.results.map((pokemon) => {
-          return pokemon.name;
-        })}
+      <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
+        <PokemonLink name="GOAT" id={0} />
+
+        {data.results.map((pokemon, i) => (
+          <PokemonLink key={i + 1} name={pokemon.name} id={i + 1} />
+        ))}
       </ul>
     </>
-  );
+  )
 }
 ```
 
@@ -81,18 +87,43 @@ export default function IndexPage({
 ```diff
 // src/routes/pokemons/[pokemon].tsx
 import type { JSX } from 'react'
-import { TuonoProps } from "tuono";
-import PokemonView from "../../components/PokemonView";
+import type { TuonoProps } from 'tuono'
+import { Link } from 'tuono'
 
-export default function Pokemon({ data }: TuonoProps): JSX.Element {
---  return <PokemonView pokemon={data} />;
-++  return (
-++        <>
-++            <title>Pokemon: ${data?.name}</title>
-++            <PokemonView pokemon={data} />
-++        </>
-++    )
+import PokemonView from '../../components/PokemonView'
+
+interface Pokemon {
+  id: number
+  name: string
+  weight: number
+  height: number
 }
+
+export default function PokemonPage({
+  isLoading,
+  data,
+}: TuonoProps<Pokemon>): JSX.Element {
+  return (
+    <div>
+      <Link href="/">Back</Link>
+
+      {isLoading && (
+        <>
+++        <title>Pokemon: loading...</title>
+          <div>Loading...</div>
+        </>
+      )}
+
+      {data?.id && (
+        <>
+++        <title>{`Pokemon: ${data.name}`}</title>
+          <PokemonView pokemon={data} />
+        </>
+      )}
+    </div>
+  )
+}
+
 ```
 
 import NavigationButtons from '../../../components/NavigationButtons'

examples/tuono-tutorial/src/components/PokemonLink.tsx

@@ -1,28 +1,24 @@
+// src/components/PokemonLink.tsx
 import type { JSX } from 'react'
 import { Link } from 'tuono'
 
 import styles from './PokemonLink.module.css'
 
-interface Pokemon {
+interface PokemonLinkProps {
+  id: number
   name: string
 }
 
 export default function PokemonLink({
-  pokemon,
   id,
-}: {
-  pokemon: Pokemon
-  id: number
-}): JSX.Element {
+  name,
+}: PokemonLinkProps): JSX.Element {
   return (
-    <Link
-      className={styles.link}
-      href={`/pokemons/${pokemon.name}`}
-      id={pokemon.name}
-    >
-      {pokemon.name}
+    <Link href={`/pokemons/${name}`} className={styles.link} id={id.toString()}>
+      {name}
       <img
         src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`}
+        alt=""
       />
     </Link>
   )

examples/tuono-tutorial/src/components/PokemonView.module.css

@@ -1,17 +1,3 @@
-.back-btn {
-  background-color: white;
-  border-radius: 10px;
-  padding: 7px 15px;
-  color: black;
-  text-decoration: none;
-  border: solid #f0f0f0 1px;
-  font-size: 20px;
-}
-
-.back-btn:hover {
-  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-
 .pokemon {
   display: flex;
   justify-content: space-between;

examples/tuono-tutorial/src/components/PokemonView.tsx

@@ -1,42 +1,39 @@
-import { Link } from 'tuono'
+// src/components/PokemonView.tsx
+import type { JSX } from 'react'
 
 import styles from './PokemonView.module.css'
 
 interface Pokemon {
+  id: number
   name: string
-  id: string
   weight: number
   height: number
 }
 
+interface PokemonViewProps {
+  pokemon: Pokemon
+}
+
 export default function PokemonView({
   pokemon,
-}: {
-  pokemon?: Pokemon
-}): JSX.Element {
+}: PokemonViewProps): JSX.Element {
   return (
-    <div>
-      <Link className={styles['back-btn']} href="/">
-        Back
-      </Link>
-      {pokemon?.name && (
-        <div className={styles.pokemon}>
-          <div>
-            <h1 className={styles.name}>{pokemon.name}</h1>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Weight:</dt>
-              <dd>{pokemon.weight}lbs</dd>
-            </dl>
-            <dl className={styles.spec}>
-              <dt className={styles.label}>Height:</dt>
-              <dd>{pokemon.height}ft</dd>
-            </dl>
-          </div>
-          <img
-            src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
-          />
-        </div>
-      )}
+    <div className={styles.pokemon}>
+      <div>
+        <h1 className={styles.name}>{pokemon.name}</h1>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Weight: </dt>
+          <dd>{pokemon.weight}lbs</dd>
+        </dl>
+        <dl className={styles.spec}>
+          <dt className={styles.label}>Height: </dt>
+          <dd>{pokemon.height}ft</dd>
+        </dl>
+      </div>
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png`}
+        alt=""
+      />
     </div>
   )
 }

examples/tuono-tutorial/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}

examples/tuono-tutorial/src/routes/index.tsx

@@ -2,14 +2,10 @@
 import type { JSX } from 'react'
 import type { TuonoProps } from 'tuono'
 
-import PokemonLink from '@/components/PokemonLink'
-
-interface Pokemon {
-  name: string
-}
+import PokemonLink from '../components/PokemonLink'
 
 interface IndexProps {
-  results: Array<Pokemon>
+  results: Array<{ name: string; url: string }>
 }
 
 export default function IndexPage({
@@ -47,10 +43,10 @@ export default function IndexPage({
         </div>
       </div>
       <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
-        <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
+        <PokemonLink name="GOAT" id={0} />
 
         {data.results.map((pokemon, i) => (
-          <PokemonLink key={i} pokemon={pokemon} id={i + 1} />
+          <PokemonLink key={i + 1} name={pokemon.name} id={i + 1} />
         ))}
       </ul>
     </>

examples/tuono-tutorial/src/routes/pokemons/[pokemon].tsx

@@ -1,23 +1,38 @@
+// src/routes/pokemons/[pokemon].tsx
 import type { JSX } from 'react'
 import type { TuonoProps } from 'tuono'
+import { Link } from 'tuono'
 
-import PokemonView from '@/components/PokemonView'
+import PokemonView from '../../components/PokemonView'
 
 interface Pokemon {
+  id: number
   name: string
-  id: string
   weight: number
   height: number
 }
 
 export default function PokemonPage({
+  isLoading,
   data,
 }: TuonoProps<Pokemon>): JSX.Element {
   return (
-    <>
-      <title>{`Pokemon: ${data?.name ?? ''}`}</title>
+    <div>
+      <Link href="/">Back</Link>
 
-      <PokemonView pokemon={data} />
-    </>
+      {isLoading && (
+        <>
+          <title>Pokemon: loading...</title>
+          <div>Loading...</div>
+        </>
+      )}
+
+      {data?.id && (
+        <>
+          <title>{`Pokemon: ${data.name}`}</title>
+          <PokemonView pokemon={data} />
+        </>
+      )}
+    </div>
   )
 }

examples/tuono-tutorial/tsconfig.json

@@ -1,27 +1,30 @@
 {
   "compilerOptions": {
+    // Language and Environment
     "target": "ES2020",
-    "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
     "jsx": "react-jsx",
+    "useDefineForClassFields": true,
 
-    /* Linting */
+    // Modules
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+
+    // Emit
+    "noEmit": true,
+
+    // Interop Constraints
+    "isolatedModules": true,
+
+    // Typechecking
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+
+    // Completeness
+    "skipLibCheck": true
   },
   "include": ["src", "tuono.config.ts"]
 }