@viewfly/platform-browser 2.2.0 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1,6 +1,389 @@
1
1
  import { NativeRenderer, viewfly } from "@viewfly/core";
2
+ //#region src/html-idl-reflection.ts
3
+ /**
4
+ * HTML 反射 IDL 属性:在「与 default / 未设」一致时须 removeAttribute,不能写 `node[idl] = ''`,
5
+ * 否则会出现空 content 属性、错误约束(如 `pattern=""`、`maxLength=0` 等)。
6
+ * @see https://html.spec.whatwg.org/ 2.3.1 Reflected attributes
7
+ */
8
+ /**
9
+ * 解析后的 IDL 名 -> content attribute 名。removeProperty 命中时仅 `removeAttribute(name)`。
10
+ */
11
+ var IDL_TO_CONTENT_ATTR = {
12
+ accessKey: "accesskey",
13
+ accept: "accept",
14
+ async: "async",
15
+ autofocus: "autofocus",
16
+ acceptCharset: "accept-charset",
17
+ action: "action",
18
+ allow: "allow",
19
+ align: "align",
20
+ alt: "alt",
21
+ as: "as",
22
+ autoCapitalize: "autocapitalize",
23
+ autoComplete: "autocomplete",
24
+ challenge: "challenge",
25
+ charset: "charset",
26
+ cite: "cite",
27
+ className: "class",
28
+ color: "color",
29
+ cols: "cols",
30
+ checked: "checked",
31
+ disabled: "disabled",
32
+ colSpan: "colspan",
33
+ content: "content",
34
+ crossOrigin: "crossorigin",
35
+ dateTime: "datetime",
36
+ decoding: "decoding",
37
+ default: "default",
38
+ defer: "defer",
39
+ download: "download",
40
+ enctype: "enctype",
41
+ encType: "enctype",
42
+ formAction: "formaction",
43
+ formEnctype: "formenctype",
44
+ formMethod: "formmethod",
45
+ formNoValidate: "formnovalidate",
46
+ formTarget: "formtarget",
47
+ height: "height",
48
+ href: "href",
49
+ hreflang: "hreflang",
50
+ httpEquiv: "http-equiv",
51
+ icon: "icon",
52
+ id: "id",
53
+ inputMode: "inputmode",
54
+ integrity: "integrity",
55
+ isMap: "ismap",
56
+ keytype: "keytype",
57
+ kind: "kind",
58
+ label: "label",
59
+ list: "list",
60
+ loading: "loading",
61
+ longDesc: "longdesc",
62
+ max: "max",
63
+ maxLength: "maxlength",
64
+ media: "media",
65
+ min: "min",
66
+ minLength: "minlength",
67
+ method: "method",
68
+ name: "name",
69
+ noModule: "nomodule",
70
+ noValidate: "novalidate",
71
+ open: "open",
72
+ optimum: "optimum",
73
+ part: "part",
74
+ pattern: "pattern",
75
+ ping: "ping",
76
+ placeholder: "placeholder",
77
+ popover: "popover",
78
+ referrerPolicy: "referrerpolicy",
79
+ readOnly: "readonly",
80
+ rel: "rel",
81
+ required: "required",
82
+ rowSpan: "rowspan",
83
+ rows: "rows",
84
+ scheme: "scheme",
85
+ size: "size",
86
+ sizes: "sizes",
87
+ slot: "slot",
88
+ span: "span",
89
+ src: "src",
90
+ srcset: "srcset",
91
+ selected: "selected",
92
+ srclang: "srclang",
93
+ start: "start",
94
+ step: "step",
95
+ tabIndex: "tabindex",
96
+ target: "target",
97
+ title: "title",
98
+ type: "type",
99
+ useMap: "usemap",
100
+ width: "width",
101
+ wrap: "wrap"
102
+ };
103
+ /**
104
+ * 常见「布尔受控」IDL:`false` 是合法值,不能当作“删除属性/恢复默认”。
105
+ *(未列出的、未在 FALSY 表中的键,若用户误传 `false` 可能仍被转换,以各标签为准。)
106
+ */
107
+ var BOOLEAN_IDL_EXCLUDE_FROM_FALSY = new Set([
108
+ "readOnly",
109
+ "disabled",
110
+ "required",
111
+ "checked",
112
+ "defaultChecked",
113
+ "autofocus",
114
+ "async",
115
+ "selected",
116
+ "defaultSelected",
117
+ "multiple",
118
+ "hidden",
119
+ "autoplay",
120
+ "controls",
121
+ "loop",
122
+ "muted",
123
+ "defaultMuted",
124
+ "allowFullscreen",
125
+ "defer",
126
+ "noModule",
127
+ "reversed",
128
+ "scoped",
129
+ "seamless",
130
+ "inert",
131
+ "draggable",
132
+ "indeterminate",
133
+ "formNoValidate",
134
+ "noValidate",
135
+ "isMap",
136
+ "default",
137
+ "open",
138
+ "spellcheck"
139
+ ]);
140
+ /**
141
+ * setProperty 时,若把 `false`、`''` 或非有限 number 当「不设置/默认」,应走 remove。
142
+ * 不在此集合的 IDL 由通用逻辑或单独分支处理;布尔见上表排除。
143
+ */
144
+ var IDL_FALSY_OR_NONFINITE_REMOVES = new Set([
145
+ "maxLength",
146
+ "minLength",
147
+ "size",
148
+ "cols",
149
+ "rows",
150
+ "tabIndex",
151
+ "colSpan",
152
+ "rowSpan",
153
+ "span",
154
+ "pattern",
155
+ "id",
156
+ "name",
157
+ "type",
158
+ "min",
159
+ "max",
160
+ "step",
161
+ "inputMode",
162
+ "autoComplete",
163
+ "autoCapitalize",
164
+ "placeholder",
165
+ "title",
166
+ "alt",
167
+ "src",
168
+ "href",
169
+ "crossOrigin",
170
+ "integrity",
171
+ "referrerPolicy",
172
+ "rel",
173
+ "target",
174
+ "as",
175
+ "action",
176
+ "accept",
177
+ "enctype",
178
+ "encType",
179
+ "method",
180
+ "formAction",
181
+ "formEnctype",
182
+ "formMethod",
183
+ "formTarget",
184
+ "download",
185
+ "list",
186
+ "sizes",
187
+ "srcset",
188
+ "useMap",
189
+ "align",
190
+ "allow",
191
+ "width",
192
+ "height",
193
+ "accessKey",
194
+ "slot",
195
+ "part",
196
+ "popover",
197
+ "loading",
198
+ "decoding",
199
+ "media",
200
+ "ping",
201
+ "acceptCharset",
202
+ "color",
203
+ "charset",
204
+ "content",
205
+ "httpEquiv",
206
+ "dateTime",
207
+ "cite",
208
+ "wrap",
209
+ "keytype",
210
+ "challenge",
211
+ "kind",
212
+ "srclang",
213
+ "icon",
214
+ "optimum",
215
+ "start",
216
+ "label",
217
+ "scheme",
218
+ "longDesc"
219
+ ]);
220
+ /**
221
+ * 是否应把 setProperty 改为 remove(`null`/`undefined` 由 setProperty 开头处理,此处不返回 true)。
222
+ * `false`、`''`、非有限数(NaN、±∞)在允许列表上时视为与「未设」同义。
223
+ */
224
+ function isUnsetLikeReflectedIdlValue(resolvedIdlKey, value) {
225
+ if (value == null) return false;
226
+ if (BOOLEAN_IDL_EXCLUDE_FROM_FALSY.has(resolvedIdlKey)) return false;
227
+ if (!IDL_FALSY_OR_NONFINITE_REMOVES.has(resolvedIdlKey)) return false;
228
+ if (value === false || value === "") return true;
229
+ if (typeof value === "number" && !Number.isFinite(value)) return true;
230
+ return false;
231
+ }
232
+ /**
233
+ * 由 IDL 名取 content attribute 名,无则 undefined。
234
+ */
235
+ function getContentAttrNameForIdl(resolvedIdlKey) {
236
+ return IDL_TO_CONTENT_ATTR[resolvedIdlKey];
237
+ }
238
+ //#endregion
239
+ //#region src/xml-jsx-attr-name.ts
240
+ /**
241
+ * 对标 React `possibleStandardNames`:SVG / Math 子树中 JSX 的 camelCase -> 真正写在 DOM 上的 attribute 名。
242
+ * 易错、不能简单「插横线」的名字放在 XML_JSX_NAME_TO_ATTR;其余走受控的 kebab 回退。
243
+ * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/possibleStandardNames.js
244
+ */
245
+ /** 须按 XML/命名空间 语义单独处理的 JSX 名 -> setAttribute(…) 的完整名字(`xml:lang` 等) */
246
+ var XML_OR_XMLNS_JSX = {
247
+ xmlBase: "xml:base",
248
+ "xml:base": "xml:base",
249
+ xmlLang: "xml:lang",
250
+ "xml:lang": "xml:lang",
251
+ xmlSpace: "xml:space",
252
+ "xml:space": "xml:space",
253
+ xmlns: "xmlns",
254
+ xmlnsXlink: "xmlns:xlink",
255
+ "xmlns:xlink": "xmlns:xlink"
256
+ };
257
+ /**
258
+ * 显式表:JSX 名 -> 属性名(多含 kebab 或需保留大小写如 viewBox)。
259
+ * 全小写、单字符(x,y,r,cx 等)不必列出,会原样使用。
260
+ */
261
+ var XML_JSX_NAME_TO_ATTR = {
262
+ tabIndex: "tabindex",
263
+ viewBox: "viewBox",
264
+ viewTarget: "viewTarget",
265
+ preserveAspectRatio: "preserveAspectRatio",
266
+ contentScriptType: "contentScriptType",
267
+ contentStyleType: "contentStyleType",
268
+ baseProfile: "baseProfile",
269
+ fontFamily: "font-family",
270
+ fontSize: "font-size",
271
+ fontStyle: "font-style",
272
+ fontWeight: "font-weight",
273
+ fontStretch: "font-stretch",
274
+ fontVariant: "font-variant",
275
+ fontSizeAdjust: "font-size-adjust",
276
+ textAnchor: "text-anchor",
277
+ textLength: "textLength",
278
+ textRendering: "text-rendering",
279
+ textDecoration: "text-decoration",
280
+ shapeRendering: "shape-rendering",
281
+ imageRendering: "image-rendering",
282
+ fillOpacity: "fill-opacity",
283
+ fillRule: "fill-rule",
284
+ strokeLinecap: "stroke-linecap",
285
+ strokeLinejoin: "stroke-linejoin",
286
+ strokeMiterlimit: "stroke-miterlimit",
287
+ strokeWidth: "stroke-width",
288
+ strokeOpacity: "stroke-opacity",
289
+ strokeDasharray: "stroke-dasharray",
290
+ strokeDashoffset: "stroke-dashoffset",
291
+ clipPath: "clip-path",
292
+ clipRule: "clip-rule",
293
+ clipPathUnits: "clipPathUnits",
294
+ colorInterpolation: "color-interpolation",
295
+ colorInterpolationFilters: "color-interpolation-filters",
296
+ colorRendering: "color-rendering",
297
+ colorProfile: "color-profile",
298
+ floodColor: "flood-color",
299
+ floodOpacity: "flood-opacity",
300
+ stopColor: "stop-color",
301
+ stopOpacity: "stop-opacity",
302
+ lightingColor: "lighting-color",
303
+ pointerEvents: "pointer-events",
304
+ maskContentUnits: "maskContentUnits",
305
+ patternContentUnits: "patternContentUnits",
306
+ patternTransform: "patternTransform",
307
+ patternUnits: "patternUnits",
308
+ gradientTransform: "gradientTransform",
309
+ gradientUnits: "gradientUnits",
310
+ filterUnits: "filterUnits",
311
+ filterRes: "filterRes",
312
+ primitiveUnits: "primitiveUnits",
313
+ kernelMatrix: "kernelMatrix",
314
+ kernelUnitLength: "kernelUnitLength",
315
+ markerStart: "marker-start",
316
+ markerEnd: "marker-end",
317
+ markerMid: "marker-mid",
318
+ markerWidth: "markerWidth",
319
+ markerHeight: "markerHeight",
320
+ markerUnits: "markerUnits",
321
+ startOffset: "startOffset",
322
+ pathLength: "pathLength",
323
+ keySplines: "keySplines",
324
+ keyPoints: "keyPoints",
325
+ keyTimes: "keyTimes",
326
+ xChannelSelector: "xChannelSelector",
327
+ yChannelSelector: "yChannelSelector",
328
+ stdDeviation: "stdDeviation",
329
+ specularConstant: "specularConstant",
330
+ specularExponent: "specularExponent",
331
+ diffuseConstant: "diffuseConstant",
332
+ limitingConeAngle: "limitingConeAngle",
333
+ requiredExtensions: "requiredExtensions",
334
+ requiredFeatures: "requiredFeatures",
335
+ tableValues: "tableValues",
336
+ numOctaves: "numOctaves",
337
+ wordSpacing: "word-spacing",
338
+ letterSpacing: "letter-spacing",
339
+ paintOrder: "paint-order",
340
+ transformOrigin: "transform-origin",
341
+ alignmentBaseline: "alignment-baseline",
342
+ dominantBaseline: "dominant-baseline",
343
+ baselineShift: "baseline-shift",
344
+ unicodeBidi: "unicode-bidi",
345
+ unicodeRange: "unicode-range",
346
+ unitsPerEm: "units-per-em",
347
+ xHeight: "x-height",
348
+ capHeight: "cap-height",
349
+ horizOriginX: "horiz-origin-x",
350
+ horizAdvX: "horiz-adv-x",
351
+ vertOriginX: "vert-origin-x",
352
+ vertOriginY: "vert-origin-y",
353
+ vAlphabetic: "v-alphabetic",
354
+ vHanging: "v-hanging",
355
+ vMathematical: "v-mathematical",
356
+ vIdeographic: "v-ideographic",
357
+ vertAdvY: "vert-adv-y",
358
+ refX: "refX",
359
+ refY: "refY"
360
+ };
361
+ /**
362
+ * 返回在 SVG / Math 元素上应使用的 content attribute 名(用于 set/removeAttribute,含 `xml:…`、`xmlns:…`)。
363
+ */
364
+ function getXmlPresentationAttributeName(jsxKey) {
365
+ if (XML_OR_XMLNS_JSX[jsxKey]) return XML_OR_XMLNS_JSX[jsxKey];
366
+ if (Object.prototype.hasOwnProperty.call(XML_JSX_NAME_TO_ATTR, jsxKey)) return XML_JSX_NAME_TO_ATTR[jsxKey];
367
+ if (!/[A-Z]/.test(jsxKey)) return jsxKey;
368
+ return jsxKey.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
369
+ }
370
+ //#endregion
2
371
  //#region src/dom-renderer.ts
