Vitejs support Aurelia2 and 1?

vNext
1

Will there by supported added for Vite.

Seems like it’s getting quite popular, I think it’s the default for Vue3 for example.

2 Likes
2

ViteJS definitely is gaining more and more traction. What I’ve heard/read about it, is that it’s especially performant/useful for large web/SPA projects/teams, exactly the same use case/target audience that applies to Aurelia, if I’m correct. :smiley:

3

i’ve just started to work on a little rpg game with phaserjs and noticed the boilerplate I’m using is building on vite. dev server startup 0.450 secs. ok thats really fast :slight_smile:

4

I took a quick look at this and I got a very very basic example working. A lot of things are broken though, but the dev server runs at least.

4 Likes
5

@Sayan751 @rowellx68 @jwx @brandonseydel I tried to add the @route decorator and it didn’t work.

what do we need to do to support vite? do we need to teach it something about aurelia v2?

6

i’m meanwhile using the shown config for a phaser game. I guess the incompatibilities are due to the aurelia rollup plugin where we need to adapt a few parts.

What I’ve discovered so far is:

  • components need to be explicitely defined via decorators, no template autoloading
  • issue with property inject tokens
  • typescript sourcemaps are off and showing wrong linenumbers
7

@zewa666 I’m starting to use Vue 3 with Vite at work and I remember seeing your last item as a problem too, check this open Vite issue Debugging vite+vue+typescript is broken using vscode (and webstorm). Breakpoint on incorrect line numbers - #5916. Breakpoint on incorrect line numbers) and there’s also someone else with the same problem with React too so it’s probably related. Actually there’s also another open issue #5834 for the same problem and even Svelte is mentioned so yeah pretty much every frameworks lol

1 Like
8

thx @ghiscoding for the links. well on one hand its good that its not related most likely to Aurelia, on the other hand this is such a major anoyance that I dont get how one could work with Vite on a more serious project without debugging

9

@dwaynecharrington I see we use rollup to build the aurelia npm packages, do you think you could help create the perfect rollup config for an aurelia 2 and or 1 application?

1 Like
10

@dwaynecharrington @jwx @Sayan751 @brandonseydel any updates on this?

11

@huochunpeng looked into it and there are severe differences between dev time (esbuild) and prod (rollup) which cause lots of troubles sadly. some of the issues are imminent to Vite itself, some due to how we bundle templates inside js

12

is this something that can be overcome?

1 Like
13

You can vite for dev and webpack for prod without issues.

1 Like
14

Very engineering solution: not perfect but very practical :+1:

15

how does one do this? as the example we played with above from @rowellx68 does not work correctly.

16

This one only works in dev mode (esbuild).
Production mode (rollup) doesn’t work.

Rollup (or Vite) made some assumption I didn’t know how to customise. I didn’t look very deep into Rollup and Vite’s plugin architecture. Sorry, I don’t have not enough desire/interest to spend my spare time there.

1 Like
17

Hi, thanks for that, did you try with the router? @rowellx68 got a basic working version also but as you start to add things like the router it doesn’t work.