Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

extend rollup configuration #110

Closed
daniele-zurico opened this issue May 24, 2019 · 8 comments · Fixed by #183
Closed

extend rollup configuration #110

daniele-zurico opened this issue May 24, 2019 · 8 comments · Fixed by #183
Labels
help wanted Extra attention is needed kind: feature New feature or request

Comments

@daniele-zurico
Copy link

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
Copy link
Contributor

hedgerh commented May 24, 2019

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.

@swyxio
Copy link
Collaborator

swyxio commented May 24, 2019

i like this, tho its not my call

@daniele-zurico
Copy link
Author

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

@hedgerh
Copy link
Contributor

hedgerh commented Jun 1, 2019

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
Copy link

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
Copy link

wachunga commented Aug 4, 2019

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

@swyxio
Copy link
Collaborator

swyxio commented Aug 5, 2019

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed kind: feature New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants