Files
headroom/frontend/node_modules/happy-dom/lib/html-serializer/HTMLSerializer.js
Santhosh Janardhanan de2d83092e feat: Reinitialize frontend with SvelteKit and TypeScript
- Delete old Vite+Svelte frontend
- Initialize new SvelteKit project with TypeScript
- Configure Tailwind CSS v4 + DaisyUI
- Implement JWT authentication with auto-refresh
- Create login page with form validation (Zod)
- Add protected route guards
- Update Docker configuration for single-stage build
- Add E2E tests with Playwright (6/11 passing)
- Fix Svelte 5 reactivity with $state() runes

Known issues:
- 5 E2E tests failing (timing/async issues)
- Token refresh implementation needs debugging
- Validation error display timing
2026-02-17 16:19:59 -05:00

123 lines
5.6 KiB
JavaScript

import * as PropertySymbol from '../PropertySymbol.js';
import Node from '../nodes/node/Node.js';
import NodeTypeEnum from '../nodes/node/NodeTypeEnum.js';
import HTMLElementConfig from '../config/HTMLElementConfig.js';
import HTMLElementConfigContentModelEnum from '../config/HTMLElementConfigContentModelEnum.js';
import XMLEncodeUtility from '../utilities/XMLEncodeUtility.js';
/**
* Serializes a node into HTML.
*/
export default class HTMLSerializer {
options = {
serializableShadowRoots: false,
shadowRoots: null,
allShadowRoots: false
};
/**
* Constructor.
*
* @param [options] Options.
* @param [options.serializableShadowRoots] If shadow roots should be serialized.
* @param [options.shadowRoots] Shadow roots to serialize.
* @param [options.allShadowRoots] If all shadow roots should be serialized.
*/
constructor(options) {
if (options) {
if (options.serializableShadowRoots) {
this.options.serializableShadowRoots = options.serializableShadowRoots;
}
if (options.shadowRoots) {
this.options.shadowRoots = options.shadowRoots;
}
if (options.allShadowRoots) {
this.options.allShadowRoots = options.allShadowRoots;
}
}
}
/**
* Renders an element as HTML.
*
* @param root Root element.
* @returns Result.
*/
serializeToString(root) {
switch (root[PropertySymbol.nodeType]) {
case NodeTypeEnum.elementNode:
const element = root;
const prefix = element[PropertySymbol.prefix];
const localName = element[PropertySymbol.localName];
const config = HTMLElementConfig[element[PropertySymbol.localName]];
const tagName = prefix ? `${prefix}:${localName}` : localName;
if (config?.contentModel === HTMLElementConfigContentModelEnum.noDescendants) {
return `<${tagName}${this.getAttributes(element)}>`;
}
let innerHTML = '';
// TODO: Should we include closed shadow roots? We are currently only including open shadow roots.
if (element.shadowRoot &&
(this.options.allShadowRoots ||
(this.options.serializableShadowRoots &&
element.shadowRoot[PropertySymbol.serializable]) ||
this.options.shadowRoots?.includes(element.shadowRoot))) {
innerHTML += `<template shadowrootmode="${element.shadowRoot[PropertySymbol.mode]}"${element.shadowRoot[PropertySymbol.serializable] ? ' shadowrootserializable=""' : ''}>`;
for (const node of element.shadowRoot[PropertySymbol.nodeArray]) {
innerHTML += this.serializeToString(node);
}
innerHTML += '</template>';
}
const childNodes = tagName === 'template'
? root.content[PropertySymbol.nodeArray]
: root[PropertySymbol.nodeArray];
for (const node of childNodes) {
innerHTML += this.serializeToString(node);
}
return `<${tagName}${this.getAttributes(element)}>${innerHTML}</${tagName}>`;
case Node.DOCUMENT_FRAGMENT_NODE:
case Node.DOCUMENT_NODE:
let html = '';
for (const node of root[PropertySymbol.nodeArray]) {
html += this.serializeToString(node);
}
return html;
case NodeTypeEnum.commentNode:
return `<!--${root.textContent}-->`;
case NodeTypeEnum.processingInstructionNode:
return `<!--?${root.target} ${root.textContent}?-->`;
case NodeTypeEnum.textNode:
const parentElement = root.parentElement;
if (parentElement) {
const parentConfig = HTMLElementConfig[parentElement[PropertySymbol.localName]];
if (parentConfig?.contentModel === HTMLElementConfigContentModelEnum.rawText) {
return root.textContent;
}
}
return XMLEncodeUtility.encodeTextContent(root.textContent);
case NodeTypeEnum.documentTypeNode:
const doctype = root;
const identifier = doctype.publicId ? ' PUBLIC' : doctype.systemId ? ' SYSTEM' : '';
const publicId = doctype.publicId ? ` "${doctype.publicId}"` : '';
const systemId = doctype.systemId ? ` "${doctype.systemId}"` : '';
return `<!DOCTYPE ${doctype.name}${identifier}${publicId}${systemId}>`;
}
return '';
}
/**
* Returns attributes as a string.
*
* @param element Element.
* @returns Attributes.
*/
getAttributes(element) {
let attributeString = '';
const attributes = element[PropertySymbol.attributes][PropertySymbol.items];
if (!attributes.has(':is') && element[PropertySymbol.isValue]) {
attributeString +=
' is="' + XMLEncodeUtility.encodeHTMLAttributeValue(element[PropertySymbol.isValue]) + '"';
}
for (const attribute of attributes.values()) {
const escapedValue = XMLEncodeUtility.encodeHTMLAttributeValue(attribute[PropertySymbol.value]);
attributeString += ' ' + attribute[PropertySymbol.name] + '="' + escapedValue + '"';
}
return attributeString;
}
}
//# sourceMappingURL=HTMLSerializer.js.map