Decoupled renderer

package.json

@@ -3,6 +3,7 @@
   "version": "0.23.0",
   "description": "render dash components in react",
   "main": "src/index.js",
+  "module": "dash_renderer/dash_renderer.commonjs.js",
   "scripts": {
     "lint": "./node_modules/.bin/eslint --quiet --fix .",
     "lint:test": "./node_modules/.bin/eslint .",

src/AppContainer.react.js

@@ -21,8 +21,8 @@ class UnconnectedAppContainer extends React.Component {
     }
 
     componentWillMount() {
-        const {dispatch} = this.props;
-        dispatch(readConfig());
+        const {dispatch, initialConfig} = this.props;
+        dispatch(readConfig({config: initialConfig}));
     }
 
     render() {
@@ -46,6 +46,7 @@ UnconnectedAppContainer.propTypes = {
     hooks: PropTypes.object,
     dispatch: PropTypes.func,
     config: PropTypes.object,
+    initialConfig: PropTypes.object,
 };
 
 const AppContainer = connect(

src/AppProvider.react.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 
 const store = initializeStore();
 
-const AppProvider = ({hooks}) => {
+const AppProvider = ({hooks, initialConfig}) => {
     return (
         <Provider store={store}>
-            <AppContainer hooks={hooks} />
+            <AppContainer hooks={hooks} initialConfig={initialConfig} />
         </Provider>
     );
 };
@@ -21,6 +21,7 @@ AppProvider.propTypes = {
         request_pre: PropTypes.func,
         request_post: PropTypes.func,
     }),
+    initialConfig: PropTypes.object,
 };
 
 AppProvider.defaultProps = {

src/decoupled.js

@@ -0,0 +1,4 @@
+/* eslint-env browser */
+
+'use strict';
+export {DashRenderer} from './DashRenderer';

src/reducers/config.js

@@ -3,7 +3,10 @@ import {getAction} from '../actions/constants';
 
 export default function config(state = null, action) {
     if (action.type === getAction('READ_CONFIG')) {
-        return JSON.parse(document.getElementById('_dash-config').textContent);
+        return (
+            action.payload.config ||
+            JSON.parse(document.getElementById('_dash-config').textContent)
+        );
     }
     return state;
 }

webpack.config.js

@@ -4,7 +4,7 @@ const packagejson = require('./package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
-module.exports = (env, argv) => {
+const getMode = (env, argv) => {
     let mode;
 
     // if user specified mode flag take that value
@@ -21,66 +21,86 @@ module.exports = (env, argv) => {
     else {
         mode = 'production';
     }
-    return {
-        entry: {main: ['@babel/polyfill', 'whatwg-fetch', './src/index.js']},
-        output: {
-            path: path.resolve(__dirname, dashLibraryName),
-            filename:
-                mode === 'development'
-                    ? `${dashLibraryName}.dev.js`
-                    : `${dashLibraryName}.min.js`,
-            library: dashLibraryName,
-            libraryTarget: 'window',
-        },
-        devtool: 'source-map',
-        externals: {
-            react: 'React',
-            'react-dom': 'ReactDOM',
-            'plotly.js': 'Plotly',
-        },
-        module: {
-            rules: [
-                {
-                    test: /\.js$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: 'babel-loader',
-                    },
-                },
-                {
-                    test: /\.css$/,
-                    use: [
-                        {
-                            loader: 'style-loader',
-                        },
-                        {
-                            loader: 'css-loader',
-                        },
-                    ],
-                },
-                {
-                    test: /\.svg$/,
-                    use: ['@svgr/webpack']
-                },
-                {
-                    test: /\.txt$/i,
-                    use: 'raw-loader',
 
+    return mode;
+};
+
+const common = (env, argv) => ({
+    devtool: 'source-map',
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
                 },
-            ],
-        },
-        plugins: [
-            new webpack.NormalModuleReplacementPlugin(
-                /(.*)GlobalErrorContainer.react(\.*)/,
-                function(resource) {
-                    if (mode === 'production') {
-                        resource.request = resource.request.replace(
-                            /GlobalErrorContainer.react/,
-                            'GlobalErrorContainerPassthrough.react'
-                        );
-                    }
-                }
-            ),
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: 'style-loader',
+                    },
+                    {
+                        loader: 'css-loader',
+                    },
+                ],
+            },
+            {
+                test: /\.svg$/,
+                use: ['@svgr/webpack'],
+            },
+            {
+                test: /\.txt$/i,
+                use: 'raw-loader',
+            },
         ],
-    };
-};
+    },
+    plugins: [
+        new webpack.NormalModuleReplacementPlugin(
+            /(.*)GlobalErrorContainer.react(\.*)/,
+            function(resource) {
+                if (getMode(env, argv) === 'production') {
+                    resource.request = resource.request.replace(
+                        /GlobalErrorContainer.react/,
+                        'GlobalErrorContainerPassthrough.react'
+                    );
+                }
+            }
+        ),
+    ],
+});
+
+const standalone = (env, argv) => ({
+    ...common(env, argv),
+    name: 'standalone',
+    entry: {main: ['@babel/polyfill', 'whatwg-fetch', './src/index.js']},
+    output: {
+        path: path.resolve(__dirname, dashLibraryName),
+        filename:
+            getMode(env, argv) === 'development'
+                ? `${dashLibraryName}.dev.js`
+                : `${dashLibraryName}.min.js`,
+        library: dashLibraryName,
+        libraryTarget: 'window',
+    },
+    externals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        'plotly.js': 'Plotly',
+    },
+});
+
+const decoupled = (env, argv) => ({
+    ...common(env, argv),
+    name: 'decoupled',
+    entry: './src/decoupled.js',
+    output: {
+        path: path.resolve(__dirname, dashLibraryName),
+        filename: `${dashLibraryName}.commonjs.js`,
+        libraryTarget: 'commonjs2',
+    },
+});
+
+module.exports = [standalone, decoupled];