Pass intl as prop to GUI

Allow intl to be passed in to GUI as a prop (rather than having to be already in the store)

Author: chrisgarrity

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/*
 build/*
+dist/*

.gitignore

@@ -11,6 +11,7 @@ npm-*
 
 # Build
 /build
+/dist
 /.opt-in
 
 # generated translation files

src/containers/language-selector.jsx

@@ -1,16 +1,14 @@
 import {connect} from 'react-redux';
-import {updateIntl} from '../reducers/intl.js';
 
 import LanguageSelectorComponent from '../components/language-selector/language-selector.jsx';
 
 const mapStateToProps = state => ({
     currentLocale: state.intl.locale
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = () => ({
     onChange: e => {
         e.preventDefault();
-        dispatch(updateIntl(e.target.value));
     }
 });
 

src/lib/app-state-hoc.jsx

@@ -3,7 +3,9 @@ import {Provider} from 'react-redux';
 import {createStore, applyMiddleware, compose} from 'redux';
 import throttle from 'redux-throttle';
 
-import {intlInitialState, IntlProvider} from '../reducers/intl.js';
+import {intlShape} from 'react-intl';
+import {IntlProvider, updateIntl} from 'react-intl-redux';
+import {intlInitialState} from '../reducers/intl.js';
 import reducer from '../reducers/gui';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -12,7 +14,6 @@ const enhancer = composeEnhancers(
         throttle(300, {leading: true, trailing: true})
     )
 );
-const store = createStore(reducer, intlInitialState, enhancer);
 
 import ErrorBoundary from '../containers/error-boundary.jsx';
 
@@ -22,15 +23,32 @@ import ErrorBoundary from '../containers/error-boundary.jsx';
  * @returns {React.Component} component with redux and intl state provided
  */
 const AppStateHOC = function (WrappedComponent) {
-    const AppStateWrapper = ({...props}) => (
-        <Provider store={store}>
-            <IntlProvider>
-                <ErrorBoundary>
-                    <WrappedComponent {...props} />
-                </ErrorBoundary>
-            </IntlProvider>
-        </Provider>
-    );
+    class AppStateWrapper extends React.Component {
+        constructor (props) {
+            super(props);
+            this.store = createStore(reducer, (props.intl || intlInitialState), enhancer);
+        }
+        componentDidUpdate (prevProps) {
+            if (prevProps.intl !== this.props.intl) updateIntl(this.props.intl);
+        }
+        render () {
+            return (
+                <Provider store={this.store}>
+                    <IntlProvider>
+                        <ErrorBoundary>
+                            <WrappedComponent {...this.props} />
+                        </ErrorBoundary>
+                    </IntlProvider>
+                </Provider>
+            );
+
+        }
+
+
+    }
+    AppStateWrapper.propTypes = {
+        intl: intlShape
+    };
     return AppStateWrapper;
 };
 

src/examples/blocks-only.css src/playground/blocks-only.css

@@ -6,7 +6,7 @@ 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';
-import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
+import ProjectLoaderHOC from './project-loader-hoc.jsx';
 
 import styles from './blocks-only.css';
 

src/examples/blocks-only.jsx src/playground/blocks-only.jsx

@@ -7,7 +7,7 @@ import Controls from '../containers/controls.jsx';
 import Stage from '../containers/stage.jsx';
 import Box from '../components/box/box.jsx';
 import GUI from '../containers/gui.jsx';
-import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
+import ProjectLoaderHOC from './project-loader-hoc.jsx';
 
 const mapStateToProps = state => ({vm: state.vm});
 

src/examples/compatibility-testing.jsx src/playground/compatibility-testing.jsx

@@ -3,10 +3,10 @@ import React from 'react';
 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 './lib/project-loader-hoc.jsx';
+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';
 
 import styles from './index.css';
 

src/index.css src/playground/index.css

@@ -0,0 +1,25 @@
+import {addLocaleData} from 'react-intl';
+import defaultsDeep from 'lodash.defaultsdeep';
+
+import localeData from 'scratch-l10n';
+import guiMessages from 'scratch-l10n/locales/gui-msgs';
+import paintMessages from 'scratch-l10n/locales/paint-msgs';
+import penMessages from 'scratch-l10n/locales/pen-msgs';
+
+const combinedMessages = defaultsDeep({}, guiMessages.messages, paintMessages.messages, penMessages.messages);
+
+Object.keys(localeData).forEach(locale => {
+    // TODO: will need to handle locales not in the default intl - see www/custom-locales
+    addLocaleData(localeData[locale].localeData);
+});
+
+const intlDefault = {
+    defaultLocale: 'en',
+    locale: 'en',
+    messages: combinedMessages.en.messages
+};
+
+export {
+    intlDefault as default,
+    combinedMessages
+};

