Export GUI as library

package.json

@@ -5,7 +5,7 @@
   "main": "./src/index.js",
   "scripts": {
     "build": "npm run clean && webpack --progress --colors --bail",
-    "clean": "rimraf ./build && mkdirp build",
+    "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
     "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
     "i18n:src": "babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/ ./translations/",
     "start": "webpack-dev-server",

src/containers/gui.jsx

@@ -12,6 +12,7 @@ import {
     SOUNDS_TAB_INDEX
 } from '../reducers/editor-tab';
 
+import AppStateHOC from '../lib/app-state-hoc.jsx';
 import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
 
 import GUIComponent from '../components/gui/gui.jsx';
@@ -115,4 +116,4 @@ const ConnectedGUI = connect(
     mapDispatchToProps,
 )(GUI);
 
-export default vmListenerHOC(ConnectedGUI);
+export default AppStateHOC(vmListenerHOC(ConnectedGUI));

src/playground/blocks-only.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 
-import AppStateHOC from '../lib/app-state-hoc.jsx';
 import Controls from '../containers/controls.jsx';
 import Blocks from '../containers/blocks.jsx';
 import GUI from '../containers/gui.jsx';
@@ -27,7 +26,7 @@ const BlocksOnly = props => (
     </GUI>
 );
 
-const App = AppStateHOC(ProjectLoaderHOC(BlocksOnly));
+const App = ProjectLoaderHOC(BlocksOnly);
 
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);

src/playground/compatibility-testing.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 
-import AppStateHOC from '../lib/app-state-hoc.jsx';
 import Controls from '../containers/controls.jsx';
 import Stage from '../containers/stage.jsx';
 import Box from '../components/box/box.jsx';
@@ -72,7 +71,7 @@ class Player extends React.Component {
     }
 }
 
-const App = AppStateHOC(ProjectLoaderHOC(Player));
+const App = ProjectLoaderHOC(Player);
 
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);

src/playground/index.jsx

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
 
 import analytics from '../lib/analytics';
-import AppStateHOC from '../lib/app-state-hoc.jsx';
 import GUI from '../containers/gui.jsx';
 import ProjectLoaderHOC from './project-loader-hoc.jsx';
 
@@ -18,7 +17,7 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
 // Register "base" page view
 analytics.pageview('/');
 
-const App = AppStateHOC(ProjectLoaderHOC(GUI));
+const App = ProjectLoaderHOC(GUI);
 
 const appTarget = document.createElement('div');
 appTarget.className = styles.app;

src/playground/player.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 
-import AppStateHOC from '../lib/app-state-hoc.jsx';
 import Controls from '../containers/controls.jsx';
 import Stage from '../containers/stage.jsx';
 import Box from '../components/box/box.jsx';
@@ -69,7 +68,7 @@ class Player extends React.Component {
     }
 }
 
-const App = AppStateHOC(ProjectLoaderHOC(Player));
+const App = ProjectLoaderHOC(Player);
 
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);

webpack.config.js

+const defaultsDeep = require('lodash.defaultsdeep');
 var path = require('path');
 var webpack = require('webpack');
 
@@ -10,28 +11,17 @@ var autoprefixer = require('autoprefixer');
 var postcssVars = require('postcss-simple-vars');
 var postcssImport = require('postcss-import');
 
