stream-chat-react icon indicating copy to clipboard operation
stream-chat-react copied to clipboard

chore: streamline build pipeline

Open myandrienko opened this issue 3 months ago • 2 comments

🎯 Goal

Our build pipeline contained some quirks and the remains of previous setups. It was time to clean it up :)

🛠 Implementation details

The main changes are:

No rollup. Previously our build pipeline was implemented in rollup. To simplify things up, we now just run a couple of processes in parallel: tsc to build our normal distribution and type declarations, esbuild to build bundles, and a shell script to include assets in the distribution.

For development, just tsc --watch is enough.

No babel. Previously our rollup config included babel transpilation with babel-preset-env. That means we included babel-runtime in our distribution, and transpiled async functions into generators with the notorious regenerator-runtime.

Babel is now excluded from the build process (but still used as a parser for JS files in eslint). Targeting ES2020 in tsc and esbuild should be enough. And we finally have regular async functions in our distribution :)

Esbuild for bundles.. We now use esbuild instead of rollup for creating browser and CJS bundles.

In general, bundles are probably something we don't need provide, since almost everyone using React is using a bundler on their side. But removing them will be a breaking change, so at least we can make bundling faster :)

TS5. I used this opportunity to bump TypeScript version as well :)

Also, removed webpack and postcss dependencies - they were not used at all.

Some ideas for the future

  1. Bump prettier, eslint and eslint plugin versions. Will result in a lot of warnings, but good for future-proofing.
  2. Review our eslintrc, it's currently a bit of a mess.
  3. Remove babel completely, use typescript-eslint instead.
  4. Switch to "module": "NodeNext" in tsconfig. This is the new recommended option for libraries, but will require us to add extensions to all of our import statements, to make them fully qualified.
  5. (breaking change) With "module": "NodeNext" we will be ready to add "type": "module" in our package.json. We can't do that now, because fully specified import statements are expected from module packages.
  6. (breaking change) Drop all bundles. CJS bundle is kinda weird anyway. Browser bundle can be replaced by <script type="module">.

myandrienko avatar Mar 14 '24 16:03 myandrienko