npm - @tkeron/html-parser - Versions diffs - 0.1.3 → 0.1.5 - Mend

@tkeron/html-parser 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +5 -5
package/bun.lock +4 -4
package/index.ts +0 -5
package/package.json +1 -1
package/src/css-selector.ts +0 -5
package/src/dom-simulator.ts +122 -45
package/src/tokenizer.ts +0 -20
package/tests/advanced.test.ts +2 -2
package/tests/cloneNode.test.ts +587 -0
package/tests/custom-elements.test.ts +8 -8
package/tests/official/acid/acid-tests.test.ts +6 -6
package/tests/official/final-output/final-output.test.ts +15 -15
package/tests/official/html5lib/tokenizer-utils.ts +19 -31
package/tests/official/html5lib/tokenizer.test.ts +4 -4
package/tests/official/html5lib/tree-construction-utils.ts +20 -34
package/tests/official/html5lib/tree-construction.test.ts +5 -5
package/tests/official/validator/validator-tests.test.ts +11 -11
package/tests/official/wpt/wpt-tests.test.ts +5 -5
package/tests/outerHTML-replacement.test.ts +208 -0
package/tests/parser.test.ts +1 -1
package/tests/test-page-0.txt +12 -355
package/tests/api-integration.test.ts +0 -114
package/tests/dom-adoption.test.ts +0 -363
package/tests/dom-synchronization.test.ts +0 -675
package/tests/setAttribute-outerHTML.test.ts +0 -102

package/tests/outerHTML-replacement.test.ts ADDED Viewed