src/index.ejs src/playground/index.ejs

@@ -7,7 +7,7 @@ import Controls from '../containers/controls.jsx';
 import Stage from '../containers/stage.jsx';
 import Box from '../components/box/box.jsx';
 import GUI from '../containers/gui.jsx';
-import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
+import ProjectLoaderHOC from './project-loader-hoc.jsx';
 
 import './player.css';
 

src/index.jsx src/playground/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import analytics from './analytics';
-import log from './log';
-import storage from './storage';
+import analytics from '../lib/analytics';
+import log from '../lib/log';
+import storage from '../lib/storage';
 
 /* Higher Order Component to provide behavior for loading projects by id from
  * the window's hash (#this part in the url)

src/playground/intl.js

@@ -1,36 +1,14 @@
-import {addLocaleData} from 'react-intl';
-import {updateIntl as superUpdateIntl} from 'react-intl-redux';
-import {IntlProvider, intlReducer} from 'react-intl-redux';
-import defaultsDeep from 'lodash.defaultsdeep';
-
-import localeData from 'scratch-l10n';
-import guiMessages from 'scratch-l10n/locales/gui-msgs';
-import paintMessages from 'scratch-l10n/locales/paint-msgs';
-import penMessages from 'scratch-l10n/locales/pen-msgs';
-
-const combinedMessages = defaultsDeep({}, guiMessages.messages, paintMessages.messages, penMessages.messages);
-
-Object.keys(localeData).forEach(locale => {
-    // TODO: will need to handle locales not in the default intl - see www/custom-locales
-    addLocaleData(localeData[locale].localeData);
-});
+import {intlReducer} from 'react-intl-redux';
 
 const intlInitialState = {
     intl: {
         defaultLocale: 'en',
         locale: 'en',
-        messages: combinedMessages.en.messages
+        messages: {}
     }
 };
 
-const updateIntl = locale => superUpdateIntl({
-    locale: locale,
-    messages: combinedMessages[locale].messages || combinedMessages.en.messages
-});
-
 export {
     intlReducer as default,
-    IntlProvider,
-    intlInitialState,
-    updateIntl
+    intlInitialState
 };

src/examples/player.css src/playground/player.css

@@ -1,5 +1,5 @@
 import React from 'react';
-import ProjectLoaderHOC from '../../../src/lib/project-loader-hoc.jsx';
+import ProjectLoaderHOC from '../../../src/playground/project-loader-hoc.jsx';
 import storage from '../../../src/lib/storage';
 import {mount} from 'enzyme';
 

src/examples/player.jsx src/playground/player.jsx

@@ -19,10 +19,10 @@ module.exports = {
     devtool: 'cheap-module-source-map',
     entry: {
         lib: ['react', 'react-dom'],
-        gui: './src/index.jsx',
-        blocksonly: './src/examples/blocks-only.jsx',
-        compatibilitytesting: './src/examples/compatibility-testing.jsx',
-        player: './src/examples/player.jsx'
+        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'),
@@ -82,24 +82,24 @@ module.exports = {
         }),
         new HtmlWebpackPlugin({
             chunks: ['lib', 'gui'],
-            template: 'src/index.ejs',
+            template: 'src/playground/index.ejs',
             title: 'Scratch 3.0 GUI'
         }),
         new HtmlWebpackPlugin({
             chunks: ['lib', 'blocksonly'],
-            template: 'src/index.ejs',
+            template: 'src/playground/index.ejs',
             filename: 'blocks-only.html',
             title: 'Scratch 3.0 GUI: Blocks Only Example'
         }),
         new HtmlWebpackPlugin({
             chunks: ['lib', 'compatibilitytesting'],
-            template: 'src/index.ejs',
+            template: 'src/playground/index.ejs',
             filename: 'compatibility-testing.html',
             title: 'Scratch 3.0 GUI: Compatibility Testing'
         }),
         new HtmlWebpackPlugin({
             chunks: ['lib', 'player'],
-            template: 'src/index.ejs',
+            template: 'src/playground/index.ejs',
             filename: 'player.html',
             title: 'Scratch 3.0 GUI: Player Example'
         }),