Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enable JSX Templating in ElysiaJS

Browse Source
This commit is contained in:
Caleb Braaten 2024-01-30 16:21:27 -08:00
parent 6f0c4620d7
commit cc8fe27935
6 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

3
package.json
View File

@ -3,9 +3,10 @@
"version": "1.0.50", "version": "1.0.50",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "bun run --watch src/index.ts" "dev": "bun run --watch src/index.tsx"
}, },
"dependencies": { "dependencies": {
"@elysiajs/html": "^0.8.0",
"elysia": "latest" "elysia": "latest"
}, },
"devDependencies": { "devDependencies": {

14
src/frontend/index.html
View File

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./htmx.min.js"></script>
<title>Caleb's Blog</title>
</head>
<body>
<h1>Hello</h1>
<button hx-get="/content/post">Click Me</button>
</body>
</html>

17
src/frontend/index.tsx Normal file
View File

@ -0,0 +1,17 @@
export function Index() {
return (
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="./htmx.min.js"></script>
<title>Caleb's Blog</title>
</head>
<body>
<h1>Hello</h1>
<button hx-get="/content/post">Click Me</button>
</body>
</html>
)
}

11
src/index.ts → src/index.tsx
View File

@ -1,7 +1,10 @@
import { Elysia } from "elysia"; import { Elysia } from "elysia";
import { html } from "@elysiajs/html";
import { Index } from "./frontend/index";
const app = new Elysia() const app = new Elysia()
.get("/", () => Bun.file("./src/frontend/index.html")) .use(html())
.get("/", () => Index())
.get('/htmx.min.js', () => Bun.file("./src/frontend/htmx.min.js")) .get('/htmx.min.js', () => Bun.file("./src/frontend/htmx.min.js"))
.get("/content/post", () => "I'm from the server") .get("/content/post", () => "I'm from the server")
.listen(3000); .listen(3000);
@ -9,9 +12,3 @@ const app = new Elysia()
console.log( console.log(
`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}` `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
); );
function ssr() {
let appShell = Bun.file('./src/frontend/shell.html').text()
return appShell
}

8
tsconfig.json
View File

@ -13,11 +13,11 @@
/* Language and Environment */ /* Language and Environment */
"target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ "target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */ "jsx": "react", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ "jsxFactory": "Html.createElement", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ "jsxFragmentFactory": "Html.Fragment", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
@ -98,6 +98,6 @@
/* Completeness */ /* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */ "skipLibCheck": true
} }
} }