Doesn't work well with html plugin
webdevcody opened this issue · comments
I was working on an app which uses the "@elysiajs/html" plugin, but depending on where I call .use(compression()), my browser would either download a file when I load my route, or it wouldn't apply compression at all.
For example, this code just made my browser download the file
new Elysia()
.use(compression())
.use(html())but this code just never ran the compression
new Elysia()
.use(html())
.use(compression())I am doing some other things in my app, so maybe there is another issue, but my fix was the remove the html() plugin and instead directly set the content-type in my routes so allow compression to be applied.
Will have a look, ty for reporting 👍
Same happened to me a couple of hours ago
Same happened to me a couple of hours ago
Try upgrading to 0.0.5 and see if its still happen 🙏
Same happened to me a couple of hours ago
Try upgrading to
0.0.5and see if its still happen 🙏
Reinstalled 0.0.5 but same happens. Depending on where I put it, it either doesn't do anything at all, or causes the browser to download a file
Seem like I can't reproduce on my end, can you provide the code snippet for me?
Host: localhost:4000
User-Agent: insomnia/8.1.0
Accept: */*
Content-Type: text/html; charset=utf8
Content-Encoding: deflate
Date: Sat, 30 Sep 2023 06:04:09 GMT
Content-Length: 80
Here's my implementation
import { Elysia } from 'elysia'
import { html } from '@elysiajs/html'
import { compression } from 'elysia-compression'
const app = new Elysia()
.use(html())
.use(compression({ type: 'deflate' }))
.all('/', () => ({ value: 'Hello, World!' }))
.get(
'/html',
() =>
`<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>`,
)
.listen(4000)
console.log(
`Elysia is running at http://${app.server?.hostname}:${app.server?.port}`,
)
export type App = typeof appimport { Elysia } from "elysia"
import { swagger } from "@elysiajs/swagger"
import logger from "./plugins/basicLogger"
import successResponseFormatter from "./plugins/successResponseFormatter"
const app = new Elysia()
.use(logger)
.use(swagger())
.use(successResponseFormatter)
// Simulate a delay of at most one and a half second
.get("/:id", ({ params: { id } }) => Bun.sleep(Math.random() * 1_500).then(() => ({ id })))
.all("*", ({ set }) => { set.status = 404; return { success: false, error: "Not found" } })
.listen(3000)
console.log(`🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`)This is my app. I tried introducing compression at every level, and even commenting out all additional functionality, like plugins.
Maybe it's working for you because you're returning HTML and I'm returning JSON?
Somehow the content-type header is malformed
Host: localhost:3000
User-Agent: insomnia/8.1.0
Accept: */*
Content-Encoding: gzip
content-type: application/octet-stream -> should be application/json
Date: Sun, 01 Oct 2023 03:13:19 GMT
Content-Length: 30
so when you open it in the browser it will download it
The current workaround should be just setting the header explicitly
.get('/:id', ({ params: { id }, set }) => {
set.headers['Content-Type'] = 'application/json'
return Bun.sleep(Math.random() * 1_500).then(() => ({ id }))
})and now you can open it in the browser without it being downloaded with the compression applied
Should be working on 0.0.6 now
I found it wasn't playing well with the swagger plugin neither, so I chose to implement compression myself https://github.com/BTS-CM/beet_api/blob/main/src/lib/cache.ts#L17 though i'll now need to add a compression flag so swagger can spit out uncompressed data too lol