bem / bem/html-differ

Proposal: Rework internal html representation and diff logic

Abierto
#149 0 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement
Lenguaje dominante
JavaScript
Estrellas
217
Forks
45
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Línea de trabajo

No se nombran archivos, pruebas ni puntos de entrada. Empieza localizando el código actual de representación HTML y de cálculo de diferencias, y después determina el alcance de los cambios propuestos en la estructura de nodos y en la generación de informes; el trabajo estaría terminado con un diseño acordado y la implementación y las pruebas correspondientes.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript
Área
tooling
Tipo de issue
Refactorización
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
20/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.