Add /esm build #791

lencioni · 2017-10-23T21:54:12Z

This ES modules build will make these modules smaller in the final
bundles, since the way Babel compiles import to require is pretty
verbose. Additionally, it will enable webpack to make some optimizations
on the final bundle, including tree-shaking and scope hoisting (if
enabled). These will improve bundle sizes and runtime performance.

I considered adding a module field to the package.json to point to this
version for folks who are able to use it, but I decided to wait on that
for now since that is still pretty experimental.

For now, consumers will need to use this either by importing from
react-dates/esm directly or by using something like a webpack alias to
use this version of the build.

When working on this I originally kept the plugins array at the top
level instead of repeating it for each env, but I ran into an issue that
seemed related to ordering that caused babel-register in the compile CSS
script to not apply the correct transformations. I was able to work
around this by repeating the plugins for each env.

~/react-dates ❯❯❯ du -hs lib
508K    lib
~/react-dates ❯❯❯ du -hs esm
472K    esm

@airbnb/webinfra

coveralls · 2017-10-23T22:05:10Z

Coverage decreased (-86.6%) to 0.07% when pulling 5424418 on jdl-esm-build into a865f5b on master.

These three files are used as entry points into the project, and we expect people to be importing them directly so they are at the top level for convenience. Because of this, they have not been getting run through Babel like the rest of the code here, so they were using older syntax. In this commit, I am moving these files into the src directory so they will be built into lib like the rest of the code here. In their place at the top level, I am creating some very light shims that simply bring in the built version of the module and re-export it if necessary. This gives us a couple of advantages. First, it makes more of our code consistent. Second, it makes it possible to produce two different kinds of builds, one for CommonJS consumers and another for ES modules consumers.

This ES modules build will make these modules smaller in the final bundles, since the way Babel compiles import to require is pretty verbose. Additionally, it will enable webpack to make some optimizations on the final bundle, including tree-shaking and scope hoisting (if enabled). These will improve bundle sizes and runtime performance. I considered adding a module field to the package.json to point to this version for folks who are able to use it, but I decided to wait on that for now since that is still pretty experimental. For now, consumers will need to use this either by importing from react-dates/esm directly or by using something like a webpack alias to use this version of the build. When working on this I originally kept the plugins array at the top level instead of repeating it for each env, but I ran into an issue that seemed related to ordering that caused babel-register in the compile CSS script to not apply the correct transformations. I was able to work around this by repeating the plugins for each env.

coveralls · 2017-10-23T22:35:31Z

Coverage increased (+0.1%) to 86.76% when pulling 2124613 on jdl-esm-build into a865f5b on master.

ljharb

LGTM

ljharb · 2017-10-23T23:18:33Z

index.js

-  toLocalizedDateString: toLocalizedDateString,
-  toMomentObject: toMomentObject,
-};
+// eslint-disable-next-line import/no-unresolved


i don't think this is needed; it's fine if the linter requires the build process be ran first.

I mostly wanted to get rid of the error messages for myself when I was working in these files.

npm run build would have done that :-p

And then npm run clean would have broken it again :-P

It’s not a blocker; but in general I think the warnings there are good; without them, you might unintentionally have a bad path. I don’t think it’s a good idea to optimize for the development case when it subtracts from production safety ¯\_(ツ)_/¯

ljharb · 2017-10-23T23:18:42Z

initialize.js

@@ -1,4 +1,2 @@
 // eslint-disable-next-line import/no-unresolved


ljharb · 2017-10-23T23:19:41Z

.babelrc

