ESM build, misc other tweaks (#968)

- **Breaking Change**: Radium now exports defaults as `.default`, so for runtimes like Node.js for all files in `lib/**`. We have changed `package.json:main` to point to `/index.js` instead of `/lib/index.js` as a convenience wrapper to expose mostly what was there before so behavior of `const Radium = require('radium');` works mostly as it did before. Caveats:
- Add `es` ESM module export files.
- Fix `package.json:scrtips.postinstall` task to correctly work for git-based dependencies.

.babelrc

@@ -1,12 +1,22 @@
 {
   "plugins": [
-    "add-module-exports",
-    "transform-es2015-modules-commonjs",
     "transform-decorators-legacy"
   ],
   "presets": [
-    ["es2015", { "loose": true }],
+    ["env", { "modules": false }],
     "stage-1",
     "react"
-  ]
+  ],
+  "env": {
+    "commonjs": {
+      "presets": [
+        "env",
+        "stage-1",
+        "react"
+      ],
+      "plugins": [
+        "transform-decorators-legacy"
+      ]
+    }
+  }
 }

.eslintignore

@@ -1,2 +1,3 @@
 dist
 lib
+es

.gitignore

@@ -31,7 +31,9 @@ $RECYCLE.BIN/
 _site
 coverage
 dist
+es
 lib
 node_modules
 npm-debug.log*
 yarn-error.log*
+package-lock.json

.npmignore.publishr

