🎉 feat: html plugin with jsx

SaltyAom · SaltyAom · commit 4608b6d7f563 · 2023-09-08T13:16:23.000+07:00
diff --git a/docs/plugins/html.md b/docs/plugins/html.md
@@ -15,7 +15,7 @@ head:
 ---
 
 # HTML Plugin
-This plugin adds shortcut for returning HTML
+Return [**JSX**](#jsx), and HTML with proper HTML headers automatically
 
 Install with:
 ```bash
@@ -27,8 +27,7 @@ Then use it:
 import { Elysia } from 'elysia'
 import { html } from '@elysiajs/html'
 
-const page = `<!DOCTYPE HTML>
-<html lang="en">
+const page = `<html lang="en">
     <head>
         <title>Hello World</title>
     </head>
@@ -40,11 +39,52 @@ const page = `<!DOCTYPE HTML>
 new Elysia()
     .use(html())
     .get('/', () => page)
-    .get('/html', ({ html }) => html(page))
     .listen(8080)
 ```
 
-This plugin detects if the string is started with `<!DOCTYPE HTML>`, it will add `Content-Type: text/html; charset=utf8` to the response header
+If any html tag is returned, response will be treat as HTML response automatically
+
+## JSX
+Starting from HTML plugin > 0.6.1, you can directly use JSX to create, and return HTML automatically.
+
+### Setup
+To utilize JSX, modify the tsconfig.json as the following:
+```json
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxImportSource": "ElysiaJSX"
+  }
+}
+```
+
+and that's it! 🎉
+
+You can now use JSX to define your web page and Elysia will turns them to HTML automatically.
+
+```tsx
+// app.tsx
+import { Elysia } from 'elysia'
+import { html } from '@elysiajs/html'
+
+new Elysia()
+    .use(html())
+    .get('/', () => (
+        <html lang="en">
+            <head>
+                <title>Hello World</title>
+            </head>
+            <body>
+                <h1>Hello World</h1>
+            </body>
+        </html>
+    ))
+    .listen(8080)
+```
+
+::: tip
+To use JSX, don't forget to rename your file extension to either `.tsx` or `.jsx`
+:::
 
 ## Handler
 Below are the value added to the handler.
@@ -56,3 +96,25 @@ Type:
 ```typescript
 html(value: string) => Response
 ```
+
+#### Example:
+Although we recommended relying on automatic response, but you can optionally you can return explictly return any string with HTML header.
+
+```typescript
+import { Elysia } from 'elysia'
+import { html } from '@elysiajs/html'
+
+const page = `<html lang="en">
+    <head>
+        <title>Hello World</title>
+    </head>
+    <body>
+        <h1>Hello World</h1>
+    </body>
+</html>`
+
+new Elysia()
+    .use(html())
+    .get('/', ({ html }) => html(page))
+    .listen(8080)
+```
