@tkeron/html-parser 0.1.5 → 1.0.0

package/tests/custom-elements.test.ts

@@ -1,94 +1,108 @@
-import { expect, test, describe } from 'bun:test';
+import { expect, it, describe } from 'bun:test';
 import { tokenize } from '../src/tokenizer';
-import { parse, ASTNodeType, type ASTNode } from '../src/parser';
+import { parse, domToAST, ASTNodeType, type ASTNode } from '../src/parser';
+
+function parseToAST(tokens: any[]): any {
+  const dom = parse(tokens);
+  const ast = domToAST(dom);
+  
+  const htmlEl = ast.children?.find((c: any) => c.tagName === 'html');
+  if (htmlEl) {
+    const bodyEl = htmlEl.children?.find((c: any) => c.tagName === 'body');
+    if (bodyEl && bodyEl.children) {
+      return { type: ASTNodeType.Document, children: bodyEl.children };
+    }
+  }
+  return ast;
+}
 
 describe('Custom Elements Support', () => {
   
   describe('Basic Custom Elements', () => {
-    test('should parse simple custom element with single hyphen', () => {
+    it('should parse simple custom element with single hyphen', () => {
       const tokens = tokenize('<my-component></my-component>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
-      expect(ast.type).toBe(ASTNodeType.DOCUMENT);
+      expect(ast.type).toBe(ASTNodeType.Document);
       expect(ast.children).toHaveLength(1);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-component');
     });
 
-    test('should parse custom element with numbers', () => {
+    it('should parse custom element with numbers', () => {
       const tokens = tokenize('<my-component-123></my-component-123>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-component-123');
     });
 
-    test('should parse short custom element', () => {
+    it('should parse short custom element', () => {
       const tokens = tokenize('<x-button></x-button>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('x-button');
     });
 
-    test('should parse custom element with multiple hyphens', () => {
+    it('should parse custom element with multiple hyphens', () => {
       const tokens = tokenize('<app-header-nav></app-header-nav>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('app-header-nav');
     });
 
-    test('should parse custom element with many hyphens', () => {
+    it('should parse custom element with many hyphens', () => {
       const tokens = tokenize('<my-custom-super-component></my-custom-super-component>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-custom-super-component');
     });
 
-    test('should parse custom element with dots', () => {
+    it('should parse custom element with dots', () => {
       const tokens = tokenize('<my-comp.v2></my-comp.v2>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-comp.v2');
     });
 
-    test('should parse custom element with underscores', () => {
+    it('should parse custom element with underscores', () => {
       const tokens = tokenize('<my-comp_beta></my-comp_beta>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-comp_beta');
     });
   });
 
   describe('Custom Elements with Attributes', () => {
-    test('should parse custom element with class attribute', () => {
+    it('should parse custom element with class attribute', () => {
       const tokens = tokenize('<my-comp class="test"></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-comp');
       expect(element.attributes).toEqual({ class: 'test' });
     });
 
-    test('should parse custom element with multiple attributes', () => {
+    it('should parse custom element with multiple attributes', () => {
       const tokens = tokenize('<my-comp class="test" id="main" data-value="123"></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-comp');
       expect(element.attributes).toEqual({
         class: 'test',
@@ -97,12 +111,12 @@ describe('Custom Elements Support', () => {
       });
     });
 
-    test('should parse custom element with custom attributes', () => {
+    it('should parse custom element with custom attributes', () => {
       const tokens = tokenize('<user-card name="John" age="30"></user-card>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('user-card');
       expect(element.attributes).toEqual({
         name: 'John',
@@ -112,34 +126,31 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Self-Closing Custom Elements', () => {
-    test('should parse self-closing custom element with space', () => {
+    it('should parse self-closing custom element with space', () => {
       const tokens = tokenize('<self-closing />');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('self-closing');
-      expect(element.isSelfClosing).toBe(true);
     });
 
-    test('should parse self-closing custom element without space', () => {
+    it('should parse self-closing custom element without space', () => {
       const tokens = tokenize('<my-comp/>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('my-comp');
-      expect(element.isSelfClosing).toBe(true);
     });
 
-    test('should parse self-closing custom element with attributes', () => {
+    it('should parse self-closing custom element with attributes', () => {
       const tokens = tokenize('<icon-button type="primary" size="lg" />');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('icon-button');
-      expect(element.isSelfClosing).toBe(true);
       expect(element.attributes).toEqual({
         type: 'primary',
         size: 'lg'
@@ -148,28 +159,28 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Nested Custom Elements', () => {
-    test('should parse nested custom elements', () => {
+    it('should parse nested custom elements', () => {
       const tokens = tokenize('<outer-comp><inner-comp>text</inner-comp></outer-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const outer = ast.children![0]!;
-      expect(outer.type).toBe(ASTNodeType.ELEMENT);
+      expect(outer.type).toBe(ASTNodeType.Element);
       expect(outer.tagName).toBe('outer-comp');
       expect(outer.children).toHaveLength(1);
 
       const inner = outer.children![0]!;
-      expect(inner.type).toBe(ASTNodeType.ELEMENT);
+      expect(inner.type).toBe(ASTNodeType.Element);
       expect(inner.tagName).toBe('inner-comp');
       expect(inner.children).toHaveLength(1);
 
       const text = inner.children![0]!;
-      expect(text.type).toBe(ASTNodeType.TEXT);
+      expect(text.type).toBe(ASTNodeType.Text);
       expect(text.content).toBe('text');
     });
 
-    test('should parse deeply nested custom elements', () => {
+    it('should parse deeply nested custom elements', () => {
       const tokens = tokenize('<level-1><level-2><level-3>content</level-3></level-2></level-1>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const level1 = ast.children![0]!;
       expect(level1.tagName).toBe('level-1');
@@ -181,9 +192,9 @@ describe('Custom Elements Support', () => {
       expect(level3.tagName).toBe('level-3');
     });
 
-    test('should parse custom elements mixed with standard elements', () => {
+    it('should parse custom elements mixed with standard elements', () => {
       const tokens = tokenize('<div><my-comp><span>text</span></my-comp></div>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const div = ast.children![0]!;
       expect(div.tagName).toBe('div');
@@ -197,57 +208,57 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Tag Name Normalization', () => {
-    test('should normalize custom element tagName to UPPERCASE', () => {
+    it('should normalize custom element tagName to UPPERCASE', () => {
       const tokens = tokenize('<my-comp></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.tagName.toUpperCase()).toBe('MY-COMP');
+      expect(element.tagName).toBe('my-comp');
     });
 
-    test('should normalize nodeName to UPPERCASE', () => {
+    it('should normalize nodeName to UPPERCASE', () => {
       const tokens = tokenize('<my-comp></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       
       if (element.nodeName) {
-        expect(element.nodeName.toUpperCase()).toBe('MY-COMP');
+        expect(element.nodeName).toBe('my-comp');
       }
     });
   });
 
   describe('Regression Tests - Standard Elements', () => {
-    test('should still parse standard div element', () => {
+    it('should still parse standard div element', () => {
       const tokens = tokenize('<div></div>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('div');
     });
 
-    test('should still parse standard header element', () => {
+    it('should still parse standard header element', () => {
       const tokens = tokenize('<header></header>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('header');
     });
 
-    test('should still parse standard section element', () => {
+    it('should still parse standard section element', () => {
       const tokens = tokenize('<section></section>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
-      expect(element.type).toBe(ASTNodeType.ELEMENT);
+      expect(element.type).toBe(ASTNodeType.Element);
       expect(element.tagName).toBe('section');
     });
 
-    test('should distinguish between header tag and header-comp custom element', () => {
+    it('should distinguish between header tag and header-comp custom element', () => {
       const tokens = tokenize('<header></header><header-comp></header-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       expect(ast.children).toHaveLength(2);
 
@@ -260,41 +271,41 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Custom Elements with Different Formats', () => {
-    test('should parse custom element: my-comp', () => {
+    it('should parse custom element: my-comp', () => {
       const tokens = tokenize('<my-comp></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
     });
 
-    test('should parse custom element: comp-v2', () => {
+    it('should parse custom element: comp-v2', () => {
       const tokens = tokenize('<comp-v2></comp-v2>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('comp-v2');
     });
 
-    test('should parse custom element: my-comp-123', () => {
+    it('should parse custom element: my-comp-123', () => {
       const tokens = tokenize('<my-comp-123></my-comp-123>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp-123');
     });
 
-    test('should parse custom element: x-foo', () => {
+    it('should parse custom element: x-foo', () => {
       const tokens = tokenize('<x-foo></x-foo>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('x-foo');
     });
 
-    test('should parse custom element with numbers: comp-123-test', () => {
+    it('should parse custom element with numbers: comp-123-test', () => {
       const tokens = tokenize('<comp-123-test></comp-123-test>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('comp-123-test');
@@ -302,17 +313,17 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Edge Cases', () => {
-    test('should parse custom element with whitespace before closing bracket', () => {
+    it('should parse custom element with whitespace before closing bracket', () => {
       const tokens = tokenize('<my-comp ></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
     });
 
-    test('should parse multiple custom elements in sequence', () => {
+    it('should parse multiple custom elements in sequence', () => {
       const tokens = tokenize('<first-comp></first-comp><second-comp></second-comp><third-comp></third-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       expect(ast.children).toHaveLength(3);
       expect(ast.children![0]!.tagName).toBe('first-comp');
@@ -320,20 +331,20 @@ describe('Custom Elements Support', () => {
       expect(ast.children![2]!.tagName).toBe('third-comp');
     });
 
-    test('should parse custom element with text content', () => {
+    it('should parse custom element with text content', () => {
       const tokens = tokenize('<user-name>John Doe</user-name>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('user-name');
       expect(element.children).toHaveLength(1);
-      expect(element.children![0]!.type).toBe(ASTNodeType.TEXT);
+      expect(element.children![0]!.type).toBe(ASTNodeType.Text);
       expect(element.children![0]!.content).toBe('John Doe');
     });
 
-    test('should parse custom element with child elements and text', () => {
+    it('should parse custom element with child elements and text', () => {
       const tokens = tokenize('<card-header><h1>Title</h1><sub-title>Subtitle</sub-title></card-header>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const cardHeader = ast.children![0]!;
       expect(cardHeader.tagName).toBe('card-header');
@@ -343,26 +354,25 @@ describe('Custom Elements Support', () => {
       expect(cardHeader.children![1]!.tagName).toBe('sub-title');
     });
 
-    test('should handle unclosed custom element gracefully', () => {
+    it('should handle unclosed custom element gracefully', () => {
       const tokens = tokenize('<my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
     });
 
-    test('should parse custom element with trailing slash in opening tag', () => {
+    it('should parse custom element with trailing slash in opening tag', () => {
       const tokens = tokenize('<my-comp/>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
-      expect(element.isSelfClosing).toBe(true);
     });
   });
 
   describe('Complex Real-World Scenarios', () => {
-    test('should parse web component with shadow DOM structure', () => {
+    it('should parse web component with shadow DOM structure', () => {
       const html = `
         <user-profile>
           <profile-header>
@@ -380,10 +390,10 @@ describe('Custom Elements Support', () => {
       `;
       
       const tokens = tokenize(html);
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       
-      const userProfile = ast.children!.find(node => node.type === ASTNodeType.ELEMENT)!;
+      const userProfile = ast.children!.find((node: any) => node.type === ASTNodeType.Element)!;
       expect(userProfile.tagName).toBe('user-profile');
       
       
@@ -391,7 +401,7 @@ describe('Custom Elements Support', () => {
       expect(userProfile.children!.length).toBeGreaterThan(0);
     });
 
-    test('should parse framework-style component tree', () => {
+    it('should parse framework-style component tree', () => {
       const html = `
         <app-root>
           <app-header>
@@ -410,16 +420,16 @@ describe('Custom Elements Support', () => {
       `;
       
       const tokens = tokenize(html);
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       
-      const appRoot = ast.children!.find(node => node.type === ASTNodeType.ELEMENT)!;
+      const appRoot = ast.children!.find((node: any) => node.type === ASTNodeType.Element)!;
       expect(appRoot.tagName).toBe('app-root');
     });
 
-    test('should parse custom elements with data attributes', () => {
+    it('should parse custom elements with data attributes', () => {
       const tokens = tokenize('<my-widget data-id="123" data-type="primary" data-config=\'{"key":"value"}\'></my-widget>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-widget');
@@ -430,7 +440,7 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Custom Element Name Validation Pattern', () => {
-    test('valid: starts with lowercase letter, contains hyphen', () => {
+    it('valid: starts with lowercase letter, contains hyphen', () => {
       const validNames = [
         'a-b',
         'my-component',
@@ -444,13 +454,13 @@ describe('Custom Elements Support', () => {
 
       validNames.forEach(name => {
         const tokens = tokenize(`<${name}></${name}>`);
-        const ast = parse(tokens);
+        const ast = parseToAST(tokens);
         const element = ast.children![0]!;
         expect(element.tagName).toBe(name);
       });
     });
 
-    test('should handle complex hyphenated names', () => {
+    it('should handle complex hyphenated names', () => {
       const complexNames = [
         'my-super-long-component-name',
         'x-1-2-3-4',
@@ -460,7 +470,7 @@ describe('Custom Elements Support', () => {
 
       complexNames.forEach(name => {
         const tokens = tokenize(`<${name}></${name}>`);
-        const ast = parse(tokens);
+        const ast = parseToAST(tokens);
         const element = ast.children![0]!;
         expect(element.tagName).toBe(name);
       });
@@ -468,7 +478,7 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Tokenizer-specific Tests', () => {
-    test('tokenizer should capture full custom element name', () => {
+    it('tokenizer should capture full custom element name', () => {
       const tokens = tokenize('<my-component-123></my-component-123>');
       
       
@@ -482,7 +492,7 @@ describe('Custom Elements Support', () => {
       expect(closeTag!.value).toBe('my-component-123');
     });
 
-    test('tokenizer should handle custom element with attributes correctly', () => {
+    it('tokenizer should handle custom element with attributes correctly', () => {
       const tokens = tokenize('<my-comp class="test" id="main"></my-comp>');
       
       const openTag = tokens.find(t => t.type === 'TAG_OPEN');
@@ -494,7 +504,7 @@ describe('Custom Elements Support', () => {
       });
     });
 
-    test('tokenizer should handle self-closing custom elements', () => {
+    it('tokenizer should handle self-closing custom elements', () => {
       const tokens = tokenize('<my-comp />');
       
       const openTag = tokens.find(t => t.type === 'TAG_OPEN');
@@ -505,19 +515,19 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Customized Built-in Elements (is attribute)', () => {
-    test('should parse button with is attribute', () => {
+    it('should parse button with is attribute', () => {
       const tokens = tokenize('<button is="plastic-button">Click Me!</button>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const button = ast.children![0]!;
-      expect(button.type).toBe(ASTNodeType.ELEMENT);
+      expect(button.type).toBe(ASTNodeType.Element);
       expect(button.tagName).toBe('button');
       expect(button.attributes).toHaveProperty('is', 'plastic-button');
     });
 
-    test('should parse input with is attribute', () => {
+    it('should parse input with is attribute', () => {
       const tokens = tokenize('<input is="custom-input" type="text" />');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const input = ast.children![0]!;
       expect(input.tagName).toBe('input');
@@ -525,9 +535,9 @@ describe('Custom Elements Support', () => {
       expect(input.attributes).toHaveProperty('type', 'text');
     });
 
-    test('should parse div with is attribute', () => {
+    it('should parse div with is attribute', () => {
       const tokens = tokenize('<div is="fancy-div"></div>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const div = ast.children![0]!;
       expect(div.tagName).toBe('div');
@@ -536,25 +546,25 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Reserved Custom Element Names', () => {
-    test('should parse annotation-xml (reserved SVG name)', () => {
+    it('should parse annotation-xml (reserved SVG name)', () => {
       const tokens = tokenize('<annotation-xml></annotation-xml>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('annotation-xml');
     });
 
-    test('should parse font-face (reserved SVG name)', () => {
+    it('should parse font-face (reserved SVG name)', () => {
       const tokens = tokenize('<font-face></font-face>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('font-face');
     });
 
-    test('should parse color-profile (reserved SVG name)', () => {
+    it('should parse color-profile (reserved SVG name)', () => {
       const tokens = tokenize('<color-profile></color-profile>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('color-profile');
@@ -562,33 +572,33 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Unicode Custom Element Names', () => {
-    test('should parse custom element with Greek letters', () => {
+    it('should parse custom element with Greek letters', () => {
       const tokens = tokenize('<math-α></math-α>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('math-α');
     });
 
-    test('should parse custom element with emoji', () => {
+    it('should parse custom element with emoji', () => {
       const tokens = tokenize('<emotion-😍></emotion-😍>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('emotion-😍');
     });
 
-    test('should parse custom element with Chinese characters', () => {
+    it('should parse custom element with Chinese characters', () => {
       const tokens = tokenize('<my-元素></my-元素>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-元素');
     });
 
-    test('should parse custom element with Arabic characters', () => {
+    it('should parse custom element with Arabic characters', () => {
       const tokens = tokenize('<my-عنصر></my-عنصر>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-عنصر');
@@ -596,32 +606,32 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Extreme Edge Cases', () => {
-    test('should parse very long custom element name', () => {
+    it('should parse very long custom element name', () => {
       const longName = 'my-super-duper-extra-long-custom-component-name-that-keeps-going-and-going';
       const tokens = tokenize(`<${longName}></${longName}>`);
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe(longName);
     });
 
-    test('should parse custom element with many consecutive hyphens', () => {
+    it('should parse custom element with many consecutive hyphens', () => {
       const tokens = tokenize('<my---component></my---component>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my---component');
     });
 
-    test('should parse custom element starting with x-', () => {
+    it('should parse custom element starting with x-', () => {
       const tokens = tokenize('<x-></x->');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('x-');
     });
 
-    test('should handle custom element with newlines in attributes', () => {
+    it('should handle custom element with newlines in attributes', () => {
       const html = `<my-comp
         class="test"
         id="main"
@@ -629,7 +639,7 @@ describe('Custom Elements Support', () => {
       ></my-comp>`;
       
       const tokens = tokenize(html);
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
@@ -637,19 +647,19 @@ describe('Custom Elements Support', () => {
       expect(element.attributes).toHaveProperty('id', 'main');
     });
 
-    test('should parse custom element mixed with comments', () => {
+    it('should parse custom element mixed with comments', () => {
       const html = '<!-- comment --><my-comp>text</my-comp><!-- another comment -->';
       const tokens = tokenize(html);
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       
-      const myComp = ast.children!.find(node => node.type === ASTNodeType.ELEMENT)!;
+      const myComp = ast.children!.find((node: any) => node.type === ASTNodeType.Element)!;
       expect(myComp.tagName).toBe('my-comp');
     });
 
-    test('should parse empty custom element', () => {
+    it('should parse empty custom element', () => {
       const tokens = tokenize('<my-comp></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
@@ -657,9 +667,9 @@ describe('Custom Elements Support', () => {
       expect(element.children!.length).toBe(0);
     });
 
-    test('should parse custom element with only whitespace content', () => {
+    it('should parse custom element with only whitespace content', () => {
       const tokens = tokenize('<my-comp>   \n\t  </my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
@@ -669,25 +679,25 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Malformed Custom Elements', () => {
-    test('should handle mismatched closing tag', () => {
+    it('should handle mismatched closing tag', () => {
       const tokens = tokenize('<my-comp></my-other>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
     });
 
-    test('should handle multiple unclosed custom elements', () => {
+    it('should handle multiple unclosed custom elements', () => {
       const tokens = tokenize('<my-comp><nested-comp><deep-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
     });
 
-    test('should handle custom element with malformed attributes', () => {
+    it('should handle custom element with malformed attributes', () => {
       const tokens = tokenize('<my-comp attr-without-value attr="value"></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-comp');
@@ -696,26 +706,26 @@ describe('Custom Elements Support', () => {
   });
 
   describe('Custom Elements in Special Contexts', () => {
-    test('should parse custom element inside table', () => {
+    it('should parse custom element inside table', () => {
       const tokens = tokenize('<table><tr><td><my-cell>content</my-cell></td></tr></table>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       
       const table = ast.children![0]!;
       expect(table.tagName).toBe('table');
     });
 
-    test('should parse custom element inside list', () => {
+    it('should parse custom element inside list', () => {
       const tokens = tokenize('<ul><li><list-item></list-item></li></ul>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const ul = ast.children![0]!;
       expect(ul.tagName).toBe('ul');
     });
 
-    test('should parse custom element inside form', () => {
+    it('should parse custom element inside form', () => {
       const tokens = tokenize('<form><form-field name="test"></form-field></form>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const form = ast.children![0]!;
       expect(form.tagName).toBe('form');
@@ -723,9 +733,9 @@ describe('Custom Elements Support', () => {
   });
 
   describe('ARIA and Accessibility', () => {
-    test('should parse custom element with ARIA attributes', () => {
+    it('should parse custom element with ARIA attributes', () => {
       const tokens = tokenize('<my-button role="button" aria-label="Click me" aria-disabled="true"></my-button>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.tagName).toBe('my-button');
@@ -734,9 +744,9 @@ describe('Custom Elements Support', () => {
       expect(element.attributes).toHaveProperty('aria-disabled', 'true');
     });
 
-    test('should parse custom element with tabindex', () => {
+    it('should parse custom element with tabindex', () => {
       const tokens = tokenize('<my-comp tabindex="0"></my-comp>');
-      const ast = parse(tokens);
+      const ast = parseToAST(tokens);
 
       const element = ast.children![0]!;
       expect(element.attributes).toHaveProperty('tabindex', '0');