Proposal: Rework internal html representation and diff logic
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 20/100
- Issue type
- Refactor
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript
- Domain
- tooling
Research direction
No files, tests, or entry points are named. Start by locating the current HTML representation and diff-calculation code, then determine the scope of the proposed node structure and reporting changes; done would require an agreed design and corresponding implementation and tests.
Written by the indexing model from the issue text.
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
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
bemEntitieswith a set ofBemjsonNodesotBemEntityNames. - etc.
- Dominant language
- JavaScript
- Stars
- 217
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from bem/html-differ
-
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
bem/html-differ#175 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
bem/html-differ#173 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
bem/html-differ#171 · 1 comment · 3 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
bem/html-differ#170 · 2 comments · 1 reaction ·
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
bem/html-differ#169 · 1 comment ·
Similar issues
-
bug confirmed issue
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
open-webui/open-webui#30750 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Mend: dependency security vulnerability untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 70/100