feat(file-diff): syntax highlighting, better background colors

Author: Guillaume Chau

packages/@vue/cli-ui/apollo-server/connectors/git.js

@@ -1,6 +1,8 @@
 const execa = require('execa')
 const path = require('path')
+const fs = require('fs-extra')
 const parseDiff = require('../util/parse-diff')
+const { highlightCode } = require('../util/highlight')
 // Connectors
 const cwd = require('./cwd')
 // Utils
@@ -34,13 +36,41 @@ async function getDiffs (context) {
     cwd: cwd.get()
   })
   await reset(context)
-  const list = parseDiff(stdout).map(
-    fileDiff => ({
+  let list = parseDiff(stdout)
+  for (const n in list) {
+    const fileDiff = list[n]
+    const isNew = newFiles.includes(fileDiff.to)
+    let fromContent
+    if (!isNew) {
+      const result = await execa('git', ['show', `HEAD:${fileDiff.from}`], {
+        cwd: cwd.get()
+      })
+      fromContent = result.stdout
+    }
+    const highlightedContentFrom = fromContent && highlightCode(fileDiff.from, fromContent).split('\n')
+    const highlightedContentTo = highlightCode(fileDiff.to, fs.readFileSync(path.resolve(cwd.get(), fileDiff.to), { encoding: 'utf8' })).split('\n')
+    for (const chunk of fileDiff.chunks) {
+      for (const change of chunk.changes) {
+        const firstChar = change.content.charAt(0)
+        let highlightedCode
+        if (change.normal) {
+          highlightedCode = highlightedContentFrom[change.ln1 - 1]
+        } else if (change.type === 'del') {
+          highlightedCode = highlightedContentFrom[change.ln - 1]
+        } else if (change.type === 'add') {
+          highlightedCode = highlightedContentTo[change.ln - 1]
+        }
+        if (highlightedCode) {
+          change.content = firstChar + highlightedCode
+        }
+      }
+    }
+    list[n] = {
       id: fileDiff.index.join(' '),
       ...fileDiff,
-      new: newFiles.includes(fileDiff.to)
-    })
-  )
+      new: isNew
+    }
+  }
 
   return list
 }

packages/@vue/cli-ui/apollo-server/util/highlight.js

@@ -0,0 +1,40 @@
+const Prism = require('prismjs')
+const loadLanguages = require('prismjs/components/')
+const path = require('path')
+
+loadLanguages()
+
+const languages = [
+  { test: /\.(html|vue|xml)$/, lang: 'markup' },
+  { test: /\.js$/, lang: 'javascript' },
+  { test: /\.sh$/, lang: 'bash' },
+  { test: /\.coffee$/, lang: 'coffeescript' },
+  { test: /\.gql$/, lang: 'graphql' },
+  { test: /\.hx$/, lang: 'haxe' },
+  { test: /\.md$/, lang: 'markdown' },
+  { test: /\.py$/, lang: 'python' },
+  { test: /\.rb$/, lang: 'ruby' },
+  { test: /\.styl$/, lang: 'stylus' },
+  { test: /\.ts$/, lang: 'typescript' },
+  { test: /\.yml$/, lang: 'yaml' }
+]
+
+exports.highlightCode = function (filename, content, lang = null) {
+  let language
+  if (lang) {
+    language = { lang }
+  }
+  if (!language) {
+    language = languages.find(l => l.test.test(filename))
+  }
+  if (!language) {
+    const ext = path.extname(filename).substr(1)
+    if (Prism.languages[ext]) {
+      language = { lang: ext }
+    }
+  }
+  // No language found
+  if (!language) return content
+  // Highlight code
+  return Prism.highlight(content, Prism.languages[language.lang], language.lang)
+}

packages/@vue/cli-ui/package-lock.json

@@ -48,6 +48,7 @@
     "node-notifier": "^5.2.1",
     "parse-git-config": "^2.0.2",
     "portfinder": "^1.0.13",
+    "prismjs": "^1.15.0",
     "semver": "^5.5.0",
     "shortid": "^2.2.11",
     "terminate": "^2.1.0",

packages/@vue/cli-ui/package.json

@@ -136,7 +136,8 @@ status-color($color)
     .name
       flex auto 1 0
       font-family $font-mono
-      font-size 12px
+      font-size 14px
+      font-weight bold
       ellipsis()
       &.from-file
         text-decoration line-through

packages/@vue/cli-ui/src/components/FileDiff.vue

@@ -19,7 +19,7 @@
         {{ ln2 }}
       </div>
     </div>
-    <div class="content">{{ change.content }}</div>
+    <div class="content" v-html="change.content"/>
   </div>
 </template>
 
@@ -114,21 +114,21 @@ export default {
     white-space pre
 
   &.type-add
-    background lighten($vue-ui-color-success, 80%)
+    background desaturate(lighten($vue-ui-color-success, 90%), 30%)
     .vue-ui-dark-mode &
-      background darken($vue-ui-color-success, 70%)
+      background desaturate(darken($vue-ui-color-success, 60%), 50%)
     .lines
-      background lighten($vue-ui-color-success, 60%)
+      background lighten($vue-ui-color-success, 80%)
       .vue-ui-dark-mode &
        background darken($vue-ui-color-success, 60%)
 
   &.type-del
-    background lighten($vue-ui-color-danger, 80%)
+    background desaturate(lighten($vue-ui-color-danger, 90%), 30%)
     .vue-ui-dark-mode &
-      background darken($vue-ui-color-danger, 70%)
+      background desaturate(darken($vue-ui-color-danger, 60%), 50%)
 
     .lines
-      background lighten($vue-ui-color-danger, 60%)
+      background lighten($vue-ui-color-danger, 80%)
       .vue-ui-dark-mode &
         background darken($vue-ui-color-danger, 60%)
 

packages/@vue/cli-ui/src/components/FileDiffChange.vue

@@ -34,10 +34,10 @@ export default {
     &::after
       content '•••'
       height 44px
-      background lighten($vue-ui-color-light-neutral, 30%)
+      background $md-grey-100
       h-box()
       box-center()
-      color darken($vue-ui-color-light-neutral, 30%)
+      color $md-grey-300
       letter-spacing 4px
       .vue-ui-dark-mode &
         background lighten($vue-ui-color-darker, 1%)

packages/@vue/cli-ui/src/components/FileDiffChunk.vue

@@ -1,4 +1,5 @@
-@import "imports"
+@import '~prismjs/themes/prism.css'
+@import 'imports'
 
 html,
 body,
@@ -159,4 +160,27 @@ ansi-colors('white', $vue-ui-color-light)
   &.anchor
     align-items flex-start
     .shell
-      margin-top 42px
+      margin-top 42px
+
+// Syntax highlighting
+.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string
+  background none !important
+
+.vue-ui-dark-mode
+  .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted
+    color lighten(#905, 40%)
+  
+  .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted
+    color lighten(#690, 40%)
+
+  .token.atrule, .token.attr-value, .token.keyword
+    color lighten(#07a, 40%)
+
+  .token.function, .token.class-name
+    color lighten(#dd4a68, 30%)
+
+  .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string
+    color lighten(#9a6e3a, 20%)
+  
+  .token.punctuation
+    color lighten(#999, 20%)