Upgrade to Flow with well formed exports

Followed https://medium.com/flow-type/types-first-a-scalable-new-architecture-for-flow-3d8c7ba1d4eb.

Need to assess if this will help TypeScript conversion in the future.

newIDE/app/.flowconfig

@@ -24,7 +24,4 @@
 
 [options]
 module.ignore_non_literal_requires=true
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-# For node_modules/jss/src/Jss.js:
-suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore
+; well_formed_exports=true

newIDE/app/package-lock.json

@@ -10842,9 +10842,9 @@
       }
     },
     "flow-bin": {
-      "version": "0.120.1",
-      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.120.1.tgz",
-      "integrity": "sha512-KgE+d+rKzdXzhweYVJty1QIOOZTTbtnXZf+4SLnmArLvmdfeLreQOZpeLbtq5h79m7HhDzX/HkUkoyu/fmSC2A==",
+      "version": "0.131.0",
+      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.131.0.tgz",
+      "integrity": "sha512-fZmoIBcDrtLhy/NNMxwJysSYzMr1ksRcAOMi3AHSoYXfcuQqTvhGJx+wqjlIOqIwz8RRYm8J4V4JrSJbIKP+Xg==",
       "dev": true
     },
     "flow-coverage-report": {

newIDE/app/package.json

@@ -13,7 +13,7 @@
     "@storybook/react": "5.1.9",
     "axios-mock-adapter": "^1.19.0",
     "babel-core": "^7.0.0-bridge.0",
-    "flow-bin": "0.120.1",
+    "flow-bin": "0.131.0",
     "flow-coverage-report": "^0.4.0",
     "folder-hash": "^3.0.0",
     "follow-redirects": "^1.2.3",

newIDE/app/src/AssetStore/AssetCard.js

@@ -51,7 +51,11 @@ type Props = {|
   onOpenDetails: () => void,
 |};
 
-export const AssetCard = ({ assetShortHeader, onOpenDetails, size }: Props) => {
+export const AssetCard = ({
+  assetShortHeader,
+  onOpenDetails,
+  size,
+}: Props): React.Node => {
   return (
     <ButtonBase onClick={onOpenDetails} focusRipple>
       <div style={{ ...styles.cardContainer, width: size, height: size }}>

newIDE/app/src/AssetStore/AssetDetails.js

@@ -85,7 +85,7 @@ export const AssetDetails = ({
   onClose,
   canInstall,
   isBeingInstalled,
-}: Props) => {
+}: Props): React.Node => {
   const { authors, licenses } = React.useContext(AssetStoreContext);
   const [asset, setAsset] = React.useState<?Asset>(null);
   const [error, setError] = React.useState<?Error>(null);

newIDE/app/src/AssetStore/AssetStoreContext.js

@@ -26,23 +26,25 @@ type AssetStoreState = {|
   filtersState: FiltersState,
 |};
 
-export const AssetStoreContext = React.createContext<AssetStoreState>({
-  filters: null,
-  authors: null,
-  licenses: null,
-  searchResults: null,
-  fetchAssetsAndFilters: () => {},
-  error: null,
-  searchText: '',
-  setSearchText: () => {},
-  filtersState: {
-    chosenFilters: new Set(),
-    addFilter: () => {},
-    removeFilter: () => {},
-    chosenCategory: null,
-    setChosenCategory: () => {},
-  },
-});
+export const AssetStoreContext: React$Context<AssetStoreState> = React.createContext<AssetStoreState>(
+  {
+    filters: null,
+    authors: null,
+    licenses: null,
+    searchResults: null,
+    fetchAssetsAndFilters: () => {},
+    error: null,
+    searchText: '',
+    setSearchText: () => {},
+    filtersState: {
+      chosenFilters: new Set(),
+      addFilter: () => {},
+      removeFilter: () => {},
+      chosenCategory: null,
+      setChosenCategory: () => {},
+    },
+  }
+);
 
 type AssetStoreStateProviderProps = {|
   children: React.Node,
@@ -60,7 +62,7 @@ const getAssetShortHeaderSearchTerms = (assetShortHeader: AssetShortHeader) => {
 
 export const AssetStoreStateProvider = ({
   children,
-}: AssetStoreStateProviderProps) => {
+}: AssetStoreStateProviderProps): React.Node => {
   const [assetShortHeadersById, setAssetShortHeadersById] = React.useState<?{
     [string]: AssetShortHeader,
   }>(null);

newIDE/app/src/AssetStore/ExtensionStore/ExtensionIcon.js

@@ -21,7 +21,10 @@ type Props = {|
   size: number,
 |};
 
-export const ExtensionIcon = ({ extensionShortHeader, size }: Props) => {
+export const ExtensionIcon = ({
+  extensionShortHeader,
+  size,
+}: Props): React.Element<'div'> => {
   return (
     <div style={styles.iconBackground}>
       <CorsAwareImage

newIDE/app/src/AssetStore/ExtensionStore/ExtensionInstallDialog.js

@@ -1,4 +1,5 @@
 // @flow
+import type { Node } from 'React';
 import { Trans } from '@lingui/macro';
 import React, { Component } from 'react';
 import Dialog from '../../UI/Dialog';
@@ -49,7 +50,7 @@ const getTransformedDescription = (extensionHeader: ExtensionHeader) => {
 };
 
 export default class ExtensionInstallDialog extends Component<Props, State> {
-  state = {
+  state: State = {
     extensionHeader: null,
     error: null,
   };
@@ -58,7 +59,7 @@ export default class ExtensionInstallDialog extends Component<Props, State> {
     this._loadExtensionheader();
   }
 
-  _loadExtensionheader = () => {
+  _loadExtensionheader: () => void = () => {
     this.setState({
       error: null,
     });
@@ -76,7 +77,7 @@ export default class ExtensionInstallDialog extends Component<Props, State> {
     );
   };
 
-  render() {
+  render(): Node {
     const {
       isInstalling,
       extensionShortHeader,

newIDE/app/src/AssetStore/ExtensionStore/ExtensionListItem.js

@@ -40,7 +40,7 @@ export const ExtensionListItem = ({
   extensionShortHeader,
   onChoose,
   onHeightComputed,
-}: Props) => {
+}: Props): React.Node => {
   const alreadyInstalled = project.hasEventsFunctionsExtensionNamed(
     extensionShortHeader.name
   );

newIDE/app/src/AssetStore/ExtensionStore/ExtensionStoreContext.js

@@ -21,21 +21,23 @@ type ExtensionStoreState = {|
   filtersState: FiltersState,
 |};
 
-export const ExtensionStoreContext = React.createContext<ExtensionStoreState>({
-  filters: null,
-  searchResults: null,
-  fetchExtensionsAndFilters: () => {},
-  error: null,
-  searchText: '',
-  setSearchText: () => {},
-  filtersState: {
-    chosenFilters: new Set(),
-    addFilter: () => {},
-    removeFilter: () => {},
-    chosenCategory: null,
-    setChosenCategory: () => {},
-  },
-});
+export const ExtensionStoreContext: React$Context<ExtensionStoreState> = React.createContext<ExtensionStoreState>(
+  {
+    filters: null,
+    searchResults: null,
+    fetchExtensionsAndFilters: () => {},
+    error: null,
+    searchText: '',
+    setSearchText: () => {},
+    filtersState: {
+      chosenFilters: new Set(),
+      addFilter: () => {},
+      removeFilter: () => {},
+      chosenCategory: null,
+      setChosenCategory: () => {},
+    },
+  }
+);
 
 type ExtensionStoreStateProviderProps = {|
   children: React.Node,
@@ -53,7 +55,7 @@ const getExtensionSearchTerms = (extension: ExtensionShortHeader) => {
 
 export const ExtensionStoreStateProvider = ({
   children,
-}: ExtensionStoreStateProviderProps) => {
+}: ExtensionStoreStateProviderProps): React.Node => {
   const [
     extensionShortHeadersByName,
     setExtensionShortHeadersByName,

newIDE/app/src/AssetStore/ExtensionStore/ExtensionsSearchDialog.js

@@ -25,7 +25,7 @@ export default function ExtensionsSearchDialog({
   project,
   onClose,
   onInstallExtension,
-}: Props) {
+}: Props): React.Node {
   const [isInstalling, setIsInstalling] = React.useState(false);
   const [extensionWasInstalled, setExtensionWasInstalled] = React.useState(
     false

newIDE/app/src/AssetStore/ExtensionStore/index.js

@@ -36,7 +36,7 @@ export const ExtensionStore = ({
   project,
   onInstall,
   showOnlyWithBehaviors,
-}: Props) => {
+}: Props): React.Node => {
   const [
     selectedExtensionShortHeader,
     setSelectedExtensionShortHeader,

newIDE/app/src/AssetStore/InstallAsset.js

@@ -44,7 +44,7 @@ const toPascalCase = (str: string) => {
     });
 };
 
-export const sanitizeObjectName = (objectName: string) => {
+export const sanitizeObjectName = (objectName: string): string => {
   const trimmedObjectName = objectName.trim();
   if (!trimmedObjectName) return 'UnnamedObject';
 
@@ -141,7 +141,7 @@ export const addAssetToProject = async ({
   project: gdProject,
   events: gdEventsList,
   objectsContainer: gdObjectsContainer,
-|}) => {
+|}): Promise<{| createdObjects: Array<gdObject> |}> => {
   const objectNewNames = {};
   const resourceNewNames = {};
   const createdObjects: Array<gdObject> = [];

newIDE/app/src/AssetStore/NewObjectDialog.js

@@ -96,7 +96,7 @@ export default function NewObjectDialog({
   onClose,
   onCreateNewObject,
   onObjectAddedFromAsset,
-}: Props) {
+}: Props): React.Node {
   const {
     setNewObjectDialogDefaultTab,
     getNewObjectDialogDefaultTab,

newIDE/app/src/AssetStore/ResourceStore/ResourceCard.js

@@ -135,7 +135,11 @@ type Props = {|
   onChoose: () => void,
 |};
 
-export const ResourceCard = ({ resource, onChoose, size }: Props) => {
+export const ResourceCard = ({
+  resource,
+  onChoose,
+  size,
+}: Props): null | React.Node => {
   const resourceKind = resource.type;
 
   switch (resourceKind) {

newIDE/app/src/AssetStore/ResourceStore/ResourceStoreContext.js

@@ -26,23 +26,25 @@ type ResourceStoreState = {|
   filtersState: FiltersState,
 |};
 
-export const ResourceStoreContext = React.createContext<ResourceStoreState>({
-  filters: null,
-  authors: null,
-  licenses: null,
-  searchResults: null,
-  fetchResourcesAndFilters: () => {},
-  error: null,
-  searchText: '',
-  setSearchText: () => {},
-  filtersState: {
-    chosenFilters: new Set(),
-    addFilter: () => {},
-    removeFilter: () => {},
-    chosenCategory: null,
-    setChosenCategory: () => {},
-  },
-});
+export const ResourceStoreContext: React$Context<ResourceStoreState> = React.createContext<ResourceStoreState>(
+  {
+    filters: null,
+    authors: null,
+    licenses: null,
+    searchResults: null,
+    fetchResourcesAndFilters: () => {},
+    error: null,
+    searchText: '',
+    setSearchText: () => {},
+    filtersState: {
+      chosenFilters: new Set(),
+      addFilter: () => {},
+      removeFilter: () => {},
+      chosenCategory: null,
+      setChosenCategory: () => {},
+    },
+  }
+);
 
 type ResourceStoreStateProviderProps = {|
   children: React.Node,
@@ -54,7 +56,7 @@ const getResourceSearchTerms = (resource: Resource) => {
 
 export const ResourceStoreStateProvider = ({
   children,
-}: ResourceStoreStateProviderProps) => {
+}: ResourceStoreStateProviderProps): React.Node => {
   const [resourcesByUrl, setResourcesByUrl] = React.useState<?{
     [string]: Resource,
   }>(null);

newIDE/app/src/AssetStore/ResourceStore/index.js

@@ -25,7 +25,10 @@ type Props = {
   resourceKind: string,
 };
 
-export const ResourceStore = ({ onChoose, resourceKind }: Props) => {
+export const ResourceStore = ({
+  onChoose,
+  resourceKind,
+}: Props): React.Node => {
   const {
     filters,
     searchResults,

newIDE/app/src/AssetStore/index.js

@@ -33,7 +33,7 @@ export const AssetStore = ({
   objectsContainer,
   events,
   onOpenDetails,
-}: Props) => {
+}: Props): React.Node => {
   const {
     filters,
     searchResults,

newIDE/app/src/BehaviorTypeSelector/index.js

@@ -23,14 +23,14 @@ export default class BehaviorTypeSelector extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     behaviorMetadata: enumerateBehaviorsMetadata(
       this.props.project.getCurrentPlatform(),
       this.props.project
     ),
   };
 
-  render() {
+  render(): React.Node {
     const { disabled, objectType, value, onChange } = this.props;
     const { behaviorMetadata } = this.state;
 

newIDE/app/src/BehaviorsEditor/BehaviorsEditorService.js

@@ -6,7 +6,7 @@ import Physics2Editor from './Editors/Physics2Editor';
  * A service returning editor components for each behavior type.
  */
 export default {
-  getEditor(behaviorType: string) {
+  getEditor(behaviorType: string): any | typeof BehaviorPropertiesEditor {
     if (!this.components[behaviorType]) {
       return BehaviorPropertiesEditor; // Default properties editor
     }

newIDE/app/src/BehaviorsEditor/Editors/BehaviorPropertiesEditor.js

@@ -11,7 +11,7 @@ import { type BehaviorEditorProps } from './BehaviorEditorProps.flow';
 type Props = BehaviorEditorProps;
 
 export default class BehaviorPropertiesEditor extends React.Component<Props> {
-  render() {
+  render(): React.Node {
     const { behavior, behaviorContent } = this.props;
     const properties = behavior.getProperties(behaviorContent.getContent());
 

newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/PolygonEditor.js

@@ -29,7 +29,7 @@ type Props = {|
 |};
 
 export default class PolygonEditor extends React.Component<Props> {
-  _isPolygonConvex(vertices: Array<Vertex>) {
+  _isPolygonConvex(vertices: Array<Vertex>): boolean {
     // Get edges
     let edges = [];
     let v1 = null;
@@ -80,7 +80,7 @@ export default class PolygonEditor extends React.Component<Props> {
     return true;
   }
 
-  render() {
+  render(): React.Node {
     const {
       vertices,
       onChangeVertexX,

newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/ShapePreview.js

@@ -24,7 +24,7 @@ type State = {|
   draggedIndex: number,
 |};
 
-const ShapePreview = (props: Props) => {
+const ShapePreview = (props: Props): React.Element<'div'> => {
   const svgRef = React.useRef<React.ElementRef<'svg'> | null>(null);
   const [state, setState] = React.useState<State>({
     draggedVertex: null,

newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/index.js

@@ -67,7 +67,7 @@ const BitGroupEditor = (props: {|
   );
 };
 
-const Physics2Editor = (props: Props) => {
+const Physics2Editor = (props: Props): React.Node => {
   const { current: resourcesLoader } = React.useRef(ResourcesLoader);
   const [image, setImage] = React.useState('');
   const { behavior, behaviorContent } = props;

newIDE/app/src/BehaviorsEditor/EmptyBehaviorsPlaceholder.js

@@ -7,7 +7,7 @@ import Text from '../UI/Text';
 import Paper from '@material-ui/core/Paper';
 import { Line, Column } from '../UI/Grid';
 
-const EmptyBehaviorsPlaceholder = () => (
+const EmptyBehaviorsPlaceholder = (): React.Node => (
   <Column alignItems="center">
     <Paper
       variant="outlined"

newIDE/app/src/BehaviorsEditor/NewBehaviorDialog.js

@@ -77,7 +77,7 @@ export default function NewBehaviorDialog({
   onClose,
   onChoose,
   objectType,
-}: Props) {
+}: Props): null | React.Node {
   const [showDeprecated, setShowDeprecated] = React.useState(false);
   const [searchText, setSearchText] = React.useState('');
   const [currentTab, setCurrentTab] = React.useState('installed');

newIDE/app/src/BehaviorsEditor/index.js

@@ -54,7 +54,7 @@ type Props = {|
   resourceExternalEditors: Array<ResourceExternalEditor>,
 |};
 
-const BehaviorsEditor = (props: Props) => {
+const BehaviorsEditor = (props: Props): React.Node => {
   const [newBehaviorDialogOpen, setNewBehaviorDialogOpen] = React.useState(
     false
   );

newIDE/app/src/BrowserApp.js

@@ -28,7 +28,7 @@ import DropboxStorageProvider from './ProjectsStorage/DropboxStorageProvider';
 import OneDriveStorageProvider from './ProjectsStorage/OneDriveStorageProvider';
 import { BrowserResourceFetcher } from './ProjectsStorage/ResourceFetcher/BrowserResourceFetcher';
 
-export const create = (authentification: Authentification) => {
+export const create = (authentification: Authentification): React.Node => {
   Window.setUpContextMenu();
 
   let app = null;

newIDE/app/src/CodeEditor/Theme/index.js

@@ -41,4 +41,4 @@ const themes: Array<CodeEditorTheme> = [
   OneDark,
 ];
 
-export const getAllThemes = () => themes;
+export const getAllThemes = (): Array<CodeEditorTheme> => themes;

newIDE/app/src/CodeEditor/index.js

@@ -34,12 +34,12 @@ let monacoCompletionsInitialized = false;
 let monacoThemesInitialized = false;
 
 export class CodeEditor extends React.Component<Props, State> {
-  state = {
+  state: State = {
     MonacoEditor: null,
     error: null,
   };
 
-  setupEditorThemes = (monaco: any) => {
+  setupEditorThemes: (monaco: any) => void = (monaco: any) => {
     if (!monacoThemesInitialized) {
       monacoThemesInitialized = true;
 
@@ -55,7 +55,10 @@ export class CodeEditor extends React.Component<Props, State> {
     }
   };
 
-  setupEditorCompletions = (editor: any, monaco: any) => {
+  setupEditorCompletions: (editor: any, monaco: any) => void = (
+    editor: any,
+    monaco: any
+  ) => {
     if (!monacoCompletionsInitialized) {
       monacoCompletionsInitialized = true;
 
@@ -104,14 +107,16 @@ export class CodeEditor extends React.Component<Props, State> {
       .catch(this.handleLoadError);
   }
 
-  _handleContextMenu = (event: SyntheticEvent<>) => {
+  _handleContextMenu: (event: SyntheticEvent<>) => void = (
+    event: SyntheticEvent<>
+  ) => {
     // Prevent right click to bubble up and trigger the context menu
     // of the event.
     event.preventDefault();
     event.stopPropagation();
   };
 
-  render() {
+  render(): React.Element<'div'> | React.Node {
     const { MonacoEditor, error } = this.state;
     if (error) {
       return (

newIDE/app/src/CommandPalette/CommandHooks.js

@@ -52,7 +52,7 @@ export const UseCommandHook = (props: {|
   name: CommandName,
   enabled: boolean,
   command: SimpleCommand,
-|}) => {
+|}): null => {
   useCommand(props.name, props.enabled, props.command);
   return null;
 };
@@ -65,7 +65,7 @@ export const UseCommandWithOptionsHook = (props: {|
   name: CommandName,
   enabled: boolean,
   command: CommandWithOptions,
-|}) => {
+|}): null => {
   useCommandWithOptions(props.name, props.enabled, props.command);
   return null;
 };

newIDE/app/src/CommandPalette/CommandManager.js

@@ -43,7 +43,10 @@ export default class CommandManager implements CommandManagerInterface {
     this._commands = {};
   }
 
-  registerCommand = (commandName: CommandName, command: Command) => {
+  registerCommand: (commandName: CommandName, command: Command) => void = (
+    commandName: CommandName,
+    command: Command
+  ) => {
     if (this._commands[commandName])
       return console.warn(
         `Tried to register command ${commandName}, but it is already registered.`
@@ -51,7 +54,9 @@ export default class CommandManager implements CommandManagerInterface {
     this._commands[commandName] = command;
   };
 
-  deregisterCommand = (commandName: CommandName) => {
+  deregisterCommand: (commandName: CommandName) => void = (
+    commandName: CommandName
+  ) => {
     if (!this._commands[commandName])
       return console.warn(
         `Tried to deregister command ${commandName}, but it is not registered.`
@@ -59,13 +64,15 @@ export default class CommandManager implements CommandManagerInterface {
     delete this._commands[commandName];
   };
 
-  getNamedCommand = (commandName: CommandName) => {
+  getNamedCommand: (commandName: CommandName) => ?NamedCommand = (
+    commandName: CommandName
+  ) => {
     const command = this._commands[commandName];
     if (command) return { name: commandName, ...(command: Command) };
     return null;
   };
 
-  getAllNamedCommands = () => {
+  getAllNamedCommands: () => Array<NamedCommand> = () => {
     return Object.keys(this._commands).map<NamedCommand>(commandName => {
       const command = this._commands[commandName];
       return { ...(command: Command), name: commandName };

newIDE/app/src/CommandPalette/CommandPalette/AutocompletePicker.js

@@ -39,7 +39,7 @@ type Props<T> = {|
 
 const AutocompletePicker = (
   props: Props<NamedCommand> | Props<CommandOption>
-) => {
+): React.Node => {
   const [open, setOpen] = React.useState(true);
   const shortcutMap = useShortcutMap();
   const classes = useStyles();

newIDE/app/src/CommandPalette/CommandPalette/FilterOptions.js

@@ -8,7 +8,7 @@ import { fuzzyOrEmptyFilter } from '../../Utils/FuzzyOrEmptyFilter';
 const filterOptions = <T>(
   options: Array<T>,
   state: { getOptionLabel: T => string, inputValue: string }
-) => {
+): Array<T> => {
   const searchText = state.inputValue.toLowerCase();
   if (searchText === '') return options;
 

newIDE/app/src/CommandPalette/CommandPalette/index.js

@@ -27,108 +27,109 @@ export type CommandPaletteInterface = {|
 
 type PaletteMode = 'closed' | 'command' | 'option';
 
-const CommandPalette = React.forwardRef<{||}, CommandPaletteInterface>(
-  (props, ref) => {
-    const classes = useStyles();
-    const commandManager = React.useContext(CommandsContext);
-    const [mode, setMode] = React.useState<PaletteMode>('closed');
-    const [
-      selectedCommand,
-      selectCommand,
-    ] = React.useState<null | NamedCommandWithOptions>(null);
+const CommandPalette: React$AbstractComponent<
+  {||},
+  CommandPaletteInterface
+> = React.forwardRef<{||}, CommandPaletteInterface>((props, ref) => {
+  const classes = useStyles();
+  const commandManager = React.useContext(CommandsContext);
+  const [mode, setMode] = React.useState<PaletteMode>('closed');
+  const [
+    selectedCommand,
+    selectCommand,
+  ] = React.useState<null | NamedCommandWithOptions>(null);
 
-    // Takes a command and if simple command, executes handler
-    // If command with options, opens options of the palette
-    const handleCommandChoose = React.useCallback(
-      (command: NamedCommand) => {
-        if (command.handler) {
-          // Simple command
-          command.handler();
-          if (command.name !== 'OPEN_COMMAND_PALETTE') {
-            // Don't close palette if the command is for opening it
-            setMode('closed');
-          }
-        } else {
-          // Command with options
-          selectCommand(command);
-          setMode('option');
+  // Takes a command and if simple command, executes handler
+  // If command with options, opens options of the palette
+  const handleCommandChoose = React.useCallback(
+    (command: NamedCommand) => {
+      if (command.handler) {
+        // Simple command
+        command.handler();
+        if (command.name !== 'OPEN_COMMAND_PALETTE') {
+          // Don't close palette if the command is for opening it
+          setMode('closed');
         }
-      },
-      [selectCommand, setMode]
-    );
+      } else {
+        // Command with options
+        selectCommand(command);
+        setMode('option');
+      }
+    },
+    [selectCommand, setMode]
+  );
 
-    // Executes handler of a command option and closes palette
-    const handleOptionChoose = (option: CommandOption) => {
-      option.handler();
-      setMode('closed');
-    };
+  // Executes handler of a command option and closes palette
+  const handleOptionChoose = (option: CommandOption) => {
+    option.handler();
+    setMode('closed');
+  };
 
-    // Opens the palette in command mode
-    const openPalette = React.useCallback((open? = true) => {
-      if (open) setMode('command');
-      else setMode('closed');
-    }, []);
+  // Opens the palette in command mode
+  const openPalette = React.useCallback((open? = true) => {
+    if (open) setMode('command');
+    else setMode('closed');
+  }, []);
 
-    // Takes command name, gets command object from
-    // manager and launches command accordingly
-    const launchCommand = React.useCallback(
-      commandName => {
-        const command = commandManager.getNamedCommand(commandName);
-        if (!command) return;
-        handleCommandChoose(command);
-      },
-      [handleCommandChoose, commandManager]
-    );
+  // Takes command name, gets command object from
+  // manager and launches command accordingly
+  const launchCommand = React.useCallback(
+    commandName => {
+      const command = commandManager.getNamedCommand(commandName);
+      if (!command) return;
+      handleCommandChoose(command);
+    },
+    [handleCommandChoose, commandManager]
+  );
 
-    React.useImperativeHandle(ref, () => ({
-      open: openPalette,
-      launchCommand,
-    }));
+  React.useImperativeHandle(ref, () => ({
+    open: openPalette,
+    launchCommand,
+  }));
 
-    return (
-      <I18n>
-        {({ i18n }) => (
-          <Dialog
-            onClose={() => setMode('closed')}
-            aria-label="command-palette"
-            open={mode !== 'closed'}
-            fullWidth
-            hideBackdrop
-            maxWidth="sm"
-            classes={classes}
-            transitionDuration={0}
-          >
-            {mode === 'command' && (
-              // Command picker
-              <AutocompletePicker
-                i18n={i18n}
-                items={
-                  (commandManager
-                    .getAllNamedCommands()
-                    .filter(
-                      command => !commandsList[command.name].ghost
-                    ): Array<NamedCommand>)
-                }
-                placeholder={t`Start typing a command...`}
-                onClose={() => setMode('closed')}
-                onSelect={handleCommandChoose}
-              />
-            )}
-            {mode === 'option' && selectedCommand && (
-              // Command options picker
-              <AutocompletePicker
-                i18n={i18n}
-                items={selectedCommand.generateOptions()}
-                placeholder={commandsList[selectedCommand.name]}
-                onClose={() => setMode('closed')}
-                onSelect={handleOptionChoose}
-              />
-            )}
-          </Dialog>
-        )}
-      </I18n>
-    );
-  }
-);
+  return (
+    <I18n>
+      {({ i18n }) => (
+        <Dialog
+          onClose={() => setMode('closed')}
+          aria-label="command-palette"
+          open={mode !== 'closed'}
+          fullWidth
+          hideBackdrop
+          maxWidth="sm"
+          classes={classes}
+          transitionDuration={0}
+        >
+          {mode === 'command' && (
+            // Command picker
+            <AutocompletePicker
+              i18n={i18n}
+              items={
+                (commandManager
+                  .getAllNamedCommands()
+                  .filter(
+                    command => !commandsList[command.name].ghost
+                  ): Array<NamedCommand>)
+              }
+              placeholder={t`Start typing a command...`}
+              onClose={() => setMode('closed')}
+              onSelect={handleCommandChoose}
+            />
+          )}
+          {mode === 'option' && selectedCommand && (
+            // Command options picker
+            <AutocompletePicker
+              i18n={i18n}
+              items={selectedCommand.generateOptions()}
+              placeholder={commandsList[selectedCommand.name]}
+              onClose={() => setMode('closed')}
+              onSelect={handleOptionChoose}
+            />
+          )}
+        </Dialog>
+      )}
+    </I18n>
+  );
+});
 
 export default CommandPalette;

newIDE/app/src/CommandPalette/CommandsContext.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import CommandManager, { CommandManagerInterface } from './CommandManager';
 import useRefInit from './UseRefInitHook';
 
-const CommandsContext = React.createContext<CommandManagerInterface>(
+const CommandsContext: React$Context<CommandManagerInterface> = React.createContext<CommandManagerInterface>(
   new CommandManager()
 );
 
@@ -11,7 +11,7 @@ type Props = {
   children: React.Node,
 };
 
-export const CommandsContextProvider = (props: Props) => {
+export const CommandsContextProvider = (props: Props): React.Node => {
   const commandManager = useRefInit<CommandManager>(() => new CommandManager());
 
   return (

newIDE/app/src/CommandPalette/CommandsList.js

@@ -58,11 +58,11 @@ export type CommandName =
   | 'OPEN_GAMES_DASHBOARD';
 
 export const commandAreas = {
-  GENERAL: t`General`,
-  IDE: t`IDE`,
-  PROJECT: t`Project`,
-  SCENE: t`Scene`,
-  EVENTS: t`Events`,
+  GENERAL: (t`General`: any),
+  IDE: (t`IDE`: any),
+  PROJECT: (t`Project`: any),
+  SCENE: (t`Scene`: any),
+  EVENTS: (t`Events`: any),
 };
 
 type CommandArea = $Keys<typeof commandAreas>;

newIDE/app/src/CommandPalette/CommandsScopedContext.js

@@ -53,6 +53,7 @@ class ScopedCommandManager implements CommandManagerInterface {
   getAllNamedCommands = () => {
     return Object.keys(this._commands).map<NamedCommand>(commandName => {
       const cmd = this._commands[commandName];
+      // $FlowFixMe
       return { ...cmd, name: commandName };
     });
   };
@@ -69,7 +70,7 @@ type Props = {|
   active: boolean,
 |};
 
-const CommandsContextScopedProvider = (props: Props) => {
+const CommandsContextScopedProvider = (props: Props): React.Node => {
   const centralManager = React.useContext(CommandsContext);
   const scopedManager = useRefInit(
     () => new ScopedCommandManager(centralManager)

newIDE/app/src/Debugger/DebuggerContent.js

@@ -63,7 +63,7 @@ const initialMosaicEditorNodes = {
  * currently selected inspector.
  */
 export default class DebuggerContent extends React.Component<Props, State> {
-  state = {
+  state: State = {
     selectedInspector: null,
     selectedInspectorFullPath: [],
     rawMode: false,

newIDE/app/src/Debugger/DebuggerSelector.js

@@ -12,7 +12,7 @@ type Props = {|
 |};
 
 export default class DebuggerSelector extends React.Component<Props, void> {
-  render() {
+  render(): React.Node {
     const hasDebuggers = !!this.props.debuggerIds.length;
     return (
       <SelectField

newIDE/app/src/Debugger/Inspectors/RawContentInspector.js

@@ -15,7 +15,7 @@ type Props = {|
  * A very simple inspector that display the raw information given by the gameData
  * object.
  */
-export default ({ gameData, onEdit }: Props) => (
+export default ({ gameData, onEdit }: Props): React.Node => (
   <React.Fragment>
     <EmptyMessage>
       <Trans>

newIDE/app/src/Debugger/Inspectors/RuntimeObjectInspector.js

@@ -47,7 +47,7 @@ const handleEdit = (edit, { onCall, onEdit }: Props) => {
   return true;
 };
 
-export default (props: Props) => (
+export default (props: Props): React.Node => (
   <React.Fragment>
     <Text>
       <Trans>General:</Trans>

newIDE/app/src/Debugger/Inspectors/RuntimeSceneInspector.js

@@ -97,11 +97,11 @@ export default class RuntimeSceneInspector extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     newObjectName: '',
   };
 
-  render() {
+  render(): null | React.Node {
     const { runtimeScene, onCall } = this.props;
     if (!runtimeScene) return null;
 

newIDE/app/src/Debugger/Inspectors/VariablesContainerInspector.js

@@ -162,7 +162,7 @@ type Props = {|
   onEdit: EditFunction,
 |};
 
-export default (props: Props) => (
+export default (props: Props): React.Node => (
   <ReactJsonView
     collapsed={false}
     name={false}

newIDE/app/src/Debugger/InspectorsList.js

@@ -69,7 +69,7 @@ export default class InspectorsList extends React.Component<Props, void> {
     });
   }
 
-  render() {
+  render(): null | React.Node {
     return this.props.gameData ? (
       <List style={styles.list}>
         {this._renderInspectorList(

newIDE/app/src/Debugger/Profiler/MeasuresTable.js

@@ -37,11 +37,17 @@ type State = {|
 |};
 
 export default class MeasuresTable extends React.Component<Props, State> {
-  state = {
+  state: State = {
     collapsedPaths: {},
   };
 
-  _convertToDataRows = (
+  _convertToDataRows: (
+    name: string,
+    parentSection: ?ProfilerMeasuresSection,
+    section: ProfilerMeasuresSection,
+    depth?: number,
+    path?: string
+  ) => Array<ProfilerRowData> = (
     name: string,
     parentSection: ?ProfilerMeasuresSection,
     section: ProfilerMeasuresSection,
@@ -85,11 +91,11 @@ export default class MeasuresTable extends React.Component<Props, State> {
     ];
   };
 
-  _isSectionCollapsed = (path: string) => {
+  _isSectionCollapsed: (path: string) => any | boolean = (path: string) => {
     return this.state.collapsedPaths[path];
   };
 
-  _toggleSection = (path: string) => {
+  _toggleSection: (path: string) => void = (path: string) => {
     this.setState(state => ({
       collapsedPaths: {
         ...state.collapsedPaths,
@@ -98,7 +104,11 @@ export default class MeasuresTable extends React.Component<Props, State> {
     }));
   };
 
-  _rowClassName = ({ index }: { index: number }) => {
+  _rowClassName: ({ index: number, ... }) => string = ({
+    index,
+  }: {
+    index: number,
+  }) => {
     if (index < 0) {
       return 'tableHeaderRow';
     } else {
@@ -106,7 +116,9 @@ export default class MeasuresTable extends React.Component<Props, State> {
     }
   };
 
-  _renderSectionNameCell = ({ rowData }: { rowData: ProfilerRowData }) => {
+  _renderSectionNameCell: ({ rowData: ProfilerRowData, ... }) => React.Element<
+    'div'
+  > = ({ rowData }: { rowData: ProfilerRowData }) => {
     return (
       <div style={styles.indent}>
         <div style={{ width: rowData.depth * 8 }} />
@@ -122,7 +134,7 @@ export default class MeasuresTable extends React.Component<Props, State> {
     );
   };
 
-  render() {
+  render(): null | React.Node {
     const { profilerMeasures } = this.props;
     if (!profilerMeasures) return null;
 

newIDE/app/src/Debugger/Profiler/index.js

@@ -25,7 +25,7 @@ type Props = {|
 |};
 
 export default class Profiler extends React.Component<Props, void> {
-  render() {
+  render(): React.Node {
     const { onStart, onStop, profilerOutput, profilingInProgress } = this.props;
 
     return (

newIDE/app/src/Debugger/Toolbar.js

@@ -15,7 +15,7 @@ type Props = {|
 |};
 
 export class Toolbar extends React.PureComponent<Props> {
-  render() {
+  render(): React.Node {
     const {
       onPlay,
       onPause,

newIDE/app/src/Debugger/index.js

@@ -52,7 +52,7 @@ type State = {|
  * This is only supported on Electron runtime for now.
  */
 export default class Debugger extends React.Component<Props, State> {
-  state = {
+  state: State = {
     debuggerServerState: this.props.previewDebuggerServer.getServerState(),
     debuggerServerError: null,
     debuggerIds: this.props.previewDebuggerServer.getExistingDebuggerIds(),
@@ -101,7 +101,7 @@ export default class Debugger extends React.Component<Props, State> {
     }
   }
 
-  _startServer = () => {
+  _startServer: () => void = () => {
     const { previewDebuggerServer } = this.props;
     const { unregisterDebuggerServerCallbacks } = this.state;
     if (
@@ -163,7 +163,10 @@ export default class Debugger extends React.Component<Props, State> {
     });
   };
 
-  _handleMessage = (id: DebuggerId, data: any) => {
+  _handleMessage: (id: DebuggerId, data: any) => void = (
+    id: DebuggerId,
+    data: any
+  ) => {
     if (data.command === 'dump') {
       this.setState({
         debuggerGameData: {
@@ -196,22 +199,26 @@ export default class Debugger extends React.Component<Props, State> {
     }
   };
 
-  _play = (id: DebuggerId) => {
+  _play: (id: DebuggerId) => void = (id: DebuggerId) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, { command: 'play' });
   };
 
-  _pause = (id: DebuggerId) => {
+  _pause: (id: DebuggerId) => void = (id: DebuggerId) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, { command: 'pause' });
   };
 
-  _refresh = (id: DebuggerId) => {
+  _refresh: (id: DebuggerId) => void = (id: DebuggerId) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, { command: 'refresh' });
   };
 
-  _edit = (id: DebuggerId, path: Array<string>, newValue: any) => {
+  _edit: (id: DebuggerId, path: Array<string>, newValue: any) => boolean = (
+    id: DebuggerId,
+    path: Array<string>,
+    newValue: any
+  ) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, {
       command: 'set',
@@ -223,7 +230,11 @@ export default class Debugger extends React.Component<Props, State> {
     return true;
   };
 
-  _call = (id: DebuggerId, path: Array<string>, args: Array<any>) => {
+  _call: (id: DebuggerId, path: Array<string>, args: Array<any>) => boolean = (
+    id: DebuggerId,
+    path: Array<string>,
+    args: Array<any>
+  ) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, {
       command: 'call',
@@ -235,22 +246,22 @@ export default class Debugger extends React.Component<Props, State> {
     return true;
   };
 
-  _startProfiler = (id: DebuggerId) => {
+  _startProfiler: (id: DebuggerId) => void = (id: DebuggerId) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, { command: 'profiler.start' });
   };
 
-  _stopProfiler = (id: DebuggerId) => {
+  _stopProfiler: (id: DebuggerId) => void = (id: DebuggerId) => {
     const { previewDebuggerServer } = this.props;
     previewDebuggerServer.sendMessage(id, { command: 'profiler.stop' });
   };
 
-  _hasSelectedDebugger = () => {
+  _hasSelectedDebugger: () => boolean = () => {
     const { selectedId, debuggerIds } = this.state;
     return debuggerIds.indexOf(selectedId) !== -1;
   };
 
-  render() {
+  render(): React.Node {
     const {
       debuggerServerError,
       debuggerServerState,

newIDE/app/src/EffectsList/index.js

@@ -57,7 +57,7 @@ const getEnumeratedEffectMetadata = (
  *
  * All available effects are fetched from the project's platform.
  */
-export default function EffectsList(props: Props) {
+export default function EffectsList(props: Props): React.Node {
   const { effectsContainer, onEffectsUpdated } = props;
 
   const preferences = React.useContext(PreferencesContext);

newIDE/app/src/EventsBasedBehaviorEditor/EventsBasedBehaviorEditorDialog.js

@@ -18,7 +18,7 @@ export default class EventsBasedBehaviorEditorDialog extends React.Component<
   Props,
   {||}
 > {
-  render() {
+  render(): React.Node {
     const {
       onApply,
       eventsBasedBehavior,

newIDE/app/src/EventsBasedBehaviorEditor/EventsBasedBehaviorPropertiesEditor.js

@@ -84,7 +84,7 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
   Props,
   {||}
 > {
-  _addProperty = () => {
+  _addProperty: () => void = () => {
     const { eventsBasedBehavior } = this.props;
     const properties = eventsBasedBehavior.getPropertyDescriptors();
 
@@ -95,7 +95,7 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
     this.props.onPropertiesUpdated();
   };
 
-  _removeProperty = (name: string) => {
+  _removeProperty: (name: string) => void = (name: string) => {
     const { eventsBasedBehavior } = this.props;
     const properties = eventsBasedBehavior.getPropertyDescriptors();
 
@@ -104,7 +104,10 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
     this.props.onPropertiesUpdated();
   };
 
-  _moveProperty = (oldIndex: number, newIndex: number) => {
+  _moveProperty: (oldIndex: number, newIndex: number) => void = (
+    oldIndex: number,
+    newIndex: number
+  ) => {
     const { eventsBasedBehavior } = this.props;
     const properties = eventsBasedBehavior.getPropertyDescriptors();
 
@@ -113,7 +116,7 @@ export default class EventsBasedBehaviorPropertiesEditor extends React.Component
     this.props.onPropertiesUpdated();
   };
 
-  render() {
+  render(): React.Node {
     const { eventsBasedBehavior } = this.props;
 
     const properties = eventsBasedBehavior.getPropertyDescriptors();

newIDE/app/src/EventsBasedBehaviorEditor/index.js

@@ -32,7 +32,7 @@ export default class EventsBasedBehaviorEditor extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     currentTab: 'configuration',
   };
 
@@ -45,7 +45,7 @@ export default class EventsBasedBehaviorEditor extends React.Component<
     .toNewVectorString()
     .toJSArray();
 
-  _changeTab = (newTab: TabName) =>
+  _changeTab: (newTab: TabName) => void = (newTab: TabName) =>
     this.setState(
       {
         currentTab: newTab,
@@ -53,7 +53,7 @@ export default class EventsBasedBehaviorEditor extends React.Component<
       () => this.props.onTabChanged()
     );
 
-  render() {
+  render(): React.Node {
     const { currentTab } = this.state;
     const { eventsBasedBehavior, project } = this.props;
 

newIDE/app/src/EventsBasedBehaviorsList/index.js

@@ -67,7 +67,17 @@ export default class EventsBasedBehaviorsList extends React.Component<
   Props,
   State
 > {
-  static defaultProps = {
+  static defaultProps: {|
+    onDeleteEventsBasedBehavior: (
+      eventsBasedBehavior: gdEventsBasedBehavior,
+      cb: (boolean) => void
+    ) => void,
+    onRenameEventsBasedBehavior: (
+      eventsBasedBehavior: gdEventsBasedBehavior,
+      newName: string,
+      cb: (boolean) => void
+    ) => void,
+  |} = {
     onDeleteEventsBasedBehavior: (
       eventsBasedBehavior: gdEventsBasedBehavior,
       cb: boolean => void
@@ -85,7 +95,10 @@ export default class EventsBasedBehaviorsList extends React.Component<
     searchText: '',
   };
 
-  _deleteEventsBasedBehavior = (
+  _deleteEventsBasedBehavior: (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    {| askForConfirmation: boolean |}
+  ) => void = (
     eventsBasedBehavior: gdEventsBasedBehavior,
     { askForConfirmation }: {| askForConfirmation: boolean |}
   ) => {
@@ -106,7 +119,9 @@ export default class EventsBasedBehaviorsList extends React.Component<
     });
   };
 
-  _editName = (renamedEventsBasedBehavior: ?gdEventsBasedBehavior) => {
+  _editName: (renamedEventsBasedBehavior: ?gdEventsBasedBehavior) => void = (
+    renamedEventsBasedBehavior: ?gdEventsBasedBehavior
+  ) => {
     this.setState(
       {
         renamedEventsBasedBehavior,
@@ -117,7 +132,10 @@ export default class EventsBasedBehaviorsList extends React.Component<
     );
   };
 
-  _rename = (eventsBasedBehavior: gdEventsBasedBehavior, newName: string) => {
+  _rename: (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    newName: string
+  ) => void = (eventsBasedBehavior: gdEventsBasedBehavior, newName: string) => {
     const { eventsBasedBehaviorsList } = this.props;
     this.setState({
       renamedEventsBasedBehavior: null,
@@ -144,9 +162,9 @@ export default class EventsBasedBehaviorsList extends React.Component<
     );
   };
 
-  _moveSelectionTo = (
+  _moveSelectionTo: (
     destinationEventsBasedBehavior: gdEventsBasedBehavior
-  ) => {
+  ) => void = (destinationEventsBasedBehavior: gdEventsBasedBehavior) => {
     const {
       eventsBasedBehaviorsList,
       selectedEventsBasedBehavior,
@@ -161,26 +179,30 @@ export default class EventsBasedBehaviorsList extends React.Component<
     this.forceUpdateList();
   };
 
-  forceUpdateList = () => {
+  forceUpdateList: () => void = () => {
     this._onEventsBasedBehaviorModified();
     if (this.sortableList) this.sortableList.forceUpdateGrid();
   };
 
-  _copyEventsBasedBehavior = (eventsBasedBehavior: gdEventsBasedBehavior) => {
+  _copyEventsBasedBehavior: (
+    eventsBasedBehavior: gdEventsBasedBehavior
+  ) => void = (eventsBasedBehavior: gdEventsBasedBehavior) => {
     Clipboard.set(EVENTS_BASED_BEHAVIOR_CLIPBOARD_KIND, {
       eventsBasedBehavior: serializeToJSObject(eventsBasedBehavior),
       name: eventsBasedBehavior.getName(),
     });
   };
 
-  _cutEventsBasedBehavior = (eventsBasedBehavior: gdEventsBasedBehavior) => {
+  _cutEventsBasedBehavior: (
+    eventsBasedBehavior: gdEventsBasedBehavior
+  ) => void = (eventsBasedBehavior: gdEventsBasedBehavior) => {
     this._copyEventsBasedBehavior(eventsBasedBehavior);
     this._deleteEventsBasedBehavior(eventsBasedBehavior, {
       askForConfirmation: false,
     });
   };
 
-  _pasteEventsBasedBehavior = (index: number) => {
+  _pasteEventsBasedBehavior: (index: number) => void = (index: number) => {
     if (!Clipboard.has(EVENTS_BASED_BEHAVIOR_CLIPBOARD_KIND)) return;
 
     const clipboardContent = Clipboard.get(
@@ -215,7 +237,16 @@ export default class EventsBasedBehaviorsList extends React.Component<
     this._onEventsBasedBehaviorModified();
   };
 
-  _renderEventsBasedBehaviorMenuTemplate = (i18n: I18nType) => (
+  _renderEventsBasedBehaviorMenuTemplate: (
+    i18n: I18nType
+  ) => (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    index: number
+  ) => Array<
+    | {| click: () => void, enabled: boolean, label: any | string |}
+    | {| click: () => void, label: any | string |}
+    | {| type: string |}
+  > = (i18n: I18nType) => (
     eventsBasedBehavior: gdEventsBasedBehavior,
     index: number
   ) => {
@@ -257,7 +288,7 @@ export default class EventsBasedBehaviorsList extends React.Component<
     ];
   };
 
-  _addNewEventsBasedBehavior = () => {
+  _addNewEventsBasedBehavior: () => void = () => {
     const { eventsBasedBehaviorsList } = this.props;
 
     const name = newNameGenerator('MyBehavior', name =>
@@ -276,7 +307,7 @@ export default class EventsBasedBehaviorsList extends React.Component<
     this.forceUpdate();
   }
 
-  render() {
+  render(): React.Node {
     const {
       project,
       eventsBasedBehaviorsList,

newIDE/app/src/EventsFunctionsExtensionEditor/BehaviorMethodSelectorDialog.js

@@ -63,7 +63,7 @@ export default class BehaviorMethodSelectorDialog extends React.Component<
   Props,
   State
 > {
-  render() {
+  render(): React.Node {
     const actions = [
       <FlatButton
         label={<Trans>Cancel</Trans>}

newIDE/app/src/EventsFunctionsExtensionEditor/ChooseEventsFunctionsExtensionEditor.js

@@ -16,7 +16,7 @@ type Props = {|
   onEditExtensionOptions: () => void,
 |};
 
-export default (props: Props) => {
+export default (props: Props): React.Node => {
   const eventsFunctionsCount = props.eventsFunctionsExtension.getEventsFunctionsCount();
   const eventsBasedBehaviorsCount = props.eventsFunctionsExtension
     .getEventsBasedBehaviors()

newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/EventsFunctionParametersEditor.js

@@ -153,11 +153,11 @@ export default class EventsFunctionParametersEditor extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     longDescriptionShownIndexes: {},
   };
 
-  _addParameter = () => {
+  _addParameter: () => void = () => {
     const { eventsFunction } = this.props;
     const parameters = eventsFunction.getParameters();
 
@@ -169,7 +169,7 @@ export default class EventsFunctionParametersEditor extends React.Component<
     this.props.onParametersUpdated();
   };
 
-  _removeParameter = (index: number) => {
+  _removeParameter: (index: number) => void = (index: number) => {
     const { eventsFunction } = this.props;
     const parameters = eventsFunction.getParameters();
 
@@ -178,7 +178,7 @@ export default class EventsFunctionParametersEditor extends React.Component<
     this.props.onParametersUpdated();
   };
 
-  _addLongDescription = (index: number) => {
+  _addLongDescription: (index: number) => void = (index: number) => {
     // Show the long description field
     this.setState(state => ({
       longDescriptionShownIndexes: {
@@ -188,7 +188,7 @@ export default class EventsFunctionParametersEditor extends React.Component<
     }));
   };
 
-  _removeLongDescription = (index: number) => {
+  _removeLongDescription: (index: number) => void = (index: number) => {
     const { eventsFunction } = this.props;
     const parameters = eventsFunction.getParameters();
     const parameter = parameters.at(index);
@@ -203,7 +203,10 @@ export default class EventsFunctionParametersEditor extends React.Component<
     }));
   };
 
-  _moveParameters = (oldIndex: number, newIndex: number) => {
+  _moveParameters: (oldIndex: number, newIndex: number) => void = (
+    oldIndex: number,
+    newIndex: number
+  ) => {
     const { eventsFunction, eventsBasedBehavior } = this.props;
     const parameters = eventsFunction.getParameters();
 
@@ -237,7 +240,7 @@ export default class EventsFunctionParametersEditor extends React.Component<
     }
   };
 
-  render() {
+  render(): React.Node {
     const {
       project,
       eventsFunction,

newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/EventsFunctionPropertiesEditor.js

@@ -107,7 +107,7 @@ export default class EventsFunctionPropertiesEditor extends React.Component<
   Props,
   State
 > {
-  render() {
+  render(): React.Node {
     const {
       eventsFunction,
       freezeEventsFunctionType,

newIDE/app/src/EventsFunctionsExtensionEditor/EventsFunctionConfigurationEditor/index.js

@@ -53,11 +53,13 @@ export default class EventsFunctionConfigurationEditor extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     currentTab: 'config',
   };
 
-  _canObjectOrGroupUseNewName = (newName: string) => {
+  _canObjectOrGroupUseNewName: (newName: string) => boolean = (
+    newName: string
+  ) => {
     const { objectsContainer, globalObjectsContainer } = this.props;
 
     if (
@@ -82,10 +84,10 @@ export default class EventsFunctionConfigurationEditor extends React.Component<
     return true;
   };
 
-  _onDeleteGroup = (
+  _onDeleteGroup: (
     groupWithContext: GroupWithContext,
-    done: boolean => void
-  ) => {
+    done: (boolean) => void
+  ) => void = (groupWithContext: GroupWithContext, done: boolean => void) => {
     const { group } = groupWithContext;
     const {
       project,
@@ -110,7 +112,11 @@ export default class EventsFunctionConfigurationEditor extends React.Component<
     done(true);
   };
 
-  _onRenameGroup = (
+  _onRenameGroup: (
+    groupWithContext: GroupWithContext,
+    newName: string,
+    done: (boolean) => void
+  ) => void = (
     groupWithContext: GroupWithContext,
     newName: string,
     done: boolean => void
@@ -141,12 +147,12 @@ export default class EventsFunctionConfigurationEditor extends React.Component<
     done(true);
   };
 
-  _chooseTab = (currentTab: TabNames) =>
+  _chooseTab: (currentTab: TabNames) => void = (currentTab: TabNames) =>
     this.setState({
       currentTab,
     });
 
-  render() {
+  render(): React.Node {
     const {
       project,
       globalObjectsContainer,

newIDE/app/src/EventsFunctionsExtensionEditor/ExtensionFunctionSelectorDialog.js

@@ -60,7 +60,7 @@ export default function BehaviorMethodSelectorDialog({
   eventsFunctionsExtension,
   onChoose,
   onCancel,
-}: Props) {
+}: Props): React.Node {
   const [showAdvanced, setShowAdvanced] = React.useState(false);
 
   return (

newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionDependenciesEditor.js

@@ -1,4 +1,5 @@
 //@flow
+import type { Node } from 'React';
 import React from 'react';
 import { Trans, t } from '@lingui/macro';
 import TableContainer from '@material-ui/core/TableContainer';
@@ -39,7 +40,7 @@ type Props = {| eventsFunctionsExtension: gdEventsFunctionsExtension |};
 
 export const ExtensionDependenciesEditor = ({
   eventsFunctionsExtension,
-}: Props) => {
+}: Props): Node => {
   const deps = eventsFunctionsExtension.getAllDependencies();
   const forceUpdate = useForceUpdate();
 
@@ -92,6 +93,7 @@ export const ExtensionDependenciesEditor = ({
               mapVector<gdDependencyMetadata, TableRow>(
                 eventsFunctionsExtension.getAllDependencies(),
                 (dependency, index) => (
+                  // $FlowFixMe - unsure why Flow complains about TableRow.
                   <TableRow key={dependency.getName()}>
                     <TableRowColumn>
                       <SemiControlledTextField

newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js

@@ -1,4 +1,5 @@
 //@flow
+import type { Node } from 'React';
 import React from 'react';
 import { Trans } from '@lingui/macro';
 import { t } from '@lingui/macro';
@@ -108,7 +109,7 @@ export const ExtensionOptionsEditor = ({
   eventsFunctionsExtension,
   onLoadChange,
   isLoading,
-}: Props) => {
+}: Props): Node => {
   const forceUpdate = useForceUpdate();
   const [resourceStoreOpen, setResourceStoreOpen] = React.useState(false);
   const isMounted = useIsMounted();

newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/index.js

@@ -76,7 +76,7 @@ export default function OptionsEditorDialog({
   eventsFunctionsExtension,
   onClose,
   open,
-}: Props) {
+}: Props): React.Node {
   const [currentTab, setCurrentTab] = React.useState<TabName>('options');
   const [isLoading, setIsLoading] = React.useState(false);
   const [exportDialogOpen, setExportDialogOpen] = React.useState(false);

newIDE/app/src/EventsFunctionsExtensionEditor/index.js

@@ -98,7 +98,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     selectedEventsFunction: null,
     selectedEventsBasedBehavior: null,
     editedEventsBasedBehavior: null,
@@ -127,10 +127,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     if (this._objectsContainer) this._objectsContainer.delete();
   }
 
-  _loadEventsFunctionFrom = (
+  _loadEventsFunctionFrom: (
     project: gdProject,
     eventsFunction: gdEventsFunction
-  ) => {
+  ) => void = (project: gdProject, eventsFunction: gdEventsFunction) => {
     // Create an empty "context" of objects.
     // Avoid recreating containers if they were already created, so that
     // we keep the same objects in memory and avoid remounting components
@@ -153,7 +153,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  updateToolbar = () => {
+  updateToolbar: () => void = () => {
     if (this.editor) {
       this.editor.updateToolbar();
     } else {
@@ -161,10 +161,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     }
   };
 
-  selectEventsFunctionByName = (
+  selectEventsFunctionByName: (
     functionName: string,
     behaviorName: ?string
-  ) => {
+  ) => void = (functionName: string, behaviorName: ?string) => {
     const { eventsFunctionsExtension } = this.props;
 
     if (behaviorName) {
@@ -191,7 +191,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     }
   };
 
-  _selectEventsFunction = (
+  _selectEventsFunction: (
+    selectedEventsFunction: ?gdEventsFunction,
+    selectedEventsBasedBehavior: ?gdEventsBasedBehavior
+  ) => void = (
     selectedEventsFunction: ?gdEventsFunction,
     selectedEventsBasedBehavior: ?gdEventsBasedBehavior
   ) => {
@@ -230,7 +233,13 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _makeRenameFreeEventsFunction = (i18n: I18nType) => (
+  _makeRenameFreeEventsFunction: (
+    i18n: I18nType
+  ) => (
+    eventsFunction: gdEventsFunction,
+    newName: string,
+    done: (boolean) => void
+  ) => void = (i18n: I18nType) => (
     eventsFunction: gdEventsFunction,
     newName: string,
     done: boolean => void
@@ -265,7 +274,14 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     done(true);
   };
 
-  _makeRenameBehaviorEventsFunction = (i18n: I18nType) => (
+  _makeRenameBehaviorEventsFunction: (
+    i18n: I18nType
+  ) => (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    eventsFunction: gdEventsFunction,
+    newName: string,
+    done: (boolean) => void
+  ) => void = (i18n: I18nType) => (
     eventsBasedBehavior: gdEventsBasedBehavior,
     eventsFunction: gdEventsFunction,
     newName: string,
@@ -302,7 +318,14 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     done(true);
   };
 
-  _makeMoveFreeEventsParameter = (i18n: I18nType) => (
+  _makeMoveFreeEventsParameter: (
+    i18n: I18nType
+  ) => (
+    eventsFunction: gdEventsFunction,
+    oldIndex: number,
+    newIndex: number,
+    done: (boolean) => void
+  ) => void = (i18n: I18nType) => (
     eventsFunction: gdEventsFunction,
     oldIndex: number,
     newIndex: number,
@@ -322,7 +345,15 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     done(true);
   };
 
-  _makeMoveBehaviorEventsParameter = (i18n: I18nType) => (
+  _makeMoveBehaviorEventsParameter: (
+    i18n: I18nType
+  ) => (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    eventsFunction: gdEventsFunction,
+    oldIndex: number,
+    newIndex: number,
+    done: (boolean) => void
+  ) => void = (i18n: I18nType) => (
     eventsBasedBehavior: gdEventsBasedBehavior,
     eventsFunction: gdEventsFunction,
     oldIndex: number,
@@ -344,10 +375,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     done(true);
   };
 
-  _onDeleteEventsFunction = (
+  _onDeleteEventsFunction: (
     eventsFunction: gdEventsFunction,
-    cb: boolean => void
-  ) => {
+    cb: (boolean) => void
+  ) => void = (eventsFunction: gdEventsFunction, cb: boolean => void) => {
     if (
       this.state.selectedEventsFunction &&
       gd.compare(eventsFunction, this.state.selectedEventsFunction)
@@ -358,9 +389,9 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     cb(true);
   };
 
-  _selectEventsBasedBehavior = (
+  _selectEventsBasedBehavior: (
     selectedEventsBasedBehavior: ?gdEventsBasedBehavior
-  ) => {
+  ) => void = (selectedEventsBasedBehavior: ?gdEventsBasedBehavior) => {
     this.setState(
       {
         selectedEventsBasedBehavior,
@@ -383,7 +414,13 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _makeRenameEventsBasedBehavior = (i18n: I18nType) => (
+  _makeRenameEventsBasedBehavior: (
+    i18n: I18nType
+  ) => (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    newName: string,
+    done: (boolean) => void
+  ) => void = (i18n: I18nType) => (
     eventsBasedBehavior: gdEventsBasedBehavior,
     newName: string,
     done: boolean => void
@@ -409,7 +446,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     done(true);
   };
 
-  _onEventsBasedBehaviorRenamed = () => {
+  _onEventsBasedBehaviorRenamed: () => void = () => {
     // Name of a behavior changed, so notify parent
     // that a behavior was edited (to trigger reload of extensions)
     if (this.props.onBehaviorEdited) this.props.onBehaviorEdited();
@@ -426,7 +463,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     }
   };
 
-  _onDeleteEventsBasedBehavior = (
+  _onDeleteEventsBasedBehavior: (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    cb: (boolean) => void
+  ) => void = (
     eventsBasedBehavior: gdEventsBasedBehavior,
     cb: boolean => void
   ) => {
@@ -440,7 +480,11 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     cb(true);
   };
 
-  _onAddFreeEventsFunction = (
+  _onAddFreeEventsFunction: (
+    onAddEventsFunctionCb: (
+      parameters: ?EventsFunctionCreationParameters
+    ) => void
+  ) => void = (
     onAddEventsFunctionCb: (
       parameters: ?EventsFunctionCreationParameters
     ) => void
@@ -451,9 +495,9 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     });
   };
 
-  _onCloseExtensionFunctionSelectorDialog = (
+  _onCloseExtensionFunctionSelectorDialog: (
     parameters: ?EventsFunctionCreationParameters
-  ) => {
+  ) => void = (parameters: ?EventsFunctionCreationParameters) => {
     const { onAddEventsFunctionCb } = this.state;
     this.setState(
       {
@@ -466,7 +510,11 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _onAddBehaviorEventsFunction = (
+  _onAddBehaviorEventsFunction: (
+    onAddEventsFunctionCb: (
+      parameters: ?EventsFunctionCreationParameters
+    ) => void
+  ) => void = (
     onAddEventsFunctionCb: (
       parameters: ?EventsFunctionCreationParameters
     ) => void
@@ -477,9 +525,9 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     });
   };
 
-  _onCloseBehaviorMethodSelectorDialog = (
+  _onCloseBehaviorMethodSelectorDialog: (
     parameters: ?EventsFunctionCreationParameters
-  ) => {
+  ) => void = (parameters: ?EventsFunctionCreationParameters) => {
     const { onAddEventsFunctionCb } = this.state;
     this.setState(
       {
@@ -492,7 +540,10 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _onBehaviorEventsFunctionAdded = (
+  _onBehaviorEventsFunctionAdded: (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    eventsFunction: gdEventsFunction
+  ) => void = (
     eventsBasedBehavior: gdEventsBasedBehavior,
     eventsFunction: gdEventsFunction
   ) => {
@@ -503,7 +554,11 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _onBehaviorPropertyRenamed = (
+  _onBehaviorPropertyRenamed: (
+    eventsBasedBehavior: gdEventsBasedBehavior,
+    oldName: string,
+    newName: string
+  ) => void = (
     eventsBasedBehavior: gdEventsBasedBehavior,
     oldName: string,
     newName: string
@@ -518,13 +573,15 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _editOptions = (open: boolean = true) => {
+  _editOptions: (open?: boolean) => void = (open: boolean = true) => {
     this.setState({
       editOptionsDialogOpen: open,
     });
   };
 
-  _editBehavior = (editedEventsBasedBehavior: ?gdEventsBasedBehavior) => {
+  _editBehavior: (editedEventsBasedBehavior: ?gdEventsBasedBehavior) => void = (
+    editedEventsBasedBehavior: ?gdEventsBasedBehavior
+  ) => {
     this.setState(
       state => {
         // If we're closing the properties of a behavior, ensure parameters
@@ -563,17 +620,19 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     );
   };
 
-  _openFreeFunctionsListEditor = () => {
+  _openFreeFunctionsListEditor: () => void = () => {
     if (this._editorNavigator)
       this._editorNavigator.openEditor('free-functions-list');
   };
 
-  _openBehaviorsListEditor = () => {
+  _openBehaviorsListEditor: () => void = () => {
     if (this._editorNavigator)
       this._editorNavigator.openEditor('behaviors-list');
   };
 
-  _onEditorNavigatorEditorChanged = (editorName: string) => {
+  _onEditorNavigatorEditorChanged: (editorName: string) => void = (
+    editorName: string
+  ) => {
     // It's important that this method is the same across renders,
     // to avoid confusing EditorNavigator into thinking it's changed
     // and immediately calling it, which would trigger an infinite loop.
@@ -591,7 +650,7 @@ export default class EventsFunctionsExtensionEditor extends React.Component<
     }
   };
 
-  render() {
+  render(): React.Node {
     const { project, eventsFunctionsExtension } = this.props;
     const {
       selectedEventsFunction,

newIDE/app/src/EventsFunctionsExtensionsLoader/EventsFunctionsExtensionsContext.js

@@ -36,7 +36,7 @@ const defaultState = {
   getIncludeFileHashs: () => ({}),
 };
 
-const EventsFunctionsExtensionsContext = React.createContext<EventsFunctionsExtensionsState>(
+const EventsFunctionsExtensionsContext: React$Context<EventsFunctionsExtensionsState> = React.createContext<EventsFunctionsExtensionsState>(
   defaultState
 );
 

newIDE/app/src/EventsFunctionsExtensionsLoader/EventsFunctionsExtensionsProvider.js

@@ -48,7 +48,7 @@ export default class EventsFunctionsExtensionsProvider extends React.Component<
   );
   _includeFileHashs: { [string]: number } = {};
   _lastLoadPromise: ?Promise<void> = null;
-  state = {
+  state: State = {
     eventsFunctionsExtensionsError: null,
     loadProjectEventsFunctionsExtensions: this._loadProjectEventsFunctionsExtensions.bind(
       this
@@ -149,7 +149,7 @@ export default class EventsFunctionsExtensionsProvider extends React.Component<
     return this._loadProjectEventsFunctionsExtensions(project);
   }
 
-  render() {
+  render(): React.Node {
     return (
       <EventsFunctionsExtensionsContext.Provider value={this.state}>
         {this.props.children}

newIDE/app/src/EventsFunctionsExtensionsLoader/MetadataDeclarationHelpers.js

@@ -41,7 +41,7 @@ export const declareExtension = (
 export const declareExtensionDependencies = (
   extension: gdPlatformExtension,
   eventsFunctionsExtension: gdEventsFunctionsExtension
-) =>
+): Array<void> =>
   mapVector<gdDependencyMetadata, void>(
     eventsFunctionsExtension.getAllDependencies(),
     dependency => extension.addDependency().copyFrom(dependency)
@@ -177,7 +177,9 @@ export const declareBehaviorMetadata = (
  * Check if the name of the function is the name of a lifecycle function (for events-based behaviors),
  * that will be called automatically by the game engine.
  */
-export const isBehaviorLifecycleEventsFunction = (functionName: string) => {
+export const isBehaviorLifecycleEventsFunction = (
+  functionName: string
+): boolean => {
   return (
     [
       'onCreated',
@@ -197,7 +199,9 @@ export const isBehaviorLifecycleEventsFunction = (functionName: string) => {
  * Check if the name of the function is the name of a lifecycle function (for events-based extensions),
  * that will be called automatically by the game engine.
  */
-export const isExtensionLifecycleEventsFunction = (functionName: string) => {
+export const isExtensionLifecycleEventsFunction = (
+  functionName: string
+): boolean => {
   return gd.EventsFunctionsExtension.isExtensionLifecycleEventsFunction(
     functionName
   );

newIDE/app/src/EventsFunctionsExtensionsLoader/Storage/LocalEventsFunctionsExtensionOpener.js

@@ -22,7 +22,7 @@ const readJSONFile = (filepath: string): Promise<Object> => {
 };
 
 export default class LocalEventsFunctionsExtensionOpener {
-  static chooseEventsFunctionExtensionFile = (): Promise<?string> => {
+  static chooseEventsFunctionExtensionFile: () => Promise<?string> = (): Promise<?string> => {
     if (!dialog) return Promise.reject('Not supported');
     const browserWindow = electron.remote.getCurrentWindow();
 
@@ -44,7 +44,7 @@ export default class LocalEventsFunctionsExtensionOpener {
       });
   };
 
-  static readEventsFunctionExtensionFile = (
+  static readEventsFunctionExtensionFile: (filepath: string) => Promise<any> = (
     filepath: string
   ): Promise<Object> => {
     return readJSONFile(filepath);

newIDE/app/src/EventsFunctionsExtensionsLoader/Storage/LocalEventsFunctionsExtensionWriter.js

@@ -29,7 +29,7 @@ const writeJSONFile = (object: Object, filepath: string): Promise<void> => {
 };
 
 export default class LocalEventsFunctionsExtensionWriter {
-  static chooseEventsFunctionExtensionFile = (): Promise<?string> => {
+  static chooseEventsFunctionExtensionFile: () => Promise<?string> = (): Promise<?string> => {
     if (!dialog) return Promise.reject('Not supported');
     const browserWindow = electron.remote.getCurrentWindow();
 
@@ -50,7 +50,10 @@ export default class LocalEventsFunctionsExtensionWriter {
       });
   };
 
-  static writeEventsFunctionsExtension = (
+  static writeEventsFunctionsExtension: (
+    extension: gdEventsFunctionsExtension,
+    filepath: string
+  ) => Promise<void> = (
     extension: gdEventsFunctionsExtension,
     filepath: string
   ): Promise<void> => {

newIDE/app/src/EventsFunctionsExtensionsLoader/index.js

@@ -431,7 +431,7 @@ export const unloadProjectEventsFunctionsExtension = (
  */
 export const isAnEventFunctionMetadata = (
   instructionOrExpression: gdInstructionMetadata | gdExpressionMetadata
-) => {
+): boolean => {
   const parametersCount = instructionOrExpression.getParametersCount();
   if (parametersCount <= 0) return false;
 
@@ -445,7 +445,9 @@ export const isAnEventFunctionMetadata = (
  * Get back the name a function from its type.
  * See also getFreeEventsFunctionType for the reverse operation.
  */
-export const getFunctionNameFromType = (type: string) => {
+export const getFunctionNameFromType = (
+  type: string
+): {| behaviorName: ?string, extensionName: string, name: string |} => {
   const parts = type.split('::');
   if (!parts.length)
     return {
@@ -468,7 +470,7 @@ export const getFunctionNameFromType = (type: string) => {
 export const getFreeEventsFunctionType = (
   extensionName: string,
   eventsFunction: gdEventsFunction
-) => {
+): string => {
   return extensionName + '::' + eventsFunction.getName();
 };
 
@@ -479,7 +481,7 @@ export const getFreeEventsFunctionType = (
  */
 export const getParametersIndexOffset = (
   isEventsBasedBehaviorMethod: boolean
-) => {
+): number => {
   return isEventsBasedBehaviorMethod
     ? 0 /*In the case of a behavior events function, the first two parameters are by convention the "Object" and "Behavior" */
     : 1; /*In the case of a free events function (i.e: not tied to a behavior), the first parameter is by convention the current scene and is not shown.*/

newIDE/app/src/EventsFunctionsList/index.js

@@ -68,7 +68,17 @@ type Props = {|
 |};
 
 export default class EventsFunctionsList extends React.Component<Props, State> {
-  static defaultProps = {
+  static defaultProps: {|
+    onDeleteEventsFunction: (
+      eventsFunction: gdEventsFunction,
+      cb: (boolean) => void
+    ) => void,
+    onRenameEventsFunction: (
+      eventsFunction: gdEventsFunction,
+      newName: string,
+      cb: (boolean) => void
+    ) => void,
+  |} = {
     onDeleteEventsFunction: (
       eventsFunction: gdEventsFunction,
       cb: boolean => void
@@ -86,12 +96,17 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     searchText: '',
   };
 
-  _togglePrivate = (eventsFunction: gdEventsFunction) => {
+  _togglePrivate: (eventsFunction: gdEventsFunction) => void = (
+    eventsFunction: gdEventsFunction
+  ) => {
     eventsFunction.setPrivate(!eventsFunction.isPrivate());
     this.forceUpdate();
   };
 
-  _deleteEventsFunction = (
+  _deleteEventsFunction: (
+    eventsFunction: gdEventsFunction,
+    {| askForConfirmation: boolean |}
+  ) => void = (
     eventsFunction: gdEventsFunction,
     { askForConfirmation }: {| askForConfirmation: boolean |}
   ) => {
@@ -112,7 +127,9 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     });
   };
 
-  _editName = (eventsFunction: ?gdEventsFunction) => {
+  _editName: (eventsFunction: ?gdEventsFunction) => void = (
+    eventsFunction: ?gdEventsFunction
+  ) => {
     this.setState(
       {
         renamedEventsFunction: eventsFunction,
@@ -123,7 +140,10 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     );
   };
 
-  _rename = (eventsFunction: gdEventsFunction, newName: string) => {
+  _rename: (eventsFunction: gdEventsFunction, newName: string) => void = (
+    eventsFunction: gdEventsFunction,
+    newName: string
+  ) => {
     const { eventsFunctionsContainer } = this.props;
     this.setState({
       renamedEventsFunction: null,
@@ -145,7 +165,9 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     });
   };
 
-  _moveSelectionTo = (destinationEventsFunction: gdEventsFunction) => {
+  _moveSelectionTo: (destinationEventsFunction: gdEventsFunction) => void = (
+    destinationEventsFunction: gdEventsFunction
+  ) => {
     const { eventsFunctionsContainer, selectedEventsFunction } = this.props;
     if (!selectedEventsFunction) return;
 
@@ -161,24 +183,28 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     this.forceUpdateList();
   };
 
-  forceUpdateList = () => {
+  forceUpdateList: () => void = () => {
     this._onEventsFunctionModified();
     if (this.sortableList) this.sortableList.forceUpdateGrid();
   };
 
-  _copyEventsFunction = (eventsFunction: gdEventsFunction) => {
+  _copyEventsFunction: (eventsFunction: gdEventsFunction) => void = (
+    eventsFunction: gdEventsFunction
+  ) => {
     Clipboard.set(EVENTS_FUNCTION_CLIPBOARD_KIND, {
       eventsFunction: serializeToJSObject(eventsFunction),
       name: eventsFunction.getName(),
     });
   };
 
-  _cutEventsFunction = (eventsFunction: gdEventsFunction) => {
+  _cutEventsFunction: (eventsFunction: gdEventsFunction) => void = (
+    eventsFunction: gdEventsFunction
+  ) => {
     this._copyEventsFunction(eventsFunction);
     this._deleteEventsFunction(eventsFunction, { askForConfirmation: false });
   };
 
-  _pasteEventsFunction = (index: number) => {
+  _pasteEventsFunction: (index: number) => void = (index: number) => {
     if (!Clipboard.has(EVENTS_FUNCTION_CLIPBOARD_KIND)) return;
 
     const clipboardContent = Clipboard.get(EVENTS_FUNCTION_CLIPBOARD_KIND);
@@ -218,10 +244,16 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     this.forceUpdate();
   }
 
-  _renderEventsFunctionMenuTemplate = (i18n: I18nType) => (
+  _renderEventsFunctionMenuTemplate: (
+    i18n: I18nType
+  ) => (
     eventsFunction: gdEventsFunction,
     index: number
-  ) => {
+  ) => Array<
+    | {| click: () => void, enabled: boolean, label: any | string |}
+    | {| click: () => void, label: any | string |}
+    | {| type: string |}
+  > = (i18n: I18nType) => (eventsFunction: gdEventsFunction, index: number) => {
     return [
       {
         label: i18n._(t`Rename`),
@@ -260,7 +292,7 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     ];
   };
 
-  _addNewEventsFunction = () => {
+  _addNewEventsFunction: () => void = () => {
     const { eventsFunctionsContainer } = this.props;
 
     this.props.onAddEventsFunction(
@@ -286,7 +318,7 @@ export default class EventsFunctionsList extends React.Component<Props, State> {
     );
   };
 
-  render() {
+  render(): React.Node {
     const {
       project,
       eventsFunctionsContainer,

newIDE/app/src/EventsSheet/ClipboardKind.js

@@ -19,7 +19,7 @@ const gd: libGDevelop = global.gd;
 
 export const CLIPBOARD_KIND = 'EventsAndInstructions';
 
-export const hasClipboardEvents = () => {
+export const hasClipboardEvents = (): boolean => {
   if (!Clipboard.has(CLIPBOARD_KIND)) return false;
   const clipboardContent = Clipboard.get(CLIPBOARD_KIND);
   const eventsCount = SafeExtractor.extractNumberProperty(
@@ -31,7 +31,7 @@ export const hasClipboardEvents = () => {
   return eventsCount > 0;
 };
 
-export const hasClipboardConditions = () => {
+export const hasClipboardConditions = (): boolean => {
   if (!Clipboard.has(CLIPBOARD_KIND)) return false;
   const clipboardContent = Clipboard.get(CLIPBOARD_KIND);
   const conditionsCount = SafeExtractor.extractNumberProperty(
@@ -43,7 +43,7 @@ export const hasClipboardConditions = () => {
   return conditionsCount > 0;
 };
 
-export const hasClipboardActions = () => {
+export const hasClipboardActions = (): boolean => {
   if (!Clipboard.has(CLIPBOARD_KIND)) return false;
   const clipboardContent = Clipboard.get(CLIPBOARD_KIND);
   const actionsCount = SafeExtractor.extractNumberProperty(
@@ -202,7 +202,7 @@ export const pasteInstructionsFromClipboardInSelection = (
 export const pasteInstructionsFromClipboardInInstructionsList = (
   project: gdProject,
   instructionsListContext: InstructionsListContext
-) => {
+): void | boolean => {
   if (!hasClipboardConditions() && !hasClipboardActions()) return false;
 
   const clipboardContent = Clipboard.get(CLIPBOARD_KIND);

newIDE/app/src/EventsSheet/ContainsSubInstruction.js

@@ -4,7 +4,7 @@ const gd: libGDevelop = global.gd;
 export const containsSubInstructions = (
   instruction: gdInstruction,
   instructionsList: gdInstructionsList
-) => {
+): boolean => {
   const subInstructionsList = instruction.getSubInstructions();
   if (gd.compare(subInstructionsList, instructionsList)) return true;
 

newIDE/app/src/EventsSheet/EventsContextAnalyzerDialog.js

@@ -57,7 +57,7 @@ export default class EventsContextAnalyzerDialog extends React.Component<
   Props,
   {}
 > {
-  render() {
+  render(): React.Node {
     const { onClose, eventsContextResult } = this.props;
     const actions = [
       <FlatButton

newIDE/app/src/EventsSheet/EventsFunctionExtractor/EventsFunctionExtractorDialog.js

@@ -48,7 +48,7 @@ export default class EventsFunctionExtractorDialog extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     eventsFunction: null,
     extensionName: '',
     createNewExtension: false,
@@ -91,7 +91,7 @@ export default class EventsFunctionExtractorDialog extends React.Component<
     if (eventsFunction) eventsFunction.delete();
   }
 
-  render() {
+  render(): null | React.Node {
     const { project, onClose, onCreate } = this.props;
     const { eventsFunction, extensionName, createNewExtension } = this.state;
     if (!eventsFunction) return null;

newIDE/app/src/EventsSheet/EventsFunctionExtractor/index.js

@@ -160,14 +160,14 @@ export const createNewInstructionForEventsFunction = (
 /**
  * Validate that a function name is valid.
  */
-export const validateEventsFunctionName = (functionName: string) => {
+export const validateEventsFunctionName = (functionName: string): boolean => {
   return gd.Project.validateName(functionName);
 };
 
 /**
  * Validate that an events functions extension name is valid.
  */
-export const validateExtensionName = (extensionName: string) => {
+export const validateExtensionName = (extensionName: string): boolean => {
   return gd.Project.validateName(extensionName);
 };
 
@@ -177,7 +177,7 @@ export const validateExtensionName = (extensionName: string) => {
 export const validateExtensionNameUniqueness = (
   project: gdProject,
   extensionName: string
-) => {
+): boolean => {
   return !project.hasEventsFunctionsExtensionNamed(extensionName);
 };
 
@@ -188,7 +188,7 @@ export const validateEventsFunctionNameUniqueness = (
   project: gdProject,
   extensionName: string,
   eventsFunction: gdEventsFunction
-) => {
+): boolean => {
   if (project.hasEventsFunctionsExtensionNamed(extensionName)) {
     const eventsFunctionsExtension = project.getEventsFunctionsExtension(
       extensionName
@@ -210,7 +210,7 @@ export const canCreateEventsFunction = (
   project: gdProject,
   extensionName: string,
   eventsFunction: gdEventsFunction
-) => {
+): boolean => {
   return (
     extensionName !== '' &&
     validateExtensionName(extensionName) &&
@@ -231,6 +231,6 @@ export const canCreateEventsFunction = (
  */
 export const functionHasLotsOfParameters = (
   eventsFunction: gdEventsFunction
-) => {
+): boolean => {
   return eventsFunction.getParameters().size() > 7;
 };

newIDE/app/src/EventsSheet/EventsSearcher.js

@@ -49,7 +49,7 @@ type Props = {|
  * to its children components, as well as methods to browse the results.
  */
 export default class EventsSearcher extends React.Component<Props, State> {
-  state = {
+  state: State = {
     eventsSearchResults: null, // The list of results
     searchFocusOffset: null,
   };
@@ -72,7 +72,7 @@ export default class EventsSearcher extends React.Component<Props, State> {
     });
   }
 
-  _doReplaceInEvents = ({
+  _doReplaceInEvents: ReplaceInEventsInputs => void = ({
     searchInSelection,
     searchText,
     replaceText,
@@ -105,7 +105,7 @@ export default class EventsSearcher extends React.Component<Props, State> {
     );
   };
 
-  _doSearchInEvents = (
+  _doSearchInEvents: (SearchInEventsInputs, cb: () => void) => void = (
     {
       searchInSelection,
       searchText,
@@ -151,7 +151,7 @@ export default class EventsSearcher extends React.Component<Props, State> {
     );
   };
 
-  _updateListOfResultEvents = () => {
+  _updateListOfResultEvents: () => void = () => {
     const { eventsSearchResults } = this.state;
     if (!eventsSearchResults) {
       this._resultEvents = null;
@@ -174,7 +174,9 @@ export default class EventsSearcher extends React.Component<Props, State> {
     this._resultEvents = uniqBy(resultEventsWithDuplicates, event => event.ptr);
   };
 
-  _goToSearchResults = (step: number): ?gdBaseEvent => {
+  _goToSearchResults: (step: number) => ?gdBaseEvent = (
+    step: number
+  ): ?gdBaseEvent => {
     this._updateListOfResultEvents();
     if (!this._resultEvents || this._resultEvents.length === 0) {
       this.setState({ searchFocusOffset: null });
@@ -198,15 +200,15 @@ export default class EventsSearcher extends React.Component<Props, State> {
     return event;
   };
 
-  _goToPreviousSearchResult = (): ?gdBaseEvent => {
+  _goToPreviousSearchResult: () => ?gdBaseEvent = (): ?gdBaseEvent => {
     return this._goToSearchResults(-1);
   };
 
-  _goToNextSearchResult = (): ?gdBaseEvent => {
+  _goToNextSearchResult: () => ?gdBaseEvent = (): ?gdBaseEvent => {
     return this._goToSearchResults(+1);
   };
 
-  render() {
+  render(): React.Node {
     return this.props.children({
       eventsSearchResultEvents: this._resultEvents,
       searchFocusOffset: this.state.searchFocusOffset,

newIDE/app/src/EventsSheet/EventsTree/BottomButtons.js

@@ -25,7 +25,7 @@ const makeMenuTemplateBuilderForEvents = (
     };
   });
 
-export default function BottomButtons({ onAddEvent }: Props) {
+export default function BottomButtons({ onAddEvent }: Props): React.Node {
   return (
     <Column>
       <Line justifyContent="space-between">

newIDE/app/src/EventsSheet/EventsTree/ConditionsActionsColumns.js

@@ -30,7 +30,7 @@ const styles = {
  * next to each other on a big screen (with proper sizing for the conditions column),
  * and stacked on a small one.
  */
-const ConditionsActionsColumns = (props: Props) => {
+const ConditionsActionsColumns = (props: Props): React.Element<'div'> => {
   if (props.windowWidth === 'small') {
     return (
       <div style={styles.oneColumnContainer} className={props.className}>

newIDE/app/src/EventsSheet/EventsTree/DropIndicator.js

@@ -5,6 +5,10 @@ import { dropIndicator, cantDropIndicator } from './ClassNames';
 /**
  * A Drop indicator line for the events sheet
  */
-export default function DropIndicator({ canDrop }: {| canDrop: boolean |}) {
+export default function DropIndicator({
+  canDrop,
+}: {|
+  canDrop: boolean,
+|}): React.Element<'div'> {
   return <div className={canDrop ? dropIndicator : cantDropIndicator} />;
 }

newIDE/app/src/EventsSheet/EventsTree/EmptyEventsPlaceholder.js

@@ -7,7 +7,7 @@ import Text from '../../UI/Text';
 import Paper from '@material-ui/core/Paper';
 import { Line, Column } from '../../UI/Grid';
 
-const EmptyEventsPlaceholder = () => (
+const EmptyEventsPlaceholder = (): React.Node => (
   <Column alignItems="center">
     <Paper
       variant="outlined"

newIDE/app/src/EventsSheet/EventsTree/EventHeightsCache.js

@@ -11,7 +11,7 @@ type WatchedComponent = {
  * so it can recompute the internal row heights of the react-virtualized List.
  */
 export default class EventHeightsCache {
-  eventHeights = {};
+  eventHeights: { ... } = {};
   updateTimeoutId: ?TimeoutID = null;
   component: ?WatchedComponent = null;
 

newIDE/app/src/EventsSheet/EventsTree/Instruction.js

@@ -93,7 +93,7 @@ type Props = {|
   windowWidth: WidthType,
 |};
 
-const Instruction = (props: Props) => {
+const Instruction = (props: Props): React.Node => {
   const {
     instruction,
     isCondition,

newIDE/app/src/EventsSheet/EventsTree/InstructionsList.js

@@ -74,7 +74,7 @@ export default function InstructionsList({
   renderObjectThumbnail,
   screenType,
   windowWidth,
-}: Props) {
+}: Props): React.Node {
   const [canPaste, setCanPaste] = React.useState(false);
 
   const addNewInstruction = React.useCallback(

newIDE/app/src/EventsSheet/EventsTree/InvalidParameterValue.js

@@ -7,7 +7,7 @@ type Props = {| children: React.Node, isEmpty?: boolean |};
 /**
  * Displayed when a parameter is invalid
  */
-export default ({ children, isEmpty }: Props) =>
+export default ({ children, isEmpty }: Props): React.Element<'span'> =>
   isEmpty ? (
     <span className={instructionInvalidParameter}>&lt; {children} &gt;</span>
   ) : (

newIDE/app/src/EventsSheet/EventsTree/MissingParameterValue.js

@@ -5,4 +5,6 @@ import { instructionMissingParameter } from './ClassNames';
 /**
  * Displayed when a parameter is missing (i.e: empty and not optional)
  */
-export default () => <span className={instructionMissingParameter} />;
+export default (): React.Element<'span'> => (
+  <span className={instructionMissingParameter} />
+);

newIDE/app/src/EventsSheet/EventsTree/Renderers/CommentEvent.js

@@ -51,14 +51,14 @@ export default class CommentEvent extends React.Component<
   EventRendererProps,
   State
 > {
-  state = {
+  state: State = {
     editing: false,
   };
 
   _selectable: ?HTMLSpanElement;
   _textField: ?TextField;
 
-  edit = () => {
+  edit: () => void = () => {
     this.setState(
       {
         editing: true,
@@ -69,7 +69,7 @@ export default class CommentEvent extends React.Component<
     );
   };
 
-  onEvent = (e: any, text: string) => {
+  onEvent: (e: any, text: string) => void = (e: any, text: string) => {
     const commentEvent = gd.asCommentEvent(this.props.event);
     commentEvent.setComment(text);
 
@@ -77,7 +77,7 @@ export default class CommentEvent extends React.Component<
     this.forceUpdate();
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     if (!this._textField) return;
 
     this.setState(
@@ -88,7 +88,7 @@ export default class CommentEvent extends React.Component<
     );
   };
 
-  _getCommentHTML = () => {
+  _getCommentHTML: () => string = () => {
     const commentEvent = gd.asCommentEvent(this.props.event);
     return commentEvent
       .getComment()
@@ -98,7 +98,7 @@ export default class CommentEvent extends React.Component<
       .replace(/\n/g, '<br>');
   };
 
-  render() {
+  render(): React.Element<'div'> {
     const commentEvent = gd.asCommentEvent(this.props.event);
 
     const backgroundColor = rgbToHex(

newIDE/app/src/EventsSheet/EventsTree/Renderers/ForEachChildVariableEvent.js

@@ -57,14 +57,17 @@ export default class ForEachChildVariableEvent extends React.Component<
   _keyIteratorField: ?SceneVariableField = null;
   _iterableField: ?SceneVariableField = null;
 
-  state = {
+  state: State = {
     editingValueIteratorVariableName: false,
     editingKeyIteratorVariableName: false,
     editingIterableVariableName: false,
     anchorEl: null,
   };
 
-  edit = (
+  edit: (
+    variable: 'iterable' | 'iteratorValue' | 'iteratorKey',
+    anchorEl: HTMLSpanElement
+  ) => void = (
     variable: 'iterable' | 'iteratorValue' | 'iteratorKey',
     anchorEl: HTMLSpanElement
   ) => {
@@ -98,7 +101,7 @@ export default class ForEachChildVariableEvent extends React.Component<
     );
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     const { anchorEl } = this.state;
     // Put back the focus after closing the inline popover.
     // $FlowFixMe
@@ -112,7 +115,7 @@ export default class ForEachChildVariableEvent extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Element<'div'> {
     const forEachChildVariableEvent = gd.asForEachChildVariableEvent(
       this.props.event
     );

newIDE/app/src/EventsSheet/EventsTree/Renderers/ForEachEvent.js

@@ -35,12 +35,12 @@ export default class ForEachEvent extends React.Component<
   *
 > {
   _objectField: ?ObjectField = null;
-  state = {
+  state: {| anchorEl: null, editing: boolean |} = {
     editing: false,
     anchorEl: null,
   };
 
-  edit = (domEvent: any) => {
+  edit: (domEvent: any) => void = (domEvent: any) => {
     // We should not need to use a timeout, but
     // if we don't do this, the InlinePopover's clickaway listener
     // is immediately picking up the event and closing.
@@ -64,7 +64,7 @@ export default class ForEachEvent extends React.Component<
     );
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     const { anchorEl } = this.state;
     // Put back the focus after closing the inline popover.
     // $FlowFixMe
@@ -76,7 +76,7 @@ export default class ForEachEvent extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Element<'div'> {
     var forEachEvent = gd.asForEachEvent(this.props.event);
 
     const objectName = forEachEvent.getObjectToPick();

newIDE/app/src/EventsSheet/EventsTree/Renderers/GroupEvent.js

@@ -34,12 +34,12 @@ const styles = {
 };
 
 export default class GroupEvent extends React.Component<EventRendererProps, *> {
-  state = {
+  state: {| editing: boolean |} = {
     editing: false,
   };
   _textField: ?TextField = null;
 
-  edit = () => {
+  edit: () => void = () => {
     this.setState(
       {
         editing: true,
@@ -50,13 +50,13 @@ export default class GroupEvent extends React.Component<EventRendererProps, *> {
     );
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     this.setState({
       editing: false,
     });
   };
 
-  render() {
+  render(): React.Element<'div'> {
     var groupEvent = gd.asGroupEvent(this.props.event);
 
     const r = groupEvent.getBackgroundColorR(),

newIDE/app/src/EventsSheet/EventsTree/Renderers/JsCodeEvent.js

@@ -68,7 +68,7 @@ export default class JsCodeEvent extends React.Component<
   State
 > {
   _objectField: ?ObjectField = null;
-  state = {
+  state: State = {
     editing: false,
     editingObject: false,
     anchorEl: null,
@@ -76,7 +76,7 @@ export default class JsCodeEvent extends React.Component<
 
   _input: ?any;
 
-  edit = () => {
+  edit: () => void = () => {
     this.setState(
       {
         editing: true,
@@ -92,7 +92,7 @@ export default class JsCodeEvent extends React.Component<
     );
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     const jsCodeEvent = gd.asJsCodeEvent(this.props.event);
 
     // $FlowFixMe
@@ -107,12 +107,12 @@ export default class JsCodeEvent extends React.Component<
     );
   };
 
-  onChange = (newValue: string) => {
+  onChange: (newValue: string) => void = (newValue: string) => {
     const jsCodeEvent = gd.asJsCodeEvent(this.props.event);
     jsCodeEvent.setInlineCode(newValue);
   };
 
-  editObject = (domEvent: any) => {
+  editObject: (domEvent: any) => void = (domEvent: any) => {
     // We should not need to use a timeout, but
     // if we don't do this, the InlinePopover's clickaway listener
     // is immediately picking up the event and closing.
@@ -136,7 +136,7 @@ export default class JsCodeEvent extends React.Component<
     );
   };
 
-  endObjectEditing = () => {
+  endObjectEditing: () => void = () => {
     const { anchorEl } = this.state;
 
     // Put back the focus after closing the inline popover.
@@ -149,12 +149,12 @@ export default class JsCodeEvent extends React.Component<
     });
   };
 
-  toggleExpanded = () => {
+  toggleExpanded: () => void = () => {
     const jsCodeEvent = gd.asJsCodeEvent(this.props.event);
     jsCodeEvent.setEventsSheetExpanded(!jsCodeEvent.isEventsSheetExpanded());
   };
 
-  _getCodeEditorHeight = () => {
+  _getCodeEditorHeight: () => number = () => {
     const jsCodeEvent = gd.asJsCodeEvent(this.props.event);
 
     // Always use the minimum height when collapsed.
@@ -167,7 +167,7 @@ export default class JsCodeEvent extends React.Component<
     return Math.max(MINIMUM_EDITOR_HEIGHT, heightToFillSheet);
   };
 
-  render() {
+  render(): React.Node {
     const jsCodeEvent = gd.asJsCodeEvent(this.props.event);
     const parameterObjects = jsCodeEvent.getParameterObjects();
 

newIDE/app/src/EventsSheet/EventsTree/Renderers/LinkEvent/ExternalEventsAutoComplete.js

@@ -44,7 +44,7 @@ export default class ExternalEventsAutoComplete extends React.Component<
     if (this._field) this._field.focus();
   }
 
-  render() {
+  render(): React.Node {
     const { value, onChange, onRequestClose, isInline, project } = this.props;
 
     return (

newIDE/app/src/EventsSheet/EventsTree/Renderers/LinkEvent/index.js

@@ -40,12 +40,12 @@ const styles = {
 export default class LinkEvent extends React.Component<EventRendererProps, *> {
   _externalEventsAutoComplete: ?ExternalEventsAutoComplete = null;
 
-  state = {
+  state: {| anchorEl: null, editing: boolean |} = {
     editing: false,
     anchorEl: null,
   };
 
-  edit = (domEvent: any) => {
+  edit: (domEvent: any) => void = (domEvent: any) => {
     // We should not need to use a timeout, but
     // if we don't do this, the InlinePopover's clickaway listener
     // is immediately picking up the event and closing.
@@ -70,7 +70,7 @@ export default class LinkEvent extends React.Component<EventRendererProps, *> {
     );
   };
 
-  openTarget = (i18n: I18nType) => {
+  openTarget: (i18n: I18nType) => void = (i18n: I18nType) => {
     const { project, event, onOpenLayout, onOpenExternalEvents } = this.props;
     const linkEvent = gd.asLinkEvent(event);
     const target = linkEvent.getTarget();
@@ -88,7 +88,7 @@ export default class LinkEvent extends React.Component<EventRendererProps, *> {
     }
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     const { anchorEl } = this.state;
 
     // Put back the focus after closing the inline popover.
@@ -101,7 +101,7 @@ export default class LinkEvent extends React.Component<EventRendererProps, *> {
     });
   };
 
-  render() {
+  render(): React.Node {
     const linkEvent = gd.asLinkEvent(this.props.event);
     const target = linkEvent.getTarget();
 

newIDE/app/src/EventsSheet/EventsTree/Renderers/RepeatEvent.js

@@ -35,12 +35,12 @@ export default class RepeatEvent extends React.Component<
   *
 > {
   _field: ?DefaultField = null;
-  state = {
+  state: {| anchorEl: null, editing: boolean |} = {
     editing: false,
     anchorEl: null,
   };
 
-  edit = (domEvent: any) => {
+  edit: (domEvent: any) => void = (domEvent: any) => {
     // We should not need to use a timeout, but
     // if we don't do this, the InlinePopover's clickaway listener
     // is immediately picking up the event and closing.
@@ -64,7 +64,7 @@ export default class RepeatEvent extends React.Component<
     );
   };
 
-  endEditing = () => {
+  endEditing: () => void = () => {
     const { anchorEl } = this.state;
 
     // Put back the focus after closing the inline popover.
@@ -77,7 +77,7 @@ export default class RepeatEvent extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Element<'div'> {
     var repeatEvent = gd.asRepeatEvent(this.props.event);
 
     const expression = repeatEvent.getRepeatExpression();

newIDE/app/src/EventsSheet/EventsTree/Renderers/StandardEvent.js

@@ -21,7 +21,7 @@ export default class StandardEvent extends React.Component<
   EventRendererProps,
   *
 > {
-  render() {
+  render(): React.Node {
     var standardEvent = gd.asStandardEvent(this.props.event);
 
     return (

newIDE/app/src/EventsSheet/EventsTree/Renderers/UnknownEvent.js

@@ -8,7 +8,7 @@ export default class UnknownEvent extends React.Component<
   EventRendererProps,
   *
 > {
-  render() {
+  render(): React.Element<'p'> {
     return (
       <p
         className={classNames({

newIDE/app/src/EventsSheet/EventsTree/Renderers/WhileEvent.js

@@ -31,7 +31,7 @@ export default class ForEachEvent extends React.Component<
   EventRendererProps,
   *
 > {
-  render() {
+  render(): React.Element<'div'> {
     var whileEvent = gd.asWhileEvent(this.props.event);
 
     return (

newIDE/app/src/EventsSheet/EventsTree/index.js

@@ -1,4 +1,5 @@
 // @flow
+import type { Node as $IMPORTED_TYPE$_Node, Element } from 'React';
 import React, { Component, type Node } from 'react';
 import findIndex from 'lodash/findIndex';
 import {
@@ -246,7 +247,13 @@ type SortableTreeNode = {
  * can be drag'n'dropped and events rows are virtualized.
  */
 export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
-  static defaultProps = {
+  static defaultProps: {|
+    selection: {|
+      selectedEvents: { [number]: EventContext },
+      selectedInstructions: { [number]: InstructionContext },
+      selectedInstructionsLists: { [number]: InstructionsListContext },
+    |},
+  |} = {
     selection: getInitialSelection(),
   };
   _list: ?any;
@@ -307,7 +314,7 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     this.forceEventsUpdate();
   }
 
-  _getEventRow(searchedEvent: gdBaseEvent) {
+  _getEventRow(searchedEvent: gdBaseEvent): number {
     // TODO: flatData could be replaced by a hashmap of events to row index
     return findIndex(
       this.state.flatData,
@@ -389,7 +396,12 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     };
   };
 
-  _onMoveNode = ({
+  _onMoveNode: ({
+    node: SortableTreeNode,
+    path: Array<any>,
+    treeData: any,
+    ...
+  }) => void = ({
     treeData,
     path,
     node,
@@ -432,11 +444,19 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     this.props.onEventMoved();
   };
 
-  _canDrag = ({ node }: { node: ?SortableTreeNode }) => {
+  _canDrag: ({ node: ?SortableTreeNode, ... }) => boolean = ({
+    node,
+  }: {
+    node: ?SortableTreeNode,
+  }) => {
     return !!node && !!node.event;
   };
 
-  _canDrop = ({ nextParent }: { nextParent: ?SortableTreeNode }) => {
+  _canDrop: ({ nextParent: ?SortableTreeNode, ... }) => boolean = ({
+    nextParent,
+  }: {
+    nextParent: ?SortableTreeNode,
+  }) => {
     if (nextParent) {
       if (nextParent.event) {
         return nextParent.event.canHaveSubEvents();
@@ -448,7 +468,9 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     return true;
   };
 
-  _canNodeHaveChildren = (node: ?SortableTreeNode) => {
+  _canNodeHaveChildren: (node: ?SortableTreeNode) => boolean = (
+    node: ?SortableTreeNode
+  ) => {
     if (node && node.event) {
       return node.event.canHaveSubEvents();
     }
@@ -456,7 +478,11 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     return false;
   };
 
-  _onVisibilityToggle = ({ node }: { node: SortableTreeNode }) => {
+  _onVisibilityToggle: ({ node: SortableTreeNode, ... }) => void = ({
+    node,
+  }: {
+    node: SortableTreeNode,
+  }) => {
     const { event } = node;
     if (!event) return;
 
@@ -464,7 +490,9 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     this.forceEventsUpdate();
   };
 
-  _renderObjectThumbnail = (objectName: string) => {
+  _renderObjectThumbnail: (
+    objectName: string
+  ) => null | $IMPORTED_TYPE$_Node = (objectName: string) => {
     const { project, scope, showObjectThumbnails } = this.props;
     if (!showObjectThumbnails) return null;
 
@@ -482,7 +510,14 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     );
   };
 
-  _renderEvent = ({ node }: { node: SortableTreeNode }) => {
+  _renderEvent: ({
+    node: SortableTreeNode,
+    ...
+  }) => null | $IMPORTED_TYPE$_Node = ({
+    node,
+  }: {
+    node: SortableTreeNode,
+  }) => {
     const { event, depth, disabled } = node;
     if (!event) return null;
 
@@ -533,7 +568,11 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     );
   };
 
-  _isNodeHighlighted = ({
+  _isNodeHighlighted: ({
+    node: SortableTreeNode,
+    searchQuery: ?Array<gdBaseEvent>,
+    ...
+  }) => void | gdBaseEvent | boolean = ({
     node,
     searchQuery,
   }: {
@@ -550,7 +589,7 @@ export default class ThemableEventsTree extends Component<EventsTreeProps, *> {
     );
   };
 
-  render() {
+  render(): Element<'div'> {
     // react-sortable-tree does the rendering by transforming treeData
     // into a flat array, the result being memoized. This hack forces
     // a re-rendering of events, by discarding the memoized flat array

newIDE/app/src/EventsSheet/InlineParameterEditor.js

@@ -41,7 +41,7 @@ export default class InlineParameterEditor extends React.Component<
   Props,
   State
 > {
-  state = {
+  state: State = {
     parameterMetadata: null,
     instructionMetadata: null,
     ParameterComponent: null,
@@ -66,7 +66,7 @@ export default class InlineParameterEditor extends React.Component<
     });
   }
 
-  _loadComponentFromInstruction(props: Props) {
+  _loadComponentFromInstruction(props: Props): void {
     const { project, isCondition, instruction, parameterIndex } = props;
     if (!instruction) return this._unload();
 
@@ -103,7 +103,7 @@ export default class InlineParameterEditor extends React.Component<
     );
   }
 
-  render() {
+  render(): null | React.Node {
     if (!this.state.ParameterComponent || !this.props.open) return null;
     const instruction = this.props.instruction;
     if (!instruction) return null;

newIDE/app/src/EventsSheet/InlinePopover.js

@@ -44,7 +44,7 @@ type Props = {|
  * Works like a dialog when opened (trapping the focus, dismissed on Escape,
  * dismissed on click/touch outside) but positioned under the edited parameter.
  */
-export default function InlinePopover(props: Props) {
+export default function InlinePopover(props: Props): React.Node {
   const startSentinel = React.useRef<?HTMLDivElement>(null);
   const endSentinel = React.useRef<?HTMLDivElement>(null);