typescript-is icon indicating copy to clipboard operation
typescript-is copied to clipboard

Vite Support

Open brillout opened this issue 4 years ago • 13 comments

I supporting https://vitejs.dev something you're interested in?

So that users can simply:

// vite.config.js

import { typescriptIs } from 'typescript-is/vite-plugin'

export default {
  plugins: [typescriptIs]
}

brillout avatar Jul 22 '21 13:07 brillout

@brillout I know it's been a while since you made this comment, but I would love something like this. How would you go about implementing that? Any pointers?

lukasluecke avatar Feb 17 '22 15:02 lukasluecke

Vite uses esbuild to prebundle dependencies and to transpire code on the fly in dev mode. Esbuild does not parse type information. Therefore typescript-is can't work there. You would need to replace esbuild with typescript which will hugely slow down dev experience

Fuzzyma avatar Feb 17 '22 15:02 Fuzzyma

I was assuming that @brillout had some solution in mind when proposing this.

I'm currently comparing a bunch of libraries for this, some using babel macros, some based on typescript, etc. - just trying to find out how each of them could be integrated in a Vite project 🙂 I would actually be fine with having generating the typeguards be a separate process as well, so might look into how that would work.

lukasluecke avatar Feb 17 '22 15:02 lukasluecke

I think there is a competitor to this lib that is doing it as build process. It has its own gotchas but it would work I guess.

Also: the rust compiler swc does parse types and is probably as fast as esbuild. Writing a plug in for swc might work. Evan himself gave that advice when I asked him about that :)

Fuzzyma avatar Feb 17 '22 15:02 Fuzzyma

@lukasluecke What's your use case?

@Fuzzyma A strategy is to apply typescript-is's transfomer only for a couple of files, then performance is not an issue. For example only for .telefunc.js files (when using Telefunc).

In general, if it works for webpack, I don't see any reason why it wouldn't work for Vite.

brillout avatar Feb 17 '22 15:02 brillout

@Fuzzyma Do you know which competitor that is by any chance? Might be another one to add to my list of candidates 😁

Yeah I'm not really looking to switch to swc at the moment, at least not for just this.

lukasluecke avatar Feb 17 '22 15:02 lukasluecke

@brillout Yeah that was one of my ideas as well, but I'm not sure if it needs to "transform" all files that contain types referenced in the guard - or if it is able to traverse them automatically.

Use case is basically validating some JSON loaded externally against MUI theme schema (and some custom types). Would love to have it based on the types, instead of something like JSON schema.

lukasluecke avatar Feb 17 '22 15:02 lukasluecke

Lib: https://github.com/rhys-vdw/ts-auto-guard

Ofc webpack can do it. So can roll up. They both use typescript under the hood to accomplish that. But as esbuild made painfully clear: build tools ate awfully slow and you don't really want typescript in your build chain. However, a watcher process that would only compile those files on change might work because that change would be picked up by vite and trigger a reload or hmr

Fuzzyma avatar Feb 17 '22 15:02 Fuzzyma

@Fuzzyma Thank you!

lukasluecke avatar Feb 17 '22 15:02 lukasluecke

@lukasluecke Exhaustive list: https://github.com/akutruff/typescript-needs-types. Let me know if you find something suitable for Vite.

@Fuzzyma You may want to use esbuild for node_modules but for user code using a slower transpiler is not a problem since Vite transpiles in a lazy fashion.

brillout avatar Feb 17 '22 16:02 brillout

@brillout i am sure you would totally feel the difference. There is a reason why vite is a bliss to use. But ofc there is no other reason not to do it

Fuzzyma avatar Feb 17 '22 16:02 Fuzzyma

Any upgrade? Or anyone can teach me how to setup it with vite?

yinzixie avatar Mar 18 '22 23:03 yinzixie

@yinzixie https://github.com/samchon/typescript-json#vite

samchon avatar Oct 10 '22 15:10 samchon