markedjs / html-differ Goto Github PK
View Code? Open in Web Editor NEWThis project forked from bem/html-differ
Сompares two HTML
Home Page: https://www.npmjs.com/package/@markedjs/html-differ
License: MIT License
This project forked from bem/html-differ
Сompares two HTML
Home Page: https://www.npmjs.com/package/@markedjs/html-differ
License: MIT License
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.
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.
make them fields of the HtmlDiffer
class.
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 ?
● 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.
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?
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 diff dependency breaks tests after v1.3.2
Not exactly sure why 😕
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.