Allow state and rendering to be managed separately in the standalone version (#53)

* feat: separate the state and the rendering in the standalone version

* fix: initialization of AppStateHOC

* fix: fix bad import

* chore: add tests working with the standalone initialization path

* fix: linter

Author: georgyangelov

packages/scratch-gui/src/.eslintrc.js

@@ -40,7 +40,10 @@ module.exports = {
             files: ['**/*.ts', '**/*.tsx'],
             extends: ['plugin:@typescript-eslint/recommended'],
             rules: {
-                'react/jsx-filename-extension': ['error', {extensions: ['.tsx']}]
+                'react/jsx-filename-extension': ['error', {extensions: ['.tsx']}],
+
+                // This is handled by TypeScript
+                'import/named': 'off'
             }
         }
     ],

packages/scratch-gui/src/components/menu-bar/user-avatar.jsx

@@ -14,6 +14,7 @@ const UserAvatar = ({
             styles.userThumbnail
         )}
         src={imageUrl}
+        referrerPolicy="no-referrer"
     />
 );
 

packages/scratch-gui/src/index-standalone.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {setAppElement} from 'react-modal';
 import GUI from './containers/gui';
-import {GUIConfig} from './gui-config';
-import AppStateHOC from './lib/app-state-hoc';
+import {AppStateProviderHOC} from './lib/app-state-provider-hoc';
+import {EditorState} from './lib/editor-state';
+import {ReactComponentLike} from 'prop-types';
+import {compose} from 'redux';
+
+export {EditorState, EditorStateParams} from './lib/editor-state';
 
 export {setAppElement} from 'react-modal';
 
@@ -18,27 +21,38 @@ export {default as buildDefaultProject} from './lib/default-project';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type GUIProps = any; // ComponentPropsWithoutRef<typeof ScratchGUI>;
 
