bem / bem/html-differ

Proposal: Rework internal html representation and diff logic

Aperta
#149 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
enhancement
Lingua principale
JavaScript
Stelle
217
Fork
45
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Non vengono indicati file, test o punti di ingresso. Inizia individuando il codice attuale per la rappresentazione HTML e il calcolo delle differenze, quindi determina l’ambito delle modifiche proposte alla struttura dei nodi e alla generazione dei report; il lavoro sarebbe completo con un design concordato e la relativa implementazione e i test.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
tooling
Tipo di issue
Refactoring
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
20/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.