🎉 feat: add twoslash

Author: SaltyAom

bun.lockb

@@ -14,27 +14,31 @@
             Move fast and break nothing like tRPC.
         </p>
 
-        <a class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
+        <p class="text-lg font-medium bg-green-100/50 text-green-500 dark:text-green-400 dark:bg-green-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6">
+            Hover code below to see type definition
+        </p>
+
+        <!-- <a class="text-lg font-medium bg-blue-50 text-blue-500 dark:text-blue-400 dark:bg-blue-500/20 mr-auto md:mx-auto px-4 py-2 rounded-xl mt-6"
             href="/eden/overview">
             See how it works
-        </a>
+        </a> -->
 
         <section class="flex flex-col lg:flex-row gap-8 w-full max-w-5xl my-8">
             <div class="w-full !text-base !font-mono rounded-xl">
                 <slot name="server"></slot>
             </div>
             <div class="relative w-full !text-base !font-mono rounded-xl">
                 <slot name="client"></slot>
-                <div class="absolute p-1 rounded bg-red-400/25" style="
-                        top: 13.2em;
-                        left: 5.9em;
+                <!-- <div class="absolute p-1 rounded bg-red-400/25" style="
+                        top: 13.1em;
+                        left: 6.5em;
                         width: 2.2em;
                         height: 1.375em;
                     " />
                 <p class="absolute px-3 py-1.5 rounded bg-white dark:bg-gray-700 border dark:border-gray-600"
                     style="top: 15.25em; left: 3.25em">
                     Type 'string' is not assignable to type 'number'
-                </p>
+                </p> -->
             </div>
         </section>
     </section>

components/midori/e2e-type-safety.vue

@@ -58,14 +58,14 @@ const isDark = useDark()
                 </template>
             </E2ETypeSafety>
             <Plugins />
-            <Suspense>
+            <!-- <Suspense>
                 <Editor />
                 <template #fallback>
                     <video muted autoplay loop>
                         <source src="/assets/elysia.mp4" />
                     </video>
                 </template>
-            </Suspense>
+            </Suspense> -->
             <Community />
             <Sponsor />
             <hr class="border-gray-200 dark:border-gray-600" />

components/midori/index.vue

@@ -1,5 +1,7 @@
 import { defineConfig } from 'vitepress'
 
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
+
 const description =
     'Ergonomic Framework for Humans. TypeScript framework supercharged by Bun with End - to - End Type Safety, unified type system and outstanding developer experience'
 
@@ -13,7 +15,8 @@ export default defineConfig({
         theme: {
             light: 'github-light',
             dark: 'github-dark'
-        }
+        },
+        codeTransformers: [transformerTwoslash()]
     },
     // ![INFO] uncomment for support hot reload on WSL - https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
     vite: {
@@ -344,13 +347,13 @@ export default defineConfig({
                             {
                                 text: 'Legacy (Treaty 1)',
                                 link: '/eden/treaty/legacy.md'
-                            }        
+                            }
                         ]
                     },
                     {
                         text: 'Eden Fetch',
                         link: '/eden/fetch.md'
-                    },
+                    }
                 ]
             },
             {

docs/.vitepress/config.ts

@@ -1,10 +1,19 @@
 // https://vitepress.dev/guide/custom-theme
 import DefaultTheme from 'vitepress/theme'
 import Layout from './layout.vue'
+
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import '@shikijs/vitepress-twoslash/style.css'
+
 import './custom.css'
-import { Theme } from 'vitepress'
+
+import type { EnhanceAppContext } from 'vitepress'
+import type { Theme } from 'vitepress'
 
 export default {
     extends: DefaultTheme,
-    Layout
+    Layout,
+    enhanceApp({ app }: EnhanceAppContext) {
+        app.use(TwoslashFloatingVue)
+    }
 } satisfies Theme

docs/.vitepress/theme/index.ts

@@ -0,0 +1,8 @@
+import { Elysia } from 'elysia'
+
+new Elysia()
+    .get('/', ({ query: { name } }) => {
+        return (
+            <h1>hello {name}</h1>
+        )
+    })

docs/a.tsx

@@ -38,7 +38,7 @@ Designed with simplicity and type safety in mind with familiar API with extensiv
 
 Here's a simple hello world in Elysia.
 
-```typescript
+```typescript twoslash
 import { Elysia } from 'elysia'
 
 new Elysia()
@@ -101,7 +101,7 @@ Elysia's Type System is fine-tuned to infer your code into type automatically wi
 
 Take a look at this example:
 
-```typescript
+```typescript twoslash
 import { Elysia } from 'elysia'
 
 new Elysia()
@@ -133,7 +133,7 @@ To take a step further, Elysia provide **Elysia.t**, a schema builder to validat
 
 Let's modify the previous code to accept only a numeric value instead of a string.
 
-```typescript
+```typescript twoslash
 import { Elysia, t } from 'elysia'
 
 new Elysia()
@@ -147,6 +147,10 @@ new Elysia()
 
 This code ensures that our path parameter **id**, will always be a numeric string and then transform to a number automatically in both runtime and compile-time (type-level).
 
+::: tip
+Hover over "id" in the above code snippet to see a type definition.
+:::
+
 With Elysia schema builder, we can ensure type safety like a strong-typed language with a single source of truth.
 
 ## Standard
@@ -155,7 +159,7 @@ Elysia adopts many standards by default, like OpenAPI, and WinterCG compliance,
 
 For instance, as Elysia adopts OpenAPI by default, generating a documentation with Swagger is as easy as adding a one-liner:
 
-```typescript
+```typescript twoslash
 import { Elysia, t } from 'elysia'
 import { swagger } from '@elysiajs/swagger'
 
@@ -177,7 +181,7 @@ With Elysia, type safety is not only limited to server-side only.
 
 With Elysia, you can synchronize your type with your frontend team automatically like tRPC, with Elysia's client library, "Eden".
 
-```typescript
+```typescript twoslash
 import { Elysia, t } from 'elysia'
 import { swagger } from '@elysiajs/swagger'
 
@@ -195,12 +199,27 @@ export type App = typeof app
 
 And on your client-side:
 
-```typescript
+```typescript twoslash
+// @filename: server.ts
+import { Elysia, t } from 'elysia'
+
+const app = new Elysia()
+    .get('/user/:id', ({ params: { id } }) => id, {
+        params: t.Object({
+            id: t.Numeric()
+        })
+    })
+    .listen(3000)
+
+export type App = typeof app
+
+// @filename: client.ts
+// ---cut---
 // client.ts
 import { treaty } from '@elysiajs/eden'
 import type { App } from './server'
 
-const app = treaty<App>('http://localhost:3000')
+const app = treaty<App>('localhost:3000')
 
 // Get data from /user/617
 const { data } = await app.user({ id: 617 }).get()

docs/at-glance.md

@@ -192,7 +192,7 @@ Elysia handle Cookie's secret rotation automatically, so if you have to migrate
 ```typescript
 new Elysia({
     cookie: {
-        secret: ['Vengeance will be mine', 'Fischl von Luftschloss Narfidort']
+        secrets: ['Vengeance will be mine', 'Fischl von Luftschloss Narfidort']
     }
 })
 ```

docs/blog/elysia-07.md

@@ -22,12 +22,12 @@ With Eden Fetch can interact with Elysia server in a type-safe manner using Fetc
 ---
 
 First export your existing Elysia server type:
-```typescript
+```typescript twoslash
 // server.ts
 import { Elysia, t } from 'elysia'
 
 const app = new Elysia()
-    .get('/', () => 'Hi Elysia')
+    .get('/hi', () => 'Hi Elysia')
     .get('/id/:id', ({ params: { id } }) => id)
     .post('/mirror', ({ body }) => body, {
         body: t.Object({
@@ -41,15 +41,32 @@ export type App = typeof app
 ```
 
 Then import the server type, and consume the Elysia API on client:
-```typescript
+```typescript twoslash
+// @filename: server.ts
+import { Elysia, t } from 'elysia'
+
+const app = new Elysia()
+    .get('/hi', () => 'Hi Elysia')
+    .get('/id/:id', ({ params: { id } }) => id)
+    .post('/mirror', ({ body }) => body, {
+        body: t.Object({
+            id: t.Number(),
+            name: t.String()
+        })
+    })
+    .listen(3000)
+
+export type App = typeof app
+// @filename: client.ts
+// ---cut---
 // client.ts
 import { edenFetch } from '@elysiajs/eden'
 import type { App } from './server'
 
-const fetch = edenFetch<App>('http://localhost:')
+const fetch = edenFetch<App>('http://localhost:3000')
 
 // response type: 'Hi Elysia'
-const pong = await fetch('/', {})
+const pong = await fetch('/hi', {})
 
 // response type: 1895
 const id = await fetch('/id/:id', {
@@ -70,31 +87,56 @@ const nendoroid = await fetch('/mirror', {
 
 ## Error Handling
 You can handle errors the same way as Eden Treaty:
-```typescript
+```typescript twoslash
+// @filename: server.ts
+import { Elysia, t } from 'elysia'
+
+const app = new Elysia()
+    .get('/hi', () => 'Hi Elysia')
+    .get('/id/:id', ({ params: { id } }) => id)
+    .post('/mirror', ({ body }) => body, {
+        body: t.Object({
+            id: t.Number(),
+            name: t.String()
+        })
+    })
+    .listen(3000)
+
+export type App = typeof app
+
+// @filename: client.ts
+// ---cut---
+// client.ts
+import { edenFetch } from '@elysiajs/eden'
+import type { App } from './server'
+
+const fetch = edenFetch<App>('http://localhost:3000')
+
 // response type: { id: 1895, name: 'Skadi' }
-const { data: nendoroid, error } = app.mirror.post({
-    id: 1895,
-    name: 'Skadi'
+const { data: nendoroid, error } = await fetch('/mirror', {
+    method: 'POST',
+    body: {
+        id: 1895,
+        name: 'Skadi'
+    }
 })
 
 if(error) {
     switch(error.status) {
         case 400:
         case 401:
-            warnUser(error.value)
+            throw error.value
             break
 
         case 500:
         case 502:
-            emergencyCallDev(error.value)
+            throw error.value
             break
 
         default:
-            reportError(error.value)
+            throw error.value
             break
     }
-
-    throw error
 }
 
 const { id, name } = nendoroid