Replace parse5 with htmlparser2 for diffable formatter (#80)

* Update Deps
* move parser to helpers
* Fix SVG tests
* Fix entity encoding tests
* Stubbed component tests
* Types
* Bump
* " fix
* clipPath svg map
* Include style/script tags in formatter
* escapeAttributes
* Volta

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -13,20 +13,19 @@
   },
   "dependencies": {
     "cheerio": "^1.0.0",
-    "htmlparser2": "^10.0.0",
-    "parse5": "^7.2.1"
+    "htmlparser2": "^10.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@stylistic/eslint-plugin-js": "^2.12.1",
+    "@stylistic/eslint-plugin-js": "^2.13.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-config-tjw-base": "^3.1.0",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-jsdoc": "^50.6.1",
-    "happy-dom": "^16.2.9",
+    "happy-dom": "^16.5.3",
     "vitest": "^2.1.8"
   },
   "repository": {
@@ -52,7 +51,7 @@
   },
   "homepage": "https://github.com/tjw-lint/vue3-snapshot-serializer#readme",
   "volta": {
-    "node": "22.12.0",
-    "npm": "10.9.2"
+    "node": "23.6.0",
+    "npm": "11.0.0"
   }
 }

src/cheerioManipulation.js

@@ -2,10 +2,8 @@
  * @file Uses the Cheerio library to mutate the markup based on the global vueSnapshots settings.
  */
 
-import * as cheerio from 'cheerio';
-import * as htmlparser2 from 'htmlparser2';
-
 import {
+  cheerioize,
   stringify,
   swapQuotes
 } from './helpers.js';
@@ -71,27 +69,6 @@ const removeSerializerKeys = function ($, vueWrapper) {
   }
 };
 
-/**
- * Creates a cheerio ($) object from the html for DOM manipulation.
- *
- * @param  {string} html  The markup to use for the cheerio object
- * @return {object}       The cheerio object
- */
-const cheerioize = function (html) {
-  // https://github.com/fb55/DomHandler
-  // https://github.com/fb55/htmlparser2/wiki/Parser-options
-  const xmlOptions = {
-    decodeEntities: false,
-    lowerCaseAttributeNames: false,
-    normalizeWhitespace: false,
-    recognizeSelfClosing: false,
-    xmlMode: false
-  };
-  const dom = htmlparser2.parseDOM(html, xmlOptions);
-  const $ = cheerio.load(dom, { xml: xmlOptions });
-  return $;
-};
-
 /**
  * Appends a value attribute to input, select, and textareas
  * to show the current value of the element in the snapshot.

src/constants.js

@@ -0,0 +1,74 @@
+/**
+ * @file Constants and large object generation/storage.
+ */
+
+const SVG_FILTER_TAGS = Object.freeze([
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence'
+]);
+
+export const lowerToUppercaseSvgTagNames = {
+  clippath: 'clipPath'
+};
+for (const svgTagName of SVG_FILTER_TAGS) {
+  lowerToUppercaseSvgTagNames[svgTagName.toLowerCase()] = svgTagName;
+}
+
+export const SELF_CLOSING_SVG_ELEMENTS = Object.freeze([
+  'circle',
+  'ellipse',
+  ...SVG_FILTER_TAGS,
+  'line',
+  'path',
+  'polygon',
+  'polyline',
+  'rect',
+  'stop',
+  'use'
+]);
+
+// From https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+export const VOID_ELEMENTS = Object.freeze([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr'
+]);
+
+export const ESCAPABLE_RAW_TEXT_ELEMENTS = Object.freeze([
+  'textarea',
+  'title'
+]);