-module.exports = {
+const base = {
+    devtool: 'cheap-module-source-map',
     devServer: {
         contentBase: path.resolve(__dirname, 'build'),
         host: '0.0.0.0',
         port: process.env.PORT || 8601
     },
-    devtool: 'cheap-module-source-map',
-    entry: {
-        lib: ['react', 'react-dom'],
-        gui: './src/playground/index.jsx',
-        blocksonly: './src/playground/blocks-only.jsx',
-        compatibilitytesting: './src/playground/compatibility-testing.jsx',
-        player: './src/playground/player.jsx'
-    },
     output: {
-        path: path.resolve(__dirname, 'build'),
+        library: 'GUI',
         filename: '[name].js'
     },
-    externals: {
-        React: 'react',
-        ReactDOM: 'react-dom'
-    },
     module: {
         rules: [{
             test: /\.jsx?$/,
@@ -71,59 +61,106 @@ module.exports = {
             loader: 'file-loader'
         }]
     },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
-            'process.env.DEBUG': Boolean(process.env.DEBUG)
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'lib',
-            filename: 'lib.min.js'
-        }),
-        new HtmlWebpackPlugin({
-            chunks: ['lib', 'gui'],
-            template: 'src/playground/index.ejs',
-            title: 'Scratch 3.0 GUI'
-        }),
-        new HtmlWebpackPlugin({
-            chunks: ['lib', 'blocksonly'],
-            template: 'src/playground/index.ejs',
-            filename: 'blocks-only.html',
-            title: 'Scratch 3.0 GUI: Blocks Only Example'
-        }),
-        new HtmlWebpackPlugin({
-            chunks: ['lib', 'compatibilitytesting'],
-            template: 'src/playground/index.ejs',
-            filename: 'compatibility-testing.html',
-            title: 'Scratch 3.0 GUI: Compatibility Testing'
-        }),
-        new HtmlWebpackPlugin({
-            chunks: ['lib', 'player'],
-            template: 'src/playground/index.ejs',
-            filename: 'player.html',
-            title: 'Scratch 3.0 GUI: Player Example'
-        }),
-        new CopyWebpackPlugin([{
-            from: 'static',
-            to: 'static'
-        }]),
-        new CopyWebpackPlugin([{
-            from: 'node_modules/scratch-blocks/media',
-            to: 'static/blocks-media'
-        }]),
-        new CopyWebpackPlugin([{
-            from: 'extensions/**',
-            to: 'static',
-            context: 'src/examples'
-        }]),
-        new CopyWebpackPlugin([{
-            from: 'extension-worker.{js,js.map}',
-            context: 'node_modules/scratch-vm/dist/web'
-        }])
-    ].concat(process.env.NODE_ENV === 'production' ? [
+    plugins: [].concat(process.env.NODE_ENV === 'production' ? [
         new webpack.optimize.UglifyJsPlugin({
             include: /\.min\.js$/,
             minimize: true
         })
     ] : [])
 };
+
+module.exports = [
+    // export as library
+    defaultsDeep({}, base, {
+        target: 'web',
+        entry: {
+            'scratch-gui': './src/containers/gui.jsx'
+        },
+        output: {
+            libraryTarget: 'umd',
+            path: path.resolve('dist')
+        },
+        externals: {
+            React: 'react',
+            ReactDOM: 'react-dom'
+        },
+        plugins: base.plugins.concat([
+            new CopyWebpackPlugin([{
+                from: 'node_modules/scratch-blocks/media',
+                to: 'static/blocks-media'
+            }]),
+            new CopyWebpackPlugin([{
+                from: 'extension-worker.{js,js.map}',
+                context: 'node_modules/scratch-vm/dist/web'
+            }])
+        ])
+    }),
+    // to run editor examples
+    defaultsDeep({}, base, {
+        entry: {
+            lib: ['react', 'react-dom'],
+            gui: './src/playground/index.jsx',
+            blocksonly: './src/playground/blocks-only.jsx',
+            compatibilitytesting: './src/playground/compatibility-testing.jsx',
+            player: './src/playground/player.jsx'
+        },
+        output: {
+            path: path.resolve(__dirname, 'build'),
+            filename: '[name].js'
+        },
+        externals: {
+            React: 'react',
+            ReactDOM: 'react-dom'
+        },
+        plugins: base.plugins.concat([
+            new webpack.DefinePlugin({
+                'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"',
+                'process.env.DEBUG': Boolean(process.env.DEBUG)
+            }),
+            new webpack.optimize.CommonsChunkPlugin({
+                name: 'lib',
+                filename: 'lib.min.js'
+            }),
+            new HtmlWebpackPlugin({
+                chunks: ['lib', 'gui'],
+                template: 'src/playground/index.ejs',
+                title: 'Scratch 3.0 GUI'
+            }),
+            new HtmlWebpackPlugin({
+                chunks: ['lib', 'blocksonly'],
+                template: 'src/playground/index.ejs',
+                filename: 'blocks-only.html',
+                title: 'Scratch 3.0 GUI: Blocks Only Example'
+            }),
+            new HtmlWebpackPlugin({
+                chunks: ['lib', 'compatibilitytesting'],
+                template: 'src/playground/index.ejs',
+                filename: 'compatibility-testing.html',
+                title: 'Scratch 3.0 GUI: Compatibility Testing'
+            }),
+            new HtmlWebpackPlugin({
+                chunks: ['lib', 'player'],
+                template: 'src/playground/index.ejs',
+                filename: 'player.html',
+                title: 'Scratch 3.0 GUI: Player Example'
+            }),
+            new CopyWebpackPlugin([{
+                from: 'static',
+                to: 'static'
+            }]),
+            new CopyWebpackPlugin([{
+                from: 'node_modules/scratch-blocks/media',
+                to: 'static/blocks-media'
+            }]),
+            new CopyWebpackPlugin([{
+                from: 'extensions/**',
+                to: 'static',
+                context: 'src/examples'
+            }]),
+            new CopyWebpackPlugin([{
+                from: 'extension-worker.{js,js.map}',
+                context: 'node_modules/scratch-vm/dist/web'
+            }])
+        ])
+    })
+];