diff --git a/lib/HtmlDiff.js b/lib/HtmlDiff.js index 0e7fde7..2ecd31e 100644 --- a/lib/HtmlDiff.js +++ b/lib/HtmlDiff.js @@ -15,8 +15,20 @@ import { defaults } from './defaults.js'; * @param {Boolean} [options.ignoreSelfClosingSlash=false] */ export class HtmlDiff extends Diff { - constructor(options) { + constructor(options, tokens) { super(options); this.options = defaults(options); + this._tokenOverride = tokens; + } + + /** + * Tokenizes the given HTML + * + * This overrides the default tokenizer from the `diff` + * @param {String} html + * @returns {Array} + */ + tokenize(html) { + return this._tokenOverride[html]; } } diff --git a/lib/index.js b/lib/index.js index 46d6b44..858d069 100644 --- a/lib/index.js +++ b/lib/index.js @@ -3,23 +3,11 @@ import modifyHtmlAccordingToOptions from './utils/modify.js'; import { defaults } from './defaults.js'; import handleMasks from './utils/mask.js'; -let htmlDifferOptions = {}; -const modifiedTokens = {}; - -async function saveModifiedTokens(html) { - const tokens = await modifyHtmlAccordingToOptions(html, htmlDifferOptions); - modifiedTokens[html] = tokens.split(/({{.+?}}(?!})|[{}\(\)\[\]#\*`=:;,.<>"'\/]|\s+)/).filter(i => i); +async function getModifiedTokens(html, options) { + const tokens = await modifyHtmlAccordingToOptions(html, options); + return tokens.split(/({{.+?}}(?!})|[{}\(\)\[\]#\*`=:;,.<>"'\/]|\s+)/).filter(i => i); } -/** - * Tokenizes the given HTML - * @param {String} html - * @returns {Array} - */ -HtmlDiff.prototype.tokenize = function(html) { - return modifiedTokens[html]; -}; - /** * @class HtmlDiffer * @constructor @@ -33,9 +21,7 @@ HtmlDiff.prototype.tokenize = function(html) { */ export class HtmlDiffer { constructor(options) { - options = defaults(options); - - htmlDifferOptions = options; + this.options = defaults(options); } /** @@ -47,11 +33,18 @@ export class HtmlDiffer { * @returns {Diff} */ async diffHtml(html1, html2) { - await saveModifiedTokens(html1); - await saveModifiedTokens(html2); + // precompute the tokenized html here, since it can't do it in `Diff.tokenize()` because + // the sax parser is async + const tokens = { + html1: await getModifiedTokens(html1, this.options), + html2: await getModifiedTokens(html2, this.options) + }; + + const htmlDiffer = new HtmlDiff(this.options, tokens); - const htmlDiffer = new HtmlDiff(htmlDifferOptions); - const diff = htmlDiffer.diff(html1, html2); + // just pass in keys for the left and right html, the original strings are no longer used + // after tokenize() + const diff = htmlDiffer.diff('html1', 'html2'); return handleMasks(diff); };