-  }
+      "presets": ["airbnb"],
+      "plugins": [
+        "inline-react-svg",


super gnarly that we have to repeat these two plugins in every env due to ordering issues

majapw

LGTM!

majapw · 2017-10-27T01:01:39Z

@lencioni @ljharb I think this change affected the gh-pages script which builds storybook. Specifically, I think it is using a babel environment that has no associated setting in the .babelrc.

Here's the error I'm getting:

Module build failed: SyntaxError: Unexpected token (32:2)

  30 | 
  31 | addDecorator(story => (
> 32 |   <div>
     |   ^
  33 |     <div
  34 |       style={{
  35 |         background: '#fff',

BabelLoaderError: SyntaxError: Unexpected token (32:2)

  30 | 
  31 | addDecorator(story => (
> 32 |   <div>
     |   ^
  33 |     <div
  34 |       style={{
  35 |         background: '#fff',

    at transpile (/Users/maja_wichrowska/code/airlab/repos/react-dates/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js:65:13)
    at /Users/maja_wichrowska/code/airlab/repos/react-dates/node_modules/@storybook/react/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/maja_wichrowska/code/airlab/repos/react-dates/node_modules/@storybook/react/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:419:13)
 @ multi ./~/@storybook/react/dist/server/config/polyfills.js ./~/@storybook/react/dist/server/config/globals.js ./.storybook/config.js

lencioni · 2017-10-27T01:46:12Z

Yep seems likely. Do you know what env it uses?

majapw · 2017-10-27T17:26:40Z

I think it builds in production mode, but I'm unsure.

EDIT: yup, it looks like it does
https://github.com/storybooks/storybook/blob/master/app/react/src/server/build.js#L14

Do we have to add another setting for that?

In #791 I added an ESM build, but ended up breaking the production build for gh-pages. Storybook builds with NODE_ENV=production, so this should fix that problem.

In react-dates/react-dates#791 I added an ESM build, but ended up breaking the production build for gh-pages. Storybook builds with NODE_ENV=production, so this should fix that problem.

lencioni requested review from ljharb and majapw October 23, 2017 21:54

lencioni added 2 commits October 23, 2017 15:25

lencioni force-pushed the jdl-esm-build branch from 5424418 to 2124613 Compare October 23, 2017 22:25

ljharb approved these changes Oct 23, 2017

View reviewed changes

lencioni added the semver-minor: new stuff Any feature or API addition. label Oct 24, 2017

majapw approved these changes Oct 24, 2017

View reviewed changes

lencioni merged commit ef98109 into master Oct 24, 2017

lencioni deleted the jdl-esm-build branch October 24, 2017 23:46

lencioni added a commit that referenced this pull request Oct 27, 2017

Add Babel config for production environment

8563643

In #791 I added an ESM build, but ended up breaking the production build for gh-pages. Storybook builds with NODE_ENV=production, so this should fix that problem.

lencioni mentioned this pull request Oct 27, 2017

Add Babel config for production environment #807

Merged

lencioni mentioned this pull request Nov 13, 2017

Code split out everything that is not needed until after user interaction #839

Open

lencioni mentioned this pull request Dec 1, 2017

Webpack bundle.js size #874

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add /esm build #791

Add /esm build #791

lencioni commented Oct 23, 2017 •

edited

Loading

coveralls commented Oct 23, 2017

coveralls commented Oct 23, 2017

ljharb left a comment

ljharb Oct 23, 2017

lencioni Oct 23, 2017

ljharb Oct 23, 2017

lencioni Oct 24, 2017

ljharb Oct 24, 2017 •

edited

Loading

ljharb Oct 23, 2017

ljharb Oct 23, 2017

majapw left a comment

majapw commented Oct 27, 2017

lencioni commented Oct 27, 2017 via email •

edited by ljharb

Loading

majapw commented Oct 27, 2017

		@@ -1,4 +1,2 @@
		// eslint-disable-next-line import/no-unresolved

Add /esm build #791

Add /esm build #791

Conversation

lencioni commented Oct 23, 2017 • edited Loading

coveralls commented Oct 23, 2017

coveralls commented Oct 23, 2017

ljharb left a comment

Choose a reason for hiding this comment

ljharb Oct 23, 2017

Choose a reason for hiding this comment

lencioni Oct 23, 2017

Choose a reason for hiding this comment

ljharb Oct 23, 2017

Choose a reason for hiding this comment

lencioni Oct 24, 2017

Choose a reason for hiding this comment

ljharb Oct 24, 2017 • edited Loading

Choose a reason for hiding this comment

ljharb Oct 23, 2017

Choose a reason for hiding this comment

ljharb Oct 23, 2017

Choose a reason for hiding this comment

majapw left a comment

Choose a reason for hiding this comment

majapw commented Oct 27, 2017

lencioni commented Oct 27, 2017 via email • edited by ljharb Loading

majapw commented Oct 27, 2017

lencioni commented Oct 23, 2017 •

edited

Loading

ljharb Oct 24, 2017 •

edited

Loading

lencioni commented Oct 27, 2017 via email •

edited by ljharb

Loading