Edge or TSX, the choice is hard

[Barbapapazes]

Hello,

I'm working on a project with v6 and I'm using TSX. It's cool because it's type safe and it's very easy to use JS tools like CVA, https://cva.style/docs.

But because of that, the server needs to restart on every save which takes times (4 to 5 seconds), see adonisjs/vite#8 (comment).

On the other hand, using Edge provide fast feedbacks (under a second to have a page reload) because only the page reloads. But using it, I loose type safe and CVA.

Loosing the type safety is ok but CVA is impossible since it's very convenient for styling.

How do you style and create variant for component in Edge and could it be possible to use CVA with Edge? How do you use it in real world?

[Julien-R44]

But because of that, the server needs to restart on every save which takes times (4 to 5 seconds)

4/5 seconds is not correct. Based on your results, it's more like 1.8 seconds maximum. which is already strange because I only have something like 700/800ms.

about that issue : we will probably have a better-performing version tonight.

But even putting that aside, as mentioned in the issue, we're experimenting with solutions to get cache busting and thus avoid a full server reload when a TSX file is changed. Just need to be a little patient 🙂

How do you style and create variant for component in Edge and could it be possible to use CVA with Edge? How do you use it in real world?

You can use CVA with edge.

import { cx, cva } from 'class-variance-authority'

edge.global('cva', function (base, config) {
  return cva(base, config)
})

@let(
  button = cva('button', {
    variants: {
      color: {
        yellow: 'bg-yellow',
      },
    },
  })
)

<button class="{{ button({ color: $props.get('color') }) }}">
  {{{ await $slots.main() }}}
</button>

[Barbapapazes]

4/5 seconds is not correct.

2 seconds for the server to restart, 1 for the browser to reload and 2 seconds to get CSS (maybe a bug of something else but that's what my network tab says). But anyway, you're working hard on it and pushing TSX is so good, really! Thanks a lot for this.

I'll wait 🐈

Thanks for the examples for CVA, really clear 👌

[muco-rolle]

I haven't closely look at this project(https://hwy.dev/) yet; however, it has implemented hot reload for JSX in Hono using SSE. I'm unsure of its functionality or how it differs from how it can in AdonisJS.

• https://github.com/hwy-js/hwy/blob/main/packages/dev/src/server-sent-events.ts

[Julien-R44]

After a quick look, this is not hot reload at all. it's exactly like us: if a change is detected, then the whole server is reloaded, and the SSE are there to notify the browser that it must reload its page. With AdonisJS, Vite has this role (sending an event to the browser).

• https://github.com/hwy-js/hwy/blob/9dc6f04560dd340f0512e59e508458ec220a923e/packages/build/src/dev-serve.ts#L76
• https://github.com/hwy-js/hwy/blob/9dc6f04560dd340f0512e59e508458ec220a923e/packages/dev/src/dev-init.ts#L13

but thanks for sharing!

[muco-rolle]

Okay got it! Thanks for clarification