Add detect-one-changed for hot locating

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 *.log
+/.idea/

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "body-parser": "^1.9.2",
     "chokidar": "^2.0.0",
+    "detect-one-changed": "^1.3.0",
     "express": "^4.10.2",
     "markdown-it": "^8.3.1",
     "markdown-it-emoji": "^1.4.0",

public/client.js

@@ -12,6 +12,9 @@ socket.on('content', function (data) {
   $('pre').each(function (_, block) {
     hljs.highlightBlock(block)
   })
+
+  var updated = $('.markdown-body .detected-updated').get(0)
+  updated && updated.scrollIntoView && updated.scrollIntoView({ behavior: 'smooth' })
 })
 
 socket.on('title', function (data) {

public/style.css

@@ -1,13 +1,53 @@
 .markdown-body {
-	box-sizing: border-box;
-	min-width: 200px;
-	max-width: 980px;
-	margin: 0 auto;
-	padding: 45px;
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 45px;
 }
 
 @media (max-width: 767px) {
-	.markdown-body {
-		padding: 15px;
-	}
+  .markdown-body {
+    padding: 15px;
+  }
+}
+
+@-webkit-keyframes bling {
+  0% {
+    background-color: #d9edf7;
+  }
+  to {
+    background-color: #d9edf7;
+  }
+}
+@-moz-keyframes bling {
+  0% {
+    background-color: #d9edf7;
+  }
+  to {
+    background-color: #d9edf7;
+  }
+}
+@-o-keyframes bling {
+  0% {
+    background-color: #d9edf7;
+  }
+  to {
+    background-color: #d9edf7;
+  }
+}
+@keyframes bling {
+  0% {
+    background-color: #d9edf7;
+  }
+  to {
+    background-color: #d9edf7;
+  }
+}
+.detected-updated,
+.detected-updated pre {
+  -webkit-animation: bling 2.5s 1;
+  -moz-animation: bling 2.5s 1;
+  -o-animation: bling 2.5s 1;
+  animation: bling 2.5s 1;
 }

server.js

@@ -11,16 +11,7 @@ var markdownIt = require('markdown-it')
 var markdownItTaskCheckbox = require('markdown-it-task-checkbox')
 var markdownItEmoji = require('markdown-it-emoji')
 var markdownItGitHubHeadings = require('markdown-it-github-headings')
-
-var md = markdownIt({
-  html: true,
-  linkify: true
-})
-md.use(markdownItTaskCheckbox)
-md.use(markdownItEmoji)
-md.use(markdownItGitHubHeadings, {
-  prefix: ''
-})
+var detectHtml = require('detect-one-changed').detectHtml
 
 var app = express()
 var server = http.Server(app)
@@ -37,6 +28,7 @@ function Server (opts) {
 
   var self = this
 
+  this.fileContentsCache = new Map()
   this.port = opts.port || 1337
   this.URI = 'http://localhost:' + this.port
   this.sock = {emit: function () {}}
@@ -48,15 +40,39 @@ function Server (opts) {
   this.watch = function (path) {
     var self = this
     chokidar.watch(path).on('change', function (path, stats) {
-      fs.readFile(path, 'utf8', function (err, data) {
-        if (err) throw err
-        data = data || ''
-        self.sock.emit('content', md.render(data))
-      })
+      self.emitFile(path)
     })
   }
 }
 
+Server.prototype.emitFile = function (filePath) {
+  var self = this
+  var md = markdownIt({
+    html: true,
+    linkify: true
+  })
+  md.use(markdownItTaskCheckbox)
+  md.use(markdownItEmoji)
+  md.use(markdownItGitHubHeadings, {
+    prefix: ''
+  })
+  return new Promise((resolve, reject) => {
+    fs.readFile(filePath, 'utf8', function (err, data) {
+      if (err) reject(err)
+      data = data || ''
+      var cache = self.fileContentsCache
+      var currentRendered = md.render(data)
+      var prevRendered = cache.get(filePath)
+      cache.set(filePath, currentRendered)
+      if (cache && cache.has(filePath) && prevRendered) {
+        currentRendered = detectHtml(prevRendered, currentRendered, { position: false, ast: false }).text
+      }
+      self.sock.emit('content', currentRendered)
+      resolve()
+    })
+  })
+}
+
 Server.prototype.stop = function (next) {
   request.del(this.URI, {
     headers: {
@@ -81,11 +97,7 @@ Server.prototype.start = function (filePath, next) {
   io.on('connection', function (sock) {
     self.sock = sock
     self.sock.emit('title', path.basename(filePath))
-    fs.readFile(filePath, 'utf8', function (err, data) {
-      if (err) throw err
-      data = data || ''
-      self.sock.emit('content', md.render(data))
-    })
+    self.emitFile(filePath)
   })
 
   app.use(parser.json())

test/all.js

@@ -45,9 +45,13 @@ describe('livedown', function () {
     it('live updates the rendered markdown', function (done) {
       browser.visit('http://localhost:1337', function (error) {
         if (error) throw error
+        expect(server.fileContentsCache.size).to.eql(1)
+        expect(server.fileContentsCache.has(fixturePath)).to.eql(true)
         fs.writeFile(fixturePath, '## h2', function () {
           setTimeout(function () {
             expect(browser.evaluate("$('.markdown-body h2').text()")).to.be('h2')
+            expect(browser.evaluate("$('.markdown-body .detected-updated').prop('localName')")).to.be('h2')
+            expect(server.fileContentsCache.size).to.eql(1)
             done()
           }, 500)
         })