@dooboostore/dom-parser 1.0.1 → 1.0.2

package/src/node/DocumentBase.ts

@@ -1,6 +1,7 @@
 import {ParentNodeBase} from './ParentNodeBase';
 import {DOCUMENT_NODE, Node} from './Node';
 import {Document, ElementCreationOptions, DocumentReadyState, DocumentVisibilityState, ImportNodeOptions, CaretPositionFromPointOptions, StartViewTransitionOptions, ViewTransitionUpdateCallback} from './Document';
+import {Location} from '../window/Window';
 import {Comment} from './Comment';
 import {Text} from './Text';
 import {DocumentFragment} from './DocumentFragment';
@@ -65,7 +66,7 @@ export class DocumentBase extends ParentNodeBase implements Document {
     readonly links: HTMLCollectionOf<any> = new HTMLCollectionOf([]);
     
     // Location property - simple implementation for Document
-    private _location: any = {
+    private _location: Location = {
         href: 'about:blank',
         protocol: 'about:',
         host: '',
@@ -78,9 +79,13 @@ export class DocumentBase extends ParentNodeBase implements Document {
         assign: (url: string) => { this._location.href = url; },
         replace: (url: string) => { this._location.href = url; },
         reload: () => {},
+        // @ts-ignore
         toString: () => this._location.href
     };
-    
+
+    setLocation(location: Location): void {
+      this._location = location;
+    }
     get location(): any {
         return this._location;
     }

package/src/node/elements/Element.ts

@@ -1,11 +1,11 @@
 import { Node } from '../Node';
 import { ChildNode } from '../ChildNode';
 import { ParentNode } from '../ParentNode';
-import {HTMLCollectionOf} from '../collection/HTMLCollectionOf';
-import {HTMLElement} from './HTMLElement';
-import {SVGElement} from './SVGElement';
-import {MathMLElement} from './MathMLElement';
-import {HTMLElementTagNameMap, SVGElementTagNameMap, MathMLElementTagNameMap} from '../index';
+import { HTMLCollectionOf } from '../collection/HTMLCollectionOf';
+import { HTMLElement } from './HTMLElement';
+import { SVGElement } from './SVGElement';
+import { MathMLElement } from './MathMLElement';
+import { HTMLElementTagNameMap, SVGElementTagNameMap, MathMLElementTagNameMap } from '../index';
 // Forward declarations for types that will be implemented later
 export interface NamedNodeMap {
     readonly length: number;
@@ -38,6 +38,7 @@ export interface DOMRect {
     readonly width: number;
     readonly x: number;
     readonly y: number;
+    toJSON(): any;
 }
 
 export interface DOMRectList {
@@ -235,24 +236,24 @@ export interface Event {
     stopImmediatePropagation(): void;
 }
 
-export interface UIEvent extends Event {}
-export interface MouseEvent extends UIEvent {}
-export interface KeyboardEvent extends UIEvent {}
-export interface FocusEvent extends UIEvent {}
-export interface InputEvent extends UIEvent {}
-export interface WheelEvent extends MouseEvent {}
-export interface PointerEvent extends MouseEvent {}
-export interface TouchEvent extends UIEvent {}
-export interface DragEvent extends MouseEvent {}
-export interface ClipboardEvent extends Event {}
-export interface AnimationEvent extends Event {}
-export interface TransitionEvent extends Event {}
-export interface CompositionEvent extends UIEvent {}
-export interface FormDataEvent extends Event {}
-export interface ProgressEvent extends Event {}
-export interface SecurityPolicyViolationEvent extends Event {}
-export interface SubmitEvent extends Event {}
-export interface ErrorEvent extends Event {}
+export interface UIEvent extends Event { }
+export interface MouseEvent extends UIEvent { }
+export interface KeyboardEvent extends UIEvent { }
+export interface FocusEvent extends UIEvent { }
+export interface InputEvent extends UIEvent { }
+export interface WheelEvent extends MouseEvent { }
+export interface PointerEvent extends MouseEvent { }
+export interface TouchEvent extends UIEvent { }
+export interface DragEvent extends MouseEvent { }
+export interface ClipboardEvent extends Event { }
+export interface AnimationEvent extends Event { }
+export interface TransitionEvent extends Event { }
+export interface CompositionEvent extends UIEvent { }
+export interface FormDataEvent extends Event { }
+export interface ProgressEvent extends Event { }
+export interface SecurityPolicyViolationEvent extends Event { }
+export interface SubmitEvent extends Event { }
+export interface ErrorEvent extends Event { }
 
 export interface EventTarget {
     addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;

package/src/node/elements/ElementBase.ts

@@ -3,7 +3,7 @@ import { ChildNodeBase } from '../ChildNodeBase';
 import { HTMLCollection } from "../collection";
 import { Text } from "../Text";
 import { ElementFactory } from "../../factory/ElementFactory";
-import { Element, DOMTokenList, Attr, NamedNodeMap } from './Element';
+import { Element, DOMTokenList, Attr, NamedNodeMap, DOMRect } from './Element';
 import { ELEMENT_NODE, TEXT_NODE, ATTRIBUTE_NODE } from '../Node';
 import { CSSSelector } from '../../utils/CSSSelector';
 import { HTMLElementTagNameMap } from "./index";
@@ -121,10 +121,9 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
      */
     private generateChildElementHTML(element: any): string {
         const tagName = element.tagName.toLowerCase();
-        
         // Get attributes
         const attrs = Array.from(element._attributes?.entries() || [])
-            .map(([name, value]: [string, string]) => value === '' ? ` ${name}` : ` ${name}="${value.replace(/"/g, '"')}"`)
+            .map(([name, value]: [string, string]) => value === '' ? ` ${name}` : ` ${name}="${String(value).replace(/"/g, '"')}"`)
             .join('');
 
         // Check if it's a self-closing tag
@@ -154,13 +153,13 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
      */
     private parseAndAppendHTML(html: string): void {
         const ElementFactory = require('../../factory/ElementFactory').ElementFactory;
-        
+
         let i = 0;
         const length = html.length;
-        
+
         while (i < length) {
             const nextTagStart = html.indexOf('<', i);
-            
+
             // Handle text content before next tag
             if (nextTagStart === -1) {
                 // No more tags, rest is text
@@ -184,15 +183,15 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                     this.appendChild(textNode);
                 }
             }
-            
+
             i = nextTagStart;
-            
+
             // Parse the tag - find the real tag end, considering quoted attributes
             const tagEnd = this.findTagEnd(html, i);
             if (tagEnd === -1) break;
-            
+
             const tagContent = html.substring(i + 1, tagEnd);
-            
+
             // Handle comments
             if (tagContent.startsWith('!--')) {
                 const commentEnd = html.indexOf('-->', i);
@@ -205,20 +204,20 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                     continue;
                 }
             }
-            
+
             // Handle self-closing tags
             if (tagContent.endsWith('/')) {
                 const parts = tagContent.slice(0, -1).trim().split(/\s+/);
                 const tagName = parts[0];
                 const attributeString = tagContent.slice(tagName.length, -1).trim();
-                
+
                 const element = ElementFactory.createElement(tagName, this._ownerDocument);
                 this.parseAttributes(element, attributeString);
                 this.appendChild(element);
                 i = tagEnd + 1;
                 continue;
             }
-            
+
             // Handle closing tags - if they don't have matching opening tags, treat as text
             if (tagContent.startsWith('/')) {
                 // For now, treat unmatched closing tags as text content
@@ -229,47 +228,47 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                 i = tagEnd + 1;
                 continue;
             }
-            
+
             // Handle opening tags
             const parts = tagContent.split(/\s+/);
             const tagName = parts[0];
             const attributeString = tagContent.slice(tagName.length).trim();
-            
+
             // Special handling for style and script tags
             if (tagName === 'style' || tagName === 'script') {
                 const closingTag = `</${tagName}>`;
                 const closingTagIndex = html.indexOf(closingTag, tagEnd + 1);
-                
+
                 if (closingTagIndex !== -1) {
                     const element = ElementFactory.createElement(tagName, this._ownerDocument);
                     this.parseAttributes(element, attributeString);
-                    
+
                     const content = html.substring(tagEnd + 1, closingTagIndex);
                     if (content) {
                         const { TextBase } = require('../TextBase');
                         const textNode = new TextBase(content, this._ownerDocument);
                         element.appendChild(textNode);
                     }
-                    
+
                     this.appendChild(element);
                     i = closingTagIndex + closingTag.length;
                     continue;
                 }
             }
-            
+
             // Handle regular opening tags with content
             const closingTag = `</${tagName}>`;
             const closingTagIndex = this.findMatchingClosingTag(html, tagName, tagEnd + 1);
-            
+
             if (closingTagIndex !== -1) {
                 const element = ElementFactory.createElement(tagName, this._ownerDocument);
                 this.parseAttributes(element, attributeString);
-                
+
                 const content = html.substring(tagEnd + 1, closingTagIndex);
                 if (content.trim()) {
                     element.innerHTML = content;
                 }
-                
+
                 this.appendChild(element);
                 i = closingTagIndex + closingTag.length;
             } else {
@@ -281,7 +280,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
             }
         }
     }
-    
+
     /**
      * Find the real end of a tag, considering quoted attributes
      */
@@ -289,10 +288,10 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
         let i = startIndex + 1; // Skip the '<'
         let inQuotes = false;
         let quoteChar = '';
-        
+
         while (i < html.length) {
             const char = html[i];
-            
+
             if (!inQuotes) {
                 if (char === '"' || char === "'") {
                     inQuotes = true;
@@ -306,10 +305,10 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                     quoteChar = '';
                 }
             }
-            
+
             i++;
         }
-        
+
         return -1; // No closing '>' found
     }
 
@@ -330,15 +329,15 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
         const closeTag = `</${tagName}>`;
         let depth = 1;
         let i = startIndex;
-        
+
         while (i < html.length && depth > 0) {
             const nextOpen = html.indexOf(openTag, i);
             const nextClose = html.indexOf(closeTag, i);
-            
+
             if (nextClose === -1) {
                 return -1; // No closing tag found
             }
-            
+
             if (nextOpen !== -1 && nextOpen < nextClose) {
                 // Found another opening tag before the closing tag
                 // Make sure it's a complete tag (not just a substring)
@@ -356,7 +355,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                 i = nextClose + closeTag.length;
             }
         }
-        
+
         return -1;
     }
 
@@ -408,18 +407,18 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
 
                 if (position < length) {
                     const quote = attributeString[position];
-                    
+
                     if (quote === '"' || quote === "'") {
                         // Quoted value - find matching closing quote
                         position++; // Skip opening quote
                         const valueStart = position;
-                        
+
                         while (position < length && attributeString[position] !== quote) {
                             position++;
                         }
-                        
+
                         value = attributeString.substring(valueStart, position);
-                        
+
                         if (position < length && attributeString[position] === quote) {
                             position++; // Skip closing quote
                         }
@@ -436,7 +435,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
 
             // Decode HTML entities in attribute values
             value = this.decodeHTMLEntities(value);
-            
+
             element.setAttribute(name, value);
         }
     }
@@ -488,7 +487,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
             if (entityMap[entity]) {
                 return entityMap[entity];
             }
-            
+
             // Handle numeric entities like &#39; &#34;
             if (entity.startsWith('&#') && entity.endsWith(';')) {
                 const numStr = entity.slice(2, -1);
@@ -497,7 +496,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                     return String.fromCharCode(num);
                 }
             }
-            
+
             // Handle hex entities like &#x27;
             if (entity.startsWith('&#x') && entity.endsWith(';')) {
                 const hexStr = entity.slice(3, -1);
@@ -506,7 +505,7 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
                     return String.fromCharCode(num);
                 }
             }
-            
+
             // Return original if not recognized
             return entity;
         });
