Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't work well with html plugin #2

Closed
webdevcody opened this issue Sep 14, 2023 · 11 comments · Fixed by #5
Closed

Doesn't work well with html plugin #2

webdevcody opened this issue Sep 14, 2023 · 11 comments · Fixed by #5
Assignees
Labels
bug Something isn't working

Comments

@webdevcody
Copy link
Contributor

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.

@Gusb3ll
Copy link
Owner

Gusb3ll commented Sep 18, 2023

Will have a look, ty for reporting 👍

@Gusb3ll Gusb3ll added the bug Something isn't working label Sep 18, 2023
@Gusb3ll Gusb3ll self-assigned this Sep 18, 2023
@M-Gonzalo
Copy link

Same happened to me a couple of hours ago

@Gusb3ll
Copy link
Owner

Gusb3ll commented Sep 29, 2023

Same happened to me a couple of hours ago

Try upgrading to 0.0.5 and see if its still happen 🙏

@M-Gonzalo
Copy link

Same happened to me a couple of hours ago

Try upgrading to 0.0.5 and 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

@Gusb3ll
Copy link
Owner

Gusb3ll commented Sep 30, 2023

Seem like I can't reproduce on my end, can you provide the code snippet for me?

image
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 app

@M-Gonzalo
Copy link

@Gusb3ll

import { 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?

@Gusb3ll
Copy link
Owner

Gusb3ll commented Oct 1, 2023

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

@Gusb3ll
Copy link
Owner

Gusb3ll commented Oct 1, 2023

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

image

@SaltyAom
Copy link
Contributor

SaltyAom commented Oct 1, 2023

#5, please make sure to have compression plugin use after HTML plugin

@Gusb3ll Gusb3ll closed this as completed in #5 Oct 1, 2023
@Gusb3ll Gusb3ll reopened this Oct 1, 2023
@Gusb3ll
Copy link
Owner

Gusb3ll commented Oct 1, 2023

Should be working on 0.0.6 now

@Gusb3ll Gusb3ll closed this as completed Oct 1, 2023
@grctest
Copy link

grctest commented Oct 19, 2023

I found it wasn't playing well with the swagger plugin neither, so I chose to implement compression myself https:/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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants