📘 doc(docs): hook type guard scope

Author: SaltyAom

docs/blog/elysia-10.md

@@ -346,7 +346,7 @@ Most of the server might not need to apply migration yourself but **heavily depe
 
 For a complete migration note, see [Elysia#513](https://github.com/elysiajs/elysia/issues/513).
 
-For the documentation of hook type, see [Lifecycle#hook-type](https://beta.elysiajs.com/essential/life-cycle.html#hook-type)
+For the documentation of hook type, see [Lifecycle#hook-type](https://beta.elysiajs.com/essential/scope.html#hook-type)
 
 ## Inline error
 Starting from Elysia 0.8, we can use the `error` function to return a response with a status code for Eden inference.

docs/essential/life-cycle.md

@@ -187,69 +187,4 @@ Console should log as the following:
 1
 2
 3
-```
-
-## Hook type
-Starting from Elysia 1.0 introduce a **hook type**, to specify if the hook should be local-only, or global.
-
-Elysia hook type are as the following:
-- local (default) - apply to only current instance and descendant only
-- scoped - apply to only 1 ascendant, current instance and descendants
-- global - apply to all instance that apply the plugin (all ascendants, current, and descendants)
-
-If not specified, hook is local by default.
-
-::: tip
-Starting from Elysia 1.0 hook is local by default while Elysia < 1.0 will be global only.
-
-This is a breaking change.
-:::
-
-To specify hook's type, add a `{ as: hookType }` to hook.
-
-To apply hook to globally, we need to specify hook as global.
-```typescript
-const plugin = new Elysia()
-    .onBeforeHandle(() => { // [!code --]
-    .onBeforeHandle({ as: 'global' }, () => { // [!code ++]
-        console.log('hi')
-    })
-    .get('/child', () => 'log hi')
-
-const main = new Elysia()
-    .use(plugin)
-    .get('/parent', () => 'log hi')
-```
-
-Let's create a plugin to illustrate how hook type work.
-
-```typescript
-// ? Value base on table value provided below
-const type = 'local'
-
-const child = new Elysia()
-    .get('/child', () => 'hello')
-
-const current = new Elysia()
-    .onBeforeHandle({ as: type }, () => {
-        console.log('hi')
-    })
-    .use(child)
-    .get('/current', () => 'hello')
-
-const parent = new Elysia()
-    .use(current)
-    .get('/parent', () => 'hello')
-
-const main = new Elysia()
-    .use(parent)
-    .get('/main', () => 'hello')
-```
-
-By changing the `type` value, the result should be as follows:
-
-| type       | child | current | parent | main |
-| ---------- | ----- | ------- | ------ | ---- |
-| 'local'    | ✅    | ✅       | ❌     | ❌   | 
-| 'scope'    | ✅    | ✅       | ✅     | ❌   | 
-| 'global'   | ✅    | ✅       | ✅     | ✅   | 
+```

docs/essential/scope.md

@@ -153,68 +153,96 @@ const main = new Elysia()
     .get('/parent', () => 'log hi')
 ```
 
-<!-- Probably deprecated in favor of local-first hook? Leave it here as undecided -->
-<!-- ## Scoped Plugin
 
-Sometimes we may want to encapsulate the event and not "leak" the event out of the plugin.
+## Hook type
+Starting from Elysia 1.0 introduce a **hook type**, to specify if the hook should be local-only, or global.
 
-We can accomplish that by adding `scoped: true` to the Elysia instance.
+Elysia hook type are as the following:
+- local (default) - apply to only current instance and descendant only
+- scoped - apply to only 1 ascendant, current instance and descendants
+- global - apply to all instance that apply the plugin (all ascendants, current, and descendants)
 
+If not specified, hook is local by default.
+
+::: tip
+Starting from Elysia 1.0 hook is local by default while Elysia < 1.0 will be global only.
+
+This is a breaking change.
+:::
+
+To specify hook's type, add a `{ as: hookType }` to hook.
+
+To apply hook to globally, we need to specify hook as global.
 ```typescript
-import { Elysia } from 'elysia'
-import { isHtml } from '@elysiajs/html'
+const plugin = new Elysia()
+    .onBeforeHandle(() => { // [!code --]
+    .onBeforeHandle({ as: 'global' }, () => { // [!code ++]
+        console.log('hi')
+    })
+    .get('/child', () => 'log hi')
+
+const main = new Elysia()
+    .use(plugin)
+    .get('/parent', () => 'log hi')
+```
+
+Let's create a plugin to illustrate how hook type work.
 
-const html = new Elysia({ scoped: true }) // [!code ++]
-    .onAfterHandle(({ set, response }) => {
-        if (isHtml(response))
-            set.headers['Content-Type'] = 'text/html; charset=utf8'
+```typescript
+// ? Value base on table value provided below
+const type = 'local'
+
+const child = new Elysia()
+    .get('/child', () => 'hello')
+
+const current = new Elysia()
+    .onBeforeHandle({ as: type }, () => {
+        console.log('hi')
     })
-    .get('/inner', () => '<h1>Hello World</h1>')
+    .use(child)
+    .get('/current', () => 'hello')
 
-new Elysia()
-    .get('/', () => '<h1>Hello World</h1>')
-    .use(html)
-    .get('/outer', () => '<h1>Hello World</h1>')
-    .listen(3000)
+const parent = new Elysia()
+    .use(current)
+    .get('/parent', () => 'hello')
+
+const main = new Elysia()
+    .use(parent)
+    .get('/main', () => 'hello')
 ```
 
-Events that are registered in `guard`, and scoped instance will not be exposed to other instances, thus containing the event like `guard`
+By changing the `type` value, the result should be as follows:
 
-The response should be listed as follows:
-| Path | Content-Type |
-| ----- | ----------------------- |
-| / | text/plain; charset=utf8 |
-| /inner | text/html; charset=utf8 |
-| /outer | text/plain; charset=utf8 |
+| type       | child | current | parent | main |
+| ---------- | ----- | ------- | ------ | ---- |
+| 'local'    | ✅    | ✅       | ❌     | ❌   | 
+| 'scoped'    | ✅    | ✅       | ✅     | ❌   | 
+| 'global'   | ✅    | ✅       | ✅     | ✅   | 
 
-### Encapsulation
+## guard
+Guard is a hard limit for hook type.
 
-It is important to note that the scoped instance, just like `guard`, will inherit the previous events from the main instance but not expose those registered in the scope.
+Any life-cycle defined in `guard`, and `group` **will always** be contained in scope, even if hook type is **global**
 
 ```typescript
 import { Elysia } from 'elysia'
 
-const scoped = new Elysia({ scoped: true })
-    .onAfterHandle(() => {
-        console.log('1')
+const plugin = new Elysia()
+    .beforeHandle({ as: 'global' }, () => {
+        console.log('hi')
     })
-    .get('/inner', () => 'hi')
 
-new Elysia()
-    .onAfterHandle(() => {
-        console.log('2')
-    })
-    .use(scoped)
-    .get('/outer', () => 'hi')
+const app = new Elysia()
+    .guard(app => app
+        .use(plugin)
+        .get('/inner', () => 'inner')
+    )
+    .get('/outer', () => 'outer')
     .listen(3000)
 ```
 
-The response should be listed as follows:
-| Path | Log |
-| ----- | ----------------------- |
-| /inner | 1, 2 |
-| /outer | 2 |
-
-Scope and guard only prevent the event from being inherited but the scope itself will inherit the events.
-
---->
+Evaluating the route, should logs as follows:
+| route       | log  |
+| ----------- | ---- |
+| /inner      | ❌   |
+| /outer      | ✅   |