Merge branch 'develop'

package.json

@@ -1,20 +1,21 @@
 {
   "name": "gitako",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "description": "The missing part of GitHub.",
   "repository": "https://github.com/EnixCoda/Gitako",
   "author": "EnixCoda",
   "license": "MIT",
   "private": true,
   "scripts": {
-    "postinstall": "node scripts/generate-octicon.js",
     "start": "webpack --watch",
     "postversion": "node scripts/version.js && npm run roll",
     "build": "NODE_ENV=production webpack",
+    "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
     "roll": "./scripts/roll.sh"
   },
   "dependencies": {
     "@primer/octicons": "^9.1.1",
+    "@primer/octicons-react": "^9.2.0",
     "@sentry/browser": "^5.5.0",
     "@types/react-window": "^1.8.1",
     "ini": "^1.3.5",
@@ -34,7 +35,6 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
     "@sentry/cli": "^1.47.1",
-    "@svgr/webpack": "^4.1.0",
     "@types/chrome": "^0.0.87",
     "@types/ini": "^1.3.30",
     "@types/js-base64": "^2.3.1",
@@ -57,6 +57,7 @@
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.6",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.1.2"
   },
   "prettier": {

src/components/Icon.tsx

@@ -1,21 +1,20 @@
+import Octicon, {
+  ChevronDown,
+  File,
+  FileCode,
+  FileMedia,
+  FilePdf,
+  FileSubmodule as Submodule,
+  FileZip,
+  Gear,
+  Grabber,
+  Markdown,
+  Octoface,
+  Reply,
+  TriangleRight,
+  X,
+} from '@primer/octicons-react'
 import * as React from 'react'
-import Submodule from 'assets/icons/octicons/file-submodule.svg?svgr'
-import Grabber from 'assets/icons/octicons/grabber.svg?svgr'
-import Octoface from 'assets/icons/octicons/octoface.svg?svgr'
-import ChevronDown from 'assets/icons/octicons/chevron-down.svg?svgr'
-import TriangleRight from 'assets/icons/octicons/triangle-right.svg?svgr'
-import FilePdf from 'assets/icons/octicons/file-pdf.svg?svgr'
-import File from 'assets/icons/octicons/file.svg?svgr'
-import FileZip from 'assets/icons/octicons/file-zip.svg?svgr'
-import Markdown from 'assets/icons/octicons/markdown.svg?svgr'
-import FileMedia from 'assets/icons/octicons/file-media.svg?svgr'
-import FileCode from 'assets/icons/octicons/file-code.svg?svgr'
-import Reply from 'assets/icons/octicons/reply.svg?svgr'
-// import FileBinary from 'assets/icons/octicons/file-binary.svg?svgr'
-// import FileSymlinkDirectory from 'assets/icons/octicons/file-symlink-directory.svg?svgr'
-// import FileSymlinkFile from 'assets/icons/octicons/file-symlink-file.svg?svgr'
-import X from 'assets/icons/octicons/x.svg?svgr'
-import Gear from 'assets/icons/octicons/gear.svg?svgr'
 import cx from 'utils/cx'
 
 function getSVGIconComponent(type: string) {
@@ -70,8 +69,6 @@ function getSVGIconComponent(type: string) {
   }
 }
 
-const iconStyle = { width: '100%', height: '100%' }
-
 type Props = {
   type: string
   className?: string
@@ -79,9 +76,13 @@ type Props = {
 }
 
 const Icon: React.SFC<Props> = function Icon({ type, className = undefined, ...otherProps }) {
+  const icon = getSVGIconComponent(type)
   return (
     <div className={cx('octicon-wrapper', className)} {...otherProps}>
-      {React.createElement(getSVGIconComponent(type), iconStyle)}
+      {React.createElement(Octicon, {
+        icon,
+        className: cx('octicon', icon.name),
+      })}
     </div>
   )
 }

src/components/LoadingIndicator.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import Icon from 'components/Icon'
+import * as React from 'react'
 
 type Props = {
   text: React.ReactNode

src/components/ResizeHandler.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import Icon from 'components/Icon'
+import * as React from 'react'
 import { Size } from './Resizable'
 
 type Props = {

src/content.less

@@ -92,8 +92,9 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  min-width: 30px;
+  width: 30px;
   height: 30px;
+  padding: 4px;
   will-change: transform;
   border: 1px solid transparent;
 
@@ -140,10 +141,14 @@
 
   .action-icon {
     color: #666666;
-    width: 16px;
-    height: 20px;
-    margin: 5px 6px;
+    width: 100%;
+    height: 100%;
+    text-align: center;
     transition: all @animation-duration ease;
+    .octicon {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   &:hover {
@@ -189,15 +194,17 @@
     width: 0;
     background: #e1e4e8;
     border-left: 1px solid #e1e4e8;
+    overflow: hidden;
     &:hover {
       width: 16px;
       background: #fafbfc;
       border-right: 1px solid #e1e4e8;
     }
 
-    .grabber-icon {
+    .octicon {
       transform: rotate(90deg);
-      width: 12px;
+      width: 14px;
+      height: 22px;
       font-size: 0;
     }
   }
@@ -216,9 +223,10 @@
     }
 
     .octicon {
-      transition: 0.3s ease;
+      transition: transform 0.3s ease;
       color: rgba(3, 47, 98, 0.55);
-      vertical-align: initial;
+      width: 100%;
+      height: 100%;
     }
 
     .octicon-wrapper {
@@ -226,7 +234,6 @@
       width: 16px;
       height: 16px;
       text-align: center;
-      vertical-align: middle;
     }
 
     .octicon-color {
@@ -275,12 +282,12 @@
         .loading-indicator {
           display: flex;
           align-items: center;
-        }
 
-        .loading-indicator-icon {
-          width: 20px;
-          height: 20px;
-          animation: rotate 2s infinite linear;
+          .octicon {
+            width: 20px;
+            height: 20px;
+            animation: rotate 2s infinite linear;
+          }
         }
       }
 
@@ -352,7 +359,7 @@
             white-space: nowrap;
 
             // folder icon rotate when expand
-            &.expanded .octicon.octicon-triangle-right {
+            &.expanded .octicon.TriangleRight {
               transform: rotate(90deg);
             }
 
@@ -362,7 +369,6 @@
 
               .node-item-name {
                 padding-left: 6px;
-                vertical-align: middle;
               }
             }
             .node-item:hover .node-item-name {
@@ -391,6 +397,7 @@
       background: #fafbfc;
       display: flex;
       flex-direction: column;
+      max-height: 100%;
       &-title {
         border-top: 1px solid #eaecef;
         padding: 6px 10px;

src/global.d.ts

@@ -1,6 +0,0 @@
-interface SvgrComponent extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
-
-declare module '*.svg?svgr' {
-  const component: SvgrComponent
-  export default component
-}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Gitako - Github file tree",
-  "version": "0.5.13",
+  "version": "0.5.14",
   "description": "The missing part of GitHub.",
   "author": "EnixCoda",
   "icons": {

webpack.config.js

@@ -3,6 +3,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const path = require('path')
 const Dotenv = require('dotenv-webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 const srcPath = path.resolve(__dirname, 'src')
 const packagesPath = path.resolve(__dirname, 'packages')
@@ -22,6 +23,12 @@ const plugins = [
   new Dotenv(),
 ]
 
+const analyse = process.env.ANALYSE !== undefined
+if (analyse) {
+  plugins.push(new BundleAnalyzerPlugin())
+  console.log(`BundleAnalyzerPlugin added`)
+}
+
 const IN_PRODUCTION_MODE = process.env.NODE_ENV === 'production'
 if (IN_PRODUCTION_MODE) {
   plugins.push(
@@ -68,17 +75,6 @@ module.exports = {
         loader: ['url-loader'],
         include: [srcPath],
       },
-      {
-        test: /\.svg$/,
-        resourceQuery: /svgr/,
-        use: [
-          {
-            loader: '@svgr/webpack',
-            options: { svgo: false },
-          },
-        ],
-        include: [srcPath],
-      },
       {
         test: /\.json$/,
         loader: ['json-loader'],