html-react-parser
Version:
HTML to React parser.
3,267 lines • 94.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
typeof define === 'function' && define.amd ? define(['react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HTMLReactParser = factory(global.React));
})(this, (function (require$$0) { 'use strict';
function _mergeNamespaces(n, m) {
m.forEach(function (e) {
e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
if (k !== 'default' && !(k in n)) {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
});
return Object.freeze(n);
}
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function getAugmentedNamespace(n) {
if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
var f = n.default;
if (typeof f == "function") {
var a = function a () {
var isInstance = false;
try {
isInstance = this instanceof a;
} catch (e) {}
if (isInstance) {
return Reflect.construct(f, arguments, this.constructor);
}
return f.apply(this, arguments);
};
a.prototype = f.prototype;
} else a = {};
Object.defineProperty(a, '__esModule', {value: true});
Object.keys(n).forEach(function (k) {
var d = Object.getOwnPropertyDescriptor(n, k);
Object.defineProperty(a, k, d.get ? d : {
enumerable: true,
get: function () {
return n[k];
}
});
});
return a;
}
var lib$1 = {};
var htmlToDom = {};
var utilities$1 = {};
var node = {};
var dist$2 = {};
var hasRequiredDist$1;
function requireDist$1 () {
if (hasRequiredDist$1) return dist$2;
hasRequiredDist$1 = 1;
(function (exports) {
//#region node_modules/domelementtype/dist/index.js
/** Types of elements found in htmlparser2's DOM */
var ElementType;
(function(ElementType) {
/** Type for the root element of a document */
ElementType["Root"] = "root";
/** Type for Text */
ElementType["Text"] = "text";
/** Type for <? ... ?> */
ElementType["Directive"] = "directive";
/** Type for <!-- ... --> */
ElementType["Comment"] = "comment";
/** Type for <script> tags */
ElementType["Script"] = "script";
/** Type for <style> tags */
ElementType["Style"] = "style";
/** Type for Any tag */
ElementType["Tag"] = "tag";
/** Type for <![CDATA[ ... ]]> */
ElementType["CDATA"] = "cdata";
/** Type for <!doctype ...> */
ElementType["Doctype"] = "doctype";
})(ElementType || (ElementType = {}));
/**
* Tests whether an element is a tag or not.
* @param element Element to test
* @param element.type Node type discriminator to check.
*/
function isTag(element) {
return element.type === ElementType.Tag || element.type === ElementType.Script || element.type === ElementType.Style;
}
ElementType.Root;
ElementType.Text;
ElementType.Directive;
ElementType.Comment;
ElementType.Script;
ElementType.Style;
ElementType.Tag;
ElementType.CDATA;
ElementType.Doctype;
//#endregion
Object.defineProperty(exports, "ElementType", {
enumerable: true,
get: function() {
return ElementType;
}
});
exports.isTag = isTag;
} (dist$2));
return dist$2;
}
var hasRequiredNode;
function requireNode () {
if (hasRequiredNode) return node;
hasRequiredNode = 1;
const require_index = requireDist$1();
//#region node_modules/domhandler/dist/node.js
/**
* This object will be used as the prototype for Nodes when creating a
* DOM-Level-1-compliant structure.
*/
var Node = class {
/** Parent of the node */
parent = null;
/** Previous sibling */
prev = null;
/** Next sibling */
next = null;
/** The start index of the node. Requires `withStartIndices` on the handler to be `true. */
startIndex = null;
/** The end index of the node. Requires `withEndIndices` on the handler to be `true. */
endIndex = null;
/**
* Same as {@link parent}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get parentNode() {
return this.parent;
}
set parentNode(parent) {
this.parent = parent;
}
/**
* Same as {@link prev}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get previousSibling() {
return this.prev;
}
set previousSibling(previous) {
this.prev = previous;
}
/**
* Same as {@link next}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get nextSibling() {
return this.next;
}
set nextSibling(next) {
this.next = next;
}
/**
* Clone this node, and optionally its children.
* @param recursive Clone child nodes as well.
* @returns A clone of the node.
*/
cloneNode(recursive = false) {
return cloneNode(this, recursive);
}
};
/**
* A node that contains some data.
*/
var DataNode = class extends Node {
data;
/**
* @param data The content of the data node
*/
constructor(data) {
super();
this.data = data;
}
/**
* Same as {@link data}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get nodeValue() {
return this.data;
}
set nodeValue(data) {
this.data = data;
}
};
/**
* Text within the document.
*/
var Text = class extends DataNode {
type = require_index.ElementType.Text;
get nodeType() {
return 3;
}
};
/**
* Comments within the document.
*/
var Comment = class extends DataNode {
type = require_index.ElementType.Comment;
get nodeType() {
return 8;
}
};
/**
* Processing instructions, including doc types.
*/
var ProcessingInstruction = class extends DataNode {
type = require_index.ElementType.Directive;
name;
constructor(name, data) {
super(data);
this.name = name;
}
get nodeType() {
return 1;
}
/** If this is a doctype, the document type name (parse5 only). */
"x-name";
/** If this is a doctype, the document type public identifier (parse5 only). */
"x-publicId";
/** If this is a doctype, the document type system identifier (parse5 only). */
"x-systemId";
};
/**
* A node that can have children.
*/
var NodeWithChildren = class extends Node {
children;
/**
* @param children Children of the node. Only certain node types can have children.
*/
constructor(children) {
super();
this.children = children;
}
/** First child of the node. */
get firstChild() {
return this.children[0] ?? null;
}
/** Last child of the node. */
get lastChild() {
return this.children.length > 0 ? this.children[this.children.length - 1] : null;
}
/**
* Same as {@link children}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get childNodes() {
return this.children;
}
set childNodes(children) {
this.children = children;
}
};
/**
* CDATA nodes.
*/
var CDATA = class extends NodeWithChildren {
type = require_index.ElementType.CDATA;
get nodeType() {
return 4;
}
};
/**
* The root node of the document.
*/
var Document = class extends NodeWithChildren {
type = require_index.ElementType.Root;
get nodeType() {
return 9;
}
};
/**
* An element within the DOM.
*/
var Element = class extends NodeWithChildren {
name;
attribs;
type;
/**
* @param name Name of the tag, eg. `div`, `span`.
* @param attribs Object mapping attribute names to attribute values.
* @param children Children of the node.
* @param type Node type used for the new node instance.
*/
constructor(name, attribs, children = [], type = name === "script" ? require_index.ElementType.Script : name === "style" ? require_index.ElementType.Style : require_index.ElementType.Tag) {
super(children);
this.name = name;
this.attribs = attribs;
this.type = type;
}
get nodeType() {
return 1;
}
/**
* Same as {@link name}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get tagName() {
return this.name;
}
set tagName(name) {
this.name = name;
}
get attributes() {
return Object.keys(this.attribs).map((name) => ({
name,
value: this.attribs[name],
namespace: this["x-attribsNamespace"]?.[name],
prefix: this["x-attribsPrefix"]?.[name]
}));
}
/** Element namespace (parse5 only). */
namespace;
/** Element attribute namespaces (parse5 only). */
"x-attribsNamespace";
/** Element attribute namespace-related prefixes (parse5 only). */
"x-attribsPrefix";
};
/**
* Checks if `node` is an element node.
* @param node Node to check.
* @returns `true` if the node is an element node.
*/
function isTag(node) {
return require_index.isTag(node);
}
/**
* Checks if `node` is a CDATA node.
* @param node Node to check.
* @returns `true` if the node is a CDATA node.
*/
function isCDATA(node) {
return node.type === require_index.ElementType.CDATA;
}
/**
* Checks if `node` is a text node.
* @param node Node to check.
* @returns `true` if the node is a text node.
*/
function isText(node) {
return node.type === require_index.ElementType.Text;
}
/**
* Checks if `node` is a comment node.
* @param node Node to check.
* @returns `true` if the node is a comment node.
*/
function isComment(node) {
return node.type === require_index.ElementType.Comment;
}
/**
* Checks if `node` is a directive node.
* @param node Node to check.
* @returns `true` if the node is a directive node.
*/
function isDirective(node) {
return node.type === require_index.ElementType.Directive;
}
/**
* Checks if `node` is a document node.
* @param node Node to check.
* @returns `true` if the node is a document node.
*/
function isDocument(node) {
return node.type === require_index.ElementType.Root;
}
/**
* Clone a node, and optionally its children.
* @param node Node to clone.
* @param recursive Clone child nodes as well.
* @returns A clone of the node.
*/
function cloneNode(node, recursive = false) {
let result;
if (isText(node)) result = new Text(node.data);
else if (isComment(node)) result = new Comment(node.data);
else if (isTag(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new Element(node.name, { ...node.attribs }, children);
for (const child of children) child.parent = clone;
if (node.namespace != null) clone.namespace = node.namespace;
if (node["x-attribsNamespace"]) clone["x-attribsNamespace"] = { ...node["x-attribsNamespace"] };
if (node["x-attribsPrefix"]) clone["x-attribsPrefix"] = { ...node["x-attribsPrefix"] };
result = clone;
} else if (isCDATA(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new CDATA(children);
for (const child of children) child.parent = clone;
result = clone;
} else if (isDocument(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new Document(children);
for (const child of children) child.parent = clone;
if (node["x-mode"]) clone["x-mode"] = node["x-mode"];
result = clone;
} else if (isDirective(node)) {
const instruction = new ProcessingInstruction(node.name, node.data);
if (node["x-name"] != null) {
instruction["x-name"] = node["x-name"];
instruction["x-publicId"] = node["x-publicId"];
instruction["x-systemId"] = node["x-systemId"];
}
result = instruction;
} else throw new Error(`Not implemented yet: ${node.type}`);
result.startIndex = node.startIndex;
result.endIndex = node.endIndex;
if (node.sourceCodeLocation != null) result.sourceCodeLocation = node.sourceCodeLocation;
return result;
}
/**
* Clone a list of child nodes.
* @param childs The child nodes to clone.
* @returns A list of cloned child nodes.
*/
function cloneChildren(childs) {
const children = childs.map((child) => cloneNode(child, true));
for (let index = 1; index < children.length; index++) {
children[index].prev = children[index - 1];
children[index - 1].next = children[index];
}
return children;
}
//#endregion
node.CDATA = CDATA;
node.Comment = Comment;
node.DataNode = DataNode;
node.Document = Document;
node.Element = Element;
node.Node = Node;
node.NodeWithChildren = NodeWithChildren;
node.ProcessingInstruction = ProcessingInstruction;
node.Text = Text;
node.cloneNode = cloneNode;
node.isCDATA = isCDATA;
node.isComment = isComment;
node.isDirective = isDirective;
node.isDocument = isDocument;
node.isTag = isTag;
node.isText = isText;
return node;
}
var constants = {};
var hasRequiredConstants;
function requireConstants () {
if (hasRequiredConstants) return constants;
hasRequiredConstants = 1;
//#region src/client/constants.ts
/**
* SVG elements are case-sensitive.
*
* @see https://developer.mozilla.org/docs/Web/SVG/Element#svg_elements_a_to_z
*/
const CASE_SENSITIVE_TAG_NAMES = [
"animateMotion",
"animateTransform",
"clipPath",
"feBlend",
"feColorMatrix",
"feComponentTransfer",
"feComposite",
"feConvolveMatrix",
"feDiffuseLighting",
"feDisplacementMap",
"feDropShadow",
"feFlood",
"feFuncA",
"feFuncB",
"feFuncG",
"feFuncR",
"feGaussianBlur",
"feImage",
"feMerge",
"feMergeNode",
"feMorphology",
"feOffset",
"fePointLight",
"feSpecularLighting",
"feSpotLight",
"feTile",
"feTurbulence",
"foreignObject",
"linearGradient",
"radialGradient",
"textPath"
];
const CASE_SENSITIVE_TAG_NAMES_MAP = CASE_SENSITIVE_TAG_NAMES.reduce((accumulator, tagName) => {
accumulator[tagName.toLowerCase()] = tagName;
return accumulator;
}, {});
//#endregion
constants.CASE_SENSITIVE_TAG_NAMES = CASE_SENSITIVE_TAG_NAMES;
constants.CASE_SENSITIVE_TAG_NAMES_MAP = CASE_SENSITIVE_TAG_NAMES_MAP;
return constants;
}
var hasRequiredUtilities$1;
function requireUtilities$1 () {
if (hasRequiredUtilities$1) return utilities$1;
hasRequiredUtilities$1 = 1;
const require_node = requireNode();
const require_constants = requireConstants();
//#region src/client/utilities.ts
const CARRIAGE_RETURN = "\r";
const CARRIAGE_RETURN_REGEX = new RegExp(CARRIAGE_RETURN, "g");
const CARRIAGE_RETURN_PLACEHOLDER = `__HTML_DOM_PARSER_CARRIAGE_RETURN_PLACEHOLDER_${Date.now().toString()}__`;
const CARRIAGE_RETURN_PLACEHOLDER_REGEX = new RegExp(CARRIAGE_RETURN_PLACEHOLDER, "g");
/**
* Gets case-sensitive tag name.
*
* @param tagName - Tag name in lowercase.
* @returns - Case-sensitive tag name.
*/
function getCaseSensitiveTagName(tagName) {
return require_constants.CASE_SENSITIVE_TAG_NAMES_MAP[tagName];
}
/**
* Formats DOM attributes to a hash map.
*
* @param attributes - List of attributes.
* @returns - Map of attribute name to value.
*/
function formatAttributes(attributes) {
const map = {};
let index = 0;
const attributesLength = attributes.length;
for (; index < attributesLength; index++) {
const attribute = attributes[index];
map[attribute.name] = attribute.value;
}
return map;
}
/**
* Corrects the tag name if it is case-sensitive (SVG).
* Otherwise, returns the lowercase tag name (HTML).
*
* @param tagName - Lowercase tag name.
* @returns - Formatted tag name.
*/
function formatTagName(tagName) {
tagName = tagName.toLowerCase();
const caseSensitiveTagName = getCaseSensitiveTagName(tagName);
if (caseSensitiveTagName) return caseSensitiveTagName;
return tagName;
}
/**
* Checks if an HTML string contains an opening tag (case-insensitive).
*
* @param html - HTML string.
* @param tagName - Tag name to search for (e.g., 'head' or 'body').
* @returns - Whether the tag is found.
*/
function hasOpenTag(html, tagName) {
const openTag = "<" + tagName;
const index = html.toLowerCase().indexOf(openTag);
if (index === -1) return false;
const char = html[index + openTag.length];
return char === ">" || char === " " || char === " " || char === "\n" || char === "\r" || char === "/";
}
/**
* Escapes special characters before parsing.
*
* @param html - The HTML string.
* @returns - HTML string with escaped special characters.
*/
function escapeSpecialCharacters(html) {
return html.replace(CARRIAGE_RETURN_REGEX, CARRIAGE_RETURN_PLACEHOLDER);
}
/**
* Reverts escaped special characters back to actual characters.
*
* @param text - The text with escaped characters.
* @returns - Text with escaped characters reverted.
*/
function revertEscapedCharacters(text) {
return text.replace(CARRIAGE_RETURN_PLACEHOLDER_REGEX, CARRIAGE_RETURN);
}
/**
* Transforms DOM nodes to `domhandler` nodes.
*
* @param nodes - DOM nodes.
* @param parent - Parent node.
* @param directive - Directive.
* @returns - Nodes.
*/
function formatDOM(nodes, parent = null, directive) {
const domNodes = [];
let current;
let index = 0;
const nodesLength = nodes.length;
for (; index < nodesLength; index++) {
const node = nodes[index];
switch (node.nodeType) {
case 1: {
const tagName = formatTagName(node.nodeName);
current = new require_node.Element(tagName, formatAttributes(node.attributes));
current.children = formatDOM(tagName === "template" ? node.content.childNodes : node.childNodes, current);
break;
}
/* v8 ignore start */
case 3:
current = new require_node.Text(revertEscapedCharacters(node.nodeValue ?? ""));
break;
case 8:
current = new require_node.Comment(node.nodeValue ?? "");
break;
/* v8 ignore stop */
default: continue;
}
const prev = domNodes[index - 1] ?? null;
if (prev) prev.next = current;
current.parent = parent;
current.prev = prev;
current.next = null;
domNodes.push(current);
}
if (directive) {
current = new require_node.ProcessingInstruction(directive.substring(0, directive.indexOf(" ")).toLowerCase(), directive);
current.next = domNodes[0] ?? null;
current.parent = parent;
domNodes.unshift(current);
if (domNodes[1]) domNodes[1].prev = domNodes[0];
}
return domNodes;
}
//#endregion
utilities$1.escapeSpecialCharacters = escapeSpecialCharacters;
utilities$1.formatDOM = formatDOM;
utilities$1.hasOpenTag = hasOpenTag;
utilities$1.revertEscapedCharacters = revertEscapedCharacters;
return utilities$1;
}
var domparser = {};
var hasRequiredDomparser;
function requireDomparser () {
if (hasRequiredDomparser) return domparser;
hasRequiredDomparser = 1;
const require_utilities = requireUtilities$1();
//#region src/client/domparser.ts
const HTML = "html";
const HEAD = "head";
const BODY = "body";
const FIRST_TAG_REGEX = /<([a-zA-Z]+[0-9]?)/;
function getHTMLForInnerHTML(html, trustedTypePolicy) {
return trustedTypePolicy ? trustedTypePolicy.createHTML(html) : html;
}
/* v8 ignore start */
let parseFromDocument = (html, tagName, trustedTypePolicy) => {
throw new Error("This browser does not support `document.implementation.createHTMLDocument`");
};
let parseFromString = (html, tagName, trustedTypePolicy) => {
throw new Error("This browser does not support `DOMParser.prototype.parseFromString`");
};
const DOMParser = typeof window === "object" && window.DOMParser;
/**
* DOMParser (performance: slow).
*
* @see https://developer.mozilla.org/docs/Web/API/DOMParser#Parsing_an_SVG_or_HTML_document
*/
if (typeof DOMParser === "function") {
const domParser = new DOMParser();
const mimeType = "text/html";
/**
* Creates an HTML document using `DOMParser.parseFromString`.
*
* @param html - The HTML string.
* @param tagName - The element to render the HTML (with 'body' as fallback).
* @returns - Document.
*/
parseFromString = (html, tagName, trustedTypePolicy) => {
if (tagName) html = `<${tagName}>${html}</${tagName}>`;
return domParser.parseFromString(html, mimeType);
};
parseFromDocument = parseFromString;
}
/**
* DOMImplementation (performance: fair).
*
* @see https://developer.mozilla.org/docs/Web/API/DOMImplementation/createHTMLDocument
*/
if (typeof document === "object" && document.implementation) {
const htmlDocument = document.implementation.createHTMLDocument();
/**
* Use HTML document created by `document.implementation.createHTMLDocument`.
*
* @param html - The HTML string.
* @param tagName - The element to render the HTML (with 'body' as fallback).
* @returns - Document
*/
parseFromDocument = function(html, tagName, trustedTypePolicy) {
if (tagName) {
const element = htmlDocument.documentElement.querySelector(tagName);
if (element) element.innerHTML = getHTMLForInnerHTML(html, trustedTypePolicy);
return htmlDocument;
}
htmlDocument.documentElement.innerHTML = getHTMLForInnerHTML(html, trustedTypePolicy);
return htmlDocument;
};
}
/**
* Template (performance: fast).
*
* @see https://developer.mozilla.org/docs/Web/HTML/Element/template
*/
const template = typeof document === "object" && document.createElement("template");
let parseFromTemplate;
if (template && template.content)
/**
* Uses a template element (content fragment) to parse HTML.
*
* @param html - HTML string.
* @returns - Nodes.
*/
parseFromTemplate = (html, trustedTypePolicy) => {
template.innerHTML = getHTMLForInnerHTML(html, trustedTypePolicy);
return template.content.childNodes;
};
const createNodeList = () => document.createDocumentFragment().childNodes;
/* v8 ignore stop */
/**
* Parses HTML string to DOM nodes.
*
* @param html - HTML markup.
* @param trustedTypePolicy - Trusted Types policy.
* @returns - DOM nodes.
*/
function domparser$1(html, trustedTypePolicy) {
html = require_utilities.escapeSpecialCharacters(html);
const firstTagName = FIRST_TAG_REGEX.exec(html)?.[1]?.toLowerCase();
switch (firstTagName) {
case HTML: {
const doc = parseFromString(html);
if (!require_utilities.hasOpenTag(html, HEAD)) {
const element = doc.querySelector(HEAD);
element?.parentNode?.removeChild(element);
}
if (!require_utilities.hasOpenTag(html, BODY)) {
const element = doc.querySelector(BODY);
element?.parentNode?.removeChild(element);
}
return doc.querySelectorAll(HTML);
}
case HEAD:
case BODY: {
const elements = parseFromDocument(html, void 0, trustedTypePolicy).querySelectorAll(firstTagName);
/* v8 ignore next */
if (require_utilities.hasOpenTag(html, BODY) && require_utilities.hasOpenTag(html, HEAD)) return elements[0].parentNode?.childNodes ?? createNodeList();
return elements;
}
/* v8 ignore start */
default:
if (parseFromTemplate) return parseFromTemplate(html, trustedTypePolicy);
return parseFromDocument(html, BODY, trustedTypePolicy).querySelector(BODY)?.childNodes ?? createNodeList();
}
}
//#endregion
domparser.default = domparser$1;
domparser.getHTMLForInnerHTML = getHTMLForInnerHTML;
return domparser;
}
var hasRequiredHtmlToDom;
function requireHtmlToDom () {
if (hasRequiredHtmlToDom) return htmlToDom;
hasRequiredHtmlToDom = 1;
(function (exports) {
Object.defineProperties(exports, {
__esModule: { value: true },
[Symbol.toStringTag]: { value: "Module" }
});
const require_utilities = requireUtilities$1();
const require_domparser = requireDomparser();
//#region src/client/html-to-dom.ts
const DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/;
/**
* Parses HTML string to DOM nodes in browser.
*
* @param html - HTML markup.
* @param options - Parser options.
* @returns - DOM elements.
*/
function HTMLDOMParser(html, options) {
if (typeof html !== "string") throw new TypeError("First argument must be a string");
if (!html) return [];
const match = DIRECTIVE_REGEX.exec(html);
const directive = match ? match[1] : void 0;
return require_utilities.formatDOM(require_domparser.default(html, options?.trustedTypePolicy), null, directive);
}
//#endregion
exports.default = HTMLDOMParser;
} (htmlToDom));
return htmlToDom;
}
var attributesToProps = {};
var lib = {};
var possibleStandardNamesOptimized = {};
var hasRequiredPossibleStandardNamesOptimized;
function requirePossibleStandardNamesOptimized () {
if (hasRequiredPossibleStandardNamesOptimized) return possibleStandardNamesOptimized;
hasRequiredPossibleStandardNamesOptimized = 1;
// An attribute in which the DOM/SVG standard name is the same as the React prop name (e.g., 'accept').
var SAME = 0;
possibleStandardNamesOptimized.SAME = SAME;
// An attribute in which the React prop name is the camelcased version of the DOM/SVG standard name (e.g., 'acceptCharset').
var CAMELCASE = 1;
possibleStandardNamesOptimized.CAMELCASE = CAMELCASE;
possibleStandardNamesOptimized.possibleStandardNames = {
accept: 0,
acceptCharset: 1,
'accept-charset': 'acceptCharset',
accessKey: 1,
action: 0,
allowFullScreen: 1,
alt: 0,
as: 0,
async: 0,
autoCapitalize: 1,
autoComplete: 1,
autoCorrect: 1,
autoFocus: 1,
autoPlay: 1,
autoSave: 1,
capture: 0,
cellPadding: 1,
cellSpacing: 1,
challenge: 0,
charSet: 1,
checked: 0,
children: 0,
cite: 0,
class: 'className',
classID: 1,
className: 1,
cols: 0,
colSpan: 1,
content: 0,
contentEditable: 1,
contextMenu: 1,
controls: 0,
controlsList: 1,
coords: 0,
crossOrigin: 1,
dangerouslySetInnerHTML: 1,
data: 0,
dateTime: 1,
default: 0,
defaultChecked: 1,
defaultValue: 1,
defer: 0,
dir: 0,
disabled: 0,
disablePictureInPicture: 1,
disableRemotePlayback: 1,
download: 0,
draggable: 0,
encType: 1,
enterKeyHint: 1,
for: 'htmlFor',
form: 0,
formMethod: 1,
formAction: 1,
formEncType: 1,
formNoValidate: 1,
formTarget: 1,
frameBorder: 1,
headers: 0,
height: 0,
hidden: 0,
high: 0,
href: 0,
hrefLang: 1,
htmlFor: 1,
httpEquiv: 1,
'http-equiv': 'httpEquiv',
icon: 0,
id: 0,
innerHTML: 1,
inputMode: 1,
integrity: 0,
is: 0,
itemID: 1,
itemProp: 1,
itemRef: 1,
itemScope: 1,
itemType: 1,
keyParams: 1,
keyType: 1,
kind: 0,
label: 0,
lang: 0,
list: 0,
loop: 0,
low: 0,
manifest: 0,
marginWidth: 1,
marginHeight: 1,
max: 0,
maxLength: 1,
media: 0,
mediaGroup: 1,
method: 0,
min: 0,
minLength: 1,
multiple: 0,
muted: 0,
name: 0,
noModule: 1,
nonce: 0,
noValidate: 1,
open: 0,
optimum: 0,
pattern: 0,
placeholder: 0,
playsInline: 1,
poster: 0,
preload: 0,
profile: 0,
radioGroup: 1,
readOnly: 1,
referrerPolicy: 1,
rel: 0,
required: 0,
reversed: 0,
role: 0,
rows: 0,
rowSpan: 1,
sandbox: 0,
scope: 0,
scoped: 0,
scrolling: 0,
seamless: 0,
selected: 0,
shape: 0,
size: 0,
sizes: 0,
span: 0,
spellCheck: 1,
src: 0,
srcDoc: 1,
srcLang: 1,
srcSet: 1,
start: 0,
step: 0,
style: 0,
summary: 0,
tabIndex: 1,
target: 0,
title: 0,
type: 0,
useMap: 1,
value: 0,
width: 0,
wmode: 0,
wrap: 0,
about: 0,
accentHeight: 1,
'accent-height': 'accentHeight',
accumulate: 0,
additive: 0,
alignmentBaseline: 1,
'alignment-baseline': 'alignmentBaseline',
allowReorder: 1,
alphabetic: 0,
amplitude: 0,
arabicForm: 1,
'arabic-form': 'arabicForm',
ascent: 0,
attributeName: 1,
attributeType: 1,
autoReverse: 1,
azimuth: 0,
baseFrequency: 1,
baselineShift: 1,
'baseline-shift': 'baselineShift',
baseProfile: 1,
bbox: 0,
begin: 0,
bias: 0,
by: 0,
calcMode: 1,
capHeight: 1,
'cap-height': 'capHeight',
clip: 0,
clipPath: 1,
'clip-path': 'clipPath',
clipPathUnits: 1,
clipRule: 1,
'clip-rule': 'clipRule',
color: 0,
colorInterpolation: 1,
'color-interpolation': 'colorInterpolation',
colorInterpolationFilters: 1,
'color-interpolation-filters': 'colorInterpolationFilters',
colorProfile: 1,
'color-profile': 'colorProfile',
colorRendering: 1,
'color-rendering': 'colorRendering',
contentScriptType: 1,
contentStyleType: 1,
cursor: 0,
cx: 0,
cy: 0,
d: 0,
datatype: 0,
decelerate: 0,
descent: 0,
diffuseConstant: 1,
direction: 0,
display: 0,
divisor: 0,
dominantBaseline: 1,
'dominant-baseline': 'dominantBaseline',
dur: 0,
dx: 0,
dy: 0,
edgeMode: 1,
elevation: 0,
enableBackground: 1,
'enable-background': 'enableBackground',
end: 0,
exponent: 0,
externalResourcesRequired: 1,
fill: 0,
fillOpacity: 1,
'fill-opacity': 'fillOpacity',
fillRule: 1,
'fill-rule': 'fillRule',
filter: 0,
filterRes: 1,
filterUnits: 1,
floodOpacity: 1,
'flood-opacity': 'floodOpacity',
floodColor: 1,
'flood-color': 'floodColor',
focusable: 0,
fontFamily: 1,
'font-family': 'fontFamily',
fontSize: 1,
'font-size': 'fontSize',
fontSizeAdjust: 1,
'font-size-adjust': 'fontSizeAdjust',
fontStretch: 1,
'font-stretch': 'fontStretch',
fontStyle: 1,
'font-style': 'fontStyle',
fontVariant: 1,
'font-variant': 'fontVariant',
fontWeight: 1,
'font-weight': 'fontWeight',
format: 0,
from: 0,
fx: 0,
fy: 0,
g1: 0,
g2: 0,
glyphName: 1,
'glyph-name': 'glyphName',
glyphOrientationHorizontal: 1,
'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
glyphOrientationVertical: 1,
'glyph-orientation-vertical': 'glyphOrientationVertical',
glyphRef: 1,
gradientTransform: 1,
gradientUnits: 1,
hanging: 0,
horizAdvX: 1,
'horiz-adv-x': 'horizAdvX',
horizOriginX: 1,
'horiz-origin-x': 'horizOriginX',
ideographic: 0,
imageRendering: 1,
'image-rendering': 'imageRendering',
in2: 0,
in: 0,
inlist: 0,
intercept: 0,
k1: 0,
k2: 0,
k3: 0,
k4: 0,
k: 0,
kernelMatrix: 1,
kernelUnitLength: 1,
kerning: 0,
keyPoints: 1,
keySplines: 1,
keyTimes: 1,
lengthAdjust: 1,
letterSpacing: 1,
'letter-spacing': 'letterSpacing',
lightingColor: 1,
'lighting-color': 'lightingColor',
limitingConeAngle: 1,
local: 0,
markerEnd: 1,
'marker-end': 'markerEnd',
markerHeight: 1,
markerMid: 1,
'marker-mid': 'markerMid',
markerStart: 1,
'marker-start': 'markerStart',
markerUnits: 1,
markerWidth: 1,
mask: 0,
maskContentUnits: 1,
maskUnits: 1,
mathematical: 0,
mode: 0,
numOctaves: 1,
offset: 0,
opacity: 0,
operator: 0,
order: 0,
orient: 0,
orientation: 0,
origin: 0,
overflow: 0,
overlinePosition: 1,
'overline-position': 'overlinePosition',
overlineThickness: 1,
'overline-thickness': 'overlineThickness',
paintOrder: 1,
'paint-order': 'paintOrder',
panose1: 0,
'panose-1': 'panose1',
pathLength: 1,
patternContentUnits: 1,
patternTransform: 1,
patternUnits: 1,
pointerEvents: 1,
'pointer-events': 'pointerEvents',
points: 0,
pointsAtX: 1,
pointsAtY: 1,
pointsAtZ: 1,
prefix: 0,
preserveAlpha: 1,
preserveAspectRatio: 1,
primitiveUnits: 1,
property: 0,
r: 0,
radius: 0,
refX: 1,
refY: 1,
renderingIntent: 1,
'rendering-intent': 'renderingIntent',
repeatCount: 1,
repeatDur: 1,
requiredExtensions: 1,
requiredFeatures: 1,
resource: 0,
restart: 0,
result: 0,
results: 0,
rotate: 0,
rx: 0,
ry: 0,
scale: 0,
security: 0,
seed: 0,
shapeRendering: 1,
'shape-rendering': 'shapeRendering',
slope: 0,
spacing: 0,
specularConstant: 1,
specularExponent: 1,
speed: 0,
spreadMethod: 1,
startOffset: 1,
stdDeviation: 1,
stemh: 0,
stemv: 0,
stitchTiles: 1,
stopColor: 1,
'stop-color': 'stopColor',
stopOpacity: 1,
'stop-opacity': 'stopOpacity',
strikethroughPosition: 1,
'strikethrough-position': 'strikethroughPosition',
strikethroughThickness: 1,
'strikethrough-thickness': 'strikethroughThickness',
string: 0,
stroke: 0,
strokeDasharray: 1,
'stroke-dasharray': 'strokeDasharray',
strokeDashoffset: 1,
'stroke-dashoffset': 'strokeDashoffset',
strokeLinecap: 1,
'stroke-linecap': 'strokeLinecap',
strokeLinejoin: 1,
'stroke-linejoin': 'strokeLinejoin',
strokeMiterlimit: 1,
'stroke-miterlimit': 'strokeMiterlimit',
strokeWidth: 1,
'stroke-width': 'strokeWidth',
strokeOpacity: 1,
'stroke-opacity': 'strokeOpacity',
suppressContentEditableWarning: 1,
suppressHydrationWarning: 1,
surfaceScale: 1,
systemLanguage: 1,
tableValues: 1,
targetX: 1,
targetY: 1,
textAnchor: 1,
'text-anchor': 'textAnchor',
textDecoration: 1,
'text-decoration': 'textDecoration',
textLength: 1,
textRendering: 1,
'text-rendering': 'textRendering',
to: 0,
transform: 0,
typeof: 0,
u1: 0,
u2: 0,
underlinePosition: 1,
'underline-position': 'underlinePosition',
underlineThickness: 1,
'underline-thickness': 'underlineThickness',
unicode: 0,
unicodeBidi: 1,
'unicode-bidi': 'unicodeBidi',
unicodeRange: 1,
'unicode-range': 'unicodeRange',
unitsPerEm: 1,
'units-per-em': 'unitsPerEm',
unselectable: 0,
vAlphabetic: 1,
'v-alphabetic': 'vAlphabetic',
values: 0,
vectorEffect: 1,
'vector-effect': 'vectorEffect',
version: 0,
vertAdvY: 1,
'vert-adv-y': 'vertAdvY',
vertOriginX: 1,
'vert-origin-x': 'vertOriginX',
vertOriginY: 1,
'vert-origin-y': 'vertOriginY',
vHanging: 1,
'v-hanging': 'vHanging',
vIdeographic: 1,
'v-ideographic': 'vIdeographic',
viewBox: 1,
viewTarget: 1,
visibility: 0,
vMathematical: 1,
'v-mathematical': 'vMathematical',
vocab: 0,
widths: 0,
wordSpacing: 1,
'word-spacing': 'wordSpacing',
writingMode: 1,
'writing-mode': 'writingMode',
x1: 0,
x2: 0,
x: 0,
xChannelSelector: 1,
xHeight: 1,
'x-height': 'xHeight',
xlinkActuate: 1,
'xlink:actuate': 'xlinkActuate',
xlinkArcrole: 1,
'xlink:arcrole': 'xlinkArcrole',
xlinkHref: 1,
'xlink:href': 'xlinkHref',
xlinkRole: 1,
'xlink:role': 'xlinkRole',
xlinkShow: 1,
'xlink:show': 'xlinkShow',
xlinkTitle: 1,
'xlink:title': 'xlinkTitle',
xlinkType: 1,
'xlink:type': 'xlinkType',
xmlBase: 1,
'xml:base': 'xmlBase',
xmlLang: 1,
'xml:lang': 'xmlLang',
xmlns: 0,
'xml:space': 'xmlSpace',
xmlnsXlink: 1,
'xmlns:xlink': 'xmlnsXlink',
xmlSpace: 1,
y1: 0,
y2: 0,
y: 0,
yChannelSelector: 1,
z: 0,
zoomAndPan: 1
};
return possibleStandardNamesOptimized;
}
var hasRequiredLib$1;
function requireLib$1 () {
if (hasRequiredLib$1) return lib;
hasRequiredLib$1 = 1;
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
// A reserved attribute.
// It is handled by React separately and shouldn't be written to the DOM.
const RESERVED = 0;
// A simple string attribute.
// Attributes that aren't in the filter are presumed to have this type.
const STRING = 1;
// A string attribute that accepts booleans in React. In HTML, these are called
// "enumerated" attributes with "true" and "false" as possible values.
// When true, it should be set to a "true" string.
// When false, it should be set to a "false" string.
const BOOLEANISH_STRING = 2;
// A real boolean attribute.
// When true, it should be present (set either to an empty string or its name).
// When false, it should be omitted.
const BOOLEAN = 3;
// An attribute that can be used as a flag as well as with a value.
// When true, it should be present (set either to an empty string or its name).
// When false, it should be omitted.
// For any other value, should be present with that value.
const OVERLOADED_BOOLEAN = 4;
// An attribute that must be numeric or parse as a numeric.
// When falsy, it should be removed.
const NUMERIC = 5;
// An attribute that must be positive numeric or parse as a positive numeric.
// When falsy, it should be removed.
const POSITIVE_NUMERIC = 6;
function getPropertyInfo(name) {
return properties.hasOwnProperty(name) ? properties[name] : null;
}
function PropertyInfoRecord(
name,
type,
mustUseProperty,
attributeName,
attributeNamespace,
sanitizeURL,
removeEmptyString,
) {
this.acceptsBooleans =
type === BOOLEANISH_STRING ||
type === BOOLEAN ||
type === OVERLOADED_BOOLEAN;
this.attributeName = attributeName;
this.attributeNamespace = attributeNamespace;
this.mustUseProperty = mustUseProperty;
this.propertyName = name;
this.type = type;
this.sanitizeURL = sanitizeURL;
this.removeEmptyString = removeEmptyString;
}
// When adding attributes to this list, be sure to also add them to
// the `possibleStandardNames` module to ensure casing and incorrect
// name warnings.
const properties = {};
// These props are reserved by React. They shouldn't be written to the DOM.
const reservedProps = [
'children',
'dangerouslySetInnerHTML',
// TODO: This prevents the assignment of defaultValue to regular
// elements (not just inputs). Now that ReactDOMInput assigns to the
// defaultValue property -- do we need this?
'defaultValue',
'defaultChecked',
'innerHTML',
'suppressContentEditableWarning',
'suppressHydrationWarning',
'style',
];
reservedProps.forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
RESERVED,
false, // mustUseProperty
name, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// A few React string attributes have a different name.
// This is a mapping from React prop names to the attribute names.
[
['acceptCharset', 'accept-charset'],
['className', 'class'],
['htmlFor', 'for'],
['httpEquiv', 'http-equiv'],
].forEach(([name, attributeName]) => {
properties[name] = new PropertyInfoRecord(
name,
STRING,
false, // mustUseProperty
attributeName, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are "enumerated" HTML attributes that accept "true" and "false".
// In React, we let users pass `true` and `false` even though technically
// these aren't boolean attributes (they are coerced to strings).
['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
BOOLEANISH_STRING,
false, // mustUseProperty
name.toLowerCase(), // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are "enumerated" SVG attributes that accept "true" and "false".
// In React, we let users pass `true` and `false` even though technically
// these aren't boolean attributes (they are coerced to strings).
// Since these are SVG attributes, their attribute names are case-sensitive.
[
'autoReverse',
'externalResourcesRequired',
'focusable',
'preserveAlpha',
].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
BOOLEANISH_STRING,
false, // mustUseProperty
name, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are HTML boolean attributes.
[
'allowFullScreen',
'async',
// Note: there is a special case that prevents it from being written to the DOM
// on the client side because the browsers are inconsistent. Instead we call focus().
'autoFocus',
'autoPlay',
'controls',
'default',
'defer',
'disabled',
'disablePictureInPicture',
'disableRemotePlayback',
'formNoValidate',
'hidden',
'loop',
'noModule',
'noValidate',
'open',
'playsInline',
'readOnly',
'required',
'reversed',
'scoped',
'seamless',
// Microdata
'itemScope',
].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
BOOLEAN,
false, // mustUseProperty
name.toLowerCase(), // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are the few React props that we set as DOM properties
// rather than attributes. These are all booleans.
[
'checked',
// Note: `option.selected` is not updated if `select.multiple` is
// disabled with `removeAttribute`. We have special logic for handling this.
'multiple',
'muted',
'selected',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
BOOLEAN,
true, // mustUseProperty
name, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are HTML attributes that are "overloaded booleans": they behave like
// booleans, but can also accept a string value.
[
'capture',
'download',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
OVERLOADED_BOOLEAN,
false, // mustUseProperty
name, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are HTML attributes that must be positive numbers.
[
'cols',
'rows',
'size',
'span',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
POSITIVE_NUMERIC,
false, // mustUseProperty
name, // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These are HTML attributes that must be numbers.
['rowSpan', 'start'].forEach(name => {
properties[name] = new PropertyInfoRecord(
name,
NUMERIC,
false, // mustUseProperty
name.toLowerCase(), // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
const CAMELIZE = /[\-\:]([a-z])/g;
const capitalize = token => token[1].toUpperCase();
// This is a list of all SVG attributes that need special casing, namespacing,
// or boolean value assignment. Regular attributes that just accept strings
// and have the same names are omitted, just like in the HTML attribute filter.
// Some of these attributes can be hard to find. This list was created by
// scraping the MDN documentation.
[
'accent-height',
'alignment-baseline',
'arabic-form',
'baseline-shift',
'cap-height',
'clip-path',
'clip-rule',
'color-interpolation',
'color-interpolation-filters',
'color-profile',
'color-rendering',
'dominant-baseline',
'enable-background',
'fill-opacity',
'fill-rule',
'flood-color',
'flood-opacity',
'font-family',
'font-size',
'font-size-adjust',
'font-stretch',
'font-style',
'font-variant',
'font-weight',
'glyph-name',
'glyph-orientation-horizontal',
'glyph-orientation-vertical',
'horiz-adv-x',
'horiz-origin-x',
'image-rendering',
'letter-spacing',
'lighting-color',
'marker-end',
'marker-mid',
'marker-start',
'overline-position',
'overline-thickness',
'paint-order',
'panose-1',
'pointer-events',
'rendering-intent',
'shape-rendering',
'stop-color',
'stop-opacity',
'strikethrough-position',
'strikethrough-thickness',
'stroke-dasharray',
'stroke-dashoffset',
'stroke-linecap',
'stroke-linejoin',
'stroke-miterlimit',
'stroke-opacity',
'stroke-width',
'text-anchor',
'text-decoration',
'text-rendering',
'underline-position',
'underline-thickness',
'unicode-bidi',
'unicode-range',
'units-per-em',
'v-alphabetic',
'v-hanging',
'v-ideographic',
'v-mathematical',
'vector-effect',
'vert-adv-y',
'vert-origin-x',
'vert-origin-y',
'word-spacing',
'writing-mode',
'xmlns:xlink',
'x-height',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(attributeName => {
const name = attributeName.replace(CAMELIZE, capitalize);
properties[name] = new PropertyInfoRecord(
name,
STRING,
false, // mustUseProperty
attributeName,
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// String SVG attributes with the xlink namespace.
[
'xlink:actuate',
'xlink:arcrole',
'xlink:role',
'xlink:show',
'xlink:title',
'xlink:type',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(attributeName => {
const name = attributeName.replace(CAMELIZE, capitalize);
properties[name] = new PropertyInfoRecord(
name,
STRING,
false, // mustUseProperty
attributeName,
'http://www.w3.org/1999/xlink',
false, // sanitizeURL
false, // removeEmptyString
);
});
// String SVG attributes with the xml namespace.
[
'xml:base',
'xml:lang',
'xml:space',
// NOTE: if you add a camelCased prop to this list,
// you'll need to set attributeName to name.toLowerCase()
// instead in the assignment below.
].forEach(attributeName => {
const name = attributeName.replace(CAMELIZE, capitalize);
properties[name] = new PropertyInfoRecord(
name,
STRING,
false, // mustUseProperty
attributeName,
'http://www.w3.org/XML/1998/namespace',
false, // sanitizeURL
false, // removeEmptyString
);
});
// These attribute exists both in HTML and SVG.
// The attribute name is case-sensitive in SVG so we can't just use
// the React name like we do for attributes that exist only in HTML.
['tabIndex', 'crossOrigin'].forEach(attributeName => {
properties[attributeName] = new PropertyInfoRecord(
attributeName,
STRING,
false, // mustUseProperty
attributeName.toLowerCase(), // attributeName
null, // attributeNamespace
false, // sanitizeURL
false, // removeEmptyString
);
});
// These attributes accept URLs. These must not allow javascript: URLS.
// These will also need to accept Trusted Types object in the future.
const xlinkHref = 'xlinkHref';
properties[xlinkHref] = new PropertyInfoRecord(
'xlinkHref',
STRING,
false, // mustUseProperty
'xlink:href',
'http://www.w3.org/1999/xlink',
true, // sanitizeURL
false, // removeEmptyString
);
['src', 'href', 'action', 'formAction'].forEach(attributeName => {
properties[attributeName] = new PropertyInfoRecord(
attributeName,
STRING,
false, // mustUseProperty
attributeName.toLowerCase(), // attributeName
null, // attributeNamespace
true, // sanitizeURL
true, // removeEmptyString
);
});
//
const {
CAMELCASE,
SAME,
possibleStandardNames: possibleStandardNamesOptimized
} = requirePossibleStandardNamesOptimized();
const ATTRIBUTE_NAME_START_CHAR =
':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';
const ATTRIBUTE_NAME_CHAR =
ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
/**
* Checks whether a property name is a custom attribute.
*
* @see https://github.com/facebook/react/blob/15-stable/src/renderers/dom/shared/HTMLDOMPropertyConfig.js#L23-L25
*
* @type {(attribute: string) => boolean}
*/
const isCustomAttribute =
RegExp.prototype.test.bind(
// eslint-disable-next-line no-misleading-character-class
new RegExp('^(data|aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$')
);
/**
* @type {Record<string, string>}
*/
const possibleStandardNames = Object.keys(
possibleStandardNamesOptimized
).reduce((accumulator, standardName) => {
const propName = possibleStandardNamesOptimized[standardName];
if (propName === SAME) {
accumulator[standardName] = standardName;
} else if (propName === CAMELCASE) {
accumulator[standardName.toLowerCase()] = standardName;
} else {
accumulator[standardName] = propName;
}
return accumulator;
}, {});
lib.BOOLEAN = BOOLEAN;
lib.BOOLEANISH_STRING = BOOLEANISH_STRING;
lib.NUMERIC = NUMERIC;
lib.OVERLOADED_BOOLEAN = OVERLOADED_BOOLEAN;
lib.POSITIVE_NUMERIC = POSITIVE_NUMERIC;
lib.RESERVED = RESERVED;
lib.STRING = STRING;
lib.getPropertyInfo = getPropertyInfo;
lib.isCustomAttribute = isCustomAttribute;
lib.possibleStandardNames = possibleStandardNames;
return lib;
}
var utilities = {};
var cjs$1;
var hasRequiredCjs$1;
function requireCjs$1 () {
if (hasRequiredCjs$1) return cjs$1;
hasRequiredCjs$1 = 1;
// http://www.w3.org/TR/CSS21/grammar.html
// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
var COMMENT_REGEX = /\/\*(?:[^*]|\*(?!\/))*\*\//g;
var NEWLINE_REGEX = /\n/g;
var WHITESPACE_REGEX = /^\s*/;
// declaration
var PROPERTY_REGEX = /^(\*?[-#/*\\\w]+(\[[0-9a-z_-]+\])?)\s*/;
var COLON_REGEX = /^:\s*/;
var VALUE_REGEX =
/^((?:'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|url\((?:'(?:\\.|[^'\\])*'|"(?:\\.|[^"\\])*"|[^)]*)\)|[^};])+)/;
var SEMICOLON_REGEX = /^[;\s]*/;
// strings
var NEWLINE = '\n';
var FORWARD_SLASH = '/';
var ASTERISK = '*';
var EMPTY_STRING = '';
// types
var TYPE_COMMENT = 'comment';
var TYPE_DECLARATION = 'declaration';
/**
* @param {String} style
* @param {Object} [options]
* @return {Object[]}
* @throws {TypeError}
* @throws {Error}
*/
function index (style, options) {
if (typeof style !== 'string') {
throw new TypeError('First argument must be a string');
}
if (!style) return [];
options = options || {};
/**
* Positional.
*/
var lineno = 1;
var column = 1;
/**
* Update lineno and column based on `str`.
*
* @param {String} str
*/
function updatePosition(str) {
var lines = str.match(NEWLINE_REGEX);
if (lines) lineno += lines.length;
var i = str.lastIndexOf(NEWLINE);
column = ~i ? str.length - i : column + str.length;
}
/**
* Mark position and patch `node.position`.
*
* @return {Function}
*/
function position() {
var start = { line: lineno, column: column };
return function (node) {
node.position = new Position(start);
whitespace();
return node;
};
}
/**
* Store position information for a node.
*
* @constructor
* @property {Object} start
* @property {Object} end
* @property {undefined|String} source
*/
function Position(start) {
this.start = start;
this.end = { line: lineno, column: column };
this.source = options.source;
}
/**
* Non-enumerable source string.
*/
Position.prototype.content = style;
/**
* Error `msg`.
*
* @param {String} msg
* @throws {Error}
*/
function error(msg) {
var err = new Error(
options.source + ':' + lineno + ':' + column + ': ' + msg
);
err.reason = msg;
err.filename = options.source;
err.line = lineno;
err.column = column;
err.source = style;
if (options.silent) ; else {
throw err;
}
}
/**
* Match `re` and return captures.
*
* @param {RegExp} re
* @return {undefined|Array}
*/
function match(re) {
var m = re.exec(style);
if (!m) return;
var str = m[0];
updatePosition(str);
style = style.slice(str.length);
return m;
}
/**
* Parse whitespace.
*/
function whitespace() {
match(WHITESPACE_REGEX);
}
/**
* Parse comments.
*
* @param {Object[]} rules
* @return {Object[]}
*/
function comments(rules) {
var c;
while ((c = comment())) {
rules.push(c);
}
return rules;
}
/**
* Parse comment.
*
* @return {Object}
* @throws {Error}
*/
function comment() {
var pos = position();
if (FORWARD_SLASH != style.charAt(0) || ASTERISK != style.charAt(1)) return;
var i = 2;
while (
EMPTY_STRING != style.charAt(i) &&
(ASTERISK != style.charAt(i) || FORWARD_SLASH != style.charAt(i + 1))
) {
++i;
}
i += 2;
if (EMPTY_STRING === style.charAt(i - 1)) {
return error('End of comment missing');
}
var str = style.slice(2, i - 2);
column += 2;
updatePosition(str);
style = style.slice(i);
column += 2;
return pos({
type: TYPE_COMMENT,
comment: str
});
}
/**
* Parse declaration.
*
* @return {Object}
* @throws {Error}
*/
function declaration() {
var pos = position();
// prop
var prop = match(PROPERTY_REGEX);
if (!prop) return;
comment();
// :
if (!match(COLON_REGEX)) return error("property missing ':'");
// val
var val = match(VALUE_REGEX);
var ret = pos({
type: TYPE_DECLARATION,
property: prop[0].replace(COMMENT_REGEX, EMPTY_STRING).trim(),
value: val
? val[0].replace(COMMENT_REGEX, EMPTY_STRING).trim()
: EMPTY_STRING
});
// ;
match(SEMICOLON_REGEX);
return ret;
}
/**
* Parse declarations.
*
* @return {Object[]}
*/
function declarations() {
var decls = [];
comments(decls);
// declarations
var decl;
while ((decl = declaration())) {
decls.push(decl);
comments(decls);
}
return decls;
}
whitespace();
return declarations();
}
cjs$1 = index;
return cjs$1;
}
var cjs;
var hasRequiredCjs;
function requireCjs () {
if (hasRequiredCjs) return cjs;
hasRequiredCjs = 1;
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
let inline_style_parser = requireCjs$1();
inline_style_parser = __toESM(inline_style_parser);
//#region src/index.ts
/**
* Parses inline style to object.
*
* @param style - Inline style.
* @param iterator - Iterator.
* @returns - Style object or null.
*
* @example Parsing inline style to object:
*
* ```js
* import parse from 'style-to-object';
* parse('line-height: 42;'); // { 'line-height': '42' }
* ```
*/
function StyleToObject(style, iterator) {
let styleObject = null;
if (!style || typeof style !== "string") return styleObject;
const declarations = (0, inline_style_parser.default)(style);
const hasIterator = typeof iterator === "function";
declarations.forEach((declaration) => {
if (declaration.type !== "declaration") return;
const { property, value } = declaration;
if (hasIterator) iterator(property, value, declaration);
else if (value) {
styleObject = styleObject ?? {};
styleObject[property] = value;
}
});
return styleObject;
}
//#endregion
cjs = StyleToObject;
return cjs;
}
var dist$1;
var hasRequiredDist;
function requireDist () {
if (hasRequiredDist) return dist$1;
hasRequiredDist = 1;
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(!mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
let style_to_object = requireCjs();
style_to_object = __toESM(style_to_object);
//#region src/utilities.ts
const CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9_-]+$/;
const HYPHEN_REGEX = /-([a-z])/g;
const NO_HYPHEN_REGEX = /^[^-]+$/;
const VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o|khtml)-/;
const MS_VENDOR_PREFIX_REGEX = /^-(ms)-/;
/**
* Checks whether to skip camelCase.
*/
const skipCamelCase = (property) => !property || NO_HYPHEN_REGEX.test(property) || CUSTOM_PROPERTY_REGEX.test(property);
/**
* Replacer that capitalizes first character.
*/
const capitalize = (match, character) => character.toUpperCase();
/**
* Replacer that removes beginning hyphen of vendor prefix property.
*/
const trimHyphen = (match, prefix) => `${prefix}-`;
/**
* CamelCases a CSS property.
*/
const camelCase = (property, options = {}) => {
if (skipCamelCase(property)) return property;
property = property.toLowerCase();
if (options.reactCompat) property = property.replace(MS_VENDOR_PREFIX_REGEX, trimHyphen);
else property = property.replace(VENDOR_PREFIX_REGEX, trimHyphen);
return property.replace(HYPHEN_REGEX, capitalize);
};
//#endregion
//#region src/index.ts
/**
* Parses CSS inline style to JavaScript object (camelCased).
*/
function StyleToJS(style, options) {
const output = {};
if (!style || typeof style !== "string") return output;
(0, style_to_object.default)(style, (property, value) => {
if (property && value) output[camelCase(property, options)] = value;
});
return output;
}
//#endregion
dist$1 = StyleToJS;
return dist$1;
}
var hasRequiredUtilities;
function requireUtilities () {
if (hasRequiredUtilities) return utilities;
hasRequiredUtilities = 1;
(function (exports) {
var __importDefault = (utilities && utilities.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.returnFirstArg = exports.canTextBeChildOfNode = exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = exports.PRESERVE_CUSTOM_ATTRIBUTES = void 0;
exports.isCustomComponent = isCustomComponent;
exports.setStyleProp = setStyleProp;
const react_1 = require$$0;
const style_to_js_1 = __importDefault(requireDist());
const RESERVED_SVG_MATHML_ELEMENTS = new Set([
'annotation-xml',
'color-profile',
'font-face',
'font-face-src',
'font-face-uri',
'font-face-format',
'font-face-name',
'missing-glyph',
]);
/**
* Check if a tag is a custom component.
*
* @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
*
* @param tagName - Tag name.
* @param props - Props passed to the element.
* @returns - Whether the tag is custom component.
*/
function isCustomComponent(tagName, props) {
if (!tagName.includes('-')) {
return Boolean(props && typeof props.is === 'string');
}
// These are reserved SVG and MathML elements.
// We don't mind this whitelist too much because we expect it to never grow.
// The alternative is to track the namespace in a few places which is convoluted.
// https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
return false;
}
return true;
}
const styleOptions = {
reactCompat: true,
};
/**
* Sets style prop.
*
* @param style - Inline style.
* @param props - Props object.
*/
function setStyleProp(style, props) {
if (typeof style !== 'string') {
return;
}
if (!style.trim()) {
props.style = {};
return;
}
try {
props.style = (0, style_to_js_1.default)(style, styleOptions);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
}
catch (error) {
props.style = {};
}
}
/**
* @see https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
*/
exports.PRESERVE_CUSTOM_ATTRIBUTES = Number(react_1.version.split('.')[0]) >= 16;
/**
* @see https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
*/
exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = new Set([
'tr',
'tbody',
'thead',
'tfoot',
'colgroup',
'table',
'head',
'html',
'frameset',
]);
/**
* Checks if the given node can contain text nodes
*
* @param node - Element node.
* @returns - Whether the node can contain text nodes.
*/
const canTextBeChildOfNode = (node) => !exports.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
exports.canTextBeChildOfNode = canTextBeChildOfNode;
/**
* Returns the first argument as is.
*
* @param arg - The argument to be returned.
* @returns - The input argument `arg`.
*/
const returnFirstArg = (arg) => arg;
exports.returnFirstArg = returnFirstArg;
} (utilities));
return utilities;
}
var hasRequiredAttributesToProps;
function requireAttributesToProps () {
if (hasRequiredAttributesToProps) return attributesToProps;
hasRequiredAttributesToProps = 1;
Object.defineProperty(attributesToProps, "__esModule", { value: true });
attributesToProps.default = attributesToProps$1;
const react_property_1 = requireLib$1();
const utilities_1 = requireUtilities();
// https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
// https://developer.mozilla.org/docs/Web/HTML/Attributes
const UNCONTROLLED_COMPONENT_ATTRIBUTES = ['checked', 'value'];
const UNCONTROLLED_COMPONENT_NAMES = ['input', 'select', 'textarea'];
const valueOnlyInputs = {
reset: true,
submit: true,
};
/**
* Converts HTML/SVG DOM attributes to React props.
*
* @param attributes - HTML/SVG DOM attributes.
* @param nodeName - DOM node name.
* @returns - React props.
*/
function attributesToProps$1(attributes = {}, nodeName) {
const props = {};
const isInputValueOnly = Boolean(attributes.type && valueOnlyInputs[attributes.type]);
for (const attributeName in attributes) {
const attributeValue = attributes[attributeName];
// ARIA (aria-*) or custom data (data-*) attribute
if ((0, react_property_1.isCustomAttribute)(attributeName)) {
props[attributeName] = attributeValue;
continue;
}
// convert HTML/SVG attribute to React prop
const attributeNameLowerCased = attributeName.toLowerCase();
let propName = getPropName(attributeNameLowerCased);
if (propName) {
const propertyInfo = (0, react_property_1.getPropertyInfo)(propName);
// convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
if (UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) &&
UNCONTROLLED_COMPONENT_NAMES.includes(nodeName) &&
!isInputValueOnly) {
propName = getPropName('default' + attributeNameLowerCased);
}
props[propName] = attributeValue;
switch (propertyInfo === null || propertyInfo === void 0 ? void 0 : propertyInfo.type) {
case react_property_1.BOOLEAN:
props[propName] = true;
break;
case react_property_1.OVERLOADED_BOOLEAN:
if (attributeValue === '') {
props[propName] = true;
}
break;
}
continue;
}
// preserve custom attribute if React >=16
if (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES) {
props[attributeName] = attributeValue;
}
}
// transform inline style to object
(0, utilities_1.setStyleProp)(attributes.style, props);
return props;
}
/**
* Gets prop name from lowercased attribute name.
*
* @param attributeName - Lowercased attribute name.
* @returns - Prop name.
*/
function getPropName(attributeName) {
return react_property_1.possibleStandardNames[attributeName];
}
return attributesToProps;
}
var domToReact = {};
/** Types of elements found in htmlparser2's DOM */
var ElementType;
(function (ElementType) {
/** Type for the root element of a document */
ElementType["Root"] = "root";
/** Type for Text */
ElementType["Text"] = "text";
/** Type for <? ... ?> */
ElementType["Directive"] = "directive";
/** Type for <!-- ... --> */
ElementType["Comment"] = "comment";
/** Type for <script> tags */
ElementType["Script"] = "script";
/** Type for <style> tags */
ElementType["Style"] = "style";
/** Type for Any tag */
ElementType["Tag"] = "tag";
/** Type for <![CDATA[ ... ]]> */
ElementType["CDATA"] = "cdata";
/** Type for <!doctype ...> */
ElementType["Doctype"] = "doctype";
})(ElementType || (ElementType = {}));
/**
* Tests whether an element is a tag or not.
* @param element Element to test
* @param element.type Node type discriminator to check.
*/
function isTag$1(element) {
return (element.type === ElementType.Tag ||
element.type === ElementType.Script ||
element.type === ElementType.Style);
}
// Exports for backwards compatibility
/** Type for the root element of a document */
// eslint-disable-next-line prefer-destructuring
ElementType.Root;
/** Type for Text */
// eslint-disable-next-line prefer-destructuring
ElementType.Text;
/** Type for <? ... ?> */
// eslint-disable-next-line prefer-destructuring
ElementType.Directive;
/** Type for <!-- ... --> */
// eslint-disable-next-line prefer-destructuring
ElementType.Comment;
/** Type for <script> tags */
// eslint-disable-next-line prefer-destructuring
ElementType.Script;
/** Type for <style> tags */
// eslint-disable-next-line prefer-destructuring
ElementType.Style;
/** Type for Any tag */
// eslint-disable-next-line prefer-destructuring
ElementType.Tag;
/** Type for <![CDATA[ ... ]]> */
// eslint-disable-next-line prefer-destructuring
ElementType.CDATA;
/** Type for <!doctype ...> */
// eslint-disable-next-line prefer-destructuring
ElementType.Doctype;
/**
* This object will be used as the prototype for Nodes when creating a
* DOM-Level-1-compliant structure.
*/
class Node {
/** Parent of the node */
parent = null;
/** Previous sibling */
prev = null;
/** Next sibling */
next = null;
/** The start index of the node. Requires `withStartIndices` on the handler to be `true. */
startIndex = null;
/** The end index of the node. Requires `withEndIndices` on the handler to be `true. */
endIndex = null;
// Read-write aliases for properties
/**
* Same as {@link parent}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get parentNode() {
return this.parent;
}
set parentNode(parent) {
this.parent = parent;
}
/**
* Same as {@link prev}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get previousSibling() {
return this.prev;
}
set previousSibling(previous) {
this.prev = previous;
}
/**
* Same as {@link next}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get nextSibling() {
return this.next;
}
set nextSibling(next) {
this.next = next;
}
/**
* Clone this node, and optionally its children.
* @param recursive Clone child nodes as well.
* @returns A clone of the node.
*/
cloneNode(recursive = false) {
return cloneNode(this, recursive);
}
}
/**
* A node that contains some data.
*/
class DataNode extends Node {
data;
/**
* @param data The content of the data node
*/
constructor(data) {
super();
this.data = data;
}
/**
* Same as {@link data}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get nodeValue() {
return this.data;
}
set nodeValue(data) {
this.data = data;
}
}
/**
* Text within the document.
*/
class Text extends DataNode {
type = ElementType.Text;
get nodeType() {
return 3;
}
}
/**
* Comments within the document.
*/
class Comment extends DataNode {
type = ElementType.Comment;
get nodeType() {
return 8;
}
}
/**
* Processing instructions, including doc types.
*/
class ProcessingInstruction extends DataNode {
type = ElementType.Directive;
name;
constructor(name, data) {
super(data);
this.name = name;
}
get nodeType() {
return 1;
}
/** If this is a doctype, the document type name (parse5 only). */
"x-name";
/** If this is a doctype, the document type public identifier (parse5 only). */
"x-publicId";
/** If this is a doctype, the document type system identifier (parse5 only). */
"x-systemId";
}
/**
* A node that can have children.
*/
class NodeWithChildren extends Node {
children;
/**
* @param children Children of the node. Only certain node types can have children.
*/
constructor(children) {
super();
this.children = children;
}
// Aliases
/** First child of the node. */
get firstChild() {
return this.children[0] ?? null;
}
/** Last child of the node. */
get lastChild() {
return this.children.length > 0
? this.children[this.children.length - 1]
: null;
}
/**
* Same as {@link children}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get childNodes() {
return this.children;
}
set childNodes(children) {
this.children = children;
}
}
/**
* CDATA nodes.
*/
class CDATA extends NodeWithChildren {
type = ElementType.CDATA;
get nodeType() {
return 4;
}
}
/**
* The root node of the document.
*/
class Document extends NodeWithChildren {
type = ElementType.Root;
get nodeType() {
return 9;
}
}
/**
* An element within the DOM.
*/
class Element extends NodeWithChildren {
name;
attribs;
type;
/**
* @param name Name of the tag, eg. `div`, `span`.
* @param attribs Object mapping attribute names to attribute values.
* @param children Children of the node.
* @param type Node type used for the new node instance.
*/
constructor(name, attribs, children = [], type = name === "script"
? ElementType.Script
: name === "style"
? ElementType.Style
: ElementType.Tag) {
super(children);
this.name = name;
this.attribs = attribs;
this.type = type;
}
get nodeType() {
return 1;
}
// DOM Level 1 aliases
/**
* Same as {@link name}.
* [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
*/
get tagName() {
return this.name;
}
set tagName(name) {
this.name = name;
}
get attributes() {
return Object.keys(this.attribs).map((name) => ({
name,
value: this.attribs[name],
namespace: this["x-attribsNamespace"]?.[name],
prefix: this["x-attribsPrefix"]?.[name],
}));
}
/** Element namespace (parse5 only). */
namespace;
/** Element attribute namespaces (parse5 only). */
"x-attribsNamespace";
/** Element attribute namespace-related prefixes (parse5 only). */
"x-attribsPrefix";
}
/**
* Checks if `node` is an element node.
* @param node Node to check.
* @returns `true` if the node is an element node.
*/
function isTag(node) {
return isTag$1(node);
}
/**
* Checks if `node` is a CDATA node.
* @param node Node to check.
* @returns `true` if the node is a CDATA node.
*/
function isCDATA(node) {
return node.type === ElementType.CDATA;
}
/**
* Checks if `node` is a text node.
* @param node Node to check.
* @returns `true` if the node is a text node.
*/
function isText(node) {
return node.type === ElementType.Text;
}
/**
* Checks if `node` is a comment node.
* @param node Node to check.
* @returns `true` if the node is a comment node.
*/
function isComment(node) {
return node.type === ElementType.Comment;
}
/**
* Checks if `node` is a directive node.
* @param node Node to check.
* @returns `true` if the node is a directive node.
*/
function isDirective(node) {
return node.type === ElementType.Directive;
}
/**
* Checks if `node` is a document node.
* @param node Node to check.
* @returns `true` if the node is a document node.
*/
function isDocument(node) {
return node.type === ElementType.Root;
}
/**
* Checks if `node` has children.
* @param node Node to check.
* @returns `true` if the node has children.
*/
function hasChildren(node) {
return Object.hasOwn(node, "children");
}
/**
* Clone a node, and optionally its children.
* @param node Node to clone.
* @param recursive Clone child nodes as well.
* @returns A clone of the node.
*/
function cloneNode(node, recursive = false) {
let result;
if (isText(node)) {
result = new Text(node.data);
}
else if (isComment(node)) {
result = new Comment(node.data);
}
else if (isTag(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new Element(node.name, { ...node.attribs }, children);
for (const child of children) {
child.parent = clone;
}
if (node.namespace != null) {
clone.namespace = node.namespace;
}
if (node["x-attribsNamespace"]) {
clone["x-attribsNamespace"] = { ...node["x-attribsNamespace"] };
}
if (node["x-attribsPrefix"]) {
clone["x-attribsPrefix"] = { ...node["x-attribsPrefix"] };
}
result = clone;
}
else if (isCDATA(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new CDATA(children);
for (const child of children) {
child.parent = clone;
}
result = clone;
}
else if (isDocument(node)) {
const children = recursive ? cloneChildren(node.children) : [];
const clone = new Document(children);
for (const child of children) {
child.parent = clone;
}
if (node["x-mode"]) {
clone["x-mode"] = node["x-mode"];
}
result = clone;
}
else if (isDirective(node)) {
const instruction = new ProcessingInstruction(node.name, node.data);
if (node["x-name"] != null) {
instruction["x-name"] = node["x-name"];
instruction["x-publicId"] = node["x-publicId"];
instruction["x-systemId"] = node["x-systemId"];
}
result = instruction;
}
else {
throw new Error(`Not implemented yet: ${node.type}`);
}
result.startIndex = node.startIndex;
result.endIndex = node.endIndex;
if (node.sourceCodeLocation != null) {
result.sourceCodeLocation = node.sourceCodeLocation;
}
return result;
}
/**
* Clone a list of child nodes.
* @param childs The child nodes to clone.
* @returns A list of cloned child nodes.
*/
function cloneChildren(childs) {
const children = childs.map((child) => cloneNode(child, true));
for (let index = 1; index < children.length; index++) {
children[index].prev = children[index - 1];
children[index - 1].next = children[index];
}
return children;
}
// Default options
const defaultOptions = {
withStartIndices: false,
withEndIndices: false,
xmlMode: false,
};
/**
* Event-based handler that builds a DOM tree from parser callbacks.
*/
class DomHandler {
/** The elements of the DOM */
dom = [];
/** The root element for the DOM */
root = new Document(this.dom);
/** Called once parsing has completed. */
callback;
/** Settings for the handler. */
options;
/** Callback whenever a tag is closed. */
elementCB;
/** Indicated whether parsing has been completed. */
done = false;
/** Stack of open tags. */
tagStack = [this.root];
/** A data node that is still being written to. */
lastNode = null;
/** Reference to the parser instance. Used for location information. */
parser = null;
/**
* @param callback Called once parsing has completed.
* @param options Settings for the handler.
* @param elementCB Callback whenever a tag is closed.
*/
constructor(callback, options, elementCB) {
// Make it possible to skip arguments, for backwards-compatibility
if (typeof options === "function") {
elementCB = options;
options = defaultOptions;
}
if (typeof callback === "object") {
options = callback;
callback = undefined;
}
this.callback = callback ?? null;
this.options = options ?? defaultOptions;
this.elementCB = elementCB ?? null;
}
onparserinit(parser) {
this.parser = parser;
}
// Resets the handler back to starting state
onreset() {
this.dom = [];
this.root = new Document(this.dom);
this.done = false;
this.tagStack = [this.root];
this.lastNode = null;
this.parser = null;
}
// Signals the handler that parsing is done
onend() {
if (this.done)
return;
this.done = true;
this.parser = null;
this.handleCallback(null);
}
onerror(error) {
this.handleCallback(error);
}
onclosetag() {
this.lastNode = null;
const element = this.tagStack.pop();
if (this.options.withEndIndices && this.parser) {
element.endIndex = this.parser.endIndex;
}
if (this.elementCB)
this.elementCB(element);
}
onopentag(name, attribs) {
const type = this.options.xmlMode ? ElementType.Tag : undefined;
const element = new Element(name, attribs, undefined, type);
this.addNode(element);
this.tagStack.push(element);
}
ontext(data) {
const { lastNode } = this;
if (lastNode && lastNode.type === ElementType.Text) {
lastNode.data += data;
if (this.options.withEndIndices && this.parser) {
lastNode.endIndex = this.parser.endIndex;
}
}
else {
const node = new Text(data);
this.addNode(node);
this.lastNode = node;
}
}
oncomment(data) {
if (this.lastNode && this.lastNode.type === ElementType.Comment) {
this.lastNode.data += data;
return;
}
const node = new Comment(data);
this.addNode(node);
this.lastNode = node;
}
oncommentend() {
this.lastNode = null;
}
oncdatastart() {
const text = new Text("");
const node = new CDATA([text]);
this.addNode(node);
text.parent = node;
this.lastNode = text;
}
oncdataend() {
this.lastNode = null;
}
onprocessinginstruction(name, data) {
const node = new ProcessingInstruction(name, data);
this.addNode(node);
}
handleCallback(error) {
if (typeof this.callback === "function") {
this.callback(error, this.dom);
}
else if (error) {
throw error;
}
}
addNode(node) {
const parent = this.tagStack[this.tagStack.length - 1];
const previousSibling = parent.children[parent.children.length - 1];
if (this.options.withStartIndices && this.parser) {
node.startIndex = this.parser.startIndex;
}
if (this.options.withEndIndices && this.parser) {
node.endIndex = this.parser.endIndex;
}
parent.children.push(node);
if (previousSibling) {
node.prev = previousSibling;
previousSibling.next = node;
}
node.parent = parent;
this.lastNode = null;
}
}
var dist = /*#__PURE__*/Object.freeze({
__proto__: null,
CDATA: CDATA,
Comment: Comment,
DataNode: DataNode,
Document: Document,
DomHandler: DomHandler,
Element: Element,
Node: Node,
NodeWithChildren: NodeWithChildren,
ProcessingInstruction: ProcessingInstruction,
Text: Text,
cloneNode: cloneNode,
default: DomHandler,
hasChildren: hasChildren,
isCDATA: isCDATA,
isComment: isComment,
isDirective: isDirective,
isDocument: isDocument,
isTag: isTag,
isText: isText
});
var require$$3 = /*@__PURE__*/getAugmentedNamespace(dist);
var hasRequiredDomToReact;
function requireDomToReact () {
if (hasRequiredDomToReact) return domToReact;
hasRequiredDomToReact = 1;
/* eslint-disable @typescript-eslint/no-unsafe-enum-comparison */
var __importDefault = (domToReact && domToReact.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(domToReact, "__esModule", { value: true });
domToReact.default = domToReact$1;
const domhandler_1 = require$$3;
const react_1 = require$$0;
const attributes_to_props_1 = __importDefault(requireAttributesToProps());
const utilities_1 = requireUtilities();
const React = {
cloneElement: react_1.cloneElement,
createElement: react_1.createElement,
isValidElement: react_1.isValidElement,
};
/**
* Converts DOM nodes to JSX element(s).
*
* @param nodes - DOM nodes.
* @param options - Options.
* @returns - String or JSX element(s).
*/
function domToReact$1(nodes, options = {}) {
var _a, _b, _c, _d, _e;
const reactElements = [];
const hasReplace = typeof options.replace === 'function';
const transform = (_a = options.transform) !== null && _a !== void 0 ? _a : utilities_1.returnFirstArg;
const { cloneElement, createElement, isValidElement } = (_b = options.library) !== null && _b !== void 0 ? _b : React;
const nodesLength = nodes.length;
normalizeDOMNodes(nodes);
for (let index = 0; index < nodesLength; index++) {
const node = nodes[index];
// replace with custom React element (if present)
if (hasReplace) {
let replaceElement = (_c = options.replace) === null || _c === void 0 ? void 0 : _c.call(options, node, index);
if (isValidElement(replaceElement)) {
// set "key" prop for sibling elements
// https://react.dev/learn/rendering-lists#rules-of-keys
if (nodesLength > 1) {
replaceElement = cloneElement(replaceElement, {
key: (_d = replaceElement.key) !== null && _d !== void 0 ? _d : index,
});
}
reactElements.push(transform(replaceElement, node, index));
continue;
}
}
if (node.type === 'text') {
const isWhitespace = !node.data.trim().length;
// We have a whitespace node that can't be nested in its parent
// so skip it
if (isWhitespace &&
node.parent &&
!(0, utilities_1.canTextBeChildOfNode)(node.parent)) {
continue;
}
// Trim is enabled and we have a whitespace node
// so skip it
if (options.trim && isWhitespace) {
continue;
}
// We have a text node that's not whitespace and it can be nested
// in its parent so add it to the results
reactElements.push(transform(node.data, node, index));
continue;
}
const element = node;
let props = {};
if (skipAttributesToProps(element)) {
(0, utilities_1.setStyleProp)(element.attribs.style, element.attribs);
props = element.attribs;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
}
else if (element.attribs) {
props = (0, attributes_to_props_1.default)(element.attribs, element.name);
}
let children;
switch (node.type) {
case 'script':
case 'style':
// prevent text in <script> or <style> from being escaped
// https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
if (node.children[0]) {
props.dangerouslySetInnerHTML = {
__html: node.children[0].data,
};
}
break;
case 'tag':
// setting textarea value in children is an antipattern in React
// https://react.dev/reference/react-dom/components/textarea#caveats
if (node.name === 'textarea' && node.children[0]) {
props.defaultValue = node.children[0].data;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
}
else if ((_e = node.children) === null || _e === void 0 ? void 0 : _e.length) {
// continue recursion of creating React elements (if applicable)
children = domToReact$1(node.children, options);
}
break;
// skip all other cases (e.g., comment)
default:
continue;
}
// set "key" prop for sibling elements
// https://react.dev/learn/rendering-lists#rules-of-keys
if (nodesLength > 1) {
props.key = index;
}
reactElements.push(transform(createElement(node.name, props, children), node, index));
}
return reactElements.length === 1 ? reactElements[0] : reactElements;
}
function normalizeDOMNodes(nodes) {
for (const node of nodes) {
if (node.type === 'tag' ||
node.type === 'script' ||
node.type === 'style') {
Object.setPrototypeOf(node, domhandler_1.Element.prototype);
normalizeDOMNodes(node.children);
}
}
}
/**
* Determines whether DOM element attributes should be transformed to props.
* Web Components should not have their attributes transformed except for `style`.
*
* @param node - Element node.
* @returns - Whether the node attributes should be converted to props.
*/
function skipAttributesToProps(node) {
return (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES &&
node.type === 'tag' &&
(0, utilities_1.isCustomComponent)(node.name, node.attribs));
}
return domToReact;
}
var hasRequiredLib;
function requireLib () {
if (hasRequiredLib) return lib$1;
hasRequiredLib = 1;
(function (exports) {
var __importDefault = (lib$1 && lib$1.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
exports.default = HTMLReactParser;
const html_dom_parser_1 = __importDefault(requireHtmlToDom());
exports.htmlToDOM = html_dom_parser_1.default;
const attributes_to_props_1 = __importDefault(requireAttributesToProps());
exports.attributesToProps = attributes_to_props_1.default;
const dom_to_react_1 = __importDefault(requireDomToReact());
exports.domToReact = dom_to_react_1.default;
var domhandler_1 = require$$3;
Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return domhandler_1.Comment; } });
Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return domhandler_1.Element; } });
Object.defineProperty(exports, "ProcessingInstruction", { enumerable: true, get: function () { return domhandler_1.ProcessingInstruction; } });
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return domhandler_1.Text; } });
const domParserOptions = { lowerCaseAttributeNames: false };
/**
* Converts HTML string to React elements.
*
* @param html - HTML string.
* @param options - Parser options.
* @returns - React element(s), empty array, or string.
*/
function HTMLReactParser(html, options) {
var _a;
if (typeof html !== 'string') {
throw new TypeError('First argument must be a string');
}
if (!html) {
return [];
}
const htmlToDOMOptions = Object.assign(Object.assign({}, ((_a = options === null || options === void 0 ? void 0 : options.htmlparser2) !== null && _a !== void 0 ? _a : domParserOptions)), { trustedTypePolicy: options === null || options === void 0 ? void 0 : options.trustedTypePolicy });
return (0, dom_to_react_1.default)((0, html_dom_parser_1.default)(html, htmlToDOMOptions), options);
}
} (lib$1));
return lib$1;
}
var libExports = requireLib();
var index = /*@__PURE__*/getDefaultExportFromCjs(libExports);
var HTMLReactParser = /*#__PURE__*/_mergeNamespaces({
__proto__: null,
default: index
}, [libExports]);
const parse = index;
Object.assign(parse, HTMLReactParser);
return parse;
}));
//# sourceMappingURL=html-react-parser.js.map