📘 doc: add life-cycle

Author: SaltyAom

components/midori/ray.vue

@@ -1,13 +1,7 @@
 <!-- https://codepen.io/TWilson/pen/jOdWqbZ -->
 <template>
-    <div
-        class="absolute flex flex-col w-full items-center justify-center bg-transparent transition-bg"
-        :class="className"
-    >
-        <div
-            class="jumbo absolute -inset-[10px] opacity-50"
-            :class="{ '-safari': isSafari }"
-        />
+    <div class="absolute flex flex-col w-full items-center justify-center bg-transparent transition-bg" :class="className">
+        <div class="jumbo absolute -inset-[10px] opacity-50" :class="{ '-safari': isSafari }" />
     </div>
 </template>
 
@@ -16,36 +10,31 @@
     from {
         background-position: 50% 50%, 50% 50%;
     }
+
     to {
         background-position: 350% 50%, 350% 50%;
     }
 }
 
 .jumbo {
-    --stripes: repeating-linear-gradient(
-        100deg,
-        #fff 0%,
-        #fff 7%,
-        transparent 10%,
-        transparent 12%,
-        #fff 16%
-    );
-    --stripesDark: repeating-linear-gradient(
-        100deg,
-        #000 0%,
-        #000 7%,
-        transparent 10%,
-        transparent 12%,
-        #000 16%
-    );
-    --rainbow: repeating-linear-gradient(
-        100deg,
-        #60a5fa 10%,
-        #e879f9 15%,
-        #60a5fa 20%,
-        #5eead4 25%,
-        #60a5fa 30%
-    );
+    --stripes: repeating-linear-gradient(100deg,
+            #fff 0%,
+            #fff 7%,
+            transparent 10%,
+            transparent 12%,
+            #fff 16%);
+    --stripesDark: repeating-linear-gradient(100deg,
+            #000 0%,
+            #000 7%,
+            transparent 10%,
+            transparent 12%,
+            #000 16%);
+    --rainbow: repeating-linear-gradient(100deg,
+            #60a5fa 10%,
+            #e879f9 15%,
+            #60a5fa 20%,
+            #5eead4 25%,
+            #60a5fa 30%);
     background-image: var(--stripes), var(--rainbow);
     background-size: 300%, 200%;
     background-position: 50% 50%, 50% 50%;
@@ -84,7 +73,6 @@
 .dark .jumbo::after {
     background-image: var(--stripesDark), var(--rainbow);
 }
-
 </style>
 
 <script setup lang="ts">
@@ -97,6 +85,6 @@ const props = defineProps<{
 const className = ref(props.class || 'h-screen')
 const isSafari = ref(
     navigator.userAgent.indexOf('Safari') !== -1 &&
-        navigator.userAgent.indexOf('Chrome') === -1
+    navigator.userAgent.indexOf('Chrome') === -1
 )
 </script>

docs/.vitepress/config.ts

@@ -114,6 +114,7 @@ export default defineConfig({
             },
             {
                 text: '✨ Essential',
+                collapsed: true,
                 items: [
                     {
                         text: 'Route',
@@ -151,11 +152,16 @@ export default defineConfig({
             },
             {
                 text: '🔎 Validation',
+                collapsed: true,
                 items: [
                     {
                         text: 'Overview',
                         link: '/new/validation/overview'
                     },
+                    {
+                        text: 'Schema Type',
+                        link: '/new/validation/schema-type'
+                    },
                     {
                         text: 'Primitive Type',
                         link: '/new/validation/primitive-type'
@@ -176,6 +182,7 @@ export default defineConfig({
             },
             {
                 text: '🔁 Life Cycle',
+                collapsed: true,
                 items: [
                     {
                         text: 'Overview',
@@ -185,6 +192,10 @@ export default defineConfig({
                         text: 'On Request',
                         link: '/new/life-cycle/request'
                     },
+                    {
+                        text: 'Parse',
+                        link: '/new/life-cycle/parse'
+                    },
                     {
                         text: 'Transform',
                         link: '/new/life-cycle/transform'
@@ -203,12 +214,17 @@ export default defineConfig({
                     },
                     {
                         text: 'On Response',
-                        link: '/new/life-cycle/on-error'
+                        link: '/new/life-cycle/on-response'
+                    },
+                    {
+                        text: 'Trace',
+                        link: '/new/life-cycle/trace'
                     }
                 ]
             },
             {
                 text: '🧭 Patterns',
+                collapsed: true,
                 items: [
                     {
                         text: 'Cookie',
@@ -220,16 +236,12 @@ export default defineConfig({
                     },
                     {
                         text: 'Web Socket',
-                        link: '/patterns/cookie'
+                        link: '/patterns/websocket'
                     },
                     {
                         text: 'Documentation',
                         link: '/patterns/creating-documentation'
                     },
-                    {
-                        text: 'Trace',
-                        link: '/patterns/trace'
-                    },
                     {
                         text: 'Mount',
                         link: '/patterns/mount'

docs/new/essential/context.md

@@ -4,6 +4,7 @@ Context is information about each request passed to [route handler](/essential/h
 Context is unique for each request, and is not shared except it's a `store` property which is a global mutable state object, (aka state).
 
 Elysia context is consists of:
+- **path** - Path name of the request
 - **body** - [HTTP message](https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages), form or file upload.
 - **query** - [Query String](https://en.wikipedia.org/wiki/Query_string), include additional parameters for search query as JavaScript Object. (Query is extract from a value after pathname starting from '?' question mark sign)
 - **params** - Elysia's path parameters parsed as JavaScript object

docs/new/essential/life-cycle.md

@@ -50,14 +50,14 @@ Elysia does the following for every request:
     - Modify `Context` before validation
     - Best for:
         - Mutate existing context to conform with validation.
-        - Adding new context (derive is based on this)
+        - Adding new context (derive   this)
 4. **Validation** (not interceptable)
     - Strictly validate incoming request provided by `Elysia.t`
 5. **Before Handle**
     - Execute right before the route handler
     - **If value is returned, route handler will be skipped**
     - Best for:
-        - Providing custom requirements to access route, eg. user session, autorization.
+        - Providing custom requirements to access route, eg. user session, authorization.
 6. **Handle** (Route Handler)
     - A callback function of each route
 7. **After Handle**

docs/new/essential/plugin.md

@@ -105,11 +105,11 @@ Elysia avoids this by differentiating the instance by using **name** and **optio
 ```typescript
 import { Elysia } from 'elysia'
 
-const plugin = (config) =>
-    new Elysia({
-        name: 'my-plugin',
-        seed: config,
-    }).get(`${config.prefix}/hi`, () => 'Hi')
+const plugin = (config) => new Elysia({
+        name: 'my-plugin', // [!code ++]
+        seed: config, // [!code ++]
+    })
+    .get(`${config.prefix}/hi`, () => 'Hi')
 
 const app = new Elysia()
     .use(
@@ -130,26 +130,63 @@ import { Elysia } from 'elysia'
 const plugin = new Elysia({ name: 'plugin' })
 
 const app = new Elysia()
-    .use(
-        plugin({
-            prefix: '/v2'
-        })
-    )
+    .use(plugin())
+    .use(plugin())
+    .use(plugin())
+    .use(plugin())
     .listen(3000)
 ```
 
 This allows Elysia to improve performance by reusing the registered plugins instead of processing the plugin over and over again.
 
-This is useful when using [Service Locator](/patterns/service-locator) pattern to provide type inference for the Elysia app.
-
-If no `name` or `seed` is provided, Elysia will not deduplicate the plugin.
-
 ::: tip
 Seed could be anything, varying from a string to a complex object or class.
 
 If the provided value is class, Elysia will then try to use `.toString` method to generate a checksum.
 :::
 
+## Service Locator
+When you apply multiple state and decorators plugin to an instance, the instance will gain type safety.
+
+However, you may notice that when you are trying to use the decorated value in other instance without decorator, you may realize that the type is missing.
+
+```typescript
+import { Elysia } from 'elysia'
+
+const main = new Elysia()
+    .decorate('a', 'a')
+    .use(child)
+
+const child = new Elysia()
+    // ❌ 'a' is missing
+    .get('/', ({ a }) => a)
+```
+
+This is the limitation of TypeScript, Elysia only have reference to the current instance only.
+
+To counter this, Elysia introduce the **Service Locator** pattern.
+
+Service Locator allow us get the plugin for us automatically, when `use` is call, Elysia will do two thing:
+Lookup for plugin checksum and retrieve the value, otherwise register a new one
+Infer type from the plugin
+
+To put it simply, we only need to provide the plugin reference for Elysia to locate the service.
+
+```typescript
+// setup.ts
+const setup = new Elysia({ name: 'setup' })
+    .decorate('a', 'a')
+
+// index.ts
+const main = new Elysia()
+    .use(child)
+
+// child.ts
+const child = new Elysia()
+    .use(setup)
+    .get('/', ({ a }) => a)
+```
+
 ## Official Plugins
 
 You can find an officially maintained plugin at Elysia's [plugins](/plugins).

docs/new/essential/scope.md

@@ -46,19 +46,22 @@ This means that the code above is translated into:
 ```typescript
 import { Elysia } from 'elysia'
 
-new Elysia().post('/sign-up', ({ body }) => signUp(body), {
-    body: t.Object({
-        username: t.String(),
-        password: t.String()
+new Elysia()
+    .post('/sign-up', ({ body }) => signUp(body), {
+        body: t.Object({
+            username: t.String(),
+            password: t.String()
+        })
     })
-})
-.post('/sign-in', (({ body }) => signIn(body), {
-    beforeHandle: isUserExists,
-    body: t.Object({
-        username: t.String(),
-        password: t.String()
+    .post('/sign-in', (({ body }) => signIn(body), {
+        beforeHandle: isUserExists,
+        body: t.Object({
+            username: t.String(),
+            password: t.String()
+        })
     })
-}).get('/', () => 'hi').listen(3000)
+    .get('/', () => 'hi')
+    .listen(3000)
 ```
 
 ## Groupped Guard

docs/new/life-cycle/after-handle.md

@@ -0,0 +1,60 @@
+# After Handle
+Execute after the main handler, for mapping a returned value of **before handle** and **route handler** into a proper response.
+
+It's recommended to use After Handle in the following situations:
+- Transform requests into a new value, eg. Compression, Event Stream
+- Add custom headers based on the response value, eg. **Content-Type**
+
+## Example
+Below is an example of using the after handle to add HTML content type to response headers.
+
+```typescript
+import { Elysia } from 'elysia'
+import { isHtml } from '@elysiajs/html'
+
+new Elysia()
+    .get('/', () => '<h1>Hello World</h1>', {
+        afterHandle({ response, set }) {
+            if (isHtml(response))
+                set.headers['Content-Type'] = 'text/html; charset=utf8'
+        }
+    })
+    .get('/hi', () => '<h1>Hello World</h1>')
+    .listen(3000)
+```
+
+The response should be listed as follows:
+
+| Path | Content-Type             |
+| ---- | ------------------------ |
+| /    | text/html; charset=utf8  |
+| /hi  | text/plain; charset=utf8 |
+
+## Returned Value
+If a value is returned After Handle will use a return value as a new response value unless the value is **undefined**
+
+The above example could be rewritten as the following:
+```typescript
+import { Elysia } from 'elysia'
+import { isHtml } from '@elysiajs/html'
+
+new Elysia()
+    .get('/', () => '<h1>Hello World</h1>', {
+        afterHandle({ response, set }) {
+            if (isHtml(response))
+                new Response(response, {
+                    headers: {
+                        'content-type': 'text/html; charset=utf8'
+                    }
+                })
+        }
+    })
+    .get('/hi', () => '<h1>Hello World</h1>')
+    .listen(3000)
+```
+
+## Context
+`onAfterHandle` Context is extends from `Context` with additional properties of the following:
+- response: Response to return to client
+
+All of the context is based on normal context and can be used like normal context in route handler.