Allow projects to use dcc source directly

package.json

@@ -12,6 +12,7 @@
   "homepage": "https://github.com/plotly/dash-core-components",
   "main": "dash_core_components/dash_core_components.min.js",
   "scripts": {
+    "prepublishOnly": "rm -rf lib && babel src --out-dir lib --copy-files",
     "start": "webpack-serve ./webpack.serve.config.js --open",
     "generator": "node generator/plotly.js",
     "lint": "eslint src tests",
@@ -48,9 +49,11 @@
     "react-markdown": "^4.0.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
+    "react-resize-detector": "^4.2.1",
     "uniqid": "^5.0.3"
   },
   "devDependencies": {
+    "@babel/cli": "^7.4.0",
     "@babel/core": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
@@ -79,7 +82,6 @@
     "prettier": "^1.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-resize-detector": "^4.2.1",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "terser-webpack-plugin": "^2.3.0",
@@ -88,8 +90,10 @@
     "webpack-serve": "^2.0.3"
   },
   "files": [
-    "/dash_core_components/*{.js,.map}"
+    "/dash_core_components/*{.js,.map}",
+    "/lib/**"
   ],
+  "sideEffects": false,
   "peerDependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0"

src/components/DatePickerRange.react.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
-import LazyLoader from '../utils/LazyLoader';
+import {datePickerRange} from '../utils/LazyLoader';
 
-const RealDatePickerRange = lazy(LazyLoader.datePickerRange);
+const RealDatePickerRange = lazy(datePickerRange);
 
 /**
  * DatePickerRange is a tailor made component designed for selecting

src/components/DatePickerSingle.react.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
-import LazyLoader from '../utils/LazyLoader';
+import {datePickerSingle} from '../utils/LazyLoader';
 
-const RealDateSingleRange = lazy(LazyLoader.datePickerSingle);
+const RealDateSingleRange = lazy(datePickerSingle);
 
 /**
  * DatePickerSingle is a tailor made component designed for selecting

src/components/Dropdown.react.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
-import LazyLoader from '../utils/LazyLoader';
+import {dropdown} from '../utils/LazyLoader';
 
-const RealDropdown = lazy(LazyLoader.dropdown);
+const RealDropdown = lazy(dropdown);
 
 /**
  * Dropdown is an interactive dropdown element for selecting one or more

src/components/Graph.react.js

@@ -2,7 +2,7 @@ import React, {Component, memo, Suspense} from 'react';
 import PropTypes from 'prop-types';
 
 import {asyncDecorator} from '@plotly/dash-component-plugins';
-import LazyLoader from '../utils/LazyLoader';
+import {plotly, graph} from '../utils/LazyLoader';
 import {
     privatePropTypes,
     privateDefaultProps,
@@ -88,9 +88,7 @@ class PlotlyGraph extends Component {
     }
 }
 
-const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () =>
-    LazyLoader.plotly().then(LazyLoader.graph)
-);
+const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () => plotly().then(graph));
 
 const ControlledPlotlyGraph = memo(props => {
     const {className, id} = props;

src/components/Markdown.react.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
-import LazyLoader from '../utils/LazyLoader';
+import {markdown} from '../utils/LazyLoader';
 
-const RealDashMarkdown = lazy(LazyLoader.markdown);
+const RealDashMarkdown = lazy(markdown);
 
 // eslint-disable-next-line valid-jsdoc
 /**

src/components/Upload.react.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {Component, lazy, Suspense} from 'react';
-import LazyLoader from '../utils/LazyLoader';
+import {upload} from '../utils/LazyLoader';
 
-const RealUpload = lazy(LazyLoader.upload);
+const RealUpload = lazy(upload);
 
 /**
  * Upload components allow your app to accept user-uploaded files via drag'n'drop

src/utils/LazyLoader.js

@@ -1,24 +1,28 @@
-export default {
-    datePickerRange: () =>
-        import(/* webpackChunkName: "datepicker" */ '../fragments/DatePickerRange.react'),
-    datePickerSingle: () =>
-        import(/* webpackChunkName: "datepicker" */ '../fragments/DatePickerSingle.react'),
-    dropdown: () =>
-        import(/* webpackChunkName: "dropdown" */ '../fragments/Dropdown.react'),
-    graph: () =>
-        import(/* webpackChunkName: "graph" */ '../fragments/Graph.react'),
-    markdown: () =>
-        import(/* webpackChunkName: "markdown" */ '../fragments/Markdown.react'),
-    plotly: () =>
-        Promise.resolve(
-            window.Plotly ||
-                import(/* webpackChunkName: "plotlyjs" */ 'plotly.js').then(
-                    ({default: Plotly}) => {
-                        window.Plotly = Plotly;
-                        return Plotly;
-                    }
-                )
-        ),
-    upload: () =>
-        import(/* webpackChunkName: "upload" */ '../fragments/Upload.react'),
-};
+export const datePickerRang = () =>
+    import(/* webpackChunkName: "datepicker" */ '../fragments/DatePickerRange.react');
+
+export const datePickerSingle = () =>
+    import(/* webpackChunkName: "datepicker" */ '../fragments/DatePickerSingle.react');
+
+export const dropdown = () =>
+    import(/* webpackChunkName: "dropdown" */ '../fragments/Dropdown.react');
+
+export const graph = () =>
+    import(/* webpackChunkName: "graph" */ '../fragments/Graph.react');
+
+export const markdown = () =>
+    import(/* webpackChunkName: "markdown" */ '../fragments/Markdown.react');
+
+export const plotly = () =>
+    Promise.resolve(
+        window.Plotly ||
+            import(/* webpackChunkName: "plotlyjs" */ 'plotly.js').then(
+                ({default: Plotly}) => {
+                    window.Plotly = Plotly;
+                    return Plotly;
+                }
+            )
+    );
+
+export const upload = () =>
+    import(/* webpackChunkName: "upload" */ '../fragments/Upload.react');