aurelia / new

The Aurelia 2 scaffolding repo used by our tools to setup new projects.
MIT License
35 stars 18 forks source link

vite+vitest setup #108

Closed 3cp closed 1 month ago

3cp commented 2 months ago

Default app is moved to vite+vitest setup. Default plugin is still with webpack, as there is some trouble for vite with plugin right now. See comments in before.js.

3cp commented 2 months ago

Can be tested with

npx makes aurelia/new#vite
3cp commented 1 month ago

I cannot reproduce the same vite issue on windows 11. The CI uses windows server 2022, which is closer to windows 10 than windows 11.

However I do encounter an issue with vitest on windows 11. The vitest failed with:

> npm test
...
Error: ENOENT: no such file or directory, open 'C:\src\my-app.html'

cc @bigopon, please have a play with vitest on windows 11.

bigopon commented 1 month ago

Thanks @3cp , nice work on the ability to makes branch. Will test it soon when I get back to my computer.

3cp commented 1 month ago

What I do know for now:

Vite touched imports in the output js of our vite conventions plugin. It changed

import { customElement } from "aurelia_runtime-html";
import * as __au2ViewDef from "./my-app.html";

To

import { customElement } from "/node_modules/.vite/deps/@aurelia_runtime-html.js?v=aa10f352";
import * as __au2ViewDef from "/src/my-app.html?import";

Then the vite/vitest dev server serves those contents through "root" folder. The root is defined in vitest.config test.root. No explicit root is needed for vite.config, I guess that's because of browser env.

It seems only vitest+windows has issue with our "/src/my-app.html?import", note the my-app.html?import is the compiled js code, you can find it in browser dev console.

Note it doesn't have issue with "/src/my-app.ts" (the import in my-app.spec.ts which happens before the html import). Would be something with our vite plugin, but only on windows :-(

3cp commented 1 month ago

vite-plugin PR created for the above issue.

bigopon commented 1 month ago

It seems to work fine with latest dev version (that includes the vite plugin fix)

# Next time, you can try to create similar project in silent mode:
npx makes aurelia new-project-name -s dev,typescript,vitest
 ✓ test/my-app.spec.ts (1)
   ✓ my-app (1)
     ✓ should render message

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  23:22:06
   Duration  10.44s (transform 121ms, setup 0ms, collect 354ms, tests 39ms, environment 8.65s, prepare 850ms)
3cp commented 1 month ago

Have to wait for another "latest" release, then retest the ci.

Not sure about the vite error on the windows server 2022.

3cp commented 1 month ago

GitHub CI still failed Windows Server 2022 with an error I cannot reproduce on Windows 11.

bigopon commented 1 month ago

From the look of the stack trace, it's not clear at all how/why our plugin influenced the error. Will it have the same issue if we just use vite without our plugin at all? Is that testable?

3cp commented 1 month ago

Not sure if you can replicate the error with a simple vite app without au2.

3cp commented 1 month ago

I have not tried, sounds doable.

3cp commented 1 month ago

I cannot reproduce the vite + Windows server 2022 error locally on Windows 11 :-(

error during build: [vite:build-html] The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "../../../../../../runneradmin/AppData/Local/Temp/test-skeletons/app-latest-vite-typescript-css-no-unit-tests-playwright-app-min-browser-evergreen/index.html".

3cp commented 1 month ago

The windows problem might be something to do with mklink in windows, some folder was a "symlink" in that windows server 2022.

I will try different e2e folder.

bigopon commented 1 month ago

Nice @3cp 🎉