Tsdx: extend rollup configuration

[daniele-zurico]

Current Behavior

At the moment there's no way to add other configurations to rollup. In my case I would like to add support to css modules but this is not possible because it require a configuration in rollup as well

Desired Behavior

Extend rollup config

[hedgerh]

it would be nice if there was a way to extend the config if needed, particularly when it comes to adding rollup plugins or babel plugins. is there a reason this wouldn't be a good feature? i wouldn't mind picking this up if it could be added.

[sw-yx]

i like this, tho its not my call

[daniele-zurico]

They’re different one ask for scss support the other one is extendible rollup config that open to more opportunities ... something like —eject

[hedgerh]

I think it falls under this. If tsdx exposed a way to customize the rollup config, you could add scss or postcss support by adding your own rollup plugins.

I'm very much in favor of this feature, though. I've been having to use react-app-rewired on some CRA projects and its annoying to not have it built-in. Plus, I can't think of any real reasons to not let people customize things when they need to.

Some possible implementations:

• Expose an API for changing/adding to different parts of the config a la customize-cra - (addBabelPlugin/addBabelPreset, for example)

• Let them pass tsdx a file that exports a function that takes the config as input and returns a transformed version. This would give them the most control. Only tricky part would be if they wanted to override settings on the rollup plugins tsdx uses out of the box.

• Both? A hybrid of both?

[andrico1234]

I'd like to +1 this feature. The primary struggle I've come across when using this package (which has otherwise been a delight), is the lack of capability to extend the babel-config. This has caused issues when it's come to styling.

The docs say that TSDX has no opinion on styling, but with my experience, the lack of babel extending really limits what I'm able to accomplish. Emotion requires a babel plugin, styled-components requires one too for SSR, debugging and minification, plugins are needed for scss too, the list goes on.

I'd like for a little more flexibility when it comes to project config.

[wachunga]

I would like to use the serve rollup plugin. Is there at least a workaround for now?

[sw-yx]

in general you can always use https://github.com/ds300/patch-package to tweak internals of any node_modules you're using. i'm not jared so i cant promise if this feature request is even accepted at all, but this kind of thing is extremely common in any tool that does bundling (even CRA has multiple options to tweak the config :) ) so i imagine it will eventually happen.

[jaredpalmer]

Yeah. Just haven't had the time to deal with it. I have built this for backpack and razzle before. From an implementation perspective, it would should be a file called:./tsdx.config.js at the root. That file should work like this:

// tsdx.config.js
const myrollupplugin = require('myrollupplugin');

module.exports = {
  rollup(config, options) { 
   config.boop.blah.push(myrollupplugin({ foo: true }));
   return config
  }
}

We need to add it to our paths file. We also then just need to call it prior to executing the actual build/watch and pass it in the config and options.

_We could also debate allowing an overload on the rollup key where if it is just and object and not a function, we do a deep merge (i think storybook does something like this?)._

For babel, we should pickup on local .babelrc if present and replace our own with it. We shold also expose some kind of babel-preset-tsdx package or tsdx/babel.js export so that people can extend it (instead of having to fully replace it). This may be a slight challenge because of our error extractor stuff which is dependent on paths (at build time).

I think our eslint and jest stuff is already customizable so we are gucci on that.