@viewfly/platform-browser 2.1.0 → 2.2.1

package/dist/index.esm.js

@@ -0,0 +1,785 @@
+import { NativeRenderer, viewfly } from "@viewfly/core";
+//#region src/html-idl-reflection.ts
+/**
+* HTML 反射 IDL 属性：在「与 default / 未设」一致时须 removeAttribute，不能写 `node[idl] = ''`，
+* 否则会出现空 content 属性、错误约束（如 `pattern=""`、`maxLength=0` 等）。
+* @see https://html.spec.whatwg.org/ 2.3.1 Reflected attributes
+*/
+/**
+* 解析后的 IDL 名 -> content attribute 名。removeProperty 命中时仅 `removeAttribute(name)`。
+*/
+var IDL_TO_CONTENT_ATTR = {
+	accessKey: "accesskey",
+	accept: "accept",
+	async: "async",
+	autofocus: "autofocus",
+	acceptCharset: "accept-charset",
+	action: "action",
+	allow: "allow",
+	align: "align",
+	alt: "alt",
+	as: "as",
+	autoCapitalize: "autocapitalize",
+	autoComplete: "autocomplete",
+	challenge: "challenge",
+	charset: "charset",
+	cite: "cite",
+	className: "class",
+	color: "color",
+	cols: "cols",
+	checked: "checked",
+	disabled: "disabled",
+	colSpan: "colspan",
+	content: "content",
+	crossOrigin: "crossorigin",
+	dateTime: "datetime",
+	decoding: "decoding",
+	default: "default",
+	defer: "defer",
+	download: "download",
+	enctype: "enctype",
+	encType: "enctype",
+	formAction: "formaction",
+	formEnctype: "formenctype",
+	formMethod: "formmethod",
+	formNoValidate: "formnovalidate",
+	formTarget: "formtarget",
+	height: "height",
+	href: "href",
+	hreflang: "hreflang",
+	httpEquiv: "http-equiv",
+	icon: "icon",
+	id: "id",
+	inputMode: "inputmode",
+	integrity: "integrity",
+	isMap: "ismap",
+	keytype: "keytype",
+	kind: "kind",
+	label: "label",
+	list: "list",
+	loading: "loading",
+	longDesc: "longdesc",
+	max: "max",
+	maxLength: "maxlength",
+	media: "media",
+	min: "min",
+	minLength: "minlength",
+	method: "method",
+	name: "name",
+	noModule: "nomodule",
+	noValidate: "novalidate",
+	open: "open",
+	optimum: "optimum",
+	part: "part",
+	pattern: "pattern",
+	ping: "ping",
+	placeholder: "placeholder",
+	popover: "popover",
+	referrerPolicy: "referrerpolicy",
+	readOnly: "readonly",
+	rel: "rel",
+	required: "required",
+	rowSpan: "rowspan",
+	rows: "rows",
+	scheme: "scheme",
+	size: "size",
+	sizes: "sizes",
+	slot: "slot",
+	span: "span",
+	src: "src",
+	srcset: "srcset",
+	selected: "selected",
+	srclang: "srclang",
+	start: "start",
+	step: "step",
+	tabIndex: "tabindex",
+	target: "target",
+	title: "title",
+	type: "type",
+	useMap: "usemap",
+	width: "width",
+	wrap: "wrap"
+};
+/**
+* 常见「布尔受控」IDL：`false` 是合法值，不能当作“删除属性/恢复默认”。
+*（未列出的、未在 FALSY 表中的键，若用户误传 `false` 可能仍被转换，以各标签为准。）
+*/
+var BOOLEAN_IDL_EXCLUDE_FROM_FALSY = new Set([
+	"readOnly",
+	"disabled",
+	"required",
+	"checked",
+	"defaultChecked",
+	"autofocus",
+	"async",
+	"selected",
+	"defaultSelected",
+	"multiple",
+	"hidden",
+	"autoplay",
+	"controls",
+	"loop",
+	"muted",
+	"defaultMuted",
+	"allowFullscreen",
+	"defer",
+	"noModule",
+	"reversed",
+	"scoped",
+	"seamless",
+	"inert",
+	"draggable",
+	"indeterminate",
+	"formNoValidate",
+	"noValidate",
+	"isMap",
+	"default",
+	"open",
+	"spellcheck"
+]);
+/**
+* setProperty 时，若把 `false`、`''` 或非有限 number 当「不设置/默认」，应走 remove。
+* 不在此集合的 IDL 由通用逻辑或单独分支处理；布尔见上表排除。
+*/
+var IDL_FALSY_OR_NONFINITE_REMOVES = new Set([
+	"maxLength",
+	"minLength",
+	"size",
+	"cols",
+	"rows",
+	"tabIndex",
+	"colSpan",
+	"rowSpan",
+	"span",
+	"pattern",
+	"id",
+	"name",
+	"type",
+	"min",
+	"max",
+	"step",
+	"inputMode",
+	"autoComplete",
+	"autoCapitalize",
+	"placeholder",
+	"title",
+	"alt",
+	"src",
+	"href",
+	"crossOrigin",
+	"integrity",
+	"referrerPolicy",
+	"rel",
+	"target",
+	"as",
+	"action",
+	"accept",
+	"enctype",
+	"encType",
+	"method",
+	"formAction",
+	"formEnctype",
+	"formMethod",
+	"formTarget",
+	"download",
+	"list",
+	"sizes",
+	"srcset",
+	"useMap",
+	"align",
+	"allow",
+	"width",
+	"height",
+	"accessKey",
+	"slot",
+	"part",
+	"popover",
+	"loading",
+	"decoding",
+	"media",
+	"ping",
+	"acceptCharset",
+	"color",
+	"charset",
+	"content",
+	"httpEquiv",
+	"dateTime",
+	"cite",
+	"wrap",
+	"keytype",
+	"challenge",
+	"kind",
+	"srclang",
+	"icon",
+	"optimum",
+	"start",
+	"label",
+	"scheme",
+	"longDesc"
+]);
+/**
+* 是否应把 setProperty 改为 remove（`null`/`undefined` 由 setProperty 开头处理，此处不返回 true）。
+* `false`、`''`、非有限数（NaN、±∞）在允许列表上时视为与「未设」同义。
+*/
+function isUnsetLikeReflectedIdlValue(resolvedIdlKey, value) {
+	if (value == null) return false;
+	if (BOOLEAN_IDL_EXCLUDE_FROM_FALSY.has(resolvedIdlKey)) return false;
+	if (!IDL_FALSY_OR_NONFINITE_REMOVES.has(resolvedIdlKey)) return false;
+	if (value === false || value === "") return true;
+	if (typeof value === "number" && !Number.isFinite(value)) return true;
+	return false;
+}
+/**
+* 由 IDL 名取 content attribute 名，无则 undefined。
+*/
+function getContentAttrNameForIdl(resolvedIdlKey) {
+	return IDL_TO_CONTENT_ATTR[resolvedIdlKey];
+}
+//#endregion
+//#region src/xml-jsx-attr-name.ts
+/**
+* 对标 React `possibleStandardNames`：SVG / Math 子树中 JSX 的 camelCase -> 真正写在 DOM 上的 attribute 名。
+* 易错、不能简单「插横线」的名字放在 XML_JSX_NAME_TO_ATTR；其余走受控的 kebab 回退。
+* @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+*/
+/** 须按 XML/命名空间 语义单独处理的 JSX 名 -> setAttribute(…) 的完整名字（`xml:lang` 等） */
+var XML_OR_XMLNS_JSX = {
+	xmlBase: "xml:base",
+	"xml:base": "xml:base",
+	xmlLang: "xml:lang",
+	"xml:lang": "xml:lang",
+	xmlSpace: "xml:space",
+	"xml:space": "xml:space",
+	xmlns: "xmlns",
+	xmlnsXlink: "xmlns:xlink",
+	"xmlns:xlink": "xmlns:xlink"
+};
+/**
+* 显式表：JSX 名 -> 属性名（多含 kebab 或需保留大小写如 viewBox）。
+* 全小写、单字符（x,y,r,cx 等）不必列出，会原样使用。
+*/
+var XML_JSX_NAME_TO_ATTR = {
+	tabIndex: "tabindex",
+	viewBox: "viewBox",
+	viewTarget: "viewTarget",
+	preserveAspectRatio: "preserveAspectRatio",
+	contentScriptType: "contentScriptType",
+	contentStyleType: "contentStyleType",
+	baseProfile: "baseProfile",
+	fontFamily: "font-family",
+	fontSize: "font-size",
+	fontStyle: "font-style",
+	fontWeight: "font-weight",
+	fontStretch: "font-stretch",
+	fontVariant: "font-variant",
+	fontSizeAdjust: "font-size-adjust",
+	textAnchor: "text-anchor",
+	textLength: "textLength",
+	textRendering: "text-rendering",
+	textDecoration: "text-decoration",
+	shapeRendering: "shape-rendering",
+	imageRendering: "image-rendering",
+	fillOpacity: "fill-opacity",
+	fillRule: "fill-rule",
+	strokeLinecap: "stroke-linecap",
+	strokeLinejoin: "stroke-linejoin",
+	strokeMiterlimit: "stroke-miterlimit",
+	strokeWidth: "stroke-width",
+	strokeOpacity: "stroke-opacity",
+	strokeDasharray: "stroke-dasharray",
+	strokeDashoffset: "stroke-dashoffset",
+	clipPath: "clip-path",
+	clipRule: "clip-rule",
+	clipPathUnits: "clipPathUnits",
+	colorInterpolation: "color-interpolation",
+	colorInterpolationFilters: "color-interpolation-filters",
+	colorRendering: "color-rendering",
+	colorProfile: "color-profile",
+	floodColor: "flood-color",
+	floodOpacity: "flood-opacity",
+	stopColor: "stop-color",
+	stopOpacity: "stop-opacity",
+	lightingColor: "lighting-color",
+	pointerEvents: "pointer-events",
+	maskContentUnits: "maskContentUnits",
+	patternContentUnits: "patternContentUnits",
+	patternTransform: "patternTransform",
+	patternUnits: "patternUnits",
+	gradientTransform: "gradientTransform",
+	gradientUnits: "gradientUnits",
+	filterUnits: "filterUnits",
+	filterRes: "filterRes",
+	primitiveUnits: "primitiveUnits",
+	kernelMatrix: "kernelMatrix",
+	kernelUnitLength: "kernelUnitLength",
+	markerStart: "marker-start",
+	markerEnd: "marker-end",
+	markerMid: "marker-mid",
+	markerWidth: "markerWidth",
+	markerHeight: "markerHeight",
+	markerUnits: "markerUnits",
+	startOffset: "startOffset",
+	pathLength: "pathLength",
+	keySplines: "keySplines",
+	keyPoints: "keyPoints",
+	keyTimes: "keyTimes",
+	xChannelSelector: "xChannelSelector",
+	yChannelSelector: "yChannelSelector",
+	stdDeviation: "stdDeviation",
+	specularConstant: "specularConstant",
+	specularExponent: "specularExponent",
+	diffuseConstant: "diffuseConstant",
+	limitingConeAngle: "limitingConeAngle",
+	requiredExtensions: "requiredExtensions",
+	requiredFeatures: "requiredFeatures",
+	tableValues: "tableValues",
+	numOctaves: "numOctaves",
+	wordSpacing: "word-spacing",
+	letterSpacing: "letter-spacing",
+	paintOrder: "paint-order",
+	transformOrigin: "transform-origin",
+	alignmentBaseline: "alignment-baseline",
+	dominantBaseline: "dominant-baseline",
+	baselineShift: "baseline-shift",
+	unicodeBidi: "unicode-bidi",
+	unicodeRange: "unicode-range",
+	unitsPerEm: "units-per-em",
+	xHeight: "x-height",
+	capHeight: "cap-height",
+	horizOriginX: "horiz-origin-x",
+	horizAdvX: "horiz-adv-x",
+	vertOriginX: "vert-origin-x",
+	vertOriginY: "vert-origin-y",
+	vAlphabetic: "v-alphabetic",
+	vHanging: "v-hanging",
+	vMathematical: "v-mathematical",
+	vIdeographic: "v-ideographic",
+	vertAdvY: "vert-adv-y",
+	refX: "refX",
+	refY: "refY"
+};
+/**
+* 返回在 SVG / Math 元素上应使用的 content attribute 名（用于 set/removeAttribute，含 `xml:…`、`xmlns:…`）。
+*/
+function getXmlPresentationAttributeName(jsxKey) {
+	if (XML_OR_XMLNS_JSX[jsxKey]) return XML_OR_XMLNS_JSX[jsxKey];
+	if (Object.prototype.hasOwnProperty.call(XML_JSX_NAME_TO_ATTR, jsxKey)) return XML_JSX_NAME_TO_ATTR[jsxKey];
+	if (!/[A-Z]/.test(jsxKey)) return jsxKey;
+	return jsxKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+//#endregion
+//#region src/dom-renderer.ts
+var DomRenderer = class DomRenderer extends NativeRenderer {
+	static XLINK_NS = "http://www.w3.org/1999/xlink";
+	/**
+	* React/JSX 式 xlink* 与 `xlink:` 开头的属性在 SVG/Math 等中须走 XLink 命名空间。
+	* 旧实现把 `xlink:` 后接的名字误当作 namespaceURI，且 `xlinkHref` 会退成普通 setAttribute 导致非标准属性名。
+	*/
+	static XLINK_IDL_TO_LOCAL = {
+		xlinkHref: "href",
+		xlinkType: "type",
+		xlinkRole: "role",
+		xlinkTitle: "title",
+		xlinkShow: "show",
+		xlinkActuate: "actuate",
+		xlinkArcrole: "arcrole"
+	};
+	static NAMESPACES = {
+		svg: "http://www.w3.org/2000/svg",
+		html: "http://www.w3.org/1999/xhtml",
+		xml: "http://www.w3.org/XML/1998/namespace",
+		xlink: "http://www.w3.org/1999/xlink",
+		xmlns: "http://www.w3.org/2000/xmlns/",
+		mathml: "http://www.w3.org/1998/Math/MathML"
+	};
+	propMap = {
+		INPUT: { readonly: "readOnly" },
+		TEXTAREA: { readonly: "readOnly" }
+	};
+	createElement(name, namespace) {
+		const ns = namespace && DomRenderer.NAMESPACES[namespace];
+		if (ns) return document.createElementNS(ns, name);
+		return document.createElement(name);
+	}
+	createTextNode(textContent) {
+		return document.createTextNode(textContent);
+	}
+	appendChild(parent, newChild) {
+		parent.appendChild(newChild);
+	}
+	prependChild(parent, newChild) {
+		parent.prepend(newChild);
+	}
+	insertAfter(newNode, ref) {
+		const next = ref.nextSibling;
+		if (next) this.insertBefore(newNode, next);
+		else if (ref.parentNode) this.appendChild(ref.parentNode, newNode);
+		else console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
+	}
+	remove(node) {
+		node.remove();
+	}
+	cleanChildren(node) {
+		node.textContent = "";
+	}
+	setProperty(node, key, value, namespace) {
+		if (value == null) {
+			this.removeProperty(node, key, namespace);
+			return;
+		}
+		if (namespace) {
+			if (DomRenderer.isXmlAttributeUnsetValue(value)) {
+				this.removeProperty(node, key, namespace);
+				return;
+			}
+			this.setNamespacedPresentation(node, key, String(value));
+			return;
+		}
+		const tagMap = this.propMap[node.tagName];
+		if (tagMap) key = tagMap[key] || key;
+		if (!namespace && isUnsetLikeReflectedIdlValue(key, value)) {
+			this.removeProperty(node, key, namespace);
+			return;
+		}
+		if (key in node) {
+			if (tagMap && document.activeElement === node && key === "value") return;
+			node[key] = value;
+		} else node.setAttribute(key, value);
+	}
+	removeProperty(node, key, namespace) {
+		if (namespace) {
+			this.clearNamespacedPresentation(node, key);
+			return;
+		}
+		const tagMap = this.propMap[node.tagName];
+		const resolvedKey = tagMap ? tagMap[key] || key : key;
+		const contentAttr = getContentAttrNameForIdl(resolvedKey);
+		if (contentAttr) {
+			node.removeAttribute(contentAttr);
+			return;
+		}
+		if (resolvedKey in node) node[resolvedKey] = "";
+		else node.removeAttribute(resolvedKey);
+	}
+	setClass(target, className) {
+		target.setAttribute("class", className);
+	}
+	setStyle(target, key, value) {
+		if (key.startsWith("--")) {
+			target.style.setProperty(key, value);
+			return;
+		}
+		target.style[key] = value ?? "";
+	}
+	removeStyle(target, key) {
+		if (key.startsWith("--")) {
+			target.style.removeProperty(key);
+			return;
+		}
+		target.style[key] = "";
+	}
+	listen(node, type, callback) {
+		const normalizedType = this.normalizedEventType(type);
+		node.addEventListener(normalizedType, callback);
+	}
+	unListen(node, type, callback) {
+		const normalizedType = this.normalizedEventType(type);
+		node.removeEventListener(normalizedType, callback);
+	}
+	syncTextContent(target, content) {
+		target.textContent = content;
+	}
+	getNameSpace(type, namespace) {
+		if (namespace === "svg") {
+			if (type === "foreignObject") return;
+			return namespace;
+		}
+		if (type === "svg") return type;
+		if (type === "math") return "mathml";
+		return namespace;
+	}
+	/**
+	* SVG / MathML 等非 HTML 下无 HTML5 的「反射 IDL」表；通常用属性字符串表示，false/空串/非数常表示不输出该属性。
+	*/
+	static isXmlAttributeUnsetValue(value) {
+		if (value === false || value === "") return true;
+		if (typeof value === "number" && !Number.isFinite(value)) return true;
+		return false;
+	}
+	setNamespacedPresentation(node, key, value) {
+		if (key === "className") {
+			node.className = value;
+			return;
+		}
+		const xlinkLocal = DomRenderer.XLINK_IDL_TO_LOCAL[key];
+		if (xlinkLocal) {
+			node.setAttributeNS(DomRenderer.XLINK_NS, xlinkLocal, value);
+			return;
+		}
+		if (key.startsWith("xlink:")) {
+			node.setAttributeNS(DomRenderer.XLINK_NS, key.slice(6), value);
+			return;
+		}
+		node.setAttribute(getXmlPresentationAttributeName(key), value);
+	}
+	clearNamespacedPresentation(node, key) {
+		if (key === "className") {
+			if ("className" in node) node.className = "";
+			node.removeAttribute("className");
+			return;
+		}
+		const xlinkLocal = DomRenderer.XLINK_IDL_TO_LOCAL[key];
+		if (xlinkLocal) {
+			node.removeAttributeNS(DomRenderer.XLINK_NS, xlinkLocal);
+			return;
+		}
+		if (key.startsWith("xlink:")) {
+			node.removeAttributeNS(DomRenderer.XLINK_NS, key.slice(6));
+			return;
+		}
+		node.removeAttribute(getXmlPresentationAttributeName(key));
+	}
+	normalizedEventType(type) {
+		return type.substring(2).toLowerCase();
+	}
+	insertBefore(newNode, ref) {
+		if (ref.parentNode) ref.parentNode.insertBefore(newNode, ref);
+		else console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName ?? ref.nodeName}" was accidentally deleted, and viewfly is unable to update the current view`);
+	}
+};
+//#endregion
+//#region src/create-app.ts
+function createApp(root, config = true) {
+	const c = { autoUpdate: true };
+	if (typeof config === "boolean") c.autoUpdate = config;
+	else if (typeof config === "object") Object.assign(c, config);
+	return viewfly({
+		...c,
+		root,
+		nativeRenderer: c.nativeRenderer || new DomRenderer()
+	});
+}
+//#endregion
+//#region src/create-portal.ts
+/**
+* 用于创建脱离当前 DOM 树的子节点，常用于弹窗等
+* @deprecated 即将弃用，请使用 @viewfly/core 模块的 Portal 组件实现
+* @param childRender
+* @param host
+* @example
+* ```tsx
+* function App() {
+*   const number = createSignal(0)
+*
+*   setInterval(() => {
+*     number.set(number() + 1)
+*   }, 1000)
+*
+*   const ModalPortal = function (props) {
+*     return createPortal(() => {
+*       return <div class="modal">parent data is {props.text}</div>
+*     }, document.body)
+*   }
+*   return () => {
+*     return (
+*       <div>
+*         <div>data is {number()}</div>
+*         <ModalPortal text={number()}/>
+*       </div>
+*     )
+*   }
+* }
+* ```
+*/
+function createPortal(childRender, host) {
+	return {
+		$portalHost: host,
+		$render: childRender
+	};
+}
+//#endregion
+//#region src/html-renderer.ts
+/** JSX style 对象键 → CSS 属性名（含 webkit / moz / ms / o 前缀） */
+function styleKeyToCssPropertyName(key) {
+	if (key.startsWith("--")) return key;
+	const toKebab = (s) => s.replace(/^[A-Z]/, (c) => c.toLowerCase()).replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
+	const m = key.match(/^(webkit|moz|ms|o)([A-Z])/);
+	if (m) {
+		const tail = key.slice(m[1].length);
+		return `-${m[1].toLowerCase()}-${toKebab(tail)}`;
+	}
+	return toKebab(key);
+}
+var VDOMNode = class {
+	parent = null;
+	remove() {
+		if (this.parent) {
+			const i = this.parent.children.indexOf(this);
+			if (i > -1) this.parent.children.splice(i, 1);
+		}
+		this.parent = null;
+	}
+};
+var VDOMElement = class extends VDOMNode {
+	props = /* @__PURE__ */ new Map();
+	children = [];
+	style = /* @__PURE__ */ new Map();
+	className = "";
+	constructor(name) {
+		super();
+		this.name = name;
+	}
+};
+var VDOMText = class extends VDOMNode {
+	constructor(text) {
+		super();
+		this.text = text;
+	}
+};
+/**
+* 用于生成模拟轻量 DOM 节点的渲染器
+*/
+var HTMLRenderer = class extends NativeRenderer {
+	createElement(name) {
+		return new VDOMElement(name);
+	}
+	createTextNode(textContent) {
+		return new VDOMText(textContent);
+	}
+	setProperty(node, key, value) {
+		if (value == null) {
+			this.removeProperty(node, key);
+			return;
+		}
+		node.props.set(key, value);
+	}
+	appendChild(parent, newChild) {
+		newChild.remove();
+		parent.children.push(newChild);
+		newChild.parent = parent;
+	}
+	prependChild(parent, newChild) {
+		newChild.remove();
+		parent.children.unshift(newChild);
+		newChild.parent = parent;
+	}
+	removeProperty(node, key) {
+		node.props.delete(key);
+	}
+	setStyle(target, key, value) {
+		target.style.set(key, value);
+	}
+	removeStyle(target, key) {
+		target.style.delete(key);
+	}
+	setClass(target, value) {
+		target.className = value;
+	}
+	listen() {}
+	unListen() {}
+	remove(node) {
+		node.remove();
+	}
+	cleanChildren(node) {
+		node.children.forEach((i) => i.parent = null);
+		node.children = [];
+	}
+	syncTextContent(target, content) {
+		target.text = content;
+	}
+	insertAfter(newNode, ref) {
+		newNode.remove();
+		const parent = ref.parent;
+		if (parent) {
+			const i = parent.children.indexOf(ref);
+			if (i > -1) {
+				newNode.parent = parent;
+				parent.children.splice(i + 1, 0, newNode);
+			}
+		} else console.warn(`Element "${ref instanceof VDOMText ? ref.text : ref.name}" was accidentally deleted, and viewfly is unable to update the current view`);
+	}
+	getNameSpace() {}
+};
+/**
+* 轻量 DOM 转换为 HTML 字符串的转换器
+*/
+var OutputTranslator = class OutputTranslator {
+	static singleTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
+	static simpleXSSFilter = {
+		text(text) {
+			return text.replace(/[><&]/g, (str) => {
+				return {
+					"<": "&lt;",
+					">": "&gt;",
+					"&": "&amp;"
+				}[str];
+			});
+		},
+		attrName(text) {
+			return text.replace(/[><"'&]/g, (str) => {
+				return {
+					"<": "&lt;",
+					">": "&gt;",
+					"\"": "&quot;",
+					"'": "&#x27;",
+					"&": "&amp;"
+				}[str];
+			});
+		},
+		attrValue(text) {
+			return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+		}
+	};
+	singleTagTest = new RegExp(`^(${OutputTranslator.singleTags.join("|")})$`, "i");
+	/**
+	* 将虚拟 DOM 转换为 HTML 字符串的方法
+	* @param vDom 虚拟 DOM 节点
+	*/
+	transform(vDom) {
+		return vDom.children.map((child) => {
+			return this.vDomToHTMLString(child);
+		}).join("");
+	}
+	vDomToHTMLString(vDom) {
+		const xssFilter = OutputTranslator.simpleXSSFilter;
+		if (vDom instanceof VDOMText) return this.replaceEmpty(xssFilter.text(vDom.text), "&nbsp;");
+		const styles = Array.from(vDom.style.keys()).filter((key) => {
+			const v = vDom.style.get(key);
+			return !(v === void 0 || v === null || v === "");
+		}).map((key) => {
+			const k = styleKeyToCssPropertyName(key);
+			return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
+		}).join(";");
+		const attrs = Array.from(vDom.props.keys()).filter((k) => {
+			if (k === "ref") return false;
+			const value = vDom.props.get(k);
+			if (value == null || value === false) return false;
+			return !isUnsetLikeReflectedIdlValue(k, value);
+		}).map((k) => {
+			const logical = getContentAttrNameForIdl(k) ?? k;
+			const escaped = xssFilter.attrName(logical);
+			const value = vDom.props.get(k);
+			return value === true && /^\w+$/.test(logical) ? `${escaped}` : `${escaped}="${xssFilter.attrValue(`${value}`)}"`;
+		});
+		if (styles) attrs.push(`style="${styles}"`);
+		if (vDom.className) attrs.push(`class="${xssFilter.attrValue(vDom.className)}"`);
+		let attrStr = attrs.join(" ");
+		attrStr = attrStr ? " " + attrStr : "";
+		if (this.singleTagTest.test(vDom.name)) return `<${vDom.name}${attrStr}>`;
+		const childHTML = vDom.children.map((child) => {
+			return this.vDomToHTMLString(child);
+		}).join("");
+		return [
+			`<${vDom.name}${attrStr}>`,
+			childHTML,
+			`</${vDom.name}>`
+		].join("");
+	}
+	replaceEmpty(s, target) {
+		return s.replace(/\s\s+/g, (str) => {
+			return " " + Array.from({ length: str.length - 1 }).fill(target).join("");
+		}).replace(/^\s|\s$/g, target);
+	}
+};
+//#endregion
+export { DomRenderer, HTMLRenderer, IDL_FALSY_OR_NONFINITE_REMOVES, IDL_TO_CONTENT_ATTR, OutputTranslator, VDOMElement, VDOMNode, VDOMText, XML_JSX_NAME_TO_ATTR, createApp, createPortal, getContentAttrNameForIdl, getXmlPresentationAttributeName, isUnsetLikeReflectedIdlValue };