3
372
  var DomRenderer = class DomRenderer extends NativeRenderer {
373
+ static XLINK_NS = "http://www.w3.org/1999/xlink";
374
+ /**
375
+ * React/JSX 式 xlink* 与 `xlink:` 开头的属性在 SVG/Math 等中须走 XLink 命名空间。
376
+ * 旧实现把 `xlink:` 后接的名字误当作 namespaceURI,且 `xlinkHref` 会退成普通 setAttribute 导致非标准属性名。
377
+ */
378
+ static XLINK_IDL_TO_LOCAL = {
379
+ xlinkHref: "href",
380
+ xlinkType: "type",
381
+ xlinkRole: "role",
382
+ xlinkTitle: "title",
383
+ xlinkShow: "show",
384
+ xlinkActuate: "actuate",
385
+ xlinkArcrole: "arcrole"
386
+ };
4
387
  static NAMESPACES = {
5
388
  svg: "http://www.w3.org/2000/svg",
6
389
  html: "http://www.w3.org/1999/xhtml",
@@ -13,18 +396,6 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
13
396
  INPUT: { readonly: "readOnly" },
14
397
  TEXTAREA: { readonly: "readOnly" }
15
398
  };
16
- /**
17
- * IDL 属性赋 `''` 会被转成数字 0(如 maxLength/minLength),无法表示「未设置」。
18
- * 这些键在移除时应删掉对应 content attribute。
19
- */
20
- static REMOVE_VIA_ATTRIBUTE = {
21
- maxLength: "maxlength",
22
- minLength: "minlength",
23
- size: "size",
24
- cols: "cols",
25
- rows: "rows",
26
- tabIndex: "tabindex"
27
- };
28
399
  createElement(name, namespace) {
29
400
  const ns = namespace && DomRenderer.NAMESPACES[namespace];
30
401
  if (ns) return document.createElementNS(ns, name);
@@ -40,7 +411,8 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
40
411
  parent.prepend(newChild);
41
412
  }
42
413
  insertAfter(newNode, ref) {
43
- if (ref.nextSibling) this.insertBefore(newNode, ref.nextSibling);
414
+ const next = ref.nextSibling;
415
+ if (next) this.insertBefore(newNode, next);
44
416
  else if (ref.parentNode) this.appendChild(ref.parentNode, newNode);
45
417
  else console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
46
418
  }
@@ -56,36 +428,38 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
56
428
  return;
57
429
  }
