8 files changed, 132 insertions, 63 deletions
diff --git a/src/console/components/console.jsx b/src/console/components/Console.jsx
index 7994f78..5427e43 100644
--- a/src/console/components/console.jsx
+++ b/src/console/components/Console.jsx
@@ -1,17 +1,18 @@
 import './console.scss';
-import { connect } from 'preact-redux';
-import { Component, h } from 'preact';
-import Input from './console/input';
-import Completion from './console/completion';
-import Message from './console/message';
+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';
 import * as consoleActions from '../../console/actions/console';
 
 const COMPLETION_MAX_ITEMS = 33;
 
-class ConsoleComponent extends Component {
+class Console extends React.Component {
   onBlur() {
     if (this.props.mode === 'command' || this.props.mode === 'find') {
-      return this.context.store.dispatch(consoleActions.hideCommand());
+      return this.props.dispatch(consoleActions.hideCommand());
     }
   }
 
@@ -21,45 +22,45 @@ class ConsoleComponent extends Component {
 
     let value = e.target.value;
     if (this.props.mode === 'command') {
-      return this.context.store.dispatch(consoleActions.enterCommand(value));
+      return this.props.dispatch(consoleActions.enterCommand(value));
     } else if (this.props.mode === 'find') {
-      return this.context.store.dispatch(consoleActions.enterFind(value));
+      return this.props.dispatch(consoleActions.enterFind(value));
     }
   }
 
   selectNext(e) {
-    this.context.store.dispatch(consoleActions.completionNext());
+    this.props.dispatch(consoleActions.completionNext());
     e.stopPropagation();
     e.preventDefault();
   }
 
   selectPrev(e) {
-    this.context.store.dispatch(consoleActions.completionPrev());
+    this.props.dispatch(consoleActions.completionPrev());
     e.stopPropagation();
     e.preventDefault();
   }
 
   onKeyDown(e) {
     if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) {
-      this.context.store.dispatch(consoleActions.hideCommand());
+      this.props.dispatch(consoleActions.hideCommand());
     }
     switch (e.keyCode) {
     case KeyboardEvent.DOM_VK_ESCAPE:
-      return this.context.store.dispatch(consoleActions.hideCommand());
+      return this.props.dispatch(consoleActions.hideCommand());
     case KeyboardEvent.DOM_VK_RETURN:
       return this.doEnter(e);
     case KeyboardEvent.DOM_VK_TAB:
       if (e.shiftKey) {
-        this.context.store.dispatch(consoleActions.completionPrev());
+        this.props.dispatch(consoleActions.completionPrev());
       } else {
-        this.context.store.dispatch(consoleActions.completionNext());
+        this.props.dispatch(consoleActions.completionNext());
       }
       e.stopPropagation();
       e.preventDefault();
       break;
     case KeyboardEvent.DOM_VK_OPEN_BRACKET:
       if (e.ctrlKey) {
-        return this.context.store.dispatch(consoleActions.hideCommand());
+        return this.props.dispatch(consoleActions.hideCommand());
       }
       break;
     case KeyboardEvent.DOM_VK_M:
@@ -80,11 +81,11 @@ class ConsoleComponent extends Component {
     }
   }
 
-  onInput(e) {
+  onChange(e) {
     let text = e.target.value;
-    this.context.store.dispatch(consoleActions.setConsoleText(text));
+    this.props.dispatch(consoleActions.setConsoleText(text));
     if (this.props.mode === 'command') {
-      this.context.store.dispatch(consoleActions.getCompletions(text));
+      this.props.dispatch(consoleActions.getCompletions(text));
     }
   }
 
@@ -94,7 +95,7 @@ class ConsoleComponent extends Component {
       return;
     }
     if (prevProps.mode !== 'command' && this.props.mode === 'command') {
-      this.context.store.dispatch(
+      this.props.dispatch(
         consoleActions.getCompletions(this.props.consoleText));
       this.focus();
     } else if (prevProps.mode !== 'find' && this.props.mode === 'find') {
@@ -117,7 +118,7 @@ class ConsoleComponent extends Component {
           mode={this.props.mode}
           onBlur={this.onBlur.bind(this)}
           onKeyDown={this.onKeyDown.bind(this)}
-          onInput={this.onInput.bind(this)}
+          onChange={this.onChange.bind(this)}
           value={this.props.consoleText}
         />
       </div>;
@@ -126,6 +127,8 @@ class ConsoleComponent extends Component {
       return <Message mode={ this.props.mode } >
         { this.props.messageText }
       </Message>;
+    default:
+      return null;
     }
   }
 
@@ -135,5 +138,12 @@ class ConsoleComponent extends Component {
   }
 }
 
+Console.propTypes = {
+  mode: PropTypes.string,
+  consoleText: PropTypes.string,
+  messageText: PropTypes.string,
+  children: PropTypes.string,
+};
+
 const mapStateToProps = state => state;
-export default connect(mapStateToProps)(ConsoleComponent);
+export default connect(mapStateToProps)(Console);
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/Completion.jsx
index d836cec..5477cb6 100644
--- a/src/console/components/console/completion.jsx
+++ b/src/console/components/console/Completion.jsx
@@ -1,29 +1,9 @@
-import { Component, h } from 'preact';
+import React from 'react';
+import PropTypes from 'prop-types';
+import CompletionItem from './CompletionItem';
+import CompletionTitle from './CompletionTitle';
 
-const CompletionTitle = (props) => {
-  return <li className='vimvixen-console-completion-title' >{props.title}</li>;
-};
-
-const CompletionItem = (props) => {
-  let className = 'vimvixen-console-completion-item';
-  if (props.highlight) {
-    className += ' vimvixen-completion-selected';
-  }
-  return <li
-    className={className}
-    style={{ backgroundImage: 'url(' + props.icon + ')' }}
-  >
-    <span
-      className='vimvixen-console-completion-item-caption'
-    >{props.caption}</span>
-    <span
-      className='vimvixen-console-completion-item-url'
-    >{props.url}</span>
-  </li>;
-};
-
-
-class CompletionComponent extends Component {
+class Completion extends React.Component {
   constructor() {
     super();
     this.state = { viewOffset: 0, select: -1 };
@@ -63,9 +43,13 @@ class CompletionComponent extends Component {
     let index = 0;
 
     for (let group of this.props.completions) {
-      eles.push(<CompletionTitle title={ group.name }/>);
+      eles.push(<CompletionTitle
+        key={`group-${index}`}
+        title={ group.name }
+      />);
       for (let item of group.items) {
         eles.push(<CompletionItem
+          key={`item-${index}`}
           icon={item.icon}
           caption={item.caption}
           url={item.url}
@@ -86,4 +70,17 @@ class CompletionComponent extends Component {
   }
 }
 
-export default CompletionComponent;
+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.jsx b/src/console/components/console/CompletionItem.jsx
new file mode 100644
index 0000000..3dc552b
--- /dev/null
+++ b/src/console/components/console/CompletionItem.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CompletionItem = (props) => {
+  let className = 'vimvixen-console-completion-item';
+  if (props.highlight) {
+    className += ' vimvixen-completion-selected';
+  }
+  return <li
+    className={className}
+    style={{ backgroundImage: 'url(' + props.icon + ')' }}
+  >
+    <span
+      className='vimvixen-console-completion-item-caption'
+    >{props.caption}</span>
+    <span
+      className='vimvixen-console-completion-item-url'
+    >{props.url}</span>
+  </li>;
+};
+
+CompletionItem.propTypes = {
+  highlight: PropTypes.bool,
+  caption: PropTypes.string,
+  url: PropTypes.string,
+};
+
+export default CompletionItem;
diff --git a/src/console/components/console/CompletionTitle.jsx b/src/console/components/console/CompletionTitle.jsx
new file mode 100644
index 0000000..4fcba3f
--- /dev/null
+++ b/src/console/components/console/CompletionTitle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CompletionTitle = (props) => {
+  return <li className='vimvixen-console-completion-title'>
+    {props.title}
+  </li>;
+};
+
+CompletionTitle.propTypes = {
+  title: PropTypes.string,
+};
+
+export default CompletionTitle;
diff --git a/src/console/components/console/input.jsx b/src/console/components/console/Input.jsx
index d59e6e7..cbd3348 100644
--- a/src/console/components/console/input.jsx
+++ b/src/console/components/console/Input.jsx
@@ -1,6 +1,7 @@
-import { Component, h } from 'preact';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-export default class InputComponent extends Component {
+class Input extends React.Component {
   focus() {
     this.input.focus();
   }
@@ -23,10 +24,20 @@ export default class InputComponent extends Component {
           ref={(c) => { this.input = c; }}
           onBlur={this.props.onBlur}
           onKeyDown={this.props.onKeyDown}
-          onInput={this.props.onInput}
+          onChange={this.props.onChange}
           value={this.props.value}
         />
       </div>
     );
   }
 }
+
+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.jsx b/src/console/components/console/Message.jsx
index 5b60af4..dd96248 100644
--- a/src/console/components/console/message.jsx
+++ b/src/console/components/console/Message.jsx
@@ -1,6 +1,7 @@
-import { h } from 'preact';
+import React from 'react';
+import PropTypes from 'prop-types';
 
-export default function Message(props) {
+const Message = (props) => {
   switch (props.mode) {
   case 'error':
     return (
@@ -15,4 +16,10 @@ export default function Message(props) {
       </p>
     );
   }
-}
+};
+
+Message.propTypes = {
+  children: PropTypes.string,
+};
+
+export default Message;
diff --git a/src/console/index.html b/src/console/index.html
index 5c1e99c..73e1e23 100644
--- a/src/console/index.html
+++ b/src/console/index.html
@@ -5,5 +5,7 @@
     <title>VimVixen console</title>
     <script src='console.js'></script>
   </head>
-  <body class='vimvixen-console'></body>
+  <body>
+    <div id='vimvixen-console' class='vimvixen-console'></div>
+  </body>
 </html>
diff --git a/src/console/index.jsx b/src/console/index.jsx
index dfd323e..3190a9a 100644
--- a/src/console/index.jsx
+++ b/src/console/index.jsx
@@ -3,11 +3,10 @@ import reducers from 'console/reducers';
 import { createStore, applyMiddleware } from 'redux';
 import promise from 'redux-promise';
 import * as consoleActions from 'console/actions/console';
-
-import { Provider } from 'preact-redux';
-import Console from './components/console';
-
-import { render, h } from 'preact';
+import { Provider } from 'react-redux';
+import Console from './components/Console';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 const store = createStore(
   reducers,
@@ -15,11 +14,12 @@ const store = createStore(
 );
 
 window.addEventListener('load', () => {
-  render(
+  let wrapper = document.getElementById('vimvixen-console');
+  ReactDOM.render(
     <Provider store={store} >
       <Console></Console>
     </Provider>,
-    document.body);
+    wrapper);
 });
 
 const onMessage = (message) => {