@@ -708,8 +707,18 @@ export abstract class ElementBase extends ParentNodeBase implements Element {
         return this.getAttributeNode(localName);
     }
 
-    getBoundingClientRect(): any {
-        throw new Error('Element.getBoundingClientRect() is not implemented yet');
+    getBoundingClientRect(): DOMRect {
+        return {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({})
+        };
     }
 
     getClientRects(): any {

package/src/node/elements/HTMLElement.ts

@@ -1,11 +1,29 @@
 import { Element } from './Element';
 
+/**
+ * [MDN Reference](https://developer.mozilla.org/docs/Web/API/ElementCSSInlineStyle)
+ */
+export interface ElementCSSInlineStyle {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/attributeStyleMap) */
+    readonly attributeStyleMap: StylePropertyMap;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style) */
+    style: CSSStyleDeclaration | string;
+}
+
+export interface StylePropertyMap {
+    append(property: string, ...values: (string | any)[]): void;
+    clear(): void;
+    delete(property: string): void;
+    set(property: string, ...values: (string | any)[]): void;
+    [key: string]: any;
+}
+
 /**
  * The **`HTMLElement`** interface represents any HTML element.
  * 
  * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)
  */
-export interface HTMLElement extends Element {
+export interface HTMLElement extends Element, ElementCSSInlineStyle {
     /**
      * Returns the value of element's title content attribute. Can be set to change it.
      * 
@@ -102,4 +120,21 @@ export interface HTMLElement extends Element {
 // 기본 타입들
 export interface FocusOptions {
     preventScroll?: boolean;
+}
+
+export interface CSSStyleDeclaration {
+    cssText: string;
+    length: number;
+    parentRule: any;
+    getPropertyPriority(property: string): string;
+    getPropertyValue(property: string): string;
+    item(index: number): string;
+    removeProperty(property: string): string;
+    setProperty(property: string, value: string | null, priority?: string): void;
+    [index: number]: string;
+    [key: string]: any;
+}
+
+export interface DOMStringMap {
+    [key: string]: string | undefined;
 }

package/src/node/elements/HTMLElementBase.ts

@@ -1,12 +1,12 @@
 import { ElementBase } from './ElementBase';
-import { HTMLElement, FocusOptions } from './HTMLElement';
+import { HTMLElement, FocusOptions, CSSStyleDeclaration, DOMStringMap, ElementCSSInlineStyle, StylePropertyMap } from './HTMLElement';
 import { Text } from '../Text';
 import { ElementFactory } from '../../factory';
 
 /**
  * Base implementation for all HTML elements
  */
-export abstract class HTMLElementBase extends ElementBase implements HTMLElement {
+export abstract class HTMLElementBase extends ElementBase implements HTMLElement, ElementCSSInlineStyle {
     private _title: string = '';
     private _lang: string = '';
     private _dir: string = '';
@@ -124,9 +124,6 @@ export abstract class HTMLElementBase extends ElementBase implements HTMLElement
     }
 
     focus(options?: FocusOptions): void {
-        // Set focus state using data attribute
-        this.setAttribute('data-focused', 'true');
-        console.log(`Focused on ${this.tagName} element`);
     }
 
     blur(): void {
@@ -195,4 +192,193 @@ export abstract class HTMLElementBase extends ElementBase implements HTMLElement
                 break;
         }
     }
+
+    // New implementations for style, dataset, nonce
+    private _style: CSSStyleDeclaration | null = null;
+    private _dataset: DOMStringMap | null = null;
+
+    get style(): CSSStyleDeclaration {
+        if (!this._style) {
+            this._style = new Proxy(new CSSStyleDeclarationImpl(this), {
+                get: (target, prop: string | symbol) => {
+                    if (typeof prop === 'string' && !(prop in target)) {
+                        // Convert camelCase to kebab-case for CSS properties
+                        const cssProp = prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                        return target.getPropertyValue(cssProp);
+                    }
+                    return (target as any)[prop];
+                },
+                set: (target, prop: string | symbol, value: any) => {
+                    if (typeof prop === 'string' && !(prop in target)) {
+                        // Convert camelCase to kebab-case for CSS properties
+                        const cssProp = prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                        target.setProperty(cssProp, String(value));
+                        return true;
+                    }
+                    (target as any)[prop] = value;
+                    return true;
+                }
+            }) as unknown as CSSStyleDeclaration;
+        }
+        return this._style;
+    }
+
+    set style(value: string | CSSStyleDeclaration) {
+        if (typeof value === 'string') {
+            this.style.cssText = value;
+        }
+    }
+
+    private _attributeStyleMap: StylePropertyMap | null = null;
+
+    get attributeStyleMap(): StylePropertyMap {
+        if (!this._attributeStyleMap) {
+            this._attributeStyleMap = new StylePropertyMapImpl(this);
+        }
+        return this._attributeStyleMap;
+    }
+
+    get dataset(): DOMStringMap {
+        if (!this._dataset) {
+            this._dataset = new Proxy({}, {
+                get: (target, prop: string | symbol) => {
+                    if (typeof prop === 'string') {
+                        // Convert camelCase to kebab-case: fooBar -> data-foo-bar
+                        const attrName = 'data-' + prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                        return this.getAttribute(attrName);
+                    }
+                    return undefined;
+                },
+                set: (target, prop: string | symbol, value: any) => {
+                    if (typeof prop === 'string') {
+                        // Convert camelCase to kebab-case: fooBar -> data-foo-bar
+                        const attrName = 'data-' + prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                        this.setAttribute(attrName, String(value));
+                        return true;
+                    }
+                    return false;
+                },
+                deleteProperty: (target, prop: string | symbol) => {
+                    if (typeof prop === 'string') {
+                        const attrName = 'data-' + prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+                        this.removeAttribute(attrName);
+                        return true;
+                    }
+                    return false;
+                }
+            });
+        }
+        return this._dataset;
+    }
+
+    get nonce(): string {
+        return this.getAttribute('nonce') || '';
+    }
+
+    set nonce(value: string) {
+        this.setAttribute('nonce', value);
+    }
+}
+
+// CSSStyleDeclaration implementation
+class CSSStyleDeclarationImpl {
+    [key: string]: any;
+
+    constructor(private element: HTMLElementBase) { }
+
+    parentRule: any = null;
+
+    getPropertyPriority(property: string): string {
+        return '';
+    }
+
+    get cssText(): string {
+        return this.element.getAttribute('style') || '';
+    }
+
+    set cssText(value: string) {
+        this.element.setAttribute('style', value);
+    }
+
+    get length(): number {
+        return this.parseStyle(this.cssText).size;
+    }
+
+    getPropertyValue(property: string): string {
+        const style = this.parseStyle(this.cssText);
+        return style.get(property) || '';
+    }
+
+    setProperty(property: string, value: string | null, priority: string = ''): void {
+        const style = this.parseStyle(this.cssText);
+        if (value === null || value === '') {
+            style.delete(property);
+        } else {
+            style.set(property, value); // TODO: handle priority
+        }
+        this.cssText = this.serializeStyle(style);
+    }
+
+    removeProperty(property: string): string {
+        const style = this.parseStyle(this.cssText);
+        const value = style.get(property) || '';
+        style.delete(property);
+        this.cssText = this.serializeStyle(style);
+        return value;
+    }
+
+    item(index: number): string {
+        const style = this.parseStyle(this.cssText);
+        return Array.from(style.keys())[index] || '';
+    }
+
+    private parseStyle(cssText: string): Map<string, string> {
+        const style = new Map<string, string>();
+        if (!cssText) return style;
+
+        cssText.split(';').forEach(declaration => {
+            const part = declaration.trim();
+            if (!part) return;
+
+            const colonIndex = part.indexOf(':');
+            if (colonIndex !== -1) {
+                const property = part.substring(0, colonIndex).trim();
+                const value = part.substring(colonIndex + 1).trim();
+                if (property && value) {
+                    style.set(property, value);
+                }
+            }
+        });
+        return style;
+    }
+
+    private serializeStyle(style: Map<string, string>): string {
+        return Array.from(style.entries())
+            .map(([property, value]) => `${property}: ${value}`)
+            .join('; ');
+    }
+}
+
+// StylePropertyMap implementation
+class StylePropertyMapImpl implements StylePropertyMap {
+    [key: string]: any;
+
+    constructor(private element: HTMLElementBase) { }
+
+    set(property: string, ...values: (string | any)[]): void {
+        const value = values[0];
+        this.element.style.setProperty(property, String(value));
+    }
+
+    append(property: string, ...values: (string | any)[]): void {
+        this.set(property, ...values);
+    }
+
+    delete(property: string): void {
+        this.element.style.removeProperty(property);
+    }
+
+    clear(): void {
+        this.element.style.cssText = '';
+    }
 }