Skip to content

Fixes how empty XHTML and SVG elements are serialized #305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixes how empty XHTML and SVG elements are serialized #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab4a9b5
Pass MIME types to XMLDocuments
PolariTOON May 24, 2025
64b65b0
Define which elements should always be void in XHTML
PolariTOON May 24, 2025
8ab487b
Emit `/>` instead of ` />` when closing SVG empty elements
PolariTOON May 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cjs/dom/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class DOMParser {
else if (mimeType === 'image/svg+xml')
document = new SVGDocument;
else
document = new XMLDocument;
document = new XMLDocument(mimeType);
document[DOM_PARSER] = DOMParser;
if (globals)
document[GLOBALS] = globals;
Expand Down
2 changes: 1 addition & 1 deletion cjs/interface/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ class Element extends ParentNode {
const start = next[START];
if (isOpened) {
if ('ownerSVGElement' in start)
out.push(' />');
out.push('/>');
else if (isVoid(start))
out.push(ignoreCase(start) ? '>' : ' />');
else
Expand Down
2 changes: 1 addition & 1 deletion cjs/shared/mime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Mime = {
'application/xhtml+xml': {
docType: '<?xml version="1.0" encoding="utf-8"?>',
ignoreCase: false,
voidElements
voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/
}
};
exports.Mime = Mime;
2 changes: 1 addition & 1 deletion cjs/xml/document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const {Document} = require('../interface/document.js');
* @implements globalThis.XMLDocument
*/
class XMLDocument extends Document {
constructor() { super('text/xml'); }
constructor(mimeType = 'text/xml') { super(mimeType); }
toString() {
return this[MIME].docType + super.toString();
}
Expand Down
2 changes: 1 addition & 1 deletion esm/dom/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class DOMParser {
else if (mimeType === 'image/svg+xml')
document = new SVGDocument;
else
document = new XMLDocument;
document = new XMLDocument(mimeType);
document[DOM_PARSER] = DOMParser;
if (globals)
document[GLOBALS] = globals;
Expand Down
2 changes: 1 addition & 1 deletion esm/interface/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ export class Element extends ParentNode {
const start = next[START];
if (isOpened) {
if ('ownerSVGElement' in start)
out.push(' />');
out.push('/>');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a breaking change for people generating JSX-like output for files to serve + it might play badly with non-quoted attributes as in <el test=123/> ... this is a bad idea and it doesn't solve any issue?

else if (isVoid(start))
out.push(ignoreCase(start) ? '>' : ' />');
else
Expand Down
2 changes: 1 addition & 1 deletion esm/shared/mime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ export const Mime = {
'application/xhtml+xml': {
docType: '<?xml version="1.0" encoding="utf-8"?>',
ignoreCase: false,
voidElements
voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it misses a i I suppose but I don't understand why this is needed

}
};
2 changes: 1 addition & 1 deletion esm/xml/document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {Document} from '../interface/document.js';
* @implements globalThis.XMLDocument
*/
export class XMLDocument extends Document {
constructor() { super('text/xml'); }
constructor(mimeType = 'text/xml') { super(mimeType); }
toString() {
return this[MIME].docType + super.toString();
}
Expand Down
2 changes: 1 addition & 1 deletion test/shared/parse-json.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ let div = parseJSON('[1,"div",1,"svg",1,"rect",-2,1,"c-e",-2]');

assert(JSON.stringify(toJSON(div)), '[1,"div",1,"svg",1,"rect",-2,1,"c-e",-2]');

assert(div.toString(), '<div><svg><rect /></svg><c-e></c-e></div>');
assert(div.toString(), '<div><svg><rect/></svg><c-e></c-e></div>');

assert(div.querySelector('c-e').constructed, void 0, 'not constructed');

Expand Down
8 changes: 4 additions & 4 deletions test/svg/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ assert(svg instanceof SVGElement, true, '<svg> is an instance of a facade');
assert('ownerSVGElement' in svg, true, '<svg> ownerSVGElement');
assert(svg.ownerSVGElement, null, '<svg> ownerSVGElement is null');
assert(svg.firstChild.ownerSVGElement, svg, '<rect> has an ownerSVGElement');
assert(document.toString(), '<div><svg><rect /></svg></div>', 'svg nodes are OK');
assert(document.documentElement.cloneNode(true).outerHTML, '<div><svg><rect /></svg></div>', 'svg cloned');
assert(document.toString(), '<div><svg><rect/></svg></div>', 'svg nodes are OK');
assert(document.documentElement.cloneNode(true).outerHTML, '<div><svg><rect/></svg></div>', 'svg cloned');

assert(JSON.stringify(document), '[9,1,"div",1,"svg",1,"rect",-4]');
assert(JSON.stringify(svg), '[1,"svg",1,"rect",-2]');
Expand All @@ -39,11 +39,11 @@ assert(svg.className.what, 'ever', '<svg>.className');
svg.setAttribute('test', 123);
svg.setAttribute('style', 'width:100px');

assert(svg.toString(), '<svg style="width:100px" test="123"><rect /></svg>');
assert(svg.toString(), '<svg style="width:100px" test="123"><rect/></svg>');

svg.className = 'a b c';
assert(svg.getAttribute('class'), 'a b c');

svg.setAttribute('class', 'd e');
assert(svg.getAttribute('class'), 'd e');
assert(svg.namespaceURI, 'http://www.w3.org/2000/svg');
assert(svg.namespaceURI, 'http://www.w3.org/2000/svg');
4 changes: 2 additions & 2 deletions test/worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@ import createAssert from './assert-es.js';

const assert = createAssert.for('Web Worker');

let {document} = parseHTML('<div><svg><rect /></svg></div>');
let {document} = parseHTML('<div><svg><rect/></svg></div>');

assert(document.querySelector('div').firstChild.localName, 'svg', 'Should be an svg element in the div');
assert(document.querySelector('div').firstChild.localName, 'svg', 'Should be an svg element in the div');
4 changes: 1 addition & 3 deletions types/esm/shared/mime.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ export const Mime: {
'application/xhtml+xml': {
docType: string;
ignoreCase: boolean;
voidElements: {
test: () => boolean;
};
voidElements: RegExp;
};
};
2 changes: 1 addition & 1 deletion types/esm/xml/document.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
* @implements globalThis.XMLDocument
*/
export class XMLDocument extends Document implements globalThis.XMLDocument {
constructor();
constructor(mimeType?: string);
}
import { Document } from '../interface/document.js';
8 changes: 4 additions & 4 deletions worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8046,7 +8046,7 @@ let Element$1 = class Element extends ParentNode {
const start = next[START];
if (isOpened) {
if ('ownerSVGElement' in start)
out.push(' />');
out.push('/>');
else if (isVoid(start))
out.push(ignoreCase(start) ? '>' : ' />');
else
Expand Down Expand Up @@ -11992,7 +11992,7 @@ const Mime = {
'application/xhtml+xml': {
docType: '<?xml version="1.0" encoding="utf-8"?>',
ignoreCase: false,
voidElements
voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/
}
};

Expand Down Expand Up @@ -12578,7 +12578,7 @@ class SVGDocument extends Document$1 {
* @implements globalThis.XMLDocument
*/
class XMLDocument extends Document$1 {
constructor() { super('text/xml'); }
constructor(mimeType = 'text/xml') { super(mimeType); }
toString() {
return this[MIME].docType + super.toString();
}
Expand All @@ -12605,7 +12605,7 @@ class DOMParser {
else if (mimeType === 'image/svg+xml')
document = new SVGDocument;
else
document = new XMLDocument;
document = new XMLDocument(mimeType);
document[DOM_PARSER] = DOMParser;
if (globals)
document[GLOBALS] = globals;
Expand Down