Move to react

src/console/components/console.jsx

@@ -1,6 +1,6 @@
 import './console.scss';
-import { connect } from 'preact-redux';
+import { connect } from 'react-redux';
-import { Component, h } from 'preact';
+import React from 'react';
 import Input from './console/input';
 import Completion from './console/completion';
 import Message from './console/message';
@@ -8,10 +8,10 @@ import * as consoleActions from '../../console/actions/console';
 
 const COMPLETION_MAX_ITEMS = 33;
 
-class ConsoleComponent extends Component {
+class ConsoleComponent 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 +21,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:
@@ -82,9 +82,9 @@ class ConsoleComponent extends Component {
 
   onInput(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 +94,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') {
@@ -126,6 +126,8 @@ class ConsoleComponent extends Component {
       return <Message mode={ this.props.mode } >
         { this.props.messageText }
       </Message>;
+    default:
+      return null;
     }
   }
 

src/console/components/console/completion.jsx

@@ -1,4 +1,4 @@
-import { Component, h } from 'preact';
+import React from 'react';
 
 const CompletionTitle = (props) => {
   return <li className='vimvixen-console-completion-title' >{props.title}</li>;
@@ -23,7 +23,7 @@ const CompletionItem = (props) => {
 };
 
 
-class CompletionComponent extends Component {
+class CompletionComponent extends React.Component {
   constructor() {
     super();
     this.state = { viewOffset: 0, select: -1 };

src/console/components/console/input.jsx

@@ -1,6 +1,6 @@
-import { Component, h } from 'preact';
+import React from 'react';
 
-export default class InputComponent extends Component {
+export default class InputComponent extends React.Component {
   focus() {
     this.input.focus();
   }

src/console/components/console/message.jsx

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 export default function Message(props) {
   switch (props.mode) {
   case 'error':

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>

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 'react-redux';
-import { Provider } from 'preact-redux';
 import Console from './components/console';
-
+import React from 'react';
-import { render, h } from 'preact';
+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) => {

src/settings/components/form/blacklist-form.jsx

@@ -1,9 +1,9 @@
 import './blacklist-form.scss';
 import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
-import { h, Component } from 'preact';
+import React from 'react';
 
-class BlacklistForm extends Component {
+class BlacklistForm extends React.Component {
 
   render() {
     let value = this.props.value;

src/settings/components/form/keymaps-form.jsx

@@ -1,5 +1,5 @@
 import './keymaps-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
 import Input from '../ui/input';
 
 const KeyMapFields = [
@@ -72,7 +72,7 @@ const KeyMapFields = [
 
 const AllowdOps = [].concat(...KeyMapFields.map(group => group.map(e => e[0])));
 
-class KeymapsForm extends Component {
+class KeymapsForm extends React.Component {
 
   render() {
     let values = this.props.value;

src/settings/components/form/properties-form.jsx

@@ -1,7 +1,7 @@
 import './properties-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
 
-class PropertiesForm extends Component {
+class PropertiesForm extends React.Component {
 
   render() {
     let types = this.props.types;

src/settings/components/form/search-form.jsx

@@ -1,9 +1,9 @@
 import './search-form.scss';
-import { h, Component } from 'preact';
+import React from 'react';
 import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 
-class SearchForm extends Component {
+class SearchForm extends React.Component {
 
   render() {
     let value = this.props.value;

src/settings/components/index.jsx

@@ -1,6 +1,6 @@
 import './site.scss';
-import { h, Component } from 'preact';
+import React from 'react';
-import { connect } from 'preact-redux';
+import { connect } from 'react-redux';
 import Input from './ui/input';
 import SearchForm from './form/search-form';
 import KeymapsForm from './form/keymaps-form';
@@ -13,7 +13,7 @@ const DO_YOU_WANT_TO_CONTINUE =
   'Some settings in JSON can be lost when migrating.  ' +
   'Do you want to continue?';
 
-class SettingsComponent extends Component {
+class SettingsComponent extends React.Component {
   componentDidMount() {
     this.props.dispatch(settingActions.load());
   }
@@ -136,7 +136,7 @@ class SettingsComponent extends Component {
       this.props.dispatch(settingActions.switchToForm(this.props.json));
     }
 
-    let settings = this.context.store.getState();
+    let settings = this.props.getState();
     this.props.dispatch(settingActions.save(settings));
   }
 }

src/settings/components/ui/add-button.jsx

@@ -1,7 +1,7 @@
 import './add-button.scss';
-import { h, Component } from 'preact';
+import React from 'react';
 
-class AddButton extends Component {
+class AddButton extends React.Component {
   render() {
     return <input
       className='ui-add-button' type='button' value='&#x271a;'

src/settings/components/ui/delete-button.jsx

@@ -1,7 +1,7 @@
 import './delete-button.scss';
-import { h, Component } from 'preact';
+import React from 'react';
 
-class DeleteButton extends Component {
+class DeleteButton extends React.Component {
   render() {
     return <input
       className='ui-delete-button' type='button' value='&#x2716;'

src/settings/components/ui/input.jsx

@@ -1,7 +1,7 @@
-import { h, Component } from 'preact';
+import React from 'react';
 import './input.scss';
 
-class Input extends Component {
+class Input extends React.Component {
 
   renderText(props) {
     let inputClassName = props.error ? 'input-error' : '';

src/settings/index.jsx

@@ -1,7 +1,7 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import SettingsComponent from './components';
 import reducer from './reducers/setting';
-import { Provider } from 'preact-redux';
+import { Provider } from 'react-redux';
 import promise from 'redux-promise';
 import { createStore, applyMiddleware } from 'redux';
 

test/console/components/console/completion.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import Completion from 'console/components/console/completion'
 
 describe("console/components/console/completion", () => {

test/settings/components/form/blacklist-form.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import BlacklistForm from 'settings/components/form/blacklist-form'
 
 describe("settings/form/BlacklistForm", () => {

test/settings/components/form/keymaps-form.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import KeymapsForm from 'settings/components/form/keymaps-form'
 
 describe("settings/form/KeymapsForm", () => {

test/settings/components/form/properties-form.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import PropertiesForm from 'settings/components/form/properties-form'
 
 describe("settings/form/PropertiesForm", () => {

test/settings/components/form/search-engine-form.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import SearchForm from 'settings/components/form/search-form'
 
 describe("settings/form/SearchForm", () => {

test/settings/components/ui/input.test.jsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'react';
 import Input from 'settings/components/ui/input'
 
 describe("settings/ui/Input", () => {

webpack.config.js

@@ -24,7 +24,7 @@ config = {
         exclude: /node_modules/,
         loader: 'babel-loader',
         query: {
-          presets: ['preact', 'stage-2']
+          presets: ['react', 'stage-2']
         }
       },
       {