[{"data":1,"prerenderedAt":4386},["ShallowReactive",2],{"works-archive":3},{"works":4,"creators":4369},[5,253,2394,3301,3362,4230],{"id":6,"title":7,"author":8,"body":9,"description":239,"extension":240,"meta":241,"navigation":242,"order":243,"path":244,"repository":245,"seo":246,"stem":247,"tags":248,"type":249,"website":251,"__hash__":252},"works\u002Fworks\u002F06.KasitaENV.md","Kasita ENV","wei",{"type":10,"value":11,"toc":226},"minimark",[12,16,30,38,46,50,95,98,121,124,130,134,144,195,199,202,205,210,213],[13,14,7],"h1",{"id":15},"kasita-env",[17,18,19],"p",{},[20,21,24],"a",{"href":22,"target":23},"https:\u002F\u002Fkermanx.github.io\u002Freactive-vscode\u002F","__blank",[25,26],"img",{"style":27,"src":28,"alt":29},"width: 200px;","https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fmade_with-reactive--vscode-%23007ACC?style=flat&labelColor=%23229863","Made with reactive-vscode",[17,31,32,33,37],{},"一个VS Code扩展，用于在 ",[34,35,36],"code",{},".env"," 文件中隐藏\u002F显示环境变量的值，在处理敏感信息时提升隐私性和可读性。",[17,39,41],{"align":40},"center",[25,42],{"alt":43,"src":44,"width":45},"kasita-env-example","https:\u002F\u002Fraw.githubusercontent.com\u002FWhbbit1999\u002Fkasita-env\u002Frefs\u002Fheads\u002Fmain\u002Fres\u002Fkasita-env.png","75%",[47,48,49],"h2",{"id":49},"功能特性",[51,52,53,64,70,76],"ul",{},[54,55,56,60,61,63],"li",{},[57,58,59],"strong",{},"切换所有值","：通过单个命令快速隐藏或显示打开的 ",[34,62,36],{}," 文件中的所有环境变量值。",[54,65,66,69],{},[57,67,68],{},"切换行值","：逐行切换特定环境变量值的可见性。",[54,71,72,75],{},[57,73,74],{},"CodeLens 集成","：直接在编辑器中使用 CodeLens 无缝切换单行值的可见性。",[54,77,78,81,82,84,85,84,88,84,91,94],{},[57,79,80],{},"支持多种 .env 文件","：识别并支持 ",[34,83,36],{},"、",[34,86,87],{},".env.local",[34,89,90],{},".env.development",[34,92,93],{},".env.production"," 及其他类似的环境变量文件。",[47,96,97],{"id":97},"安装",[99,100,101,104,115,118],"ol",{},[54,102,103],{},"打开 VS Code。",[54,105,106,107,110,111,114],{},"进入扩展视图（快捷键 ",[34,108,109],{},"Ctrl+Shift+X"," 或 ",[34,112,113],{},"Cmd+Shift+X","）。",[54,116,117],{},"搜索 \"Kasita ENV\"。",[54,119,120],{},"点击“安装”。",[47,122,123],{"id":123},"使用方法",[17,125,126,127,129],{},"安装完成后，当你打开 ",[34,128,36],{}," 文件时，该扩展会自动激活。",[131,132,133],"h3",{"id":133},"命令",[17,135,136,137,110,140,143],{},"你可以通过命令面板（快捷键 ",[34,138,139],{},"Ctrl+Shift+P",[34,141,142],{},"Cmd+Shift+P","）使用以下命令：",[145,146,147,163],"table",{},[148,149,150],"thead",{},[151,152,153,157,160],"tr",{},[154,155,133],"th",{"align":156},"left",[154,158,159],{"align":156},"标题",[154,161,162],{"align":156},"描述",[164,165,166,182],"tbody",{},[151,167,168,174,177],{},[169,170,171],"td",{"align":156},[34,172,173],{},"kasita-env.toggleValues",[169,175,176],{"align":156},"切换所有 ENV 值可见性",[169,178,179,180,63],{"align":156},"隐藏或显示当前 ",[34,181,36],{},[151,183,184,189,192],{},[169,185,186],{"align":156},[34,187,188],{},"kasita-env.toggleLine",[169,190,191],{"align":156},"切换行值可见性",[169,193,194],{"align":156},"隐藏或显示当前行的环境变量值。",[131,196,198],{"id":197},"codelens","CodeLens",[17,200,201],{},"对于每一行，环境变量上方都会显示一个 CodeLens。点击该 CodeLens 即可切换对应行值的可见性。",[47,203,204],{"id":204},"配置",[17,206,207],{},[57,208,209],{},"无配置项",[47,211,212],{"id":212},"许可证",[17,214,215,219,220],{},[20,216,218],{"href":217},".\u002FLICENSE","MIT"," 许可证 © 2025 ",[20,221,225],{"href":222,"rel":223},"https:\u002F\u002Fgithub.com\u002FWhbbit1999",[224],"nofollow","Whbbit1999",{"title":227,"searchDepth":228,"depth":228,"links":229},"",2,[230,231,232,237,238],{"id":49,"depth":228,"text":49},{"id":97,"depth":228,"text":97},{"id":123,"depth":228,"text":123,"children":233},[234,236],{"id":133,"depth":235,"text":133},3,{"id":197,"depth":235,"text":198},{"id":204,"depth":228,"text":204},{"id":212,"depth":228,"text":212},"一个VS Code扩展，用于在.env文件中隐藏\u002F显示环境变量的值，在处理敏感信息时提升隐私性和可读性。","md",{},true,"6","\u002Fworks\u002Fkasitaenv","https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fkasita-env",{"title":7,"description":239},"works\u002F06.KasitaENV",[249,250],"开源项目","vscode 插件",null,"NUkEs-y7pwNwoFbmNboBvT7P939ioBiIDDNgySvj8vo",{"id":254,"title":255,"author":256,"body":257,"description":2384,"extension":240,"meta":2385,"navigation":242,"order":2386,"path":2387,"repository":2388,"seo":2389,"stem":2390,"tags":2391,"type":249,"website":251,"__hash__":2393},"works\u002Fworks\u002F05.vanity-h.md","vanity-h","himavanta",{"type":10,"value":258,"toc":2370},[259,261,268,271,278,281,287,290,292,296,562,565,568,570,574,721,724,727,729,733,736,739,789,792,795,912,914,918,922,940,1223,1227,1230,1233,1414,1417,1420,1422,1426,1513,1518,1526,1531,1580,1585,1614,1619,1627,1875,1877,1881,1892,1901,2072,2083,2092,2126,2137,2148,2150,2154,2335,2342,2347,2349,2353,2356,2359,2361,2365,2367],[13,260,255],{"id":255},[17,262,263,264,267],{},"Hyperscript without the nesting — chainable syntax that reads the way the DOM looks.",[265,266],"br",{},"\n告别嵌套的 hyperscript —— 链式语法，读起来和 DOM 的结构一样直观。",[269,270],"hr",{},[17,272,273,274,277],{},"Hyperscript is a capable way to build UI without a compiler. The nested ",[34,275,276],{},"h()"," calls are another story. vanity-h turns them into a chainable syntax that reads the way the DOM looks — flat, ordered, and obvious.",[17,279,280],{},"No JSX, no templates, no build step. Just functions that compose.",[17,282,283,284,286],{},"Hyperscript 是不依赖编译器构建 UI 的强大方式。但嵌套的 ",[34,285,276],{}," 调用是另一回事。vanity-h 将它们变成可链式调用的语法，读起来和 DOM 的结构一样——扁平、有序、一目了然。",[17,288,289],{},"没有 JSX，没有模板，没有构建步骤。只有组合的函数。",[269,291],{},[47,293,295],{"id":294},"the-problem-问题","The Problem \u002F 问题",[297,298,302],"pre",{"className":299,"code":300,"language":301,"meta":227,"style":227},"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",[34,303,304,313,318,365,399,431,483,491,524,550,556],{"__ignoreMap":227},[305,306,309],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"sHwdD","\u002F\u002F Traditional hyperscript — the structure is buried in nesting\n",[305,314,315],{"class":307,"line":228},[305,316,317],{"class":311},"\u002F\u002F 传统 hyperscript —— 结构被埋没在嵌套中\n",[305,319,320,324,328,332,336,338,341,344,348,351,354,357,359,362],{"class":307,"line":235},[305,321,323],{"class":322},"s2Zo4","h",[305,325,327],{"class":326},"sTEyZ","(",[305,329,331],{"class":330},"sMK4o","'",[305,333,335],{"class":334},"sfazB","div",[305,337,331],{"class":330},[305,339,340],{"class":330},",",[305,342,343],{"class":330}," {",[305,345,347],{"class":346},"swJcz"," class",[305,349,350],{"class":330},":",[305,352,353],{"class":330}," '",[305,355,356],{"class":334},"card",[305,358,331],{"class":330},[305,360,361],{"class":330}," },",[305,363,364],{"class":326}," [\n",[305,366,368,371,373,375,378,380,382,384,386,388,390,393,395,397],{"class":307,"line":367},4,[305,369,370],{"class":322},"  h",[305,372,327],{"class":326},[305,374,331],{"class":330},[305,376,377],{"class":334},"header",[305,379,331],{"class":330},[305,381,340],{"class":330},[305,383,343],{"class":330},[305,385,347],{"class":346},[305,387,350],{"class":330},[305,389,353],{"class":330},[305,391,392],{"class":334},"card-header",[305,394,331],{"class":330},[305,396,361],{"class":330},[305,398,364],{"class":326},[305,400,402,405,407,409,411,413,415,418,420,423,425,428],{"class":307,"line":401},5,[305,403,404],{"class":322},"    h",[305,406,327],{"class":326},[305,408,331],{"class":330},[305,410,47],{"class":334},[305,412,331],{"class":330},[305,414,340],{"class":330},[305,416,417],{"class":330}," null,",[305,419,353],{"class":330},[305,421,422],{"class":334},"Title",[305,424,331],{"class":330},[305,426,427],{"class":326},")",[305,429,430],{"class":330},",\n",[305,432,434,436,438,440,443,445,447,449,451,453,455,458,460,462,465,467,470,473,475,478,480],{"class":307,"line":433},6,[305,435,404],{"class":322},[305,437,327],{"class":326},[305,439,331],{"class":330},[305,441,442],{"class":334},"button",[305,444,331],{"class":330},[305,446,340],{"class":330},[305,448,343],{"class":330},[305,450,347],{"class":346},[305,452,350],{"class":330},[305,454,353],{"class":330},[305,456,457],{"class":334},"close",[305,459,331],{"class":330},[305,461,340],{"class":330},[305,463,464],{"class":346}," onClick",[305,466,350],{"class":330},[305,468,469],{"class":326}," handleClose ",[305,471,472],{"class":330},"},",[305,474,353],{"class":330},[305,476,477],{"class":334},"×",[305,479,331],{"class":330},[305,481,482],{"class":326},")\n",[305,484,486,489],{"class":307,"line":485},7,[305,487,488],{"class":326},"  ])",[305,490,430],{"class":330},[305,492,494,496,498,500,503,505,507,509,511,513,515,518,520,522],{"class":307,"line":493},8,[305,495,370],{"class":322},[305,497,327],{"class":326},[305,499,331],{"class":330},[305,501,502],{"class":334},"main",[305,504,331],{"class":330},[305,506,340],{"class":330},[305,508,343],{"class":330},[305,510,347],{"class":346},[305,512,350],{"class":330},[305,514,353],{"class":330},[305,516,517],{"class":334},"card-body",[305,519,331],{"class":330},[305,521,361],{"class":330},[305,523,364],{"class":326},[305,525,527,529,531,533,535,537,539,541,543,546,548],{"class":307,"line":526},9,[305,528,404],{"class":322},[305,530,327],{"class":326},[305,532,331],{"class":330},[305,534,17],{"class":334},[305,536,331],{"class":330},[305,538,340],{"class":330},[305,540,417],{"class":330},[305,542,353],{"class":330},[305,544,545],{"class":334},"Content goes here",[305,547,331],{"class":330},[305,549,482],{"class":326},[305,551,553],{"class":307,"line":552},10,[305,554,555],{"class":326},"  ])\n",[305,557,559],{"class":307,"line":558},11,[305,560,561],{"class":326},"])\n",[17,563,564],{},"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.",[17,566,567],{},"每一层都增加缩进。属性、事件和子节点混杂在一起。代码的视觉形态与 DOM 的结构几乎没有关联。",[269,569],{},[47,571,573],{"id":572},"the-vanity-h-way-vanity-h-的方式","The vanity-h Way \u002F vanity-h 的方式",[297,575,577],{"className":299,"code":576,"language":301,"meta":227,"style":227},"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",[34,578,579,600,619,636,671,678,697,712,717],{"__ignoreMap":227},[305,580,581,583,586,589,591,593,595,597],{"class":307,"line":308},[305,582,335],{"class":326},[305,584,585],{"class":330},".",[305,587,588],{"class":322},"class",[305,590,327],{"class":326},[305,592,331],{"class":330},[305,594,356],{"class":334},[305,596,331],{"class":330},[305,598,599],{"class":326},")(\n",[305,601,602,605,607,609,611,613,615,617],{"class":307,"line":228},[305,603,604],{"class":326},"  header",[305,606,585],{"class":330},[305,608,588],{"class":322},[305,610,327],{"class":326},[305,612,331],{"class":330},[305,614,392],{"class":334},[305,616,331],{"class":330},[305,618,599],{"class":326},[305,620,621,624,626,628,630,632,634],{"class":307,"line":235},[305,622,623],{"class":322},"    h2",[305,625,327],{"class":326},[305,627,331],{"class":330},[305,629,422],{"class":334},[305,631,331],{"class":330},[305,633,427],{"class":326},[305,635,430],{"class":330},[305,637,638,641,643,645,647,649,651,653,655,657,660,663,665,667,669],{"class":307,"line":367},[305,639,640],{"class":326},"    button",[305,642,585],{"class":330},[305,644,588],{"class":322},[305,646,327],{"class":326},[305,648,331],{"class":330},[305,650,457],{"class":334},[305,652,331],{"class":330},[305,654,427],{"class":326},[305,656,585],{"class":330},[305,658,659],{"class":322},"onClick",[305,661,662],{"class":326},"(handleClose)(",[305,664,331],{"class":330},[305,666,477],{"class":334},[305,668,331],{"class":330},[305,670,482],{"class":326},[305,672,673,676],{"class":307,"line":401},[305,674,675],{"class":326},"  )",[305,677,430],{"class":330},[305,679,680,683,685,687,689,691,693,695],{"class":307,"line":433},[305,681,682],{"class":326},"  main",[305,684,585],{"class":330},[305,686,588],{"class":322},[305,688,327],{"class":326},[305,690,331],{"class":330},[305,692,517],{"class":334},[305,694,331],{"class":330},[305,696,599],{"class":326},[305,698,699,702,704,706,708,710],{"class":307,"line":485},[305,700,701],{"class":322},"    p",[305,703,327],{"class":326},[305,705,331],{"class":330},[305,707,545],{"class":334},[305,709,331],{"class":330},[305,711,482],{"class":326},[305,713,714],{"class":307,"line":493},[305,715,716],{"class":326},"  )\n",[305,718,719],{"class":307,"line":526},[305,720,482],{"class":326},[17,722,723],{},"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.",[17,725,726],{},"结构与你浏览器中看到的一致。外层元素包裹其子节点。属性在最终调用前链式设置。没有数组，没有同级元素之间的逗号，没有争抢注意力的括号。",[269,728],{},[47,730,732],{"id":731},"how-it-works-原理","How It Works \u002F 原理",[17,734,735],{},"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.",[17,737,738],{},"vanity-h 是任意 hyperscript 函数的薄包装。它提供了一组基于 Proxy 的标签函数。每个标签函数通过链式调用收集属性，在被作为函数调用并传入子节点时渲染。",[297,740,742],{"className":299,"code":741,"language":301,"meta":227,"style":227},"button.class('btn').onClick(handle)('Click me')\n\u002F\u002F  config  →  config  →  config   →  render\n\u002F\u002F  配置 → 配置 → 配置 → 渲染\n",[34,743,744,779,784],{"__ignoreMap":227},[305,745,746,748,750,752,754,756,759,761,763,765,767,770,772,775,777],{"class":307,"line":308},[305,747,442],{"class":326},[305,749,585],{"class":330},[305,751,588],{"class":322},[305,753,327],{"class":326},[305,755,331],{"class":330},[305,757,758],{"class":334},"btn",[305,760,331],{"class":330},[305,762,427],{"class":326},[305,764,585],{"class":330},[305,766,659],{"class":322},[305,768,769],{"class":326},"(handle)(",[305,771,331],{"class":330},[305,773,774],{"class":334},"Click me",[305,776,331],{"class":330},[305,778,482],{"class":326},[305,780,781],{"class":307,"line":228},[305,782,783],{"class":311},"\u002F\u002F  config  →  config  →  config   →  render\n",[305,785,786],{"class":307,"line":235},[305,787,788],{"class":311},"\u002F\u002F  配置 → 配置 → 配置 → 渲染\n",[17,790,791],{},"The chained calls return new proxies. The original is never mutated. You can reuse a configured element without affecting other uses.",[17,793,794],{},"链式调用返回新的 Proxy。原始对象永远不会被修改。你可以复用已配置的元素，而不影响其他使用处。",[297,796,798],{"className":299,"code":797,"language":301,"meta":227,"style":227},"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",[34,799,800,829,834,872,907],{"__ignoreMap":227},[305,801,802,806,809,812,815,817,819,821,823,825,827],{"class":307,"line":308},[305,803,805],{"class":804},"spNyl","const",[305,807,808],{"class":326}," baseBtn ",[305,810,811],{"class":330},"=",[305,813,814],{"class":326}," button",[305,816,585],{"class":330},[305,818,588],{"class":322},[305,820,327],{"class":326},[305,822,331],{"class":330},[305,824,758],{"class":334},[305,826,331],{"class":330},[305,828,482],{"class":326},[305,830,831],{"class":307,"line":228},[305,832,833],{"emptyLinePlaceholder":242},"\n",[305,835,836,838,841,843,846,848,851,853,855,858,860,863,865,868,870],{"class":307,"line":235},[305,837,805],{"class":804},[305,839,840],{"class":326}," redBtn ",[305,842,811],{"class":330},[305,844,845],{"class":326}," baseBtn",[305,847,585],{"class":330},[305,849,850],{"class":322},"style",[305,852,327],{"class":326},[305,854,331],{"class":330},[305,856,857],{"class":334},"color: red",[305,859,331],{"class":330},[305,861,862],{"class":326},")(",[305,864,331],{"class":330},[305,866,867],{"class":334},"Red",[305,869,331],{"class":330},[305,871,482],{"class":326},[305,873,874,876,879,881,883,885,887,889,891,894,896,898,900,903,905],{"class":307,"line":367},[305,875,805],{"class":804},[305,877,878],{"class":326}," blueBtn ",[305,880,811],{"class":330},[305,882,845],{"class":326},[305,884,585],{"class":330},[305,886,850],{"class":322},[305,888,327],{"class":326},[305,890,331],{"class":330},[305,892,893],{"class":334},"color: blue",[305,895,331],{"class":330},[305,897,862],{"class":326},[305,899,331],{"class":330},[305,901,902],{"class":334},"Blue",[305,904,331],{"class":330},[305,906,482],{"class":326},[305,908,909],{"class":307,"line":401},[305,910,911],{"class":311},"\u002F\u002F baseBtn remains unchanged \u002F baseBtn 保持不变\n",[269,913],{},[47,915,917],{"id":916},"quick-start-快速开始","Quick Start \u002F 快速开始",[131,919,921],{"id":920},"npm","NPM",[297,923,927],{"className":924,"code":925,"language":926,"meta":227,"style":227},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install vanity-h\n","bash",[34,928,929],{"__ignoreMap":227},[305,930,931,934,937],{"class":307,"line":308},[305,932,920],{"class":933},"sBMFI",[305,935,936],{"class":334}," install",[305,938,939],{"class":334}," vanity-h\n",[297,941,943],{"className":299,"code":942,"language":301,"meta":227,"style":227},"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",[34,944,945,975,991,995,1026,1030,1044,1076,1080,1102,1125,1173,1178,1184,1189],{"__ignoreMap":227},[305,946,947,951,953,956,958,961,964,967,969,972],{"class":307,"line":308},[305,948,950],{"class":949},"s7zQu","import",[305,952,343],{"class":330},[305,954,955],{"class":326}," h",[305,957,340],{"class":330},[305,959,960],{"class":326}," render",[305,962,963],{"class":330}," }",[305,965,966],{"class":949}," from",[305,968,353],{"class":330},[305,970,971],{"class":334},"preact",[305,973,974],{"class":330},"'\n",[305,976,977,979,982,985,987,989],{"class":307,"line":228},[305,978,950],{"class":949},[305,980,981],{"class":326}," createVanity ",[305,983,984],{"class":949},"from",[305,986,353],{"class":330},[305,988,255],{"class":334},[305,990,974],{"class":330},[305,992,993],{"class":307,"line":235},[305,994,833],{"emptyLinePlaceholder":242},[305,996,997,999,1001,1004,1006,1009,1011,1014,1017,1020,1023],{"class":307,"line":367},[305,998,805],{"class":804},[305,1000,343],{"class":330},[305,1002,1003],{"class":326}," div",[305,1005,340],{"class":330},[305,1007,1008],{"class":326}," span",[305,1010,340],{"class":330},[305,1012,1013],{"class":326}," button ",[305,1015,1016],{"class":330},"}",[305,1018,1019],{"class":330}," =",[305,1021,1022],{"class":322}," createVanity",[305,1024,1025],{"class":326},"(h)\n",[305,1027,1028],{"class":307,"line":401},[305,1029,833],{"emptyLinePlaceholder":242},[305,1031,1032,1035,1038,1041],{"class":307,"line":433},[305,1033,1034],{"class":804},"function",[305,1036,1037],{"class":322}," App",[305,1039,1040],{"class":330},"()",[305,1042,1043],{"class":330}," {\n",[305,1045,1046,1049,1052,1055,1057,1060,1063,1065,1068,1070,1074],{"class":307,"line":485},[305,1047,1048],{"class":804},"  const",[305,1050,1051],{"class":330}," [",[305,1053,1054],{"class":326},"count",[305,1056,340],{"class":330},[305,1058,1059],{"class":326}," setCount",[305,1061,1062],{"class":330},"]",[305,1064,1019],{"class":330},[305,1066,1067],{"class":322}," useState",[305,1069,327],{"class":346},[305,1071,1073],{"class":1072},"sbssI","0",[305,1075,482],{"class":346},[305,1077,1078],{"class":307,"line":493},[305,1079,833],{"emptyLinePlaceholder":242},[305,1081,1082,1085,1087,1089,1091,1093,1095,1098,1100],{"class":307,"line":526},[305,1083,1084],{"class":949},"  return",[305,1086,1003],{"class":326},[305,1088,585],{"class":330},[305,1090,588],{"class":322},[305,1092,327],{"class":346},[305,1094,331],{"class":330},[305,1096,1097],{"class":334},"app",[305,1099,331],{"class":330},[305,1101,599],{"class":346},[305,1103,1104,1107,1109,1111,1114,1116,1118,1121,1123],{"class":307,"line":552},[305,1105,1106],{"class":322},"    span",[305,1108,327],{"class":346},[305,1110,331],{"class":330},[305,1112,1113],{"class":334},"Count: ",[305,1115,331],{"class":330},[305,1117,340],{"class":330},[305,1119,1120],{"class":326}," count",[305,1122,427],{"class":346},[305,1124,430],{"class":330},[305,1126,1127,1129,1131,1133,1135,1137,1140,1142,1144,1148,1150,1153,1156,1159,1162,1164,1167,1169,1171],{"class":307,"line":558},[305,1128,640],{"class":326},[305,1130,585],{"class":330},[305,1132,659],{"class":322},[305,1134,327],{"class":346},[305,1136,1040],{"class":330},[305,1138,1139],{"class":804}," =>",[305,1141,1059],{"class":322},[305,1143,327],{"class":346},[305,1145,1147],{"class":1146},"sHdIc","c",[305,1149,1139],{"class":804},[305,1151,1152],{"class":326}," c",[305,1154,1155],{"class":330}," +",[305,1157,1158],{"class":1072}," 1",[305,1160,1161],{"class":346},"))(",[305,1163,331],{"class":330},[305,1165,1166],{"class":334},"+1",[305,1168,331],{"class":330},[305,1170,427],{"class":346},[305,1172,430],{"class":330},[305,1174,1176],{"class":307,"line":1175},12,[305,1177,716],{"class":346},[305,1179,1181],{"class":307,"line":1180},13,[305,1182,1183],{"class":330},"}\n",[305,1185,1187],{"class":307,"line":1186},14,[305,1188,833],{"emptyLinePlaceholder":242},[305,1190,1192,1195,1197,1200,1202,1204,1207,1209,1212,1214,1216,1218,1220],{"class":307,"line":1191},15,[305,1193,1194],{"class":322},"render",[305,1196,327],{"class":326},[305,1198,1199],{"class":322},"App",[305,1201,1040],{"class":326},[305,1203,340],{"class":330},[305,1205,1206],{"class":326}," document",[305,1208,585],{"class":330},[305,1210,1211],{"class":322},"getElementById",[305,1213,327],{"class":326},[305,1215,331],{"class":330},[305,1217,1097],{"class":334},[305,1219,331],{"class":330},[305,1221,1222],{"class":326},"))\n",[131,1224,1226],{"id":1225},"cdn","CDN",[17,1228,1229],{},"No build step required. Import directly in the browser.",[17,1231,1232],{},"无需构建步骤。直接在浏览器中导入。",[297,1234,1238],{"className":1235,"code":1236,"language":1237,"meta":227,"style":227},"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",[34,1239,1240,1264,1288,1303,1307,1329,1333,1376,1405],{"__ignoreMap":227},[305,1241,1242,1245,1248,1251,1253,1256,1259,1261],{"class":307,"line":308},[305,1243,1244],{"class":330},"\u003C",[305,1246,1247],{"class":346},"script",[305,1249,1250],{"class":804}," type",[305,1252,811],{"class":330},[305,1254,1255],{"class":330},"\"",[305,1257,1258],{"class":334},"module",[305,1260,1255],{"class":330},[305,1262,1263],{"class":330},">\n",[305,1265,1266,1269,1271,1273,1275,1277,1279,1281,1283,1286],{"class":307,"line":228},[305,1267,1268],{"class":949},"    import",[305,1270,343],{"class":330},[305,1272,955],{"class":326},[305,1274,340],{"class":330},[305,1276,960],{"class":326},[305,1278,963],{"class":330},[305,1280,966],{"class":949},[305,1282,353],{"class":330},[305,1284,1285],{"class":334},"https:\u002F\u002Fesm.sh\u002Fpreact",[305,1287,974],{"class":330},[305,1289,1290,1292,1294,1296,1298,1301],{"class":307,"line":235},[305,1291,1268],{"class":949},[305,1293,981],{"class":326},[305,1295,984],{"class":949},[305,1297,353],{"class":330},[305,1299,1300],{"class":334},"https:\u002F\u002Fesm.sh\u002Fvanity-h",[305,1302,974],{"class":330},[305,1304,1305],{"class":307,"line":367},[305,1306,833],{"emptyLinePlaceholder":242},[305,1308,1309,1312,1314,1316,1318,1321,1323,1325,1327],{"class":307,"line":401},[305,1310,1311],{"class":804},"    const",[305,1313,343],{"class":330},[305,1315,1003],{"class":326},[305,1317,340],{"class":330},[305,1319,1320],{"class":326}," span ",[305,1322,1016],{"class":330},[305,1324,1019],{"class":330},[305,1326,1022],{"class":322},[305,1328,1025],{"class":326},[305,1330,1331],{"class":307,"line":433},[305,1332,833],{"emptyLinePlaceholder":242},[305,1334,1335,1337,1340,1342,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1372,1374],{"class":307,"line":485},[305,1336,1311],{"class":804},[305,1338,1339],{"class":326}," app ",[305,1341,811],{"class":330},[305,1343,1344],{"class":330}," ()",[305,1346,1139],{"class":804},[305,1348,1003],{"class":326},[305,1350,585],{"class":330},[305,1352,588],{"class":322},[305,1354,327],{"class":326},[305,1356,331],{"class":330},[305,1358,1097],{"class":334},[305,1360,331],{"class":330},[305,1362,862],{"class":326},[305,1364,305],{"class":322},[305,1366,327],{"class":326},[305,1368,331],{"class":330},[305,1370,1371],{"class":334},"Hello World",[305,1373,331],{"class":330},[305,1375,1222],{"class":326},[305,1377,1378,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403],{"class":307,"line":493},[305,1379,1380],{"class":322},"    render",[305,1382,327],{"class":326},[305,1384,1097],{"class":322},[305,1386,1040],{"class":326},[305,1388,340],{"class":330},[305,1390,1206],{"class":326},[305,1392,585],{"class":330},[305,1394,1211],{"class":322},[305,1396,327],{"class":326},[305,1398,331],{"class":330},[305,1400,1097],{"class":334},[305,1402,331],{"class":330},[305,1404,1222],{"class":326},[305,1406,1407,1410,1412],{"class":307,"line":526},[305,1408,1409],{"class":330},"\u003C\u002F",[305,1411,1247],{"class":346},[305,1413,1263],{"class":330},[17,1415,1416],{},"Works with any hyperscript renderer — Preact, React, Vue, Snabbdom, or your own.",[17,1418,1419],{},"与任何 hyperscript 渲染器配合使用——Preact、React、Vue、Snabbdom，或你自己的渲染器。",[269,1421],{},[47,1423,1425],{"id":1424},"usage-使用方式","Usage \u002F 使用方式",[297,1427,1429],{"className":299,"code":1428,"language":301,"meta":227,"style":227},"import createVanity from 'vanity-h'\nimport { h } from 'your-renderer'\n\nconst { div, h1, p, a, img, input, button } = createVanity(h)\n",[34,1430,1431,1445,1464,1468],{"__ignoreMap":227},[305,1432,1433,1435,1437,1439,1441,1443],{"class":307,"line":308},[305,1434,950],{"class":949},[305,1436,981],{"class":326},[305,1438,984],{"class":949},[305,1440,353],{"class":330},[305,1442,255],{"class":334},[305,1444,974],{"class":330},[305,1446,1447,1449,1451,1453,1455,1457,1459,1462],{"class":307,"line":228},[305,1448,950],{"class":949},[305,1450,343],{"class":330},[305,1452,955],{"class":326},[305,1454,963],{"class":330},[305,1456,966],{"class":949},[305,1458,353],{"class":330},[305,1460,1461],{"class":334},"your-renderer",[305,1463,974],{"class":330},[305,1465,1466],{"class":307,"line":235},[305,1467,833],{"emptyLinePlaceholder":242},[305,1469,1470,1472,1474,1476,1478,1481,1483,1486,1488,1491,1493,1496,1498,1501,1503,1505,1507,1509,1511],{"class":307,"line":367},[305,1471,805],{"class":804},[305,1473,343],{"class":330},[305,1475,1003],{"class":326},[305,1477,340],{"class":330},[305,1479,1480],{"class":326}," h1",[305,1482,340],{"class":330},[305,1484,1485],{"class":326}," p",[305,1487,340],{"class":330},[305,1489,1490],{"class":326}," a",[305,1492,340],{"class":330},[305,1494,1495],{"class":326}," img",[305,1497,340],{"class":330},[305,1499,1500],{"class":326}," input",[305,1502,340],{"class":330},[305,1504,1013],{"class":326},[305,1506,1016],{"class":330},[305,1508,1019],{"class":330},[305,1510,1022],{"class":322},[305,1512,1025],{"class":326},[17,1514,1515],{},[57,1516,1517],{},"Tags \u002F 标签",[51,1519,1520,1523],{},[54,1521,1522],{},"Any HTML element. The functions are created lazily, so you only pay for what you use.",[54,1524,1525],{},"任意 HTML 元素。函数是惰性创建的，只有你用到的才会生成。",[17,1527,1528],{},[57,1529,1530],{},"Attributes \u002F 属性",[51,1532,1533,1560],{},[54,1534,1535,1536,1538,1539,1538,1541,1538,1544,1538,1547,1538,1550,1538,1553,1538,1556,1559],{},"Chain them. ",[34,1537,588],{},", ",[34,1540,850],{},[34,1542,1543],{},"id",[34,1545,1546],{},"href",[34,1548,1549],{},"src",[34,1551,1552],{},"disabled",[34,1554,1555],{},"placeholder",[34,1557,1558],{},"type",", and any custom attribute.",[54,1561,1562,1563,84,1565,84,1567,84,1569,84,1571,84,1573,84,1575,84,1577,1579],{},"链式设置。",[34,1564,588],{},[34,1566,850],{},[34,1568,1543],{},[34,1570,1546],{},[34,1572,1549],{},[34,1574,1552],{},[34,1576,1555],{},[34,1578,1558],{},"，以及任何自定义属性。",[17,1581,1582],{},[57,1583,1584],{},"Events \u002F 事件",[51,1586,1587,1602],{},[54,1588,1589,1538,1591,1538,1594,1597,1598,1601],{},[34,1590,659],{},[34,1592,1593],{},"onInput",[34,1595,1596],{},"onSubmit",", or any ",[34,1599,1600],{},"onXxx"," handler.",[54,1603,1604,84,1606,84,1608,1610,1611,1613],{},[34,1605,659],{},[34,1607,1593],{},[34,1609,1596],{},"，或任意 ",[34,1612,1600],{}," 处理器。",[17,1615,1616],{},[57,1617,1618],{},"Children \u002F 子节点",[51,1620,1621,1624],{},[54,1622,1623],{},"Pass them as arguments to the final call. Strings, numbers, other elements, arrays — anything your hyperscript function accepts.",[54,1625,1626],{},"在最终调用中作为参数传入。字符串、数字、其他元素、数组——任意你的 hyperscript 函数接受的内容。",[297,1628,1630],{"className":299,"code":1629,"language":301,"meta":227,"style":227},"\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",[34,1631,1632,1637,1686,1690,1695,1730,1737,1743,1747,1752,1759,1777,1822,1871],{"__ignoreMap":227},[305,1633,1634],{"class":307,"line":308},[305,1635,1636],{"class":311},"\u002F\u002F Attribute chaining \u002F 属性链式调用\n",[305,1638,1639,1641,1643,1645,1647,1649,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1681,1683],{"class":307,"line":228},[305,1640,335],{"class":326},[305,1642,585],{"class":330},[305,1644,588],{"class":322},[305,1646,327],{"class":326},[305,1648,331],{"class":330},[305,1650,1651],{"class":334},"container",[305,1653,331],{"class":330},[305,1655,427],{"class":326},[305,1657,585],{"class":330},[305,1659,1543],{"class":322},[305,1661,327],{"class":326},[305,1663,331],{"class":330},[305,1665,502],{"class":334},[305,1667,331],{"class":330},[305,1669,427],{"class":326},[305,1671,585],{"class":330},[305,1673,850],{"class":322},[305,1675,327],{"class":326},[305,1677,331],{"class":330},[305,1679,1680],{"class":334},"padding: 1rem",[305,1682,331],{"class":330},[305,1684,1685],{"class":326},")()\n",[305,1687,1688],{"class":307,"line":235},[305,1689,833],{"emptyLinePlaceholder":242},[305,1691,1692],{"class":307,"line":367},[305,1693,1694],{"class":311},"\u002F\u002F Void elements — no children \u002F Void 元素 —— 无子节点\n",[305,1696,1697,1700,1702,1704,1706,1708,1711,1713,1715,1717,1719,1721,1723,1726,1728],{"class":307,"line":401},[305,1698,1699],{"class":326},"input",[305,1701,585],{"class":330},[305,1703,1558],{"class":322},[305,1705,327],{"class":326},[305,1707,331],{"class":330},[305,1709,1710],{"class":334},"text",[305,1712,331],{"class":330},[305,1714,427],{"class":326},[305,1716,585],{"class":330},[305,1718,1555],{"class":322},[305,1720,327],{"class":326},[305,1722,331],{"class":330},[305,1724,1725],{"class":334},"Enter name",[305,1727,331],{"class":330},[305,1729,1685],{"class":326},[305,1731,1732,1734],{"class":307,"line":433},[305,1733,265],{"class":322},[305,1735,1736],{"class":326},"()\n",[305,1738,1739,1741],{"class":307,"line":485},[305,1740,269],{"class":322},[305,1742,1736],{"class":326},[305,1744,1745],{"class":307,"line":493},[305,1746,833],{"emptyLinePlaceholder":242},[305,1748,1749],{"class":307,"line":526},[305,1750,1751],{"class":311},"\u002F\u002F Mix of children types \u002F 混合子节点类型\n",[305,1753,1754,1756],{"class":307,"line":552},[305,1755,335],{"class":322},[305,1757,1758],{"class":326},"(\n",[305,1760,1761,1764,1766,1768,1771,1773,1775],{"class":307,"line":558},[305,1762,1763],{"class":322},"  h1",[305,1765,327],{"class":326},[305,1767,331],{"class":330},[305,1769,1770],{"class":334},"Welcome",[305,1772,331],{"class":330},[305,1774,427],{"class":326},[305,1776,430],{"class":330},[305,1778,1779,1782,1784,1786,1789,1791,1793,1795,1797,1799,1801,1803,1806,1808,1810,1812,1815,1817,1820],{"class":307,"line":1175},[305,1780,1781],{"class":322},"  p",[305,1783,327],{"class":326},[305,1785,331],{"class":330},[305,1787,1788],{"class":334},"This is a ",[305,1790,331],{"class":330},[305,1792,340],{"class":330},[305,1794,1490],{"class":326},[305,1796,585],{"class":330},[305,1798,1546],{"class":322},[305,1800,327],{"class":326},[305,1802,331],{"class":330},[305,1804,1805],{"class":334},"\u002Fabout",[305,1807,331],{"class":330},[305,1809,862],{"class":326},[305,1811,331],{"class":330},[305,1813,1814],{"class":334},"link",[305,1816,331],{"class":330},[305,1818,1819],{"class":326},"))",[305,1821,430],{"class":330},[305,1823,1824,1827,1829,1831,1833,1835,1837,1840,1842,1844,1846,1848,1850,1852,1854,1857,1859,1862,1864,1866,1869],{"class":307,"line":1180},[305,1825,1826],{"class":326},"  [",[305,1828,331],{"class":330},[305,1830,20],{"class":334},[305,1832,331],{"class":330},[305,1834,340],{"class":330},[305,1836,353],{"class":330},[305,1838,1839],{"class":334},"b",[305,1841,331],{"class":330},[305,1843,340],{"class":330},[305,1845,353],{"class":330},[305,1847,1147],{"class":334},[305,1849,331],{"class":330},[305,1851,1062],{"class":326},[305,1853,585],{"class":330},[305,1855,1856],{"class":322},"map",[305,1858,327],{"class":326},[305,1860,1861],{"class":1146},"s",[305,1863,1139],{"class":804},[305,1865,1008],{"class":322},[305,1867,1868],{"class":326},"(s))",[305,1870,430],{"class":330},[305,1872,1873],{"class":307,"line":1186},[305,1874,482],{"class":326},[269,1876],{},[47,1878,1880],{"id":1879},"wrapping-components-包装组件","Wrapping Components \u002F 包装组件",[17,1882,1883,1884,1887,1888,1891],{},"Use ",[34,1885,1886],{},"x(Component)"," — returned by ",[34,1889,1890],{},"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.",[17,1893,1894,1895,1897,1898,1900],{},"使用 ",[34,1896,1890],{}," 返回的 ",[34,1899,1886],{}," 可将任意组件函数转换为可链式调用的 vanity-h 元素。这适用于你自己的组件、第三方组件，或任何接受 props 的函数。",[297,1902,1904],{"className":299,"code":1903,"language":301,"meta":227,"style":227},"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",[34,1905,1906,1920,1938,1942,1967,1971,1993,2029,2033,2037,2042],{"__ignoreMap":227},[305,1907,1908,1910,1912,1914,1916,1918],{"class":307,"line":308},[305,1909,950],{"class":949},[305,1911,981],{"class":326},[305,1913,984],{"class":949},[305,1915,353],{"class":330},[305,1917,255],{"class":334},[305,1919,974],{"class":330},[305,1921,1922,1924,1926,1928,1930,1932,1934,1936],{"class":307,"line":228},[305,1923,950],{"class":949},[305,1925,343],{"class":330},[305,1927,955],{"class":326},[305,1929,963],{"class":330},[305,1931,966],{"class":949},[305,1933,353],{"class":330},[305,1935,1461],{"class":334},[305,1937,974],{"class":330},[305,1939,1940],{"class":307,"line":235},[305,1941,833],{"emptyLinePlaceholder":242},[305,1943,1944,1946,1948,1950,1952,1954,1956,1959,1961,1963,1965],{"class":307,"line":367},[305,1945,805],{"class":804},[305,1947,343],{"class":330},[305,1949,1003],{"class":326},[305,1951,340],{"class":330},[305,1953,814],{"class":326},[305,1955,340],{"class":330},[305,1957,1958],{"class":326}," x ",[305,1960,1016],{"class":330},[305,1962,1019],{"class":330},[305,1964,1022],{"class":322},[305,1966,1025],{"class":326},[305,1968,1969],{"class":307,"line":401},[305,1970,833],{"emptyLinePlaceholder":242},[305,1972,1973,1975,1978,1981,1984,1986,1988,1991],{"class":307,"line":433},[305,1974,1034],{"class":804},[305,1976,1977],{"class":322}," FancyButton",[305,1979,1980],{"class":330},"({",[305,1982,1983],{"class":1146}," label",[305,1985,340],{"class":330},[305,1987,464],{"class":1146},[305,1989,1990],{"class":330}," })",[305,1992,1043],{"class":330},[305,1994,1995,1997,1999,2001,2003,2005,2007,2010,2012,2014,2016,2018,2020,2022,2024,2027],{"class":307,"line":485},[305,1996,1084],{"class":949},[305,1998,814],{"class":326},[305,2000,585],{"class":330},[305,2002,588],{"class":322},[305,2004,327],{"class":346},[305,2006,331],{"class":330},[305,2008,2009],{"class":334},"fancy",[305,2011,331],{"class":330},[305,2013,427],{"class":346},[305,2015,585],{"class":330},[305,2017,659],{"class":322},[305,2019,327],{"class":346},[305,2021,659],{"class":326},[305,2023,862],{"class":346},[305,2025,2026],{"class":326},"label",[305,2028,482],{"class":346},[305,2030,2031],{"class":307,"line":493},[305,2032,1183],{"class":330},[305,2034,2035],{"class":307,"line":526},[305,2036,833],{"emptyLinePlaceholder":242},[305,2038,2039],{"class":307,"line":552},[305,2040,2041],{"class":311},"\u002F\u002F Wrap with x() and chain props \u002F 用 x() 包装并链式设置 props\n",[305,2043,2044,2047,2050,2052,2054,2056,2058,2061,2063,2065,2067,2069],{"class":307,"line":558},[305,2045,2046],{"class":322},"x",[305,2048,2049],{"class":326},"(FancyButton)",[305,2051,585],{"class":330},[305,2053,2026],{"class":322},[305,2055,327],{"class":326},[305,2057,331],{"class":330},[305,2059,2060],{"class":334},"Save",[305,2062,331],{"class":330},[305,2064,427],{"class":326},[305,2066,585],{"class":330},[305,2068,659],{"class":322},[305,2070,2071],{"class":326},"(handleSave)()\n",[17,2073,2074,2075,2078,2079,2082],{},"Every object automatically gains a ",[34,2076,2077],{},"$"," property that is equivalent to calling ",[34,2080,2081],{},"x()"," on that object. The following is identical:",[17,2084,2085,2086,2088,2089,2091],{},"每个对象自动获得一个 ",[34,2087,2077],{}," 属性，等价于对该对象调用 ",[34,2090,2081],{},"。以下写法完全等价：",[297,2093,2095],{"className":299,"code":2094,"language":301,"meta":227,"style":227},"FancyButton.$.label('Save').onClick(handleSave)()\n",[34,2096,2097],{"__ignoreMap":227},[305,2098,2099,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":307,"line":308},[305,2100,2101],{"class":326},"FancyButton",[305,2103,585],{"class":330},[305,2105,2077],{"class":326},[305,2107,585],{"class":330},[305,2109,2026],{"class":322},[305,2111,327],{"class":326},[305,2113,331],{"class":330},[305,2115,2060],{"class":334},[305,2117,331],{"class":330},[305,2119,427],{"class":326},[305,2121,585],{"class":330},[305,2123,659],{"class":322},[305,2125,2071],{"class":326},[17,2127,2128,2130,2131,2133,2134,2136],{},[34,2129,2077],{}," requires no import — it is a global convenience. ",[34,2132,2081],{}," is the explicit form, available from ",[34,2135,1890],{},". Both are core features, not framework adapters. They work with any renderer, with no extra packages.",[17,2138,2139,2141,2142,2144,2145,2147],{},[34,2140,2077],{}," 无需导入 —— 它是一个全局便捷属性。",[34,2143,2081],{}," 是显式形式，从 ",[34,2146,1890],{}," 中获取。两者都是核心特性，不是框架适配层。适用于任何渲染器，无需额外包。",[269,2149],{},[47,2151,2153],{"id":2152},"typescript-类型支持","TypeScript \u002F 类型支持",[297,2155,2159],{"className":2156,"code":2157,"language":2158,"meta":227,"style":227},"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",[34,2160,2161,2185,2208,2212,2226,2244,2248,2273,2277,2282],{"__ignoreMap":227},[305,2162,2163,2165,2167,2169,2172,2174,2176,2178,2180,2182],{"class":307,"line":308},[305,2164,950],{"class":949},[305,2166,1250],{"class":949},[305,2168,343],{"class":330},[305,2170,2171],{"class":326}," VanityH",[305,2173,963],{"class":330},[305,2175,966],{"class":949},[305,2177,353],{"class":330},[305,2179,255],{"class":334},[305,2181,331],{"class":330},[305,2183,2184],{"class":330},";\n",[305,2186,2187,2189,2191,2193,2196,2198,2200,2202,2204,2206],{"class":307,"line":228},[305,2188,950],{"class":949},[305,2190,1250],{"class":949},[305,2192,343],{"class":330},[305,2194,2195],{"class":326}," VNode",[305,2197,963],{"class":330},[305,2199,966],{"class":949},[305,2201,353],{"class":330},[305,2203,1461],{"class":334},[305,2205,331],{"class":330},[305,2207,2184],{"class":330},[305,2209,2210],{"class":307,"line":235},[305,2211,833],{"emptyLinePlaceholder":242},[305,2213,2214,2216,2218,2220,2222,2224],{"class":307,"line":367},[305,2215,950],{"class":949},[305,2217,981],{"class":326},[305,2219,984],{"class":949},[305,2221,353],{"class":330},[305,2223,255],{"class":334},[305,2225,974],{"class":330},[305,2227,2228,2230,2232,2234,2236,2238,2240,2242],{"class":307,"line":401},[305,2229,950],{"class":949},[305,2231,343],{"class":330},[305,2233,955],{"class":326},[305,2235,963],{"class":330},[305,2237,966],{"class":949},[305,2239,353],{"class":330},[305,2241,1461],{"class":334},[305,2243,974],{"class":330},[305,2245,2246],{"class":307,"line":433},[305,2247,833],{"emptyLinePlaceholder":242},[305,2249,2250,2252,2255,2257,2259,2261,2264,2267,2269,2271],{"class":307,"line":485},[305,2251,805],{"class":804},[305,2253,2254],{"class":326}," v",[305,2256,350],{"class":330},[305,2258,2171],{"class":933},[305,2260,1244],{"class":330},[305,2262,2263],{"class":933},"VNode",[305,2265,2266],{"class":330},">",[305,2268,1019],{"class":330},[305,2270,1022],{"class":322},[305,2272,1025],{"class":326},[305,2274,2275],{"class":307,"line":493},[305,2276,833],{"emptyLinePlaceholder":242},[305,2278,2279],{"class":307,"line":526},[305,2280,2281],{"class":311},"\u002F\u002F v.div, v.span, etc. are all typed\n",[305,2283,2284,2286,2289,2291,2293,2295,2297,2299,2301,2303,2305,2308,2310,2312,2314,2316,2318,2320,2322,2324,2326,2328,2331,2333],{"class":307,"line":552},[305,2285,805],{"class":804},[305,2287,2288],{"class":326}," element ",[305,2290,811],{"class":330},[305,2292,2254],{"class":326},[305,2294,585],{"class":330},[305,2296,335],{"class":326},[305,2298,585],{"class":330},[305,2300,588],{"class":322},[305,2302,327],{"class":326},[305,2304,331],{"class":330},[305,2306,2307],{"class":334},"test",[305,2309,331],{"class":330},[305,2311,427],{"class":326},[305,2313,585],{"class":330},[305,2315,1543],{"class":322},[305,2317,327],{"class":326},[305,2319,331],{"class":330},[305,2321,1097],{"class":334},[305,2323,331],{"class":330},[305,2325,862],{"class":326},[305,2327,331],{"class":330},[305,2329,2330],{"class":334},"content",[305,2332,331],{"class":330},[305,2334,482],{"class":326},[17,2336,2337,2338,2341],{},"The ",[34,2339,2340],{},"VanityH\u003CR>"," type carries the renderer's node type, so your chainable elements return the correct VNode type for your renderer.",[17,2343,2344,2346],{},[34,2345,2340],{}," 类型携带渲染器的节点类型，因此你的链式元素会为你的渲染器返回正确的 VNode 类型。",[269,2348],{},[47,2350,2352],{"id":2351},"what-vanity-h-is-not-vanity-h-不是什么","What vanity-h Is Not \u002F vanity-h 不是什么",[17,2354,2355],{},"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.",[17,2357,2358],{},"vanity-h 不解析 HTML。不引入组件模型。不管理状态，不追踪依赖，不更新 DOM。它是一个语法层——一种写 hyperscript 的方式，让它看起来和它产生的标记一样干净。其余由你的渲染器处理。",[269,2360],{},[47,2362,2364],{"id":2363},"license-许可证","License \u002F 许可证",[17,2366,218],{},[850,2368,2369],{},"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":227,"searchDepth":228,"depth":228,"links":2371},[2372,2373,2374,2375,2379,2380,2381,2382,2383],{"id":294,"depth":228,"text":295},{"id":572,"depth":228,"text":573},{"id":731,"depth":228,"text":732},{"id":916,"depth":228,"text":917,"children":2376},[2377,2378],{"id":920,"depth":235,"text":921},{"id":1225,"depth":235,"text":1226},{"id":1424,"depth":228,"text":1425},{"id":1879,"depth":228,"text":1880},{"id":2152,"depth":228,"text":2153},{"id":2351,"depth":228,"text":2352},{"id":2363,"depth":228,"text":2364},"告别嵌套的 hyperscript —— 链式语法，读起来和 DOM 的结构一样直观。",{},"5","\u002Fworks\u002Fvanity-h","https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fvanity-h",{"title":255,"description":2384},"works\u002F05.vanity-h",[2392,249],"前端框架","aj_HOsp3LnAX9E-Kosc1EEuwmmiC7TIlswTnh4G6YKo",{"id":2395,"title":2396,"author":256,"body":2397,"description":3293,"extension":240,"meta":3294,"navigation":242,"order":3295,"path":3296,"repository":2405,"seo":3297,"stem":3298,"tags":3299,"type":249,"website":251,"__hash__":3300},"works\u002Fworks\u002F04.kiaao.md","kiaao",{"type":10,"value":2398,"toc":3286},[2399,2401,2408,2410,2413,2431,2434,2436,2439,2446,2449,2451,2453,2467,2473,2943,2946,2949,2951,2955,2964,2971,2990,2992,2996,3192,3194,3198,3277,3279,3281,3283],[13,2400,2396],{"id":2396},[17,2402,2403],{},[20,2404,2407],{"href":2405,"rel":2406},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao",[224],"GitHub",[269,2409],{},[17,2411,2412],{},"A framework is for expressing ideas, not hiding them.",[17,2414,2415,2416,2419,2420,2423,2424,2423,2427,2430],{},"kiaao is a pure-runtime, zero-virtual-DOM reactive UI framework. No Proxy objects intercept your property access, no auto-collected dependency graph, component functions never re-run. Everything is a function. Every signal is ",[34,2417,2418],{},"Signal\u003CT>"," — read with no arguments, write with a value. No ",[34,2421,2422],{},"createSignal",", no ",[34,2425,2426],{},"useState",[34,2428,2429],{},"ref",". No separate \"side effect\" API — any derivation that returns nothing is simply a derived signal.",[17,2432,2433],{},"If you have ever felt out of control because of your framework's \"smartness\", if you want transparency, predictability, and full control, kiaao is for you.",[269,2435],{},[17,2437,2438],{},"框架是用来表达思想的，不是用来隐藏它的。",[17,2440,2441,2442],{},"kiaao 是一个纯运行时、零虚拟 DOM 的响应式 UI 框架。没有 Proxy 对象拦截你的属性访问，没有自动收集的依赖图，组件函数从不重新运行。一切皆函数。每个信号都是 Signal",[2443,2444,2445],"t",{},"——无参读，有参写。没有 createSignal，没有 useState，没有 ref。没有独立的\"副作用\"API——任何无返回值的派生，就是一个值为 undefined 的派生信号。",[17,2447,2448],{},"如果你曾因框架的\"智能\"而感到失控，如果你想要的是透明、可预测和完全的掌控，kiaao 是为你准备的。",[269,2450],{},[47,2452,917],{"id":916},[297,2454,2456],{"className":924,"code":2455,"language":926,"meta":227,"style":227},"npm install kiaao\n",[34,2457,2458],{"__ignoreMap":227},[305,2459,2460,2462,2464],{"class":307,"line":308},[305,2461,920],{"class":933},[305,2463,936],{"class":334},[305,2465,2466],{"class":334}," kiaao\n",[17,2468,2469],{},[20,2470,2472],{"href":2471},".\u002Fguide\u002Fjsx-setup","JSX\u002FTSX setup — 配置 JSX\u002FTSX",[297,2474,2478],{"className":2475,"code":2476,"language":2477,"meta":227,"style":227},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { Context } from \"kiaao\";\n\nimport { createApp, use } from \"kiaao\";\n\n\u002F\u002F Module-level — global state, outlives any component\n\u002F\u002F 模块级 — 全局状态，独立于组件\nconst theme = use(\"light\");\n\nfunction Counter(_, { use }: Context) {\n  \u002F\u002F Component-level definition — auto-cleaned on unmount; setter stores as-is\n  \u002F\u002F 组件级定义 — 可写，卸载自动清理；原样存储，传入函数不会调用\n  const count = use(0);\n\n  \u002F\u002F Component-level derivation — also writable, write arg passed to compute\n  \u002F\u002F 组件级派生 — 可写，写入参数传入计算函数\n  const double = use(count, v => count() * 2);\n\n  \u002F\u002F Derivation without return — runs on dependency change\n  \u002F\u002F 无返回值派生 — 依赖变化时执行\n  use(count, () => {\n    console.log(\"count is\", count());\n  });\n\n  return (\n    \u003Cdiv>\n      \u003Cp>Theme: {theme}\u003C\u002Fp>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cp>Double: {double}\u003C\u002Fp>\n      \u003Cbutton onClick={() => count(count() + 1)}>+1\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n\ncreateApp(Counter).mount(\"#app\");\n","tsx",[34,2479,2480,2504,2508,2534,2538,2543,2548,2572,2576,2603,2608,2613,2631,2635,2640,2645,2682,2687,2693,2699,2717,2746,2756,2761,2769,2779,2805,2826,2849,2889,2899,2906,2911,2916],{"__ignoreMap":227},[305,2481,2482,2484,2486,2488,2491,2493,2495,2498,2500,2502],{"class":307,"line":308},[305,2483,950],{"class":949},[305,2485,1250],{"class":949},[305,2487,343],{"class":330},[305,2489,2490],{"class":326}," Context",[305,2492,963],{"class":330},[305,2494,966],{"class":949},[305,2496,2497],{"class":330}," \"",[305,2499,2396],{"class":334},[305,2501,1255],{"class":330},[305,2503,2184],{"class":330},[305,2505,2506],{"class":307,"line":228},[305,2507,833],{"emptyLinePlaceholder":242},[305,2509,2510,2512,2514,2517,2519,2522,2524,2526,2528,2530,2532],{"class":307,"line":235},[305,2511,950],{"class":949},[305,2513,343],{"class":330},[305,2515,2516],{"class":326}," createApp",[305,2518,340],{"class":330},[305,2520,2521],{"class":326}," use",[305,2523,963],{"class":330},[305,2525,966],{"class":949},[305,2527,2497],{"class":330},[305,2529,2396],{"class":334},[305,2531,1255],{"class":330},[305,2533,2184],{"class":330},[305,2535,2536],{"class":307,"line":367},[305,2537,833],{"emptyLinePlaceholder":242},[305,2539,2540],{"class":307,"line":401},[305,2541,2542],{"class":311},"\u002F\u002F Module-level — global state, outlives any component\n",[305,2544,2545],{"class":307,"line":433},[305,2546,2547],{"class":311},"\u002F\u002F 模块级 — 全局状态，独立于组件\n",[305,2549,2550,2552,2555,2557,2559,2561,2563,2566,2568,2570],{"class":307,"line":485},[305,2551,805],{"class":804},[305,2553,2554],{"class":326}," theme ",[305,2556,811],{"class":330},[305,2558,2521],{"class":322},[305,2560,327],{"class":326},[305,2562,1255],{"class":330},[305,2564,2565],{"class":334},"light",[305,2567,1255],{"class":330},[305,2569,427],{"class":326},[305,2571,2184],{"class":330},[305,2573,2574],{"class":307,"line":493},[305,2575,833],{"emptyLinePlaceholder":242},[305,2577,2578,2580,2583,2585,2588,2590,2592,2594,2597,2599,2601],{"class":307,"line":526},[305,2579,1034],{"class":804},[305,2581,2582],{"class":322}," Counter",[305,2584,327],{"class":330},[305,2586,2587],{"class":1146},"_",[305,2589,340],{"class":330},[305,2591,343],{"class":330},[305,2593,2521],{"class":1146},[305,2595,2596],{"class":330}," }:",[305,2598,2490],{"class":933},[305,2600,427],{"class":330},[305,2602,1043],{"class":330},[305,2604,2605],{"class":307,"line":552},[305,2606,2607],{"class":311},"  \u002F\u002F Component-level definition — auto-cleaned on unmount; setter stores as-is\n",[305,2609,2610],{"class":307,"line":558},[305,2611,2612],{"class":311},"  \u002F\u002F 组件级定义 — 可写，卸载自动清理；原样存储，传入函数不会调用\n",[305,2614,2615,2617,2619,2621,2623,2625,2627,2629],{"class":307,"line":1175},[305,2616,1048],{"class":804},[305,2618,1120],{"class":326},[305,2620,1019],{"class":330},[305,2622,2521],{"class":322},[305,2624,327],{"class":346},[305,2626,1073],{"class":1072},[305,2628,427],{"class":346},[305,2630,2184],{"class":330},[305,2632,2633],{"class":307,"line":1180},[305,2634,833],{"emptyLinePlaceholder":242},[305,2636,2637],{"class":307,"line":1186},[305,2638,2639],{"class":311},"  \u002F\u002F Component-level derivation — also writable, write arg passed to compute\n",[305,2641,2642],{"class":307,"line":1191},[305,2643,2644],{"class":311},"  \u002F\u002F 组件级派生 — 可写，写入参数传入计算函数\n",[305,2646,2648,2650,2653,2655,2657,2659,2661,2663,2665,2667,2669,2672,2675,2678,2680],{"class":307,"line":2647},16,[305,2649,1048],{"class":804},[305,2651,2652],{"class":326}," double",[305,2654,1019],{"class":330},[305,2656,2521],{"class":322},[305,2658,327],{"class":346},[305,2660,1054],{"class":326},[305,2662,340],{"class":330},[305,2664,2254],{"class":1146},[305,2666,1139],{"class":804},[305,2668,1120],{"class":322},[305,2670,2671],{"class":346},"() ",[305,2673,2674],{"class":330},"*",[305,2676,2677],{"class":1072}," 2",[305,2679,427],{"class":346},[305,2681,2184],{"class":330},[305,2683,2685],{"class":307,"line":2684},17,[305,2686,833],{"emptyLinePlaceholder":242},[305,2688,2690],{"class":307,"line":2689},18,[305,2691,2692],{"class":311},"  \u002F\u002F Derivation without return — runs on dependency change\n",[305,2694,2696],{"class":307,"line":2695},19,[305,2697,2698],{"class":311},"  \u002F\u002F 无返回值派生 — 依赖变化时执行\n",[305,2700,2702,2705,2707,2709,2711,2713,2715],{"class":307,"line":2701},20,[305,2703,2704],{"class":322},"  use",[305,2706,327],{"class":346},[305,2708,1054],{"class":326},[305,2710,340],{"class":330},[305,2712,1344],{"class":330},[305,2714,1139],{"class":804},[305,2716,1043],{"class":330},[305,2718,2720,2723,2725,2728,2730,2732,2735,2737,2739,2741,2744],{"class":307,"line":2719},21,[305,2721,2722],{"class":326},"    console",[305,2724,585],{"class":330},[305,2726,2727],{"class":322},"log",[305,2729,327],{"class":346},[305,2731,1255],{"class":330},[305,2733,2734],{"class":334},"count is",[305,2736,1255],{"class":330},[305,2738,340],{"class":330},[305,2740,1120],{"class":322},[305,2742,2743],{"class":346},"())",[305,2745,2184],{"class":330},[305,2747,2749,2752,2754],{"class":307,"line":2748},22,[305,2750,2751],{"class":330},"  }",[305,2753,427],{"class":346},[305,2755,2184],{"class":330},[305,2757,2759],{"class":307,"line":2758},23,[305,2760,833],{"emptyLinePlaceholder":242},[305,2762,2764,2766],{"class":307,"line":2763},24,[305,2765,1084],{"class":949},[305,2767,2768],{"class":346}," (\n",[305,2770,2772,2775,2777],{"class":307,"line":2771},25,[305,2773,2774],{"class":330},"    \u003C",[305,2776,335],{"class":346},[305,2778,1263],{"class":330},[305,2780,2782,2785,2787,2789,2792,2795,2798,2801,2803],{"class":307,"line":2781},26,[305,2783,2784],{"class":330},"      \u003C",[305,2786,17],{"class":346},[305,2788,2266],{"class":330},[305,2790,2791],{"class":326},"Theme: ",[305,2793,2794],{"class":330},"{",[305,2796,2797],{"class":326},"theme",[305,2799,2800],{"class":330},"}\u003C\u002F",[305,2802,17],{"class":346},[305,2804,1263],{"class":330},[305,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824],{"class":307,"line":2807},27,[305,2809,2784],{"class":330},[305,2811,17],{"class":346},[305,2813,2266],{"class":330},[305,2815,1113],{"class":326},[305,2817,2794],{"class":330},[305,2819,1054],{"class":326},[305,2821,2800],{"class":330},[305,2823,17],{"class":346},[305,2825,1263],{"class":330},[305,2827,2829,2831,2833,2835,2838,2840,2843,2845,2847],{"class":307,"line":2828},28,[305,2830,2784],{"class":330},[305,2832,17],{"class":346},[305,2834,2266],{"class":330},[305,2836,2837],{"class":326},"Double: ",[305,2839,2794],{"class":330},[305,2841,2842],{"class":326},"double",[305,2844,2800],{"class":330},[305,2846,17],{"class":346},[305,2848,1263],{"class":330},[305,2850,2852,2854,2856,2858,2861,2863,2865,2867,2869,2871,2874,2876,2878,2881,2883,2885,2887],{"class":307,"line":2851},29,[305,2853,2784],{"class":330},[305,2855,442],{"class":346},[305,2857,464],{"class":804},[305,2859,2860],{"class":330},"={()",[305,2862,1139],{"class":804},[305,2864,1120],{"class":322},[305,2866,327],{"class":326},[305,2868,1054],{"class":322},[305,2870,2671],{"class":326},[305,2872,2873],{"class":330},"+",[305,2875,1158],{"class":1072},[305,2877,427],{"class":326},[305,2879,2880],{"class":330},"}>",[305,2882,1166],{"class":326},[305,2884,1409],{"class":330},[305,2886,442],{"class":346},[305,2888,1263],{"class":330},[305,2890,2892,2895,2897],{"class":307,"line":2891},30,[305,2893,2894],{"class":330},"    \u003C\u002F",[305,2896,335],{"class":346},[305,2898,1263],{"class":330},[305,2900,2902,2904],{"class":307,"line":2901},31,[305,2903,675],{"class":346},[305,2905,2184],{"class":330},[305,2907,2909],{"class":307,"line":2908},32,[305,2910,1183],{"class":330},[305,2912,2914],{"class":307,"line":2913},33,[305,2915,833],{"emptyLinePlaceholder":242},[305,2917,2919,2922,2925,2927,2930,2932,2934,2937,2939,2941],{"class":307,"line":2918},34,[305,2920,2921],{"class":322},"createApp",[305,2923,2924],{"class":326},"(Counter)",[305,2926,585],{"class":330},[305,2928,2929],{"class":322},"mount",[305,2931,327],{"class":326},[305,2933,1255],{"class":330},[305,2935,2936],{"class":334},"#app",[305,2938,1255],{"class":330},[305,2940,427],{"class":326},[305,2942,2184],{"class":330},[17,2944,2945],{},"This example demonstrates module-level and component-level signals, definition, derivation (including no-return derivations), and setter behaviors: definition setters store as-is, and derivation setters trigger recomputation with the arg passed to compute. For full details, follow the guides linked below.",[17,2947,2948],{},"此示例演示了模块级与组件级信号、定义、派生（含无返回值派生），以及 setter 行为：定义 setter 原样存储，派生 setter 触发重算并将入参传入计算函数。详见下方文档。",[269,2950],{},[47,2952,2954],{"id":2953},"ai-skill-ai-技能","AI Skill \u002F AI 技能",[17,2956,2957,2958,2963],{},"Add kiaao support to any AI coding agent compatible with the ",[20,2959,2962],{"href":2960,"rel":2961},"https:\u002F\u002Fagentskills.io\u002F",[224],"Agent Skills"," standard. The skill is version-synced with the installed kiaao package.",[17,2965,2966,2967,2970],{},"为兼容 ",[20,2968,2962],{"href":2960,"rel":2969},[224]," 标准的 AI 编码助手添加 kiaao 支持。skill 与已安装的 kiaao 包版本同步。",[297,2972,2974],{"className":924,"code":2973,"language":926,"meta":227,"style":227},"npx skills add Himavanta\u002Fkiaao\n",[34,2975,2976],{"__ignoreMap":227},[305,2977,2978,2981,2984,2987],{"class":307,"line":308},[305,2979,2980],{"class":933},"npx",[305,2982,2983],{"class":334}," skills",[305,2985,2986],{"class":334}," add",[305,2988,2989],{"class":334}," Himavanta\u002Fkiaao\n",[269,2991],{},[47,2993,2995],{"id":2994},"comparison-与其他框架的对比","Comparison \u002F 与其他框架的对比",[145,2997,2998,3017],{},[148,2999,3000],{},[151,3001,3002,3004,3007,3010,3013],{},[154,3003],{},[154,3005,3006],{},"React",[154,3008,3009],{},"Vue",[154,3011,3012],{},"Solid",[154,3014,3015],{},[57,3016,2396],{},[164,3018,3019,3038,3055,3072,3090,3109,3128,3147,3176],{},[151,3020,3021,3024,3027,3030,3033],{},[169,3022,3023],{},"Data transparency",[169,3025,3026],{},"clean",[169,3028,3029],{},"opaque (Proxy)",[169,3031,3032],{},"clean (two systems)",[169,3034,3035],{},[57,3036,3037],{},"clean (one system)",[151,3039,3040,3043,3046,3049,3051],{},[169,3041,3042],{},"Component runs",[169,3044,3045],{},"every update",[169,3047,3048],{},"once",[169,3050,3048],{},[169,3052,3053],{},[57,3054,3048],{},[151,3056,3057,3060,3063,3065,3068],{},[169,3058,3059],{},"Virtual DOM",[169,3061,3062],{},"yes",[169,3064,3062],{},[169,3066,3067],{},"no",[169,3069,3070],{},[57,3071,3067],{},[151,3073,3074,3077,3080,3083,3086],{},[169,3075,3076],{},"Compiler dependency",[169,3078,3079],{},"none",[169,3081,3082],{},"optional",[169,3084,3085],{},"required",[169,3087,3088],{},[57,3089,3079],{},[151,3091,3092,3095,3098,3101,3104],{},[169,3093,3094],{},"Reactivity model",[169,3096,3097],{},"none (full re-render)",[169,3099,3100],{},"Proxy auto-collect",[169,3102,3103],{},"compile-time expand",[169,3105,3106],{},[57,3107,3108],{},"explicit declaration",[151,3110,3111,3114,3117,3120,3123],{},[169,3112,3113],{},"Core concept count",[169,3115,3116],{},"10+",[169,3118,3119],{},"8+",[169,3121,3122],{},"6+",[169,3124,3125],{},[57,3126,3127],{},"3",[151,3129,3130,3133,3136,3139,3142],{},[169,3131,3132],{},"Update granularity",[169,3134,3135],{},"component",[169,3137,3138],{},"component\u002Fblock",[169,3140,3141],{},"DOM node",[169,3143,3144],{},[57,3145,3146],{},"derived signal",[151,3148,3149,3152,3155,3158,3167],{},[169,3150,3151],{},"Control flow",[169,3153,3154],{},"ternary \u002F map",[169,3156,3157],{},"v-if \u002F v-for",[169,3159,3160,3163,3164],{},[34,3161,3162],{},"\u003CShow>"," \u002F ",[34,3165,3166],{},"\u003CFor>",[169,3168,3169],{},[57,3170,3171,3163,3173],{},[34,3172,3162],{},[34,3174,3175],{},"\u003CEach>",[151,3177,3178,3181,3183,3185,3187],{},[169,3179,3180],{},"Context \u002F provide-inject",[169,3182,3062],{},[169,3184,3062],{},[169,3186,3062],{},[169,3188,3189],{},[57,3190,3191],{},"no (signals are the channel)",[269,3193],{},[47,3195,3197],{"id":3196},"documentation-文档","Documentation \u002F 文档",[51,3199,3200,3207,3214,3221,3228,3235,3242,3249,3256,3263,3270],{},[54,3201,3202],{},[20,3203,3206],{"href":3204,"rel":3205},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Freactivity.md",[224],"Reactivity \u002F 响应式系统",[54,3208,3209],{},[20,3210,3213],{"href":3211,"rel":3212},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fcomponents.md",[224],"Components \u002F 组件",[54,3215,3216],{},[20,3217,3220],{"href":3218,"rel":3219},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fcontrol-flow.md",[224],"Control Flow \u002F 控制流",[54,3222,3223],{},[20,3224,3227],{"href":3225,"rel":3226},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Flifecycle.md",[224],"Lifecycle \u002F 生命周期",[54,3229,3230],{},[20,3231,3234],{"href":3232,"rel":3233},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fattributes.md",[224],"Attributes \u002F 属性处理",[54,3236,3237],{},[20,3238,3241],{"href":3239,"rel":3240},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fasync-components.md",[224],"Async Components \u002F 异步组件",[54,3243,3244],{},[20,3245,3248],{"href":3246,"rel":3247},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fdirectives.md",[224],"Directives \u002F 自定义指令",[54,3250,3251],{},[20,3252,3255],{"href":3253,"rel":3254},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fmotion.md",[224],"Motion \u002F 动画",[54,3257,3258],{},[20,3259,3262],{"href":3260,"rel":3261},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Frouter.md",[224],"Router \u002F 路由",[54,3264,3265],{},[20,3266,3269],{"href":3267,"rel":3268},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fssr.md",[224],"SSR \u002F 服务端渲染",[54,3271,3272],{},[20,3273,3276],{"href":3274,"rel":3275},"https:\u002F\u002Fgithub.com\u002FHimavanta\u002Fkiaao\u002Fblob\u002Fmain\u002Fguide\u002Fjsx-setup.md",[224],"JSX\u002FTSX Setup \u002F 配置 JSX\u002FTSX",[269,3278],{},[47,3280,2364],{"id":2363},[17,3282,218],{},[850,3284,3285],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":227,"searchDepth":228,"depth":228,"links":3287},[3288,3289,3290,3291,3292],{"id":916,"depth":228,"text":917},{"id":2953,"depth":228,"text":2954},{"id":2994,"depth":228,"text":2995},{"id":3196,"depth":228,"text":3197},{"id":2363,"depth":228,"text":2364},"kiaao 是一个纯运行时、零虚拟 DOM 的响应式 UI 框架。",{},"4","\u002Fworks\u002Fkiaao",{"title":2396,"description":3293},"works\u002F04.kiaao",[2392,249],"JvycpQpVcMkdUsG3PIWW7utm7jssQah68tPOW1bgMzY",{"id":3302,"title":3303,"author":256,"body":3304,"description":3353,"extension":240,"meta":3354,"navigation":242,"order":3127,"path":3355,"repository":251,"seo":3356,"stem":3357,"tags":3358,"type":3359,"website":3360,"__hash__":3361},"works\u002Fworks\u002F03.warwave.md","WarWave",{"type":10,"value":3305,"toc":3345},[3306,3310,3313,3317,3320,3323,3326,3329,3332,3335,3338,3342],[47,3307,3309],{"id":3308},"flow-field-寻路","Flow Field 寻路",[17,3311,3312],{},"核心寻路算法在独立 Web Worker 中异步运行，支持 2000 单位同屏流畅移动，不阻塞主渲染线程。动态障碍物变化时，流场向量实时重算，实现智能避障。涵盖成本场生成、向量场计算、路径跟随与增量更新策略的完整实现。",[47,3314,3316],{"id":3315},"p2p-多人对战","P2P 多人对战",[17,3318,3319],{},"基于 PeerJS + WebRTC 的无服务器通信，采用客户端权威模型——游戏逻辑在客户端之间直接协商执行，单位移动与战斗裁决均去中心化，无需中心服务器中转或仲裁。",[47,3321,3322],{"id":3322},"移动端操控",[17,3324,3325],{},"针对触摸屏重新设计 RTS 交互方案，提供单位框选、编队移动、攻击指令等核心操作，在移动端也能完成基本的即时战略操控。",[47,3327,3328],{"id":3328},"大规模渲染",[17,3330,3331],{},"使用空间哈希管理单位位置，结合对象池复用实例，在 Phaser 3 WebGL 渲染管线中保持数千单位同屏时的可用帧率。",[47,3333,3334],{"id":3334},"混合架构",[17,3336,3337],{},"游戏逻辑与 UI 分层——Phaser 3 负责渲染与物理模拟，Vue 3 声明式管理 HUD、小地图、计分板等界面状态，两者通过明确的数据接口通信。",[47,3339,3341],{"id":3340},"ai-辅助开发","AI 辅助开发",[17,3343,3344],{},"从算法实现到性能调试，项目大量使用 AI 编码助手。这不仅提高了开发效率，本身也是一次人机协作在游戏开发中的工作流实验。",{"title":227,"searchDepth":228,"depth":228,"links":3346},[3347,3348,3349,3350,3351,3352],{"id":3308,"depth":228,"text":3309},{"id":3315,"depth":228,"text":3316},{"id":3322,"depth":228,"text":3322},{"id":3328,"depth":228,"text":3328},{"id":3334,"depth":228,"text":3334},{"id":3340,"depth":228,"text":3341},"大规模单位移动算法研究原型，基于 Web 的 P2P 即时战略实验",{},"\u002Fworks\u002Fwarwave",{"title":3303,"description":3353},"works\u002F03.warwave",[3359],"产品原型","https:\u002F\u002Fwarwave.unsun.cc\u002F","q5To0XrlqMabgVOmf9CXe_IKRGYcUHVJOk3pFFo2KKI",{"id":3363,"title":3364,"author":8,"body":3365,"description":4217,"extension":240,"meta":4218,"navigation":242,"order":4219,"path":4220,"repository":4221,"seo":4222,"stem":4223,"tags":4224,"type":249,"website":4228,"__hash__":4229},"works\u002Fworks\u002F02.shadcn-vue-admin.md","shadcn-vue-admin",{"type":10,"value":3366,"toc":4200},[3367,3386,3392,3398,3402,3434,3438,3678,3682,3686,3700,3703,3771,3774,3839,3843,3846,3865,3868,3877,3902,3910,3920,3925,3939,4016,4020,4030,4045,4152,4155,4168,4172,4197],[17,3368,3369,3370,84,3373,3376,3377,3380,3381],{},"基于 ",[57,3371,3372],{},"Shadcn-vue",[57,3374,3375],{},"Vue 3.5+"," 和 ",[57,3378,3379],{},"Vite"," 构建的企业级管理仪表板 UI，专注于响应式设计、可访问性与开发者体验。\n本项目 Fork 自 ",[20,3382,3385],{"href":3383,"rel":3384},"https:\u002F\u002Fgithub.com\u002Fsatnaing\u002Fshadcn-admin",[224],"shadcn-admin",[17,3387,3388],{"align":40},[25,3389],{"alt":3390,"src":3391,"width":45},"shadcn-vue-admin-cover","https:\u002F\u002Fraw.githubusercontent.com\u002FWhbbit1999\u002Fshadcn-vue-admin\u002Frefs\u002Fheads\u002Fmain\u002Fpublic\u002Fshadcn-vue-admin.png",[3393,3394,3395],"blockquote",{},[17,3396,3397],{},"⚠️ 版本说明：本项目为可直接使用的起始模板，后续将持续新增组件与功能。",[47,3399,3401],{"id":3400},"核心特性","✨ 核心特性",[51,3403,3404,3407,3410,3413,3416,3419,3422,3425,3428,3431],{},[54,3405,3406],{},"✅ 亮\u002F暗色模式切换，支持 Pinia 持久化存储",[54,3408,3409],{},"✅ 全局搜索命令面板",[54,3411,3412],{},"✅ 符合可访问性标准的 shadcn-ui 侧边栏导航",[54,3414,3415],{},"✅ 8+ 个预构建的功能页面",[54,3417,3418],{},"✅ 基于 shadcn-vue 扩展的自定义组件库",[54,3420,3421],{},"✅ 基于文件结构的自动路由生成系统",[54,3423,3424],{},"✅ 国际化支持（vue-i18n v11+）",[54,3426,3427],{},"✅ @tanstack\u002Fvue-form + Zod 表单验证",[54,3429,3430],{},"✅ TanStack Table\u002FQuery & Unovis 数据可视化",[54,3432,3433],{},"✅ 流畅动画支持（AutoAnimate、Motion-V、TW Animate CSS）",[47,3435,3437],{"id":3436},"️-技术栈与版本约束","🛠️ 技术栈与版本约束",[145,3439,3440,3450],{},[148,3441,3442],{},[151,3443,3444,3447],{},[154,3445,3446],{},"分类",[154,3448,3449],{},"工具与库（主版本号）",[164,3451,3452,3468,3490,3506,3523,3540,3557,3574,3591,3608,3620,3632,3649,3661],{},[151,3453,3454,3457],{},[169,3455,3456],{},"核心框架",[169,3458,3459,1538,3463],{},[20,3460,3375],{"href":3461,"rel":3462},"https:\u002F\u002Fvuejs.org\u002F",[224],[20,3464,3467],{"href":3465,"rel":3466},"https:\u002F\u002Fwww.typescriptlang.org\u002F",[224],"TypeScript 5.9+",[151,3469,3470,3473],{},[169,3471,3472],{},"UI 组件",[169,3474,3475,1538,3480,1538,3485],{},[20,3476,3479],{"href":3477,"rel":3478},"https:\u002F\u002Fwww.shadcn-vue.com",[224],"shadcn-vue",[20,3481,3484],{"href":3482,"rel":3483},"https:\u002F\u002Fwww.reka-ui.com\u002F",[224],"reka-ui 2+",[20,3486,3489],{"href":3487,"rel":3488},"https:\u002F\u002Flucide.dev\u002F",[224],"@lucide\u002Fvue",[151,3491,3492,3495],{},[169,3493,3494],{},"构建工具",[169,3496,3497,1538,3501],{},[20,3498,3379],{"href":3499,"rel":3500},"https:\u002F\u002Fvitejs.dev\u002F",[224],[20,3502,3505],{"href":3503,"rel":3504},"https:\u002F\u002Fgithub.com\u002Fvitejs\u002Fvite-plugin-vue",[224],"@vitejs\u002Fplugin-vue 6+",[151,3507,3508,3511],{},[169,3509,3510],{},"状态管理",[169,3512,3513,1538,3518],{},[20,3514,3517],{"href":3515,"rel":3516},"https:\u002F\u002Fpinia.vuejs.org\u002F",[224],"Pinia 3+",[20,3519,3522],{"href":3520,"rel":3521},"https:\u002F\u002Fprazdevs.github.io\u002Fpinia-plugin-persistedstate\u002F",[224],"pinia-plugin-persistedstate 4+",[151,3524,3525,3528],{},[169,3526,3527],{},"路由管理",[169,3529,3530,1538,3535],{},[20,3531,3534],{"href":3532,"rel":3533},"https:\u002F\u002Frouter.vuejs.org\u002F",[224],"vue-router 5+",[20,3536,3539],{"href":3537,"rel":3538},"https:\u002F\u002Fgithub.com\u002FJohnCampionJr\u002Fvite-plugin-vue-layouts",[224],"vite-plugin-vue-layouts 0.11+",[151,3541,3542,3545],{},[169,3543,3544],{},"样式系统",[169,3546,3547,1538,3552],{},[20,3548,3551],{"href":3549,"rel":3550},"https:\u002F\u002Ftailwindcss.com\u002F",[224],"Tailwind CSS 4+",[20,3553,3556],{"href":3554,"rel":3555},"https:\u002F\u002Fgithub.com\u002Fjamiebuilds\u002Ftailwindcss-animate",[224],"tailwindcss-animate 1+",[151,3558,3559,3562],{},[169,3560,3561],{},"数据处理",[169,3563,3564,1538,3569],{},[20,3565,3568],{"href":3566,"rel":3567},"https:\u002F\u002Ftanstack.com\u002Fquery\u002Flatest",[224],"TanStack Vue Query 5+",[20,3570,3573],{"href":3571,"rel":3572},"https:\u002F\u002Ftanstack.com\u002Ftable\u002Flatest",[224],"TanStack Vue Table 8+",[151,3575,3576,3579],{},[169,3577,3578],{},"表单验证",[169,3580,3581,1538,3586],{},[20,3582,3585],{"href":3583,"rel":3584},"https:\u002F\u002Ftanstack.com\u002Fform\u002Flatest\u002Fdocs\u002Foverview",[224],"TanStack Vue Form",[20,3587,3590],{"href":3588,"rel":3589},"https:\u002F\u002Fzod.dev\u002F",[224],"Zod 4+",[151,3592,3593,3596],{},[169,3594,3595],{},"动画效果",[169,3597,3598,1538,3603],{},[20,3599,3602],{"href":3600,"rel":3601},"https:\u002F\u002Fauto-animate.formkit.com\u002F",[224],"@formkit\u002Fauto-animate 0.9+",[20,3604,3607],{"href":3605,"rel":3606},"https:\u002F\u002Fmotion-v.vercel.app\u002F",[224],"motion-v 1+",[151,3609,3610,3613],{},[169,3611,3612],{},"国际化",[169,3614,3615],{},[20,3616,3619],{"href":3617,"rel":3618},"https:\u002F\u002Fvue-i18n.intlify.dev\u002F",[224],"vue-i18n 11+",[151,3621,3622,3625],{},[169,3623,3624],{},"HTTP 客户端",[169,3626,3627],{},[20,3628,3631],{"href":3629,"rel":3630},"https:\u002F\u002Fgithub.com\u002Funjs\u002Fofetch",[224],"ofetch",[151,3633,3634,3637],{},[169,3635,3636],{},"代码规范与格式化",[169,3638,3639,1538,3644],{},[20,3640,3643],{"href":3641,"rel":3642},"https:\u002F\u002Feslint.org\u002F",[224],"ESLint 9+",[20,3645,3648],{"href":3646,"rel":3647},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Feslint-config",[224],"@antfu\u002Feslint-config 7+",[151,3650,3651,3654],{},[169,3652,3653],{},"开发工具",[169,3655,3656],{},[20,3657,3660],{"href":3658,"rel":3659},"https:\u002F\u002Fgithub.com\u002Fwebfansplz\u002Fvite-plugin-vue-devtools",[224],"vite-plugin-vue-devtools 8+",[151,3662,3663,3666],{},[169,3664,3665],{},"自动导入",[169,3667,3668,1538,3673],{},[20,3669,3672],{"href":3670,"rel":3671},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Funplugin-auto-import",[224],"unplugin-auto-import 20+",[20,3674,3677],{"href":3675,"rel":3676},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Funplugin-vue-components",[224],"unplugin-vue-components 30+",[47,3679,3681],{"id":3680},"快速开始","🚀 快速开始",[131,3683,3685],{"id":3684},"前置依赖严格版本要求","前置依赖（严格版本要求）",[51,3687,3688,3691,3697],{},[54,3689,3690],{},"Node.js ≥ 22.x（推荐 LTS 版本）",[54,3692,3693,3696],{},[57,3694,3695],{},"pnpm 10+","（项目指定包管理器）",[54,3698,3699],{},"TypeScript ≥ 5.9.0",[131,3701,3702],{"id":3702},"安装步骤",[99,3704,3705,3724,3740,3756],{},[54,3706,3707,3708],{},"克隆仓库到本地",[297,3709,3711],{"className":924,"code":3710,"language":926,"meta":227,"style":227},"git clone https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin.git\n",[34,3712,3713],{"__ignoreMap":227},[305,3714,3715,3718,3721],{"class":307,"line":308},[305,3716,3717],{"class":933},"git",[305,3719,3720],{"class":334}," clone",[305,3722,3723],{"class":334}," https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin.git\n",[54,3725,3726,3727],{},"进入项目目录",[297,3728,3730],{"className":924,"code":3729,"language":926,"meta":227,"style":227},"cd shadcn-vue-admin\n",[34,3731,3732],{"__ignoreMap":227},[305,3733,3734,3737],{"class":307,"line":308},[305,3735,3736],{"class":322},"cd",[305,3738,3739],{"class":334}," shadcn-vue-admin\n",[54,3741,3742,3743],{},"安装依赖",[297,3744,3746],{"className":924,"code":3745,"language":926,"meta":227,"style":227},"pnpm install\n",[34,3747,3748],{"__ignoreMap":227},[305,3749,3750,3753],{"class":307,"line":308},[305,3751,3752],{"class":933},"pnpm",[305,3754,3755],{"class":334}," install\n",[54,3757,3758,3759],{},"启动开发服务器",[297,3760,3762],{"className":924,"code":3761,"language":926,"meta":227,"style":227},"pnpm dev\n",[34,3763,3764],{"__ignoreMap":227},[305,3765,3766,3768],{"class":307,"line":308},[305,3767,3752],{"class":933},[305,3769,3770],{"class":334}," dev\n",[131,3772,3773],{"id":3773},"可用脚本",[297,3775,3777],{"className":924,"code":3776,"language":926,"meta":227,"style":227},"pnpm dev             # 启动开发服务器\npnpm build           # 生产构建（包含 TypeScript 类型检查）\npnpm preview         # 预览生产构建产物\npnpm lint            # 执行 ESLint 代码检查\npnpm lint:fix        # 自动修复代码规范问题\npnpm release         # 使用 bumpp 升级版本\n",[34,3778,3779,3789,3799,3809,3819,3829],{"__ignoreMap":227},[305,3780,3781,3783,3786],{"class":307,"line":308},[305,3782,3752],{"class":933},[305,3784,3785],{"class":334}," dev",[305,3787,3788],{"class":311},"             # 启动开发服务器\n",[305,3790,3791,3793,3796],{"class":307,"line":228},[305,3792,3752],{"class":933},[305,3794,3795],{"class":334}," build",[305,3797,3798],{"class":311},"           # 生产构建（包含 TypeScript 类型检查）\n",[305,3800,3801,3803,3806],{"class":307,"line":235},[305,3802,3752],{"class":933},[305,3804,3805],{"class":334}," preview",[305,3807,3808],{"class":311},"         # 预览生产构建产物\n",[305,3810,3811,3813,3816],{"class":307,"line":367},[305,3812,3752],{"class":933},[305,3814,3815],{"class":334}," lint",[305,3817,3818],{"class":311},"            # 执行 ESLint 代码检查\n",[305,3820,3821,3823,3826],{"class":307,"line":401},[305,3822,3752],{"class":933},[305,3824,3825],{"class":334}," lint:fix",[305,3827,3828],{"class":311},"        # 自动修复代码规范问题\n",[305,3830,3831,3833,3836],{"class":307,"line":433},[305,3832,3752],{"class":933},[305,3834,3835],{"class":334}," release",[305,3837,3838],{"class":311},"         # 使用 bumpp 升级版本\n",[47,3840,3842],{"id":3841},"高级指南","📖 高级指南",[131,3844,3845],{"id":3845},"依赖维护",[51,3847,3848,3851,3854],{},[54,3849,3850],{},"所有项目依赖每周二（UTC\u002FGMT +8:00）更新，以确保安全性与兼容性。",[54,3852,3853],{},"关键依赖版本严格锁定，避免兼容性问题。",[54,3855,3856,3857,3860,3861,3864],{},"通过 ",[34,3858,3859],{},"simple-git-hooks"," + ",[34,3862,3863],{},"lint-staged"," 启用 Git 钩子（pre-commit），保障代码质量。",[131,3866,3867],{"id":3867},"主题定制",[17,3869,3870,3871,3876],{},"如需自定义网站样式，可使用 ",[20,3872,3875],{"href":3873,"rel":3874},"https:\u002F\u002Ftweakcn.com\u002Feditor\u002Ftheme",[224],"tweakcn"," 提供的预设样式：",[99,3878,3879,3882,3889],{},[54,3880,3881],{},"从 tweakcn 复制生成的 CSS 变量",[54,3883,3884,3885,3888],{},"将其粘贴到项目的 ",[34,3886,3887],{},"index.css"," 文件中",[54,3890,3891,3892,84,3895,3376,3898,3901],{},"修改 ",[34,3893,3894],{},":root",[34,3896,3897],{},":dark",[34,3899,3900],{},"@theme inline"," 部分即可应用自定义样式",[131,3903,3905,3906,3909],{"id":3904},"布局定制嵌套目录无-indexvue-场景","布局定制（嵌套目录无 ",[34,3907,3908],{},"index.vue"," 场景）",[17,3911,3912,3913,3376,3916,3919],{},"如果希望 ",[34,3914,3915],{},"pages\u002Ferrors\u002F",[34,3917,3918],{},"pages\u002Fauth\u002F"," 等目录下的页面不使用默认布局，可按以下步骤操作：",[3921,3922,3924],"h4",{"id":3923},"步骤-1创建目录级布局文件","步骤 1：创建目录级布局文件",[17,3926,3927,3928,3931,3932,3376,3935,3938],{},"在 ",[34,3929,3930],{},"pages\u002F"," 目录下创建与子目录同名的文件，如 ",[34,3933,3934],{},"src\u002Fpages\u002Ferrors.vue",[34,3936,3937],{},"src\u002Fpages\u002Fauth.vue","，内容如下：",[297,3940,3944],{"className":3941,"code":3942,"language":3943,"meta":227,"style":227},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n    \u003Crouter-view \u002F>\n\u003C\u002Ftemplate>\n\n\u003Croute lang=\"yml\">\nmeta:\n  layout: false # 禁用默认布局，适用于所有子路由\n\u003C\u002Froute>\n","vue",[34,3945,3946,3955,3965,3973,3977,3998,4003,4008],{"__ignoreMap":227},[305,3947,3948,3950,3953],{"class":307,"line":308},[305,3949,1244],{"class":330},[305,3951,3952],{"class":346},"template",[305,3954,1263],{"class":330},[305,3956,3957,3959,3962],{"class":307,"line":228},[305,3958,2774],{"class":330},[305,3960,3961],{"class":346},"router-view",[305,3963,3964],{"class":330}," \u002F>\n",[305,3966,3967,3969,3971],{"class":307,"line":235},[305,3968,1409],{"class":330},[305,3970,3952],{"class":346},[305,3972,1263],{"class":330},[305,3974,3975],{"class":307,"line":367},[305,3976,833],{"emptyLinePlaceholder":242},[305,3978,3979,3981,3984,3987,3989,3991,3994,3996],{"class":307,"line":401},[305,3980,1244],{"class":330},[305,3982,3983],{"class":346},"route",[305,3985,3986],{"class":804}," lang",[305,3988,811],{"class":330},[305,3990,1255],{"class":330},[305,3992,3993],{"class":334},"yml",[305,3995,1255],{"class":330},[305,3997,1263],{"class":330},[305,3999,4000],{"class":307,"line":433},[305,4001,4002],{"class":326},"meta:\n",[305,4004,4005],{"class":307,"line":485},[305,4006,4007],{"class":326},"  layout: false # 禁用默认布局，适用于所有子路由\n",[305,4009,4010,4012,4014],{"class":307,"line":493},[305,4011,1409],{"class":330},[305,4013,3983],{"class":346},[305,4015,1263],{"class":330},[3921,4017,4019],{"id":4018},"步骤-2解决冗余路由问题","步骤 2：解决冗余路由问题",[17,4021,4022,4023,84,4026,4029],{},"上述操作会生成空的父路由（如 ",[34,4024,4025],{},"\u002Ferrors\u002F",[34,4027,4028],{},"\u002Fauth\u002F","），可通过以下方式修复：",[99,4031,4032,4042],{},[54,4033,4034,4035,4037,4038,4041],{},"在目标目录中创建 ",[34,4036,3908],{},"（如 ",[34,4039,4040],{},"pages\u002Ferrors\u002Findex.vue","）",[54,4043,4044],{},"在该文件中添加重定向逻辑（基于 Vue 3.5+ 组合式 API）：",[297,4046,4048],{"className":3941,"code":4047,"language":3943,"meta":227,"style":227},"\u003Cscript lang=\"ts\" setup>\nimport { useRouter } from 'vue-router'\n\nconst router = useRouter()\n\u002F\u002F 示例：重定向至 404 页面\nrouter.replace({ name: '\u002Ferrors\u002F404' })\n\u003C\u002Fscript>\n",[34,4049,4050,4072,4092,4096,4109,4114,4144],{"__ignoreMap":227},[305,4051,4052,4054,4056,4058,4060,4062,4065,4067,4070],{"class":307,"line":308},[305,4053,1244],{"class":330},[305,4055,1247],{"class":346},[305,4057,3986],{"class":804},[305,4059,811],{"class":330},[305,4061,1255],{"class":330},[305,4063,4064],{"class":334},"ts",[305,4066,1255],{"class":330},[305,4068,4069],{"class":804}," setup",[305,4071,1263],{"class":330},[305,4073,4074,4076,4078,4081,4083,4085,4087,4090],{"class":307,"line":228},[305,4075,950],{"class":949},[305,4077,343],{"class":330},[305,4079,4080],{"class":326}," useRouter",[305,4082,963],{"class":330},[305,4084,966],{"class":949},[305,4086,353],{"class":330},[305,4088,4089],{"class":334},"vue-router",[305,4091,974],{"class":330},[305,4093,4094],{"class":307,"line":235},[305,4095,833],{"emptyLinePlaceholder":242},[305,4097,4098,4100,4103,4105,4107],{"class":307,"line":367},[305,4099,805],{"class":804},[305,4101,4102],{"class":326}," router ",[305,4104,811],{"class":330},[305,4106,4080],{"class":322},[305,4108,1736],{"class":326},[305,4110,4111],{"class":307,"line":401},[305,4112,4113],{"class":311},"\u002F\u002F 示例：重定向至 404 页面\n",[305,4115,4116,4119,4121,4124,4126,4128,4131,4133,4135,4138,4140,4142],{"class":307,"line":433},[305,4117,4118],{"class":326},"router",[305,4120,585],{"class":330},[305,4122,4123],{"class":322},"replace",[305,4125,327],{"class":326},[305,4127,2794],{"class":330},[305,4129,4130],{"class":346}," name",[305,4132,350],{"class":330},[305,4134,353],{"class":330},[305,4136,4137],{"class":334},"\u002Ferrors\u002F404",[305,4139,331],{"class":330},[305,4141,963],{"class":330},[305,4143,482],{"class":326},[305,4145,4146,4148,4150],{"class":307,"line":485},[305,4147,1409],{"class":330},[305,4149,1247],{"class":346},[305,4151,1263],{"class":330},[47,4153,4154],{"id":212},"📄 许可证",[17,4156,4157,4158,4161,4162,4167],{},"本项目采用 ",[57,4159,4160],{},"MIT 许可证","，详情请参阅 ",[20,4163,4166],{"href":4164,"rel":4165},"https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin\u002Fblob\u002Fmain\u002FLICENSE",[224],"LICENSE"," 文件。",[47,4169,4171],{"id":4170},"致谢","🤝 致谢",[51,4173,4174,4183,4191],{},[54,4175,4176,4179,4180],{},[57,4177,4178],{},"开发者","：",[20,4181,225],{"href":222,"rel":4182},[224],[54,4184,4185,4179,4188],{},[57,4186,4187],{},"原始设计",[20,4189,3385],{"href":3383,"rel":4190},[224],[54,4192,4193,4196],{},[57,4194,4195],{},"核心依赖","：shadcn-vue、Vue.js、Vite、Tailwind CSS",[850,4198,4199],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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}",{"title":227,"searchDepth":228,"depth":228,"links":4201},[4202,4203,4204,4209,4215,4216],{"id":3400,"depth":228,"text":3401},{"id":3436,"depth":228,"text":3437},{"id":3680,"depth":228,"text":3681,"children":4205},[4206,4207,4208],{"id":3684,"depth":235,"text":3685},{"id":3702,"depth":235,"text":3702},{"id":3773,"depth":235,"text":3773},{"id":3841,"depth":228,"text":3842,"children":4210},[4211,4212,4213],{"id":3845,"depth":235,"text":3845},{"id":3867,"depth":235,"text":3867},{"id":3904,"depth":235,"text":4214},"布局定制（嵌套目录无 index.vue 场景）",{"id":212,"depth":228,"text":4154},{"id":4170,"depth":228,"text":4171},"汇总项目初始化、代码质量与发布流程的开源工具，用于演示代码项目作品。",{},"2","\u002Fworks\u002Fshadcn-vue-admin","https:\u002F\u002Fgithub.com\u002FWhbbit1999\u002Fshadcn-vue-admin",{"title":3364,"description":4217},"works\u002F02.shadcn-vue-admin",[4225,3009,4226,4227],"TypeScript","Open Source","基础模板","https:\u002F\u002Fshadcn-vue-admin.netlify.app\u002Fdashboard","UK79_FY7DXIeW0YhsJJq-NpPzaaVGLnIvTzkkGieAO0",{"id":4231,"title":4232,"author":256,"body":4233,"description":4357,"extension":240,"meta":4358,"navigation":242,"order":4359,"path":4360,"repository":251,"seo":4361,"stem":4362,"tags":4363,"type":4366,"website":4367,"__hash__":4368},"works\u002Fworks\u002F01.kavina.md","kavina",{"type":10,"value":4234,"toc":4351},[4235,4238,4241,4244,4247,4250,4253,4285,4288,4299,4302,4308,4314,4320,4323,4326,4348],[47,4236,4237],{"id":4237},"框架概述",[17,4239,4240],{},"kavina 是 Vue 3 低代码框架，提供可视化设计器与组件化渲染引擎。",[47,4242,4243],{"id":4243},"设计思路",[17,4245,4246],{},"kavina 的核心理念是编辑与运行分离。",[17,4248,4249],{},"Design 组件提供拖拽画布。用户在画布上排列部件、配置属性、嵌套层级，操作结果是一个 JSON 数组——每个元素是一个节点的完整配置。",[17,4251,4252],{},"Display 组件独立读取这个数组，配合部件注册表渲染页面。它不依赖设计器，可以单独打包、单独部署。",[297,4254,4258],{"className":4255,"code":4256,"language":4257,"meta":227,"style":227},"language-txt shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","拖拽配置\n  ↓\nDesign → [Node, Node, ...] → Display → 页面\n                      ↑\n                可保存为 JSON\n","txt",[34,4259,4260,4265,4270,4275,4280],{"__ignoreMap":227},[305,4261,4262],{"class":307,"line":308},[305,4263,4264],{},"拖拽配置\n",[305,4266,4267],{"class":307,"line":228},[305,4268,4269],{},"  ↓\n",[305,4271,4272],{"class":307,"line":235},[305,4273,4274],{},"Design → [Node, Node, ...] → Display → 页面\n",[305,4276,4277],{"class":307,"line":367},[305,4278,4279],{},"                      ↑\n",[305,4281,4282],{"class":307,"line":401},[305,4283,4284],{},"                可保存为 JSON\n",[17,4286,4287],{},"这带来三个好处：",[51,4289,4290,4293,4296],{},[54,4291,4292],{},"渲染器不依赖设计器。生产环境只部署 Display，零冗余。",[54,4294,4295],{},"节点数据是可读的 JSON。可以存数据库、从接口下发、手动编辑、用脚本批量生成。",[54,4297,4298],{},"设计器本身是普通 Vue 组件，可以嵌入任何已有项目，不需要改造架构。",[47,4300,4301],{"id":4301},"三块拼图",[17,4303,4304,4307],{},[57,4305,4306],{},"Design"," — 可视化设计器。 包含画布、工具栏、属性面板、部件大纲。用户通过拖拽构建页面结构，实时预览效果。Design 内部维护节点注册表，管理所有部件的挂载与卸载。",[17,4309,4310,4313],{},[57,4311,4312],{},"Display"," — 组件化渲染器。 接收节点数组和部件注册表，递归遍历节点树，为每个节点匹配对应的部件组件。支持 design \u002F display \u002F print 三种渲染模式，根据使用场景自动切换。",[17,4315,4316,4319],{},[57,4317,4318],{},"Widget"," — 部件。 可扩展的最小单元。每个部件定义它在不同环境下的外观：design 组件用于画布编辑、render 组件用于最终展示、print 组件用于打印。还支持 setting 配置面板、doc 文档视图、thumb 缩略图。部件通过 schema 声明默认数据，框架负责注入上下文和管理生命周期。",[47,4321,4322],{"id":4322},"扩展能力",[17,4324,4325],{},"除核心的设计、渲染、部件体系外，kavina 还提供：",[51,4327,4328,4331,4334,4341],{},[54,4329,4330],{},"插件系统 — settings 设置面板、outline 部件大纲、widgets 部件库都是插件。开发者可以注册自定义插件扩展设计器能力。",[54,4332,4333],{},"主题系统 — 基于 CSS 变量实现亮色\u002F暗色切换和主题色定制。不与任何 UI 框架绑定。",[54,4335,4336,4337,4340],{},"表达式引擎 — 节点字段 ",[34,4338,4339],{},"valueExpr"," 支持 JavaScript 表达式，用于动态默认值和事件处理。",[54,4342,4343,4344,4347],{},"国际化 — 部件 schema 接收 ",[34,4345,4346],{},"lang"," 参数，配合 i18n 工具为不同语言生成不同的默认配置。",[850,4349,4350],{},"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);}",{"title":227,"searchDepth":228,"depth":228,"links":4352},[4353,4354,4355,4356],{"id":4237,"depth":228,"text":4237},{"id":4243,"depth":228,"text":4243},{"id":4301,"depth":228,"text":4301},{"id":4322,"depth":228,"text":4322},"Vue 3 低代码框架 — 可视化设计器与组件化渲染引擎",{},"1","\u002Fworks\u002Fkavina",{"title":4232,"description":4357},"works\u002F01.kavina",[3009,4364,4365],"Design System","低代码框架","网站","https:\u002F\u002Fkavina.unsun.cc\u002F","eiTjLiVdW67YT2oOoiu0-W7Y9J-lGlEdW51sils-p70",[4370,4378],{"id":4371,"avatar":4372,"extension":3993,"href":222,"meta":4373,"name":4374,"order":4359,"role":4375,"stem":4376,"__hash__":4377},"creators\u002Fcreators\u002Fwei.yml","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F126662463_p2.jpg",{},"Wei","前端开发者 \u002F prop.show 创作者","creators\u002Fwei","S7hjtHuPDg90rhnZQHR6yNN4yxPGGGxInmhRpelc5bQ",{"id":4379,"avatar":4380,"extension":3993,"href":4381,"meta":4382,"name":4383,"order":4219,"role":4375,"stem":4384,"__hash__":4385},"creators\u002Fcreators\u002Fhimavanta.yml","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FHimavanta.jpeg","https:\u002F\u002Fgithub.com\u002Fhimavanta",{},"Himavanta","creators\u002Fhimavanta","nxUeEQICL0UQctqSQKySYupxANMW1YmepMjbS4HaAYI",1785520402303]