@@ -1,4 +1,5 @@
 /*
+!/es
 !/dist
 !/docs
 !/lib

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Radium Changelog
 
+## UNRELEASED MAJOR (TODO_DATE)
+### Breaking Changes
+- Radium now exports defaults as `.default`, so for runtimes like Node.js for all files in `lib/**`. We have changed `package.json:main` to point to `/index.js` instead of `/lib/index.js` as a convenience wrapper to expose mostly what was there before so behavior of `const Radium = require('radium');` works mostly as it did before. Caveats:
+    - When using webpack2+ to build code with `require('radium')` in it you will need to change that to become `require('radium').default`.
+    - Any imports of a default export from a file in lib like `const Enhancer = require('radium/lib/enhancer');` will need to be changed to `const Enhancer = require('radium/lib/enhancer').default;`.
+    - We have a full examples repository of how imports work in all likely scenarios that should come up. https://github.com/FormidableLabs/radium-experiments-v0.22
+
+### Features
+- Add `es` ESM module export files.
+
+### Fixes
+- Fix `package.json:scrtips.postinstall` task to correctly work for git-based dependencies.
+
 ## 0.21.2 (January 25, 2018)
 - Fix multiple-value prefixed inline styles. (#962, #958, #951)
 

README.md

@@ -49,16 +49,16 @@ For a short technical explanation, see [How does Radium work?](#how-does-radium-
 
 ## Usage
 
-Start by wrapping your component class with `Radium()`, like `module.exports = Radium(Component)`, or `Component = Radium(Component)`, which works with classes, `createClass`, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via `style={...}` and let Radium do the rest!
+Start by wrapping your component class with `Radium()`, like `export default Radium(Component)`, or `Component = Radium(Component)`, which works with classes, `createClass`, and stateless components (functions that take props and return a ReactElement). Then, write a style object as you normally would with inline styles, and add in styles for interactive states and media queries. Pass the style object to your component via `style={...}` and let Radium do the rest!
 
 ```jsx
 <Button kind="primary">Radium Button</Button>
 ```
 
 ```jsx
-var Radium = require('radium');
-var React = require('react');
-var color = require('color');
+import Radium from 'radium';
+import React from 'react';
+import color from 'color';
 
 class Button extends React.Component {
   static propTypes = {
@@ -108,6 +108,43 @@ var styles = {
 };
 ```
 
+## Importing Radium
+
+As of `v0.22.x`, Radium is built as an ECMAScript Modules-first project. We now have a `package.json:module` entry pointing to our library files with `import|export` statements instead of CommonJS `require`s. We still support CommonJS `require`s with a special `package.json:main` entry pointing to root `index.js` to smooth over this transition. The basic takeaways are:
+
+If you are using **ESM** with **webpack** or **`@std/esm`** with **Node.js**, imports like the following work fine without any gotchas:
+
+```js
+import Radium from 'radium';
+import Radium, { Style } from 'radium';
+```
+
+If you are using **CommonJS** with **Node.js** or **webpack@1** requires work like normal:
+
+```js
+const Radium = require('radium');
+const { Style } = require('radium');
+```
+
+If you are using **CommonJS** with **webpack@2+**, however, you must instead add `.default` to the root `Radium` object import:
+
+```js
+const Radium = require('radium').default; // CHANGED: Must add `.default`
+const { Style } = require('radium');      // Works as per normal
+```
+
+If you cannot change the `require` statements directly (say Radium is included from a different library your project depends on) you can manually tweak the Radium import directly in your project's webpack configuration with the following:
+
+```js
+resolve: {
+  alias: {
+    radium: require.resolve("radium/index")
+  }
+}
+```
+
+which will allow `const Radium = require('radium');` to still work. The configuration effectively forces webpack point to the code from `package.json:main` (which points to `/index.js`) instead of what is in `package.json:module`.
+
 ## Examples
 
 To see the universal examples:

bower.json

@@ -23,6 +23,8 @@
     "karma.conf.js",
     "lib",
     "src",
+    "es",
+    "scripts",
     "node_modules",
     "package.json",
     "webpack.config.js",

docs/api/README.md

@@ -94,7 +94,7 @@ Usage with `createClass`:
 
 ```jsx
 var MyComponent = React.createClass({ ... });
-module.exports = Radium(MyComponent);
+export default Radium(MyComponent);
 ```
 
 `Radium`'s primary job is to apply interactive or media query styles, but even if you are not using any special styles, the higher order component will still:
@@ -157,6 +157,12 @@ Allows you to replace the `matchMedia` function that Radium uses. The default is
 
 **Server**
 
+You can require `Radium` on the server / using CommonJS with:
+
+```jsx
+var Radium = require('radium');
+```
+
 ```jsx
 var ConfiguredRadium = require('./configured-radium');
 var matchMediaMock = require('match-media-mock').create();
@@ -483,9 +489,8 @@ An object of CSS rules to render. Each key of the rules object is a CSS selector
 ```jsx
 var Radium = require('radium');
 var Style = Radium.Style;
-
 // or
-import Radium, { Style } from 'radium'
+import Radium, { Style } from 'radium';
 
 <Style rules={{
   body: {
@@ -556,7 +561,7 @@ class App extends React.Component {
       </StyleRoot>
     );
   }
-}  
+}
 ```
 
 **Note:** StyleRoot passes the style-keeper (the object where styles are collected) down to other Radium components via context. Because of this, you cannot use keyframes or media queries in *direct children* of the `<StyleRoot>`, e.g.
@@ -585,7 +590,7 @@ class App extends React.Component {
       </StyleRoot>
     );
   }
-}  
+}
 ```
 
 ## TestMode

docs/faq/README.md

@@ -188,7 +188,7 @@ Make sure it is a real user agent that `inline-style-prefixer` recognizes, or yo
 
 You may see the name "Constructor" instead of your component name, for example: "Warning: Failed propType: Invalid prop `onClick` of type `function` supplied to `Constructor`, expected `string`." or "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Constructor`."
 
-Your transpiler is probably not able to set the `displayName` property of the component correctly, which can happen if you wrap `React.createClass` immediately with `Radium`, e.g. `var Button = Radium(React.createClass({ ... }));`. Instead, wrap your component afterward, ex. `Button = Radium(Button);`,  or when exporting, ex. `module.exports = Radium(Button);`, or set `displayName` manually.
+Your transpiler is probably not able to set the `displayName` property of the component correctly, which can happen if you wrap `React.createClass` immediately with `Radium`, e.g. `var Button = Radium(React.createClass({ ... }));`. Instead, wrap your component afterward, ex. `Button = Radium(Button);`,  or when exporting, ex. `export default Radium(Button);`, or set `displayName` manually.
 
 ## Why does the browser state of a child element not reset after unmounting and remounting?
 

docs/guides/README.md

@@ -20,13 +20,10 @@ Radium is a toolset for easily writing React component styles. It resolves brows
 First, require or import Radium at the top of component file:
 
 ```jsx
-var Radium = require('radium');
-
-// or
-import Radium from 'radium'
+import Radium from 'radium';
 
 // If you want to use the <Style /> component you can do
-import Radium, { Style } from 'radium'
+import Radium, { Style } from 'radium';
 ```
 
 Let's create a fictional `<Button>` component. It will have a set of default styles, will adjust its appearance based on modifiers, and will include hover, focus, and active states.
@@ -49,7 +46,7 @@ Radium is activated by wrapping your component:
 class Button extends React.Component {
   // ...
 }
-module.exports = Radium(Button);
+export default Radium(Button);
 
 // or
 class Button extends React.Component {

examples/app.js

@@ -13,16 +13,12 @@
 
 /* eslint-disable no-use-before-define */
 
