Rename advanced editor to Ace

Author: HKalbasi

ui/frontend/ConfigMenu.tsx

@@ -22,17 +22,17 @@ interface ConfigMenuProps {
 }
 
 const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
-  const keybinding = useSelector((state: State) => state.configuration.keybinding);
-  const theme = useSelector((state: State) => state.configuration.theme);
+  const keybinding = useSelector((state: State) => state.configuration.ace.keybinding);
+  const aceTheme = useSelector((state: State) => state.configuration.ace.theme);
   const orientation = useSelector((state: State) => state.configuration.orientation);
   const editorStyle = useSelector((state: State) => state.configuration.editor);
-  const pairCharacters = useSelector((state: State) => state.configuration.pairCharacters);
+  const pairCharacters = useSelector((state: State) => state.configuration.ace.pairCharacters);
   const assemblyFlavor = useSelector((state: State) => state.configuration.assemblyFlavor);
   const demangleAssembly = useSelector((state: State) => state.configuration.demangleAssembly);
   const processAssembly = useSelector((state: State) => state.configuration.processAssembly);
 
   const dispatch = useDispatch();
-  const changeTheme = useCallback((t) => dispatch(actions.changeTheme(t)), [dispatch]);
+  const changeAceTheme = useCallback((t) => dispatch(actions.changeAceTheme(t)), [dispatch]);
   const changeKeybinding = useCallback((k) => dispatch(actions.changeKeybinding(k)), [dispatch]);
   const changeOrientation = useCallback((o) => dispatch(actions.changeOrientation(o)), [dispatch]);
   const changeEditorStyle = useCallback((e) => dispatch(actions.changeEditor(e)), [dispatch]);
@@ -48,11 +48,11 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
           id="editor-style"
           name="Style"
           a={Editor.Simple}
-          b={Editor.Advanced}
+          b={Editor.Ace}
           value={editorStyle}
           onChange={changeEditorStyle} />
 