@@ -0,0 +1,208 @@
+import { describe, it, expect } from "bun:test";
+import { parseHTML } from "../index";
+describe("outerHTML replacement - Browser behavior", () => {
+  it("should replace element with its innerHTML when setting outerHTML = innerHTML", () => {
+    const doc = parseHTML(`
+      <html>
+        <body>
+          <div id="mi-prueba" style="border: 2px solid red; padding: 10px;">
+            <strong>Lorem ipsum!</strong> Dolor sit amet consectetur.
+          </div>
+        </body>
+      </html>
+    `);
+    const elem = doc.querySelector("#mi-prueba");
+    expect(elem).not.toBeNull();
+    const innerHTML = elem!.innerHTML;
+    expect(innerHTML).toContain("<strong>Lorem ipsum!</strong>");
+    expect(innerHTML).toContain("Dolor sit amet consectetur.");
+    const parent = elem!.parentNode;
+    expect(parent).not.toBeNull();
+    expect(parent!.childNodes).toContain(elem);
+    elem!.outerHTML = innerHTML;
+    const elemAfter = doc.querySelector("#mi-prueba");
+    expect(elemAfter).toBeNull();
+    const body = doc.querySelector("body");
+    expect(body!.innerHTML).toContain("<strong>Lorem ipsum!</strong>");
+    expect(body!.innerHTML).toContain("Dolor sit amet consectetur.");
+    expect(body!.innerHTML).not.toContain('id="mi-prueba"');
+    expect(body!.innerHTML).not.toContain('style=');
+  });
+  it("should replace element with simple text content", () => {
+    const doc = parseHTML(`
+      <div>
+        <p id="paragraph" class="styled">Simple text</p>
+      </div>
+    `);
+    const paragraph = doc.querySelector("#paragraph");
+    expect(paragraph).not.toBeNull();
+    const parent = paragraph!.parentNode;
+    const innerHTML = paragraph!.innerHTML;
+    paragraph!.outerHTML = innerHTML;
+    expect(doc.querySelector("#paragraph")).toBeNull();
+    expect(parent!.textContent).toContain("Simple text");
+  });
+  it("should replace element with multiple child nodes", () => {
+    const doc = parseHTML(`
+      <ul>
+        <li id="item-container">
+          <span>Item 1</span>
+          <span>Item 2</span>
+        </li>
+      </ul>
+    `);
+    const container = doc.querySelector("#item-container");
+    expect(container).not.toBeNull();
+    const ul = doc.querySelector("ul");
+    const innerHTML = container!.innerHTML;
+    container!.outerHTML = innerHTML;
+    expect(doc.querySelector("#item-container")).toBeNull();
+    const spans = ul!.querySelectorAll("span");
+    expect(spans.length).toBe(2);
+    expect(spans[0]?.textContent).toBe("Item 1");
+    expect(spans[1]?.textContent).toBe("Item 2");
+  });
+  it("should replace element with empty string", () => {
+    const doc = parseHTML(`
+      <div>
+        <span id="to-remove"></span>
+      </div>
+    `);
+    const span = doc.querySelector("#to-remove");
+    expect(span).not.toBeNull();
+    const parent = span!.parentNode;
+    const childCountBefore = parent!.childNodes.length;
+    span!.outerHTML = "";
+    expect(doc.querySelector("#to-remove")).toBeNull();
+    expect(parent!.childNodes.length).toBe(childCountBefore - 1);
+  });
+  it("should replace element with new HTML structure", () => {
+    const doc = parseHTML(`
+      <div>
+        <p id="old">Old content</p>
+      </div>
+    `);
+    const oldParagraph = doc.querySelector("#old");
+    expect(oldParagraph).not.toBeNull();
+    const parent = oldParagraph!.parentNode;
+    oldParagraph!.outerHTML = '<div id="new">New content</div>';
+    expect(doc.querySelector("#old")).toBeNull();
+    const newDiv = doc.querySelector("#new");
+    expect(newDiv).not.toBeNull();
+    expect(newDiv!.textContent).toBe("New content");
+    expect(newDiv!.parentNode).toBe(parent);
+  });
+  it("should maintain sibling relationships after outerHTML replacement", () => {
+    const doc = parseHTML(`
+      <div>
+        <span>First</span>
+        <p id="middle">Middle</p>
+        <span>Last</span>
+      </div>
+    `);
+    const middle = doc.querySelector("#middle");
+    const firstSpan = doc.querySelectorAll("span")[0];
+    const lastSpan = doc.querySelectorAll("span")[1];
+    middle!.outerHTML = middle!.innerHTML;
+    expect(firstSpan!.nextSibling).not.toBe(middle);
+    expect(lastSpan!.previousSibling).not.toBe(middle);
+    const parent = firstSpan!.parentNode;
+    expect(parent!.textContent).toContain("Middle");
+  });
+  it("should handle complex nested HTML replacement", () => {
+    const doc = parseHTML(`
+      <article>
+        <section id="wrapper" class="container" data-id="123">
+          <h2>Title</h2>
+          <p>Paragraph <strong>bold</strong> text</p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </section>
+      </article>
+    `);
+    const wrapper = doc.querySelector("#wrapper");
+    expect(wrapper).not.toBeNull();
+    const article = doc.querySelector("article");
+    const innerHTML = wrapper!.innerHTML;
+    wrapper!.outerHTML = innerHTML;
+    expect(doc.querySelector("#wrapper")).toBeNull();
+    expect(doc.querySelector("section")).toBeNull();
+    expect(article!.querySelector("h2")).not.toBeNull();
+    expect(article!.querySelector("h2")!.textContent).toBe("Title");
+    expect(article!.querySelector("strong")).not.toBeNull();
+    expect(article!.querySelectorAll("li").length).toBe(2);
+  });
+});

package/tests/parser.test.ts CHANGED Viewed

