@viewfly/platform-browser 2.2.0 → 2.2.1

package/dist/dom-renderer.d.ts

@@ -1,15 +1,16 @@
 import { ElementNamespace, NativeRenderer } from '@viewfly/core';
 export declare class DomRenderer extends NativeRenderer<HTMLElement, Text> {
-    static NAMESPACES: Record<string, string>;
-    propMap: Record<string, Record<string, string>>;
+    private static readonly XLINK_NS;
     /**
-     * IDL 属性赋 `''` 会被转成数字 0（如 maxLength/minLength），无法表示「未设置」。
-     * 这些键在移除时应删掉对应 content attribute。
+     * React/JSX 式 xlink* 与 `xlink:` 开头的属性在 SVG/Math 等中须走 XLink 命名空间。
+     * 旧实现把 `xlink:` 后接的名字误当作 namespaceURI，且 `xlinkHref` 会退成普通 setAttribute 导致非标准属性名。
      */
-    private static readonly REMOVE_VIA_ATTRIBUTE;
+    private static readonly XLINK_IDL_TO_LOCAL;
+    static NAMESPACES: Record<string, string>;
+    propMap: Record<string, Record<string, string>>;
     createElement(name: string, namespace: ElementNamespace): HTMLElement;
     createTextNode(textContent: string): Text;
-    appendChild(parent: HTMLElement, newChild: any): void;
+    appendChild(parent: HTMLElement, newChild: HTMLElement | Text): void;
     prependChild(parent: HTMLElement, newChild: HTMLElement | Text): void;
     insertAfter(newNode: HTMLElement | Text, ref: HTMLElement | Text): void;
     remove(node: HTMLElement | Text): void;
@@ -23,6 +24,12 @@ export declare class DomRenderer extends NativeRenderer<HTMLElement, Text> {
     unListen(node: HTMLElement, type: string, callback: (ev: any) => any): void;
     syncTextContent(target: Text, content: string): void;
     getNameSpace(type: string, namespace: ElementNamespace): string | void;
+    /**
+     * SVG / MathML 等非 HTML 下无 HTML5 的「反射 IDL」表；通常用属性字符串表示，false/空串/非数常表示不输出该属性。
+     */
+    private static isXmlAttributeUnsetValue;
+    private setNamespacedPresentation;
+    private clearNamespacedPresentation;
     private normalizedEventType;
     private insertBefore;
 }

package/dist/html-idl-reflection.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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)`。
+ */
+export declare const IDL_TO_CONTENT_ATTR: Readonly<Record<string, string>>;
+/**
+ * setProperty 时，若把 `false`、`''` 或非有限 number 当「不设置/默认」，应走 remove。
+ * 不在此集合的 IDL 由通用逻辑或单独分支处理；布尔见上表排除。
+ */
+export declare const IDL_FALSY_OR_NONFINITE_REMOVES: ReadonlySet<string>;
+/**
+ * 是否应把 setProperty 改为 remove（`null`/`undefined` 由 setProperty 开头处理，此处不返回 true）。
+ * `false`、`''`、非有限数（NaN、±∞）在允许列表上时视为与「未设」同义。
+ */
+export declare function isUnsetLikeReflectedIdlValue(resolvedIdlKey: string, value: unknown): boolean;
+/**
+ * 由 IDL 名取 content attribute 名，无则 undefined。
+ */
+export declare function getContentAttrNameForIdl(resolvedIdlKey: string): string | void;

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export * from './create-app';
 export * from './create-portal';
 export * from './html-renderer';
 export * from './dom-renderer';
+export * from './html-idl-reflection';
+export * from './xml-jsx-attr-name';
 export * from './jsx-dom';

package/dist/index.esm.js

@@ -1,6 +1,389 @@
 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",
@@ -13,18 +396,6 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
 		INPUT: { readonly: "readOnly" },
 		TEXTAREA: { readonly: "readOnly" }
 	};
-	/**
-	* IDL 属性赋 `''` 会被转成数字 0（如 maxLength/minLength），无法表示「未设置」。
-	* 这些键在移除时应删掉对应 content attribute。
-	*/
-	static REMOVE_VIA_ATTRIBUTE = {
-		maxLength: "maxlength",
-		minLength: "minlength",
-		size: "size",
-		cols: "cols",
-		rows: "rows",
-		tabIndex: "tabindex"
-	};
 	createElement(name, namespace) {
 		const ns = namespace && DomRenderer.NAMESPACES[namespace];
 		if (ns) return document.createElementNS(ns, name);
@@ -40,7 +411,8 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
 		parent.prepend(newChild);
 	}
 	insertAfter(newNode, ref) {
-		if (ref.nextSibling) this.insertBefore(newNode, ref.nextSibling);
+		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`);
 	}
