Refactor diffing & track conf file renames in diff

package-lock.json

@@ -11582,6 +11582,11 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-similarity": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/string-similarity/-/string-similarity-4.0.1.tgz",
+      "integrity": "sha512-v36MJzloekKVvKAsYi6O/qpn2mIuvwEFIT9Gx3yg4spkNjXYsk7yxc37g4ZTyMVIBvt/9PZGxnqEtme8XHK+Mw=="
+    },
     "string-width": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "prismjs": "^1.20.0",
     "qs": "^6.9.4",
     "simple-js-sha2-256": "^1.0.7",
+    "string-similarity": "^4.0.1",
     "tarts": "^1.0.0",
     "vue": "^2.6.11",
     "vue-select": "^3.10.3"

src/nginxconfig/templates/app.vue

@@ -97,11 +97,10 @@ THE SOFTWARE.
 
 <script>
     import clone from 'clone';
-    import { diffLines } from 'diff';
-    import escape from 'escape-html';
     import sha2_256 from 'simple-js-sha2-256';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
+    import diff from '../util/diff';
     import isChanged from '../util/is_changed';
     import importData from '../util/import_data';
     import isObject from '../util/is_object';
@@ -218,61 +217,8 @@ THE SOFTWARE.
                 this.$nextTick(() => this.checkChange(this.confFiles));
             },
             updateDiff(newConf, oldConf) {
-                const newFiles = {};
+                // Calculate the diff & highlight after render
-
+                this.$data.confFilesOutput = diff(newConf, oldConf);
-                // Work through each file in the new config
-                for (const newFileName in newConf) {
-                    if (!Object.prototype.hasOwnProperty.call(newConf, newFileName)) continue;
-                    const newFileConf = newConf[newFileName];
-
-                    // If a file with the same name existed before, diff!
-                    // TODO: Handle diffing across file renames (eg. when a user changes a domain name)
-                    const old = oldConf && oldConf[newFileName];
-                    if (old && old !== newFileConf) {
-                        console.info(`Diffing ${newFileName}...`);
-
-                        // Get the diff
-                        const diff = diffLines(old, newFileConf);
-
-                        // Wrap additions in <mark>, drop removals
-                        const output = diff.map((change, index, array) => {
-                            if (change.removed) return '';
-
-                            const escaped = escape(change.value);
-
-                            // Don't mark as diff if nothing changed
-                            if (!change.added) return escaped;
-
-                            // Don't mark as diff if only whitespace changed
-                            if (index > 0 && array[index - 1].removed) {
-                                if (array[index - 1].value.replace(/\s/g, '') === change.value.replace(/\s/g, '')) {
-                                    return escaped;
-                                }
-                            }
-                            if (index < array.length - 1 && array[index + 1].removed) {
-                                if (array[index + 1].value.replace(/\s/g, '') === change.value.replace(/\s/g, '')) {
-                                    return escaped;
-                                }
-                            }
-
-                            // Mark the diff, without highlighting whitespace
-                            return escaped
-                                .split('\n')
-                                .map(part => part.replace(/^(\s*)(.*)(\s*)$/, '$1<mark>$2</mark>$3'))
-                                .join('\n');
-                        }).join('');
-
-                        // Store
-                        newFiles[newFileName] = output;
-                        continue;
-                    }
-
-                    // No diffing, just store the new file
-                    newFiles[newFileName] = newFileConf;
-                }
-
-                // Store
-                this.$data.confFilesOutput = newFiles;
                 this.$nextTick(() => this.$data.confWatcherWaiting = false);
             },
             sha2_256,

src/nginxconfig/util/diff/conf_lines.js

@@ -0,0 +1,61 @@
+/*
+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 { diffLines } from 'diff';
+import escape from 'escape-html';
+
+export default (newConfFile, oldConfFile) => {
+    // Get the diff
+    const diff = diffLines(oldConfFile, newConfFile);
+
+    // Wrap additions in <mark>, drop removals
+    return diff.map((change, index, array) => {
+        if (change.removed) return '';
+
+        const escaped = escape(change.value);
+
+        // Don't mark as diff if nothing changed
+        if (!change.added) return escaped;
+
+        // Don't mark as diff if only whitespace changed
+        if (index > 0 && array[index - 1].removed) {
+            if (array[index - 1].value.replace(/\s/g, '') === change.value.replace(/\s/g, '')) {
+                return escaped;
+            }
+        }
+        if (index < array.length - 1 && array[index + 1].removed) {
+            if (array[index + 1].value.replace(/\s/g, '') === change.value.replace(/\s/g, '')) {
+                return escaped;
+            }
+        }
+
+        // Mark the diff, without highlighting whitespace
+        return escaped
+            .split('\n')
+            .map(part => part.replace(/^(\s*)(.*)(\s*)$/, '$1<mark>$2</mark>$3'))
+            .join('\n');
+    }).join('');
+};

src/nginxconfig/util/diff/index.js

@@ -0,0 +1,57 @@
+/*
+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 renames from './renames';
+import confLines from './conf_lines';
+
+export default (newConf, oldConf) => {
+    // Consider renames
+    const renameMap = renames(newConf, oldConf);
+
+    // Store the diff config files
+    const newFiles = {};
+
+    // Work through each file in the new config
+    for (const newFileName in newConf) {
+        if (!Object.prototype.hasOwnProperty.call(newConf, newFileName)) continue;
+        const newFileConf = newConf[newFileName];
+
+        // If this file was in the old config (same name or renamed & similar)
+        const old = oldConf && oldConf[renameMap[newFileName]];
+        if (old && old !== newFileConf) {
+            // Store the diff
+            console.info(`Diffing ${newFileName}...`);
+            newFiles[newFileName] = confLines(newFileConf, old);
+            continue;
+        }
+
+        // No diffing, just store the new file
+        newFiles[newFileName] = newFileConf;
+    }
+
+    // Done
+    return newFiles;
+};

src/nginxconfig/util/diff/renames.js

@@ -0,0 +1,60 @@
+/*
+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 { compareTwoStrings } from 'string-similarity';
+
+export default (newConf, oldConf) => {
+    const newNames = Object.keys(newConf);
+    const oldNames = Object.keys(oldConf);
+    const removed = oldNames.filter(name => !newNames.includes(name));
+    const added = newNames.filter(name => !oldNames.includes(name));
+
+    // For each newly added file, compare it to all the old files
+    const addedSimilarity = {};
+    for (const newName of added) {
+        addedSimilarity[newName] = { old: '', similarity: 0 };
+
+        for (const oldName of removed) {
+            const similarity = compareTwoStrings(newConf[newName], oldConf[oldName]);
+
+            // Only care about > 50% similarity
+            if (similarity <= .5) continue;
+
+            // Store the most similar
+            if (similarity > addedSimilarity[newName].similarity)
+                addedSimilarity[newName] = { old: oldName, similarity };
+        }
+    }
+
+    // Create a rename map
+    return newNames.reduce((prev, current) => {
+        if (current in addedSimilarity && addedSimilarity[current].similarity)
+            prev[current] = addedSimilarity[current].old;
+        else
+            prev[current] = current;
+        return prev;
+    }, {});
+};