🎉 feat: patterns

Author: SaltyAom

docs/.vitepress/config.ts

@@ -207,6 +207,39 @@ export default defineConfig({
                     }
                 ]
             },
+            {
+                text: '🧭 Patterns',
+                items: [
+                    {
+                        text: 'Cookie',
+                        link: '/patterns/cookie'
+                    },
+                    {
+                        text: 'Cookie Signature',
+                        link: '/patterns/cookie-signature'
+                    },
+                    {
+                        text: 'Web Socket',
+                        link: '/patterns/cookie'
+                    },
+                    {
+                        text: 'Documentation',
+                        link: '/patterns/creating-documentation'
+                    },
+                    {
+                        text: 'Trace',
+                        link: '/patterns/trace'
+                    },
+                    {
+                        text: 'Mount',
+                        link: '/patterns/mount'
+                    },
+                    {
+                        text: 'Lazy Loading Module',
+                        link: '/patterns/lazy-loading-module'
+                    }
+                ]
+            },
             {
                 text: 'Getting Started',
                 items: [

docs/new/essential/context.md

@@ -150,7 +150,7 @@ new Elysia()
 The object offers a less repetitive API for setting multiple values.
 
 ### Remap
-Remap is a function reassignment. 
+Remap is a function reassignment.
 
 Allowing us to create a new value from existing value like renaming or removing a property.
 
@@ -180,6 +180,41 @@ However, it's important to note that Elysia doesn't offer reactivity from this a
 Using remap, Elysia will treat a returned object as a new property, removing any property that is missing from the object.
 :::
 
+## Affix
+The provide a smoother experience, some plugins might have a lot of property value which can be overwhelming to remap one-by-one.
+
+The **Affix** function which consists of **prefix** and **suffix**, allowing us to remap all property of an instance.
+
+```ts
+const setup = new Elysia({ name: 'setup' })
+    .decorate({
+        argon: 'a',
+        boron: 'b',
+        carbon: 'c'
+    })
+
+const app = new Elysia()
+    .use(
+        setup
+            .prefix('decorator', 'setup')
+    )
+    .get('/', ({ setupCarbon }) => setupCarbon)
+```
+
+Allowing us to bulk remap a property of the plugin effortlessly, preventing the name collision of the plugin.
+
+By default, **affix** will handle both runtime, type-level code automatically, remapping the property to camelCase as naming convention.
+
+In some condition, you can also remap `all` property of the plugin:
+```ts
+const app = new Elysia()
+    .use(
+        setup
+            .prefix('all', 'setup')
+    )
+    .get('/', ({ setupCarbon }) => setupCarbon)
+```
+
 ## Reference and value
 To mutate the state, it's recommended to use `reference` to mutate rather than using an actual value.
 

docs/new/validation/elysia-type.md

@@ -24,7 +24,7 @@ This is useful when an incoming value is a numeric string for example path param
 Numeric accepts the same attribute as [Numeric Instance](https://json-schema.org/draft/2020-12/json-schema-validation#name-validation-keywords-for-num)
 
 ## File
-A singular file. Often useful for HTTP body validation.
+A singular file. Often useful for **file upload** validation.
 
 ```typescript
 t.File()

docs/new/validation/reference-model.md

@@ -39,7 +39,7 @@ const app = new Elysia()
     })
 ```
 
-We can refactor them by declaring the model as a variable, and reuse them.
+We can refactor the code by extract the model as a variable, and reference them.
 ```typescript
 import { Elysia, t } from 'elysia'
 
@@ -56,9 +56,7 @@ const app = new Elysia()
     })
 ```
 
-This method of separation the concerns is an effective approach for maintaining clean code.
-
-You might find yourself reusing multiple models with different controllers as the app gets more complex.
+This method of separation the concerns is an effective approach but we might find ourself reusing multiple models with different controllers as the app gets more complex.
 
 We can resolve that by creating a "reference model"  allowing us to name the model and use auto-completion to reference it directly in `schema` by registering the models with `model`.
 
@@ -126,9 +124,9 @@ export const authModel = new Elysia()
 ```
 
 ## Naming Convention
-Duplicated model names will cause Elysia to throw an error. To prevent declaring duplicate model names, you can use the following naming convention.
+Duplicated model names will cause Elysia to throw an error. To prevent declaring duplicate model names, we can use the following naming convention.
 
-Let's say that you have all models stored at `models/<name>.ts`, you can declare the prefix of the model as a namespace.
+Let's say that we have all models stored at `models/<name>.ts`, and declare the prefix of the model as a namespace.
 
 ```typescript
 // admin.model.ts

docs/patterns/cookie.md

@@ -31,21 +31,20 @@ app.get('/', ({ cookie: { name } }) => {
 })
 ```
 
-By default, Reactive Cookie can encode/decode type of object automatically. So if you like to set the cookie as an object, it will just work.
+By default, Reactive Cookie can encode/decode type of object automatically allowing us to treat cookie as an object without worrying about the encoding/decoding. **It just works**.
 
 ## Reactivity
-Elysia cookie is reactive, based on approach like signal.
+The Elysia cookie is reactive. This means that when you change the cookie value, the cookie will be updated automatically based on approach like signal.
 
-Elysia cookie can sync the value of cookie, and set-headers automatically, providing a single source of truth for handling cookie.
+A single source of truth for handling cookies is provided by Elysia cookies, which have the ability to automatically set headers and sync cookie values.
 
-If you don't set the new value for the cookie, the `Set-Cookie` header will not be send to keep the same cookie value, so you don't have to worry about the performance.
+Since cookies are Proxy-dependent objects by default, the extract value can never be **undefined**; instead, it will always be a value of `Cookie<unknown>`, which can be obtained by invoking the **.value** property.
 
-By default, cookie is an object that rely on Proxy, so the extract value can never be **undefined**, it will always be a value of `Cookie<unknown>`, which you can retrieve its value by calling **.value** property.
-
-If you iterate over the cookie jar, the value will be only iterated over an existing cookie value, so you can treat it as a normal object.
+We can treat the cookie jar as a regular object, iteration over it will only iterate over an already-existing cookie value.
 
 ## Cookie Attribute
 To use Cookie attribute, you can either use one of the following:
+
 1. Setting the property directly
 2. Using `set` or `add` to update cookie property.
 

docs/patterns/lazy-loading-module.md

@@ -15,7 +15,7 @@ head:
 ---
 
 # Lazy-Loading Module
-Modules are eagerly loaded by default. 
+Modules are eagerly loaded by default.
 
 Elysia loads all modules then registers and indexes all of them before starting the server. This enforces that all the modules have loaded before it starts accepting requests.
 
@@ -53,7 +53,7 @@ const app = new Elysia()
 
 Elysia static plugin is also a deferred module, as it loads files and registers files path asynchronously.
 
-To ensure module registration before the server starts, you can use `await` on the deferred module.
+To ensure module registration before the server starts, we can use `await` on the deferred module.
 
 ```typescript
 // index.ts
@@ -78,7 +78,7 @@ const app = new Elysia()
 Using module lazy-loading is recommended when the module is computationally heavy and/or blocking.
 
 ## Testing
-In a test environment, you can use `await app.modules` to wait for deferred and lazy-loading modules.
+In a test environment, we can use `await app.modules` to wait for deferred and lazy-loading modules.
 
 ```typescript
 import { Elysia } from 'elysia'

docs/patterns/websocket.md

@@ -16,13 +16,17 @@ head:
 
 # WebSocket
 
-Elysia WebSocket extends Bun's WebSocket which uses [uWebSocket](https://github.com/uNetworking/uWebSockets) under the hood.
+WebSocket is a realtime protocol for communication between your client and server.
 
-To use websocket, just call `ws()`:
+Unlike HTTP where our client repeatedly asking the website for information and waiting for a reply each time, WebSocket sets up a direct line where our client and server can send messages back and forth directly, making the conversation quicker and smoother without having to start over each message.
+
+SocketIO is a popular library for WebSocket, but it is not the only one. Elysia uses [uWebSocket] [uWebSocket](https://github.com/uNetworking/uWebSockets) which Bun use under the hood with the same API.
+
+To use websocket, simply call `Elysia.ws()`:
 ```typescript
 import { Elysia } from 'elysia'
 
-const app = new Elysia()
+new Elysia()
     .ws('/ws', {
         message(ws, message) {
             ws.send(message)
@@ -31,7 +35,39 @@ const app = new Elysia()
     .listen(8080)
 ```
 
-Like a normal route, WebSockets also accepts a **schema** object to strictly type and validate requests.
+## WebSocket message validation:
+
+Same as normal route, WebSockets also accepts a **schema** object to strictly type and validate requests.
+
+```typescript
+import { Elysia, t } from 'elysia'
+
+const app = new Elysia()
+    .ws('/ws', {
+        // validate incoming message
+        body: t.Object({
+            message: t.String()
+        }),
+        message(ws, { message }) {
+            ws.send({
+                message,
+                time: Date.now()
+            })
+        }
+    })
+    .listen(8080)
+```
+
+WebSocket schema can validate the following:
+
+-   message - An incoming message.
+-   query - query string or URL parameters.
+-   params - Path parameters.
+-   header - Request's headers.
+-   cookie - Request's cookie
+-   response - Value returned from handler
+
+By default Elysia will parse incoming stringified JSON message as Object for validation.
 
 ## Configuration
 You can set Elysia constructor to set the Web Socket value.
@@ -43,9 +79,9 @@ new Elysia({
 })
 ```
 
-Elysia's WebSocket implementation extends Bun's WebSocket configuration so if you wish to configure the websocket you can refer to [Bun's WebSocket documentation](https://bun.sh/docs/api/websockets) to learn more about this.
+Elysia's WebSocket implementation extends Bun's WebSocket configuration, please refers to [Bun's WebSocket documentation](https://bun.sh/docs/api/websockets) for more information.
 
-Below is a config that extends from [Bun WebSocket](https://bun.sh/docs/api/websockets#create-a-websocket-server)
+The following are a brief configuration from [Bun WebSocket](https://bun.sh/docs/api/websockets#create-a-websocket-server)
 
 ### perMessageDeflate
 
@@ -114,20 +150,6 @@ WebSocketHandler extends config from [config](#config).
 
 Below is a config which is accepted by `ws`.
 
-## schema
-
-Validatation for an incoming WebSocket request.
-
--   headers: validate headers before upgrade to WebSocket
--   params: validate path paramters
--   query: validate query parameters
--   body: validate websocket message
--   response: validate websocket response
-
-::: tip
-It's recommended to use query parameters instead of path parameters in WebSocket, as parsing path parameters is expensive and sometime unrealiable for multiple data with long value.
-:::
-
 ## open
 
 Callback function for new websocket connection.
@@ -214,28 +236,3 @@ Like `transform`, but execute before validation of WebSocket message
 ## header
 
 Additional headers to add before upgrade connection to WebSocket.
-
-## WebSocket message validation:
-
-Validate incoming WebSocket message.
-
-By default Elysia will parse incoming stringified JSON message as Object for validation.
-
-```typescript
-import { Elysia, t } from 'elysia'
-
-const app = new Elysia()
-    .ws('/ws', {
-        // validate incoming message
-        body: t.Object({
-            message: t.String()
-        }),
-        message(ws, { message }) {
-            ws.send({
-                message,
-                time: Date.now()
-            })
-        }
-    })
-    .listen(8080)
-```