You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
5.3 KiB
190 lines
5.3 KiB
/* |
|
* Module dependencies |
|
*/ |
|
import * as ElementType from "domelementtype"; |
|
import { encodeXML, escapeAttribute, escapeText } from "entities"; |
|
/** |
|
* Mixed-case SVG and MathML tags & attributes |
|
* recognized by the HTML parser. |
|
* |
|
* @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inforeign |
|
*/ |
|
import { elementNames, attributeNames } from "./foreignNames.js"; |
|
const unencodedElements = new Set([ |
|
"style", |
|
"script", |
|
"xmp", |
|
"iframe", |
|
"noembed", |
|
"noframes", |
|
"plaintext", |
|
"noscript", |
|
]); |
|
function replaceQuotes(value) { |
|
return value.replace(/"/g, """); |
|
} |
|
/** |
|
* Format attributes |
|
*/ |
|
function formatAttributes(attributes, opts) { |
|
var _a; |
|
if (!attributes) |
|
return; |
|
const encode = ((_a = opts.encodeEntities) !== null && _a !== void 0 ? _a : opts.decodeEntities) === false |
|
? replaceQuotes |
|
: opts.xmlMode || opts.encodeEntities !== "utf8" |
|
? encodeXML |
|
: escapeAttribute; |
|
return Object.keys(attributes) |
|
.map((key) => { |
|
var _a, _b; |
|
const value = (_a = attributes[key]) !== null && _a !== void 0 ? _a : ""; |
|
if (opts.xmlMode === "foreign") { |
|
/* Fix up mixed-case attribute names */ |
|
key = (_b = attributeNames.get(key)) !== null && _b !== void 0 ? _b : key; |
|
} |
|
if (!opts.emptyAttrs && !opts.xmlMode && value === "") { |
|
return key; |
|
} |
|
return `${key}="${encode(value)}"`; |
|
}) |
|
.join(" "); |
|
} |
|
/** |
|
* Self-enclosing tags |
|
*/ |
|
const singleTag = new Set([ |
|
"area", |
|
"base", |
|
"basefont", |
|
"br", |
|
"col", |
|
"command", |
|
"embed", |
|
"frame", |
|
"hr", |
|
"img", |
|
"input", |
|
"isindex", |
|
"keygen", |
|
"link", |
|
"meta", |
|
"param", |
|
"source", |
|
"track", |
|
"wbr", |
|
]); |
|
/** |
|
* Renders a DOM node or an array of DOM nodes to a string. |
|
* |
|
* Can be thought of as the equivalent of the `outerHTML` of the passed node(s). |
|
* |
|
* @param node Node to be rendered. |
|
* @param options Changes serialization behavior |
|
*/ |
|
export function render(node, options = {}) { |
|
const nodes = "length" in node ? node : [node]; |
|
let output = ""; |
|
for (let i = 0; i < nodes.length; i++) { |
|
output += renderNode(nodes[i], options); |
|
} |
|
return output; |
|
} |
|
export default render; |
|
function renderNode(node, options) { |
|
switch (node.type) { |
|
case ElementType.Root: |
|
return render(node.children, options); |
|
// @ts-expect-error We don't use `Doctype` yet |
|
case ElementType.Doctype: |
|
case ElementType.Directive: |
|
return renderDirective(node); |
|
case ElementType.Comment: |
|
return renderComment(node); |
|
case ElementType.CDATA: |
|
return renderCdata(node); |
|
case ElementType.Script: |
|
case ElementType.Style: |
|
case ElementType.Tag: |
|
return renderTag(node, options); |
|
case ElementType.Text: |
|
return renderText(node, options); |
|
} |
|
} |
|
const foreignModeIntegrationPoints = new Set([ |
|
"mi", |
|
"mo", |
|
"mn", |
|
"ms", |
|
"mtext", |
|
"annotation-xml", |
|
"foreignObject", |
|
"desc", |
|
"title", |
|
]); |
|
const foreignElements = new Set(["svg", "math"]); |
|
function renderTag(elem, opts) { |
|
var _a; |
|
// Handle SVG / MathML in HTML |
|
if (opts.xmlMode === "foreign") { |
|
/* Fix up mixed-case element names */ |
|
elem.name = (_a = elementNames.get(elem.name)) !== null && _a !== void 0 ? _a : elem.name; |
|
/* Exit foreign mode at integration points */ |
|
if (elem.parent && |
|
foreignModeIntegrationPoints.has(elem.parent.name)) { |
|
opts = { ...opts, xmlMode: false }; |
|
} |
|
} |
|
if (!opts.xmlMode && foreignElements.has(elem.name)) { |
|
opts = { ...opts, xmlMode: "foreign" }; |
|
} |
|
let tag = `<${elem.name}`; |
|
const attribs = formatAttributes(elem.attribs, opts); |
|
if (attribs) { |
|
tag += ` ${attribs}`; |
|
} |
|
if (elem.children.length === 0 && |
|
(opts.xmlMode |
|
? // In XML mode or foreign mode, and user hasn't explicitly turned off self-closing tags |
|
opts.selfClosingTags !== false |
|
: // User explicitly asked for self-closing tags, even in HTML mode |
|
opts.selfClosingTags && singleTag.has(elem.name))) { |
|
if (!opts.xmlMode) |
|
tag += " "; |
|
tag += "/>"; |
|
} |
|
else { |
|
tag += ">"; |
|
if (elem.children.length > 0) { |
|
tag += render(elem.children, opts); |
|
} |
|
if (opts.xmlMode || !singleTag.has(elem.name)) { |
|
tag += `</${elem.name}>`; |
|
} |
|
} |
|
return tag; |
|
} |
|
function renderDirective(elem) { |
|
return `<${elem.data}>`; |
|
} |
|
function renderText(elem, opts) { |
|
var _a; |
|
let data = elem.data || ""; |
|
// If entities weren't decoded, no need to encode them back |
|
if (((_a = opts.encodeEntities) !== null && _a !== void 0 ? _a : opts.decodeEntities) !== false && |
|
!(!opts.xmlMode && |
|
elem.parent && |
|
unencodedElements.has(elem.parent.name))) { |
|
data = |
|
opts.xmlMode || opts.encodeEntities !== "utf8" |
|
? encodeXML(data) |
|
: escapeText(data); |
|
} |
|
return data; |
|
} |
|
function renderCdata(elem) { |
|
return `<![CDATA[${elem.children[0].data}]]>`; |
|
} |
|
function renderComment(elem) { |
|
return `<!--${elem.data}-->`; |
|
}
|
|
|