Use CSS selector query-based instead of Regular Expressions

[guesant]

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

[vercel]

Deployment has failed due to an internal error. (code: jDTv0ZV)

Contact our support with [email protected] for more information.