@dooboostore/dom-parser

import { DomParser } from
'@dooboostore/dom-parser';

// Parse HTML string
const html = `
〈!DOCTYPE html〉
〈html〉

〈head〉
    〈title〉Test Page〈/title〉
〈/head〉

〈body〉
    〈div id="app"〉
        〈h1〉Hello World〈/h1〉
        〈p class="content"〉This is a test paragraph.〈/p〉
    〈/div〉
〈/body〉

〈/html〉
`;

// Create DOM parser instance
const parser = new DomParser(html);

// Access document and window objects
const document = parser.document;
const window = parser.window;

// Use standard DOM APIs
const title = document.querySelector('title');
console.log(title?.textContent); // "Test Page"

const app = document.getElementById('app');
console.log(app?.innerHTML); // Contains the div content

const paragraphs = document.querySelectorAll('p.content');
console.log(paragraphs.length); // 1

import { DomParser } from
'@dooboostore/dom-parser';

// Basic initialization
const parser = new DomParser(htmlString);

// With options
const parser = new DomParser(htmlString, {
href: 'https://example.com' // Set base URL for relative links
});

// Access parsed DOM
const document = parser.document;
const window = parser.window;

import { DomParser } from
'@dooboostore/dom-parser';

const parser = new DomParser('〈html〉〈body〉〈/body〉〈/html〉');
const document = parser.document;

// Create new elements
const div = document.createElement('div');
div.id = 'new-element';
div.className = 'container';
div.textContent = 'Hello from DOM Parser!';

// Set attributes
div.setAttribute('data-test', 'value');
div.setAttribute('style', 'color: blue; font-size: 16px;');

// Append to document
document.body.appendChild(div);

// Query and modify existing elements
const existingDiv = document.getElementById('new-element');
if (existingDiv) {
    existingDiv.innerHTML = '〈p〉Modified content〈/p〉';
    existingDiv.classList.add('modified');
}

// Get the final HTML
console.log(document.documentElement.outerHTML);

import { DomParser } from
'@dooboostore/dom-parser';

const html = `
〈html〉
    〈body〉
        〈div class="container"〉
        〈h1 id="title"〉Main Title〈/h1〉
        〈p class="text"〉First paragraph〈/p〉
        〈p class="text highlight"〉Second paragraph〈/p〉
        〈ul〉
            〈li data-id="1"〉Item 1〈/li〉
            〈li data-id="2"〉Item 2〈/li〉
        〈/ul〉
    〈/div〉
    〈/body〉
〈/html〉
`;

const parser = new DomParser(html);
const document = parser.document;

// CSS Selector queries
const title = document.querySelector('#title');
const allParagraphs = document.querySelectorAll('p.text');
const highlighted = document.querySelector('.highlight');

// Element-specific queries
const container = document.getElementsByClassName('container')[0];
const titleById = document.getElementById('title');
const listItems = document.getElementsByTagName('li');

// Attribute-based queries
const itemsWithDataId = document.querySelectorAll('[data-id]');

// Traversal
const firstParagraph = title?.nextElementSibling;
const parentDiv = title?.parentElement;

console.log('Title:', title?.textContent);
console.log('Paragraphs count:', allParagraphs.length);
console.log('List items:', Array.from(listItems).map(li =>
li.textContent));

import { DomParser } from
'@dooboostore/dom-parser';
import fs from 'fs';

// Load HTML template
const templateHtml = fs.readFileSync('template.html', 'utf8');
const parser = new DomParser(templateHtml);

// Set up global DOM for SSR
global.document = parser.document;
global.window = parser.window;

// Now your components can use DOM APIs on the server
function renderComponent() {
    const element = document.createElement('div');
    element.textContent = 'Server-rendered content';
    document.body.appendChild(element);

    return document.documentElement.outerHTML;
}

const renderedHtml = renderComponent();
console.log(renderedHtml);

import { DomParser } from
'@dooboostore/dom-parser';

function processHtml(html: string) {
    const parser = new DomParser(html);
    const document = parser.document;

    // Modify the title
    const title = document.querySelector('title');
    if (title) {
        title.textContent = 'Processed - ' + title.textContent;
    }

    // Add meta tags
    const head = document.querySelector('head');
    const metaDescription = document.createElement('meta');
    metaDescription.setAttribute('name', 'description');
    metaDescription.setAttribute('content', 'Processed by dom-parser');
    head?.appendChild(metaDescription);

    // Add CSS class to all paragraphs
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => {
        p.classList.add('processed');
    });

    // Wrap content in a container
    const body = document.body;
    const wrapper = document.createElement('div');
    wrapper.className = 'content-wrapper';

    // Move all body children to wrapper
    while (body.firstChild) {
        wrapper.appendChild(body.firstChild);
    }
    body.appendChild(wrapper);

    return document.documentElement.outerHTML;
}

const originalHtml = `
〈!DOCTYPE html〉
〈html〉
    〈head〉〈title〉Original〈/title〉〈/head〉
    〈body〉
        〈p〉First paragraph〈/p〉
        〈p〉Second paragraph〈/p〉
    〈/body〉
〈/html〉
`;

const processedHtml = processHtml(originalHtml);
console.log(processedHtml);

import { DomParser } from
'@dooboostore/dom-parser';

function extractProductData(html: string) {
const parser = new DomParser(html);
const document = parser.document;

// Extract product information
const products = [];
const productElements = document.querySelectorAll('.product-item');

productElements.forEach(element => {
const name = element.querySelector('.product-name')?.textContent?.trim();
const price = element.querySelector('.price')?.textContent?.trim();
const image = element.querySelector('img')?.getAttribute('src');
const rating = element.querySelectorAll('.star.filled').length;

if (name && price) {
    products.push({
        name,
        price,
        image,
        rating
    });
}
});

return products;
}

// Example HTML from an e-commerce site
const ecommerceHtml = `
〈div class="products"〉
    〈div class="product-item"〉
        〈img src="/product1.jpg" alt="Product 1"〉
        〈h3 class="product-name"〉Awesome Widget〈/h3〉
        〈div class="price"〉$29.99〈/div〉
            〈div class="rating"〉
                〈span class="star filled"〉★〈/span〉
                〈span class="star filled"〉★〈/span〉
                〈span class="star filled"〉★〈/span〉
                〈span class="star filled"〉★〈/span〉
                〈span class="star"〉★〈/span〉
            〈/div〉
        〈/div〉
        〈div class="product-item"〉
        〈img src="/product2.jpg" alt="Product 2"〉
        〈h3 class="product-name"〉Super Gadget〈/h3〉
        〈div class="price"〉$49.99〈/div〉
        〈div class="rating"〉
            〈span class="star filled"〉★〈/span〉
            〈span class="star filled"〉★〈/span〉
            〈span class="star filled"〉★〈/span〉
            〈span class="star filled"〉★〈/span〉
            〈span class="star filled"〉★〈/span〉
        〈/div〉
    〈/div〉
〈/div〉
`;

const products = extractProductData(ecommerceHtml);
console.log('Extracted products:', products);