Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Proposal: Rework internal html representation and diff logic

Abierto
#149 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

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

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.

Descripción

enhancement

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

HtmlNode {
  meta: MetaData, // Different meta data, raw string, another helpful data
  tag: String,
  classList: ClassesCollection, // Set of classes
  attrs: Object<String, HtmlAttr>, // Map of attributes with attrs meta info like quote types
  //? dataAttrs: Object<String, HtmlAttr>, // Map of data attributes
  content: Array<TextNode, CommentNode, HtmlNode>
}

Samples proposal

<button class="button2" data-bem='{"button2":{}}'></button2>

{ 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)

/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.
Lenguaje dominante
JavaScript
Estrellas
217
Forks
45
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

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

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de bem/html-differ

Todos los issues de bem/html-differ

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.