Use CSS selector query-based instead of Regular Expressions

Query and change HTML tags with CSS Selectors using the modules CSSselect, htmlparser2 and domutils. The sergey's source code uses a lot of while loops and Regular Expressions. This proposal can handle html tags by querying with CSSselect and making a DOM-based changes with domutils.

Before was:

while ((m = patterns.templates.exec(content)) !== null) {
  if (m.index === patterns.templates.lastIndex) {
    patterns.templates.lastIndex++;
  }
  const [find, name, data] = m;
  if (name !== "default") {
    slots.default = slots.default.replace(find, "");
  }
  slots[name] = formatContent(data);
}

Now can be:

const { nodes } = queryNodesByHTML({
  html: content,
  selector: patterns.template,
});
nodes.forEach((node) => {
  const find = domutils.getOuterHTML(node);
  const name = domutils.getAttributeValue(node, "name");
  const data = domutils.getInnerHTML(node);

  if (name !== "default") {
    slots.default = slots.default.replace(find, "");
  }
  slots[name] = formatContent(data);
});

Some implemented functions:

html/prepare-html

Prepare and format HTML code to be used later.

For example, parse <sergey-slot /> to <sergey-slot ...args></sergey-slot>
html/change-tag
- changeItemsByHTML
```
changeItemsByHTML({
html: "<p></p>",
selector: "p",
changeItem: (node: Node) => {
node.atttribs.class = "foo";
return domutils.getOuterHTML(node);
}
})
```
Output: <p class="foo"></p>
- changeItemsByHTMLFallback
The same implementation of changeItemsByHTML but works with tags inside tags (e.g. <a title="<some-getter />">text</a>)
- main
Applies changeItemsByHTML and changeItemsByHTMLFallback (runs once changeItem for the selected nodes).

Maybe related with #36 #24

trys / sergey

Use CSS selector query-based instead of Regular Expressions #43