feat(build): combat with React

packages/react-dom/index.js

@@ -0,0 +1,5 @@
+import preact from 'preact'
+
+export default {
+  render: preact.render,
+}

packages/react/index.js

@@ -0,0 +1,31 @@
+import preact from 'preact'
+/** @jsx preact.h */
+
+function shallowEqual(a, b) {
+  if (a === b) return true
+  if (typeof a === 'object' && typeof a === typeof b) {
+    if (a === null || b === null) return false
+    for (const key in a) {
+      if (a[key] !== b[key]) return false
+    }
+    for (const key in b) {
+      if (!Object.prototype.hasOwnProperty.call(a, key)) return false
+    }
+    return true
+  }
+  return false
+}
+
+class PureComponent extends preact.Component {
+  shouldComponentUpdate(nextProps, nextState) {
+    return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState)
+  }
+}
+
+const React = {
+  ...preact,
+  PureComponent,
+  createElement: preact.h,
+}
+
+export default React

src/components/FileExplorer.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 import SearchBar from './SearchBar'
 import Node from './Node'
 
@@ -9,18 +8,18 @@ import treeParser from '../utils/treeParser'
 import URLHelper from '../utils/URLHelper'
 import VisibleNodesGenerator from '../utils/VisibleNodesGenerator'
 
