Material-ui: Publish non-transpiled code as part of release

[stevewillard]

Is there any possibility that as part of the release process, the ES2015 Components can be included as part of the published NPM artifacts?

I'm working in a large React app, which is already doing transpiling and I don't want the babel transform-runtime as part of every component (babel-polyfill is already in the bundle). My primary motivation is reducing bundle size. In other libraries (react-router the ES2015 is built into an es folder, which assumes you're using a bundler that can understand these modules.

This might be as easy as writing a copy task from src to es although I haven't look into your build process too deeply.

[oliviertassinari]

Have a look at #5533. That might help.

[stevewillard]

I'm actually already importing components directly, and that definitely helped quite a bit. Material-ui is still by far the largest dependency in my chunks, so I'm looking for more I can do.

[oliviertassinari]

I don't want the babel transform-runtime as part of every component (babel-polyfill is already in the bundle).

Oh, I have missed that part of the issue description. In that case, you need the external-helpers alongside the babel-polyfill. That article is worth reading on the topic.

I have been looking at the es folder of react-router and react-bootstrap, that wasn't helpful.

react-boostrap is referencing to the babel-runtime

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import classNames from 'classnames';
import React from 'react';

//...

react-router is duplicating every helpers...

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React from 'react';
import warning from './routerWarning';
import invariant from 'invariant';
import { routerShape } from './PropTypes';

// ...

I think that we should expose the source code of our component as we were doing at the beginning.

[mbrookes]

I think that we should expose the source code of our component as we were doing at the beginning.

A bigger package size for a smaller build size is a fair trade off.

[oliviertassinari]

We are now publishing a es version of the library on the v1-alpha branch. I'm not aware of any library publishing the source code too (for consumption). I think that relying on babel-runtime is a tradeoff worth taking given that everybody is doing it. I would be happy to discuss that matter further with new elements. For now, I'm closing the issue.

[NeoLegends]

Would be great if the components themselves would be published as ES6 modules as well. Right now the index.es.js simply reexports the compiled files (with module bloat attached).

Even better would be not depending on any polyfills / transpilers at all and let the users do the polyfilling / transpiling according to their needs. Evergreen browsers (especially the ones with ES modules support) don't need much polyfilling / transpiling anymore, so one can shift focus on file size.

[oliviertassinari]

@NeoLegends This makes sense. We could publish a /src folder with our source code after applying some needed transformation, like removing flow and generating the propTypes. This is not something I will work on as I believe most of our users won't rely on it. But I'm open accepting a PR in this direction.

[stevewillard]

That sounds great. I would definitely take advantage of that.

[NeoLegends]

@oliviertassinari I just forked the project to adapt the build process - however, I'm kinda stuck here. Could you explain roughyl how the build process works and where I could hook into?

[NeoLegends]

@oliviertassinari Got a PR lined up: https://github.com/callemall/material-ui/pull/8772