Skip to content

Commit 3f918ec

Browse files
authored
Merge pull request #282 from elysiajs/beta
1.0 beta
2 parents 4f73717 + d84a259 commit 3f918ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2142
-427
lines changed

components/blog/Layout.vue

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<h1 class="!text-3xl !md:text-4xl font-medium">
44
{{ props.title }}
55
</h1>
6-
<!-- <aside class="flex gap-3 items-center mt-4">
6+
<aside class="flex gap-3 items-center mt-4">
77
<img
88
class="w-9 h-9 rounded-full"
99
:src="profile"
@@ -19,8 +19,8 @@
1919
<a :href="twitter" target="_blank">@{{ author.twitter }}</a>
2020
</p>
2121
</div>
22-
</aside> -->
23-
<img :src="props.src" :alt="props.alt" class="w-full my-6" :class="props.shadow ? 'shadow-xl' : 'border'" />
22+
</aside>
23+
<img :src="props.src" :alt="props.alt" class="w-full mt-6 mb-2" :class="props.shadow ? 'shadow-xl' : 'border'" />
2424
<main id="blog-content">
2525
<slot />
2626
</main>
@@ -57,8 +57,6 @@ const twitter = `https://twitter.com/${author.twitter}`
5757
const mutated = ['.aside', '.content', '.content-container', '.VPDocFooter']
5858
onMounted(() => {
5959
mutated.forEach((selector) => {
60-
console.log(document.querySelector(selector))
61-
6260
document.querySelector(selector)?.classList.add('blog')
6361
})
6462
})

components/midori/hero.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
Type Safety</span>, unified type system and outstanding developer experience. Supercharged by Bun.
3939
</h3>
4040
<section class="flex flex-col sm:flex-row items-start sm:items-center w-full md:w-auto gap-4 mt-10 mb-12">
41-
<a class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" href="/introduction">
41+
<a class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full" href="/at-glance">
4242
Get Started
4343
</a>
4444
<div class="relative flex flex-1 gap-3 text-blue-500">

components/midori/index.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import Community from './community.vue'
1313
import QuickStart from './quickstart.vue'
1414
import Sponsor from './sponsor.vue'
1515
16-
1716
import '../tailwind.css'
1817
import './midori.css'
1918

components/midori/quickstart.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@
2121
<aside class="flex gap-4">
2222
<a
2323
class="text-white font-medium text-lg bg-blue-500 px-6 py-2.5 rounded-full"
24-
href="/introduction"
24+
href="/at-glance"
2525
>
2626
Introduction
2727
</a>
2828
<a
2929
class="text-blue-500 font-medium text-lg px-6 py-2.5 rounded-full hover:bg-blue-200/25 dark:hover:bg-blue-500/20 transition-colors"
30-
href="/at-glance"
30+
href="/quick-start"
3131
>
32-
At glance
32+
Quick Start
3333
</a>
3434
</aside>
3535
</section>

