search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
83 stars 23 forks source link

chore: Use `swc` for dev server #969

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

This is the second of my three proposed monorepo improvements (first one being #951, third one being storybook improvements).

Previously: Every dev script was bottlenecked by yarn build in itwinui-react, which takes ~10 seconds because tsc is slow.

Now: yarn dev no longer requires yarn build in itwinui-react (it has been removed in turbo.json). Running yarn dev does two things:

  1. start swc in watch mode to transpile TS source to JS.
    • the initial build is super fast, taking a fraction of a second instead of 10. the watch mode is also reliable and fast.
  2. starts tsc compiler in watch mode to generate types only.
    • the initial build takes a couple seconds but is non-critical. the watch mode is fast enough.

This means most of our dev servers start instantly and are usable without waiting for tsc. Storybook still takes over a minute to start (because it uses webpack) and it is the only noticeably slow part of our DX. But the hot refresh is still instant.

mayank99 commented 1 year ago

yarn dev crashes if code has type errors.

I think that is the unfortunate side effect of running tsc without --watch. To avoid this problem I have removed yarn build:types.

veekeys commented 1 year ago

Have you compared swc to esbuild? Seems at least swc core has stable v1 version. It also uses chokidar for watching files and I think then it would recompile only the file changed rather than everything, which might be useful in this case. Of course, the only issue is with type files...

mayank99 commented 1 year ago

Have you compared swc to esbuild? Seems at least swc core has stable v1 version. It also uses chokidar for watching files and I think then it would recompile only the file changed rather than everything, which might be useful in this case.

I did try manually with chokidar but it was a lot of code and still not working perfectly.

Just tried with swc and it seems to work great! Thanks for the suggestion.

https://user-images.githubusercontent.com/9084735/206235754-73472202-9450-48cb-9125-48669892ad9c.mov

Of course, the only issue is with type files...

I will use tsc to generate types only. I think that should be fine.

veekeys commented 1 year ago

Have you compared swc to esbuild? Seems at least swc core has stable v1 version. It also uses chokidar for watching files and I think then it would recompile only the file changed rather than everything, which might be useful in this case.

I did try manually with chokidar but it was a lot of code and still not working perfectly.

Just tried with swc and it seems to work great! Thanks for the suggestion.

Untitled.mov

Of course, the only issue is with type files...

I will use tsc to generate types only. I think that should be fine.

Nice!! I am jealous now, cause I could not figure out why Vite app is refreshing the page even though it sees that only single file from the dependency has changed (writes in console hmr, not page reload like in other cases).