+export type HigherOrderComponent = (component: ReactComponentLike) => ReactComponentLike;
+
 /**
  * Creates a "root" for the editor to be hosted in.
  *
- * @param {GUIConfig} config The configuration for the editor.
- * @param {HTMLElement} rootAppElement The main app element, set to ReactModal.setAppElement.
+ * @param {EditorState} state The editor state. Create by new-ing EditorState.
  * @param {HTMLElement} container The container the editor should be hosted under.
  *
  * @returns {{ render: function(props: GUIProps): void, unmount: function(): void }} The mounted root.
  */
 export const createStandaloneRoot = (
-    config: GUIConfig,
-    rootAppElement: HTMLElement,
-    container: HTMLElement
+    state: EditorState,
+    container: HTMLElement,
+    {wrappers}: {wrappers?: HigherOrderComponent[]} = {}
 ) => {
-    setAppElement(rootAppElement);
-
-    const GUIWithState = AppStateHOC(GUI, false, () => config);
+    // note that redux's 'compose' function is just being used as a general utility to make
+    // the hierarchy of HOC constructor calls clearer here; it has nothing to do with redux's
+    // ability to compose reducers.
+    const WrappedGui = compose(
+        AppStateProviderHOC,
+        ...(wrappers ?? [])
+    )(GUI) as ReactComponentLike;
 
     return {
         render (props: GUIProps) {
-            ReactDOM.render(<GUIWithState {...props} />, container);
+            ReactDOM.render(
+                <WrappedGui
+                    appState={state}
+                    {...props}
+                />,
+                container
+            );
         },
 
         unmount () {

packages/scratch-gui/src/lib/app-state-hoc.jsx

@@ -1,17 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Provider} from 'react-redux';
-import {createStore, combineReducers, compose} from 'redux';
-import ConnectedIntlProvider from './connected-intl-provider.jsx';
 
-import localesReducer, {initLocale, localesInitialState} from '../reducers/locales';
-
-import {setPlayer, setFullScreen} from '../reducers/mode.js';
-
-import locales from 'scratch-l10n';
-import {detectLocale} from './detect-locale';
-
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+import {EditorState} from './editor-state';
+import {AppStateProviderHOC} from './app-state-provider-hoc';
 
 /**
  * Higher Order Component to provide redux state. If an `intl` prop is provided
@@ -26,95 +17,27 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  * @returns {React.Component} component with redux and intl state provided
  */
 const AppStateHOC = function (WrappedComponent, localesOnly, configFactory) {
+    const AppStateProvider = AppStateProviderHOC(WrappedComponent);
+
     class AppStateWrapper extends React.Component {
         constructor (props) {
             super(props);
-            let initialState = {};
-            let reducers = {};
-            let enhancer;
-
-            let initializedLocales = localesInitialState;
-            const locale = detectLocale(Object.keys(locales));
-            if (locale !== 'en') {
-                initializedLocales = initLocale(initializedLocales, locale);
-            }
-            if (localesOnly) {
-                // Used for instantiating minimal state for the unsupported
-                // browser modal
-                reducers = {locales: localesReducer};
-                initialState = {locales: initializedLocales};
-                enhancer = composeEnhancers();
-            } else {
-                // You are right, this is gross. But it's necessary to avoid
-                // importing unneeded code that will crash unsupported browsers.
-                const guiRedux = require('../reducers/gui');
-                const guiReducer = guiRedux.default;
-                const {
-                    buildInitialState,
-                    guiMiddleware,
-                    initFullScreen,
-                    initPlayer,
-                    initTelemetryModal
-                } = guiRedux;
-                const {ScratchPaintReducer} = require('scratch-paint');
 
-                const configOrLegacy = configFactory ?
-                    configFactory() :
-                    require('../legacy-config').legacyConfig;
-
-                let initializedGui = buildInitialState(configOrLegacy);
-                if (props.isFullScreen || props.isPlayerOnly) {
-                    if (props.isFullScreen) {
-                        initializedGui = initFullScreen(initializedGui);
-                    }
-                    if (props.isPlayerOnly) {
-                        initializedGui = initPlayer(initializedGui);
-                    }
-                } else if (props.showTelemetryModal) {
-                    initializedGui = initTelemetryModal(initializedGui);
-                }
-                reducers = {
-                    locales: localesReducer,
-                    scratchGui: guiReducer,
-                    scratchPaint: ScratchPaintReducer
-                };
-                initialState = {
-                    locales: initializedLocales,
-                    scratchGui: initializedGui
-                };
-                enhancer = composeEnhancers(guiMiddleware);
-            }
-            const reducer = combineReducers(reducers);
-            this.store = createStore(
-                reducer,
-                initialState,
-                enhancer
-            );
-        }
-        componentDidUpdate (prevProps) {
-            if (localesOnly) return;
-            if (prevProps.isPlayerOnly !== this.props.isPlayerOnly) {
-                this.store.dispatch(setPlayer(this.props.isPlayerOnly));
-            }
-            if (prevProps.isFullScreen !== this.props.isFullScreen) {
-                this.store.dispatch(setFullScreen(this.props.isFullScreen));
-            }
+            this.appState = new EditorState({
+                localesOnly,
+                isFullScreen: props.isFullScreen,
+                isPlayerOnly: props.isPlayerOnly,
+                showTelemetryModal: props.showTelemetryModal
+            }, configFactory);
         }
+
         render () {
-            const {
-                isFullScreen, // eslint-disable-line no-unused-vars
-                isPlayerOnly, // eslint-disable-line no-unused-vars
-                showTelemetryModal, // eslint-disable-line no-unused-vars
-                ...componentProps
-            } = this.props;
             return (
-                <Provider store={this.store}>
-                    <ConnectedIntlProvider>
-                        <WrappedComponent
-                            {...componentProps}
-                        />
-                    </ConnectedIntlProvider>
-                </Provider>
+                <AppStateProvider
+                    appState={this.appState}
+                    localesOnly={localesOnly}
+                    {...this.props}
+                />
             );
         }
     }

packages/scratch-gui/src/lib/app-state-provider-hoc.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {Provider} from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {EditorState} from './editor-state';
+import {setPlayer, setFullScreen} from '../reducers/mode.js';
+import ConnectedIntlProvider from './connected-intl-provider.jsx';
+
+/**
+ * Wraps the editor into the redux state contained within an EditorState instance.
+ *
+ * @param {React.Component} WrappedComponent - component to provide state for
+ *
+ * @returns {React.Component} component with redux and intl state provided
+ */
+export const AppStateProviderHOC = function (WrappedComponent) {
+    class AppStateWrapper extends React.Component {
+        componentDidUpdate (prevProps) {
+            if (this.props.localesOnly) return;
+            if (prevProps.isPlayerOnly !== this.props.isPlayerOnly) {
+                this.props.appState.store.dispatch(setPlayer(this.props.isPlayerOnly));
+            }
+            if (prevProps.isFullScreen !== this.props.isFullScreen) {
+                this.props.appState.store.dispatch(setFullScreen(this.props.isFullScreen));
+            }
+        }
+
+        render () {
+            const {
+                appState,
+                isFullScreen, // eslint-disable-line no-unused-vars
+                isPlayerOnly, // eslint-disable-line no-unused-vars
+                showTelemetryModal, // eslint-disable-line no-unused-vars
+                ...componentProps
+            } = this.props;
+            return (
+                <Provider store={appState.store}>
+                    <ConnectedIntlProvider>
+                        <WrappedComponent
+                            {...componentProps}
+                        />
+                    </ConnectedIntlProvider>
+                </Provider>
+            );
+        }
+    }
+    AppStateWrapper.propTypes = {
+        appState: PropTypes.instanceOf(EditorState),
+        localesOnly: PropTypes.bool,
+        isFullScreen: PropTypes.bool,
+        isPlayerOnly: PropTypes.bool,
+        isTelemetryEnabled: PropTypes.bool,
+        showTelemetryModal: PropTypes.bool
+    };
+    return AppStateWrapper;
+};

packages/scratch-gui/src/lib/editor-state.tsx

@@ -0,0 +1,99 @@
+import {createStore, combineReducers, compose, Store} from 'redux';
+import localesReducer, {initLocale, localesInitialState} from '../reducers/locales';
+import locales from 'scratch-l10n';
+import {detectLocale} from './detect-locale';
+import {GUIConfig} from '../gui-config';
+
+interface WindowWithDevtools {
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+}
+
+const composeEnhancers = (window as WindowWithDevtools).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+// TypeScript doesn't know about require here, and we don't want to change behavior, so...
+declare function require(path: '../reducers/gui'): typeof import('../reducers/gui');
+declare function require(path: 'scratch-paint'): typeof import('scratch-paint');
+declare function require(path: '../legacy-config'): typeof import('../legacy-config');
+
+export interface EditorStateParams {
+    localesOnly?: boolean;
+    isFullScreen?: boolean;
+    isPlayerOnly?: boolean;
+    showTelemetryModal?: boolean;
+}
+
+/**
+ * Manages an editor's Redux state.
+ *
+ * To be used in tandem with an AppStateHOC component to be provided to the editor.
+ */
+export class EditorState {
+    /**
+     * The redux store that this class wraps.
+     */
+    public readonly store: Store<unknown>;
+
+    constructor (params: EditorStateParams, configFactory: () => GUIConfig) {
+        let initialState = {};
+        let reducers = {};
+        let enhancer;
+
+        let initializedLocales = localesInitialState;
+        const locale = detectLocale(Object.keys(locales));
+        if (locale !== 'en') {
+            initializedLocales = initLocale(initializedLocales, locale);
+        }
+        if (params.localesOnly) {
+            // Used for instantiating minimal state for the unsupported
+            // browser modal
+            reducers = {locales: localesReducer};
+            initialState = {locales: initializedLocales};
+            enhancer = composeEnhancers();
+        } else {
+            // You are right, this is gross. But it's necessary to avoid
+            // importing unneeded code that will crash unsupported browsers.
+            const guiRedux = require('../reducers/gui');
+            const guiReducer = guiRedux.default;
+            const {
+                buildInitialState,
+                guiMiddleware,
+                initFullScreen,
+                initPlayer,
+                initTelemetryModal
+            } = guiRedux;
+            const {ScratchPaintReducer} = require('scratch-paint');
+
+            const configOrLegacy = configFactory ?
+                configFactory() :
+                require('../legacy-config').legacyConfig;
+
+            let initializedGui = buildInitialState(configOrLegacy);
+            if (params.isFullScreen || params.isPlayerOnly) {
+                if (params.isFullScreen) {
+                    initializedGui = initFullScreen(initializedGui);
+                }
+                if (params.isPlayerOnly) {
+                    initializedGui = initPlayer(initializedGui);
+                }
+            } else if (params.showTelemetryModal) {
+                initializedGui = initTelemetryModal(initializedGui);
+            }
+            reducers = {
+                locales: localesReducer,
+                scratchGui: guiReducer,
+                scratchPaint: ScratchPaintReducer
+            };
+            initialState = {
+                locales: initializedLocales,
+                scratchGui: initializedGui
+            };
+            enhancer = composeEnhancers(guiMiddleware);
+        }
+        const reducer = combineReducers(reducers);
+        this.store = createStore(reducer, initialState, enhancer);
+    }
+
+    dispatch (action) {
+        this.store.dispatch(action);
+    }
+}