bem / bem/html-differ

Proposal: Rework internal html representation and diff logic

Open
#149 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
217
Forks
45
PR merge metrics
No merged PRs in 30d

Description

I think we should use posthtml-like (bemjson-like) structure for internal representation to make diff calculation process cleaner and more flexible.

Current reports are non-informative on big projects.
Current way we comparing html documents leak on big files and don't feel quotes in attributes.

That's why we should think about core code refactoring.

## Representation proposal
```js
HtmlNode {
meta: MetaData, // Different meta data, raw string, another helpful data
tag: String,
classList: ClassesCollection, // Set of classes
attrs: Object, // Map of attributes with attrs meta info like quote types
//? dataAttrs: Object, // Map of data attributes
content: Array
}
```

## Samples proposal
```html

```

```js
{ meta: { diff: 'subset' }, tag: 'button', classList: ['button2'] }
```

## Report proposal
(Something like https://github.com/chaijs/deep-eql mixed with https://github.com/debitoor/chai-subset)
```diff
/x/path
- tag: 'button'
+ tag: 'button2'
.or .selector
+ attrs.missed: 'attr'
button.or like.or__that
+ classList[2]: 'missed-class'
```

## Futher possible features
- More accurate comparing methods where it needs (#144, #146).
- More clean diff calculation logic and testing possibilities (#139, #136, #127).
- HtmlNode can achieve additional fields to compare like `bemEntities` with a set of `BemjsonNodes` ot `BemEntityNames`.
- etc.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.