📘 doc: add type popup

Author: SaltyAom

components/midori/just-return.vue

@@ -6,7 +6,7 @@
         <header class="flex flex-col gap-3 w-full">
             <h3
                 class="text-5xl leading-tight font-bold text-transparent bg-clip-text bg-gradient-to-br from-green-300 to-sky-300">
-                Just Function
+                Just Value
             </h3>
             <p class="text-xl leading-normal text-gray-400 w-full max-w-lg mb-4">
                 No need for an additional method, just return the value to send data

docs/.vitepress/theme/custom.css

@@ -131,8 +131,12 @@ button.copy::after {
         z-index: 50 !important;
 
         & > .VPNavBar {
-            @apply dark:!bg-slate-900/0 dark:transition-none;
+            @apply dark:!bg-slate-900/40;
             background-color: rgba(255, 255, 255, .4) !important;
+
+            & > .wrapper > .container > .content > .content-body {
+                @apply bg-transparent;
+            }
         }
     }
 }

docs/at-glance.md

@@ -108,6 +108,7 @@ import { Elysia } from 'elysia'
 
 new Elysia()
     .get('/user/:id', ({ params: { id } }) => id)
+                        // ^?
     .listen(3000)
 ```
 
@@ -129,9 +130,9 @@ Elysia's goal is to help you write less TypeScript and focus more on Business lo
 
 TypeScript is not needed to use Elysia, but it's recommended to use Elysia with TypeScript.
 
-## Unified Type
+## Type Integrity
 
-To take a step further, Elysia provide **Elysia.t**, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type. Elysia refers this term as **Unified Type**.
+To take a step further, Elysia provide **Elysia.t**, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type.
 
 Let's modify the previous code to accept only a numeric value instead of a string.
 
@@ -140,6 +141,7 @@ import { Elysia, t } from 'elysia'
 
 new Elysia()
     .get('/user/:id', ({ params: { id } }) => id, {
+                                // ^?
         params: t.Object({
             id: t.Numeric()
         })
@@ -225,6 +227,9 @@ const app = treaty<App>('localhost:3000')
 
 // Get data from /user/617
 const { data } = await app.user({ id: 617 }).get()
+      // ^?
+
+console.log(data)
 ```
 
 With Eden, you can use the existing Elysia type to query Elysia server **without code generation** and synchronize type for both frontend and backend automatically.

docs/eden/installation.md

@@ -83,6 +83,10 @@ const { data: nendoroid } = await client.mirror.post({
     id: 1895,
     name: 'Skadi'
 })
+
+// @noErrors
+client.
+//     ^|
 ```
 
 ## Gotcha

docs/eden/overview.md

@@ -74,12 +74,14 @@ import { Elysia, t } from 'elysia'
 
 const app = new Elysia()
     .get('/', 'hi')
+    .get('/users', () => 'Skadi')
     .put('/nendoroid/:id', ({ body }) => body, {
         body: t.Object({
             name: t.String(),
             from: t.String()
         })
     })
+    .get('/nendoroid/:id/name', () => 'Skadi')
     .listen(3000)
 
 export type App = typeof app
@@ -91,6 +93,13 @@ import type { App } from './server'
 
 const app = treaty<App>('localhost:3000')
 
+// @noErrors
+app.
+//  ^|
+
+
+
+
 // Call [GET] at '/'
 const { data } = await app.index.get()
 

docs/eden/treaty/unit-test.md

@@ -33,6 +33,8 @@ describe('Elysia', () => {
         const { data } = await api.hello.get()
 
         expect(data).toBe('hi')
+              // ^?
+
     })
 })
 ```

docs/essential/context.md

@@ -21,7 +21,9 @@ import { Elysia } from 'elysia'
 
 const demo1 = new Elysia()
     .state('version', 1)
-    .get('/', ({ store: { version } }) => version)
+    .get('/a', ({ store: { version } }) => version)
+    .get('/b', ({ store }) => store)
+    .get('/c', () => 'still ok')
 
 const demo2 = new Elysia()
     // @ts-expect-error