@@ -326,7 +326,7 @@ describe('HTML Parser', () => {
       )!;
       expect(htmlElement.type).toBe(ASTNodeType.ELEMENT);
       expect(htmlElement.tagName).toBe('html');
-      expect(htmlElement.attributes!.lang).toBe('es');
+      expect(htmlElement.attributes!.lang).toBe('en');
       const headElement = htmlElement.children!.find(
         child => child.type === ASTNodeType.ELEMENT && child.tagName === 'head'
       )!;

package/tests/test-page-0.txt CHANGED Viewed

@@ -1,362 +1,19 @@
 <!DOCTYPE html>
-<html lang="es"><head>
+<html lang="en"><head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LEMAGUILERA TECH SOLUTIONS - Servicios</title>
-<style>.container {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-}
-.container .content {
-  max-width: 1280px;
-  width: 100%;
-  z-index: 1;
-  padding: 0px 15px;
-}
-.container .bg_color {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-  z-index: 0;
-}
-</style><style>a.a {
-  text-decoration: none;
-}
-</style><style>.logo {
-  height: 62%;
-}
-a.logo {
-  height: 100%;
-}
-</style><style>.footer {
-  padding-top: 80px;
-  width: 100%;
-  background: #060303;
-  color: #eed;
-}
-.footer a {
-  text-decoration: none;
-  color: #eed;
-}
-.footer a:visited {
-  color: inherit;
-}
-.footer a {
-  grid-area: a;
-}
-.footer .copyright {
-  grid-area: c;
-  justify-self: center;
-  margin-top: 40px;
-  font-size: 12px;
-}
-.footer .content {
-  display: grid;
-  grid-template:
-    "l a1 a4"
-    "l a2 a5"
-    "l a3 a6"
-    "l a7 a8"
-    "c c c";
-  justify-content: space-between;
-}
-.footer .logo {
-  max-width: 250px;
-  height: auto;
-}
-.footer a.logo {
-  grid-area: l;
-}
-@media screen and (max-width: 800px) {
-  .footer .content {
-    display: grid;
-    grid-template:
-      "a1 a4"
-      "a2 a5"
-      "a3 a6"
-      "a7 a8"
-      "l l"
-      "c c";
-    justify-content: space-evenly;
-  }
-  .footer .logo {
-    margin-top: 20px;
-    justify-self: center;
-  }
-}
-</style><style>.top {
-  background: linear-gradient(0deg, #060303, #6c6868);
-}
-.container.top .content {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 90px;
-}
-.container.top .content a {
-  display: flex;
-  align-items: center;
-}
-@media screen and (max-width: 600px) {
-  .container.top .content {
-    height: 60px;
-  }
-}
-</style><style>
-.sectionMenu .content {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-weight: bold;
-  font-size: 20px;
-  color: #fff;
-}
-.sectionMenu {
-  background: linear-gradient(0deg, #f2be11, #87722d);
-}
-.sectionMenu a.a {
-  color: white;
-}
-</style><style></style><style>.button,
-button {
-  border: none;
-  padding: 20px 35px;
-  font-size: 30px;
-  font-weight: bold;
-  border-radius: 15px;
-  cursor: pointer;
-  color: #1c1c1c;
-  background: #f2be11;
-}
-a.button {
-  display: block;
-  width: fit-content;
-  margin: 20px;
-  text-align: center;
-}
-</style><style>.container.header .content {
-  display: grid;
-  grid-template-areas:
-    "h1 h1"
-    "im h2";
-  grid-template-columns: 1fr 720px;
-  gap: 30px;
-  margin: 50px auto;
-  color: #eed;
-}
-.service .content {
-  display: grid;
-  grid-template-areas:
-    "h3 h3"
-    "h4 h4"
-    "a p";
-  grid-template-columns: 1fr 720px;
-  gap: 30px;
-  margin: 100px auto;
-  color: #4c4c4c;
-}
-.header .content h1 {
-  grid-area: h1;
-}
-.header .content h2 {
-  grid-area: h2;
-}
-.header .content img {
-  grid-area: im;
-  width: 100%;
-}
-.service .content a {
-  display: flex;
-  grid-area: a;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0;
-}
-.service .content h3 {
-  grid-area: h3;
-  max-width: 720px;
-}
-.service .content h4 {
-  grid-area: h4;
-  max-width: 720px;
-}
-.service .content p {
-  grid-area: p;
-  max-width: 720px;
-}
-.service.service4,
-.service.service2 {
-  background: #4c4c4c;
-}
-.service.service4 .content,
-.service.service2 .content {
-  color: #eed;
-}
-.container.cta .content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin: 100px auto;
-}
-@media screen and (max-width: 1280px) {
-  .service .content {
-    grid-template-areas:
-      "h3 h3"
-      "h4 h4"
-      ". p"
-      "a a";
-    grid-template-columns: 1fr;
-    gap: 30px;
-  }
-  .service .content a {
-    justify-content: center;
-    align-items: center;
-    margin-left: 0;
-    justify-self: end;
-    margin-right: 0;
-  }
-  .container.header .content {
-    display: grid;
-    grid-template-areas:
-      "h1 h1"
-      "im h2";
-    grid-template-columns: 1fr 2fr;
-    gap: 30px;
-    margin: 50px auto;
-    color: #eed;
-  }
-}
-@media screen and (max-width: 700px) {
-  .container.header .content {
-    grid-template-areas:
-      "h1"
-      "h2";
-    grid-template-columns: 1fr;
-  }
-}
-</style><style>* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
-  font-family: inherit;
-}
-body,
-button {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  line-height: 1.6;
-}
-h1 {
-  font-size: 60px;
-}
-h2 {
-  font-size: 42px;
-}
-h3 {
-  font-size: 32px;
-}
-h4 {
-  font-size: 20px;
-}
-p {
-  font-size: 18px;
-}
-@media screen and (max-width: 1200px) {
-  h1 {
-    font-size: 42px;
-  }
-  h2 {
-    font-size: 32px;
-  }
-  h3 {
-    font-size: 20px;
-  }
-  h4 {
-    font-size: 18px;
-  }
-  p {
-    font-size: 16px;
-  }
-}
-@media screen and (max-width: 800px) {
-  h1 {
-    font-size: 32px;
-  }
-  h2 {
-    font-size: 20px;
-  }
-  h3 {
-    font-size: 18px;
-  }
-  h4{
-    font-size: 16px;
-  }
-  p {
-    font-size: 14px;
-  }
-}
-</style><script id='tkeron_page_js'>(()=>{})();
-</script></head>
+    <title>Lorem Ipsum Services</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: Arial, sans-serif; line-height: 1.6; }
+        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+        .header { background: #333; color: #fff; text-align: center; padding: 60px 20px; }
+        .service { margin: 40px 0; padding: 20px; border: 1px solid #ddd; }
+        .footer { background: #f4f4f4; padding: 20px; text-align: center; margin-top: 40px; }
+    </style>
+</head>
 <body>
-<div class="container top"><div class="content"><a class="a logo" href="/"><img class="logo" src="/./LTS_LOGO-D7NU7N7F.png"></a></div></div><div class="container sectionMenu"><div class="content"><a class="a" href="/">INICIO</a><a class="a" href="/servicios">SERVICIOS</a><a class="a" href="/contacto">CONTACTO</a></div></div><div class="container header" style="background-image: url(&quot;/./bg-ES2RJEGU.png&quot;);"><div class="bg_color" style="background: rgba(0, 0, 0, 0.4);"></div><div class="content"><h1>Nuestros Servicios</h1><h2>Soluciones a medida para optimizar y automatizar tus procesos empresariales con Google Workspace.</h2></div></div><div class="container service service1"><div class="content"><h3>Apps Personalizadas para Google Workspace</h3><h4>Creamos aplicaciones a medida que se integran perfectamente con Google Docs, Sheets, Gmail y más.</h4><p>Diseñamos e implementamos aplicaciones personalizadas que amplían la funcionalidad de Google Workspace según las necesidades únicas de tu negocio.</p><a class="a button" href="/contacto/apps-personalizadas-para-google-workspace">Solicita una app a medida</a></div></div><div class="container service service2"><div class="content"><h3>Automatización de Procesos</h3><h4>Automatizamos tareas repetitivas y flujos de trabajo con Google Apps Script.</h4><p>Ahorra tiempo y reduce errores humanos automatizando flujos de trabajo con potentes soluciones basadas en Google Apps Script.</p><a class="a button" href="/contacto/automatizacion-de-procesos">Automatiza tus procesos</a></div></div><div class="container service service3"><div class="content"><h3>Widgets y Extensiones Personalizadas</h3><h4>Desarrollamos barras laterales, cuadros de diálogo y herramientas personalizadas para Docs, Sheets y Gmail.</h4><p>Creamos interfaces y herramientas dentro de Google Workspace que mejoran la productividad y experiencia de tu equipo.</p><a class="a button" href="/contacto/widgets-y-extensiones-personalizadas">Agrega un widget personalizado</a></div></div><div class="container service service4"><div class="content"><h3>Integraciones con APIs de Google Workspace</h3><h4>Conectamos tus sistemas internos con los servicios de Google para un flujo de datos sin interrupciones.</h4><p>Desarrollamos conexiones seguras entre tus sistemas y Google Workspace para unificar operaciones y datos.</p><a class="a button" href="/contacto/integraciones-con-apis-de-google-workspace">Integra con APIs</a></div></div><div class="container service service5"><div class="content"><h3>Otras Necesidades Personalizadas</h3><h4>Abiertos a conversar sobre requerimientos específicos no listados anteriormente.</h4><p>Nos adaptamos a las necesidades de tu negocio. Si tienes un desafío o una idea particular relacionada con Google Workspace, estamos listos para ayudarte a diseñar y construir la solución adecuada.</p><a class="a button" href="/contacto/otras-necesidades-personalizadas">Propón tu idea</a></div></div><div class="container footer"><div class="content"><a class="a logo" href="/"><img class="logo" src="/./LTS_LOGO-D7NU7N7F.png"></a><div class="copyright">© 2025 LEMAGUILERA TECH SOLUTIONS. Todos los derechos reservados.</div><a class="a" href="/" style="grid-area: a1;">Inicio</a><a class="a" href="/servicios" style="grid-area: a2;">Servicios</a><a class="a" href="/contacto" style="grid-area: a3;">Contacto</a><a class="a" href="/politica-de-privacidad" style="grid-area: a4;">Política de privacidad</a><a class="a" href="/politica-de-contratacion" style="grid-area: a5;">Política de contratación</a><a class="a" href="/politica-de-cookies" style="grid-area: a6;">Política de cookies</a></div></div><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"955eb8668eaacdc9","version":"2025.6.2","r":1,"token":"09161630e3ae4c94992e51777c351c88","serverTiming":{"name":{"cfExtPri":true,"cfEdge":true,"cfOrigin":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}}}' crossorigin="anonymous"></script>
-</body></html>
+<div class="container top"><div class="content"><a class="a logo" href="/"><img class="logo" src="/./logo.png"></a></div></div><div class="container sectionMenu"><div class="content"><a class="a" href="/">HOME</a><a class="a" href="/services">SERVICES</a><a class="a" href="/contact">CONTACT</a></div></div><div class="container header" style="background-image: url(&quot;/./bg.png&quot;);"><div class="bg_color" style="background: rgba(0, 0, 0, 0.4);"></div><div class="content"><h1>Our Services</h1><h2>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</h2></div></div><div class="container service service1"><div class="content"><h3>Custom Lorem Applications</h3><h4>Lorem ipsum dolor sit amet consectetur adipiscing elit.</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><a class="a button" href="/contact/custom-apps">Request custom app</a></div></div><div class="container service service2"><div class="content"><h3>Process Automation</h3><h4>Ut enim ad minim veniam quis nostrud exercitation ullamco.</h4><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><a class="a button" href="/contact/automation">Automate processes</a></div></div><div class="container service service3"><div class="content"><h3>Custom Widgets</h3><h4>Excepteur sint occaecat cupidatat non proident sunt in culpa.</h4><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p><a class="a button" href="/contact/widgets">Add custom widget</a></div></div><div class="container service service4"><div class="content"><h3>API Integrations</h3><h4>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut.</h4><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p><a class="a button" href="/contact/api">Integrate APIs</a></div></div><div class="container service service5"><div class="content"><h3>Other Custom Needs</h3><h4>Quis autem vel eum iure reprehenderit qui in ea voluptate.</h4><p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p><a class="a button" href="/contact/other">Propose your idea</a></div></div><div class="container footer"><div class="content"><a class="a logo" href="/"><img class="logo" src="/./logo.png"></a><div class="copyright">© 2025 LOREM IPSUM TECH. All rights reserved.</div><a class="a" href="/" style="grid-area: a1;">Home</a><a class="a" href="/services" style="grid-area: a2;">Services</a><a class="a" href="/contact" style="grid-area: a3;">Contact</a><a class="a" href="/privacy-policy" style="grid-area: a4;">Privacy Policy</a><a class="a" href="/terms" style="grid-area: a5;">Terms</a><a class="a" href="/cookies" style="grid-area: a6;">Cookies Policy</a></div></div><script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"955eb8668eaacdc9","version":"2025.6.2","r":1,"token":"09161630e3ae4c94992e51777c351c88","serverTiming":{"name":{"cfExtPri":true,"cfEdge":true,"cfOrigin":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}}}' crossorigin="anonymous"></script>