[{"data":1,"prerenderedAt":2175},["ShallowReactive",2],{"\u002Fworks\u002Fvanity-h":3},{"work":4,"creator":2164},{"id":5,"title":6,"author":7,"body":8,"description":2151,"extension":2152,"meta":2153,"navigation":592,"order":2154,"path":2155,"repository":2156,"seo":2157,"stem":2158,"tags":2159,"type":2161,"website":2162,"__hash__":2163},"works\u002Fworks\u002F05.vanity-h.md","vanity-h","himavanta",{"type":9,"value":10,"toc":2137},"minimark",[11,14,22,25,33,36,42,45,47,52,321,324,327,329,333,480,483,486,488,492,495,498,548,551,554,672,674,678,683,701,984,988,991,994,1175,1178,1181,1183,1187,1274,1280,1290,1295,1345,1350,1379,1384,1392,1641,1643,1647,1658,1667,1838,1849,1858,1892,1903,1914,1916,1920,2101,2108,2113,2115,2119,2122,2125,2127,2131,2134],[12,13,6],"h1",{"id":6},[15,16,17,18,21],"p",{},"Hyperscript without the nesting — chainable syntax that reads the way the DOM looks.",[19,20],"br",{},"\n告别嵌套的 hyperscript —— 链式语法，读起来和 DOM 的结构一样直观。",[23,24],"hr",{},[15,26,27,28,32],{},"Hyperscript is a capable way to build UI without a compiler. The nested ",[29,30,31],"code",{},"h()"," calls are another story. vanity-h turns them into a chainable syntax that reads the way the DOM looks — flat, ordered, and obvious.",[15,34,35],{},"No JSX, no templates, no build step. Just functions that compose.",[15,37,38,39,41],{},"Hyperscript 是不依赖编译器构建 UI 的强大方式。但嵌套的 ",[29,40,31],{}," 调用是另一回事。vanity-h 将它们变成可链式调用的语法，读起来和 DOM 的结构一样——扁平、有序、一目了然。",[15,43,44],{},"没有 JSX，没有模板，没有构建步骤。只有组合的函数。",[23,46],{},[48,49,51],"h2",{"id":50},"the-problem-问题","The Problem \u002F 问题",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Traditional hyperscript — the structure is buried in nesting\n\u002F\u002F 传统 hyperscript —— 结构被埋没在嵌套中\nh('div', { class: 'card' }, [\n  h('header', { class: 'card-header' }, [\n    h('h2', null, 'Title'),\n    h('button', { class: 'close', onClick: handleClose }, '×')\n  ]),\n  h('main', { class: 'card-body' }, [\n    h('p', null, 'Content goes here')\n  ])\n])\n","js","",[29,60,61,70,76,124,158,190,242,250,283,309,315],{"__ignoreMap":58},[62,63,66],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sHwdD","\u002F\u002F Traditional hyperscript — the structure is buried in nesting\n",[62,71,73],{"class":64,"line":72},2,[62,74,75],{"class":68},"\u002F\u002F 传统 hyperscript —— 结构被埋没在嵌套中\n",[62,77,79,83,87,91,95,97,100,103,107,110,113,116,118,121],{"class":64,"line":78},3,[62,80,82],{"class":81},"s2Zo4","h",[62,84,86],{"class":85},"sTEyZ","(",[62,88,90],{"class":89},"sMK4o","'",[62,92,94],{"class":93},"sfazB","div",[62,96,90],{"class":89},[62,98,99],{"class":89},",",[62,101,102],{"class":89}," {",[62,104,106],{"class":105},"swJcz"," class",[62,108,109],{"class":89},":",[62,111,112],{"class":89}," '",[62,114,115],{"class":93},"card",[62,117,90],{"class":89},[62,119,120],{"class":89}," },",[62,122,123],{"class":85}," [\n",[62,125,127,130,132,134,137,139,141,143,145,147,149,152,154,156],{"class":64,"line":126},4,[62,128,129],{"class":81},"  h",[62,131,86],{"class":85},[62,133,90],{"class":89},[62,135,136],{"class":93},"header",[62,138,90],{"class":89},[62,140,99],{"class":89},[62,142,102],{"class":89},[62,144,106],{"class":105},[62,146,109],{"class":89},[62,148,112],{"class":89},[62,150,151],{"class":93},"card-header",[62,153,90],{"class":89},[62,155,120],{"class":89},[62,157,123],{"class":85},[62,159,161,164,166,168,170,172,174,177,179,182,184,187],{"class":64,"line":160},5,[62,162,163],{"class":81},"    h",[62,165,86],{"class":85},[62,167,90],{"class":89},[62,169,48],{"class":93},[62,171,90],{"class":89},[62,173,99],{"class":89},[62,175,176],{"class":89}," null,",[62,178,112],{"class":89},[62,180,181],{"class":93},"Title",[62,183,90],{"class":89},[62,185,186],{"class":85},")",[62,188,189],{"class":89},",\n",[62,191,193,195,197,199,202,204,206,208,210,212,214,217,219,221,224,226,229,232,234,237,239],{"class":64,"line":192},6,[62,194,163],{"class":81},[62,196,86],{"class":85},[62,198,90],{"class":89},[62,200,201],{"class":93},"button",[62,203,90],{"class":89},[62,205,99],{"class":89},[62,207,102],{"class":89},[62,209,106],{"class":105},[62,211,109],{"class":89},[62,213,112],{"class":89},[62,215,216],{"class":93},"close",[62,218,90],{"class":89},[62,220,99],{"class":89},[62,222,223],{"class":105}," onClick",[62,225,109],{"class":89},[62,227,228],{"class":85}," handleClose ",[62,230,231],{"class":89},"},",[62,233,112],{"class":89},[62,235,236],{"class":93},"×",[62,238,90],{"class":89},[62,240,241],{"class":85},")\n",[62,243,245,248],{"class":64,"line":244},7,[62,246,247],{"class":85},"  ])",[62,249,189],{"class":89},[62,251,253,255,257,259,262,264,266,268,270,272,274,277,279,281],{"class":64,"line":252},8,[62,254,129],{"class":81},[62,256,86],{"class":85},[62,258,90],{"class":89},[62,260,261],{"class":93},"main",[62,263,90],{"class":89},[62,265,99],{"class":89},[62,267,102],{"class":89},[62,269,106],{"class":105},[62,271,109],{"class":89},[62,273,112],{"class":89},[62,275,276],{"class":93},"card-body",[62,278,90],{"class":89},[62,280,120],{"class":89},[62,282,123],{"class":85},[62,284,286,288,290,292,294,296,298,300,302,305,307],{"class":64,"line":285},9,[62,287,163],{"class":81},[62,289,86],{"class":85},[62,291,90],{"class":89},[62,293,15],{"class":93},[62,295,90],{"class":89},[62,297,99],{"class":89},[62,299,176],{"class":89},[62,301,112],{"class":89},[62,303,304],{"class":93},"Content goes here",[62,306,90],{"class":89},[62,308,241],{"class":85},[62,310,312],{"class":64,"line":311},10,[62,313,314],{"class":85},"  ])\n",[62,316,318],{"class":64,"line":317},11,[62,319,320],{"class":85},"])\n",[15,322,323],{},"Every layer adds indentation. Attributes, events, and children interleave. The visual shape of the code has little to do with the shape of the DOM.",[15,325,326],{},"每一层都增加缩进。属性、事件和子节点混杂在一起。代码的视觉形态与 DOM 的结构几乎没有关联。",[23,328],{},[48,330,332],{"id":331},"the-vanity-h-way-vanity-h-的方式","The vanity-h Way \u002F vanity-h 的方式",[53,334,336],{"className":55,"code":335,"language":57,"meta":58,"style":58},"div.class('card')(\n  header.class('card-header')(\n    h2('Title'),\n    button.class('close').onClick(handleClose)('×')\n  ),\n  main.class('card-body')(\n    p('Content goes here')\n  )\n)\n",[29,337,338,359,378,395,430,437,456,471,476],{"__ignoreMap":58},[62,339,340,342,345,348,350,352,354,356],{"class":64,"line":65},[62,341,94],{"class":85},[62,343,344],{"class":89},".",[62,346,347],{"class":81},"class",[62,349,86],{"class":85},[62,351,90],{"class":89},[62,353,115],{"class":93},[62,355,90],{"class":89},[62,357,358],{"class":85},")(\n",[62,360,361,364,366,368,370,372,374,376],{"class":64,"line":72},[62,362,363],{"class":85},"  header",[62,365,344],{"class":89},[62,367,347],{"class":81},[62,369,86],{"class":85},[62,371,90],{"class":89},[62,373,151],{"class":93},[62,375,90],{"class":89},[62,377,358],{"class":85},[62,379,380,383,385,387,389,391,393],{"class":64,"line":78},[62,381,382],{"class":81},"    h2",[62,384,86],{"class":85},[62,386,90],{"class":89},[62,388,181],{"class":93},[62,390,90],{"class":89},[62,392,186],{"class":85},[62,394,189],{"class":89},[62,396,397,400,402,404,406,408,410,412,414,416,419,422,424,426,428],{"class":64,"line":126},[62,398,399],{"class":85},"    button",[62,401,344],{"class":89},[62,403,347],{"class":81},[62,405,86],{"class":85},[62,407,90],{"class":89},[62,409,216],{"class":93},[62,411,90],{"class":89},[62,413,186],{"class":85},[62,415,344],{"class":89},[62,417,418],{"class":81},"onClick",[62,420,421],{"class":85},"(handleClose)(",[62,423,90],{"class":89},[62,425,236],{"class":93},[62,427,90],{"class":89},[62,429,241],{"class":85},[62,431,432,435],{"class":64,"line":160},[62,433,434],{"class":85},"  )",[62,436,189],{"class":89},[62,438,439,442,444,446,448,450,452,454],{"class":64,"line":192},[62,440,441],{"class":85},"  main",[62,443,344],{"class":89},[62,445,347],{"class":81},[62,447,86],{"class":85},[62,449,90],{"class":89},[62,451,276],{"class":93},[62,453,90],{"class":89},[62,455,358],{"class":85},[62,457,458,461,463,465,467,469],{"class":64,"line":244},[62,459,460],{"class":81},"    p",[62,462,86],{"class":85},[62,464,90],{"class":89},[62,466,304],{"class":93},[62,468,90],{"class":89},[62,470,241],{"class":85},[62,472,473],{"class":64,"line":252},[62,474,475],{"class":85},"  )\n",[62,477,478],{"class":64,"line":285},[62,479,241],{"class":85},[15,481,482],{},"The structure matches what you see in the browser. The outer element wraps its children. Attributes chain before the final call. No arrays, no commas between siblings, no closing brackets fighting for attention.",[15,484,485],{},"结构与你浏览器中看到的一致。外层元素包裹其子节点。属性在最终调用前链式设置。没有数组，没有同级元素之间的逗号，没有争抢注意力的括号。",[23,487],{},[48,489,491],{"id":490},"how-it-works-原理","How It Works \u002F 原理",[15,493,494],{},"vanity-h is a thin wrapper around any hyperscript function. It gives you a set of proxy-based tag functions. Each tag function collects attributes through chained calls, then renders when invoked as a function with children.",[15,496,497],{},"vanity-h 是任意 hyperscript 函数的薄包装。它提供了一组基于 Proxy 的标签函数。每个标签函数通过链式调用收集属性，在被作为函数调用并传入子节点时渲染。",[53,499,501],{"className":55,"code":500,"language":57,"meta":58,"style":58},"button.class('btn').onClick(handle)('Click me')\n\u002F\u002F  config  →  config  →  config   →  render\n\u002F\u002F  配置 → 配置 → 配置 → 渲染\n",[29,502,503,538,543],{"__ignoreMap":58},[62,504,505,507,509,511,513,515,518,520,522,524,526,529,531,534,536],{"class":64,"line":65},[62,506,201],{"class":85},[62,508,344],{"class":89},[62,510,347],{"class":81},[62,512,86],{"class":85},[62,514,90],{"class":89},[62,516,517],{"class":93},"btn",[62,519,90],{"class":89},[62,521,186],{"class":85},[62,523,344],{"class":89},[62,525,418],{"class":81},[62,527,528],{"class":85},"(handle)(",[62,530,90],{"class":89},[62,532,533],{"class":93},"Click me",[62,535,90],{"class":89},[62,537,241],{"class":85},[62,539,540],{"class":64,"line":72},[62,541,542],{"class":68},"\u002F\u002F  config  →  config  →  config   →  render\n",[62,544,545],{"class":64,"line":78},[62,546,547],{"class":68},"\u002F\u002F  配置 → 配置 → 配置 → 渲染\n",[15,549,550],{},"The chained calls return new proxies. The original is never mutated. You can reuse a configured element without affecting other uses.",[15,552,553],{},"链式调用返回新的 Proxy。原始对象永远不会被修改。你可以复用已配置的元素，而不影响其他使用处。",[53,555,557],{"className":55,"code":556,"language":57,"meta":58,"style":58},"const baseBtn = button.class('btn')\n\nconst redBtn = baseBtn.style('color: red')('Red')\nconst blueBtn = baseBtn.style('color: blue')('Blue')\n\u002F\u002F baseBtn remains unchanged \u002F baseBtn 保持不变\n",[29,558,559,588,594,632,667],{"__ignoreMap":58},[62,560,561,565,568,571,574,576,578,580,582,584,586],{"class":64,"line":65},[62,562,564],{"class":563},"spNyl","const",[62,566,567],{"class":85}," baseBtn ",[62,569,570],{"class":89},"=",[62,572,573],{"class":85}," button",[62,575,344],{"class":89},[62,577,347],{"class":81},[62,579,86],{"class":85},[62,581,90],{"class":89},[62,583,517],{"class":93},[62,585,90],{"class":89},[62,587,241],{"class":85},[62,589,590],{"class":64,"line":72},[62,591,593],{"emptyLinePlaceholder":592},true,"\n",[62,595,596,598,601,603,606,608,611,613,615,618,620,623,625,628,630],{"class":64,"line":78},[62,597,564],{"class":563},[62,599,600],{"class":85}," redBtn ",[62,602,570],{"class":89},[62,604,605],{"class":85}," baseBtn",[62,607,344],{"class":89},[62,609,610],{"class":81},"style",[62,612,86],{"class":85},[62,614,90],{"class":89},[62,616,617],{"class":93},"color: red",[62,619,90],{"class":89},[62,621,622],{"class":85},")(",[62,624,90],{"class":89},[62,626,627],{"class":93},"Red",[62,629,90],{"class":89},[62,631,241],{"class":85},[62,633,634,636,639,641,643,645,647,649,651,654,656,658,660,663,665],{"class":64,"line":126},[62,635,564],{"class":563},[62,637,638],{"class":85}," blueBtn ",[62,640,570],{"class":89},[62,642,605],{"class":85},[62,644,344],{"class":89},[62,646,610],{"class":81},[62,648,86],{"class":85},[62,650,90],{"class":89},[62,652,653],{"class":93},"color: blue",[62,655,90],{"class":89},[62,657,622],{"class":85},[62,659,90],{"class":89},[62,661,662],{"class":93},"Blue",[62,664,90],{"class":89},[62,666,241],{"class":85},[62,668,669],{"class":64,"line":160},[62,670,671],{"class":68},"\u002F\u002F baseBtn remains unchanged \u002F baseBtn 保持不变\n",[23,673],{},[48,675,677],{"id":676},"quick-start-快速开始","Quick Start \u002F 快速开始",[679,680,682],"h3",{"id":681},"npm","NPM",[53,684,688],{"className":685,"code":686,"language":687,"meta":58,"style":58},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install vanity-h\n","bash",[29,689,690],{"__ignoreMap":58},[62,691,692,695,698],{"class":64,"line":65},[62,693,681],{"class":694},"sBMFI",[62,696,697],{"class":93}," install",[62,699,700],{"class":93}," vanity-h\n",[53,702,704],{"className":55,"code":703,"language":57,"meta":58,"style":58},"import { h, render } from 'preact'\nimport createVanity from 'vanity-h'\n\nconst { div, span, button } = createVanity(h)\n\nfunction App() {\n  const [count, setCount] = useState(0)\n\n  return div.class('app')(\n    span('Count: ', count),\n    button.onClick(() => setCount(c => c + 1))('+1'),\n  )\n}\n\nrender(App(), document.getElementById('app'))\n",[29,705,706,736,752,756,787,791,805,837,841,863,886,934,939,945,950],{"__ignoreMap":58},[62,707,708,712,714,717,719,722,725,728,730,733],{"class":64,"line":65},[62,709,711],{"class":710},"s7zQu","import",[62,713,102],{"class":89},[62,715,716],{"class":85}," h",[62,718,99],{"class":89},[62,720,721],{"class":85}," render",[62,723,724],{"class":89}," }",[62,726,727],{"class":710}," from",[62,729,112],{"class":89},[62,731,732],{"class":93},"preact",[62,734,735],{"class":89},"'\n",[62,737,738,740,743,746,748,750],{"class":64,"line":72},[62,739,711],{"class":710},[62,741,742],{"class":85}," createVanity ",[62,744,745],{"class":710},"from",[62,747,112],{"class":89},[62,749,6],{"class":93},[62,751,735],{"class":89},[62,753,754],{"class":64,"line":78},[62,755,593],{"emptyLinePlaceholder":592},[62,757,758,760,762,765,767,770,772,775,778,781,784],{"class":64,"line":126},[62,759,564],{"class":563},[62,761,102],{"class":89},[62,763,764],{"class":85}," div",[62,766,99],{"class":89},[62,768,769],{"class":85}," span",[62,771,99],{"class":89},[62,773,774],{"class":85}," button ",[62,776,777],{"class":89},"}",[62,779,780],{"class":89}," =",[62,782,783],{"class":81}," createVanity",[62,785,786],{"class":85},"(h)\n",[62,788,789],{"class":64,"line":160},[62,790,593],{"emptyLinePlaceholder":592},[62,792,793,796,799,802],{"class":64,"line":192},[62,794,795],{"class":563},"function",[62,797,798],{"class":81}," App",[62,800,801],{"class":89},"()",[62,803,804],{"class":89}," {\n",[62,806,807,810,813,816,818,821,824,826,829,831,835],{"class":64,"line":244},[62,808,809],{"class":563},"  const",[62,811,812],{"class":89}," [",[62,814,815],{"class":85},"count",[62,817,99],{"class":89},[62,819,820],{"class":85}," setCount",[62,822,823],{"class":89},"]",[62,825,780],{"class":89},[62,827,828],{"class":81}," useState",[62,830,86],{"class":105},[62,832,834],{"class":833},"sbssI","0",[62,836,241],{"class":105},[62,838,839],{"class":64,"line":252},[62,840,593],{"emptyLinePlaceholder":592},[62,842,843,846,848,850,852,854,856,859,861],{"class":64,"line":285},[62,844,845],{"class":710},"  return",[62,847,764],{"class":85},[62,849,344],{"class":89},[62,851,347],{"class":81},[62,853,86],{"class":105},[62,855,90],{"class":89},[62,857,858],{"class":93},"app",[62,860,90],{"class":89},[62,862,358],{"class":105},[62,864,865,868,870,872,875,877,879,882,884],{"class":64,"line":311},[62,866,867],{"class":81},"    span",[62,869,86],{"class":105},[62,871,90],{"class":89},[62,873,874],{"class":93},"Count: ",[62,876,90],{"class":89},[62,878,99],{"class":89},[62,880,881],{"class":85}," count",[62,883,186],{"class":105},[62,885,189],{"class":89},[62,887,888,890,892,894,896,898,901,903,905,909,911,914,917,920,923,925,928,930,932],{"class":64,"line":317},[62,889,399],{"class":85},[62,891,344],{"class":89},[62,893,418],{"class":81},[62,895,86],{"class":105},[62,897,801],{"class":89},[62,899,900],{"class":563}," =>",[62,902,820],{"class":81},[62,904,86],{"class":105},[62,906,908],{"class":907},"sHdIc","c",[62,910,900],{"class":563},[62,912,913],{"class":85}," c",[62,915,916],{"class":89}," +",[62,918,919],{"class":833}," 1",[62,921,922],{"class":105},"))(",[62,924,90],{"class":89},[62,926,927],{"class":93},"+1",[62,929,90],{"class":89},[62,931,186],{"class":105},[62,933,189],{"class":89},[62,935,937],{"class":64,"line":936},12,[62,938,475],{"class":105},[62,940,942],{"class":64,"line":941},13,[62,943,944],{"class":89},"}\n",[62,946,948],{"class":64,"line":947},14,[62,949,593],{"emptyLinePlaceholder":592},[62,951,953,956,958,961,963,965,968,970,973,975,977,979,981],{"class":64,"line":952},15,[62,954,955],{"class":81},"render",[62,957,86],{"class":85},[62,959,960],{"class":81},"App",[62,962,801],{"class":85},[62,964,99],{"class":89},[62,966,967],{"class":85}," document",[62,969,344],{"class":89},[62,971,972],{"class":81},"getElementById",[62,974,86],{"class":85},[62,976,90],{"class":89},[62,978,858],{"class":93},[62,980,90],{"class":89},[62,982,983],{"class":85},"))\n",[679,985,987],{"id":986},"cdn","CDN",[15,989,990],{},"No build step required. Import directly in the browser.",[15,992,993],{},"无需构建步骤。直接在浏览器中导入。",[53,995,999],{"className":996,"code":997,"language":998,"meta":58,"style":58},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript type=\"module\">\n    import { h, render } from 'https:\u002F\u002Fesm.sh\u002Fpreact'\n    import createVanity from 'https:\u002F\u002Fesm.sh\u002Fvanity-h'\n\n    const { div, span } = createVanity(h)\n\n    const app = () => div.class('app')(span('Hello World'))\n    render(app(), document.getElementById('app'))\n\u003C\u002Fscript>\n","html",[29,1000,1001,1025,1049,1064,1068,1090,1094,1137,1166],{"__ignoreMap":58},[62,1002,1003,1006,1009,1012,1014,1017,1020,1022],{"class":64,"line":65},[62,1004,1005],{"class":89},"\u003C",[62,1007,1008],{"class":105},"script",[62,1010,1011],{"class":563}," type",[62,1013,570],{"class":89},[62,1015,1016],{"class":89},"\"",[62,1018,1019],{"class":93},"module",[62,1021,1016],{"class":89},[62,1023,1024],{"class":89},">\n",[62,1026,1027,1030,1032,1034,1036,1038,1040,1042,1044,1047],{"class":64,"line":72},[62,1028,1029],{"class":710},"    import",[62,1031,102],{"class":89},[62,1033,716],{"class":85},[62,1035,99],{"class":89},[62,1037,721],{"class":85},[62,1039,724],{"class":89},[62,1041,727],{"class":710},[62,1043,112],{"class":89},[62,1045,1046],{"class":93},"https:\u002F\u002Fesm.sh\u002Fpreact",[62,1048,735],{"class":89},[62,1050,1051,1053,1055,1057,1059,1062],{"class":64,"line":78},[62,1052,1029],{"class":710},[62,1054,742],{"class":85},[62,1056,745],{"class":710},[62,1058,112],{"class":89},[62,1060,1061],{"class":93},"https:\u002F\u002Fesm.sh\u002Fvanity-h",[62,1063,735],{"class":89},[62,1065,1066],{"class":64,"line":126},[62,1067,593],{"emptyLinePlaceholder":592},[62,1069,1070,1073,1075,1077,1079,1082,1084,1086,1088],{"class":64,"line":160},[62,1071,1072],{"class":563},"    const",[62,1074,102],{"class":89},[62,1076,764],{"class":85},[62,1078,99],{"class":89},[62,1080,1081],{"class":85}," span ",[62,1083,777],{"class":89},[62,1085,780],{"class":89},[62,1087,783],{"class":81},[62,1089,786],{"class":85},[62,1091,1092],{"class":64,"line":192},[62,1093,593],{"emptyLinePlaceholder":592},[62,1095,1096,1098,1101,1103,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1133,1135],{"class":64,"line":244},[62,1097,1072],{"class":563},[62,1099,1100],{"class":85}," app ",[62,1102,570],{"class":89},[62,1104,1105],{"class":89}," ()",[62,1107,900],{"class":563},[62,1109,764],{"class":85},[62,1111,344],{"class":89},[62,1113,347],{"class":81},[62,1115,86],{"class":85},[62,1117,90],{"class":89},[62,1119,858],{"class":93},[62,1121,90],{"class":89},[62,1123,622],{"class":85},[62,1125,62],{"class":81},[62,1127,86],{"class":85},[62,1129,90],{"class":89},[62,1131,1132],{"class":93},"Hello World",[62,1134,90],{"class":89},[62,1136,983],{"class":85},[62,1138,1139,1142,1144,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164],{"class":64,"line":252},[62,1140,1141],{"class":81},"    render",[62,1143,86],{"class":85},[62,1145,858],{"class":81},[62,1147,801],{"class":85},[62,1149,99],{"class":89},[62,1151,967],{"class":85},[62,1153,344],{"class":89},[62,1155,972],{"class":81},[62,1157,86],{"class":85},[62,1159,90],{"class":89},[62,1161,858],{"class":93},[62,1163,90],{"class":89},[62,1165,983],{"class":85},[62,1167,1168,1171,1173],{"class":64,"line":285},[62,1169,1170],{"class":89},"\u003C\u002F",[62,1172,1008],{"class":105},[62,1174,1024],{"class":89},[15,1176,1177],{},"Works with any hyperscript renderer — Preact, React, Vue, Snabbdom, or your own.",[15,1179,1180],{},"与任何 hyperscript 渲染器配合使用——Preact、React、Vue、Snabbdom，或你自己的渲染器。",[23,1182],{},[48,1184,1186],{"id":1185},"usage-使用方式","Usage \u002F 使用方式",[53,1188,1190],{"className":55,"code":1189,"language":57,"meta":58,"style":58},"import createVanity from 'vanity-h'\nimport { h } from 'your-renderer'\n\nconst { div, h1, p, a, img, input, button } = createVanity(h)\n",[29,1191,1192,1206,1225,1229],{"__ignoreMap":58},[62,1193,1194,1196,1198,1200,1202,1204],{"class":64,"line":65},[62,1195,711],{"class":710},[62,1197,742],{"class":85},[62,1199,745],{"class":710},[62,1201,112],{"class":89},[62,1203,6],{"class":93},[62,1205,735],{"class":89},[62,1207,1208,1210,1212,1214,1216,1218,1220,1223],{"class":64,"line":72},[62,1209,711],{"class":710},[62,1211,102],{"class":89},[62,1213,716],{"class":85},[62,1215,724],{"class":89},[62,1217,727],{"class":710},[62,1219,112],{"class":89},[62,1221,1222],{"class":93},"your-renderer",[62,1224,735],{"class":89},[62,1226,1227],{"class":64,"line":78},[62,1228,593],{"emptyLinePlaceholder":592},[62,1230,1231,1233,1235,1237,1239,1242,1244,1247,1249,1252,1254,1257,1259,1262,1264,1266,1268,1270,1272],{"class":64,"line":126},[62,1232,564],{"class":563},[62,1234,102],{"class":89},[62,1236,764],{"class":85},[62,1238,99],{"class":89},[62,1240,1241],{"class":85}," h1",[62,1243,99],{"class":89},[62,1245,1246],{"class":85}," p",[62,1248,99],{"class":89},[62,1250,1251],{"class":85}," a",[62,1253,99],{"class":89},[62,1255,1256],{"class":85}," img",[62,1258,99],{"class":89},[62,1260,1261],{"class":85}," input",[62,1263,99],{"class":89},[62,1265,774],{"class":85},[62,1267,777],{"class":89},[62,1269,780],{"class":89},[62,1271,783],{"class":81},[62,1273,786],{"class":85},[15,1275,1276],{},[1277,1278,1279],"strong",{},"Tags \u002F 标签",[1281,1282,1283,1287],"ul",{},[1284,1285,1286],"li",{},"Any HTML element. The functions are created lazily, so you only pay for what you use.",[1284,1288,1289],{},"任意 HTML 元素。函数是惰性创建的，只有你用到的才会生成。",[15,1291,1292],{},[1277,1293,1294],{},"Attributes \u002F 属性",[1281,1296,1297,1324],{},[1284,1298,1299,1300,1302,1303,1302,1305,1302,1308,1302,1311,1302,1314,1302,1317,1302,1320,1323],{},"Chain them. ",[29,1301,347],{},", ",[29,1304,610],{},[29,1306,1307],{},"id",[29,1309,1310],{},"href",[29,1312,1313],{},"src",[29,1315,1316],{},"disabled",[29,1318,1319],{},"placeholder",[29,1321,1322],{},"type",", and any custom attribute.",[1284,1325,1326,1327,1329,1330,1329,1332,1329,1334,1329,1336,1329,1338,1329,1340,1329,1342,1344],{},"链式设置。",[29,1328,347],{},"、",[29,1331,610],{},[29,1333,1307],{},[29,1335,1310],{},[29,1337,1313],{},[29,1339,1316],{},[29,1341,1319],{},[29,1343,1322],{},"，以及任何自定义属性。",[15,1346,1347],{},[1277,1348,1349],{},"Events \u002F 事件",[1281,1351,1352,1367],{},[1284,1353,1354,1302,1356,1302,1359,1362,1363,1366],{},[29,1355,418],{},[29,1357,1358],{},"onInput",[29,1360,1361],{},"onSubmit",", or any ",[29,1364,1365],{},"onXxx"," handler.",[1284,1368,1369,1329,1371,1329,1373,1375,1376,1378],{},[29,1370,418],{},[29,1372,1358],{},[29,1374,1361],{},"，或任意 ",[29,1377,1365],{}," 处理器。",[15,1380,1381],{},[1277,1382,1383],{},"Children \u002F 子节点",[1281,1385,1386,1389],{},[1284,1387,1388],{},"Pass them as arguments to the final call. Strings, numbers, other elements, arrays — anything your hyperscript function accepts.",[1284,1390,1391],{},"在最终调用中作为参数传入。字符串、数字、其他元素、数组——任意你的 hyperscript 函数接受的内容。",[53,1393,1395],{"className":55,"code":1394,"language":57,"meta":58,"style":58},"\u002F\u002F Attribute chaining \u002F 属性链式调用\ndiv.class('container').id('main').style('padding: 1rem')()\n\n\u002F\u002F Void elements — no children \u002F Void 元素 —— 无子节点\ninput.type('text').placeholder('Enter name')()\nbr()\nhr()\n\n\u002F\u002F Mix of children types \u002F 混合子节点类型\ndiv(\n  h1('Welcome'),\n  p('This is a ', a.href('\u002Fabout')('link')),\n  ['a', 'b', 'c'].map(s => span(s)),\n)\n",[29,1396,1397,1402,1451,1455,1460,1495,1502,1508,1512,1517,1524,1542,1587,1637],{"__ignoreMap":58},[62,1398,1399],{"class":64,"line":65},[62,1400,1401],{"class":68},"\u002F\u002F Attribute chaining \u002F 属性链式调用\n",[62,1403,1404,1406,1408,1410,1412,1414,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1446,1448],{"class":64,"line":72},[62,1405,94],{"class":85},[62,1407,344],{"class":89},[62,1409,347],{"class":81},[62,1411,86],{"class":85},[62,1413,90],{"class":89},[62,1415,1416],{"class":93},"container",[62,1418,90],{"class":89},[62,1420,186],{"class":85},[62,1422,344],{"class":89},[62,1424,1307],{"class":81},[62,1426,86],{"class":85},[62,1428,90],{"class":89},[62,1430,261],{"class":93},[62,1432,90],{"class":89},[62,1434,186],{"class":85},[62,1436,344],{"class":89},[62,1438,610],{"class":81},[62,1440,86],{"class":85},[62,1442,90],{"class":89},[62,1444,1445],{"class":93},"padding: 1rem",[62,1447,90],{"class":89},[62,1449,1450],{"class":85},")()\n",[62,1452,1453],{"class":64,"line":78},[62,1454,593],{"emptyLinePlaceholder":592},[62,1456,1457],{"class":64,"line":126},[62,1458,1459],{"class":68},"\u002F\u002F Void elements — no children \u002F Void 元素 —— 无子节点\n",[62,1461,1462,1465,1467,1469,1471,1473,1476,1478,1480,1482,1484,1486,1488,1491,1493],{"class":64,"line":160},[62,1463,1464],{"class":85},"input",[62,1466,344],{"class":89},[62,1468,1322],{"class":81},[62,1470,86],{"class":85},[62,1472,90],{"class":89},[62,1474,1475],{"class":93},"text",[62,1477,90],{"class":89},[62,1479,186],{"class":85},[62,1481,344],{"class":89},[62,1483,1319],{"class":81},[62,1485,86],{"class":85},[62,1487,90],{"class":89},[62,1489,1490],{"class":93},"Enter name",[62,1492,90],{"class":89},[62,1494,1450],{"class":85},[62,1496,1497,1499],{"class":64,"line":192},[62,1498,19],{"class":81},[62,1500,1501],{"class":85},"()\n",[62,1503,1504,1506],{"class":64,"line":244},[62,1505,23],{"class":81},[62,1507,1501],{"class":85},[62,1509,1510],{"class":64,"line":252},[62,1511,593],{"emptyLinePlaceholder":592},[62,1513,1514],{"class":64,"line":285},[62,1515,1516],{"class":68},"\u002F\u002F Mix of children types \u002F 混合子节点类型\n",[62,1518,1519,1521],{"class":64,"line":311},[62,1520,94],{"class":81},[62,1522,1523],{"class":85},"(\n",[62,1525,1526,1529,1531,1533,1536,1538,1540],{"class":64,"line":317},[62,1527,1528],{"class":81},"  h1",[62,1530,86],{"class":85},[62,1532,90],{"class":89},[62,1534,1535],{"class":93},"Welcome",[62,1537,90],{"class":89},[62,1539,186],{"class":85},[62,1541,189],{"class":89},[62,1543,1544,1547,1549,1551,1554,1556,1558,1560,1562,1564,1566,1568,1571,1573,1575,1577,1580,1582,1585],{"class":64,"line":936},[62,1545,1546],{"class":81},"  p",[62,1548,86],{"class":85},[62,1550,90],{"class":89},[62,1552,1553],{"class":93},"This is a ",[62,1555,90],{"class":89},[62,1557,99],{"class":89},[62,1559,1251],{"class":85},[62,1561,344],{"class":89},[62,1563,1310],{"class":81},[62,1565,86],{"class":85},[62,1567,90],{"class":89},[62,1569,1570],{"class":93},"\u002Fabout",[62,1572,90],{"class":89},[62,1574,622],{"class":85},[62,1576,90],{"class":89},[62,1578,1579],{"class":93},"link",[62,1581,90],{"class":89},[62,1583,1584],{"class":85},"))",[62,1586,189],{"class":89},[62,1588,1589,1592,1594,1597,1599,1601,1603,1606,1608,1610,1612,1614,1616,1618,1620,1623,1625,1628,1630,1632,1635],{"class":64,"line":941},[62,1590,1591],{"class":85},"  [",[62,1593,90],{"class":89},[62,1595,1596],{"class":93},"a",[62,1598,90],{"class":89},[62,1600,99],{"class":89},[62,1602,112],{"class":89},[62,1604,1605],{"class":93},"b",[62,1607,90],{"class":89},[62,1609,99],{"class":89},[62,1611,112],{"class":89},[62,1613,908],{"class":93},[62,1615,90],{"class":89},[62,1617,823],{"class":85},[62,1619,344],{"class":89},[62,1621,1622],{"class":81},"map",[62,1624,86],{"class":85},[62,1626,1627],{"class":907},"s",[62,1629,900],{"class":563},[62,1631,769],{"class":81},[62,1633,1634],{"class":85},"(s))",[62,1636,189],{"class":89},[62,1638,1639],{"class":64,"line":947},[62,1640,241],{"class":85},[23,1642],{},[48,1644,1646],{"id":1645},"wrapping-components-包装组件","Wrapping Components \u002F 包装组件",[15,1648,1649,1650,1653,1654,1657],{},"Use ",[29,1651,1652],{},"x(Component)"," — returned by ",[29,1655,1656],{},"createVanity(h)"," — to turn any component function into a chainable vanity-h element. This works with your own components, third‑party components, or anything that accepts props.",[15,1659,1660,1661,1663,1664,1666],{},"使用 ",[29,1662,1656],{}," 返回的 ",[29,1665,1652],{}," 可将任意组件函数转换为可链式调用的 vanity-h 元素。这适用于你自己的组件、第三方组件，或任何接受 props 的函数。",[53,1668,1670],{"className":55,"code":1669,"language":57,"meta":58,"style":58},"import createVanity from 'vanity-h'\nimport { h } from 'your-renderer'\n\nconst { div, button, x } = createVanity(h)\n\nfunction FancyButton({ label, onClick }) {\n  return button.class('fancy').onClick(onClick)(label)\n}\n\n\u002F\u002F Wrap with x() and chain props \u002F 用 x() 包装并链式设置 props\nx(FancyButton).label('Save').onClick(handleSave)()\n",[29,1671,1672,1686,1704,1708,1733,1737,1759,1795,1799,1803,1808],{"__ignoreMap":58},[62,1673,1674,1676,1678,1680,1682,1684],{"class":64,"line":65},[62,1675,711],{"class":710},[62,1677,742],{"class":85},[62,1679,745],{"class":710},[62,1681,112],{"class":89},[62,1683,6],{"class":93},[62,1685,735],{"class":89},[62,1687,1688,1690,1692,1694,1696,1698,1700,1702],{"class":64,"line":72},[62,1689,711],{"class":710},[62,1691,102],{"class":89},[62,1693,716],{"class":85},[62,1695,724],{"class":89},[62,1697,727],{"class":710},[62,1699,112],{"class":89},[62,1701,1222],{"class":93},[62,1703,735],{"class":89},[62,1705,1706],{"class":64,"line":78},[62,1707,593],{"emptyLinePlaceholder":592},[62,1709,1710,1712,1714,1716,1718,1720,1722,1725,1727,1729,1731],{"class":64,"line":126},[62,1711,564],{"class":563},[62,1713,102],{"class":89},[62,1715,764],{"class":85},[62,1717,99],{"class":89},[62,1719,573],{"class":85},[62,1721,99],{"class":89},[62,1723,1724],{"class":85}," x ",[62,1726,777],{"class":89},[62,1728,780],{"class":89},[62,1730,783],{"class":81},[62,1732,786],{"class":85},[62,1734,1735],{"class":64,"line":160},[62,1736,593],{"emptyLinePlaceholder":592},[62,1738,1739,1741,1744,1747,1750,1752,1754,1757],{"class":64,"line":192},[62,1740,795],{"class":563},[62,1742,1743],{"class":81}," FancyButton",[62,1745,1746],{"class":89},"({",[62,1748,1749],{"class":907}," label",[62,1751,99],{"class":89},[62,1753,223],{"class":907},[62,1755,1756],{"class":89}," })",[62,1758,804],{"class":89},[62,1760,1761,1763,1765,1767,1769,1771,1773,1776,1778,1780,1782,1784,1786,1788,1790,1793],{"class":64,"line":244},[62,1762,845],{"class":710},[62,1764,573],{"class":85},[62,1766,344],{"class":89},[62,1768,347],{"class":81},[62,1770,86],{"class":105},[62,1772,90],{"class":89},[62,1774,1775],{"class":93},"fancy",[62,1777,90],{"class":89},[62,1779,186],{"class":105},[62,1781,344],{"class":89},[62,1783,418],{"class":81},[62,1785,86],{"class":105},[62,1787,418],{"class":85},[62,1789,622],{"class":105},[62,1791,1792],{"class":85},"label",[62,1794,241],{"class":105},[62,1796,1797],{"class":64,"line":252},[62,1798,944],{"class":89},[62,1800,1801],{"class":64,"line":285},[62,1802,593],{"emptyLinePlaceholder":592},[62,1804,1805],{"class":64,"line":311},[62,1806,1807],{"class":68},"\u002F\u002F Wrap with x() and chain props \u002F 用 x() 包装并链式设置 props\n",[62,1809,1810,1813,1816,1818,1820,1822,1824,1827,1829,1831,1833,1835],{"class":64,"line":317},[62,1811,1812],{"class":81},"x",[62,1814,1815],{"class":85},"(FancyButton)",[62,1817,344],{"class":89},[62,1819,1792],{"class":81},[62,1821,86],{"class":85},[62,1823,90],{"class":89},[62,1825,1826],{"class":93},"Save",[62,1828,90],{"class":89},[62,1830,186],{"class":85},[62,1832,344],{"class":89},[62,1834,418],{"class":81},[62,1836,1837],{"class":85},"(handleSave)()\n",[15,1839,1840,1841,1844,1845,1848],{},"Every object automatically gains a ",[29,1842,1843],{},"$"," property that is equivalent to calling ",[29,1846,1847],{},"x()"," on that object. The following is identical:",[15,1850,1851,1852,1854,1855,1857],{},"每个对象自动获得一个 ",[29,1853,1843],{}," 属性，等价于对该对象调用 ",[29,1856,1847],{},"。以下写法完全等价：",[53,1859,1861],{"className":55,"code":1860,"language":57,"meta":58,"style":58},"FancyButton.$.label('Save').onClick(handleSave)()\n",[29,1862,1863],{"__ignoreMap":58},[62,1864,1865,1868,1870,1872,1874,1876,1878,1880,1882,1884,1886,1888,1890],{"class":64,"line":65},[62,1866,1867],{"class":85},"FancyButton",[62,1869,344],{"class":89},[62,1871,1843],{"class":85},[62,1873,344],{"class":89},[62,1875,1792],{"class":81},[62,1877,86],{"class":85},[62,1879,90],{"class":89},[62,1881,1826],{"class":93},[62,1883,90],{"class":89},[62,1885,186],{"class":85},[62,1887,344],{"class":89},[62,1889,418],{"class":81},[62,1891,1837],{"class":85},[15,1893,1894,1896,1897,1899,1900,1902],{},[29,1895,1843],{}," requires no import — it is a global convenience. ",[29,1898,1847],{}," is the explicit form, available from ",[29,1901,1656],{},". Both are core features, not framework adapters. They work with any renderer, with no extra packages.",[15,1904,1905,1907,1908,1910,1911,1913],{},[29,1906,1843],{}," 无需导入 —— 它是一个全局便捷属性。",[29,1909,1847],{}," 是显式形式，从 ",[29,1912,1656],{}," 中获取。两者都是核心特性，不是框架适配层。适用于任何渲染器，无需额外包。",[23,1915],{},[48,1917,1919],{"id":1918},"typescript-类型支持","TypeScript \u002F 类型支持",[53,1921,1925],{"className":1922,"code":1923,"language":1924,"meta":58,"style":58},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { VanityH } from 'vanity-h';\nimport type { VNode } from 'your-renderer';\n\nimport createVanity from 'vanity-h'\nimport { h } from 'your-renderer'\n\nconst v: VanityH\u003CVNode> = createVanity(h)\n\n\u002F\u002F v.div, v.span, etc. are all typed\nconst element = v.div.class('test').id('app')('content')\n","typescript",[29,1926,1927,1951,1974,1978,1992,2010,2014,2039,2043,2048],{"__ignoreMap":58},[62,1928,1929,1931,1933,1935,1938,1940,1942,1944,1946,1948],{"class":64,"line":65},[62,1930,711],{"class":710},[62,1932,1011],{"class":710},[62,1934,102],{"class":89},[62,1936,1937],{"class":85}," VanityH",[62,1939,724],{"class":89},[62,1941,727],{"class":710},[62,1943,112],{"class":89},[62,1945,6],{"class":93},[62,1947,90],{"class":89},[62,1949,1950],{"class":89},";\n",[62,1952,1953,1955,1957,1959,1962,1964,1966,1968,1970,1972],{"class":64,"line":72},[62,1954,711],{"class":710},[62,1956,1011],{"class":710},[62,1958,102],{"class":89},[62,1960,1961],{"class":85}," VNode",[62,1963,724],{"class":89},[62,1965,727],{"class":710},[62,1967,112],{"class":89},[62,1969,1222],{"class":93},[62,1971,90],{"class":89},[62,1973,1950],{"class":89},[62,1975,1976],{"class":64,"line":78},[62,1977,593],{"emptyLinePlaceholder":592},[62,1979,1980,1982,1984,1986,1988,1990],{"class":64,"line":126},[62,1981,711],{"class":710},[62,1983,742],{"class":85},[62,1985,745],{"class":710},[62,1987,112],{"class":89},[62,1989,6],{"class":93},[62,1991,735],{"class":89},[62,1993,1994,1996,1998,2000,2002,2004,2006,2008],{"class":64,"line":160},[62,1995,711],{"class":710},[62,1997,102],{"class":89},[62,1999,716],{"class":85},[62,2001,724],{"class":89},[62,2003,727],{"class":710},[62,2005,112],{"class":89},[62,2007,1222],{"class":93},[62,2009,735],{"class":89},[62,2011,2012],{"class":64,"line":192},[62,2013,593],{"emptyLinePlaceholder":592},[62,2015,2016,2018,2021,2023,2025,2027,2030,2033,2035,2037],{"class":64,"line":244},[62,2017,564],{"class":563},[62,2019,2020],{"class":85}," v",[62,2022,109],{"class":89},[62,2024,1937],{"class":694},[62,2026,1005],{"class":89},[62,2028,2029],{"class":694},"VNode",[62,2031,2032],{"class":89},">",[62,2034,780],{"class":89},[62,2036,783],{"class":81},[62,2038,786],{"class":85},[62,2040,2041],{"class":64,"line":252},[62,2042,593],{"emptyLinePlaceholder":592},[62,2044,2045],{"class":64,"line":285},[62,2046,2047],{"class":68},"\u002F\u002F v.div, v.span, etc. are all typed\n",[62,2049,2050,2052,2055,2057,2059,2061,2063,2065,2067,2069,2071,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2097,2099],{"class":64,"line":311},[62,2051,564],{"class":563},[62,2053,2054],{"class":85}," element ",[62,2056,570],{"class":89},[62,2058,2020],{"class":85},[62,2060,344],{"class":89},[62,2062,94],{"class":85},[62,2064,344],{"class":89},[62,2066,347],{"class":81},[62,2068,86],{"class":85},[62,2070,90],{"class":89},[62,2072,2073],{"class":93},"test",[62,2075,90],{"class":89},[62,2077,186],{"class":85},[62,2079,344],{"class":89},[62,2081,1307],{"class":81},[62,2083,86],{"class":85},[62,2085,90],{"class":89},[62,2087,858],{"class":93},[62,2089,90],{"class":89},[62,2091,622],{"class":85},[62,2093,90],{"class":89},[62,2095,2096],{"class":93},"content",[62,2098,90],{"class":89},[62,2100,241],{"class":85},[15,2102,2103,2104,2107],{},"The ",[29,2105,2106],{},"VanityH\u003CR>"," type carries the renderer's node type, so your chainable elements return the correct VNode type for your renderer.",[15,2109,2110,2112],{},[29,2111,2106],{}," 类型携带渲染器的节点类型，因此你的链式元素会为你的渲染器返回正确的 VNode 类型。",[23,2114],{},[48,2116,2118],{"id":2117},"what-vanity-h-is-not-vanity-h-不是什么","What vanity-h Is Not \u002F vanity-h 不是什么",[15,2120,2121],{},"vanity-h does not parse HTML. It does not introduce a component model. It does not manage state, track dependencies, or update the DOM. It is a syntax layer — a way to write hyperscript that looks as clean as the markup it produces. Your renderer handles the rest.",[15,2123,2124],{},"vanity-h 不解析 HTML。不引入组件模型。不管理状态，不追踪依赖，不更新 DOM。它是一个语法层——一种写 hyperscript 的方式，让它看起来和它产生的标记一样干净。其余由你的渲染器处理。",[23,2126],{},[48,2128,2130],{"id":2129},"license-许可证","License \u002F 许可证",[15,2132,2133],{},"MIT",[610,2135,2136],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":58,"searchDepth":72,"depth":72,"links":2138},[2139,2140,2141,2142,2146,2147,2148,2149,2150],{"id":50,"depth":72,"text":51},{"id":331,"depth":72,"text":332},{"id":490,"depth":72,"text":491},{"id":676,"depth":72,"text":677,"children":2143},[2144,2145],{"id":681,"depth":78,"text":682},{"id":986,"depth":78,"text":987},{"id":1185,"depth":72,"text":1186},{"id":1645,"depth":72,"text":1646},{"id":1918,"depth":72,"text":1919},{"id":2117,"depth":72,"text":2118},{"id":2129,"depth":72,"text":2130},"告别嵌套的 hyperscript —— 链式语法，读起来和 DOM 的结构一样直观。","md",{},"5","\u002Fworks\u002Fvanity-h","https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fvanity-h",{"title":6,"description":2151},"works\u002F05.vanity-h",[2160,2161],"前端框架","开源项目",null,"aj_HOsp3LnAX9E-Kosc1EEuwmmiC7TIlswTnh4G6YKo",{"id":2165,"avatar":2166,"extension":2167,"href":2168,"meta":2169,"name":2170,"order":2171,"role":2172,"stem":2173,"__hash__":2174},"creators\u002Fcreators\u002Fhimavanta.yml","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FHimavanta.jpeg","yml","https:\u002F\u002Fgithub.com\u002Fhimavanta",{},"Himavanta","2","前端开发者 \u002F prop.show 创作者","creators\u002Fhimavanta","nxUeEQICL0UQctqSQKySYupxANMW1YmepMjbS4HaAYI",1785520402912]