Improve containers typings and add prop types

lib/containers/header.ts

@@ -5,8 +5,7 @@ import Header from '../components/header';
 import {closeTab, changeTab, maximize, openHamburgerMenu, unmaximize, minimize, close} from '../actions/header';
 import {connect} from '../utils/plugins';
 import {getRootGroups} from '../selectors';
-import {HyperState} from '../hyper';
-import {Dispatch} from 'redux';
+import {HyperState, HyperDispatch} from '../hyper';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
@@ -29,8 +28,7 @@ const getTabs = createSelector(
     })
 );
 
-export const HeaderContainer = connect(
-  (state: HyperState) => {
+const mapStateToProps = (state: HyperState) => {
   return {
     // active is an index
     isMac,
@@ -43,8 +41,9 @@ export const HeaderContainer = connect(
     showHamburgerMenu: state.ui.showHamburgerMenu,
     showWindowControls: state.ui.showWindowControls
   };
-  },
-  (dispatch: Dispatch<any>) => {
+};
+
+const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
     onCloseTab: (i: string) => {
       dispatch(closeTab(i));
@@ -74,6 +73,8 @@ export const HeaderContainer = connect(
       dispatch(close());
     }
   };
-  },
-  null
-)(Header, 'Header');
+};
+
+export const HeaderContainer = connect(mapStateToProps, mapDispatchToProps, null)(Header, 'Header');
+
+export type HeaderConnectedProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

lib/containers/hyper.tsx

@@ -11,12 +11,11 @@ import stylis from 'stylis';
 import {HeaderContainer} from './header';
 import TermsContainer from './terms';
 import NotificationsContainer from './notifications';
-import {HyperState} from '../hyper';
-import {Dispatch} from 'redux';
+import {HyperState, HyperProps, HyperDispatch} from '../hyper';
 
 const isMac = /Mac/.test(navigator.userAgent);
 
