use preact

.eslintrc

@@ -44,6 +44,7 @@
     "no-plusplus": "off",
     "no-ternary": "off",
     "no-undefined": "off",
+    "no-unused-vars": ["error", { "varsIgnorePattern": "h" }],
     "no-use-before-define": "off",
     "no-warning-comments": "off",
     "object-curly-newline": ["error", { "consistent": true }],
@@ -65,5 +66,6 @@
 
     "react/jsx-indent": ["error", 2],
     "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

src/settings/components/index.jsx

@@ -1,10 +1,9 @@
 import './site.scss';
-import React from 'react';
-import PropTypes from 'prop-types';
+import { h, Component } from 'preact';
 import * as settingActions from 'settings/actions/setting';
 import * as validator from 'shared/validators/setting';
 
-class SettingsComponent extends React.Component {
+class SettingsComponent extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -84,8 +83,4 @@ class SettingsComponent extends React.Component {
   }
 }
 
-SettingsComponent.contextTypes = {
-  store: PropTypes.any,
-};
-
 export default SettingsComponent;

src/settings/index.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { h, render } from 'preact';
 import SettingsComponent from './components';
 import reducer from 'settings/reducers/setting';
 import Provider from 'shared/store/provider';
@@ -9,7 +8,7 @@ const store = createStore(reducer);
 
 document.addEventListener('DOMContentLoaded', () => {
   let wrapper = document.getElementById('vimvixen-settings');
-  ReactDOM.render(
+  render(
     <Provider store={store}>
       <SettingsComponent />
     </Provider>,

src/shared/store/provider.jsx

@@ -1,18 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { h, Component } from 'preact';
 
-class Provider extends React.PureComponent {
+class Provider extends Component {
   getChildContext() {
     return { store: this.props.store };
   }
 
   render() {
-    return React.Children.only(this.props.children);
+    return <div>
+      { this.props.children }
+    </div>;
   }
 }
 
-Provider.childContextTypes = {
-  store: PropTypes.any,
-};
-
 export default Provider;

webpack.config.js

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