refactor: perf & pjax

src/components/FileExplorer.js

@@ -194,7 +194,7 @@ export default class List extends preact.Component {
                 depth={depths.get(node)}
                 focused={focusedNode === node}
                 expanded={expandedNodes.has(node)}
-                toggleExpand={this.toggleNodeExpand.bind(null, node)}
+                toggleExpand={this.toggleNodeExpand}
               />
             ))}
           </div>

src/components/Node.js

@@ -1,9 +1,12 @@
 import preact from 'preact'
 /** @jsx preact.h */
+import PJAX from 'pjax'
 
 import Icon from './Icon'
 
 import cx from '../utils/cx'
+import general from '../utils/general'
+import DOMHelper from '../utils/DOMHelper'
 
 function getIconType(node) {
   switch (node.type) {
@@ -14,29 +17,34 @@ function getIconType(node) {
   }
 }
 
-export default function Node({ node, depth, expanded, focused, toggleExpand }) {
-  const { name, url, type, path } = node
-  const item = (
-    <p
-      className={cx('node-item', { expanded })}
-      style={{ paddingLeft: `${10 + 20 * depth}px` }}
-      onClick={node.type === 'tree' ? toggleExpand : undefined}
-    >
-      <Icon type={getIconType(node)} />
-      <span className={'node-item-name'}>{name}</span>
-    </p>
-  )
-  return (
-    <div className={cx(`node-item-row`, { focused })} title={path}>
-      {
-        type !== 'tree'
-          ? (
-            <a className={'pjax-link'} href={url} tabIndex={-1}>
-              { item }
-            </a>
-          )
-          : item
-      }
-    </div>
-  )
+export default class Node extends preact.Component {
+  shouldComponentUpdate(nextProps) {
+    return !general.shallowEqual(this.props, nextProps)
+  }
+
+  onNodeClick = (...args) => {
+    const { node, toggleExpand } = this.props
+    if (node.type === 'tree') {
+      toggleExpand(node, ...args)
+    } else {
+      DOMHelper.loadWithPJAX(node.url)
+    }
+  }
+
+  render() {
+    const { node, depth, expanded, focused, pjax } = this.props
+    const { name, path } = node
+    return (
+      <div className={cx(`node-item-row`, { focused })} title={path}>
+        <p
+          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>
+    )
+  }
 }

src/utils/DOMHelper.js

@@ -2,7 +2,7 @@
  * this helper helps manipulating DOM
  */
 
-import pjax from 'pjax'
+import PJAX from 'pjax'
 
 /**
  * if should show gitako, then move body right to make space for showing gitako
@@ -61,22 +61,18 @@ function scrollToNodeElement(index) {
   })
 }
 
-/**
- * add pjax listeners
- * call this when pjax redirected or page loaded
- */
-function attachPJAX(fields) {
-  // TODO: switch for fields
-  const elements = [
-    '.gitako a.pjax-link', // links in Gitako file tree & list
-    '.js-path-segment a', // links in the file navigation bar
-  ].join()
-  new pjax({
-    elements,
+const pjax = new PJAX({
+  elements: '.pjax-link',
     selectors: ['.repository-content'],
     scrollTo: false,
-    analytics: () => {},
-  })
+  analytics: false,
+  cacheBust: false,
+  forceCache: true,
+})
+
+function loadWithPJAX(URL) {
+  NProgress.start()
+  pjax.loadUrl(URL)
 }
 
 /**
@@ -308,14 +304,13 @@ function clickOnNodeElement(index = 0) {
  * a combination of few above functions
  */
 function decorateGitHubPageContent() {
-  attachPJAX('github')
   attachCopyFileBtn()
   attachCopySnippet()
 }
 
 
 export default {
-  attachPJAX,
+  loadWithPJAX,
   attachCopyFileBtn,
   attachCopySnippet,
   clickOnNodeElement,

src/utils/general.js

@@ -0,0 +1,18 @@
+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,
+}