From 0452370df43cc4263f268e7064f824d7e6e489b3 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Wed, 1 May 2019 23:10:37 +0900 Subject: [PATCH] Types on src/console --- src/background/usecases/CompletionsUseCase.ts | 12 +-- src/console/actions/console.ts | 34 +++++---- src/console/actions/index.ts | 76 +++++++++++++++---- src/console/components/Console.tsx | 43 ++++++----- src/console/components/console/Completion.tsx | 45 ++++++----- .../components/console/CompletionItem.tsx | 9 ++- .../components/console/CompletionTitle.tsx | 11 ++- src/console/components/console/Input.tsx | 31 +++++--- src/console/components/console/Message.tsx | 13 ++-- src/console/index.tsx | 10 +-- src/console/reducers/index.ts | 23 ++++-- test/console/actions/console.test.ts | 2 +- test/console/reducers/console.test.ts | 2 +- 13 files changed, 206 insertions(+), 105 deletions(-) diff --git a/src/background/usecases/CompletionsUseCase.ts b/src/background/usecases/CompletionsUseCase.ts index 037d6eb..f3a808b 100644 --- a/src/background/usecases/CompletionsUseCase.ts +++ b/src/background/usecases/CompletionsUseCase.ts @@ -1,4 +1,3 @@ -import Completions from '../domains/Completions'; import CompletionGroup from '../domains/CompletionGroup'; import CommandDocs from '../domains/CommandDocs'; import CompletionsRepository from '../repositories/CompletionsRepository'; @@ -25,7 +24,7 @@ export default class CompletionsUseCase { this.settingRepository = new SettingRepository(); } - queryConsoleCommand(prefix: string): Promise { + queryConsoleCommand(prefix: string): Promise { let keys = Object.keys(CommandDocs); let items = keys .filter(name => name.startsWith(prefix)) @@ -38,10 +37,10 @@ export default class CompletionsUseCase { if (items.length === 0) { return Promise.resolve([]); } - return Promise.resolve([{ name: 'Console CompletionGroup', items }]); + return Promise.resolve([{ name: 'Console Command', items }]); } - async queryOpen(name: string, keywords: string): Promise { + async queryOpen(name: string, keywords: string): Promise { let settings = await this.settingRepository.get(); let groups: CompletionGroup[] = []; @@ -71,7 +70,10 @@ export default class CompletionsUseCase { } // eslint-disable-next-line max-statements - async queryBuffer(name: string, keywords: string): Promise { + async queryBuffer( + name: string, + keywords: string, + ): Promise { let lastId = await this.tabPresenter.getLastSelectedId(); let trimmed = keywords.trim(); let tabs: Tab[] = []; diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts index 3713a76..ceb419c 100644 --- a/src/console/actions/console.ts +++ b/src/console/actions/console.ts @@ -1,40 +1,40 @@ -import messages from 'shared/messages'; -import actions from 'console/actions'; +import messages from '../../shared/messages'; +import * as actions from './index'; -const hide = () => { +const hide = (): actions.ConsoleAction => { return { type: actions.CONSOLE_HIDE, }; }; -const showCommand = (text) => { +const showCommand = (text: string): actions.ConsoleAction => { return { type: actions.CONSOLE_SHOW_COMMAND, text: text }; }; -const showFind = () => { +const showFind = (): actions.ConsoleAction => { return { type: actions.CONSOLE_SHOW_FIND, }; }; -const showError = (text) => { +const showError = (text: string): actions.ConsoleAction => { return { type: actions.CONSOLE_SHOW_ERROR, text: text }; }; -const showInfo = (text) => { +const showInfo = (text: string): actions.ConsoleAction => { return { type: actions.CONSOLE_SHOW_INFO, text: text }; }; -const hideCommand = () => { +const hideCommand = (): actions.ConsoleAction => { window.top.postMessage(JSON.stringify({ type: messages.CONSOLE_UNFOCUS, }), '*'); @@ -43,15 +43,17 @@ const hideCommand = () => { }; }; -const enterCommand = async(text) => { +const enterCommand = async( + text: string, +): Promise => { await browser.runtime.sendMessage({ type: messages.CONSOLE_ENTER_COMMAND, text, }); - return hideCommand(text); + return hideCommand(); }; -const enterFind = (text) => { +const enterFind = (text: string): actions.ConsoleAction => { window.top.postMessage(JSON.stringify({ type: messages.CONSOLE_ENTER_FIND, text, @@ -59,14 +61,14 @@ const enterFind = (text) => { return hideCommand(); }; -const setConsoleText = (consoleText) => { +const setConsoleText = (consoleText: string): actions.ConsoleAction => { return { type: actions.CONSOLE_SET_CONSOLE_TEXT, consoleText, }; }; -const getCompletions = async(text) => { +const getCompletions = async(text: string): Promise => { let completions = await browser.runtime.sendMessage({ type: messages.CONSOLE_QUERY_COMPLETIONS, text, @@ -78,13 +80,13 @@ const getCompletions = async(text) => { }; }; -const completionNext = () => { +const completionNext = (): actions.ConsoleAction => { return { type: actions.CONSOLE_COMPLETION_NEXT, }; }; -const completionPrev = () => { +const completionPrev = (): actions.ConsoleAction => { return { type: actions.CONSOLE_COMPLETION_PREV, }; @@ -92,5 +94,5 @@ const completionPrev = () => { export { hide, showCommand, showFind, showError, showInfo, hideCommand, setConsoleText, - enterCommand, enterFind, getCompletions, completionNext, completionPrev + enterCommand, enterFind, getCompletions, completionNext, completionPrev, }; diff --git a/src/console/actions/index.ts b/src/console/actions/index.ts index b394179..3770496 100644 --- a/src/console/actions/index.ts +++ b/src/console/actions/index.ts @@ -1,13 +1,63 @@ -export default { - // console commands - CONSOLE_HIDE: 'console.hide', - CONSOLE_SHOW_COMMAND: 'console.show.command', - CONSOLE_SHOW_ERROR: 'console.show.error', - CONSOLE_SHOW_INFO: 'console.show.info', - CONSOLE_HIDE_COMMAND: 'console.hide.command', - CONSOLE_SET_CONSOLE_TEXT: 'console.set.command', - CONSOLE_SET_COMPLETIONS: 'console.set.completions', - CONSOLE_COMPLETION_NEXT: 'console.completion.next', - CONSOLE_COMPLETION_PREV: 'console.completion.prev', - CONSOLE_SHOW_FIND: 'console.show.find', -}; +// console commands +export const CONSOLE_HIDE = 'console.hide'; +export const CONSOLE_SHOW_COMMAND = 'console.show.command'; +export const CONSOLE_SHOW_ERROR = 'console.show.error'; +export const CONSOLE_SHOW_INFO = 'console.show.info'; +export const CONSOLE_HIDE_COMMAND = 'console.hide.command'; +export const CONSOLE_SET_CONSOLE_TEXT = 'console.set.command'; +export const CONSOLE_SET_COMPLETIONS = 'console.set.completions'; +export const CONSOLE_COMPLETION_NEXT = 'console.completion.next'; +export const CONSOLE_COMPLETION_PREV = 'console.completion.prev'; +export const CONSOLE_SHOW_FIND = 'console.show.find'; + +interface HideAction { + type: typeof CONSOLE_HIDE; +} + +interface ShowCommand { + type: typeof CONSOLE_SHOW_COMMAND; + text: string; +} + +interface ShowFindAction { + type: typeof CONSOLE_SHOW_FIND; +} + +interface ShowErrorAction { + type: typeof CONSOLE_SHOW_ERROR; + text: string; +} + +interface ShowInfoAction { + type: typeof CONSOLE_SHOW_INFO; + text: string; +} + +interface HideCommandAction { + type: typeof CONSOLE_HIDE_COMMAND; +} + +interface SetConsoleTextAction { + type: typeof CONSOLE_SET_CONSOLE_TEXT; + consoleText: string; +} + +interface SetCompletionsAction { + type: typeof CONSOLE_SET_COMPLETIONS; + completions: any[]; + completionSource: string; +} + +interface CompletionNextAction { + type: typeof CONSOLE_COMPLETION_NEXT; +} + +interface CompletionPrevAction { + type: typeof CONSOLE_COMPLETION_PREV; +} + +export type ConsoleAction = + HideAction | ShowCommand | ShowFindAction | ShowErrorAction | + ShowInfoAction | HideCommandAction | SetConsoleTextAction | + SetCompletionsAction | CompletionNextAction | CompletionPrevAction; + diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx index 5427e43..09c0f50 100644 --- a/src/console/components/Console.tsx +++ b/src/console/components/Console.tsx @@ -1,7 +1,6 @@ import './console.scss'; import { connect } from 'react-redux'; import React from 'react'; -import PropTypes from 'prop-types'; import Input from './console/Input'; import Completion from './console/Completion'; import Message from './console/Message'; @@ -9,14 +8,29 @@ import * as consoleActions from '../../console/actions/console'; const COMPLETION_MAX_ITEMS = 33; -class Console extends React.Component { +interface Props { + mode?: string; + consoleText?: string; + messageText?: string; + children?: string; +} + +class Console extends React.Component { + private input: HTMLInputElement | null; + + constructor(props: Props) { + super(props); + + this.input = null; + } + onBlur() { if (this.props.mode === 'command' || this.props.mode === 'find') { return this.props.dispatch(consoleActions.hideCommand()); } } - doEnter(e) { + doEnter(e: React.KeyboardEvent) { e.stopPropagation(); e.preventDefault(); @@ -28,19 +42,19 @@ class Console extends React.Component { } } - selectNext(e) { + selectNext(e: React.KeyboardEvent) { this.props.dispatch(consoleActions.completionNext()); e.stopPropagation(); e.preventDefault(); } - selectPrev(e) { + selectPrev(e: React.KeyboardEvent) { this.props.dispatch(consoleActions.completionPrev()); e.stopPropagation(); e.preventDefault(); } - onKeyDown(e) { + onKeyDown(e: React.KeyboardEvent) { if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { this.props.dispatch(consoleActions.hideCommand()); } @@ -81,7 +95,7 @@ class Console extends React.Component { } } - onChange(e) { + onChange(e: React.ChangeEvent) { let text = e.target.value; this.props.dispatch(consoleActions.setConsoleText(text)); if (this.props.mode === 'command') { @@ -90,7 +104,7 @@ class Console extends React.Component { } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps: Props) { if (!this.input) { return; } @@ -134,16 +148,11 @@ class Console extends React.Component { focus() { window.focus(); - this.input.focus(); + if (this.input) { + this.input.focus(); + } } } -Console.propTypes = { - mode: PropTypes.string, - consoleText: PropTypes.string, - messageText: PropTypes.string, - children: PropTypes.string, -}; - -const mapStateToProps = state => state; +const mapStateToProps = (state: any) => state; export default connect(mapStateToProps)(Console); diff --git a/src/console/components/console/Completion.tsx b/src/console/components/console/Completion.tsx index 5477cb6..169a39c 100644 --- a/src/console/components/console/Completion.tsx +++ b/src/console/components/console/Completion.tsx @@ -1,15 +1,36 @@ import React from 'react'; -import PropTypes from 'prop-types'; import CompletionItem from './CompletionItem'; import CompletionTitle from './CompletionTitle'; -class Completion extends React.Component { - constructor() { - super(); +interface Item { + icon?: string; + caption?: string; + url?: string; +} + +interface Group { + name: string; + items: Item[]; +} + +interface Props { + select: number; + size: number; + completions: Group[]; +} + +interface State { + viewOffset: number; + select: number; +} + +class Completion extends React.Component { + constructor(props: Props) { + super(props); this.state = { viewOffset: 0, select: -1 }; } - static getDerivedStateFromProps(nextProps, prevState) { + static getDerivedStateFromProps(nextProps: Props, prevState: State) { if (prevState.select === nextProps.select) { return null; } @@ -24,6 +45,7 @@ class Completion extends React.Component { } index += g.items.length; } + return -1; })(); let viewOffset = 0; @@ -70,17 +92,4 @@ class Completion extends React.Component { } } -Completion.propTypes = { - select: PropTypes.number, - size: PropTypes.number, - completions: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - items: PropTypes.arrayOf(PropTypes.shape({ - icon: PropTypes.string, - caption: PropTypes.string, - url: PropTypes.string, - })), - })), -}; - export default Completion; diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx index 3dc552b..1cbf3de 100644 --- a/src/console/components/console/CompletionItem.tsx +++ b/src/console/components/console/CompletionItem.tsx @@ -1,7 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -const CompletionItem = (props) => { +interface Props { + highlight: boolean; + caption?: string; + url?: string; + icon?: string; +} + +const CompletionItem = (props: Props) => { let className = 'vimvixen-console-completion-item'; if (props.highlight) { className += ' vimvixen-completion-selected'; diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx index 4fcba3f..2543619 100644 --- a/src/console/components/console/CompletionTitle.tsx +++ b/src/console/components/console/CompletionTitle.tsx @@ -1,14 +1,13 @@ import React from 'react'; -import PropTypes from 'prop-types'; -const CompletionTitle = (props) => { +interface Props { + title: string; +} + +const CompletionTitle = (props: Props) => { return
  • {props.title}
  • ; }; -CompletionTitle.propTypes = { - title: PropTypes.string, -}; - export default CompletionTitle; diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx index cbd3348..d0348bd 100644 --- a/src/console/components/console/Input.tsx +++ b/src/console/components/console/Input.tsx @@ -1,9 +1,26 @@ import React from 'react'; -import PropTypes from 'prop-types'; -class Input extends React.Component { +interface Props { + mode: string; + value: string; + onBlur: (e: React.FocusEvent) => void; + onKeyDown: (e: React.KeyboardEvent) => void; + onChange: (e: React.ChangeEvent) => void; +} + +class Input extends React.Component { + private input: HTMLInputElement | null; + + constructor(props: Props) { + super(props); + + this.input = null; + } + focus() { - this.input.focus(); + if (this.input) { + this.input.focus(); + } } render() { @@ -32,12 +49,4 @@ class Input extends React.Component { } } -Input.propTypes = { - mode: PropTypes.string, - value: PropTypes.string, - onBlur: PropTypes.func, - onKeyDown: PropTypes.func, - onChange: PropTypes.func, -}; - export default Input; diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx index dd96248..07a929e 100644 --- a/src/console/components/console/Message.tsx +++ b/src/console/components/console/Message.tsx @@ -1,7 +1,11 @@ import React from 'react'; -import PropTypes from 'prop-types'; -const Message = (props) => { +interface Props { + mode: string; + children: string[]; +} + +const Message = (props: Props) => { switch (props.mode) { case 'error': return ( @@ -16,10 +20,7 @@ const Message = (props) => {

    ); } -}; - -Message.propTypes = { - children: PropTypes.string, + return null; }; export default Message; diff --git a/src/console/index.tsx b/src/console/index.tsx index 3190a9a..ee3a8ee 100644 --- a/src/console/index.tsx +++ b/src/console/index.tsx @@ -1,8 +1,8 @@ -import messages from 'shared/messages'; -import reducers from 'console/reducers'; +import messages from '../shared/messages'; +import reducers from './reducers'; import { createStore, applyMiddleware } from 'redux'; import promise from 'redux-promise'; -import * as consoleActions from 'console/actions/console'; +import * as consoleActions from './actions/console'; import { Provider } from 'react-redux'; import Console from './components/Console'; import React from 'react'; @@ -22,7 +22,7 @@ window.addEventListener('load', () => { wrapper); }); -const onMessage = (message) => { +const onMessage = (message: any): any => { switch (message.type) { case messages.CONSOLE_SHOW_COMMAND: return store.dispatch(consoleActions.showCommand(message.command)); @@ -38,5 +38,5 @@ const onMessage = (message) => { }; browser.runtime.onMessage.addListener(onMessage); -let port = browser.runtime.connect({ name: 'vimvixen-console' }); +let port = browser.runtime.connect(undefined, { name: 'vimvixen-console' }); port.onMessage.addListener(onMessage); diff --git a/src/console/reducers/index.ts b/src/console/reducers/index.ts index 614a72f..37ed715 100644 --- a/src/console/reducers/index.ts +++ b/src/console/reducers/index.ts @@ -1,4 +1,14 @@ -import actions from 'console/actions'; +import * as actions from '../actions'; + +interface State { + mode: string; + messageText: string; + consoleText: string; + completionSource: string; + completions: any[], + select: number; + viewIndex: number; +} const defaultState = { mode: '', @@ -10,7 +20,7 @@ const defaultState = { viewIndex: 0, }; -const nextSelection = (state) => { +const nextSelection = (state: State): number => { if (state.completions.length === 0) { return -1; } @@ -27,7 +37,7 @@ const nextSelection = (state) => { return -1; }; -const prevSelection = (state) => { +const prevSelection = (state: State): number => { let length = state.completions .map(g => g.items.length) .reduce((x, y) => x + y); @@ -37,7 +47,7 @@ const prevSelection = (state) => { return state.select - 1; }; -const nextConsoleText = (completions, select, defaults) => { +const nextConsoleText = (completions: any[], select: number, defaults: any) => { if (select < 0) { return defaults; } @@ -46,7 +56,10 @@ const nextConsoleText = (completions, select, defaults) => { }; // eslint-disable-next-line max-lines-per-function -export default function reducer(state = defaultState, action = {}) { +export default function reducer( + state: State = defaultState, + action: actions.ConsoleAction, +): State { switch (action.type) { case actions.CONSOLE_HIDE: return { ...state, diff --git a/test/console/actions/console.test.ts b/test/console/actions/console.test.ts index 10cd9fe..e45d008 100644 --- a/test/console/actions/console.test.ts +++ b/test/console/actions/console.test.ts @@ -1,4 +1,4 @@ -import actions from 'console/actions'; +import * as actions from 'console/actions'; import * as consoleActions from 'console/actions/console'; describe("console actions", () => { diff --git a/test/console/reducers/console.test.ts b/test/console/reducers/console.test.ts index d5a38cf..47e7daf 100644 --- a/test/console/reducers/console.test.ts +++ b/test/console/reducers/console.test.ts @@ -1,4 +1,4 @@ -import actions from 'console/actions'; +import * as actions from 'console/actions'; import reducer from 'console/reducers'; describe("console reducer", () => {