LinkedDOM Showcase

import { parseHTML } from 'https://esm.sh/linkedom@0.16.0'; export default async function server(request: Request): Promise { // Parse the URL from the request query parameters const url = new URL(request.url).searchParams.get('url'); let html: string; if (url) { // Fetch the webpage const response = await fetch(url, { headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' } }); html = await response.text(); } else { // Default HTML for demonstration html = ` LinkedDOM Showcase `; } // Use parseHTML to create document and related objects const { window, document, customElements, HTMLElement } = parseHTML(html); // Define a custom element customElements.define('user-badge', class extends HTMLElement { connectedCallback() { this.innerHTML = ` 👤 User `; } }); // Append custom element document.body.appendChild( document.createElement('user-badge') ); // Generate ARIA tree from the document const ariaSnapshot = generateAriaTree(document.documentElement); const ariaYaml = renderAriaTree(ariaSnapshot.root); // Demonstrate LinkedDOM capabilities const formElements = document.querySelectorAll('form, input[name], button'); const serializedDocument = document.toString(); return new Response(JSON.stringify({ ariaYaml, formElementCount: formElements.length, documentTitle: document.title, serializedDocument, customElementAdded: document.body.innerHTML.includes('user-badge') }), { headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }); } // Utility functions (same as previous implementation) const roleUtils = { beginAriaCaches: () => {}, endAriaCaches: () => {}, getAriaRole: (element: Element): string => { // Detect ARIA role with basic heuristics if (element.getAttribute('role')) return element.getAttribute('role')!; const roleMap: {[key: string]: string} = { 'BUTTON': 'button', 'A': 'link', 'INPUT': 'textbox', 'TEXTAREA': 'textbox', 'SELECT': 'listbox', 'H1': 'heading', 'H2': 'heading', 'H3': 'heading', 'H4': 'heading', 'H5': 'heading', 'H6': 'heading' }; return roleMap[element.tagName] || 'generic'; }, getElementAccessibleName: (element: Element): string => { // More comprehensive accessible name detection const ariaLabel = element.getAttribute('aria-label'); const title = element.getAttribute('title'); const textContent = element.textContent ? element.textContent.trim() : ''; return ariaLabel || title || textContent || ''; }, isElementHiddenForAria: (element: Element): boolean => { // More robust hidden element detection return (element.getAttribute('aria-hidden') === 'true') || (element.getAttribute('style')?.includes('display:none')) || (element.classList && element.classList.contains('hidden')) || false; }, getPseudoContent: () => '', kAriaCheckedRoles: ['checkbox', 'radio', 'switch'], kAriaDisabledRoles: ['button', 'input', 'select'], kAriaExpandedRoles: ['button', 'combobox', 'menu'], kAriaLevelRoles: ['heading', 'listitem'], kAriaPressedRoles: ['button'], kAriaSelectedRoles: ['option', 'tab'], getAriaChecked: (element: Element) => { const checkedAttr = element.getAttribute('aria-checked'); if (checkedAttr === 'mixed') return 'mixed'; return checkedAttr === 'true'; }, getAriaDisabled: (element: Element) => (element.getAttribute('aria-disabled') === 'true') || (element.hasAttribute('disabled')), getAriaExpanded: (element: Element) => element.getAttribute('aria-expanded') === 'true', getAriaLevel: (element: Element) => { const level = element.getAttribute('aria-level'); return level ? parseInt(level, 10) : undefined; }, getAriaPressed: (element: Element) => { const pressedAttr = element.getAttribute('aria-pressed'); if (pressedAttr === 'mixed') return 'mixed'; return pressedAttr === 'true'; }, getAriaSelected: (element: Element) => element.getAttribute('aria-selected') === 'true' }; const getElementComputedStyle = () => ({ display: 'block' }); function generateAriaTree(rootElement: Element) { const visited = new Set(); const snapshot = { root: { role: 'fragment', name: '', children: [], element: rootElement }, elements: new Map(), ids: new Map() }; const addElement = (element: Element) => { const id = snapshot.elements.size + 1; snapshot.elements.set(id, element); snapshot.ids.set(element, id); }; const visit = (ariaNode: any, node: Node) => { // Prevent infinite recursion if (visited.has(node)) return; visited.add(node); // Handle text nodes if (node.nodeType === Node.TEXT_NODE && node.textContent) { const trimmedText = node.textContent.trim(); if (trimmedText) { ariaNode.children.push(trimmedText); } return; } // Skip non-element nodes and comments if (node.nodeType !== Node.ELEMENT_NODE) return; const element = node as Element; // Skip hidden elements if (roleUtils.isElementHiddenForAria(element)) return; addElement(element); const childAriaNode = toAriaNode(element); if (childAriaNode) { ariaNode.children.push(childAriaNode); } // Recursively process child nodes const children = node.childNodes; for (const child of children) { visit(childAriaNode || ariaNode, child); } }; const toAriaNode = (element: Element) => { const role = roleUtils.getAriaRole(element); // Skip presentation and none roles if (!role || role === 'presentation' || role === 'none') return null; const name = roleUtils.getElementAccessibleName(element); const result: any = { role, name: name || '', children: [], element }; // Add additional ARIA attributes if (roleUtils.kAriaCheckedRoles.includes(role)) result.checked = roleUtils.getAriaChecked(element); if (roleUtils.kAriaDisabledRoles.includes(role)) result.disabled = roleUtils.getAriaDisabled(element); if (roleUtils.kAriaExpandedRoles.includes(role)) result.expanded = roleUtils.getAriaExpanded(element); if (roleUtils.kAriaLevelRoles.includes(role)) result.level = roleUtils.getAriaLevel(element); if (roleUtils.kAriaPressedRoles.includes(role)) result.pressed = roleUtils.getAriaPressed(element); if (roleUtils.kAriaSelectedRoles.includes(role)) result.selected = roleUtils.getAriaSelected(element); return result; }; // Start visiting from the root element visit(snapshot.root, rootElement); return snapshot; } function renderAriaTree(ariaNode: any, options = {}) { const lines: string[] = []; const visit = (node: any, indent = '') => { // Handle string nodes (text content) if (typeof node === 'string') { // Escape quotes and ensure valid YAML string const escapedNode = node.replace(/"/g, '\\"').trim(); if (escapedNode) { lines.push(`${indent}- text: "${escapedNode}"`); } return; } // Handle ARIA nodes let key = node.role; if (node.name) { // Escape quotes and ensure valid YAML string const escapedName = node.name.replace(/"/g, '\\"').trim(); key += escapedName ? ` "${escapedName}"` : ''; } // Add additional attributes to the key if (node.checked === 'mixed') key += ' [checked=mixed]'; if (node.checked === true) key += ' [checked]'; if (node.disabled) key += ' [disabled]'; if (node.expanded) key += ' [expanded]'; if (node.level) key += ` [level=${node.level}]`; if (node.pressed === 'mixed') key += ' [pressed=mixed]'; if (node.pressed === true) key += ' [pressed]'; if (node.selected === true) key += ' [selected]'; // Render node with or without children if (!node.children || node.children.length === 0) { lines.push(`${indent}- ${key}`); } else { lines.push(`${indent}- ${key}:`); for (const child of node.children) { visit(child, indent + ' '); } } }; // Start rendering from the root node visit(ariaNode); return lines.join('\n'); }

AriaSnapshotFromUrl

Version 2