🎉 feat: add elysia playground

Author: SaltyAom

bun.lockb

@@ -0,0 +1 @@
+<iframe width="560" height="315" src="https://www.youtube.com/embed/2b1IexhKPz4?si=VlzjeVXV8BTPNTKs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

components/nearl/kyuukurarin.vue

@@ -0,0 +1,104 @@
+<template>
+    <article class="mockup-browser dark:bg-slate-800 border dark:border-slate-700 playground">
+        <div class="mockup-browser-toolbar">
+            <div class="input flex dark:!bg-slate-700">
+                <span>localhost</span>
+                <select
+                    name="route"
+                    class="flex-1 rounded text-blue-500 font-bold bg-blue-500/10 hover:bg-blue-500/20 dark:bg-blue-500/25 dark:hover:bg-blue-500/40 border border-solid border-blue-500/50 dark:border-blue-500/75 px-1 cursor-pointer transition-colors"
+                    v-model="current"
+                >
+                    <option
+                        v-for="{ method, path } in routes"
+                        :key="method + '_' + path"
+                        :value="{ method, path }"
+                    >
+                        {{ alias && path in alias ? alias[path] : path }}
+                    </option>
+                </select>
+            </div>
+            <p
+                class="!my-0 font-bold pl-2 min-w-[5ch] text-right"
+                :class="
+                    current.method === 'GET'
+                        ? 'text-green-600'
+                        : 'text-blue-500'
+                "
+            >
+                {{ current.method }}
+            </p>
+        </div>
+        <section
+            class="flex justify-start items-stretch w-full h-full px-4 whitespace-pre-wrap pb-3"
+            style="min-height: 16rem"
+        >
+            {{ response }}
+        </section>
+    </article>
+    <!-- <ul class="flex flex-col">
+        <li v-for="{ method, path } in routes" :key="method + '_' + path">
+            <button @click="current = { method, path }">
+                {{ method }} {{ path }}
+            </button>
+        </li>
+    </ul> -->
+</template>
+
+<script setup lang="ts">
+import { defineProps, ref, watch } from 'vue'
+import type { Elysia } from 'elysia'
+
+const { elysia, mock = {}, alias = {} } = defineProps<{
+    elysia: Elysia<any, any, any, any, any, any>
+    mock?: Record<string, Record<string, string>>
+    alias?: Record<string, string>
+}>()
+
+const routes = elysia?.router.history
+
+const current = ref({
+    method: routes?.[0]?.method ?? 'get',
+    path: routes?.[0]?.path ?? '/'
+})
+
+const response = ref('')
+
+const compute = async () => {
+    const { method, path } = current.value
+
+    if (mock && path in mock && method in mock[path]) {
+        response.value = mock[path][method]
+        return
+    }
+
+    const res = await elysia
+        .handle(
+            new Request('http://elysiajs.com' + path, {
+                method
+            })
+        )
+        .then((x) => x.text())
+
+    response.value = res
+}
+
+compute()
+watch([current], compute)
+</script>
+
+<style global>
+.playground {
+    box-shadow: 0 7px 25px rgba(0,0,0,.0625);
+}
+
+@media screen and (max-width: 567.9px) {
+    .playground > .mockup-browser-toolbar {
+        padding-left: 0.7em;
+        padding-right: 0.7em;
+    }
+
+    .playground > .mockup-browser-toolbar::before {
+        display: none !important;
+    }
+}
+</style>

components/nearl/playground.vue

@@ -41,12 +41,12 @@ For Object, `listen` accepts the same value as `Bun.serve`, you can provide any
 ```typescript
 // ✅ This is fine
 new Elysia()
-    .listen(8080)
+    .listen(3000)
 
 // ✅ This is fine
 new Elysia()
     .listen({
-        port: 8080,
+        port: 3000,
         hostname: '0.0.0.0'
     })
 ```
@@ -59,7 +59,7 @@ For providing WebSocket, please use [`WebSocket`](/patterns/websocket)
 You can provide a custom port from ENV by using `process.env`
 ```typescript
 new Elysia()
-    .listen(process.env.PORT ?? 8080)
+    .listen(process.env.PORT ?? )
 ```
 
 ## Retrieve Port
@@ -69,7 +69,7 @@ Using callback in `.listen`
 
 ```typescript
 const app = new Elysia()
-    .listen(8080, ({ hostname, port }) => {
+    .listen(, ({ hostname, port }) => {
         console.log(`Running at http://${hostname}:${port}`)
     })
 

docs/api/constructor.md

@@ -17,6 +17,18 @@ head:
 <script setup>
 import Card from '../components/nearl/card.vue'
 import Deck from '../components/nearl/card-deck.vue'
+import Playground from '../components/nearl/playground.vue'
+
+import { Elysia } from 'elysia'
+
+const demo1 = new Elysia()
+    .get('/', () => 'Hello Elysia')
+    .get('/user/:id', ({ params: { id }}) => id)
+    .post('/form', ({ body }) => body)
+
+const demo2 = new Elysia()
+    .get('/user/:id', ({ params: { id }}) => id)
+    .get('/user/abc', () => 'abc')
 </script>
 
 # At glance
@@ -30,14 +42,37 @@ Here's a simple hello world in Elysia.
 import { Elysia } from 'elysia'
 
 new Elysia()
-    .get('/', () => 'hi')
+    .get('/', () => 'Hello Elysia')
     .get('/user/:id', ({ params: { id }}) => id)
     .post('/form', ({ body }) => body)
-    .listen(8080)
+    .listen(3000)
 ```
 
 Navigate to [localhost:3000](http://localhost:3000/) and it should show 'Hello Elysia' as a result.
 
+<Playground 
+    :elysia="demo1"
+    :alias="{
+        '/user/:id': '/user/1'
+    }"
+    :mock="{
+        '/user/:id': {
+            GET: '1'
+        },
+        '/form': {
+            POST: JSON.stringify({
+                hello: 'Elysia'
+            })
+        }
+    }" 
+/>
+
+::: tip
+Click on path highlight in blue to change path to preview a response.
+
+Elysia can runs on browser and the result you see are actually run using Elysia.
+:::
+
 ## Performance
 
 Building on Bun and extensive optimization like Static Code Analysis allows Elysia to generate optimized code on the fly.
@@ -76,6 +111,18 @@ new Elysia()
 
 The above code create a path parameter "id", the value that replace `:id` will be passed to `params.id` both in runtime and type without manual type declaration.
 
+<Playground 
+    :elysia="demo2"
+    :alias="{
+        '/user/:id': '/user/123'
+    }"
+    :mock="{
+        '/user/:id': {
+            GET: '123'
+        },
+    }" 
+/>
+
 Elysia's goal is to help you write less TypeScript and focus more on Business logic. Let the complex type be handled by the framework.
 
 TypeScript is not needed to use Elysia, but it's recommended to use Elysia with TypeScript.

docs/at-glance.md

@@ -142,7 +142,7 @@ new Elysia()
             })
         }
     })
-    .listen(8080)
+    .listen(3000)
 ```
 
 Now you can create a validation error for your API not limited to only the first error.