-class Hyper extends React.PureComponent<any, any> {
+class Hyper extends React.PureComponent<HyperProps, {lastConfigUpdate: number}> {
   mousetrap!: MousetrapInstance;
   terms: any;
   constructor(props: any) {
@@ -26,7 +25,7 @@ class Hyper extends React.PureComponent<any, any> {
     };
   }
   //TODO: Remove usage of legacy and soon deprecated lifecycle methods
-  UNSAFE_componentWillReceiveProps(next: any) {
+  UNSAFE_componentWillReceiveProps(next: HyperProps) {
     if (this.props.backgroundColor !== next.backgroundColor) {
       // this can be removed when `setBackgroundColor` in electron
       // starts working again
@@ -90,9 +89,9 @@ class Hyper extends React.PureComponent<any, any> {
     window.focusActiveTerm = this.handleFocusActive;
   };
 
-  componentDidUpdate(prev: any) {
+  componentDidUpdate(prev: HyperProps) {
     if (prev.activeSession !== this.props.activeSession) {
-      this.handleFocusActive(this.props.activeSession);
+      this.handleFocusActive(this.props.activeSession!);
     }
   }
 
@@ -147,8 +146,7 @@ class Hyper extends React.PureComponent<any, any> {
   }
 }
 
-const HyperContainer = connect(
-  (state: HyperState) => {
+const mapStateToProps = (state: HyperState) => {
   return {
     isMac,
     customCSS: state.ui.css,
@@ -160,16 +158,18 @@ const HyperContainer = connect(
     fullScreen: state.ui.fullScreen,
     lastConfigUpdate: state.ui._lastUpdate
   };
-  },
-  (dispatch: Dispatch<any>) => {
+};
+
+const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
     execCommand: (command: any, fn: any, e: any) => {
       dispatch(uiActions.execCommand(command, fn, e));
     }
   };
-  },
-  null,
-  {forwardRef: true}
-)(Hyper, 'Hyper');
+};
+
+const HyperContainer = connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Hyper, 'Hyper');
 
 export default HyperContainer;
+
+export type HyperConnectedProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

lib/containers/notifications.ts

@@ -2,56 +2,75 @@ import Notifications from '../components/notifications';
 import {installUpdate} from '../actions/updater';
 import {connect} from '../utils/plugins';
 import {dismissNotification} from '../actions/notifications';
-import {HyperState} from '../hyper';
-import {Dispatch} from 'redux';
+import {HyperState, HyperDispatch} from '../hyper';
 
-const NotificationsContainer = connect(
-  (state: HyperState) => {
+const mapStateToProps = (state: HyperState) => {
   const {ui} = state;
   const {notifications} = ui;
-    const state_ = {};
+  let state_: Partial<{
+    fontShowing: boolean;
+    fontSize: number;
+    fontText: string;
+    resizeShowing: boolean;
+    cols: number | null;
+    rows: number | null;
+    updateShowing: boolean;
+    updateVersion: string | null;
+    updateNote: string | null;
+    updateReleaseUrl: string | null;
+    updateCanInstall: boolean | null;
+    messageShowing: boolean;
+    messageText: string | null;
+    messageURL: string | null;
+    messageDismissable: boolean | null;
+  }> = {};
 
   if (notifications.font) {
     const fontSize = ui.fontSizeOverride || ui.fontSize;
 
-      Object.assign(state_, {
+    state_ = {
+      ...state_,
       fontShowing: true,
       fontSize,
       fontText: `${fontSize}px`
-      });
+    };
   }
 
   if (notifications.resize) {
     const cols = ui.cols;
     const rows = ui.rows;
 
-      Object.assign(state_, {
+    state_ = {
+      ...state_,
       resizeShowing: true,
       cols,
       rows
-      });
+    };
   }
 
   if (notifications.updates) {
-      Object.assign(state_, {
+    state_ = {
+      ...state_,
       updateShowing: true,
       updateVersion: ui.updateVersion,
       updateNote: ui.updateNotes!.split('\n')[0],
       updateReleaseUrl: ui.updateReleaseUrl,
       updateCanInstall: ui.updateCanInstall
-      });
+    };
   } else if (notifications.message) {
-      Object.assign(state_, {
+    state_ = {
+      ...state_,
       messageShowing: true,
       messageText: ui.messageText,
       messageURL: ui.messageURL,
       messageDismissable: ui.messageDismissable
-      });
+    };
   }
 
   return state_;
-  },
-  (dispatch: Dispatch<any>) => {
+};
+
+const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
     onDismissFont: () => {
       dispatch(dismissNotification('font'));
@@ -69,8 +88,10 @@ const NotificationsContainer = connect(
       dispatch(installUpdate());
     }
   };
-  },
-  null
-)(Notifications, 'Notifications');
+};
+
+const NotificationsContainer = connect(mapStateToProps, mapDispatchToProps, null)(Notifications, 'Notifications');
 
 export default NotificationsContainer;
+
+export type NotificationsConnectedProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

lib/containers/terms.ts

@@ -4,11 +4,9 @@ import {resizeSession, sendSessionData, setSessionXtermTitle, setActiveSession,
 
 import {openContextMenu} from '../actions/ui';
 import {getRootGroups} from '../selectors';
-import {HyperState, TermsProps} from '../hyper';
-import {Dispatch} from 'redux';
+import {HyperState, HyperDispatch} from '../hyper';
 
-const TermsContainer = connect(
-  (state: HyperState): TermsProps => {
+const mapStateToProps = (state: HyperState) => {
   const {sessions} = state.sessions;
   return {
     sessions,
@@ -48,8 +46,9 @@ const TermsContainer = connect(
     macOptionSelectionMode: state.ui.macOptionSelectionMode,
     disableLigatures: state.ui.disableLigatures
   };
-  },
-  (dispatch: Dispatch<any>) => {
+};
+
+const mapDispatchToProps = (dispatch: HyperDispatch) => {
   return {
     onData(uid: string, data: any) {
       dispatch(sendSessionData(uid, data));
@@ -75,9 +74,10 @@ const TermsContainer = connect(
       dispatch(openContextMenu(uid, selection));
     }
   };
-  },
-  null,
-  {forwardRef: true}
-)(Terms, 'Terms');
+};
+
+const TermsContainer = connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(Terms, 'Terms');
 
 export default TermsContainer;
+
+export type TermsConnectedProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

lib/hyper.d.ts

@@ -185,44 +185,21 @@ import configureStore from './store/configure-store';
 export type HyperThunkDispatch = ThunkDispatch<HyperState, undefined, HyperActions>;
 export type HyperDispatch = ReturnType<typeof configureStore>['dispatch'];
 
-export type TermsProps = {
-  activeRootGroup: string | null;
-  activeSession: string | null;
+type extensionProps = Partial<{
+  customChildren: any;
+  customChildrenBefore: any;
   customCSS: string;
-  fontSmoothing: string;
-  termGroups: Immutable<ITermGroup>[];
-} & immutableRecord<
-  Pick<
-    uiState,
-    | 'backgroundColor'
-    | 'bell'
-    | 'bellSound'
-    | 'bellSoundURL'
-    | 'borderColor'
-    | 'colors'
-    | 'cols'
-    | 'copyOnSelect'
-    | 'cursorAccentColor'
-    | 'cursorBlink'
-    | 'cursorColor'
-    | 'cursorShape'
-    | 'disableLigatures'
-    | 'fontFamily'
-    | 'fontSize'
-    | 'fontWeight'
-    | 'fontWeightBold'
-    | 'foregroundColor'
-    | 'letterSpacing'
-    | 'lineHeight'
-    | 'macOptionSelectionMode'
-    | 'modifierKeys'
-    | 'padding'
-    | 'quickEdit'
-    | 'rows'
-    | 'scrollback'
-    | 'selectionColor'
-    | 'uiFontFamily'
-    | 'webGLRenderer'
-  >
-> &
-  immutableRecord<Pick<sessionState, 'sessions' | 'write'>>;
+  customInnerChildren: any;
+}>;
+
+import {HeaderConnectedProps} from './containers/header';
+export type HeaderProps = HeaderConnectedProps & extensionProps;
+
+import {HyperConnectedProps} from './containers/hyper';
+export type HyperProps = HyperConnectedProps & extensionProps;
+
+import {NotificationsConnectedProps} from './containers/notifications';
+export type NotificationsProps = NotificationsConnectedProps & extensionProps;
+
+import {TermsConnectedProps} from './containers/terms';
+export type TermsProps = TermsConnectedProps & extensionProps & {ref_: any};