fix build interop. fix #5

* chore: prepare build into cjs and esm targets

* refactor: convert sources from cjs into esm

* chore: add forgotten rimraf

* fix: more entrypoints

* update changelog

.babelrc

@@ -1,7 +1,29 @@
 {
-  "presets": [
-    "env",
-    "react",
-    "stage-0"
-  ]
+  "env": {
+    "cjs": {
+     "presets": [
+        ["env", {
+          "targets": {
+            "node": 4.0,
+            "browsers": ["last 2 versions"]
+          }
+        }],
+        "react",
+        "stage-0"
+      ],
+    },
+    "esm": {
+      "presets": [
+        ["env", {
+          "targets": {
+            "node": 4.0,
+            "browsers": ["last 2 versions"]
+          },
+          "modules": false
+        }],
+        "react",
+        "stage-0"
+      ],
+    }
+  }
 }

.eslintignore

@@ -0,0 +1,9 @@
+node_modules
+.DS_Store
+*.log
+*.lock
+*-lock.json
+dist
+shrinkwrap.*
+.nyc_output
+coverage

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### upcoming version
+
+Fix a bug with webpack resolving `pkg.modules`, so from now own `theming` has commonjs (`dist/cjs`) and es modules (`dist/esm`) entry poingts.
+
 ### 1.0.0 (2017-06-09)
 
 Initial release with `channel`, `ThemeProvider`, `withTheme` and `createTheming`

package.json

@@ -2,21 +2,27 @@
   "name": "theming",
   "version": "1.0.0",
   "description": "Unified CSSinJS theming solution for React",
-  "main": "dist",
+  "main": "dist/cjs",
+  "module": "dist/esm",
   "files": [
     "src",
     "dist"
   ],
   "scripts": {
-    "build": "babel src -d dist --ignore '*test*'",
-    "watch": "babel src -d dist --watch",
     "lint": "eslint .",
-    "test": "ava",
-    "tdd": "ava --watch",
-    "coverage": "nyc ava",
+    "test": "cross-env BABEL_ENV=cjs ava",
+    "tdd": "npm run test -- --watch",
+    "coverage": "cross-env BABEL_ENV=cjs nyc ava",
     "coveralls": "run-s coveralls:*",
     "coveralls:gather": "npm run coverage",
-    "coveralls:upload": "coveralls < coverage/lcov.info"
+    "coveralls:upload": "coveralls < coverage/lcov.info",
+    "clean": "rimraf dist",
+    "build": "run-s clean babel:*",
+    "babel:cjs": "cross-env BABEL_ENV=cjs babel src -d dist/cjs --ignore '*test*'",
+    "babel:esm": "cross-env BABEL_ENV=esm babel src -d dist/esm --ignore '*test*'",
+    "watch": "npm-run-all clean -p babel:watch:*",
+    "babel:watch:cjs": "npm run babel:cjs -- --watch",
+    "babel:watch:esm": "npm run babel:esm -- --watch"
   },
   "ava": {
     "files": [
@@ -71,6 +77,7 @@
     "babel-register": "^6.24.1",
     "browser-env": "^2.0.31",
     "coveralls": "^2.13.1",
+    "cross-env": "^5.0.1",
     "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-config-pedant": "^0.9.0",
@@ -80,7 +87,8 @@
     "npm-run-all": "^4.0.2",
     "nyc": "^10.3.2",
     "react-dom": "^15.5.4",
-    "react-test-renderer": "^15.5.4"
+    "react-test-renderer": "^15.5.4",
+    "rimraf": "^2.6.1"
   },
   "dependencies": {
     "brcast": "^2.0.0",

src/channel.js

@@ -1 +1 @@
-module.exports = '__THEMING__';
+export default '__THEMING__';

src/create-theme-provider.js

@@ -1,17 +1,17 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const isFunction = require('is-function');
-const isPlainObject = require('is-plain-object');
-const channel = require('./channel');
-const createBroadcast = require('brcast');
+import React from 'react';
+import PropTypes from 'prop-types';
+import isFunction from 'is-function';
+import isPlainObject from 'is-plain-object';
+import channel from './channel';
+import createBroadcast from 'brcast';
 
 /**
  * Provide a theme to an entire react component tree via context
  * and event listeners (have to do both context
  * and event emitter as pure components block context updates)
  */
 
-function createThemeProvider(CHANNEL = channel) {
+export default function createThemeProvider(CHANNEL = channel) {
   return class ThemeProvider extends React.Component {
     static propTypes = {
       children: PropTypes.element,
@@ -93,5 +93,3 @@ function createThemeProvider(CHANNEL = channel) {
     }
   };
 }
-
-module.exports = createThemeProvider;

src/create-with-theme.js

@@ -1,11 +1,11 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const channel = require('./channel');
+import React from 'react';
+import PropTypes from 'prop-types';
+import channel from './channel';
 
 const getDisplayName = Component =>
   Component.displayName || Component.name || 'Component';
 
-function createWithTheme(CHANNEL = channel) {
+export default function createWithTheme(CHANNEL = channel) {
   return Component =>
     class WithTheme extends React.Component {
       static displayName = `WithTheme(${getDisplayName(Component)})`;
@@ -45,5 +45,3 @@ function createWithTheme(CHANNEL = channel) {
       }
     };
 }
-
-module.exports = createWithTheme;

src/index.js

@@ -1,14 +1,21 @@
-const createThemeProvider = require('./create-theme-provider');
-const createWithTheme = require('./create-with-theme');
-const channel = require('./channel');
+import createThemeProvider from './create-theme-provider';
+import createWithTheme from './create-with-theme';
+import defaultChannel from './channel';
 
-module.exports = {
-  channel,
-  withTheme: createWithTheme(),
-  ThemeProvider: createThemeProvider(),
-  createTheming: (customChannel = channel) => ({
+export const channel = defaultChannel;
+export const withTheme = createWithTheme();
+export const ThemeProvider = createThemeProvider();
+export function createTheming(customChannel = defaultChannel) {
+  return {
     channel: customChannel,
     withTheme: createWithTheme(customChannel),
     ThemeProvider: createThemeProvider(customChannel),
-  }),
+  };
+}
+
+export default {
+  channel: defaultChannel,
+  withTheme,
+  ThemeProvider,
+  createTheming,
 };