@@ -56,36 +428,38 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
 			return;
 		}
 		if (namespace) {
-			if (key.startsWith("xlink:")) {
-				const ns = key.substring(6);
-				node.setAttributeNS(ns, key, String(value));
-			} else node.setAttribute(key, String(value));
+			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;
 		}
-		const map = this.propMap[node.tagName];
-		if (map) key = map[key] || key;
 		if (key in node) {
-			if (map && document.activeElement === node && key === "value") return;
+			if (tagMap && document.activeElement === node && key === "value") return;
 			node[key] = value;
 		} else node.setAttribute(key, value);
 	}
 	removeProperty(node, key, namespace) {
 		if (namespace) {
-			if (key.startsWith("xlink:")) {
-				const ns = key.substring(6);
-				node.removeAttributeNS(ns, key.substring(6));
-			} else node.removeAttribute(key);
+			this.clearNamespacedPresentation(node, key);
 			return;
 		}
-		const map = this.propMap[node.tagName];
-		const resolvedKey = map ? map[key] || key : key;
-		const attrName = DomRenderer.REMOVE_VIA_ATTRIBUTE[resolvedKey];
-		if (attrName) {
-			node.removeAttribute(attrName);
+		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(key);
+		else node.removeAttribute(resolvedKey);
 	}
 	setClass(target, className) {
 		target.setAttribute("class", className);
@@ -124,12 +498,53 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
 		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}" was accidentally deleted, and viewfly is unable to update the current view`);
+		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
@@ -184,6 +599,17 @@ function createPortal(childRender, host) {
 }
 //#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() {
@@ -221,6 +647,10 @@ var HTMLRenderer = class extends NativeRenderer {
 		return new VDOMText(textContent);
 	}
 	setProperty(node, key, value) {
+		if (value == null) {
+			this.removeProperty(node, key);
+			return;
+		}
 		node.props.set(key, value);
 	}
 	appendChild(parent, newChild) {
@@ -274,7 +704,7 @@ var HTMLRenderer = class extends NativeRenderer {
 * 轻量 DOM 转换为 HTML 字符串的转换器
 */
 var OutputTranslator = class OutputTranslator {
-	static singleTags = "area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr".split(",");
+	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) => {
@@ -297,12 +727,7 @@ var OutputTranslator = class OutputTranslator {
 			});
 		},
 		attrValue(text) {
-			return text.replace(/["']/g, (str) => {
-				return {
-					"\"": "&quot;",
-					"'": "&#x27;"
-				}[str];
-			});
+			return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 		}
 	};
 	singleTagTest = new RegExp(`^(${OutputTranslator.singleTags.join("|")})$`, "i");
@@ -322,13 +747,19 @@ var OutputTranslator = class OutputTranslator {
 			const v = vDom.style.get(key);
 			return !(v === void 0 || v === null || v === "");
 		}).map((key) => {
-			const k = key.replace(/(?=[A-Z])/g, "-").toLowerCase();
+			const k = styleKeyToCssPropertyName(key);
 			return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
 		}).join(";");
-		const attrs = Array.from(vDom.props.keys()).filter((key) => key !== "ref" && vDom.props.get(key) !== false).map((k) => {
-			const key = xssFilter.attrName(k);
+		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(key) ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`;
+			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)}"`);
@@ -351,4 +782,4 @@ var OutputTranslator = class OutputTranslator {
 	}
 };
 //#endregion
-export { DomRenderer, HTMLRenderer, OutputTranslator, VDOMElement, VDOMNode, VDOMText, createApp, createPortal };
+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 };