npm - @tkeron/html-parser - Versions diffs - 0.1.0 - Mend

@tkeron/html-parser 0.1.0

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 (33) hide show

package/.github/workflows/npm_deploy.yml +24 -0
package/LICENSE +21 -0
package/README.md +120 -0
package/bun.lock +29 -0
package/index.ts +18 -0
package/package.json +25 -0
package/src/css-selector.ts +172 -0
package/src/dom-simulator.ts +592 -0
package/src/dom-types.ts +78 -0
package/src/parser.ts +355 -0
package/src/tokenizer.ts +413 -0
package/tests/advanced.test.ts +487 -0
package/tests/api-integration.test.ts +114 -0
package/tests/dom-extended.test.ts +173 -0
package/tests/dom.test.ts +482 -0
package/tests/google-dom.test.ts +118 -0
package/tests/google-homepage.txt +13 -0
package/tests/official/README.md +87 -0
package/tests/official/acid/acid-tests.test.ts +309 -0
package/tests/official/final-output/final-output.test.ts +361 -0
package/tests/official/html5lib/tokenizer-utils.ts +204 -0
package/tests/official/html5lib/tokenizer.test.ts +184 -0
package/tests/official/html5lib/tree-construction-utils.ts +208 -0
package/tests/official/html5lib/tree-construction.test.ts +250 -0
package/tests/official/validator/validator-tests.test.ts +237 -0
package/tests/official/validator-nu/validator-nu.test.ts +335 -0
package/tests/official/whatwg/whatwg-tests.test.ts +205 -0
package/tests/official/wpt/wpt-tests.test.ts +409 -0
package/tests/parser.test.ts +642 -0
package/tests/selectors.test.ts +65 -0
package/tests/test-page-0.txt +362 -0
package/tests/tokenizer.test.ts +666 -0
package/tsconfig.json +25 -0

package/tests/official/whatwg/whatwg-tests.test.ts ADDED Viewed