components/midori/sponsor.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@
3939
'[Private]'
4040
}}
4141
</p>
42-
<p
42+
<!-- <p
4343
v-if="sponsor.tier.monthlyPriceInDollars"
4444
class="text-3xl text-gray-400 bg-clip-text text-transparent bg-gradient-to-tl font-medium from-fuchsia-500 to-blue-500 mt-3 mb-1"
4545
>
4646
${{ sponsor.tier.monthlyPriceInDollars }}
47-
</p>
47+
</p> -->
4848
<p className="text-sm text-gray-500 dark:text-gray-400 my-0">
4949
{{
5050
dayjs()

docs/.vitepress/config.ts

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -128,17 +128,13 @@ export default defineConfig({
128128
text: '👋 Getting Started',
129129
items: [
130130
{
131-
text: 'Introduction',
132-
link: '/introduction'
131+
text: 'At Glance',
132+
link: '/at-glance'
133133
},
134134
{
135135
text: 'Quick Start',
136136
link: '/quick-start'
137137
},
138-
{
139-
text: 'At Glance',
140-
link: '/at-glance'
141-
},
142138
{
143139
text: 'Table of Content',
144140
link: '/table-of-content'
@@ -298,6 +294,10 @@ export default defineConfig({
298294
{
299295
text: 'Macro',
300296
link: '/patterns/macro'
297+
},
298+
{
299+
text: 'MVC model',
300+
link: '/patterns/mvc'
301301
}
302302
]
303303
},
@@ -315,16 +315,42 @@ export default defineConfig({
315315
},
316316
{
317317
text: 'Eden Treaty',
318-
link: '/eden/treaty.md'
318+
collapsed: false,
319+
items: [
320+
{
321+
text: 'Overview',
322+
link: '/eden/treaty/overview'
323+
},
324+
{
325+
text: 'Parameters',
326+
link: '/eden/treaty/parameters'
327+
},
328+
{
329+
text: 'Response',
330+
link: '/eden/treaty/response'
331+
},
332+
{
333+
text: 'Web Socket',
334+
link: '/eden/treaty/websocket'
335+
},
336+
{
337+
text: 'Config',
338+
link: '/eden/treaty/config'
339+
},
340+
{
341+
text: 'Unit Test',
342+
link: '/eden/treaty/unit-test'
343+
},
344+
{
345+
text: 'Legacy (Treaty 1)',
346+
link: '/eden/treaty/legacy.md'
347+
}
348+
]
319349
},
320350
{
321351
text: 'Eden Fetch',
322352
link: '/eden/fetch.md'
323353
},
324-
{
325-
text: 'Test',
326-
link: '/eden/test.md'
327-
}
328354
]
329355
},
330356
{
@@ -410,6 +436,10 @@ export default defineConfig({
410436
{
411437
text: 'SvelteKit',
412438
link: '/integrations/sveltekit'
439+
},
440+
{
441+
text: 'Drizzle',
442+
link: '/integrations/drizzle'
413443
}
414444
// {
415445
// text: 'Cheat Sheet',

docs/.vitepress/theme/custom.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,30 @@ button.copy::after {
8585
background-color: var(--vp-c-brand-nav-active);
8686
}
8787
}
88+
89+
& > .VPSidebarItem {
90+
@apply pl-4 mb-0.5 dark:border-l-gray-600 rounded-lg;
91+
92+
& > div {
93+
& > div {
94+
@apply pl-2 mb-0.5 dark:border-l-gray-600 rounded-lg -translate-x-2;
95+
96+
&:hover, &:focus {
97+
background-color: var(--vp-c-brand-nav-active);
98+
}
99+
100+
&.is-active.has-active {
101+
background-color: var(--vp-c-brand-nav-active);
102+
}
103+
}
104+
105+
& > .caret {
106+
&:hover, &:focus {
107+
background-color: transparent;
108+
}
109+
}
110+
}
111+
}
88112
}
89113
}
90114
}

docs/at-glance.md

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,26 @@ head:
1414
content: Designed with ergonomic design, extensive support for TypeScript, modern JavaScript API, optimized for Bun. Offers a unique experience unified type, and end-to-end type safety while maintaining excellent performance.
1515
---
1616

17+
<script setup>
18+
import Card from '../components/nearl/card.vue'
19+
import Deck from '../components/nearl/card-deck.vue'
20+
</script>
21+
1722
# At glance
23+
Elysia is an ergonomic web framework for building backend servers with Bun.
1824

19-
Elysia is designed with familiar API from Express and Fastify with extensive support for TypeScript, modern JavaScript API, and optimized for Bun.
25+
Designed with simplicity and type safety in mind with familiar API with extensive support for TypeScript, optimized for Bun.
2026

2127
Here's a simple hello world in Elysia.
2228

2329
```typescript
2430
import { Elysia } from 'elysia'
2531

2632
new Elysia()
27-
.get('/', () => 'Hello Elysia')
28-
.listen(3000)
33+
.get('/', () => 'hi')
34+
.get('/user/:id', ({ params: { id }}) => id)
35+
.post('/form', ({ body }) => body)
36+
.listen(8080)
2937
```
3038

3139
Navigate to [localhost:3000](http://localhost:3000/) and it should show 'Hello Elysia' as a result.
@@ -38,39 +46,40 @@ Elysia can outperform most of the web frameworks available today<a href="#ref-1"
3846

3947
| Framework | Runtime | Average | Plain Text | Dynamic Parameters | JSON Body |
4048
| ------------- | ------- | ----------- | ---------- | ------------------ | ---------- |
41-
| Elysia | bun | 275,063.507 | 326,868.9 | 261,729.3 | 236,592.32 |
42-
| Bun | bun | 273,634.127 | 322,071.07 | 251,679.46 | 247,151.85 |
43-
| Hono | bun | 257,532.08 | 320,757.07 | 233,769.22 | 218,069.95 |
44-
| Web Standard | bun | 242,838.703 | 288,692.76 | 226,591.45 | 213,231.9 |
45-
| Hyper Express | node | 242,045.913 | 354,697.63 | 277,109.51 | 94,330.6 |
46-
| h3 | node | 112,677.263 | 137,556.49 | 101,431.5 | 99,043.8 |
47-
| Fastify | node | 64,145.95 | 74,631.46 | 66,235.48 | 51,570.91 |
48-
| Koa | node | 38,696.13 | 44,741.88 | 39,790.11 | 31,556.4 |
49-
| Hapi | node | 28,170.763 | 42,780.44 | 15,350.06 | 26,381.79 |
50-
| Adonis | node | 23,367.073 | 22,673.54 | 21,442.97 | 25,984.71 |
51-
| Express | node | 16,301.823 | 17,974.35 | 17,090.62 | 13,840.5 |
52-
| Nest | node | 14,978.863 | 16,926.01 | 15,507.62 | 12,502.96 |
49+
| bun | bun | 262,660.433 | 326,375.76 | 237,083.18 | 224,522.36 |
50+
| elysia | bun | 255,574.717 | 313,073.64 | 241,891.57 | 211,758.94 |
51+
| hyper-express | node | 234,395.837 | 311,775.43 | 249,675 | 141,737.08 |
52+
| hono | bun | 203,937.883 | 239,229.82 | 201,663.43 | 170,920.4 |
53+
| h3 | node | 96,515.027 | 114,971.87 | 87,935.94 | 86,637.27 |
54+
| oak | deno | 46,569.853 | 55,174.24 | 48,260.36 | 36,274.96 |
55+
| fastify | bun | 65,897.043 | 92,856.71 | 81,604.66 | 23,229.76 |
56+
| fastify | node | 60,322.413 | 71,150.57 | 62,060.26 | 47,756.41 |
57+
| koa | node | 39,594.14 | 46,219.64 | 40,961.72 | 31,601.06 |
58+
| express | bun | 29,715.537 | 39,455.46 | 34,700.85 | 14,990.3 |
59+
| express | node | 15,913.153 | 17,736.92 | 17,128.7 | 12,873.84 |
5360

5461
## TypeScript
5562

56-
Elysia is built with a complex type system trying to infer every possible detail from simple path parameters to full-blown recursive instance deep merge to provide you the most out of TypeScript.
63+
Elysia is designed to help you write less TypeScript.
64+
65+
Elysia's Type System is fine-tuned to infer your code into type automatically without needing to write explicit TypeScript while providing type-safety for both runtime and compile time to provide you with the most ergonomic developer experience.
5766

5867
Take a look at this example:
5968

6069
```typescript
6170
import { Elysia } from 'elysia'
6271

6372
new Elysia()
64-
.get('/id/:id', ({ params: { id } }) => id)
73+
.get('/user/:id', ({ params: { id } }) => id)
6574
.listen(3000)
6675
```
6776

68-
The above code allows you to create a path parameter with the name of id, the value that passes after `/id/` will be reflected in `params.id`.
69-
70-
In most framework, you need to provide a generic type to the **id** parameter while Elysia understand that `params.id` will always be available and type as **string**. Elysia then infers this type without any manual type reference needed.
77+
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.
7178

7279
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.
7380

81+
TypeScript is not needed to use Elysia, but it's recommended to use Elysia with TypeScript.
82+
7483
## Unified Type
7584

7685
To take a step further, Elysia provide **Elysia.t**, a schema builder to validate type and value in both runtime and compile-time to create a single source of truth for your data-type. Elysia refers this term as **Unified Type**.
@@ -81,7 +90,7 @@ Let's modify the previous code to accept only a numeric value instead of a strin
8190
import { Elysia, t } from 'elysia'
8291

8392
new Elysia()
84-
.get('/id/:id', ({ params: { id } }) => id, {
93+
.get('/user/:id', ({ params: { id } }) => id, {
8594
params: t.Object({
8695
id: t.Numeric()
8796
})
@@ -105,7 +114,7 @@ import { swagger } from '@elysiajs/swagger'
105114

106115
new Elysia()
107116
.use(swagger())
108-
.get('/id/:id', ({ params: { id } }) => id, {
117+
.get('/user/:id', ({ params: { id } }) => id, {
109118
params: t.Object({
110119
id: t.Numeric()
111120
})
@@ -127,7 +136,7 @@ import { swagger } from '@elysiajs/swagger'
127136

128137
const app = new Elysia()
129138
.use(swagger())
130-
.get('/id/:id', ({ params: { id } }) => id, {
139+
.get('/user/:id', ({ params: { id } }) => id, {
131140
params: t.Object({
132141
id: t.Numeric()
133142
})
@@ -141,19 +150,39 @@ And on your client-side:
141150
142151
```typescript
143152
// client.ts
144-
import { edenTreaty } from '@elysiajs/eden'
153+
import { treaty } from '@elysiajs/eden'
145154
import type { App } from './server'
146155

147-
const app = edenTreaty<App>('http://localhost:3000')
156+
const app = treaty<App>('http://localhost:3000')
148157

149-
// data is typed as number
150-
const { data } = await app.id['177013'].get()
158+
// Get data from /user/617
159+
const { data } = await app.user({ id: 617 }).get()
151160
```
152161

153162
With Eden, you can use the existing Elysia type to query Elysia server **without code generation** and synchronize type for both frontend and backend automatically.
154163

155164
Elysia is not only about helping you to create a confident backend but for all that is beautiful in this world.
156165

166+
## Platform Agnostic
167+
168+
Elysia was designed but was **not limited to Bun**. Being [WinterCG compliant](https://wintercg.org/) allows you to deploy the Elysia server on Cloudflare Worker, Vercel Edge Function, and most other runtimes that support Web Standard Request.
169+
170+
## Our Community
171+
172+
If you have questions or get stuck about Elysia, feel free to ask our community on GitHub Discussions, Discord, and Twitter.
173+
174+
<Deck>
175+
<Card title="Discord" href="https://discord.gg/eaFJ2KDJck">
176+
Official ElysiaJS discord community server
177+
</Card>
178+
<Card title="Twitter" href="https://twitter.com/elysiajs">
179+
Track update and status of Elysia
180+
</Card>
181+
<Card title="GitHub" href="https://github.com/elysiajs">
182+
Source code and development
183+
</Card>
184+
</Deck>
185+
157186
---
158187

159188
<small id="ref-1">1. Measure in requests/second. The benchmark for parsing query, path parameter and set response header on Debian 11, Intel i7-13700K tested on Bun 0.7.2 on 6 Aug 2023. See the benchmark condition [here](https://github.com/SaltyAom/bun-http-framework-benchmark/tree/c7e26fe3f1bfee7ffbd721dbade10ad72a0a14ab#results).</small>

docs/blog.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ head:
2525
<Blogs
2626
:blogs="[
2727
{
28-
title: 'Introducing support for Scalar - Elysia',
29-
href: '/blog/elysia-scalar',
30-
detail: 'We are changing API documentation provider to Scalar instead of Swagger UI by default. Scalar is a modern, beautiful API references for OpenAPI compatible, and customizable built on-top of Vue. Elysia now ship @elysia/swagger package by using Scalar as a default provider, with option to switch back to Swagger UI if need.'
28+
title: 'Elysia 1.0 - Lament of the Fallen',
29+
href: '/blog/elysia-10',
30+
detail: 'Introducing Sucrose, a better static code analysis engine, improved starts up time up to 14x, remove 40 routes/instance limitation, faster type inference up to ~3.8x, Eden Treaty 2, Hook type (breaking change), and inline error for strict type check.'
3131
},
3232
{
3333
title: 'Introducing Elysia 0.8 - Gate of Steiner',

0 commit comments

Comments
 (0)