-const React = require('react');
+import React from 'react';
 
-const CommonStyles = require('./common.styles');
-const Button = require('./components/button');
-const ComputedWell = require('./components/computed-well');
-const Radium = require('../src');
-
-const {Style, StyleRoot} = Radium;
-
-const {resetListStyle, resetBoxModel} = CommonStyles;
+import {resetListStyle, resetBoxModel} from './common.styles';
+import Button from './components/button';
+import ComputedWell from './components/computed-well';
+import Radium, {getState, keyframes, Style, StyleRoot} from '../src';
 
 //
 // Radium with ES6 class syntax
@@ -34,7 +30,7 @@ class HoverMessage extends React.Component {
         <button key="button" style={{display: 'flex', ':hover': {}}}>
           Hover me!
         </button>
-        {Radium.getState(this.state, 'button', ':hover')
+        {getState(this.state, 'button', ':hover')
           ? <span>{' '}Hovering!</span>
           : null}
       </div>
@@ -231,7 +227,7 @@ const tileStyle = {
   }
 };
 
-const pulseAnimation = Radium.keyframes(
+const pulseAnimation = keyframes(
   {
     '0%': {width: '10%'},
     '50%': {width: '50%'},
@@ -256,4 +252,4 @@ const listStyle = {
   margin: 15
 };
 
-module.exports = App;
+export default App;

examples/client.js

@@ -11,8 +11,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './app';
 
 ReactDOM.render(<App />, document.getElementById('app'));

examples/common.styles.js

@@ -1,15 +1,14 @@
-module.exports = {
-  resetListStyle: {
-    listStyle: 'none'
-  },
-  resetBoxModel: {
-    marginTop: 0,
-    marginRight: 0,
-    marginBottom: 0,
-    marginLeft: 0,
-    paddingTop: 0,
-    paddingRight: 0,
-    paddingBottom: 0,
-    paddingLeft: 0
-  }
+export const resetListStyle = {
+  listStyle: 'none'
+};
+
+export const resetBoxModel = {
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0
 };

examples/components/button.js

@@ -13,9 +13,9 @@
 
 /* eslint-disable no-use-before-define */
 
-const Radium = require('../../src');
-const React = require('react');
-const PropTypes = require('prop-types');
+import React from 'react';
+import PropTypes from 'prop-types';
+import Radium from '../../src';
 
 @Radium class Button extends React.Component {
   render() {
@@ -87,4 +87,4 @@ const styles = {
   }
 };
 
-module.exports = Button;
+export default Button;

examples/components/computed-well.js

@@ -11,9 +11,9 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-const Radium = require('../../src/index');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Radium from '../../src';
 
 class ComputedWell extends React.Component {
   getInitialState() {
@@ -49,4 +49,4 @@ class ComputedWell extends React.Component {
   }
 }
 
-module.exports = Radium(ComputedWell);
+export default Radium(ComputedWell);

examples/server.js

@@ -11,13 +11,13 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import express from 'express';
-import proxy from 'express-http-proxy';
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import App from './app';
-import fs from 'fs';
-import path from 'path';
+const express = require('express');
+const proxy = require('express-http-proxy');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+import App from './app'; // Leave ESM import
+const fs = require('fs');
+const path = require('path');
 
 const indexHTML = fs
   .readFileSync(path.resolve(__dirname, 'index.html'))

examples/webpack.config.js

@@ -19,15 +19,16 @@ module.exports = {
     app: './examples/client.js'
   },
   output: {
-    path: path.join(__dirname, '/dist'),
+    path: path.join(__dirname, 'dist'),
     publicPath: '/',
     filename: '[name].js',
     chunkFilename: '[chunkhash].js'
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
+        include: [__dirname, path.resolve(__dirname, '../src')],
         loader: 'babel-loader'
       }
     ]

index.js

@@ -0,0 +1,2 @@
+module.exports = require('./lib').default;
+module.exports.default = module.exports;