From 55f15c9350cc531324e6182895f494eeb8174bc6 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Mon, 29 Apr 2019 09:13:59 +0900 Subject: [PATCH] Move to react --- src/console/components/console.jsx | 34 ++++++++++--------- src/console/components/console/completion.jsx | 4 +-- src/console/components/console/input.jsx | 4 +-- src/console/components/console/message.jsx | 2 -- src/console/index.html | 4 ++- src/console/index.jsx | 12 +++---- .../components/form/blacklist-form.jsx | 4 +-- src/settings/components/form/keymaps-form.jsx | 4 +-- .../components/form/properties-form.jsx | 4 +-- src/settings/components/form/search-form.jsx | 4 +-- src/settings/components/index.jsx | 8 ++--- src/settings/components/ui/add-button.jsx | 4 +-- src/settings/components/ui/delete-button.jsx | 4 +-- src/settings/components/ui/input.jsx | 4 +-- src/settings/index.jsx | 4 +-- .../components/console/completion.test.jsx | 2 +- .../components/form/blacklist-form.test.jsx | 2 +- .../components/form/keymaps-form.test.jsx | 2 +- .../components/form/properties-form.test.jsx | 2 +- .../form/search-engine-form.test.jsx | 2 +- test/settings/components/ui/input.test.jsx | 2 +- webpack.config.js | 2 +- 22 files changed, 58 insertions(+), 56 deletions(-) diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx index 7994f78..b792088 100644 --- a/src/console/components/console.jsx +++ b/src/console/components/console.jsx @@ -1,6 +1,6 @@ import './console.scss'; -import { connect } from 'preact-redux'; -import { Component, h } from 'preact'; +import { connect } from 'react-redux'; +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 { this.props.messageText } ; + default: + return null; } } diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx index d836cec..5d248a0 100644 --- a/src/console/components/console/completion.jsx +++ b/src/console/components/console/completion.jsx @@ -1,4 +1,4 @@ -import { Component, h } from 'preact'; +import React from 'react'; const CompletionTitle = (props) => { return
  • {props.title}
    • ; @@ -23,7 +23,7 @@ const CompletionItem = (props) => { }; -class CompletionComponent extends Component { +class CompletionComponent extends React.Component { constructor() { super(); this.state = { viewOffset: 0, select: -1 }; diff --git a/src/console/components/console/input.jsx b/src/console/components/console/input.jsx index d59e6e7..3ac075e 100644 --- a/src/console/components/console/input.jsx +++ b/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(); } diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx index 5b60af4..0370f01 100644 --- a/src/console/components/console/message.jsx +++ b/src/console/components/console/message.jsx @@ -1,5 +1,3 @@ -import { h } from 'preact'; - export default function Message(props) { switch (props.mode) { case 'error': 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 @@ VimVixen console - + +
    + diff --git a/src/console/index.jsx b/src/console/index.jsx index dfd323e..0d0a8b9 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 { Provider } from 'react-redux'; import Console from './components/console'; - -import { render, h } from 'preact'; +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( , - document.body); + wrapper); }); const onMessage = (message) => { diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx index 7ae9652..492c3af 100644 --- a/src/settings/components/form/blacklist-form.jsx +++ b/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; diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index ca51c96..8c0a83f 100644 --- a/src/settings/components/form/keymaps-form.jsx +++ b/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; diff --git a/src/settings/components/form/properties-form.jsx b/src/settings/components/form/properties-form.jsx index ceb79d7..7d591d5 100644 --- a/src/settings/components/form/properties-form.jsx +++ b/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; diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx index 2d5f01b..81204f3 100644 --- a/src/settings/components/form/search-form.jsx +++ b/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; diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index 9633359..9dae25e 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -1,6 +1,6 @@ import './site.scss'; -import { h, Component } from 'preact'; -import { connect } from 'preact-redux'; +import React from 'react'; +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)); } } diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx index 79292d8..031d28b 100644 --- a/src/settings/components/ui/add-button.jsx +++ b/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 { diff --git a/test/settings/components/form/blacklist-form.test.jsx b/test/settings/components/form/blacklist-form.test.jsx index 1c46943..40067d0 100644 --- a/test/settings/components/form/blacklist-form.test.jsx +++ b/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", () => { diff --git a/test/settings/components/form/keymaps-form.test.jsx b/test/settings/components/form/keymaps-form.test.jsx index 55edf8c..79d8d20 100644 --- a/test/settings/components/form/keymaps-form.test.jsx +++ b/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", () => { diff --git a/test/settings/components/form/properties-form.test.jsx b/test/settings/components/form/properties-form.test.jsx index 0efe382..171dcb6 100644 --- a/test/settings/components/form/properties-form.test.jsx +++ b/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", () => { diff --git a/test/settings/components/form/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx index c52419d..d1cbb30 100644 --- a/test/settings/components/form/search-engine-form.test.jsx +++ b/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", () => { diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx index 0711bba..db12bf8 100644 --- a/test/settings/components/ui/input.test.jsx +++ b/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", () => { diff --git a/webpack.config.js b/webpack.config.js index 90fd526..9694fd5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,7 +24,7 @@ config = { exclude: /node_modules/, loader: 'babel-loader', query: { - presets: ['preact', 'stage-2'] + presets: ['react', 'stage-2'] } }, {