@@ -0,0 +1,205 @@
+import { describe, it, expect } from 'bun:test';
+import { tokenize } from '../../../src/tokenizer';
+import { parse } from '../../../src/parser';
+describe('WHATWG HTML Parser Tests', () => {
+  describe('HTML Living Standard Compliance', () => {
+    it('should handle HTML5 polyglot documents', () => {
+      const polyglotHTML = `<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Polyglot Document</title>
+</head>
+<body>
+  <p>This is a polyglot document.</p>
+</body>
+</html>`;
+      const tokens = tokenize(polyglotHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+      expect((ast as any).children?.length).toBeGreaterThan(0);
+    });
+    it('should handle HTML5 custom elements', () => {
+      const customElements = [
+        '<my-element>Content</my-element>',
+        '<custom-button onclick="handleClick()">Click me</custom-button>',
+        '<web-component data-value="test">Component</web-component>'
+      ];
+      customElements.forEach(element => {
+        const tokens = tokenize(element);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+    it('should handle HTML5 microdata', () => {
+      const microdataHTML = `
+        <div itemscope itemtype="http://schema.org/Person">
+          <span itemprop="name">John Doe</span>
+          <span itemprop="email">john@example.com</span>
+        </div>
+      `;
+      const tokens = tokenize(microdataHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle HTML5 shadow DOM elements', () => {
+      const shadowHTML = `
+        <div>
+          <template shadowrootmode="open">
+            <style>:host { display: block; }</style>
+            <slot></slot>
+          </template>
+          <p>Shadow content</p>
+        </div>
+      `;
+      const tokens = tokenize(shadowHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle HTML5 web components', () => {
+      const webComponentHTML = `
+        <custom-element>
+          <template>
+            <style>
+              :host { display: block; }
+            </style>
+            <div class="content">
+              <slot name="title"></slot>
+              <slot></slot>
+            </div>
+          </template>
+        </custom-element>
+      `;
+      const tokens = tokenize(webComponentHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+  describe('HTML5 Module Scripts', () => {
+    it('should handle ES6 module scripts', () => {
+      const moduleHTML = `
+        <script type="module">
+          import { component } from './component.js';
+          component.init();
+        </script>
+      `;
+      const tokens = tokenize(moduleHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle importmap', () => {
+      const importmapHTML = `
+        <script type="importmap">
+        {
+          "imports": {
+            "lodash": "https://cdn.skypack.dev/lodash"
+          }
+        }
+        </script>
+      `;
+      const tokens = tokenize(importmapHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+  describe('HTML5 Progressive Enhancement', () => {
+    it('should handle picture elements', () => {
+      const pictureHTML = `
+        <picture>
+          <source media="(min-width: 800px)" srcset="large.jpg">
+          <source media="(min-width: 400px)" srcset="medium.jpg">
+          <img src="small.jpg" alt="Description">
+        </picture>
+      `;
+      const tokens = tokenize(pictureHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle details/summary elements', () => {
+      const detailsHTML = `
+        <details>
+          <summary>Show/Hide Content</summary>
+          <p>This content can be toggled.</p>
+        </details>
+      `;
+      const tokens = tokenize(detailsHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle dialog elements', () => {
+      const dialogHTML = `
+        <dialog open>
+          <form method="dialog">
+            <p>This is a dialog box.</p>
+            <button>Close</button>
+          </form>
+        </dialog>
+      `;
+      const tokens = tokenize(dialogHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+  describe('HTML5 Accessibility Features', () => {
+    it('should handle ARIA attributes', () => {
+      const ariaHTML = `
+        <div role="button" aria-label="Close dialog" aria-pressed="false" tabindex="0">
+          <span aria-hidden="true">×</span>
+        </div>
+      `;
+      const tokens = tokenize(ariaHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle landmark roles', () => {
+      const landmarkHTML = `
+        <div role="main">
+          <div role="navigation">
+            <ul role="menubar">
+              <li role="menuitem">Home</li>
+              <li role="menuitem">About</li>
+            </ul>
+          </div>
+        </div>
+      `;
+      const tokens = tokenize(landmarkHTML);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+});

package/tests/official/wpt/wpt-tests.test.ts ADDED Viewed

@@ -0,0 +1,409 @@
+import { describe, it, expect } from 'bun:test';
+import { tokenize } from '../../../src/tokenizer';
+import { parse } from '../../../src/parser';
+describe('Web Platform Tests (WPT) Compliance', () => {
+  describe('HTML5 Parsing Semantics', () => {
+    it('should handle DOCTYPE variations', () => {
+      const doctypes = [
+        '<!DOCTYPE html>',
+        '<!DOCTYPE HTML>',
+        '<!doctype html>',
+        '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">',
+        '<!DOCTYPE html SYSTEM "about:legacy-compat">'
+      ];
+      doctypes.forEach(doctype => {
+        const html = `${doctype}<html><body>Test</body></html>`;
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+        expect((ast as any).children?.length).toBeGreaterThan(0);
+      });
+    });
+    it('should handle HTML5 semantic elements', () => {
+      const html5Elements = [
+        '<article>Content</article>',
+        '<section>Content</section>',
+        '<nav>Navigation</nav>',
+        '<header>Header</header>',
+        '<footer>Footer</footer>',
+        '<aside>Sidebar</aside>',
+        '<main>Main content</main>',
+        '<figure><figcaption>Caption</figcaption></figure>'
+      ];
+      html5Elements.forEach(element => {
+        const tokens = tokenize(element);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+    it('should handle void elements correctly', () => {
+      const voidElements = [
+        '<area>',
+        '<base>',
+        '<br>',
+        '<col>',
+        '<embed>',
+        '<hr>',
+        '<img>',
+        '<input>',
+        '<link>',
+        '<meta>',
+        '<param>',
+        '<source>',
+        '<track>',
+        '<wbr>'
+      ];
+      voidElements.forEach(element => {
+        const tokens = tokenize(element);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+  });
+  describe('Foreign Content (SVG/MathML)', () => {
+    it('should handle SVG elements', () => {
+      const svgHtml = `
+        <div>
+          <svg width="100" height="100">
+            <circle cx="50" cy="50" r="40" stroke="black" fill="red"/>
+            <rect x="10" y="10" width="80" height="80"/>
+            <path d="M 10 10 L 90 90"/>
+          </svg>
+        </div>
+      `;
+      const tokens = tokenize(svgHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle MathML elements', () => {
+      const mathmlHtml = `
+        <div>
+          <math>
+            <mrow>
+              <mi>x</mi>
+              <mo>=</mo>
+              <mfrac>
+                <mi>a</mi>
+                <mi>b</mi>
+              </mfrac>
+            </mrow>
+          </math>
+        </div>
+      `;
+      const tokens = tokenize(mathmlHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+  describe('Character References', () => {
+    it('should handle named character references', () => {
+      const namedRefs = [
+        '&amp;',
+        '&lt;',
+        '&gt;',
+        '&quot;',
+        '&apos;',
+        '&nbsp;',
+        '&copy;',
+        '&reg;'
+      ];
+      namedRefs.forEach(ref => {
+        const html = `<p>Test ${ref} reference</p>`;
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+    it('should handle numeric character references', () => {
+      const numericRefs = [
+        '&#65;',   // A
+        '&#x41;',  // A (hex)
+        '&#8364;', // Euro symbol
+        '&#x20AC;' // Euro symbol (hex)
+      ];
+      numericRefs.forEach(ref => {
+        const html = `<p>Test ${ref} reference</p>`;
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+    it('should handle malformed character references', () => {
+      const malformedRefs = [
+        '&unknown;',
+        '&#;',
+        '&#x;',
+        '&amp',
+        '&#999999;'
+      ];
+      malformedRefs.forEach(ref => {
+        const html = `<p>Test ${ref} reference</p>`;
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+  });
+  describe('Template Elements', () => {
+    it('should handle template elements', () => {
+      const templateHtml = `
+        <template id="my-template">
+          <div class="template-content">
+            <h2>Template Title</h2>
+            <p>Template content</p>
+          </div>
+        </template>
+      `;
+      const tokens = tokenize(templateHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle nested templates', () => {
+      const nestedTemplateHtml = `
+        <template>
+          <div>
+            <template>
+              <span>Nested template</span>
+            </template>
+          </div>
+        </template>
+      `;
+      const tokens = tokenize(nestedTemplateHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+  describe('Adoption Agency Algorithm', () => {
+    it('should handle adoption agency cases', () => {
+      const adoptionCases = [
+        '<b><i></b></i>',
+        '<p><b><div></b></div></p>',
+        '<a><p><a></a></p></a>',
+        '<b><table><td></b><i></table>',
+        '<font><p>hello<b>cruel</font>world</b>'
+      ];
+      adoptionCases.forEach(html => {
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+  });
+  describe('Table Parsing', () => {
+    it('should handle table structure', () => {
+      const tableHtml = `
+        <table>
+          <caption>Table Caption</caption>
+          <colgroup>
+            <col span="2">
+          </colgroup>
+          <thead>
+            <tr>
+              <th>Header 1</th>
+              <th>Header 2</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Cell 1</td>
+              <td>Cell 2</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td>Footer 1</td>
+              <td>Footer 2</td>
+            </tr>
+          </tfoot>
+        </table>
+      `;
+      const tokens = tokenize(tableHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle malformed tables', () => {
+      const malformedTables = [
+        '<table><div>Content outside cells</div><tr><td>Cell</td></tr></table>',
+        '<table><tr><td><table><tr><td>Nested</td></tr></table></td></tr></table>',
+        '<table><tbody><tr><td>Cell</td></tbody><tbody><tr><td>Cell</td></tr></tbody></table>'
+      ];
+      malformedTables.forEach(html => {
+        const tokens = tokenize(html);
+        const ast = parse(tokens);
+        expect(ast).toBeDefined();
+      });
+    });
+  });
+  describe('Script and Style Elements', () => {
+    it('should handle script elements', () => {
+      const scriptHtml = `
+        <script>
+          console.log('Hello World');
+          var x = 1 < 2;
+        </script>
+        <script type="text/javascript">
+          // Another script
+        </script>
+      `;
+      const tokens = tokenize(scriptHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+    it('should handle style elements', () => {
+      const styleHtml = `
+        <style>
+          body { margin: 0; }
+          .class { color: red; }
+          /* Comment in CSS */
+        </style>
+      `;
+      const tokens = tokenize(styleHtml);
+      const ast = parse(tokens);
+      expect(ast).toBeDefined();
+    });
+  });
+});
+describe('WPT Integration Tests', () => {
+  it('should handle complex real-world HTML', () => {
+    const complexHtml = `
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Complex HTML Document</title>
+        <style>
+          body { font-family: Arial, sans-serif; }
+          .container { max-width: 1200px; margin: 0 auto; }
+        </style>
+      </head>
+      <body>
+        <header>
+          <nav>
+            <ul>
+              <li><a href="#home">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+          </nav>
+        </header>
+        <main class="container">
+          <article>
+            <header>
+              <h1>Article Title</h1>
+              <time datetime="2025-07-10">July 10, 2025</time>
+            </header>
+            <section>
+              <p>This is a paragraph with <strong>strong text</strong> and <em>emphasized text</em>.</p>
+              <p>Here's some code: <code>console.log('Hello');</code></p>
+              <blockquote cite="https://example.com">
+                <p>This is a blockquote with a citation.</p>
+              </blockquote>
+              <figure>
+                <img src="image.jpg" alt="Description" loading="lazy">
+                <figcaption>Image caption</figcaption>
+              </figure>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Column 1</th>
+                    <th>Column 2</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Data 1</td>
+                    <td>Data 2</td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+            <footer>
+              <p>Article footer</p>
+            </footer>
+          </article>
+          <aside>
+            <h2>Related Articles</h2>
+            <ul>
+              <li><a href="/article1">Article 1</a></li>
+              <li><a href="/article2">Article 2</a></li>
+            </ul>
+          </aside>
+        </main>
+        <footer>
+          <p>&copy; 2025 Test Company. All rights reserved.</p>
+        </footer>
+        <script>
+          document.addEventListener('DOMContentLoaded', function() {
+            console.log('Page loaded');
+          });
+        </script>
+      </body>
+      </html>
+    `;
+    const start = performance.now();
+    const tokens = tokenize(complexHtml);
+    const ast = parse(tokens);
+    const end = performance.now();
+    expect(ast).toBeDefined();
+    expect((ast as any).children?.length).toBeGreaterThan(0);
+    expect(end - start).toBeLessThan(1000); // Should parse within 1 second
+  });
+});