markedjs / html-differ Goto Github PK

The link to bem.info is confusing 😄

Hi, I wanted to discuss the following sort() call: https://github.com/markedjs/html-differ/blob/master/lib/utils/utils.js#L24-L32

When an element has two attributes with the same name (not case-sensitive), the behavior is actually well-defined: the first attribute is used.

Consider the next example: https://codepen.io/mvasilkov/pen/abvWeqp

<button style="visibility: hidden" style="display: block">
  Can't see me
</button>

If we change the order of the attrs we introduce a bug, yet html-differ will report identical HTML.

With the Array#sort function being a stable sort now (since ES2019 / Chrome 70 / Node 11 / v8 7.0), the only thing needs to be done to address this, if you choose to do so, is to drop the a.value <> b.value comparisons and return zero if names match.

What do you think?

Hello, thank you for this library

>>> from html_diff import diff
>>> diff("<p>n</p><p>n</p>","<p>n</p><p>n</p>")
'<p></p><p>n</p>'

I was expecting <p>n</p><p>n</p> is that the expected behavior ?

We should get this on travis-ci

I'm using Angular 11, after install dependency try to create file to care about compare html
`import { Injectable } from '@angular/core';
import { HtmlDiffer, Options } from '@markedjs/html-differ';

@Injectable({
providedIn: 'root'
})
export class HtmlDifferService {

options: Options = {
// preset: 'bem',
"ignoreAttributes": ["id", "for", "aria-labelledby", "aria-describedby"],
"compareAttributesAsJSON": [
"data-bem",
{ "name": "onclick", "isFunction": true },
{ "name": "ondblclick", "isFunction": true }
]
};
htmlDiffer: HtmlDiffer;

constructor() {
this.htmlDiffer = new HtmlDiffer('bem');
}

compareDesc(_old: string, _new: string, isReview: boolean = false): { text: string, hasNew: boolean } {
const diff = this.htmlDiffer.diffHtml(_old, _new);
return { text: _new, hasNew: true };
}
}
`

but got error when angular compile :

`Error: ./node_modules/parse5-sax-parser/lib/index.js
Module not found: Error: Can't resolve 'stream' in '/xxx/node_modules/parse5-sax-parser/lib'

Error: ./node_modules/parse5-sax-parser/lib/dev-null-stream.js
Module not found: Error: Can't resolve 'stream' in '/xxx/node_modules/parse5-sax-parser/lib'

Error: ./node_modules/@markedjs/html-differ/lib/defaults.js 2:36
Module parse failed: Unexpected token (2:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { createRequire } from 'module';

const require = createRequire(import.meta.url);
|
| export const presets = {`

the module global

const modifiedTokens = {};

is updated with:

  modifiedTokens[html] = tokens.split(/({{.+?}}(?!})|[{}\(\)\[\]#\*`=:;,.<>"'\/]|\s+)/).filter(i => i);

for each diff. after using it about 20k times, my nodejs process goes out of memory.

suggestion

make them fields of the HtmlDiffer class.

The diff dependency breaks tests after v1.3.2

Not exactly sure why 😕

parse5's parser is now an async stream so updating to the latest version isn't so easy. html-differ will have to become async as well.

  ● Test suite failed to run

    TypeError: _require is not a function

    >  1 | import { HtmlDiffer } from '@markedjs/html-differ';
         | ^

      at Object._require (node_modules/@markedjs/html-differ/lib/defaults.js:2:30)
      at Object.require (node_modules/@markedjs/html-differ/lib/HtmlDiff.js:2:1)
      at Object.require (node_modules/@markedjs/html-differ/lib/index.js:1:1)

package.json

...
"@markedjs/html-differ": "4.0.2",
"@babel/core": "7.19.3",
"@babel/preset-env": "7.19.3",
@babel/plugin-transform-runtime: "7.21.4",
"babel-plugin-transform-import-meta": "2.2.0",
"jest": "28.1.1",
...

jest.config.ts

const esModules = ['@markedjs/html-differ'].join('|');

const config = {
  ...
  transform: {
    [`(${esModules}).+\\.js$`]: require.resolve('babel-jest'),
   ...
  },
  transformIgnorePatterns: [
    `/node_modules/(?!${esModules})`,
   ...
  ],
  ...
}

babel.config.js

module.exports = {
  env: {
    test: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-runtime', 'babel-plugin-transform-import-meta'],
    },
  },
};

The issue can be resolved by downgrading to "@markedjs/html-differ": "3.0.4", without using the abovementioned configurations.