Diff file names

src/nginxconfig/templates/app.vue

@@ -80,10 +80,10 @@ THE SOFTWARE.
                 <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
                     <h2>{{ i18n.templates.app.configFiles }}</h2>
                     <div ref="files" class="columns is-multiline">
-                        <NginxPrism v-for="(confContents, confName) in confFilesOutput"
+                        <NginxPrism v-for="confContents in confFilesOutput"
-                                    :key="`${confName}-${sha2_256(confContents)}`"
+                                    :key="confContents[2]"
-                                    :name="`${nginxDir}/${confName}`"
+                                    :name="confContents[0]"
-                                    :conf="confContents"
+                                    :conf="confContents[1]"
                                     :half="Object.keys(confFilesOutput).length > 1 && !splitColumn"
                         ></NginxPrism>
                     </div>
@@ -98,6 +98,7 @@ THE SOFTWARE.
 <script>
     import clone from 'clone';
     import sha2_256 from 'simple-js-sha2-256';
+    import escape from 'escape-html';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import diff from '../util/diff';
@@ -198,17 +199,14 @@ THE SOFTWARE.
             checkChange(oldConf) {
                 // If nothing has changed for a tick, we can use the config files
                 if (oldConf === this.confFiles) {
-                    // If this is the initial data load on app start, don't diff and set ourselves as ready
+                    // If this is the initial data load on app start, run the diff logic
+                    // but with previous as this so that we don't highlight any changes
                     if (!this.$data.ready) {
-                        this.$data.confFilesOutput = this.confFiles;
+                        this.$data.confFilesPrevious = this.confFiles;
-                        this.$nextTick(() => {
+                        this.$nextTick(() => { this.$data.ready = true; });
-                            this.$data.confWatcherWaiting = false;
-                            this.$data.ready = true;
-                        });
-                        return;
                     }
 
-                    // Otherwise, do the diff!
+                    // Do the diff!
                     this.updateDiff(this.confFiles, this.$data.confFilesPrevious);
                     return;
                 }
@@ -218,10 +216,16 @@ THE SOFTWARE.
             },
             updateDiff(newConf, oldConf) {
                 // Calculate the diff & highlight after render
-                this.$data.confFilesOutput = diff(newConf, oldConf);
+                this.$data.confFilesOutput = Object.values(diff(newConf, oldConf)).map(conf => {
+                    const name = `${escape(this.nginxDir)}/${conf[0]}`;
+                    return [
+                        name,
+                        conf[1],
+                        `${sha2_256(name)}-${sha2_256(conf[1])}`,
+                    ];
+                });
                 this.$nextTick(() => this.$data.confWatcherWaiting = false);
             },
-            sha2_256,
         },
     };
 </script>

src/nginxconfig/templates/prism/nginx.vue

@@ -26,7 +26,7 @@ THE SOFTWARE.
 
 <template>
     <div :class="`column ${half ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
-        <h3>{{ name }}</h3>
+        <h3 v-html="name"></h3>
         <pre><code class="language-nginx" v-html="conf"></code></pre>
     </div>
 </template>

src/nginxconfig/util/diff/index.js

@@ -24,8 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
+import escape from 'escape-html';
 import renames from './renames';
 import confLines from './conf_lines';
+import names from './names';
 
 export default (newConf, oldConf) => {
     // Consider renames
@@ -35,21 +37,30 @@ export default (newConf, oldConf) => {
     const newFiles = {};
 
     // Work through each file in the new config
-    for (const newFileName in newConf) {
+    for (const name in newConf) {
-        if (!Object.prototype.hasOwnProperty.call(newConf, newFileName)) continue;
+        if (!Object.prototype.hasOwnProperty.call(newConf, name)) continue;
-        const newFileConf = newConf[newFileName];
+
+        let newFileName = escape(name);
+        let newFileConf = escape(newConf[name]);
 
         // If this file was in the old config (same name or renamed & similar)
-        const old = oldConf && oldConf[renameMap[newFileName]];
+        // Calculate the diff of the configs
-        if (old && old !== newFileConf) {
+        const old = oldConf && oldConf[renameMap[name]];
-            // Store the diff
+        if (old && old !== newConf[name]) {
-            console.info(`Diffing ${newFileName}...`);
+            console.info(`Diffing ${name}...`);
-            newFiles[newFileName] = confLines(newFileConf, old);
+            newFileConf = confLines(newConf[name], old);
-            continue;
         }
 
-        // No diffing, just store the new file
+        // If the file was renamed we should diff that too
-        newFiles[newFileName] = newFileConf;
+        if (name in renameMap && renameMap[name] !== name) {
+            newFileName = names(name, renameMap[name]);
+        }
+
+        // Store!
+        newFiles[name] = [
+            newFileName,
+            newFileConf,
+        ];
     }
 
     // Done

src/nginxconfig/util/diff/names.js

@@ -0,0 +1,46 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import { diffChars } from 'diff';
+import escape from 'escape-html';
+
+export default (newConfName, oldConfName) => {
+    // Get the diff
+    const diff = diffChars(oldConfName, newConfName);
+
+    // Wrap additions in <mark>, drop removals
+    return diff.map(change => {
+        if (change.removed) return '';
+
+        const escaped = escape(change.value);
+
+        // Don't mark as diff if nothing changed
+        if (!change.added) return escaped;
+
+        // Mark the diff, without highlighting whitespace
+        return escaped.replace(/^(\s*)(.*)(\s*)$/, '$1<mark>$2</mark>$3');
+    }).join('');
+};