-        {editorStyle === Editor.Advanced && (
+        {editorStyle === Editor.Ace && (
           <Fragment>
             <SelectConfig
               name="Keybinding"
@@ -64,8 +64,8 @@ const ConfigMenu: React.SFC<ConfigMenuProps> = () => {
 
             <SelectConfig
               name="Theme"
-              value={theme}
-              onChange={changeTheme}
+              value={aceTheme}
+              onChange={changeAceTheme}
             >
               {ACE_THEMES.map(t => <option key={t} value={t}>{t}</option>)}
             </SelectConfig>

ui/frontend/Editor.module.css

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Split from 'split-grid';
 
-import Editor from './Editor';
+import Editor from './editor/Editor';
 import Header from './Header';
 import Notifications from './Notifications';
 import Output from './Output';

ui/frontend/Playground.tsx

@@ -63,7 +63,7 @@ export enum ActionType {
   SetPage = 'SET_PAGE',
   ChangeEditor = 'CHANGE_EDITOR',
   ChangeKeybinding = 'CHANGE_KEYBINDING',
-  ChangeTheme = 'CHANGE_THEME',
+  ChangeAceTheme = 'CHANGE_ACE_THEME',
   ChangePairCharacters = 'CHANGE_PAIR_CHARACTERS',
   ChangeOrientation = 'CHANGE_ORIENTATION',
   ChangeAssemblyFlavor = 'CHANGE_ASSEMBLY_FLAVOR',
@@ -138,8 +138,8 @@ export const changeEditor = (editor: Editor) =>
 export const changeKeybinding = (keybinding: string) =>
   createAction(ActionType.ChangeKeybinding, { keybinding });
 
-export const changeTheme = (theme: string) =>
-  createAction(ActionType.ChangeTheme, { theme });
+export const changeAceTheme = (theme: string) =>
+  createAction(ActionType.ChangeAceTheme, { theme });
 
 export const changePairCharacters = (pairCharacters: PairCharacters) =>
   createAction(ActionType.ChangePairCharacters, { pairCharacters });
@@ -816,7 +816,7 @@ export type Action =
   | ReturnType<typeof changeOrientation>
   | ReturnType<typeof changePrimaryAction>
   | ReturnType<typeof changeProcessAssembly>
-  | ReturnType<typeof changeTheme>
+  | ReturnType<typeof changeAceTheme>
   | ReturnType<typeof requestExecute>
   | ReturnType<typeof receiveExecuteSuccess>
   | ReturnType<typeof receiveExecuteFailure>

ui/frontend/actions.ts

@@ -1,17 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { connect } from 'react-redux';
-import { aceResizeKey, offerCrateAutocompleteOnUse } from './selectors';
+import { aceResizeKey, offerCrateAutocompleteOnUse } from '../selectors';
 
-import State from './state';
-import { AceResizeKey, CommonEditorProps, Crate, PairCharacters, Position, Selection } from './types';
+import State from '../state';
+import { AceResizeKey, CommonEditorProps, Crate, PairCharacters, Position, Selection } from '../types';
 
 import styles from './Editor.module.css';
 
 type Ace = typeof import('ace-builds');
-type AceEditor = import('ace-builds').Ace.Editor;
+type AceModule = import('ace-builds').Ace.Editor;
 type AceCompleter = import('ace-builds').Ace.Completer;
 
-const displayExternCrateAutocomplete = (editor: AceEditor, autocompleteOnUse: boolean) => {
+const displayExternCrateAutocomplete = (editor: AceModule, autocompleteOnUse: boolean) => {
   const { session } = editor;
   const pos = editor.getCursorPosition();
   const line = session.getLine(pos.row);
@@ -55,11 +55,11 @@ function useRafDebouncedFunction<A extends any[]>(fn: (...args: A) => void, onCa
   }, [fn, onCall, timeout]);
 }
 
-interface AdvancedEditorProps extends AdvancedEditorAsyncProps {
+interface AceEditorProps extends AceEditorAsyncProps {
   ace: Ace;
 }
 
-interface AdvancedEditorProps {
+interface AceEditorProps {
   ace: Ace;
   autocompleteOnUse: boolean;
   code: string;
@@ -75,16 +75,16 @@ interface AdvancedEditorProps {
 }
 
 // Run an effect when the editor or prop changes
-function useEditorProp<T>(editor: AceEditor, prop: T, whenPresent: (editor: AceEditor, prop: T) => void) {
+function useEditorProp<T>(editor: AceModule, prop: T, whenPresent: (editor: AceModule, prop: T) => void) {
   useEffect(() => {
     if (editor) {
       return whenPresent(editor, prop);
     }
   }, [editor, prop, whenPresent]);
 }
 
-const AdvancedEditor: React.SFC<AdvancedEditorProps> = props => {
-  const [editor, setEditor] = useState<AceEditor>(null);
+const AceEditor: React.SFC<AceEditorProps> = props => {
+  const [editor, setEditor] = useState<AceModule>(null);
   const child = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -292,7 +292,7 @@ const AdvancedEditor: React.SFC<AdvancedEditorProps> = props => {
   }, []));
 
   return (
-    <div className={styles.advanced} ref={child} />
+    <div className={styles.ace} ref={child} />
   );
 };
 
@@ -315,7 +315,7 @@ enum LoadState {
 //
 // Themes and keybindings can be changed at runtime.
 
-interface AdvancedEditorAsyncProps {
+interface AceEditorAsyncProps {
   autocompleteOnUse: boolean;
   code: string;
   execute: () => any;
@@ -329,7 +329,7 @@ interface AdvancedEditorAsyncProps {
   pairCharacters: PairCharacters;
 }
 
-class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, AdvancedEditorAsyncState> {
+class AceEditorAsync extends React.Component<AceEditorAsyncProps, AceEditorAsyncState> {
   public constructor(props) {
     super(props);
     this.state = {
@@ -342,7 +342,7 @@ class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, Adva
   public render() {
     if (this.isLoaded()) {
       const { ace, theme, keybinding } = this.state;
-      return <AdvancedEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
+      return <AceEditor {...this.props} ace={ace} theme={theme} keybinding={keybinding} />;
     } else {
       return <div>Loading the ACE editor...</div>;
     }
@@ -447,13 +447,13 @@ class AdvancedEditorAsync extends React.Component<AdvancedEditorAsyncProps, Adva
 
   private async requireLibraries() {
     return import(
-      /* webpackChunkName: "advanced-editor" */
-      './advanced-editor'
+      /* webpackChunkName: "ace-editor" */
+      './ace-editor'
     );
   }
 }
 
-interface AdvancedEditorAsyncState {
+interface AceEditorAsyncState {
   theme?: string;
   keybinding?: string;
   themeState: LoadState;
@@ -472,7 +472,7 @@ interface PropsFromState {
 }
 
 const mapStateToProps = (state: State) => {
-  const { configuration: { theme, keybinding, pairCharacters } } = state;
+  const { configuration: { ace: { theme, keybinding, pairCharacters } } } = state;
 
   return {
     theme,
@@ -483,4 +483,4 @@ const mapStateToProps = (state: State) => {
   };
 };
 
-export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(AdvancedEditorAsync);
+export default connect<PropsFromState, undefined, CommonEditorProps>(mapStateToProps)(AceEditorAsync);

ui/frontend/AdvancedEditor.tsx renamed to ui/frontend/editor/AceEditor.tsx

@@ -0,0 +1,14 @@
+.container {
+  composes: -autoSize from '../shared.module.css';
+  position: relative;
+}
+
+.ace {
+  composes: -bodyMonospace -autoSize from '../shared.module.css';
+  position: absolute;
+}
+
+.simple {
+  composes: ace;
+  border: none;
+}

ui/frontend/editor/Editor.module.css

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import * as actions from './actions';
-import AdvancedEditor from './AdvancedEditor';
-import { CommonEditorProps, Editor as EditorType, Position, Selection } from './types';
-import { State } from './reducers';
+import * as actions from '../actions';
+import AceEditor from './AceEditor';
+import { CommonEditorProps, Editor as EditorType, Position, Selection } from '../types';
+import { State } from '../reducers';
 
 import styles from './Editor.module.css';
 
@@ -118,7 +118,7 @@ const Editor: React.SFC = () => {
   const execute = useCallback(() => dispatch(actions.performPrimaryAction()), [dispatch]);
   const onEditCode = useCallback((c) => dispatch(actions.editCode(c)), [dispatch]);
 
-  const SelectedEditor = editor === EditorType.Simple ? SimpleEditor : AdvancedEditor;
+  const SelectedEditor = editor === EditorType.Simple ? SimpleEditor : AceEditor;
 
   return (
     <div className={styles.container}>

ui/frontend/Editor.tsx renamed to ui/frontend/editor/Editor.tsx

@@ -20,13 +20,24 @@ describe('restoring saved state', () => {
 
   test('serialized data is kept', () => {
     const parsed = easyDeserialize({
-      configuration: { theme: 'xcode' },
+      configuration: { orientation: 'vertical' },
       code: 'not default code',
       notifications: { seenRustSurvey2018: true },
     });
 
-    expect(parsed.configuration.theme).toEqual('xcode');
+    expect(parsed.configuration.orientation).toEqual('vertical');
     expect(parsed.code).toEqual('not default code');
     expect(parsed.notifications.seenRustSurvey2018).toBe(true);
   });
+
+  test('data is migrated', () => {
+    const parsed = easyDeserialize({
+      configuration: { editor: 'advanced', theme: 'xcode', keybinding: 'vi', pairCharacters: 'disabled' },
+    });
+
+    expect(parsed.configuration.editor).toEqual('ace');
+    expect(parsed.configuration.ace.theme).toEqual('xcode');
+    expect(parsed.configuration.ace.keybinding).toEqual('vi');
+    expect(parsed.configuration.ace.pairCharacters).toEqual('disabled');
+  });
 });