58
430
  if (namespace) {
59
- if (key.startsWith("xlink:")) {
60
- const ns = key.substring(6);
61
- node.setAttributeNS(ns, key, String(value));
62
- } else node.setAttribute(key, String(value));
431
+ if (DomRenderer.isXmlAttributeUnsetValue(value)) {
432
+ this.removeProperty(node, key, namespace);
433
+ return;
434
+ }
435
+ this.setNamespacedPresentation(node, key, String(value));
436
+ return;
437
+ }
438
+ const tagMap = this.propMap[node.tagName];
439
+ if (tagMap) key = tagMap[key] || key;
440
+ if (!namespace && isUnsetLikeReflectedIdlValue(key, value)) {
441
+ this.removeProperty(node, key, namespace);
63
442
  return;
64
443
  }
65
- const map = this.propMap[node.tagName];
66
- if (map) key = map[key] || key;
67
444
  if (key in node) {
68
- if (map && document.activeElement === node && key === "value") return;
445
+ if (tagMap && document.activeElement === node && key === "value") return;
69
446
  node[key] = value;
70
447
  } else node.setAttribute(key, value);
71
448
  }
72
449
  removeProperty(node, key, namespace) {
73
450
  if (namespace) {
74
- if (key.startsWith("xlink:")) {
75
- const ns = key.substring(6);
76
- node.removeAttributeNS(ns, key.substring(6));
77
- } else node.removeAttribute(key);
451
+ this.clearNamespacedPresentation(node, key);
78
452
  return;
79
453
  }
80
- const map = this.propMap[node.tagName];
81
- const resolvedKey = map ? map[key] || key : key;
82
- const attrName = DomRenderer.REMOVE_VIA_ATTRIBUTE[resolvedKey];
83
- if (attrName) {
84
- node.removeAttribute(attrName);
454
+ const tagMap = this.propMap[node.tagName];
455
+ const resolvedKey = tagMap ? tagMap[key] || key : key;
456
+ const contentAttr = getContentAttrNameForIdl(resolvedKey);
457
+ if (contentAttr) {
458
+ node.removeAttribute(contentAttr);
85
459
  return;
86
460
  }
87
461
  if (resolvedKey in node) node[resolvedKey] = "";
88
- else node.removeAttribute(key);
462
+ else node.removeAttribute(resolvedKey);
89
463
  }
90
464
  setClass(target, className) {
91
465
  target.setAttribute("class", className);
@@ -124,12 +498,53 @@ var DomRenderer = class DomRenderer extends NativeRenderer {
124
498
  if (type === "math") return "mathml";
125
499
  return namespace;
126
500
  }
501
+ /**
502
+ * SVG / MathML 等非 HTML 下无 HTML5 的「反射 IDL」表;通常用属性字符串表示,false/空串/非数常表示不输出该属性。
503
+ */
504
+ static isXmlAttributeUnsetValue(value) {
505
+ if (value === false || value === "") return true;
506
+ if (typeof value === "number" && !Number.isFinite(value)) return true;
507
+ return false;
508
+ }
509
+ setNamespacedPresentation(node, key, value) {
510
+ if (key === "className") {
511
+ node.className = value;
512
+ return;
513
+ }
514
+ const xlinkLocal = DomRenderer.XLINK_IDL_TO_LOCAL[key];
515
+ if (xlinkLocal) {
516
+ node.setAttributeNS(DomRenderer.XLINK_NS, xlinkLocal, value);
517
+ return;
518
+ }
519
+ if (key.startsWith("xlink:")) {
520
+ node.setAttributeNS(DomRenderer.XLINK_NS, key.slice(6), value);
521
+ return;
522
+ }
523
+ node.setAttribute(getXmlPresentationAttributeName(key), value);
524
+ }
525
+ clearNamespacedPresentation(node, key) {
526
+ if (key === "className") {
527
+ if ("className" in node) node.className = "";
528
+ node.removeAttribute("className");
529
+ return;
530
+ }
531
+ const xlinkLocal = DomRenderer.XLINK_IDL_TO_LOCAL[key];
532
+ if (xlinkLocal) {
533
+ node.removeAttributeNS(DomRenderer.XLINK_NS, xlinkLocal);
534
+ return;
535
+ }
536
+ if (key.startsWith("xlink:")) {
537
+ node.removeAttributeNS(DomRenderer.XLINK_NS, key.slice(6));
538
+ return;
539
+ }
540
+ node.removeAttribute(getXmlPresentationAttributeName(key));
541
+ }
127
542
  normalizedEventType(type) {
128
543
  return type.substring(2).toLowerCase();
129
544
  }
130
545
  insertBefore(newNode, ref) {
131
546
  if (ref.parentNode) ref.parentNode.insertBefore(newNode, ref);
132
- else console.warn(`Element "${ref instanceof Text ? ref.textContent : ref.tagName}" was accidentally deleted, and viewfly is unable to update the current view`);
547
+ 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`);
133
548
  }
134
549
  };
135
550
  //#endregion
@@ -145,45 +560,18 @@ function createApp(root, config = true) {
145
560
  });
146
561
  }
147
562
  //#endregion
148
- //#region src/create-portal.ts
149
- /**
150
- * 用于创建脱离当前 DOM 树的子节点,常用于弹窗等
151
- * @deprecated 即将弃用,请使用 @viewfly/core 模块的 Portal 组件实现
152
- * @param childRender
153
- * @param host
154
- * @example
155
- * ```tsx
156
- * function App() {
157
- * const number = createSignal(0)
158
- *
159
- * setInterval(() => {
160
- * number.set(number() + 1)
161
- * }, 1000)
162
- *
163
- * const ModalPortal = function (props) {
164
- * return createPortal(() => {
165
- * return <div class="modal">parent data is {props.text}</div>
166
- * }, document.body)
167
- * }
168
- * return () => {
169
- * return (
170
- * <div>
171
- * <div>data is {number()}</div>
172
- * <ModalPortal text={number()}/>
173
- * </div>
174
- * )
175
- * }
176
- * }
177
- * ```
178
- */
179
- function createPortal(childRender, host) {
180
- return {
181
- $portalHost: host,
182
- $render: childRender
183
- };
184
- }
185
- //#endregion
186
563
  //#region src/html-renderer.ts
564
+ /** JSX style 对象键 → CSS 属性名(含 webkit / moz / ms / o 前缀) */
565
+ function styleKeyToCssPropertyName(key) {
566
+ if (key.startsWith("--")) return key;
567
+ const toKebab = (s) => s.replace(/^[A-Z]/, (c) => c.toLowerCase()).replace(/([a-z\d])([A-Z])/g, "$1-$2").toLowerCase();
568
+ const m = key.match(/^(webkit|moz|ms|o)([A-Z])/);
569
+ if (m) {
570
+ const tail = key.slice(m[1].length);
571
+ return `-${m[1].toLowerCase()}-${toKebab(tail)}`;
572
+ }
573
+ return toKebab(key);
574
+ }
187
575
  var VDOMNode = class {
188
576
  parent = null;
189
577
  remove() {
@@ -221,6 +609,10 @@ var HTMLRenderer = class extends NativeRenderer {
221
609
  return new VDOMText(textContent);
222
610
  }
223
611
  setProperty(node, key, value) {
612
+ if (value == null) {
613
+ this.removeProperty(node, key);
614
+ return;
615
+ }
224
616
  node.props.set(key, value);
225
617
  }
226
618
  appendChild(parent, newChild) {
@@ -274,7 +666,7 @@ var HTMLRenderer = class extends NativeRenderer {
274
666
  * 轻量 DOM 转换为 HTML 字符串的转换器
275
667
  */
276
668
  var OutputTranslator = class OutputTranslator {
277
- static singleTags = "area,base,br,col,embed,hr,img,input,link,meta,source,track,wbr".split(",");
669
+ static singleTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
278
670
  static simpleXSSFilter = {
279
671
  text(text) {
280
672
  return text.replace(/[><&]/g, (str) => {
@@ -297,12 +689,7 @@ var OutputTranslator = class OutputTranslator {
297
689
  });
298
690
  },
299
691
  attrValue(text) {
300
- return text.replace(/["']/g, (str) => {
301
- return {
302
- "\"": "&quot;",
303
- "'": "&#x27;"
304
- }[str];
305
- });
692
+ return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
306
693
  }
307
694
  };
308
695
  singleTagTest = new RegExp(`^(${OutputTranslator.singleTags.join("|")})$`, "i");
@@ -322,13 +709,19 @@ var OutputTranslator = class OutputTranslator {
322
709
  const v = vDom.style.get(key);
323
710
  return !(v === void 0 || v === null || v === "");
324
711
  }).map((key) => {
325
- const k = key.replace(/(?=[A-Z])/g, "-").toLowerCase();
712
+ const k = styleKeyToCssPropertyName(key);
326
713
  return xssFilter.attrValue(`${k}:${vDom.style.get(key)}`);
327
714
  }).join(";");
328
- const attrs = Array.from(vDom.props.keys()).filter((key) => key !== "ref" && vDom.props.get(key) !== false).map((k) => {
329
- const key = xssFilter.attrName(k);
715
+ const attrs = Array.from(vDom.props.keys()).filter((k) => {
716
+ if (k === "ref") return false;
717
+ const value = vDom.props.get(k);
718
+ if (value == null || value === false) return false;
719
+ return !isUnsetLikeReflectedIdlValue(k, value);
720
+ }).map((k) => {
721
+ const logical = getContentAttrNameForIdl(k) ?? k;
722
+ const escaped = xssFilter.attrName(logical);
330
723
  const value = vDom.props.get(k);
331
- return value === true && /^\w+$/.test(key) ? `${key}` : `${key}="${xssFilter.attrValue(`${value}`)}"`;
724
+ return value === true && /^\w+$/.test(logical) ? `${escaped}` : `${escaped}="${xssFilter.attrValue(`${value}`)}"`;
332
725
  });
333
726
  if (styles) attrs.push(`style="${styles}"`);
334
727
  if (vDom.className) attrs.push(`class="${xssFilter.attrValue(vDom.className)}"`);
@@ -351,4 +744,4 @@ var OutputTranslator = class OutputTranslator {
351
744
  }
352
745
  };
353
746
  //#endregion
354
- export { DomRenderer, HTMLRenderer, OutputTranslator, VDOMElement, VDOMNode, VDOMText, createApp, createPortal };
747
+ export { DomRenderer, HTMLRenderer, IDL_FALSY_OR_NONFINITE_REMOVES, IDL_TO_CONTENT_ATTR, OutputTranslator, VDOMElement, VDOMNode, VDOMText, XML_JSX_NAME_TO_ATTR, createApp, getContentAttrNameForIdl, getXmlPresentationAttributeName, isUnsetLikeReflectedIdlValue };