bem / bem/html-differ

Proposal: Rework internal html representation and diff logic

オープン
#149 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
enhancement
主要言語
JavaScript
スター
217
フォーク
45
PR マージ指標
30日以内にマージされた PR はありません

説明

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.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

ファイル、テスト、エントリーポイントは指定されていません。まず現在のHTML表現と差分計算のコードを見つけ、次に提案されているノード構造とレポート作成の変更範囲を判断してください。完了とするには、合意された設計と、それに対応する実装およびテストが必要です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript
領域
tooling
issue の種類
リファクタリング
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
20/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。