/** * XML/HTML Formatter & Beautifier * * A powerful tool for formatting and beautifying XML/HTML markup. * Features indentation, attribute sorting, and validation. * * Demonstrates Transformation Tools features: * - inputControl.error/success for input field feedback * - outputControl for badge variants * - uiControl.diff for showing changes */ const app = { /** * Main execution logic */ execute(ctx) { const { xmlInput, indentSize, preserveComments, collapseContent, outputMode, sortAttributes } = ctx.values; // Handle empty input if (!xmlInput || xmlInput.trim() === '') { return { success: true, data: { validationMessage: 'Enter XML/HTML to format', formattedXml: '', statsText: 'No input', }, outputControl: { validationMessage: { variant: 'default' }, }, }; } try { // Validate XML structure const validation = validateXml(xmlInput); if (!validation.valid) { return { success: true, data: { validationMessage: validation.error, formattedXml: xmlInput, statsText: 'Invalid markup', }, inputControl: { xmlInput: { error: validation.error }, }, outputControl: { validationMessage: { variant: 'error' }, }, }; } // Format the XML const options = { indentSize, preserveComments, collapseContent, sortAttributes, }; const formatted = outputMode === 'minify' ? minifyXml(xmlInput, options) : beautifyXml(xmlInput, options); // Calculate statistics const stats = calculateStats(formatted); return { success: true, data: { validationMessage: 'Valid XML ✓', formattedXml: formatted, statsText: `${stats.elements} elements • ${stats.attributes} attributes • ${stats.lines} lines • ${stats.size}`, }, inputControl: { xmlInput: { error: undefined, success: 'Valid XML' }, }, outputControl: { formattedXml: { applyToInput: { targetField: 'xmlInput', label: 'Replace Input', }, }, validationMessage: { variant: 'success' }, }, uiControl: { diff: { original: xmlInput, modified: formatted, language: 'xml', }, }, }; } catch (error) { return { success: true, data: { validationMessage: error.message || 'Formatting error', formattedXml: xmlInput, statsText: 'Error', }, inputControl: { xmlInput: { error: error.message }, }, outputControl: { validationMessage: { variant: 'error' }, }, }; } }, /** * Provide contextual feedback */ interpret(ctx) { const { formattedXml, validationMessage } = ctx.results; const { outputMode, xmlInput } = ctx.values; if (validationMessage.includes('error') || validationMessage.includes('Error') || validationMessage.includes('Invalid')) { return { variant: 'error', message: 'There was an issue with your XML/HTML.', suggestions: [ 'Check for unclosed tags', 'Verify attribute quotes are balanced', 'Ensure proper nesting of elements', 'Check for invalid characters in tag names', ], }; } const originalSize = xmlInput?.length || 0; const newSize = formattedXml?.length || 0; const diff = newSize - originalSize; const percentChange = originalSize > 0 ? Math.round((diff / originalSize) * 100) : 0; if (outputMode === 'minify') { return { variant: 'success', message: `Minified! Reduced by ${Math.abs(percentChange)}% (${Math.abs(diff)} characters)`, insights: [ 'Minified XML is ideal for API payloads', 'Smaller files mean faster network transfers', ], }; } return { variant: 'success', message: 'XML/HTML formatted successfully!', insights: [ 'Formatted markup is easier to read and debug', 'Consistent formatting helps team collaboration', 'Use the copy button to grab the formatted output', ], }; }, }; /** * Validate XML structure */ function validateXml(xml) { const tagStack = []; let i = 0; // Skip BOM if present if (xml.charCodeAt(0) === 0xFEFF) { i = 1; } while (i < xml.length) { // Skip whitespace while (i < xml.length && /\s/.test(xml[i])) i++; if (i >= xml.length) break; // Check for tags if (xml[i] === '<') { // Comment if (xml.substring(i, i + 4) === '', i + 4); if (endComment === -1) { return { valid: false, error: 'Unclosed comment' }; } i = endComment + 3; continue; } // CDATA if (xml.substring(i, i + 9) === '', i + 9); if (endCdata === -1) { return { valid: false, error: 'Unclosed CDATA section' }; } i = endCdata + 3; continue; } // Processing instruction () if (xml.substring(i, i + 2) === '', i + 2); if (endPi === -1) { return { valid: false, error: 'Unclosed processing instruction' }; } i = endPi + 2; continue; } // DOCTYPE if (xml.substring(i, i + 9).toUpperCase() === ' 0) { if (xml[i] === '<') depth++; else if (xml[i] === '>') depth--; i++; } continue; } // Closing tag if (xml[i + 1] === '/') { const endTag = xml.indexOf('>', i); if (endTag === -1) { return { valid: false, error: 'Unclosed tag' }; } const tagName = xml.substring(i + 2, endTag).trim().split(/\s/)[0]; if (tagStack.length === 0) { return { valid: false, error: `Unexpected closing tag: ` }; } const expectedTag = tagStack.pop(); if (tagName.toLowerCase() !== expectedTag.toLowerCase()) { return { valid: false, error: `Mismatched tags: expected , found ` }; } i = endTag + 1; continue; } // Opening tag const endTag = xml.indexOf('>', i); if (endTag === -1) { return { valid: false, error: 'Unclosed tag' }; } const tagContent = xml.substring(i + 1, endTag); const tagName = tagContent.split(/[\s/>]/)[0]; // Check for valid tag name if (!/^[a-zA-Z_][\w\-.:]*$/.test(tagName) && tagName !== '!--') { return { valid: false, error: `Invalid tag name: ${tagName}` }; } // Self-closing tag if (tagContent.endsWith('/') || isSelfClosingHtmlTag(tagName)) { i = endTag + 1; continue; } tagStack.push(tagName); i = endTag + 1; } else { // Text content - skip to next tag while (i < xml.length && xml[i] !== '<') i++; } } if (tagStack.length > 0) { return { valid: false, error: `Unclosed tag: <${tagStack[tagStack.length - 1]}>` }; } return { valid: true }; } /** * Check if tag is a self-closing HTML tag */ function isSelfClosingHtmlTag(tagName) { const selfClosing = [ 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr' ]; return selfClosing.includes(tagName.toLowerCase()); } /** * Beautify XML with proper formatting */ function beautifyXml(xml, options) { const { indentSize, preserveComments, collapseContent, sortAttributes } = options; // Determine indent string const indent = indentSize === 'tab' ? '\t' : ' '.repeat(parseInt(indentSize, 10) || 2); // Parse and rebuild const tokens = tokenize(xml); const lines = []; let level = 0; let lastWasText = false; for (let i = 0; i < tokens.length; i++) { const token = tokens[i]; if (token.type === 'comment') { if (preserveComments) { lines.push(indent.repeat(level) + token.value); } lastWasText = false; } else if (token.type === 'cdata') { lines.push(indent.repeat(level) + token.value); lastWasText = false; } else if (token.type === 'pi' || token.type === 'doctype') { lines.push(token.value); lastWasText = false; } else if (token.type === 'openTag') { let tagStr = formatTag(token, sortAttributes, collapseContent); lines.push(indent.repeat(level) + tagStr); if (!token.selfClosing) { level++; } lastWasText = false; } else if (token.type === 'closeTag') { level = Math.max(0, level - 1); lines.push(indent.repeat(level) + token.value); lastWasText = false; } else if (token.type === 'text') { const text = token.value.trim(); if (text) { // Check if this is inline content (between open and close tag on same line) const prevToken = tokens[i - 1]; const nextToken = tokens[i + 1]; if (prevToken?.type === 'openTag' && nextToken?.type === 'closeTag' && !text.includes('\n')) { // Inline content - merge with previous line const lastLine = lines.pop(); const closeTag = nextToken.value; lines.push(lastLine + text + closeTag); i++; // Skip the close tag level = Math.max(0, level - 1); } else { lines.push(indent.repeat(level) + text); } lastWasText = true; } } } return lines.join('\n'); } /** * Format a tag with optional attribute sorting */ function formatTag(token, sortAttributes, collapseContent) { let attrs = token.attributes || []; if (sortAttributes && attrs.length > 1) { attrs = [...attrs].sort((a, b) => a.name.localeCompare(b.name)); } let attrStr = attrs.map(a => { if (a.value === null) return a.name; const quote = a.value.includes('"') ? "'" : '"'; return `${a.name}=${quote}${a.value}${quote}`; }).join(' '); if (attrStr) attrStr = ' ' + attrStr; const selfClose = token.selfClosing ? ' /' : ''; return `<${token.name}${attrStr}${selfClose}>`; } /** * Minify XML by removing unnecessary whitespace */ function minifyXml(xml, options) { const { preserveComments } = options; let result = xml; // Remove comments if not preserving if (!preserveComments) { result = result.replace(//g, ''); } // Remove whitespace between tags result = result.replace(/>\s+<'); // Remove leading/trailing whitespace result = result.trim(); // Normalize internal whitespace in text nodes (but preserve single spaces) result = result.replace(/>\s{2,}/g, '> '); result = result.replace(/\s{2,}', i + 4); if (end !== -1) { tokens.push({ type: 'comment', value: xml.substring(i, end + 3) }); i = end + 3; continue; } } // CDATA if (xml.substring(i, i + 9) === '', i + 9); if (end !== -1) { tokens.push({ type: 'cdata', value: xml.substring(i, end + 3) }); i = end + 3; continue; } } // Processing instruction if (xml.substring(i, i + 2) === '', i + 2); if (end !== -1) { tokens.push({ type: 'pi', value: xml.substring(i, end + 2) }); i = end + 2; continue; } } // DOCTYPE if (xml.substring(i, i + 9).toUpperCase() === '') { depth--; if (depth === 0) { tokens.push({ type: 'doctype', value: xml.substring(i, j + 1) }); i = j + 1; break; } } j++; } continue; } // Closing tag if (xml.substring(i, i + 2) === '', i); if (end !== -1) { tokens.push({ type: 'closeTag', value: xml.substring(i, end + 1) }); i = end + 1; continue; } } // Opening tag if (xml[i] === '<') { const end = xml.indexOf('>', i); if (end !== -1) { const tagContent = xml.substring(i + 1, end); const selfClosing = tagContent.endsWith('/'); const cleanContent = selfClosing ? tagContent.slice(0, -1).trim() : tagContent; // Parse tag name and attributes const parts = cleanContent.match(/^([^\s]+)(.*)$/s); if (parts) { const name = parts[1]; const attrStr = parts[2]?.trim() || ''; const attributes = parseAttributes(attrStr); tokens.push({ type: 'openTag', name, attributes, selfClosing: selfClosing || isSelfClosingHtmlTag(name), value: xml.substring(i, end + 1) }); } i = end + 1; continue; } } // Text content const nextTag = xml.indexOf('<', i); if (nextTag === -1) { const text = xml.substring(i); if (text.trim()) { tokens.push({ type: 'text', value: text }); } break; } else if (nextTag > i) { const text = xml.substring(i, nextTag); tokens.push({ type: 'text', value: text }); i = nextTag; } else { i++; } } return tokens; } /** * Parse attributes from attribute string */ function parseAttributes(attrStr) { const attrs = []; const regex = /([^\s=]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g; let match; while ((match = regex.exec(attrStr)) !== null) { const name = match[1]; const value = match[2] ?? match[3] ?? match[4] ?? null; attrs.push({ name, value }); } return attrs; } /** * Calculate XML statistics */ function calculateStats(xml) { // Count elements const elementMatches = xml.match(/<[a-zA-Z][^>]*>/g) || []; const elements = elementMatches.filter(m => !m.startsWith(' { const attrMatches = tag.match(/\s[a-zA-Z][\w\-.:]*=/g); if (attrMatches) attributes += attrMatches.length; }); // Count lines const lines = xml.split('\n').filter(l => l.trim()).length; // Format size const bytes = new Blob([xml]).size; let size; if (bytes < 1024) { size = `${bytes} B`; } else if (bytes < 1024 * 1024) { size = `${(bytes / 1024).toFixed(1)} KB`; } else { size = `${(bytes / (1024 * 1024)).toFixed(2)} MB`; } return { elements, attributes, lines, size }; }