@@ -134,7 +136,11 @@ import { Elysia } from 'elysia'
 
 new Elysia()
     .state('version', 1)
-    .get('/', ({ store: { version } }) => version)
+    .get('/a', ({ store: { version } }) => version)
+                // ^?
+    .get('/b', ({ store }) => store)
+    .get('/c', () => 'still ok')
+    .listen(3000)
 ```
 
 <Playground :elysia="demo1" />
@@ -260,11 +266,12 @@ Assigning multiple properties is better contained in an object for a single assi
 ```typescript
 import { Elysia } from 'elysia'
 
-new Elysia().decorate({
-    logger: new Logger(),
-    trace: new Trace(),
-    telemetry: new Telemetry()
-})
+new Elysia()
+    .decorate({
+        logger: new Logger(),
+        trace: new Trace(),
+        telemetry: new Telemetry()
+    })
 ```
 
 The object offers a less repetitive API for setting multiple values.
@@ -325,7 +332,7 @@ const app = new Elysia()
         setup
             .prefix('decorator', 'setup')
     )
-    .get('/', ({ setupCarbon }) => setupCarbon)
+    .get('/', ({ setupCarbon, ...rest }) => setupCarbon)
 ```
 
 <Playground :elysia="demo5" />
@@ -348,7 +355,7 @@ const setup = new Elysia({ name: 'setup' })
 
 const app = new Elysia()
     .use(setup.prefix('all', 'setup')) // [!code ++]
-    .get('/', ({ setupCarbon }) => setupCarbon)
+    .get('/', ({ setupCarbon, ...rest }) => setupCarbon)
 ```
 
 ## Reference and value

docs/essential/handler.md

@@ -135,12 +135,13 @@ HTTP Status indicates the type of response. If the route handler is executed suc
 You can also set a status code using the common name of the status code instead of using a number.
 
 ```typescript twoslash
+// @errors 2322
 import { Elysia } from 'elysia'
 
 new Elysia()
     .get('/', ({ set }) => {
-        // with auto-completion
-        set.status = "I'm a teapot"
+        set.status
+          // ^?
 
         return 'Kirifuji Nagisa'
     })

docs/essential/life-cycle.md

@@ -92,7 +92,7 @@ We refer to each function that intercepts the life cycle event as **"hook"**, as
 Hooks can be categorized into 2 types:
 
 1. Local Hook: Execute on a specific route
-2. Global Hook: Execute on every route
+2. Interceptor Hook: Execute on every route
 
 ::: tip
 The hook will accept the same Context as a handler, you can imagine you adding a route handler but at a specific point.
@@ -126,11 +126,11 @@ The response should be listed as follows:
 | /    | text/html; charset=utf8  |
 | /hi  | text/plain; charset=utf8 |
 
-## Global Hook
+## Interceptor Hook
 
-Register hook into **every** handler that came after.
+Register hook into every handler **of the current instance** that came after.
 
-To add a global hook, you can use `.on` followed by a life cycle event in camelCase:
+To add an interceptor hook, you can use `.on` followed by a life cycle event in camelCase:
 
 ```typescript twoslash
 import { Elysia } from 'elysia'

docs/essential/path.md

@@ -91,6 +91,7 @@ import { Elysia } from 'elysia'
 
 new Elysia()
     .get('/id/:id', ({ params: { id } }) => id)
+                      // ^?
     .listen(3000)
 ```
 
@@ -153,6 +154,7 @@ import { Elysia } from 'elysia'
 new Elysia()
     .get('/id/:id', ({ params: { id } }) => id)
     .get('/id/:id/:name', ({ params: { id, name } }) => id + ' ' + name)
+                             // ^?
     .listen(3000)
 ```
 
@@ -196,6 +198,7 @@ import { Elysia } from 'elysia'
 
 new Elysia()
     .get('/id/*', ({ params }) => params['*'])
+                    // ^?
     .listen(3000)
 ```