121–130 of 163 posts
I am a big fan of Vite. But I have zero clue what those other tools are. I swear to God, I just put my head down to do some work and all the sudden, frontend tooling has evolved. I wonder if there is a push towards a "boring but works" stack.
I love Vite, Vitest, Oxlint and Oxfmt and look in their direction for most of my new projects! I hope these folks manage to get a bunch of money and can fund the continued development for at least the next decade. Sure beats opening some ancient project and seeing some mix of Gulp, Grunt, webpack and a bunch of other disjointed stuff (I migrated that one over to also use the newer stack).
Making all this (for example) work nicely together can be tricky: Vite, ESLint, Prettier, Typescript and React, especially if it's full stack with SSR. If you only focus on the front-end and remove Typescript from the equation it becomes easy enough. We'll have to see if Vite+ helps for the more complex cases.
Although about 98%* of that is because ESLint keeps making breaking changes and getting everything else to work compatibly with ESLint requires 27,573* additional dependencies.
Things I work on have been moving over to Biome recently (mostly these are Vue projects rather than React these days) for formatting and linting and it's so much simpler and avoids all the "What ESLint-related package broke our build process this week?" discussions entirely.
*Some numbers here may be made up. Or they might not.
Earlier quoted context omitted.
I don't get how a test runner can be "ultra fast". Surely all the time is taken by the tests, not calling the test functions?
Say this again when you have worked with Jest, one of the worst and slowest pieces of software I've ever worked with.
I think they should find a better name for this project. I find it very confusing since it's not really a better Vite. At the time Void Zero was probably looking to monetize the Vite brand but now that they've been acquired by Cloudflare they don't need to do that anymore.
> I think they should find a better name for this project. Need another plus? Vite++
I am a big fan of Vite. But I have zero clue what those other tools are. I swear to God, I just put my head down to do some work and all the sudden, frontend tooling has evolved. I wonder if there is a push towards a "boring but works" stack.
That's what I liked from Bun's proposition. A single binary that just works. Hopefully the others take notice.
Earlier quoted context omitted.
> But I have zero clue what those other tools are. The incorporated tools are actually really amazing: - vitest, an ultra fast test runner. After using a lot of others, including jest and node's built in one, I love vitest. - oxlint, replaces eslint but is compatible with its file format and ultra fast, since it isn't written JavaScript. I tried biome, but I found oxlint to have more rules and the eslint compatibilit…
I don't get how a test runner can be "ultra fast". Surely all the time is taken by the tests, not calling the test functions?
Earlier quoted context omitted.
I wish Oxfmt supported plugins. Prettier's plugin API is one of the worst APIs I've ever worked with. I'm eager to switch to a different formatter with a better plugin API (and I need plugins).
I was excited about Oxfmt until I tried it and found that it's mostly intended to be a Prettier replacement. Ugh.
Earlier quoted context omitted.
I transpile for prod, but use --strip-types when running in dev, and all I had to do was to make a 10-line ESM register hook that rewrites .js to .ts if the .js import fails, and then a one-liner import register trampoline script. Not sure I'd do that in prod, but works fine in dev at least. This way I could just use node --watch instead of tsx or nodemon.
Mind sharing the implementation? I think it's basically what tsx is doing when used in `node --import tsx`.
// ---- dev-ts-resolve.js
export async function resolve(specifier, context, nextResolve) {
try {
return await nextResolve(specifier, context);
} catch (err) {
const isRelative = specifier.startsWith('./')
|| specifier.startsWith('../')
|| specifier.startsWith('/')
|| specifier.startsWith('file:');
if (err?.code === 'ERR_MODULE_NOT_FOUND' && isRelative && specifier.endsWith('.js')) {
return nextResolve(`${specifier.slice(0, -3)}.ts`, context);
}
throw err;
}
}
// ---- dev-loader.js
import { register } from 'node:module';
register('./dev-ts-resolve.js', import.meta.url);
// ----
node --import ./dev-loader.js --watch-path=./src