-export default class List extends preact.Component {
-  state = {
-    // generated by this.visibleNodesGenerator
-    visibleNodes: null,
-  }
-
-  props = {
+export default class List extends React.Component {
+  static defaultProps = {
     treeData: null,
     metaData: null,
     freeze: false,
   }
 
+  state = {
+    // generated by this.visibleNodesGenerator
+    visibleNodes: null,
+  }  
+
   tasksAfterRender = []
   visibleNodesGenerator = new VisibleNodesGenerator()
 

src/components/Icon.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 
 import Grabber from '../assets/icons/octicons/grabber.svg?svgr'
 import Octoface from '../assets/icons/octicons/octoface.svg?svgr'
@@ -71,7 +70,7 @@ function getSVGIconComponent(type) {
 export default function Icon({ type, className, ...otherProps }) {
   return (
     <div className={cx('octicon-wrapper', className)} {...otherProps}>
-      {preact.h(getSVGIconComponent(type), { width: '100%', height: '100%' })}
+      {React.createElement(getSVGIconComponent(type), { width: '100%', height: '100%' })}
     </div>
   )
 }

src/components/MetaBar.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 
 export default function MetaBar({ metaData }) {
   const userUrl = metaData ? metaData.api && metaData.api.owner.html_url : undefined

src/components/Node.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 import PJAX from 'pjax'
 
 import Icon from './Icon'
@@ -17,11 +16,7 @@ function getIconType(node) {
   }
 }
 
-export default class Node extends preact.Component {
-  shouldComponentUpdate(nextProps) {
-    return !general.shallowEqual(this.props, nextProps)
-  }
-
+export default class Node extends React.PureComponent {
   onNodeClick = (...args) => {
     const { node, toggleExpand } = this.props
     if (node.type === 'tree') {
@@ -36,14 +31,14 @@ export default class Node extends preact.Component {
     const { name, path } = node
     return (
       <div className={cx(`node-item-row`, { focused })} title={path}>
-        <p
+        <div
           className={cx('node-item', { expanded })}
           style={{ paddingLeft: `${10 + 20 * depth}px` }}
           onClick={this.onNodeClick}
         >
           <Icon type={getIconType(node)} />
           <span className={'node-item-name'}>{name}</span>
-        </p>
+        </div>
       </div>
     )
   }

src/components/PJAXLink.js

@@ -1,9 +1,8 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 import DOMHelper from '../utils/DOMHelper'
 
 export default function PJAXLink({ to, children }) {
-  return preact.cloneElement(children, {
+  return React.cloneElement(children, {
     onClick: () => DOMHelper.loadWithPJAX(to),
   })
 }

src/components/Portal.js

@@ -0,0 +1,3 @@
+import Portal from 'preact-portal'
+
+export default Portal

src/components/ResizeHandler.js

@@ -1,9 +1,8 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 
 import Icon from './Icon'
 
-export default class ResizeHandler extends preact.Component {
+export default class ResizeHandler extends React.Component {
   pointerDown = false
   startX = 0
   delta = 0

src/components/SearchBar.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 
 export default function SearchBar({ onSearchKeyChange }) {
   return (

src/components/SettingsBar.js

@@ -1,6 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
-
+import React from 'react'
 import Icon from './Icon'
 import storageHelper from '../utils/storageHelper'
 import keyHelper from '../utils/keyHelper'
@@ -39,7 +37,7 @@ function friendlyFormatShortcut(shortcut) {
   }
 }
 
-export default class SettingsBar extends preact.Component {
+export default class SettingsBar extends React.Component {
   state = {
     accessTokenHint: null,
     accessToken: '',

src/components/SideBar.js

@@ -1,13 +1,12 @@
-import preact from 'preact'
-import Portal from 'preact-portal'
+import React from 'react'
 import NProgress from 'nprogress'
-/** @jsx preact.h */
 
 import FileExplorer from './FileExplorer'
 import ToggleShowButton from './ToggleShowButton'
 import MetaBar from './MetaBar'
 import SettingsBar from './SettingsBar'
 import ResizeHandler from './ResizeHandler'
+import Portal from './Portal'
 
 import cx from '../utils/cx'
 import DOMHelper, { REPO_TYPE_PRIVATE } from '../utils/DOMHelper'
@@ -18,7 +17,7 @@ import keyHelper from '../utils/keyHelper'
 
 // initial width of side bar
 const baseSize = 260
-export default class SideBar extends preact.Component {
+export default class SideBar extends React.Component {
   state = {
     // current width of side bar
     size: 260,
@@ -58,8 +57,8 @@ export default class SideBar extends preact.Component {
         NProgress.start()
       }
       const treeData = await GitHubHelper.getTreeData({ ...metaData, accessToken })
-      this.setState({ treeData })
       this.logoContainerElement = DOMHelper.insertLogo()
+      this.setState({ treeData })
       if (shouldShow) {
         NProgress.done()
       }

src/components/ToggleShowButton.js

@@ -1,5 +1,4 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
 import Icon from './Icon'
 
 import cx from '../utils/cx'

src/content.js

@@ -1,5 +1,5 @@
-import preact from 'preact'
-/** @jsx preact.h */
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 import './content.less'
 
@@ -7,4 +7,4 @@ import SideBar from './components/SideBar'
 
 const SideBarElement = document.createElement('div')
 document.body.appendChild(SideBarElement)
-preact.render(<SideBar />, SideBarElement)
+ReactDOM.render(<SideBar />, SideBarElement)

src/utils/general.js

@@ -1,18 +1 @@
-function shallowEqual(a, b) {
-  if (a === b) return true
-  if (typeof a === 'object' && typeof a === typeof b) {
-    if (a === null || b === null) return false
-    for (const key in a) {
-      if (a[key] !== b[key]) return false
-    }
-    for (const key in b) {
-      if (!Object.prototype.hasOwnProperty.call(a, key)) return false
-    }
-    return true
-  }
-  return false
-}
-
-export default {
-  shallowEqual,
-}
+export default {}

webpack.config.js

@@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin')
 
 const srcPath = path.resolve(__dirname, 'src')
+const packagesPath = path.resolve(__dirname, 'packages')
 
 const plugins = [
   new CopyWebpackPlugin([
@@ -46,9 +47,6 @@ module.exports = {
     filename: '[name].js',
   },
   resolve: {
-    alias: {
-      react: 'preact', // for svgr
-    },
     modules: ['packages', 'node_modules']
   },
   module: {
@@ -59,7 +57,7 @@ module.exports = {
         options: {
           cacheDirectory: true,
         },
-        include: [srcPath],
+        include: [srcPath, packagesPath],
       },
       {
         test: /\.less$/,