[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fsolidjs-in-2026-why-fine-grained-reactivity-is-outperforming-the-virtual-dom":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":3702,"translations":3771,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":65,"metaTitle":3699,"metaDescription":3700,"updatedAt":3701},"2489c084-bd7c-4d7a-9978-37b60ad17848","solidjs-in-2026-why-fine-grained-reactivity-is-outperforming-the-virtual-dom","SolidJS in 2026: Why fine-grained reactivity is outperforming the Virtual DOM","SolidJS redefines frontend performance in 2026 by ditching the Virtual DOM for fine-grained reactivity, ensuring faster updates and efficient code.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1782323899644-featured-1agrdn.webp",false,"89a516d2-a66f-4df4-90c5-f1d201806688","2026-06-24T17:58:41.976369+00:00",27,0,{"name":50,"avatar":9},"Genildo Souza",{"slug":13,"name":14,"color":15},[53,56,59,62],{"slug":54,"name":55},"developer-tools","Developer Tools",{"slug":57,"name":58},"javascript","JavaScript",{"slug":60,"name":61},"nodejs","Node.js",{"slug":63,"name":64},"typescript","TypeScript",{"type":66,"content":67},"doc",[68,79,97,99,106,228,229,235,241,247,253,263,269,283,296,297,303,412,418,434,435,441,447,466,473,479,485,497,503,515,524,546,547,557,568,575,576,582,588,595,628,629,635,958,959,965,971,1001,1007,1013,1019,1037,1048,1054,1060,1066,1078,1085,1091,1097,1109,1115,1121,1127,1128,1134,1140,1150,1160,1170,1180,1186,1196,1206,1207,1213,1219,1226,1227,1233,1239,1251,1329,1341,1352,1358,1359,1365,1372,1398,1399,1405,1411,1418,1426,1433,1434,1440,1446,1472,1498,1504,1795,1801,1816,1824,1832,1839,1845,2003,2037,2038,2044,2050,2056,2288,2289,2295,2301,2311,2317,2325,2333,2350,2357,2367,2373,2380,2386,2409,2410,2416,2422,2429,2430,2436,2575,2603,2604,2610,2616,2626,2633,2643,2650,2651,2657,2822,2823,2829,2973,2974,2980,2987,3042,3043,3049,3055,3160,3166,3172,3178,3185,3191,3192,3198,3204,3229,3241,3252,3258,3332,3338,3392,3404,3405,3411,3670,3671,3696],{"type":69,"attrs":70},"summaryBox",{"id":71,"items":72,"title":78},"sum_ec3mvgtq",[73,74,75,76,77],"SolidJS eliminates the Virtual DOM by connecting states directly to DOM nodes, avoiding tree comparisons and unnecessary re-renders.","Components in SolidJS execute only once during mounting, while only signals and effects react to state changes.","The framework uses three fundamental primitives — Signal, Memo, and Effect — that manage reactivity without the need for dependency arrays.","Version 2.0 introduces native support for asynchronous operations as first-class citizens, integrating Promises directly into the reactive graph.","Despite its high performance and influence on the ecosystem, SolidJS has a limited job market and a smaller library ecosystem than React.","SolidJS and Fine-Grained Reactivity",{"type":80,"attrs":81,"content":83},"blockquote",{"id":82},"quote_yo73hak6",[84],{"type":85,"attrs":86,"content":88},"paragraph",{"id":87},"p_8759w6aq",[89,95],{"text":90,"type":91,"marks":92},"Technical Guide · Framework · SolidJS · Jun 2026","text",[93],{"type":94},"bold",{"text":96,"type":91}," v1.9.13 stable · 2.0 Beta active",{"type":98},"horizontalRule",{"type":100,"attrs":101,"content":103},"heading",{"id":102,"level":36},"h_wlmhcgpc",[104],{"text":105,"type":91},"TL;DR",{"type":107,"attrs":108,"content":111},"bulletList",{"id":109,"tight":110},"ul_19kmn7fo",true,[112,127,143,157,180,208],{"type":113,"attrs":114,"content":116},"listItem",{"id":115},"li_j7ppuq2c",[117],{"type":85,"attrs":118,"content":120},{"id":119},"p_kti1yf51",[121,125],{"text":122,"type":91,"marks":123},"SolidJS does not use Virtual DOM.",[124],{"type":94},{"text":126,"type":91}," Each signal is connected directly to the DOM node it controls. When the state changes, only that node updates — no tree comparison, no component re-render.",{"type":113,"attrs":128,"content":130},{"id":129},"li_16iza7lw",[131],{"type":85,"attrs":132,"content":134},{"id":133},"p_7gomfyda",[135,137,141],{"text":136,"type":91},"The ",{"text":138,"type":91,"marks":139},"core weighs 7.6KB",[140],{"type":94},{"text":142,"type":91}," gzipped. React + ReactDOM are ~45KB.",{"type":113,"attrs":144,"content":146},{"id":145},"li_pqo257li",[147],{"type":85,"attrs":148,"content":150},{"id":149},"p_s72bb8a7",[151,155],{"text":152,"type":91,"marks":153},"Components execute only once.",[154],{"type":94},{"text":156,"type":91}," Not on every state change — only at mount.",{"type":113,"attrs":158,"content":160},{"id":159},"li_17avlruv",[161],{"type":85,"attrs":162,"content":164},{"id":163},"p_guhfs0vg",[165,167,171,173,178],{"text":166,"type":91},"In 2026, ",{"text":168,"type":91,"marks":169},"Solid 2.0 Beta",[170],{"type":94},{"text":172,"type":91}," brings async as a first-class primitive: pass a Promise to a ",{"text":174,"type":91,"marks":175},"createMemo",[176],{"type":177},"code",{"text":179,"type":91}," and the reactive graph handles the rest.",{"type":113,"attrs":181,"content":183},{"id":182},"li_dgbur7xr",[184],{"type":85,"attrs":185,"content":187},{"id":186},"p_uobdify9",[188,190,194,196,200,202,206],{"text":189,"type":91},"LLM SDKs (Vercel AI SDK, Genkit, Anthropic SDK) are ",{"text":191,"type":91,"marks":192},"pure TypeScript",[193],{"type":94},{"text":195,"type":91}," — they work in Solid just like in Next.js. What doesn't work are React-specific UI hooks (",{"text":197,"type":91,"marks":198},"useChat",[199],{"type":177},{"text":201,"type":91},", ",{"text":203,"type":91,"marks":204},"useCompletion",[205],{"type":177},{"text":207,"type":91},").",{"type":113,"attrs":209,"content":211},{"id":210},"li_009nqe90",[212],{"type":85,"attrs":213,"content":215},{"id":214},"p_7318546k",[216,220,222,226],{"text":217,"type":91,"marks":218},"npm downloads:",[219],{"type":94},{"text":221,"type":91}," ~2.4M\u002Fweek, ~60% year-over-year growth. ",{"text":223,"type":91,"marks":224},"Job market:",[225],{"type":94},{"text":227,"type":91}," minimal — specialists, not generalists.",{"type":98},{"type":100,"attrs":230,"content":232},{"id":231,"level":36},"h_sojw6ja9",[233],{"text":234,"type":91},"Why this framework matters — and when it doesn't",{"type":85,"attrs":236,"content":238},{"id":237},"p_r31zogla",[239],{"text":240,"type":91},"In 2026, the question is no longer whether the Virtual DOM works, but whether the cost of reconciliation is still acceptable for your application. Choosing a frontend framework transcends syntax; it is a decision about which mental model will guide your team for the coming years.",{"type":242,"attrs":243},"svgDiagram",{"id":244,"svg":245,"label":246},"svg_cet4r33g","\u003Csvg viewBox=\"0 0 465 436\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" font-family=\"system-ui, -apple-system, sans-serif\">\n\u003Cdefs>\u003Cmarker id=\"dgArrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\u003Cpath d=\"M 0 1 L 9 5 L 0 9 z\" fill=\"#64748b\"\u002F>\u003C\u002Fmarker>\u003C\u002Fdefs>\n\u003Crect x=\"0\" y=\"0\" width=\"465\" height=\"436\" fill=\"#ffffff\" rx=\"0\"\u002F>\n\u003Ctext x=\"232.5\" y=\"36\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"16\" font-weight=\"700\" fill=\"#0f172a\">Virtual DOM vs Reatividade Fina\u003C\u002Ftext>\n\u003Cpath d=\"M 146.1875 160 C 146.1875 188, 121.6953125 188, 121.6953125 216\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"133.94140625\" y=\"188\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">cria cópia e compara\u003C\u002Ftext>\n\u003Cpath d=\"M 121.6953125 296 C 121.6953125 324, 151.15625 324, 151.15625 352\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"136.42578125\" y=\"324\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">atualiza DOM\u003C\u002Ftext>\n\u003Cpath d=\"M 331.6015625 140 C 331.6015625 168, 343.890625 188, 343.890625 216\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"337.74609375\" y=\"178\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">liga estado a nó DOM\u003C\u002Ftext>\n\u003Cpath d=\"M 343.890625 296 C 343.890625 324, 300.859375 324, 300.859375 352\" fill=\"none\" stroke=\"#64748b\" stroke-width=\"1.5\" marker-end=\"url(#dgArrow)\"\u002F>\n\u003Ctext x=\"322.375\" y=\"324\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"11\" fill=\"#475569\" paint-order=\"stroke\" stroke=\"#ffffff\" stroke-width=\"4\" stroke-linejoin=\"round\">atualiza nó DOM\u003C\u002Ftext>\n\u003Crect x=\"60.78125\" y=\"80\" width=\"170.8125\" height=\"80\" rx=\"10\" fill=\"#eef2ff\" stroke=\"#6366f1\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"146.1875\" y=\"98.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#6366f1\" letter-spacing=\"0.08em\">VIRTUAL DOM\u003C\u002Ftext>\n\u003Ctext x=\"146.1875\" y=\"118.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Virtual DOM (React)\u003C\u002Ftext>\n\u003Ctext x=\"146.1875\" y=\"140\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Cópia da UI em memória\u003C\u002Ftext>\n\u003Crect x=\"24\" y=\"216\" width=\"195.390625\" height=\"80\" rx=\"10\" fill=\"#eef2ff\" stroke=\"#6366f1\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"121.6953125\" y=\"234.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#6366f1\" letter-spacing=\"0.08em\">VIRTUAL DOM\u003C\u002Ftext>\n\u003Ctext x=\"121.6953125\" y=\"254.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Reconciliação de árvore\u003C\u002Ftext>\n\u003Ctext x=\"121.6953125\" y=\"276\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Compara e aplica diferenças\u003C\u002Ftext>\n\u003Crect x=\"96.484375\" y=\"352\" width=\"109.34375\" height=\"60\" rx=\"10\" fill=\"#eef2ff\" stroke=\"#6366f1\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"151.15625\" y=\"370.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#6366f1\" letter-spacing=\"0.08em\">VIRTUAL DOM\u003C\u002Ftext>\n\u003Ctext x=\"151.15625\" y=\"390.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">DOM real\u003C\u002Ftext>\n\u003Crect x=\"259.59375\" y=\"80\" width=\"144.015625\" height=\"60\" rx=\"10\" fill=\"#f0f9ff\" stroke=\"#0ea5e9\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"331.6015625\" y=\"98.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#0ea5e9\" letter-spacing=\"0.08em\">REATIVIDADE FINA\u003C\u002Ftext>\n\u003Ctext x=\"331.6015625\" y=\"118.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Estado (SolidJS)\u003C\u002Ftext>\n\u003Crect x=\"247.390625\" y=\"216\" width=\"193\" height=\"80\" rx=\"10\" fill=\"#f0f9ff\" stroke=\"#0ea5e9\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"343.890625\" y=\"234.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#0ea5e9\" letter-spacing=\"0.08em\">REATIVIDADE FINA\u003C\u002Ftext>\n\u003Ctext x=\"343.890625\" y=\"254.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">Conexão direta ao DOM\u003C\u002Ftext>\n\u003Ctext x=\"343.890625\" y=\"276\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"12\" font-weight=\"400\" fill=\"#64748b\">Atualiza nó ao mudar estado\u003C\u002Ftext>\n\u003Crect x=\"233.828125\" y=\"352\" width=\"134.0625\" height=\"60\" rx=\"10\" fill=\"#f0f9ff\" stroke=\"#0ea5e9\" stroke-width=\"1.5\"\u002F>\n\u003Ctext x=\"300.859375\" y=\"370.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"10\" font-weight=\"600\" fill=\"#0ea5e9\" letter-spacing=\"0.08em\">REATIVIDADE FINA\u003C\u002Ftext>\n\u003Ctext x=\"300.859375\" y=\"390.5\" text-anchor=\"middle\" dominant-baseline=\"central\" font-size=\"14\" font-weight=\"600\" fill=\"#1e293b\">DOM real\u003C\u002Ftext>\n\u003C\u002Fsvg>","Virtual DOM vs. Fine-Grained Reactivity",{"type":85,"attrs":248,"content":250},{"id":249},"p_lvpumtrj",[251],{"text":252,"type":91},"The Virtual DOM was a clever solution to a real problem: how to update the UI without touching the DOM manually? React responded with an in-memory copy of the interface, tree comparison, and applying the differences. It worked. It worked so well that it became the industry default for a decade.",{"type":85,"attrs":254,"content":256},{"id":255},"p_zkbf4l10",[257,259],{"text":258,"type":91},"SolidJS answered the same question differently. Instead of building and comparing trees, it connects each piece of state directly to the DOM node that displays it. When the state changes, the node updates. ",{"text":260,"type":91,"marks":261},"There is no tree to compare because there is never a copy — there is only the connection.",[262],{"type":94},{"type":85,"attrs":264,"content":266},{"id":265},"p_2diw1axu",[267],{"text":268,"type":91},"The difference is not cosmetic. It is architectural. And in 2026, with Solid 2.0 in mature beta and the stable version at 1.9.13, the question is no longer \"does this work?\" — it is \"when is it worth the switch?\"",{"type":80,"attrs":270,"content":272},{"id":271},"quote_vqf077s2",[273],{"type":85,"attrs":274,"content":276},{"id":275},"p_cbk6765d",[277,281],{"text":278,"type":91,"marks":279},"Ryan Carniato",[280],{"type":94},{"text":282,"type":91},", creator of SolidJS and now Principal Engineer for Open Source at Netlify, spent over a decade refining the framework's reactive model. It is not an experiment — it is a philosophy tested in production. In 2026, this philosophy influences Angular, Vue 3, and even the direction of the React compiler.",{"type":80,"attrs":284,"content":286},{"id":285},"quote_qezftakn",[287],{"type":85,"attrs":288,"content":290},{"id":289},"p_179tlouu",[291],{"text":292,"type":91,"marks":293},"\"Fine-grained reactivity is not premature optimization. It is not paying for what you don't use.\"",[294],{"type":295},"italic",{"type":98},{"type":100,"attrs":298,"content":300},{"id":299,"level":36},"h_ccned9al",[301],{"text":302,"type":91},"The ecosystem in numbers — Jun 2026",{"type":304,"attrs":305,"content":307},"table",{"id":306},"tbl_c7j1cnnh",[308,331,352,372,392],{"type":309,"content":310},"tableRow",[311,322],{"type":312,"attrs":313,"content":315},"tableHeader",{"align":9,"colspan":314,"rowspan":314,"colwidth":9},1,[316],{"type":85,"attrs":317,"content":319},{"id":318},"p_ilzeglp8",[320],{"text":321,"type":91},"Metric",{"type":312,"attrs":323,"content":324},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[325],{"type":85,"attrs":326,"content":328},{"id":327},"p_6ary6wfi",[329],{"text":330,"type":91},"Value",{"type":309,"content":332},[333,343],{"type":334,"attrs":335,"content":336},"tableCell",{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[337],{"type":85,"attrs":338,"content":340},{"id":339},"p_zzhdl4q2",[341],{"text":342,"type":91},"Weekly npm downloads",{"type":334,"attrs":344,"content":345},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[346],{"type":85,"attrs":347,"content":349},{"id":348},"p_zy19j2td",[350],{"text":351,"type":91},"~2.4M",{"type":309,"content":353},[354,363],{"type":334,"attrs":355,"content":356},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[357],{"type":85,"attrs":358,"content":360},{"id":359},"p_ju88wspb",[361],{"text":362,"type":91},"GitHub stars",{"type":334,"attrs":364,"content":365},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[366],{"type":85,"attrs":367,"content":369},{"id":368},"p_lg80cm9c",[370],{"text":371,"type":91},"35K+",{"type":309,"content":373},[374,383],{"type":334,"attrs":375,"content":376},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[377],{"type":85,"attrs":378,"content":380},{"id":379},"p_kbu3c3n9",[381],{"text":382,"type":91},"Core gzipped",{"type":334,"attrs":384,"content":385},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[386],{"type":85,"attrs":387,"content":389},{"id":388},"p_m2k82j8j",[390],{"text":391,"type":91},"7.6KB",{"type":309,"content":393},[394,403],{"type":334,"attrs":395,"content":396},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[397],{"type":85,"attrs":398,"content":400},{"id":399},"p_p1rmwri3",[401],{"text":402,"type":91},"Year-over-year growth",{"type":334,"attrs":404,"content":405},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[406],{"type":85,"attrs":407,"content":409},{"id":408},"p_oer9hedd",[410],{"text":411,"type":91},"~60%",{"type":85,"attrs":413,"content":415},{"id":414},"p_r65qmfa0",[416],{"text":417,"type":91},"SolidJS in 2026 occupies a fascinating position in the JavaScript ecosystem. It may not be the most popular framework, but it is likely the most influential of the last five years. The signals paradigm it pioneered is now the foundation of Angular's reactivity, the philosophical basis of Vue's system, the competitive pressure behind the React compiler, and a candidate for inclusion in the JavaScript language itself via TC39.",{"type":80,"attrs":419,"content":421},{"id":420},"quote_d769dges",[422],{"type":85,"attrs":423,"content":425},{"id":424},"p_nqbr78p2",[426,428,432],{"text":427,"type":91},"⚠️ ",{"text":429,"type":91,"marks":430},"Honest trade-off:",[431],{"type":94},{"text":433,"type":91}," The SolidJS ecosystem is still young. UI libraries are limited, most React libraries do not have a port for Solid, and community resources are scarce compared to React — fewer tutorials, fewer answers on Stack Overflow, fewer production-tested patterns for edge cases. The presence in the job market is minimal. Evaluate if the libraries you need exist before committing.",{"type":98},{"type":100,"attrs":436,"content":438},{"id":437,"level":36},"h_72dql511",[439],{"text":440,"type":91},"The three primitives that replace all the magic",{"type":85,"attrs":442,"content":444},{"id":443},"p_th504tlt",[445],{"text":446,"type":91},"Learn these three and you have learned the framework. Everything else is built on top of them.",{"type":448,"attrs":449},"speedCards",{"id":450,"cards":451,"title":464,"caption":465},"speed_x565104z",[452,456,460],{"label":453,"value":454,"detail":455},"State source","Signal","Getter e setter que rastreiam automaticamente os consumidores sem arrays de dependência.",{"label":457,"value":458,"detail":459},"Derived value","Memo","Calculado de forma preguiçosa, atualiza somente quando necessário.",{"label":461,"value":462,"detail":463},"Side effect","Effect","Executa interações externas em resposta a mudanças reativas.","SolidJS Primitives","Three essential concepts to understand the framework",{"type":100,"attrs":467,"content":470},{"id":468,"level":469},"h_zgava05j",3,[471],{"text":472,"type":91},"Primitive 01 — Signal",{"type":85,"attrs":474,"content":476},{"id":475},"p_khm3thw7",[477],{"text":478,"type":91},"The source of state. A getter and a setter. The detail that matters: it automatically tracks who reads it. No dependency arrays — the runtime detects consumers during execution.",{"type":100,"attrs":480,"content":482},{"id":481,"level":469},"h_i7sbxrlb",[483],{"text":484,"type":91},"Primitive 02 — Memo",{"type":85,"attrs":486,"content":488},{"id":487},"p_ts3r21cc",[489,491,495],{"text":490,"type":91},"Derived, lazy, and pure value. It recalculates only when something it depends on changes, and only when someone actually reads it. It is the ",{"text":492,"type":91,"marks":493},"useMemo",[494],{"type":177},{"text":496,"type":91}," of React, but without the manual array and without the stale closure trap.",{"type":100,"attrs":498,"content":500},{"id":499,"level":469},"h_pqlbgol5",[501],{"text":502,"type":91},"Primitive 03 — Effect",{"type":85,"attrs":504,"content":506},{"id":505},"p_zq1lnp8g",[507,509,513],{"text":508,"type":91},"The side effect. The only place allowed to touch the external world — DOM, network, console. It re-executes only when its inputs change. No ",{"text":510,"type":91,"marks":511},"useEffect",[512],{"type":177},{"text":514,"type":91},", no deps list, no synchronization bug.",{"type":516,"attrs":517,"content":521},"codeBlock",{"id":518,"language":519,"highlighted":520},"code_zfw0isma","jsx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal, createMemo, createEffect } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 1. Signal: a origem do estado\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setPreco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 2. Memo: derivado, lazy — só recalcula quando lido e quando preco muda\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> comImposto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 3. Effect: efeito colateral — SEM array de dependências\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">createEffect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Total com imposto:\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">comImposto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F O Solid rastreou automaticamente que comImposto() foi lido aqui\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Componente — executa UMA vez, nunca re-renderiza\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Preco\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">comImposto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F só o nó de texto atualiza\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[522],{"text":523,"type":91},"import { createSignal, createMemo, createEffect } from \"solid-js\";\n\n\u002F\u002F 1. Signal: a origem do estado\nconst [preco, setPreco] = createSignal(100);\n\n\u002F\u002F 2. Memo: derivado, lazy — só recalcula quando lido e quando preco muda\nconst comImposto = createMemo(() => preco() * 1.1);\n\n\u002F\u002F 3. Effect: efeito colateral — SEM array de dependências\ncreateEffect(() => {\n  console.log(\"Total com imposto:\", comImposto());\n  \u002F\u002F O Solid rastreou automaticamente que comImposto() foi lido aqui\n});\n\n\u002F\u002F Componente — executa UMA vez, nunca re-renderiza\nfunction Preco() {\n  return \u003Cp>{comImposto()}\u003C\u002Fp>; \u002F\u002F só o nó de texto atualiza\n}\n",{"type":80,"attrs":525,"content":527},{"id":526},"quote_5fmx3dwv",[528],{"type":85,"attrs":529,"content":531},{"id":530},"p_y1r8fogi",[532,534,538,540,544],{"text":533,"type":91},"✅ ",{"text":535,"type":91,"marks":536},"Key difference:",[537],{"type":94},{"text":539,"type":91}," The component in Solid ",{"text":541,"type":91,"marks":542},"executes only once",[543],{"type":94},{"text":545,"type":91},". React calls the component function on every render. In Solid, only signals and effects re-execute — the component itself is executed only at mount, setting up the reactive connections.",{"type":98},{"type":100,"attrs":548,"content":550},{"id":549,"level":469},"h_cfr41ceo",[551,553],{"text":552,"type":91},"Complex state with ",{"text":554,"type":91,"marks":555},"createStore",[556],{"type":177},{"type":85,"attrs":558,"content":560},{"id":559},"p_20lzsdv9",[561,563,566],{"text":562,"type":91},"For nested objects and arrays, basic signals get verbose. The ",{"text":554,"type":91,"marks":564},[565],{"type":177},{"text":567,"type":91}," uses Proxies to track property access in depth, maintaining fine-grained reactivity even in complex structures.",{"type":516,"attrs":569,"content":572},{"id":570,"language":519,"highlighted":571},"code_phdwq3vn","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createStore, produce } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\u002Fstore\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> TodoApp\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">state\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setState\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createStore\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    todos: [],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    filtro: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"todos\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> adicionarTodo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">texto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setState\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">produce\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      s.todos.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">push\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ id: Date.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">now\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), texto, feito: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> toggleTodo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setState\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">      \"todos\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">todo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> todo.id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> id,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">      \"feito\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">feito\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">feito\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F Só o campo \"feito\" do item específico atualiza no DOM\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {state.todos.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">todo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> toggleTodo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(todo.id)}>{todo.texto}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      ))}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[573],{"text":574,"type":91},"import { createStore, produce } from \"solid-js\u002Fstore\";\n\nfunction TodoApp() {\n  const [state, setState] = createStore({\n    todos: [],\n    filtro: \"todos\",\n  });\n\n  const adicionarTodo = (texto) => {\n    setState(produce((s) => {\n      s.todos.push({ id: Date.now(), texto, feito: false });\n    }));\n  };\n\n  const toggleTodo = (id) => {\n    setState(\n      \"todos\",\n      (todo) => todo.id === id,\n      \"feito\",\n      (feito) => !feito\n    );\n    \u002F\u002F Só o campo \"feito\" do item específico atualiza no DOM\n  };\n\n  return (\n    \u003Cul>\n      {state.todos.map((todo) => (\n        \u003Cli onClick={() => toggleTodo(todo.id)}>{todo.texto}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  );\n}\n",{"type":98},{"type":100,"attrs":577,"content":579},{"id":578,"level":469},"h_ayksmvwm",[580],{"text":581,"type":91},"Async as a first-class citizen — Solid 2.0 Beta",{"type":85,"attrs":583,"content":585},{"id":584},"p_mysel52u",[586],{"text":587,"type":91},"The central change in Solid 2.0 is that async is now first-class. Computations can return Promises and the reactive graph handles suspension and resumption automatically.",{"type":516,"attrs":589,"content":592},{"id":590,"language":519,"highlighted":591},"code_xz25rr5l","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Solid 2.0 Beta: createAsync como primitivo padrão\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createAsync } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solidjs\u002Frouter\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Perfil\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F O grafo reativo cuida de suspensão e retomada\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> usuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createAsync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> buscarUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(props.id));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">usuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()?.nome}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Sem useState, useEffect, dependências manuais, try\u002Fcatch\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ATENÇÃO Solid 2.0: leia o signal ANTES do await\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> dobro\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> c\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ← leia aqui, ANTES do await\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> c \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;      \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ← não leia count() depois do await boundary\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[593],{"text":594,"type":91},"\u002F\u002F Solid 2.0 Beta: createAsync como primitivo padrão\nimport { createAsync } from \"@solidjs\u002Frouter\";\n\nfunction Perfil(props) {\n  \u002F\u002F O grafo reativo cuida de suspensão e retomada\n  const usuario = createAsync(() => buscarUsuario(props.id));\n\n  return \u003Ch1>{usuario()?.nome}\u003C\u002Fh1>;\n  \u002F\u002F Sem useState, useEffect, dependências manuais, try\u002Fcatch\n}\n\n\u002F\u002F ATENÇÃO Solid 2.0: leia o signal ANTES do await\nconst dobro = createMemo(async () => {\n  const c = count(); \u002F\u002F ← leia aqui, ANTES do await\n  await delay(100);\n  return c * 2;      \u002F\u002F ← não leia count() depois do await boundary\n});\n",{"type":80,"attrs":596,"content":598},{"id":597},"quote_pd4cjwh6",[599],{"type":85,"attrs":600,"content":602},{"id":601},"p_udaat3fb",[603,604,608,610,614,616,620,622,626],{"text":427,"type":91},{"text":605,"type":91,"marks":606},"Mental model shift in 2.0:",[607],{"type":94},{"text":609,"type":91}," In Solid 2.0, if you define signals and immediately read from the system, you might not see what you expect because writes are still batched. Use ",{"text":611,"type":91,"marks":612},"flush()",[613],{"type":177},{"text":615,"type":91}," to observe the updated state in unit tests. Read the signal ",{"text":617,"type":91,"marks":618},"before",[619],{"type":94},{"text":621,"type":91}," any boundary ",{"text":623,"type":91,"marks":624},"await",[625],{"type":177},{"text":627,"type":91},".",{"type":98},{"type":100,"attrs":630,"content":632},{"id":631,"level":36},"h_6c6un98z",[633],{"text":634,"type":91},"React vs. SolidJS: what the architectural difference means in practice",{"type":304,"attrs":636,"content":638},{"id":637},"tbl_9pjchf7f",[639,668,697,726,755,784,813,842,871,900,929],{"type":309,"content":640},[641,650,659],{"type":312,"attrs":642,"content":643},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[644],{"type":85,"attrs":645,"content":647},{"id":646},"p_0penzo6p",[648],{"text":649,"type":91},"Criterion",{"type":312,"attrs":651,"content":652},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[653],{"type":85,"attrs":654,"content":656},{"id":655},"p_0jo3nrkl",[657],{"text":658,"type":91},"React 19",{"type":312,"attrs":660,"content":661},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[662],{"type":85,"attrs":663,"content":665},{"id":664},"p_byj2cmiw",[666],{"text":667,"type":91},"SolidJS 1.9 \u002F 2.0",{"type":309,"content":669},[670,679,688],{"type":334,"attrs":671,"content":672},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[673],{"type":85,"attrs":674,"content":676},{"id":675},"p_z3tvnzhj",[677],{"text":678,"type":91},"Rendering model",{"type":334,"attrs":680,"content":681},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[682],{"type":85,"attrs":683,"content":685},{"id":684},"p_joyh43f1",[686],{"text":687,"type":91},"Virtual DOM + diffing",{"type":334,"attrs":689,"content":690},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[691],{"type":85,"attrs":692,"content":694},{"id":693},"p_vtlh3btk",[695],{"text":696,"type":91},"Direct DOM via signals ✅",{"type":309,"content":698},[699,708,717],{"type":334,"attrs":700,"content":701},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[702],{"type":85,"attrs":703,"content":705},{"id":704},"p_yw7d1l0h",[706],{"text":707,"type":91},"Component re-execution",{"type":334,"attrs":709,"content":710},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[711],{"type":85,"attrs":712,"content":714},{"id":713},"p_fzro7hkj",[715],{"text":716,"type":91},"On every state change",{"type":334,"attrs":718,"content":719},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[720],{"type":85,"attrs":721,"content":723},{"id":722},"p_karb43cr",[724],{"text":725,"type":91},"Only once ✅",{"type":309,"content":727},[728,737,746],{"type":334,"attrs":729,"content":730},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[731],{"type":85,"attrs":732,"content":734},{"id":733},"p_2au599v2",[735],{"text":736,"type":91},"Dependency array",{"type":334,"attrs":738,"content":739},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[740],{"type":85,"attrs":741,"content":743},{"id":742},"p_gwli3j6o",[744],{"text":745,"type":91},"Manual — source of bugs",{"type":334,"attrs":747,"content":748},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[749],{"type":85,"attrs":750,"content":752},{"id":751},"p_bfuj1bh6",[753],{"text":754,"type":91},"Automatic — runtime tracks ✅",{"type":309,"content":756},[757,766,775],{"type":334,"attrs":758,"content":759},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[760],{"type":85,"attrs":761,"content":763},{"id":762},"p_xbhwnffz",[764],{"text":765,"type":91},"Bundle size",{"type":334,"attrs":767,"content":768},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[769],{"type":85,"attrs":770,"content":772},{"id":771},"p_1hi1pnrp",[773],{"text":774,"type":91},"~45KB (react + react-dom)",{"type":334,"attrs":776,"content":777},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[778],{"type":85,"attrs":779,"content":781},{"id":780},"p_9e7uudjx",[782],{"text":783,"type":91},"~7.6KB core ✅ 6× smaller",{"type":309,"content":785},[786,795,804],{"type":334,"attrs":787,"content":788},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[789],{"type":85,"attrs":790,"content":792},{"id":791},"p_18am6ts2",[793],{"text":794,"type":91},"JS Framework Benchmark",{"type":334,"attrs":796,"content":797},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[798],{"type":85,"attrs":799,"content":801},{"id":800},"p_ifdxn5dp",[802],{"text":803,"type":91},"Top 10, but behind Solid",{"type":334,"attrs":805,"content":806},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[807],{"type":85,"attrs":808,"content":810},{"id":809},"p_3thquyfa",[811],{"text":812,"type":91},"Close to vanilla JS ✅ 1st tier",{"type":309,"content":814},[815,824,833],{"type":334,"attrs":816,"content":817},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[818],{"type":85,"attrs":819,"content":821},{"id":820},"p_jcau36vs",[822],{"text":823,"type":91},"Async (data fetching)",{"type":334,"attrs":825,"content":826},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[827],{"type":85,"attrs":828,"content":830},{"id":829},"p_hlxgv5zf",[831],{"text":832,"type":91},"useEffect + useState or TanStack Query",{"type":334,"attrs":834,"content":835},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[836],{"type":85,"attrs":837,"content":839},{"id":838},"p_6c3wyhjg",[840],{"text":841,"type":91},"createAsync \u002F createResource (2.0 native)",{"type":309,"content":843},[844,853,862],{"type":334,"attrs":845,"content":846},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[847],{"type":85,"attrs":848,"content":850},{"id":849},"p_koexxfeb",[851],{"text":852,"type":91},"Global state",{"type":334,"attrs":854,"content":855},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[856],{"type":85,"attrs":857,"content":859},{"id":858},"p_1bbopc75",[860],{"text":861,"type":91},"Zustand \u002F Redux \u002F Context",{"type":334,"attrs":863,"content":864},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[865],{"type":85,"attrs":866,"content":868},{"id":867},"p_hhj9zvks",[869],{"text":870,"type":91},"Native createStore, global signals",{"type":309,"content":872},[873,882,891],{"type":334,"attrs":874,"content":875},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[876],{"type":85,"attrs":877,"content":879},{"id":878},"p_kxamuyzr",[880],{"text":881,"type":91},"npm downloads (jun\u002F2026)",{"type":334,"attrs":883,"content":884},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[885],{"type":85,"attrs":886,"content":888},{"id":887},"p_wduobool",[889],{"text":890,"type":91},"~50M\u002Fweek (ecosystem)",{"type":334,"attrs":892,"content":893},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[894],{"type":85,"attrs":895,"content":897},{"id":896},"p_uywktznd",[898],{"text":899,"type":91},"~2.4M\u002Fweek (+60% y\u002Fy)",{"type":309,"content":901},[902,911,920],{"type":334,"attrs":903,"content":904},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[905],{"type":85,"attrs":906,"content":908},{"id":907},"p_tiypdwlp",[909],{"text":910,"type":91},"Job market",{"type":334,"attrs":912,"content":913},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[914],{"type":85,"attrs":915,"content":917},{"id":916},"p_xc95t1z4",[918],{"text":919,"type":91},"Dominant",{"type":334,"attrs":921,"content":922},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[923],{"type":85,"attrs":924,"content":926},{"id":925},"p_4jb9qyz3",[927],{"text":928,"type":91},"Minimal — specialists",{"type":309,"content":930},[931,940,949],{"type":334,"attrs":932,"content":933},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[934],{"type":85,"attrs":935,"content":937},{"id":936},"p_7htbqvrb",[938],{"text":939,"type":91},"Meta-framework",{"type":334,"attrs":941,"content":942},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[943],{"type":85,"attrs":944,"content":946},{"id":945},"p_5b0tu653",[947],{"text":948,"type":91},"Next.js (mature, 11M\u002Fwk)",{"type":334,"attrs":950,"content":951},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[952],{"type":85,"attrs":953,"content":955},{"id":954},"p_ndu9rzmd",[956],{"text":957,"type":91},"SolidStart 1.3 (stable, growing)",{"type":98},{"type":100,"attrs":960,"content":962},{"id":961,"level":36},"h_nb0yjxkp",[963],{"text":964,"type":91},"The five technical criteria",{"type":100,"attrs":966,"content":968},{"id":967,"level":469},"h_csqazc4i",[969],{"text":970,"type":91},"01 — Scalability",{"type":85,"attrs":972,"content":974},{"id":973},"p_l5pw9q8j",[975,977,981,983,987,989,993,995,999],{"text":976,"type":91},"Solid's fine-grained reactivity scales ",{"text":978,"type":91,"marks":979},"sublinearly",[980],{"type":94},{"text":982,"type":91},". In centralized store systems (NgRx standard), the cost of an update tends to ",{"text":984,"type":91,"marks":985},"O(n)",[986],{"type":177},{"text":988,"type":91}," — proportional to the number of subscribers. In nested observables (RxJS), it can reach ",{"text":990,"type":91,"marks":991},"O(n²)",[992],{"type":177},{"text":994,"type":91},". In signals, the cost approaches ",{"text":996,"type":91,"marks":997},"O(1)",[998],{"type":177},{"text":1000,"type":91},": the update propagates only to the calculations that effectively depend on the changed signal.",{"type":85,"attrs":1002,"content":1004},{"id":1003},"p_ojbv7edc",[1005],{"text":1006,"type":91},"For long lists and frequent updates, this is measurable. Companies like Radware reported Solid bundles of ~80KB compared to ~290KB for React for equivalent functionality. Jolt AI uses Solid on 6 platforms (web, VS Code, JetBrains, macOS, Windows, Linux) with 93% code reuse while maintaining a low memory footprint for embedded IDE environments.",{"type":85,"attrs":1008,"content":1010},{"id":1009},"p_6vpgpyc5",[1011],{"text":1012,"type":91},"The scalability limit is not in performance — it is in the ecosystem.",{"type":100,"attrs":1014,"content":1016},{"id":1015,"level":469},"h_keoacknh",[1017],{"text":1018,"type":91},"02 — Learning curve",{"type":85,"attrs":1020,"content":1022},{"id":1021},"p_z19ah0gl",[1023,1025,1029,1031,1035],{"text":1024,"type":91},"JSX is familiar to those coming from React. The API feels familiar. ",{"text":1026,"type":91,"marks":1027},"The mental model, however, does not.",[1028],{"type":94},{"text":1030,"type":91}," Solid looks like React on the surface but is fundamentally different underneath. Those who learn Solid after React often go through a moment of disorientation: \"why does my ",{"text":1032,"type":91,"marks":1033},"console.log",[1034],{"type":177},{"text":1036,"type":91}," inside the component only run once?\" — because the component only executes once.",{"type":85,"attrs":1038,"content":1040},{"id":1039},"p_eh8yz11e",[1041,1043,1046],{"text":1042,"type":91},"The curve rises especially with signals in asynchronous contexts. In Solid 2.0, if you expect a signal read to track after an ",{"text":623,"type":91,"marks":1044},[1045],{"type":177},{"text":1047,"type":91},", you will have problems. Tracking happens synchronously.",{"type":85,"attrs":1049,"content":1051},{"id":1050},"p_2lngjbb1",[1052],{"text":1053,"type":91},"For developers without a React background, the curve can be smoother: they don't carry the wrong habits. What takes weeks for those coming from React can take days for those coming from vanilla JS.",{"type":100,"attrs":1055,"content":1057},{"id":1056,"level":469},"h_97apans2",[1058],{"text":1059,"type":91},"03 — Performance and throughput",{"type":85,"attrs":1061,"content":1063},{"id":1062},"p_6hqyf3m9",[1064],{"text":1065,"type":91},"The JS Framework Benchmark is the broadest indicator available. Solid consistently stays in the first tier, alongside Inferno and vanilla JS, above React, Vue, and Angular.",{"type":85,"attrs":1067,"content":1069},{"id":1068},"p_a47f77jp",[1070,1072,1076],{"text":1071,"type":91},"The gain does not come from heuristics or optimization: it comes from the model. ",{"text":1073,"type":91,"marks":1074},"No Virtual DOM, no reconciliation, no tree copying.",[1075],{"type":94},{"text":1077,"type":91}," The compiler transforms JSX into direct DOM operations at build time.",{"type":516,"attrs":1079,"content":1082},{"id":1080,"language":519,"highlighted":1081},"code_xrc2d3uo","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Counter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setCount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Esta função executa UMA vez — não a cada clique\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Só o nó de texto com {count()} atualiza no DOM\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setCount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      Clicado {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()} vezes\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F O que o compilador Solid gera (simplificado):\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F const button = document.createElement(\"button\");\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F const text = document.createTextNode(\"\");\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F createEffect(() => { text.data = `Clicado ${count()} vezes`; });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F button.addEventListener(\"click\", () => setCount(count() + 1));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1083],{"text":1084,"type":91},"import { createSignal } from \"solid-js\";\n\nfunction Counter() {\n  const [count, setCount] = createSignal(0);\n\n  \u002F\u002F Esta função executa UMA vez — não a cada clique\n  \u002F\u002F Só o nó de texto com {count()} atualiza no DOM\n  return (\n    \u003Cbutton onClick={() => setCount(count() + 1)}>\n      Clicado {count()} vezes\n    \u003C\u002Fbutton>\n  );\n}\n\n\u002F\u002F O que o compilador Solid gera (simplificado):\n\u002F\u002F const button = document.createElement(\"button\");\n\u002F\u002F const text = document.createTextNode(\"\");\n\u002F\u002F createEffect(() => { text.data = `Clicado ${count()} vezes`; });\n\u002F\u002F button.addEventListener(\"click\", () => setCount(count() + 1));\n",{"type":100,"attrs":1086,"content":1088},{"id":1087,"level":469},"h_4kxkylsd",[1089],{"text":1090,"type":91},"04 — Latency and SSR",{"type":85,"attrs":1092,"content":1094},{"id":1093},"p_9sdswd21",[1095],{"text":1096,"type":91},"Solid supports SSR, streaming SSR, and Suspense. The compiler combined synchronous, streaming, and asynchronous SSR into the same output, with a non-reactive Async SSR approach that is simpler and faster. Reusing static strings in templates yields a 5–8% gain where there are many lines.",{"type":85,"attrs":1098,"content":1100},{"id":1099},"p_x9osr09b",[1101,1103,1107],{"text":1102,"type":91},"The latency perceived by the user is favored by the smaller bundle: ",{"text":1104,"type":91,"marks":1105},"7.6KB of framework means faster Time-to-Interactive",[1106],{"type":94},{"text":1108,"type":91}," even before any content optimization.",{"type":100,"attrs":1110,"content":1112},{"id":1111,"level":469},"h_hxi3toys",[1113],{"text":1114,"type":91},"05 — Community support",{"type":85,"attrs":1116,"content":1118},{"id":1117},"p_g3td7l2c",[1119],{"text":1120,"type":91},"Ryan Carniato, currently Principal Engineer for Open Source at Netlify, has been developing Solid's reactive model for over a decade. The official Discord has an active core team. Version 1.9.13 was released in May 2026. SolidStart 1.3 is the stable meta-framework.",{"type":85,"attrs":1122,"content":1124},{"id":1123},"p_gegxzoxa",[1125],{"text":1126,"type":91},"The biggest support limitation is not quality — it is quantity: if you get stuck on a specific edge case, there might not be a ready answer on Stack Overflow.",{"type":98},{"type":100,"attrs":1129,"content":1131},{"id":1130,"level":36},"h_4pw09kb9",[1132],{"text":1133,"type":91},"Use cases: where SolidJS really delivers",{"type":100,"attrs":1135,"content":1137},{"id":1136,"level":469},"h_7a88uo2i",[1138],{"text":1139,"type":91},"✅ Use SolidJS for",{"type":85,"attrs":1141,"content":1143},{"id":1142},"p_b6fppx8q",[1144,1148],{"text":1145,"type":91,"marks":1146},"Real-time dashboards and visualizations:",[1147],{"type":94},{"text":1149,"type":91}," updates at 60fps — metric charts, orderbooks, IoT telemetry. Fine-grained reactivity updates only the DOM node of the value that changed, without re-rendering the entire panel.",{"type":85,"attrs":1151,"content":1153},{"id":1152},"p_eb1h0e5m",[1154,1158],{"text":1155,"type":91,"marks":1156},"Widgets embedded in other systems:",[1157],{"type":94},{"text":1159,"type":91}," the 7.6KB bundle makes Solid ideal for components that live inside pages that already have their own stack. Chat widget, video player, checkout form — without loading 45KB of external runtime.",{"type":85,"attrs":1161,"content":1163},{"id":1162},"p_0xey32tp",[1164,1168],{"text":1165,"type":91,"marks":1166},"Apps with strict performance requirements:",[1167],{"type":94},{"text":1169,"type":91}," 2D games in the browser, rich editors, tables with thousands of rows updating in real-time.",{"type":85,"attrs":1171,"content":1173},{"id":1172},"p_jls3vfbu",[1174,1178],{"text":1175,"type":91,"marks":1176},"New projects with a team open to learning:",[1177],{"type":94},{"text":1179,"type":91}," JSX, TypeScript, Vite — everything is familiar. What changes is the mental model.",{"type":100,"attrs":1181,"content":1183},{"id":1182,"level":469},"h_he9pji1f",[1184],{"text":1185,"type":91},"❌ Avoid when",{"type":85,"attrs":1187,"content":1189},{"id":1188},"p_xnmti95h",[1190,1194],{"text":1191,"type":91,"marks":1192},"The library you need does not exist for Solid:",[1193],{"type":94},{"text":1195,"type":91}," Rich text editors (Lexical, TipTap), animation libraries (Framer Motion), specific charting libraries — check first.",{"type":85,"attrs":1197,"content":1199},{"id":1198},"p_77qgrp0w",[1200,1204],{"text":1201,"type":91,"marks":1202},"Priority is hiring or fast onboarding:",[1203],{"type":94},{"text":1205,"type":91}," the job market for SolidJS is minimal. If the plan includes hiring frontend devs quickly, React drastically reduces onboarding costs.",{"type":98},{"type":100,"attrs":1208,"content":1210},{"id":1209,"level":469},"h_pobrv9uz",[1211],{"text":1212,"type":91},"SolidStart: the meta-framework",{"type":85,"attrs":1214,"content":1216},{"id":1215},"p_jd0f0dau",[1217],{"text":1218,"type":91},"SolidStart 1.3 is the Next.js equivalent for Solid: file-based routing, SSR, server functions, and form actions.",{"type":516,"attrs":1220,"content":1223},{"id":1221,"language":519,"highlighted":1222},"code_8cul4pl2","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F src\u002Froutes\u002Fcontato.tsx — SolidStart 1.x\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createAsync, action, redirect } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solidjs\u002Frouter\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { getContatos } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"~\u002Flib\u002Fdb\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Server function — roda só no servidor\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> enviarMensagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">formData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> FormData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  \"use server\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> formData.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"nome\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> salvarMensagem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ nome, ts: Date.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">now\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> redirect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fobrigado\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Componente isomórfico — SSR + hidratação no cliente\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Contato\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> contatos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createAsync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> getContatos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Contato<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">h1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{enviarMensagem} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">method\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"post\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"nome\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> required\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Enviar<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">contatos\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">c\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{c.nome}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>)}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">main\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1224],{"text":1225,"type":91},"\u002F\u002F src\u002Froutes\u002Fcontato.tsx — SolidStart 1.x\nimport { createAsync, action, redirect } from \"@solidjs\u002Frouter\";\nimport { getContatos } from \"~\u002Flib\u002Fdb\";\n\n\u002F\u002F Server function — roda só no servidor\nconst enviarMensagem = action(async (formData: FormData) => {\n  \"use server\";\n  const nome = formData.get(\"nome\") as string;\n  await salvarMensagem({ nome, ts: Date.now() });\n  return redirect(\"\u002Fobrigado\");\n});\n\n\u002F\u002F Componente isomórfico — SSR + hidratação no cliente\nexport default function Contato() {\n  const contatos = createAsync(() => getContatos());\n\n  return (\n    \u003Cmain>\n      \u003Ch1>Contato\u003C\u002Fh1>\n      \u003Cform action={enviarMensagem} method=\"post\">\n        \u003Cinput name=\"nome\" required \u002F>\n        \u003Cbutton type=\"submit\">Enviar\u003C\u002Fbutton>\n      \u003C\u002Fform>\n      \u003Cul>\n        {contatos()?.map(c => \u003Cli>{c.nome}\u003C\u002Fli>)}\n      \u003C\u002Ful>\n    \u003C\u002Fmain>\n  );\n}\n",{"type":98},{"type":100,"attrs":1228,"content":1230},{"id":1229,"level":36},"h_6ppiwn3v",[1231],{"text":1232,"type":91},"SolidJS with LLMs — chats, editorial pipelines, and agent loops",{"type":100,"attrs":1234,"content":1236},{"id":1235,"level":469},"h_kwxxgm9b",[1237],{"text":1238,"type":91},"Why fine-grained reactivity matters for AI apps",{"type":85,"attrs":1240,"content":1242},{"id":1241},"p_ntmc42oh",[1243,1245,1249],{"text":1244,"type":91},"Every LLM chat interface solves the same problem: a token arrives every few milliseconds via ",{"text":1246,"type":91,"marks":1247},"Server-Sent Events (SSE)",[1248],{"type":94},{"text":1250,"type":91},", and the UI needs to append it to the displayed text without redrawing anything around it.",{"type":1252,"attrs":1253,"content":1255},"compare",{"id":1254},"cmp_wmedtqx4",[1256,1293],{"type":1257,"attrs":1258,"content":1262},"compareColumn",{"id":1259,"side":1260,"title":1261},"col_wgtdec9t","left","React: Virtual DOM and Re-rendering",[1263,1269,1275,1281,1287],{"type":85,"attrs":1264,"content":1266},{"id":1265},"p_3nbcgcrb",[1267],{"text":1268,"type":91},"Each new token triggers a setState.",{"type":85,"attrs":1270,"content":1272},{"id":1271},"p_4zmsj928",[1273],{"text":1274,"type":91},"The component re-renders completely.",{"type":85,"attrs":1276,"content":1278},{"id":1277},"p_cbratw6u",[1279],{"text":1280,"type":91},"Virtual DOM diffs the entire string.",{"type":85,"attrs":1282,"content":1284},{"id":1283},"p_yexzu9xp",[1285],{"text":1286,"type":91},"Applies differences to the DOM after reconciliation.",{"type":85,"attrs":1288,"content":1290},{"id":1289},"p_87vdcyhi",[1291],{"text":1292,"type":91},"500 tokens generate 500 reconciliation cycles.",{"type":1257,"attrs":1294,"content":1298},{"id":1295,"side":1296,"title":1297},"col_pb5t6w3m","right","SolidJS: Fine-Grained Reactivity with Signals",[1299,1305,1311,1317,1323],{"type":85,"attrs":1300,"content":1302},{"id":1301},"p_5t8g2mxa",[1303],{"text":1304,"type":91},"Each new token updates a signal.",{"type":85,"attrs":1306,"content":1308},{"id":1307},"p_qm9ebfjg",[1309],{"text":1310,"type":91},"Only one text node in the DOM changes.",{"type":85,"attrs":1312,"content":1314},{"id":1313},"p_69ctrncs",[1315],{"text":1316,"type":91},"There is no complete re-rendering.",{"type":85,"attrs":1318,"content":1320},{"id":1319},"p_wq6fwiop",[1321],{"text":1322,"type":91},"Targeted and efficient update.",{"type":85,"attrs":1324,"content":1326},{"id":1325},"p_i1jnbt56",[1327],{"text":1328,"type":91},"Reduces processing in chat interfaces.",{"type":85,"attrs":1330,"content":1332},{"id":1331},"p_crkkuhcg",[1333,1335,1339],{"text":1334,"type":91},"In React, each new token triggers a ",{"text":1336,"type":91,"marks":1337},"setState",[1338],{"type":177},{"text":1340,"type":91},", the component re-renders, the Virtual DOM diffs the entire string and applies the difference. For 500 tokens in 30 seconds, that is 500 reconciliation cycles in the same open conversation.",{"type":85,"attrs":1342,"content":1344},{"id":1343},"p_03v0yt0s",[1345,1347,1351],{"text":1346,"type":91},"In Solid, the new token updates a signal — ",{"text":1348,"type":91,"marks":1349},"a single text node in the DOM changes, with nothing else",[1350],{"type":94},{"text":627,"type":91},{"type":85,"attrs":1353,"content":1355},{"id":1354},"p_wa5pnuh6",[1356],{"text":1357,"type":91},"The same argument multiplies in editorial pipelines with multiple agents running in parallel, where each step (research, draft, review, SEO) emits tokens independently. Keeping the state of each step in separate signals means that the progress of one agent causes no cost to the others.",{"type":98},{"type":100,"attrs":1360,"content":1362},{"id":1361,"level":469},"h_phsvhq5g",[1363],{"text":1364,"type":91},"Chat with token-by-token streaming",{"type":516,"attrs":1366,"content":1369},{"id":1367,"language":519,"highlighted":1368},"code_yil90kcb","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal, createEffect, For, onCleanup } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Message\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"user\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"assistant\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ChatLLM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">mensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setMensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Message\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">streamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setStreamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">carregando\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setCarregando\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> enviar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">texto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setMensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">m, { role: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"user\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, content: texto }]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setCarregando\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setStreamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> res\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fapi\u002Fchat\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      method: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"POST\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">stringify\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ mensagens: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">mensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      headers: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Content-Type\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"application\u002Fjson\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> reader\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> res.body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">getReader\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> decoder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> TextDecoder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    while\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> reader.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">read\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (done) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">break\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> chunk\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> decoder.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">decode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(value, { stream: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> linha\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> chunk.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">split\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">\\n\\n\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">linha.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">startsWith\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"data: \"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">continue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">        const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> token\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> linha.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (token \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"[DONE]\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">break\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">        \u002F\u002F Signal acumula → APENAS o nó de texto do assistente atualiza\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        setStreamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">prev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> prev \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> token);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setMensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">m, { role: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"assistant\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, content: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">streamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() }]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setStreamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setCarregando\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"chat\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">For\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> each\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">mensagens\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">msg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">`msg msg--${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">msg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}>{msg.content}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        )}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">For\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F* Só este nó de texto atualiza a cada token *\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">carregando\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"msg msg--assistant streaming\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">streamAtual\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onKeyDown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> e.key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Enter\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> enviar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(e.currentTarget.value)} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1370],{"text":1371,"type":91},"import { createSignal, createEffect, For, onCleanup } from \"solid-js\";\n\ntype Message = { role: \"user\" | \"assistant\"; content: string };\n\nfunction ChatLLM() {\n  const [mensagens, setMensagens] = createSignal\u003CMessage[]>([]);\n  const [streamAtual, setStreamAtual] = createSignal(\"\");\n  const [carregando, setCarregando] = createSignal(false);\n\n  const enviar = async (texto: string) => {\n    setMensagens(m => [...m, { role: \"user\", content: texto }]);\n    setCarregando(true);\n    setStreamAtual(\"\");\n\n    const res = await fetch(\"\u002Fapi\u002Fchat\", {\n      method: \"POST\",\n      body: JSON.stringify({ mensagens: mensagens() }),\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n    });\n\n    const reader = res.body!.getReader();\n    const decoder = new TextDecoder();\n\n    while (true) {\n      const { done, value } = await reader.read();\n      if (done) break;\n\n      const chunk = decoder.decode(value, { stream: true });\n      for (const linha of chunk.split(\"\\n\\n\")) {\n        if (!linha.startsWith(\"data: \")) continue;\n        const token = linha.slice(6);\n        if (token === \"[DONE]\") break;\n        \u002F\u002F Signal acumula → APENAS o nó de texto do assistente atualiza\n        setStreamAtual(prev => prev + token);\n      }\n    }\n\n    setMensagens(m => [...m, { role: \"assistant\", content: streamAtual() }]);\n    setStreamAtual(\"\");\n    setCarregando(false);\n  };\n\n  return (\n    \u003Cdiv class=\"chat\">\n      \u003CFor each={mensagens()}>\n        {(msg) => (\n          \u003Cdiv class={`msg msg--${msg.role}`}>{msg.content}\u003C\u002Fdiv>\n        )}\n      \u003C\u002FFor>\n\n      {\u002F* Só este nó de texto atualiza a cada token *\u002F}\n      {carregando() && \u003Cdiv class=\"msg msg--assistant streaming\">{streamAtual()}\u003C\u002Fdiv>}\n\n      \u003Cinput onKeyDown={(e) => e.key === \"Enter\" && enviar(e.currentTarget.value)} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":80,"attrs":1373,"content":1375},{"id":1374},"quote_ob1x2hyb",[1376],{"type":85,"attrs":1377,"content":1379},{"id":1378},"p_pbi5r3ga",[1380,1381,1385,1387,1391,1393,1397],{"text":533,"type":91},{"text":1382,"type":91,"marks":1383},"Why it matters:",[1384],{"type":94},{"text":1386,"type":91}," ",{"text":1388,"type":91,"marks":1389},"setStreamAtual",[1390],{"type":177},{"text":1392,"type":91}," it is called hundreds of times per response. In React, each call re-renders the entire component — including the list of previous messages. In Solid, ",{"text":1394,"type":91,"marks":1395},"only the text node of the current streaming block updates",[1396],{"type":94},{"text":627,"type":91},{"type":98},{"type":100,"attrs":1400,"content":1402},{"id":1401,"level":469},"h_v9zslyzu",[1403],{"text":1404,"type":91},"Editorial pipeline with agent loop",{"type":85,"attrs":1406,"content":1408},{"id":1407},"p_sv533ylt",[1409],{"text":1410,"type":91},"A typical editorial pipeline chains agents: research → draft → editorial review → SEO → publication. Each step can take 10–60 seconds and emits tokens independently. Each agent has its own signal — completely isolated updates.",{"type":516,"attrs":1412,"content":1415},{"id":1413,"language":63,"highlighted":1414},"code_eq0bjjn5","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">Pesquisa → Rascunho → Revisão → \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">SEO\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> → Publicar\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ↓           ↓         ↓        ↓       ↓\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> signal     signal    signal   signal  signal\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">   ↓           ↓         ↓        ↓       ↓\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">DOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> node   \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">DOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> node  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">DOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> node \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">DOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> node \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">DOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> node\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1416],{"text":1417,"type":91},"Pesquisa → Rascunho → Revisão → SEO → Publicar\n   ↓           ↓         ↓        ↓       ↓\n signal     signal    signal   signal  signal\n   ↓           ↓         ↓        ↓       ↓\nDOM node   DOM node  DOM node DOM node DOM node\n",{"type":85,"attrs":1419,"content":1421},{"id":1420},"p_0yz4i770",[1422],{"text":1423,"type":91,"marks":1424},"Each signal updates its own DOM node — no interference between steps.",[1425],{"type":295},{"type":516,"attrs":1427,"content":1430},{"id":1428,"language":519,"highlighted":1429},"code_vzdf9sel","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal, createMemo, Show } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EtapaStatus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"idle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"rodando\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"feito\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"erro\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> PipelineEditorial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Cada agente tem seu próprio signal — completamente isolados\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">pesquisa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setPesquisa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ tokens: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"idle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EtapaStatus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">rascunho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setRascunho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ tokens: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"idle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EtapaStatus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">revisao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,   \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setRevisao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]   \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ tokens: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"idle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EtapaStatus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">seo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,       \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setSeo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]       \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ tokens: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"idle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> EtapaStatus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Memo derivado — só recalcula quando qualquer etapa muda\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> progresso\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> etapas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pesquisa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">rascunho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">revisao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">seo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> etapas.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> e.status \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"feito\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rodarEtapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">v\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">prev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> any\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> any\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">    endpoint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">    payload\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> object\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  ) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">prev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">prev, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rodando\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> res\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(endpoint, {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      method: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"POST\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">stringify\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(payload),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      headers: { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Content-Type\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"application\u002Fjson\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> reader\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> res.body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">getReader\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> dec\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> TextDecoder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    while\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> reader.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">read\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (done) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">break\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">      \u002F\u002F Apenas o signal desta etapa atualiza — os outros não são tocados\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      setter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">prev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">prev, tokens: prev.tokens \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dec.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">decode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(value) }));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">prev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">prev, status: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"feito\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> iniciarPipeline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">tema\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rodarEtapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(setPesquisa, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fapi\u002Fagent\u002Fpesquisa\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,  { tema });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rodarEtapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(setRascunho, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fapi\u002Fagent\u002Frascunho\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,  { pesquisa: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pesquisa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">().tokens });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rodarEtapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(setRevisao,  \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fapi\u002Fagent\u002Frevisao\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,   { rascunho: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">rascunho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">().tokens });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> rodarEtapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(setSeo,      \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\u002Fapi\u002Fagent\u002Fseo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,       { texto:    \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">revisao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">().tokens });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pipeline\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Etapas concluídas: {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">progresso\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()} \u002F 4<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> iniciarPipeline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"IA generativa em 2026\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)}>Iniciar<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Etapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"🔍 Pesquisa\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pesquisa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Etapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"✍️ Rascunho\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">rascunho\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Etapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"📝 Revisão\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">   dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">revisao\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}  \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">Etapa\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> titulo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"🔖 SEO\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">       dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">seo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1431],{"text":1432,"type":91},"import { createSignal, createMemo, Show } from \"solid-js\";\n\ntype EtapaStatus = \"idle\" | \"rodando\" | \"feito\" | \"erro\";\n\nfunction PipelineEditorial() {\n  \u002F\u002F Cada agente tem seu próprio signal — completamente isolados\n  const [pesquisa,  setPesquisa]  = createSignal({ tokens: \"\", status: \"idle\" as EtapaStatus });\n  const [rascunho,  setRascunho]  = createSignal({ tokens: \"\", status: \"idle\" as EtapaStatus });\n  const [revisao,   setRevisao]   = createSignal({ tokens: \"\", status: \"idle\" as EtapaStatus });\n  const [seo,       setSeo]       = createSignal({ tokens: \"\", status: \"idle\" as EtapaStatus });\n\n  \u002F\u002F Memo derivado — só recalcula quando qualquer etapa muda\n  const progresso = createMemo(() => {\n    const etapas = [pesquisa(), rascunho(), revisao(), seo()];\n    return etapas.filter(e => e.status === \"feito\").length;\n  });\n\n  const rodarEtapa = async (\n    setter: (v: (prev: any) => any) => void,\n    endpoint: string,\n    payload: object\n  ) => {\n    setter(prev => ({ ...prev, status: \"rodando\" }));\n    const res = await fetch(endpoint, {\n      method: \"POST\",\n      body: JSON.stringify(payload),\n      headers: { \"Content-Type\": \"application\u002Fjson\" },\n    });\n    const reader = res.body!.getReader();\n    const dec = new TextDecoder();\n    while (true) {\n      const { done, value } = await reader.read();\n      if (done) break;\n      \u002F\u002F Apenas o signal desta etapa atualiza — os outros não são tocados\n      setter(prev => ({ ...prev, tokens: prev.tokens + dec.decode(value) }));\n    }\n    setter(prev => ({ ...prev, status: \"feito\" }));\n  };\n\n  const iniciarPipeline = async (tema: string) => {\n    await rodarEtapa(setPesquisa, \"\u002Fapi\u002Fagent\u002Fpesquisa\",  { tema });\n    await rodarEtapa(setRascunho, \"\u002Fapi\u002Fagent\u002Frascunho\",  { pesquisa: pesquisa().tokens });\n    await rodarEtapa(setRevisao,  \"\u002Fapi\u002Fagent\u002Frevisao\",   { rascunho: rascunho().tokens });\n    await rodarEtapa(setSeo,      \"\u002Fapi\u002Fagent\u002Fseo\",       { texto:    revisao().tokens });\n  };\n\n  return (\n    \u003Cdiv class=\"pipeline\">\n      \u003Cp>Etapas concluídas: {progresso()} \u002F 4\u003C\u002Fp>\n      \u003Cbutton onClick={() => iniciarPipeline(\"IA generativa em 2026\")}>Iniciar\u003C\u002Fbutton>\n\n      \u003CEtapa titulo=\"🔍 Pesquisa\"  dados={pesquisa()} \u002F>\n      \u003CEtapa titulo=\"✍️ Rascunho\"  dados={rascunho()} \u002F>\n      \u003CEtapa titulo=\"📝 Revisão\"   dados={revisao()}  \u002F>\n      \u003CEtapa titulo=\"🔖 SEO\"       dados={seo()}      \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":98},{"type":100,"attrs":1435,"content":1437},{"id":1436,"level":36},"h_hbeek7rb",[1438],{"text":1439,"type":91},"SolidJS vs. Next.js for apps with AI agents",{"type":100,"attrs":1441,"content":1443},{"id":1442,"level":469},"h_bfqdc4ct",[1444],{"text":1445,"type":91},"LLM SDKs are framework-agnostic",{"type":85,"attrs":1447,"content":1449},{"id":1448},"p_wlaxk7kj",[1450,1454,1456,1460,1461,1465,1466,1470],{"text":1451,"type":91,"marks":1452},"LLM SDKs are pure TypeScript",[1453],{"type":94},{"text":1455,"type":91}," — they work in any JS environment. Vercel AI SDK (",{"text":1457,"type":91,"marks":1458},"streamText",[1459],{"type":177},{"text":201,"type":91},{"text":1462,"type":91,"marks":1463},"generateText",[1464],{"type":177},{"text":201,"type":91},{"text":1467,"type":91,"marks":1468},"generateObject",[1469],{"type":177},{"text":1471,"type":91},"), Firebase Genkit, LangChain.js, Anthropic SDK, OpenAI SDK: all run in SolidJS, Next.js, SvelteKit, or Vanilla JS without modification.",{"type":85,"attrs":1473,"content":1475},{"id":1474},"p_xyvdm1n6",[1476,1478,1482,1484,1487,1488,1491,1492,1496],{"text":1477,"type":91},"What is React-specific are only the ",{"text":1479,"type":91,"marks":1480},"UI hooks",[1481],{"type":94},{"text":1483,"type":91}," — ",{"text":197,"type":91,"marks":1485},[1486],{"type":177},{"text":201,"type":91},{"text":203,"type":91,"marks":1489},[1490],{"type":177},{"text":201,"type":91},{"text":1493,"type":91,"marks":1494},"useAssistant",[1495],{"type":177},{"text":1497,"type":91},". In Solid, you replace these hooks with signals. The business logic and the LLM call remain identical.",{"type":100,"attrs":1499,"content":1501},{"id":1500,"level":469},"h_eedd17iw",[1502],{"text":1503,"type":91},"Technical comparison",{"type":304,"attrs":1505,"content":1507},{"id":1506},"tbl_jru6ru7r",[1508,1536,1565,1594,1623,1652,1680,1708,1737,1766],{"type":309,"content":1509},[1510,1518,1527],{"type":312,"attrs":1511,"content":1512},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1513],{"type":85,"attrs":1514,"content":1516},{"id":1515},"p_zk5ulphj",[1517],{"text":649,"type":91},{"type":312,"attrs":1519,"content":1520},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1521],{"type":85,"attrs":1522,"content":1524},{"id":1523},"p_au2vv2uz",[1525],{"text":1526,"type":91},"Next.js (App Router)",{"type":312,"attrs":1528,"content":1529},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1530],{"type":85,"attrs":1531,"content":1533},{"id":1532},"p_p13gqpfc",[1534],{"text":1535,"type":91},"SolidJS + SolidStart",{"type":309,"content":1537},[1538,1547,1556],{"type":334,"attrs":1539,"content":1540},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1541],{"type":85,"attrs":1542,"content":1544},{"id":1543},"p_zwhsad9p",[1545],{"text":1546,"type":91},"Cost per token received via SSE",{"type":334,"attrs":1548,"content":1549},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1550],{"type":85,"attrs":1551,"content":1553},{"id":1552},"p_vu6c2d0k",[1554],{"text":1555,"type":91},"Component re-render + Virtual DOM diff",{"type":334,"attrs":1557,"content":1558},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1559],{"type":85,"attrs":1560,"content":1562},{"id":1561},"p_93my3bfs",[1563],{"text":1564,"type":91},"Text node update via signal — O(1) ✅",{"type":309,"content":1566},[1567,1576,1585],{"type":334,"attrs":1568,"content":1569},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1570],{"type":85,"attrs":1571,"content":1573},{"id":1572},"p_4tbdjrxd",[1574],{"text":1575,"type":91},"State of multiple parallel agents",{"type":334,"attrs":1577,"content":1578},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1579],{"type":85,"attrs":1580,"content":1582},{"id":1581},"p_1m9vyyqr",[1583],{"text":1584,"type":91},"useState per agent → cascade re-renders",{"type":334,"attrs":1586,"content":1587},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1588],{"type":85,"attrs":1589,"content":1591},{"id":1590},"p_v6sr6fql",[1592],{"text":1593,"type":91},"Signal per agent → isolated updates ✅",{"type":309,"content":1595},[1596,1605,1614],{"type":334,"attrs":1597,"content":1598},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1599],{"type":85,"attrs":1600,"content":1602},{"id":1601},"p_r35rsvg5",[1603],{"text":1604,"type":91},"Streaming server functions",{"type":334,"attrs":1606,"content":1607},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1608],{"type":85,"attrs":1609,"content":1611},{"id":1610},"p_brzvo9qy",[1612],{"text":1613,"type":91},"React Server Components with native streaming",{"type":334,"attrs":1615,"content":1616},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1617],{"type":85,"attrs":1618,"content":1620},{"id":1619},"p_dks2olcb",[1621],{"text":1622,"type":91},"Server functions + createAsync \u002F SSE",{"type":309,"content":1624},[1625,1634,1643],{"type":334,"attrs":1626,"content":1627},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1628],{"type":85,"attrs":1629,"content":1631},{"id":1630},"p_j908zbbm",[1632],{"text":1633,"type":91},"Initial Server-Side Rendering",{"type":334,"attrs":1635,"content":1636},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1637],{"type":85,"attrs":1638,"content":1640},{"id":1639},"p_awq9xjwb",[1641],{"text":1642,"type":91},"Mature, well-documented",{"type":334,"attrs":1644,"content":1645},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1646],{"type":85,"attrs":1647,"content":1649},{"id":1648},"p_i88lnrcf",[1650],{"text":1651,"type":91},"Functional and stable, less mileage",{"type":309,"content":1653},[1654,1663,1672],{"type":334,"attrs":1655,"content":1656},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1657],{"type":85,"attrs":1658,"content":1660},{"id":1659},"p_l45a9p80",[1661],{"text":1662,"type":91},"LLM SDKs",{"type":334,"attrs":1664,"content":1665},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1666],{"type":85,"attrs":1667,"content":1669},{"id":1668},"p_fdd0md6w",[1670],{"text":1671,"type":91},"Same TypeScript ecosystem",{"type":334,"attrs":1673,"content":1674},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1675],{"type":85,"attrs":1676,"content":1678},{"id":1677},"p_pbcglls3",[1679],{"text":1671,"type":91},{"type":309,"content":1681},[1682,1691,1700],{"type":334,"attrs":1683,"content":1684},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1685],{"type":85,"attrs":1686,"content":1688},{"id":1687},"p_p044jd1t",[1689],{"text":1690,"type":91},"Framework bundle",{"type":334,"attrs":1692,"content":1693},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1694],{"type":85,"attrs":1695,"content":1697},{"id":1696},"p_fzifrh5k",[1698],{"text":1699,"type":91},"~45KB + Next.js runtime",{"type":334,"attrs":1701,"content":1702},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1703],{"type":85,"attrs":1704,"content":1706},{"id":1705},"p_jfa2vl2w",[1707],{"text":783,"type":91},{"type":309,"content":1709},[1710,1719,1728],{"type":334,"attrs":1711,"content":1712},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1713],{"type":85,"attrs":1714,"content":1716},{"id":1715},"p_s1lpt8ks",[1717],{"text":1718,"type":91},"UI components for chat",{"type":334,"attrs":1720,"content":1721},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1722],{"type":85,"attrs":1723,"content":1725},{"id":1724},"p_s67i8aht",[1726],{"text":1727,"type":91},"shadcn\u002Fui, Radix — ready for React",{"type":334,"attrs":1729,"content":1730},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1731],{"type":85,"attrs":1732,"content":1734},{"id":1733},"p_vtsnkqon",[1735],{"text":1736,"type":91},"Kobalte (Radix port), Solid UI — smaller selection",{"type":309,"content":1738},[1739,1748,1757],{"type":334,"attrs":1740,"content":1741},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1742],{"type":85,"attrs":1743,"content":1745},{"id":1744},"p_gsalbgou",[1746],{"text":1747,"type":91},"Dashboards with 10K+ rows",{"type":334,"attrs":1749,"content":1750},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1751],{"type":85,"attrs":1752,"content":1754},{"id":1753},"p_v0x35eo4",[1755],{"text":1756,"type":91},"Manual optimization with useMemo",{"type":334,"attrs":1758,"content":1759},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1760],{"type":85,"attrs":1761,"content":1763},{"id":1762},"p_8f9qondl",[1764],{"text":1765,"type":91},"Native via fine-grained reactivity ✅ 2× faster",{"type":309,"content":1767},[1768,1777,1786],{"type":334,"attrs":1769,"content":1770},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1771],{"type":85,"attrs":1772,"content":1774},{"id":1773},"p_j3x7z30n",[1775],{"text":1776,"type":91},"Hiring \u002F onboarding",{"type":334,"attrs":1778,"content":1779},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1780],{"type":85,"attrs":1781,"content":1783},{"id":1782},"p_82ov1c5c",[1784],{"text":1785,"type":91},"Mature market",{"type":334,"attrs":1787,"content":1788},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1789],{"type":85,"attrs":1790,"content":1792},{"id":1791},"p_8rcr6nvz",[1793],{"text":1794,"type":91},"Scarce specialists",{"type":100,"attrs":1796,"content":1798},{"id":1797,"level":469},"h_0d8moetw",[1799],{"text":1800,"type":91},"The same chat — Next.js and SolidJS side by side",{"type":85,"attrs":1802,"content":1804},{"id":1803},"p_akjfjl0f",[1805,1809,1812],{"text":1806,"type":91,"marks":1807},"Next.js — hook ",[1808],{"type":94},{"text":197,"type":91,"marks":1810},[1811],{"type":177},{"text":1813,"type":91,"marks":1814}," (React-specific):",[1815],{"type":94},{"type":516,"attrs":1817,"content":1821},{"id":1818,"language":1819,"highlighted":1820},"code_vyqao1hd","tsx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Next.js App Router — \"use client\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { useChat } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"ai\u002Freact\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F hook React — não funciona no Solid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">messages\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">handleInputChange\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">handleSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useChat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F Cada token → re-render do componente inteiro\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {messages.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{m.id}>{m.content}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>)}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onSubmit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{handleSubmit}>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{input} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">onChange\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{handleInputChange} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"submit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Enviar<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">form\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1822],{"text":1823,"type":91},"\u002F\u002F Next.js App Router — \"use client\"\nimport { useChat } from \"ai\u002Freact\"; \u002F\u002F hook React — não funciona no Solid\n\nexport default function Chat() {\n  const { messages, input, handleInputChange, handleSubmit } = useChat();\n\n  \u002F\u002F Cada token → re-render do componente inteiro\n  return (\n    \u003Cdiv>\n      {messages.map(m => \u003Cdiv key={m.id}>{m.content}\u003C\u002Fdiv>)}\n      \u003Cform onSubmit={handleSubmit}>\n        \u003Cinput value={input} onChange={handleInputChange} \u002F>\n        \u003Cbutton type=\"submit\">Enviar\u003C\u002Fbutton>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":85,"attrs":1825,"content":1827},{"id":1826},"p_io3gwrwm",[1828],{"text":1829,"type":91,"marks":1830},"SolidJS — same SDK, UI layer with signals:",[1831],{"type":94},{"type":516,"attrs":1833,"content":1836},{"id":1834,"language":1819,"highlighted":1835},"code_y7g7c8a3","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F SolidJS — streamText do Vercel AI SDK funciona aqui sem modificação\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createSignal, For } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"solid-js\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { streamText } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"ai\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;          \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F ← mesmo SDK, sem modificação\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { anthropic } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@ai-sdk\u002Fanthropic\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Chat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">msgs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setMsgs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">stream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setStream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> enviar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">texto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setMsgs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">m, { content: texto }]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">    \u002F\u002F streamText é agnóstico — funciona em qualquer JS runtime\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> result\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> streamText\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      model: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">anthropic\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"claude-sonnet-4-6\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      prompt: texto,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> delta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> result.textStream) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">      \u002F\u002F Apenas o nó de texto do stream atualiza — sem re-render\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      setStream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> s \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> delta);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setMsgs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">m, { content: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">stream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() }]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    setStream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">For\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> each\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">msgs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}>{(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">m\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{m.content}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">For\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">stream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">stream\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onKeyDown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> e.key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"Enter\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> enviar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(e.currentTarget.value)} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[1837],{"text":1838,"type":91},"\u002F\u002F SolidJS — streamText do Vercel AI SDK funciona aqui sem modificação\nimport { createSignal, For } from \"solid-js\";\nimport { streamText } from \"ai\";          \u002F\u002F ← mesmo SDK, sem modificação\nimport { anthropic } from \"@ai-sdk\u002Fanthropic\";\n\nexport default function Chat() {\n  const [msgs, setMsgs] = createSignal([]);\n  const [stream, setStream] = createSignal(\"\");\n\n  const enviar = async (texto) => {\n    setMsgs(m => [...m, { content: texto }]);\n    \u002F\u002F streamText é agnóstico — funciona em qualquer JS runtime\n    const result = await streamText({\n      model: anthropic(\"claude-sonnet-4-6\"),\n      prompt: texto,\n    });\n    for await (const delta of result.textStream) {\n      \u002F\u002F Apenas o nó de texto do stream atualiza — sem re-render\n      setStream(s => s + delta);\n    }\n    setMsgs(m => [...m, { content: stream() }]);\n    setStream(\"\");\n  };\n\n  return (\n    \u003Cdiv>\n      \u003CFor each={msgs()}>{(m) => \u003Cdiv>{m.content}\u003C\u002Fdiv>}\u003C\u002FFor>\n      {stream() && \u003Cdiv>{stream()}\u003C\u002Fdiv>}\n      \u003Cinput onKeyDown={e => e.key === \"Enter\" && enviar(e.currentTarget.value)} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":100,"attrs":1840,"content":1842},{"id":1841,"level":469},"h_myafxpgl",[1843],{"text":1844,"type":91},"Which scenario to choose",{"type":304,"attrs":1846,"content":1848},{"id":1847},"tbl_7gixcq73",[1849,1878,1909,1939,1973],{"type":309,"content":1850},[1851,1860,1869],{"type":312,"attrs":1852,"content":1853},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1854],{"type":85,"attrs":1855,"content":1857},{"id":1856},"p_7icb5ebg",[1858],{"text":1859,"type":91},"Scenario",{"type":312,"attrs":1861,"content":1862},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1863],{"type":85,"attrs":1864,"content":1866},{"id":1865},"p_j9162q9v",[1867],{"text":1868,"type":91},"Choice",{"type":312,"attrs":1870,"content":1871},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1872],{"type":85,"attrs":1873,"content":1875},{"id":1874},"p_yxsebtgd",[1876],{"text":1877,"type":91},"Why",{"type":309,"content":1879},[1880,1889,1900],{"type":334,"attrs":1881,"content":1882},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1883],{"type":85,"attrs":1884,"content":1886},{"id":1885},"p_ruxp13zp",[1887],{"text":1888,"type":91},"Real-time agent monitoring dashboard",{"type":334,"attrs":1890,"content":1891},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1892],{"type":85,"attrs":1893,"content":1895},{"id":1894},"p_g1j2st9z",[1896],{"text":1897,"type":91,"marks":1898},"SolidJS",[1899],{"type":94},{"type":334,"attrs":1901,"content":1902},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1903],{"type":85,"attrs":1904,"content":1906},{"id":1905},"p_k1sxo61u",[1907],{"text":1908,"type":91},"Dozens of agents with tokens in parallel — O(1) per update",{"type":309,"content":1910},[1911,1920,1930],{"type":334,"attrs":1912,"content":1913},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1914],{"type":85,"attrs":1915,"content":1917},{"id":1916},"p_fcrjm88v",[1918],{"text":1919,"type":91},"Editorial pipeline with granular progress UI",{"type":334,"attrs":1921,"content":1922},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1923],{"type":85,"attrs":1924,"content":1926},{"id":1925},"p_y0x4h2dn",[1927],{"text":1897,"type":91,"marks":1928},[1929],{"type":94},{"type":334,"attrs":1931,"content":1932},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1933],{"type":85,"attrs":1934,"content":1936},{"id":1935},"p_s83dug5e",[1937],{"text":1938,"type":91},"5 isolated signals vs. Zustand + manual memoization",{"type":309,"content":1940},[1941,1950,1961],{"type":334,"attrs":1942,"content":1943},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1944],{"type":85,"attrs":1945,"content":1947},{"id":1946},"p_q87xipwi",[1948],{"text":1949,"type":91},"Chat as a feature of an existing React\u002FNext.js product",{"type":334,"attrs":1951,"content":1952},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1953],{"type":85,"attrs":1954,"content":1956},{"id":1955},"p_hsxuln2q",[1957],{"text":1958,"type":91,"marks":1959},"Next.js",[1960],{"type":94},{"type":334,"attrs":1962,"content":1963},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1964],{"type":85,"attrs":1965,"content":1967},{"id":1966},"p_ne9ucsjc",[1968,1971],{"text":197,"type":91,"marks":1969},[1970],{"type":177},{"text":1972,"type":91}," it works; migrating doesn't solve the real bottleneck (LLM latency)",{"type":309,"content":1974},[1975,1984,1994],{"type":334,"attrs":1976,"content":1977},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1978],{"type":85,"attrs":1979,"content":1981},{"id":1980},"p_6xsjdo9h",[1982],{"text":1983,"type":91},"SaaS with SEO + blog + dashboard + chat",{"type":334,"attrs":1985,"content":1986},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1987],{"type":85,"attrs":1988,"content":1990},{"id":1989},"p_fbg8k21l",[1991],{"text":1958,"type":91,"marks":1992},[1993],{"type":94},{"type":334,"attrs":1995,"content":1996},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[1997],{"type":85,"attrs":1998,"content":2000},{"id":1999},"p_0s1mgdh7",[2001],{"text":2002,"type":91},"RSC, broad ecosystem, more mature meta-framework",{"type":80,"attrs":2004,"content":2006},{"id":2005},"quote_j2ijqvqv",[2007],{"type":85,"attrs":2008,"content":2010},{"id":2009},"p_t9b33xlw",[2011,2013,2017,2019,2023,2025,2029,2031,2035],{"text":2012,"type":91},"💡 ",{"text":2014,"type":91,"marks":2015},"The real difference:",[2016],{"type":94},{"text":2018,"type":91}," The choice between Solid and Next.js for LLM apps ",{"text":2020,"type":91,"marks":2021},"is not about which AI SDK you can use",[2022],{"type":94},{"text":2024,"type":91}," — both have access to the same TypeScript ecosystem. The difference lies in two points: (1) ",{"text":2026,"type":91,"marks":2027},"rendering model",[2028],{"type":94},{"text":2030,"type":91}," — Solid updates the token text node with O(1); (2) ",{"text":2032,"type":91,"marks":2033},"meta-framework maturity",[2034],{"type":94},{"text":2036,"type":91}," — Next.js has RSC, more deploy adapters, and a broader UI ecosystem.",{"type":98},{"type":100,"attrs":2039,"content":2041},{"id":2040,"level":36},"h_ki0ygqrg",[2042],{"text":2043,"type":91},"Ecosystem — Skills available for SolidJS",{"type":85,"attrs":2045,"content":2047},{"id":2046},"p_593550lk",[2048],{"text":2049,"type":91},"The official directory lists over 220 packages in 10 categories: 22 primitives, 4 routers, 23 data packages, 5 visualization, 82 UI, 35 plugins, 9 starters, 21 build utilities, 22 add-ons, and 3 testing.",{"type":100,"attrs":2051,"content":2053},{"id":2052,"level":469},"h_z7vj8ctz",[2054],{"text":2055,"type":91},"Official packages — the core",{"type":304,"attrs":2057,"content":2059},{"id":2058},"tbl_kx0agcda",[2060,2089,2138,2183,2216,2255],{"type":309,"content":2061},[2062,2071,2080],{"type":312,"attrs":2063,"content":2064},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2065],{"type":85,"attrs":2066,"content":2068},{"id":2067},"p_d0itv6f1",[2069],{"text":2070,"type":91},"Package",{"type":312,"attrs":2072,"content":2073},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2074],{"type":85,"attrs":2075,"content":2077},{"id":2076},"p_bixrjij8",[2078],{"text":2079,"type":91},"What it solves",{"type":312,"attrs":2081,"content":2082},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2083],{"type":85,"attrs":2084,"content":2086},{"id":2085},"p_zamhvd1q",[2087],{"text":2088,"type":91},"Install",{"type":309,"content":2090},[2091,2102,2127],{"type":334,"attrs":2092,"content":2093},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2094],{"type":85,"attrs":2095,"content":2097},{"id":2096},"p_24vmvlnn",[2098],{"text":2099,"type":91,"marks":2100},"solid-js",[2101],{"type":177},{"type":334,"attrs":2103,"content":2104},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2105],{"type":85,"attrs":2106,"content":2108},{"id":2107},"p_6jg6wr8u",[2109,2111,2115,2116,2120,2121,2125],{"text":2110,"type":91},"Core — signals, memos, effects, stores, flow control (",{"text":2112,"type":91,"marks":2113},"For",[2114],{"type":177},{"text":201,"type":91},{"text":2117,"type":91,"marks":2118},"Show",[2119],{"type":177},{"text":201,"type":91},{"text":2122,"type":91,"marks":2123},"Switch",[2124],{"type":177},{"text":2126,"type":91},"), Suspense, Error Boundaries",{"type":334,"attrs":2128,"content":2129},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2130],{"type":85,"attrs":2131,"content":2133},{"id":2132},"p_s7r806ea",[2134],{"text":2135,"type":91,"marks":2136},"npm i solid-js",[2137],{"type":177},{"type":309,"content":2139},[2140,2151,2172],{"type":334,"attrs":2141,"content":2142},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2143],{"type":85,"attrs":2144,"content":2146},{"id":2145},"p_ok9ekoye",[2147],{"text":2148,"type":91,"marks":2149},"@solidjs\u002Frouter",[2150],{"type":177},{"type":334,"attrs":2152,"content":2153},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2154],{"type":85,"attrs":2155,"content":2157},{"id":2156},"p_c0yni60n",[2158,2160,2164,2166,2170],{"text":2159,"type":91},"Declarative routing with lazy loading, nested routes, preload, ",{"text":2161,"type":91,"marks":2162},"createAsync",[2163],{"type":177},{"text":2165,"type":91}," + ",{"text":2167,"type":91,"marks":2168},"query",[2169],{"type":177},{"text":2171,"type":91}," for data fetching with cache and deduplication",{"type":334,"attrs":2173,"content":2174},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2175],{"type":85,"attrs":2176,"content":2178},{"id":2177},"p_awu6al2o",[2179],{"text":2180,"type":91,"marks":2181},"npm i @solidjs\u002Frouter",[2182],{"type":177},{"type":309,"content":2184},[2185,2196,2205],{"type":334,"attrs":2186,"content":2187},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2188],{"type":85,"attrs":2189,"content":2191},{"id":2190},"p_janhat9y",[2192],{"text":2193,"type":91,"marks":2194},"@solidjs\u002Fstart",[2195],{"type":177},{"type":334,"attrs":2197,"content":2198},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2199],{"type":85,"attrs":2200,"content":2202},{"id":2201},"p_bvz8ww0t",[2203],{"text":2204,"type":91},"Complete meta-framework — SSR, file-based routing, server functions, streaming, deploy adapters (Vercel, Netlify, Cloudflare, Node)",{"type":334,"attrs":2206,"content":2207},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2208],{"type":85,"attrs":2209,"content":2211},{"id":2210},"p_ftk3xkln",[2212],{"text":2213,"type":91,"marks":2214},"npx create-solid@latest",[2215],{"type":177},{"type":309,"content":2217},[2218,2229,2244],{"type":334,"attrs":2219,"content":2220},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2221],{"type":85,"attrs":2222,"content":2224},{"id":2223},"p_ydf581yw",[2225],{"text":2226,"type":91,"marks":2227},"@solidjs\u002Fmeta",[2228],{"type":177},{"type":334,"attrs":2230,"content":2231},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2232],{"type":85,"attrs":2233,"content":2235},{"id":2234},"p_5rnqd479",[2236,2238,2242],{"text":2237,"type":91},"Management of ",{"text":2239,"type":91,"marks":2240},"\u003Chead>",[2241],{"type":177},{"text":2243,"type":91}," isomorphic (title, meta, link) compatible with SSR and streaming",{"type":334,"attrs":2245,"content":2246},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2247],{"type":85,"attrs":2248,"content":2250},{"id":2249},"p_dc7qkk8q",[2251],{"text":2252,"type":91,"marks":2253},"npm i @solidjs\u002Fmeta",[2254],{"type":177},{"type":309,"content":2256},[2257,2268,2277],{"type":334,"attrs":2258,"content":2259},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2260],{"type":85,"attrs":2261,"content":2263},{"id":2262},"p_reclabid",[2264],{"text":2265,"type":91,"marks":2266},"vite-plugin-solid",[2267],{"type":177},{"type":334,"attrs":2269,"content":2270},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2271],{"type":85,"attrs":2272,"content":2274},{"id":2273},"p_n66kdopp",[2275],{"text":2276,"type":91},"Official Vite plugin — transforms Solid JSX, HMR, SSR mode, dev tools integration",{"type":334,"attrs":2278,"content":2279},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2280],{"type":85,"attrs":2281,"content":2283},{"id":2282},"p_djxteico",[2284],{"text":2285,"type":91,"marks":2286},"npm i -D vite-plugin-solid",[2287],{"type":177},{"type":98},{"type":100,"attrs":2290,"content":2292},{"id":2291,"level":469},"h_jit6ay19",[2293],{"text":2294,"type":91},"Headless UI and design systems",{"type":85,"attrs":2296,"content":2298},{"id":2297},"p_zz7bc8n7",[2299],{"text":2300,"type":91},"Unstyled components — you bring the CSS. The philosophy is the same as Radix UI in the React ecosystem: accessibility and behavior ready, appearance entirely yours.",{"type":100,"attrs":2302,"content":2304},{"id":2303,"level":29},"h_vopdj87z",[2305,2309],{"text":2306,"type":91,"marks":2307},"@kobalte\u002Fcore",[2308],{"type":177},{"text":2310,"type":91}," — 1,700+ ⭐",{"type":85,"attrs":2312,"content":2314},{"id":2313},"p_ob5va0a8",[2315],{"text":2316,"type":91},"Native headless Solid components: Accordion, AlertDialog, Combobox, DatePicker, Select, Tabs, Toast, Tooltip, and more. Base of Solid UI (shadcn port). Full WAI-ARIA, managed focus and keyboard.",{"type":516,"attrs":2318,"content":2322},{"id":2319,"language":2320,"highlighted":2321},"code_wsto3f2l","bash","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i @kobalte\u002Fcore\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2323],{"text":2324,"type":91},"npm i @kobalte\u002Fcore\n",{"type":100,"attrs":2326,"content":2328},{"id":2327,"level":29},"h_f2a2j393",[2329],{"text":2330,"type":91,"marks":2331},"corvu",[2332],{"type":177},{"type":85,"attrs":2334,"content":2336},{"id":2335},"p_uxinritq",[2337,2339,2343,2344,2348],{"text":2338,"type":91},"Native headless Solid primitives with a focus on granular customization: Drawer, Dialog, Tooltip, Disclosure, Popover. Provides ",{"text":2340,"type":91,"marks":2341},"createFocusTrap",[2342],{"type":177},{"text":201,"type":91},{"text":2345,"type":91,"marks":2346},"createPreventScroll",[2347],{"type":177},{"text":2349,"type":91}," as reusable utilities. Tailwind + UnoCSS plugin included.",{"type":516,"attrs":2351,"content":2354},{"id":2352,"language":2320,"highlighted":2353},"code_mc7tav26","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i corvu\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2355],{"text":2356,"type":91},"npm i corvu\n",{"type":100,"attrs":2358,"content":2360},{"id":2359,"level":29},"h_tjyigloc",[2361,2365],{"text":2362,"type":91,"marks":2363},"@ark-ui\u002Fsolid",[2364],{"type":177},{"text":2366,"type":91}," — multi-framework",{"type":85,"attrs":2368,"content":2370},{"id":2369},"p_azjdut38",[2371],{"text":2372,"type":91},"45+ headless components based on state machines (Zag.js). Supports Solid, React, Vue, and Svelte. Battle-tested in Chakra UI, used by OVHCloud and PluralSight. v5.37 recently published. Fully type-safe.",{"type":516,"attrs":2374,"content":2377},{"id":2375,"language":2320,"highlighted":2376},"code_yaw661j6","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i @ark-ui\u002Fsolid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2378],{"text":2379,"type":91},"npm i @ark-ui\u002Fsolid\n",{"type":100,"attrs":2381,"content":2383},{"id":2382,"level":29},"h_h48puf3i",[2384],{"text":2385,"type":91},"Solid UI — shadcn\u002Fui port",{"type":85,"attrs":2387,"content":2389},{"id":2388},"p_01jx0bsv",[2390,2401,2403,2407],{"text":2391,"type":91,"marks":2392},"solid-ui.com",[2393,2400],{"type":2394,"attrs":2395},"link",{"rel":2396,"href":2397,"class":2398,"title":9,"target":2399},"noopener noreferrer","http:\u002F\u002Fsolid-ui.com","editor-link","_blank",{"type":94},{"text":2402,"type":91}," — unofficial port of shadcn\u002Fui + tremor-raw for Solid, built on Kobalte and corvu, styled with Tailwind CSS. Ownership philosophy: you copy the component, it is yours. Over 1,300 stars on GitHub. ",{"text":2404,"type":91,"marks":2405},"Not an npm package",[2406],{"type":94},{"text":2408,"type":91}," — you copy and paste the components.",{"type":98},{"type":100,"attrs":2411,"content":2413},{"id":2412,"level":469},"h_1md1ugvs",[2414],{"text":2415,"type":91},"Solid Primitives — reactive utilities",{"type":85,"attrs":2417,"content":2419},{"id":2418},"p_up5wyncj",[2420],{"text":2421,"type":91},"Managed by core team members but kept separate from the core for independent iteration. The goal is to wrap client and server functionality in a fully reactive API layer. Each primitive is individually tree-shakable.",{"type":516,"attrs":2423,"content":2426},{"id":2424,"language":519,"highlighted":2425},"code_29q4duwy","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Instale só o que precisar — cada pacote é independente\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createIntersectionObserver } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fintersection-observer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createDebounce }             \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fscheduled\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createGeolocation }          \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fgeolocation\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createLocalStorage }         \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fstorage\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createResizeObserver }       \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fresize-observer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createEventListener }        \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fevent-listener\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createKeyHold }              \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Fkeyboard\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { makeTimer, createCountdown } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@solid-primitives\u002Ftimer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Exemplo: debounce de busca + intersection para lazy-load\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> BuscaLazy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">query\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setQuery\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">setRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">] \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createSignal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> debouncedQuery\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createDebounce\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">v\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setQuery\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(v), \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">300\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  createIntersectionObserver\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(ref, ([\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">entry\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (entry.isIntersecting) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">carregarMais\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onInput\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> debouncedQuery\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(e.currentTarget.value)} \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{setRef}>sentinela de scroll<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2427],{"text":2428,"type":91},"\u002F\u002F Instale só o que precisar — cada pacote é independente\nimport { createIntersectionObserver } from \"@solid-primitives\u002Fintersection-observer\";\nimport { createDebounce }             from \"@solid-primitives\u002Fscheduled\";\nimport { createGeolocation }          from \"@solid-primitives\u002Fgeolocation\";\nimport { createLocalStorage }         from \"@solid-primitives\u002Fstorage\";\nimport { createResizeObserver }       from \"@solid-primitives\u002Fresize-observer\";\nimport { createEventListener }        from \"@solid-primitives\u002Fevent-listener\";\nimport { createKeyHold }              from \"@solid-primitives\u002Fkeyboard\";\nimport { makeTimer, createCountdown } from \"@solid-primitives\u002Ftimer\";\n\n\u002F\u002F Exemplo: debounce de busca + intersection para lazy-load\nfunction BuscaLazy() {\n  const [query, setQuery] = createSignal(\"\");\n  const [ref, setRef] = createSignal(null);\n\n  const debouncedQuery = createDebounce((v) => setQuery(v), 300);\n\n  createIntersectionObserver(ref, ([entry]) => {\n    if (entry.isIntersecting) carregarMais();\n  });\n\n  return (\n    \u003Cdiv>\n      \u003Cinput onInput={(e) => debouncedQuery(e.currentTarget.value)} \u002F>\n      \u003Cdiv ref={setRef}>sentinela de scroll\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":98},{"type":100,"attrs":2431,"content":2433},{"id":2432,"level":469},"h_hmgza37n",[2434],{"text":2435,"type":91},"Data and server state",{"type":304,"attrs":2437,"content":2439},{"id":2438},"tbl_14s1leu5",[2440,2468,2500,2544],{"type":309,"content":2441},[2442,2450,2459],{"type":312,"attrs":2443,"content":2444},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2445],{"type":85,"attrs":2446,"content":2448},{"id":2447},"p_pwbco7h2",[2449],{"text":2070,"type":91},{"type":312,"attrs":2451,"content":2452},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2453],{"type":85,"attrs":2454,"content":2456},{"id":2455},"p_po52akcd",[2457],{"text":2458,"type":91},"Use case",{"type":312,"attrs":2460,"content":2461},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2462],{"type":85,"attrs":2463,"content":2465},{"id":2464},"p_p3tr8a9d",[2466],{"text":2467,"type":91},"Note",{"type":309,"content":2469},[2470,2482,2491],{"type":334,"attrs":2471,"content":2472},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2473],{"type":85,"attrs":2474,"content":2476},{"id":2475},"p_snygem5u",[2477,2480],{"text":2148,"type":91,"marks":2478},[2479],{"type":177},{"text":2481,"type":91}," (query + createAsync)",{"type":334,"attrs":2483,"content":2484},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2485],{"type":85,"attrs":2486,"content":2488},{"id":2487},"p_qket0v4i",[2489],{"text":2490,"type":91},"Data fetching integrated into the router with key-based cache, deduplication, and revalidation. The canonical path in SolidStart — zero extra dependencies",{"type":334,"attrs":2492,"content":2493},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2494],{"type":85,"attrs":2495,"content":2497},{"id":2496},"p_3zgoumet",[2498],{"text":2499,"type":91},"✅ Recommended for SolidStart",{"type":309,"content":2501},[2502,2515,2535],{"type":334,"attrs":2503,"content":2504},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2505],{"type":85,"attrs":2506,"content":2508},{"id":2507},"p_ethr55z8",[2509,2513],{"text":2510,"type":91,"marks":2511},"@tanstack\u002Fsolid-query",[2512],{"type":177},{"text":2514,"type":91}," v5.100+",{"type":334,"attrs":2516,"content":2517},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2518],{"type":85,"attrs":2519,"content":2521},{"id":2520},"p_cf4vibux",[2522,2524,2528,2529,2533],{"text":2523,"type":91},"Full port of TanStack Query. Supports ",{"text":2525,"type":91,"marks":2526},"refetchInterval",[2527],{"type":177},{"text":201,"type":91},{"text":2530,"type":91,"marks":2531},"enabled",[2532],{"type":177},{"text":2534,"type":91},", mutations, infinite queries, devtools",{"type":334,"attrs":2536,"content":2537},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2538],{"type":85,"attrs":2539,"content":2541},{"id":2540},"p_x3ngrhk8",[2542],{"text":2543,"type":91},"Use when you need polling or advanced features",{"type":309,"content":2545},[2546,2557,2566],{"type":334,"attrs":2547,"content":2548},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2549],{"type":85,"attrs":2550,"content":2552},{"id":2551},"p_ah5nlthm",[2553],{"text":2554,"type":91,"marks":2555},"@solidjs\u002Ftanstack-table",[2556],{"type":177},{"type":334,"attrs":2558,"content":2559},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2560],{"type":85,"attrs":2561,"content":2563},{"id":2562},"p_zdo1azx0",[2564],{"text":2565,"type":91},"Port of TanStack Table — sorting, filtering, pagination, virtualization. Data as stores, reactive columns",{"type":334,"attrs":2567,"content":2568},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2569],{"type":85,"attrs":2570,"content":2572},{"id":2571},"p_418pleh8",[2573],{"text":2574,"type":91},"Ideal for heavy data grids",{"type":80,"attrs":2576,"content":2578},{"id":2577},"quote_vcqoqyeh",[2579],{"type":85,"attrs":2580,"content":2582},{"id":2581},"p_9j51qrei",[2583,2584,2588,2591,2595,2597,2601],{"text":427,"type":91},{"text":2585,"type":91,"marks":2586},"Attention when using ",[2587],{"type":94},{"text":2510,"type":91,"marks":2589},[2590],{"type":177},{"text":2592,"type":91,"marks":2593},":",[2594],{"type":94},{"text":2596,"type":91}," the return of the primitives is a ",{"text":2598,"type":91,"marks":2599},"store",[2600],{"type":295},{"text":2602,"type":91}," (not an object), and its properties are only tracked in a reactive context. Do not destructure the result outside of a tracking scope.",{"type":98},{"type":100,"attrs":2605,"content":2607},{"id":2606,"level":469},"h_ubevp07w",[2608],{"text":2609,"type":91},"Forms",{"type":85,"attrs":2611,"content":2613},{"id":2612},"p_wvfhp54s",[2614],{"text":2615,"type":91},"Forms are the case where Solid's fine-grained reactivity shines the most: validating a field in real-time without re-rendering the rest of the form is O(1) here, not an optimization you need to implement.",{"type":85,"attrs":2617,"content":2619},{"id":2618},"p_9kpnfalf",[2620,2624],{"text":2621,"type":91,"marks":2622},"@modular-forms\u002Fsolid",[2623],{"type":177},{"text":2625,"type":91}," — Field-level validation: only the field with the error re-evaluates. Minimal bundle by modular design (tree-shaking by feature). Integrates with Zod, Valibot, Arktype.",{"type":516,"attrs":2627,"content":2630},{"id":2628,"language":2320,"highlighted":2629},"code_o1bt0m3x","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i @modular-forms\u002Fsolid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2631],{"text":2632,"type":91},"npm i @modular-forms\u002Fsolid\n",{"type":85,"attrs":2634,"content":2636},{"id":2635},"p_ebbili6n",[2637,2641],{"text":2638,"type":91,"marks":2639},"@gapu\u002Fformix",[2640],{"type":177},{"text":2642,"type":91}," — Flexible API for complex form state. Alternative to modular-forms with a more familiar API for those coming from React Hook Form.",{"type":516,"attrs":2644,"content":2647},{"id":2645,"language":2320,"highlighted":2646},"code_j2hiwkgm","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> i @gapu\u002Fformix\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2648],{"text":2649,"type":91},"npm i @gapu\u002Fformix\n",{"type":98},{"type":100,"attrs":2652,"content":2654},{"id":2653,"level":469},"h_0a63h5mh",[2655],{"text":2656,"type":91},"Testing",{"type":304,"attrs":2658,"content":2660},{"id":2659},"tbl_z7vrd228",[2661,2689,2720,2760,2791],{"type":309,"content":2662},[2663,2671,2680],{"type":312,"attrs":2664,"content":2665},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2666],{"type":85,"attrs":2667,"content":2669},{"id":2668},"p_9kieqn4b",[2670],{"text":2070,"type":91},{"type":312,"attrs":2672,"content":2673},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2674],{"type":85,"attrs":2675,"content":2677},{"id":2676},"p_s47las4x",[2678],{"text":2679,"type":91},"What it does",{"type":312,"attrs":2681,"content":2682},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2683],{"type":85,"attrs":2684,"content":2686},{"id":2685},"p_jbwdq639",[2687],{"text":2688,"type":91},"Notes",{"type":309,"content":2690},[2691,2702,2711],{"type":334,"attrs":2692,"content":2693},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2694],{"type":85,"attrs":2695,"content":2697},{"id":2696},"p_m0iu5dla",[2698],{"text":2699,"type":91,"marks":2700},"@solidjs\u002Ftesting-library",[2701],{"type":177},{"type":334,"attrs":2703,"content":2704},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2705],{"type":85,"attrs":2706,"content":2708},{"id":2707},"p_b8aydgih",[2709],{"text":2710,"type":91},"Port of Testing Library for Solid — renders components in real DOM (jsdom\u002Fhappy-dom), queries by role\u002Ftext\u002Flabel, fire events, async utilities",{"type":334,"attrs":2712,"content":2713},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2714],{"type":85,"attrs":2715,"content":2717},{"id":2716},"p_59nx7vp5",[2718],{"text":2719,"type":91},"Recommended by the core team along with Vitest",{"type":309,"content":2721},[2722,2733,2742],{"type":334,"attrs":2723,"content":2724},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2725],{"type":85,"attrs":2726,"content":2728},{"id":2727},"p_u0uythgw",[2729],{"text":2730,"type":91,"marks":2731},"vitest",[2732],{"type":177},{"type":334,"attrs":2734,"content":2735},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2736],{"type":85,"attrs":2737,"content":2739},{"id":2738},"p_u527uuum",[2740],{"text":2741,"type":91},"Official recommended test runner. Integrates natively with Vite, support for Solid JSX without extra configuration, fast watch mode",{"type":334,"attrs":2743,"content":2744},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2745],{"type":85,"attrs":2746,"content":2748},{"id":2747},"p_0r7tfk4p",[2749,2751,2754,2756],{"text":2750,"type":91},"Add ",{"text":2265,"type":91,"marks":2752},[2753],{"type":177},{"text":2755,"type":91}," to ",{"text":2757,"type":91,"marks":2758},"vitest.config.ts",[2759],{"type":177},{"type":309,"content":2761},[2762,2773,2782],{"type":334,"attrs":2763,"content":2764},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2765],{"type":85,"attrs":2766,"content":2768},{"id":2767},"p_7wnt301l",[2769],{"text":2770,"type":91,"marks":2771},"solid-jest",[2772],{"type":177},{"type":334,"attrs":2774,"content":2775},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2776],{"type":85,"attrs":2777,"content":2779},{"id":2778},"p_r6l93oiv",[2780],{"text":2781,"type":91},"Allows running and testing Solid code in Node.js via Jest — alternative for projects already using Jest",{"type":334,"attrs":2783,"content":2784},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2785],{"type":85,"attrs":2786,"content":2788},{"id":2787},"p_19nkw4r7",[2789],{"text":2790,"type":91},"Prefer Vitest in new projects",{"type":309,"content":2792},[2793,2804,2813],{"type":334,"attrs":2794,"content":2795},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2796],{"type":85,"attrs":2797,"content":2799},{"id":2798},"p_1ezisxen",[2800],{"text":2801,"type":91,"marks":2802},"solid-devtools",[2803],{"type":177},{"type":334,"attrs":2805,"content":2806},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2807],{"type":85,"attrs":2808,"content":2810},{"id":2809},"p_1zjha1h2",[2811],{"text":2812,"type":91},"Chrome extension + dev tools library: visualizes the reactive graph in real-time, inspects signals, stores, and components",{"type":334,"attrs":2814,"content":2815},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2816],{"type":85,"attrs":2817,"content":2819},{"id":2818},"p_r6pkzups",[2820],{"text":2821,"type":91},"Dev only — does not impact production bundle",{"type":98},{"type":100,"attrs":2824,"content":2826},{"id":2825,"level":469},"h_a1utoyvc",[2827],{"text":2828,"type":91},"Styling, animation, and DnD",{"type":304,"attrs":2830,"content":2832},{"id":2831},"tbl_hwow7m9y",[2833,2851,2885,2907,2929,2951],{"type":309,"content":2834},[2835,2843],{"type":312,"attrs":2836,"content":2837},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2838],{"type":85,"attrs":2839,"content":2841},{"id":2840},"p_d65eaw8n",[2842],{"text":2070,"type":91},{"type":312,"attrs":2844,"content":2845},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2846],{"type":85,"attrs":2847,"content":2849},{"id":2848},"p_gtfka8kq",[2850],{"text":2679,"type":91},{"type":309,"content":2852},[2853,2864],{"type":334,"attrs":2854,"content":2855},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2856],{"type":85,"attrs":2857,"content":2859},{"id":2858},"p_5fqmlsbv",[2860],{"text":2861,"type":91,"marks":2862},"solid-transition-group",[2863],{"type":177},{"type":334,"attrs":2865,"content":2866},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2867],{"type":85,"attrs":2868,"content":2870},{"id":2869},"p_v2tr9a86",[2871,2873,2877,2879,2883],{"text":2872,"type":91},"Entry\u002Fexit animations inspired by Vue Transition. ",{"text":2874,"type":91,"marks":2875},"\u003CTransition>",[2876],{"type":177},{"text":2878,"type":91}," and ",{"text":2880,"type":91,"marks":2881},"\u003CTransitionGroup>",[2882],{"type":177},{"text":2884,"type":91}," with CSS classes or Web Animations API",{"type":309,"content":2886},[2887,2898],{"type":334,"attrs":2888,"content":2889},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2890],{"type":85,"attrs":2891,"content":2893},{"id":2892},"p_5d3p8uq4",[2894],{"text":2895,"type":91,"marks":2896},"@solid-dnd\u002Fsortable",[2897],{"type":177},{"type":334,"attrs":2899,"content":2900},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2901],{"type":85,"attrs":2902,"content":2904},{"id":2903},"p_mbw6huex",[2905],{"text":2906,"type":91},"Drag-and-drop and list reordering — reactive primitives for sortable lists, kanban boards, and tree views",{"type":309,"content":2908},[2909,2920],{"type":334,"attrs":2910,"content":2911},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2912],{"type":85,"attrs":2913,"content":2915},{"id":2914},"p_wholfjzk",[2916],{"text":2917,"type":91,"marks":2918},"solid-styled-components",[2919],{"type":177},{"type":334,"attrs":2921,"content":2922},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2923],{"type":85,"attrs":2924,"content":2926},{"id":2925},"p_lp3auctl",[2927],{"text":2928,"type":91},"CSS-in-JS in the style of styled-components — tagged template literals, theming, SSR-safe",{"type":309,"content":2930},[2931,2942],{"type":334,"attrs":2932,"content":2933},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2934],{"type":85,"attrs":2935,"content":2937},{"id":2936},"p_8eaw2jkd",[2938],{"text":2939,"type":91,"marks":2940},"solid-icons",[2941],{"type":177},{"type":334,"attrs":2943,"content":2944},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2945],{"type":85,"attrs":2946,"content":2948},{"id":2947},"p_40h5fjog",[2949],{"text":2950,"type":91},"Collection of icons (Feather Icons fork) compiled as Solid components — tree-shakable, no SVG sprite",{"type":309,"content":2952},[2953,2964],{"type":334,"attrs":2954,"content":2955},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2956],{"type":85,"attrs":2957,"content":2959},{"id":2958},"p_cgjowi2p",[2960],{"text":2961,"type":91,"marks":2962},"solid-refresh",[2963],{"type":177},{"type":334,"attrs":2965,"content":2966},{"align":9,"colspan":314,"rowspan":314,"colwidth":9},[2967],{"type":85,"attrs":2968,"content":2970},{"id":2969},"p_1z4gwgx1",[2971],{"text":2972,"type":91},"HMR for Solid in multiple bundlers (Vite, Webpack, esbuild). Maintains reactive state during module reload",{"type":98},{"type":100,"attrs":2975,"content":2977},{"id":2976,"level":469},"h_bayld5mh",[2978],{"text":2979,"type":91},"Minimum stack for production — from zero to production",{"type":516,"attrs":2981,"content":2984},{"id":2982,"language":2320,"highlighted":2983},"code_ab5qh27p","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># 1. Scaffold com SolidStart (meta-framework completo)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> create-solid@latest meu-app\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> meu-app && npm install\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 2. UI headless com acessibilidade\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @kobalte\u002Fcore          # componentes headless nativos\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ou: npm install @ark-ui\u002Fsolid    # multi-framework, mais componentes\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 3. Formulários — escolha um\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @modular-forms\u002Fsolid   # field-level validation, bundle mínimo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 4. Server state — escolha um\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Opção A: nativo do SolidStart (zero deps extras)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> import { query, createAsync } from \"@solidjs\u002Frouter\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Opção B: TanStack Query (polling, retries, devtools)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @tanstack\u002Fsolid-query\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 5. Primitivos utilitários (instale só os que precisar)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @solid-primitives\u002Fscheduled             # debounce, throttle\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @solid-primitives\u002Fintersection-observer # lazy load\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install @solid-primitives\u002Fstorage               # localStorage reativo\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 6. Testing\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install -D vitest @solidjs\u002Ftesting-library happy-dom\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">#\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> 7. Dev tools (só development)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install -D solid-devtools\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[2985],{"text":2986,"type":91},"# 1. Scaffold com SolidStart (meta-framework completo)\nnpx create-solid@latest meu-app\ncd meu-app && npm install\n\n# 2. UI headless com acessibilidade\nnpm install @kobalte\u002Fcore          # componentes headless nativos\n# ou: npm install @ark-ui\u002Fsolid    # multi-framework, mais componentes\n\n# 3. Formulários — escolha um\nnpm install @modular-forms\u002Fsolid   # field-level validation, bundle mínimo\n\n# 4. Server state — escolha um\n# Opção A: nativo do SolidStart (zero deps extras)\n# import { query, createAsync } from \"@solidjs\u002Frouter\"\n# Opção B: TanStack Query (polling, retries, devtools)\nnpm install @tanstack\u002Fsolid-query\n\n# 5. Primitivos utilitários (instale só os que precisar)\nnpm install @solid-primitives\u002Fscheduled             # debounce, throttle\nnpm install @solid-primitives\u002Fintersection-observer # lazy load\nnpm install @solid-primitives\u002Fstorage               # localStorage reativo\n\n# 6. Testing\nnpm install -D vitest @solidjs\u002Ftesting-library happy-dom\n\n# 7. Dev tools (só development)\nnpm install -D solid-devtools\n",{"type":80,"attrs":2988,"content":2990},{"id":2989},"quote_qepeydat",[2991],{"type":85,"attrs":2992,"content":2994},{"id":2993},"p_x9i3hzd1",[2995,2996,3000,3002,3006,3008,3012,3014,3017,3019,3023,3025,3029,3030,3034,3036,3040],{"text":427,"type":91},{"text":2997,"type":91,"marks":2998},"What is still missing:",[2999],{"type":94},{"text":3001,"type":91}," The ecosystem has real gaps compared to React — ",{"text":3003,"type":91,"marks":3004},"rich text editors",[3005],{"type":94},{"text":3007,"type":91}," (no Lexical or TipTap port), ",{"text":3009,"type":91,"marks":3010},"complex animation libraries",[3011],{"type":94},{"text":3013,"type":91}," (no Framer Motion port — use ",{"text":2861,"type":91,"marks":3015},[3016],{"type":177},{"text":3018,"type":91}," + Web Animations API), ",{"text":3020,"type":91,"marks":3021},"maps",[3022],{"type":94},{"text":3024,"type":91}," (use vanilla Leaflet\u002FMapbox wrappers). For data charts: D3 works directly with Solid (native DOM access), and there are wrappers like ",{"text":3026,"type":91,"marks":3027},"solid-apexcharts",[3028],{"type":177},{"text":2878,"type":91},{"text":3031,"type":91,"marks":3032},"solid-recharts",[3033],{"type":177},{"text":3035,"type":91},", but with less maintenance than the React equivalents. Always check ",{"text":3037,"type":91,"marks":3038},"solidjs.com\u002Fecosystem",[3039],{"type":94},{"text":3041,"type":91}," before assuming something doesn't exist.",{"type":98},{"type":100,"attrs":3044,"content":3046},{"id":3045,"level":36},"h_1lna96bq",[3047],{"text":3048,"type":91},"Solid 2.0 — the next chapter",{"type":85,"attrs":3050,"content":3052},{"id":3051},"p_fx56z5na",[3053],{"text":3054,"type":91},"The Solid 2.0 roadmap (GitHub Discussion #2425) is ambitious:",{"type":107,"attrs":3056,"content":3058},{"id":3057,"tight":110},"ul_2orz9v7n",[3059,3073,3087,3101,3115,3129,3143],{"type":113,"attrs":3060,"content":3062},{"id":3061},"li_26dbg6v2",[3063],{"type":85,"attrs":3064,"content":3066},{"id":3065},"p_33jnmn2l",[3067,3071],{"text":3068,"type":91,"marks":3069},"Pull-based run-once SSR",[3070],{"type":94},{"text":3072,"type":91}," — new server-side rendering architecture",{"type":113,"attrs":3074,"content":3076},{"id":3075},"li_ewzddl9h",[3077],{"type":85,"attrs":3078,"content":3080},{"id":3079},"p_kojvum9h",[3081,3085],{"text":3082,"type":91,"marks":3083},"Concurrent transitions",[3084],{"type":94},{"text":3086,"type":91}," — smoother UI updates during asynchronous operations",{"type":113,"attrs":3088,"content":3090},{"id":3089},"li_om4uyzfz",[3091],{"type":85,"attrs":3092,"content":3094},{"id":3093},"p_q6z1f7kw",[3095,3099],{"text":3096,"type":91,"marks":3097},"Self-healing error boundaries",[3098],{"type":94},{"text":3100,"type":91}," — more resilient error recovery",{"type":113,"attrs":3102,"content":3104},{"id":3103},"li_p3nm6l4o",[3105],{"type":85,"attrs":3106,"content":3108},{"id":3107},"p_glyt41ef",[3109,3113],{"text":3110,"type":91,"marks":3111},"Immutable diffable stores",[3112],{"type":94},{"text":3114,"type":91}," — improved state management primitives",{"type":113,"attrs":3116,"content":3118},{"id":3117},"li_tur5ae7b",[3119],{"type":85,"attrs":3120,"content":3122},{"id":3121},"p_v2iood9o",[3123,3127],{"text":3124,"type":91,"marks":3125},"Automatic batching",[3126],{"type":94},{"text":3128,"type":91}," — signal updates grouped for optimal performance",{"type":113,"attrs":3130,"content":3132},{"id":3131},"li_syu8ijdj",[3133],{"type":85,"attrs":3134,"content":3136},{"id":3135},"p_y71sx7nl",[3137,3141],{"text":3138,"type":91,"marks":3139},"Lazy memos and derived signals",[3140],{"type":94},{"text":3142,"type":91}," — more efficient computed values",{"type":113,"attrs":3144,"content":3146},{"id":3145},"li_hvx5xqav",[3147],{"type":85,"attrs":3148,"content":3150},{"id":3149},"p_1c56mixv",[3151,3154,3158],{"text":2161,"type":91,"marks":3152},[3153],{"type":177},{"text":3155,"type":91,"marks":3156}," as standard primitive",[3157],{"type":94},{"text":3159,"type":91}," — recommended approach for async data fetching",{"type":85,"attrs":3161,"content":3163},{"id":3162},"p_ehfgayc5",[3164],{"text":3165,"type":91},"The Solid 2.0 Beta skipped the planned Alpha phase — creator Ryan Carniato noted that \"most milestones within Alpha do not seem relevant enough to justify their own phase\".",{"type":100,"attrs":3167,"content":3169},{"id":3168,"level":469},"h_1qcl2iry",[3170],{"text":3171,"type":91},"TC39 Signals — the proposal that goes beyond Solid",{"type":85,"attrs":3173,"content":3175},{"id":3174},"p_5m2sn8ck",[3176],{"text":3177,"type":91},"The model that SolidJS popularized is being standardized in the language. Maintainers of Angular, Vue, Svelte, Solid, Preact, Qwik, MobX, Ember, RxJS, and more are collaborating on a TC39 proposal to add signals to JavaScript. It is already in Stage 1, with a polyfill available.",{"type":516,"attrs":3179,"content":3182},{"id":3180,"language":57,"highlighted":3181},"code_djmcljs3","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F A proposta do TC39: signals na linguagem, sem framework\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Signal.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">State\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> double\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> Signal.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">Computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> count.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">count.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">double.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 2\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3183],{"text":3184,"type":91},"\u002F\u002F A proposta do TC39: signals na linguagem, sem framework\nconst count = new Signal.State(0);\nconst double = new Signal.Computed(() => count.get() * 2);\n\ncount.set(1);\ndouble.get(); \u002F\u002F 2\n",{"type":85,"attrs":3186,"content":3188},{"id":3187},"p_08ar2l57",[3189],{"text":3190,"type":91},"What started as the core philosophy of Solid may become a native JavaScript primitive.",{"type":98},{"type":100,"attrs":3193,"content":3195},{"id":3194,"level":36},"h_bjpjmm7n",[3196],{"text":3197,"type":91},"Aligning with business — the technical decision",{"type":85,"attrs":3199,"content":3201},{"id":3200},"p_ifma8eg9",[3202],{"text":3203,"type":91},"SolidJS is not the safe choice. It is the right choice for a specific set of conditions — and the wrong choice for another equally specific set.",{"type":3205,"attrs":3206,"content":3210},"callout",{"id":3207,"type":3208,"title":3209},"call_ewhxbkhq","note","Trade-off between SolidJS and React",[3211,3217,3223],{"type":85,"attrs":3212,"content":3214},{"id":3213},"p_eerhti05",[3215],{"text":3216,"type":91},"SolidJS offers clear advantages in performance, such as load time, frame rate, latency, and bundle size, thanks to its fine-grained reactivity that reduces work per update.",{"type":85,"attrs":3218,"content":3220},{"id":3219},"p_09zvc5k4",[3221],{"text":3222,"type":91},"On the other hand, React is better suited for projects that prioritize development speed, ease of hiring, and a broad ecosystem of integrations.",{"type":85,"attrs":3224,"content":3226},{"id":3225},"p_7fklcj4e",[3227],{"text":3228,"type":91},"The choice between SolidJS and React should consider these technical trade-offs aligned with specific business needs.",{"type":85,"attrs":3230,"content":3232},{"id":3231},"p_xdzqjuhg",[3233,3235,3239],{"text":3234,"type":91},"If your product competes on ",{"text":3236,"type":91,"marks":3237},"load time, frame rate, interaction latency, or bundle size",[3238],{"type":94},{"text":3240,"type":91},", SolidJS delivers measurable advantage. Fine-grained reactivity is not marketing: it is a model that provably generates less work per update.",{"type":85,"attrs":3242,"content":3244},{"id":3243},"p_qy8utwdf",[3245,3246,3250],{"text":3234,"type":91},{"text":3247,"type":91,"marks":3248},"shipping speed, team size, ease of hiring, or breadth of third-party integrations",[3249],{"type":94},{"text":3251,"type":91},", React is still the answer for most cases.",{"type":100,"attrs":3253,"content":3255},{"id":3254,"level":469},"h_l4yc9pa3",[3256],{"text":3257,"type":91},"Use SolidJS when",{"type":107,"attrs":3259,"content":3261},{"id":3260,"tight":110},"ul_8da5kk3d",[3262,3272,3282,3292,3302,3312,3322],{"type":113,"attrs":3263,"content":3265},{"id":3264},"li_2ds76q4w",[3266],{"type":85,"attrs":3267,"content":3269},{"id":3268},"p_xyug6gwn",[3270],{"text":3271,"type":91},"Rendering performance is a measurable product criterion",{"type":113,"attrs":3273,"content":3275},{"id":3274},"li_n51n9tcd",[3276],{"type":85,"attrs":3277,"content":3279},{"id":3278},"p_gsu0y6sm",[3280],{"text":3281,"type":91},"Bundle size matters (embedded apps, mid-range mobile, TV)",{"type":113,"attrs":3283,"content":3285},{"id":3284},"li_eieylgh1",[3286],{"type":85,"attrs":3287,"content":3289},{"id":3288},"p_fma6a1yu",[3290],{"text":3291,"type":91},"UI updates are frequent and granular (real-time, 60fps)",{"type":113,"attrs":3293,"content":3295},{"id":3294},"li_68yyvz2y",[3296],{"type":85,"attrs":3297,"content":3299},{"id":3298},"p_mzkuan6o",[3300],{"text":3301,"type":91},"LLM applications with multiple agents emitting tokens in parallel",{"type":113,"attrs":3303,"content":3305},{"id":3304},"li_5oxerohx",[3306],{"type":85,"attrs":3307,"content":3309},{"id":3308},"p_wsj1l97a",[3310],{"text":3311,"type":91},"Team already knows React and is open to the new mental model",{"type":113,"attrs":3313,"content":3315},{"id":3314},"li_bjkodvmn",[3316],{"type":85,"attrs":3317,"content":3319},{"id":3318},"p_yg9khneb",[3320],{"text":3321,"type":91},"You are building something new with freedom of stack choice",{"type":113,"attrs":3323,"content":3325},{"id":3324},"li_lwgtryjj",[3326],{"type":85,"attrs":3327,"content":3329},{"id":3328},"p_6mufhlq7",[3330],{"text":3331,"type":91},"The libraries you need have a Solid version available",{"type":100,"attrs":3333,"content":3335},{"id":3334,"level":469},"h_y3z0cr4o",[3336],{"text":3337,"type":91},"Consider another option when",{"type":107,"attrs":3339,"content":3341},{"id":3340,"tight":110},"ul_wfkwbwi4",[3342,3352,3362,3372,3382],{"type":113,"attrs":3343,"content":3345},{"id":3344},"li_nd1thlmw",[3346],{"type":85,"attrs":3347,"content":3349},{"id":3348},"p_bpe2qus5",[3350],{"text":3351,"type":91},"Hiring and fast onboarding are a priority — go for React",{"type":113,"attrs":3353,"content":3355},{"id":3354},"li_qvh76tln",[3356],{"type":85,"attrs":3357,"content":3359},{"id":3358},"p_0g2l8bfo",[3360],{"text":3361,"type":91},"You depend on UI libraries without a Solid port (Framer Motion, Lexical…)",{"type":113,"attrs":3363,"content":3365},{"id":3364},"li_ox9wiwkj",[3366],{"type":85,"attrs":3367,"content":3369},{"id":3368},"p_1hnlvg5c",[3370],{"text":3371,"type":91},"The team has never had contact with fine-grained reactivity — the curve has a real cost",{"type":113,"attrs":3373,"content":3375},{"id":3374},"li_djxbtowr",[3376],{"type":85,"attrs":3377,"content":3379},{"id":3378},"p_4352p3be",[3380],{"text":3381,"type":91},"SolidStart does not yet have the deploy adapter you need",{"type":113,"attrs":3383,"content":3385},{"id":3384},"li_04zdzaeb",[3386],{"type":85,"attrs":3387,"content":3389},{"id":3388},"p_rc3luwbj",[3390],{"text":3391,"type":91},"Performance is not in your OKRs — optimize where it hurts",{"type":80,"attrs":3393,"content":3395},{"id":3394},"quote_b1v08r9x",[3396],{"type":85,"attrs":3397,"content":3399},{"id":3398},"p_rt646kz2",[3400],{"text":3401,"type":91,"marks":3402},"\"SolidJS proves that the Virtual DOM was a transitional solution. If your users feel the difference — use Solid. If they don't, your current stack is probably good enough.\"",[3403],{"type":295},{"type":98},{"type":100,"attrs":3406,"content":3408},{"id":3407,"level":36},"h_9x5uma7k",[3409],{"text":3410,"type":91},"Sources and data — Jun 2026",{"type":107,"attrs":3412,"content":3414},{"id":3413,"tight":110},"ul_hdknbzak",[3415,3443,3457,3482,3496,3510,3524,3538,3552,3566,3580,3594,3607,3642,3656],{"type":113,"attrs":3416,"content":3418},{"id":3417},"li_jqollqod",[3419],{"type":85,"attrs":3420,"content":3422},{"id":3421},"p_sf77pm66",[3423,3430,3434,3441],{"text":3424,"type":91,"marks":3425},"solidjs.com",[3426,3429],{"type":2394,"attrs":3427},{"rel":2396,"href":3428,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fsolidjs.com",{"type":94},{"text":3431,"type":91,"marks":3432}," \u002F ",[3433],{"type":94},{"text":3435,"type":91,"marks":3436},"docs.solidjs.com",[3437,3440],{"type":2394,"attrs":3438},{"rel":2396,"href":3439,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fdocs.solidjs.com",{"type":94},{"text":3442,"type":91}," — official documentation, primitives, fine-grained reactivity, changelog",{"type":113,"attrs":3444,"content":3446},{"id":3445},"li_336kp0jy",[3447],{"type":85,"attrs":3448,"content":3450},{"id":3449},"p_6flop3se",[3451,3455],{"text":3452,"type":91,"marks":3453},"InfoQ (may\u002F2026)",[3454],{"type":94},{"text":3456,"type":91}," — \"SolidJS 2.0 Beta: First-Class Async, Reworked Suspense and Deterministic Batching\"",{"type":113,"attrs":3458,"content":3460},{"id":3459},"li_d5tqpglp",[3461],{"type":85,"attrs":3462,"content":3464},{"id":3463},"p_r40r4q8d",[3465,3469,3476,3480],{"text":3466,"type":91,"marks":3467},"Tomas Listiak \u002F ",[3468],{"type":94},{"text":3470,"type":91,"marks":3471},"listiak.dev",[3472,3475],{"type":2394,"attrs":3473},{"rel":2396,"href":3474,"class":2398,"title":9,"target":2399},"http:\u002F\u002Flistiak.dev",{"type":94},{"text":3477,"type":91,"marks":3478}," (feb\u002F2026)",[3479],{"type":94},{"text":3481,"type":91}," — \"The State of Solid.js in 2026\" — bundle data (7.6KB), enterprise use cases (Radware, Jolt AI)",{"type":113,"attrs":3483,"content":3485},{"id":3484},"li_9sqbuui1",[3486],{"type":85,"attrs":3487,"content":3489},{"id":3488},"p_l1m7wlyf",[3490,3494],{"text":3491,"type":91,"marks":3492},"PkgPulse Guides (mar\u002F2026)",[3493],{"type":94},{"text":3495,"type":91}," — React vs SolidJS and SolidJS vs Svelte comparisons, npm downloads (1.49M–2.41M\u002Fweek), 60% y\u002Fy growth",{"type":113,"attrs":3497,"content":3499},{"id":3498},"li_5c5qpxy3",[3500],{"type":85,"attrs":3501,"content":3503},{"id":3502},"p_8roryt8u",[3504,3508],{"text":3505,"type":91,"marks":3506},"SoloDevStack (may\u002F2026)",[3507],{"type":94},{"text":3509,"type":91}," — version data (solid-js 1.9.13, SolidStart 1.3.2)",{"type":113,"attrs":3511,"content":3513},{"id":3512},"li_gd37o7u2",[3514],{"type":85,"attrs":3515,"content":3517},{"id":3516},"p_ol1axtug",[3518,3522],{"text":3519,"type":91,"marks":3520},"GitHub solidjs\u002Fsolid — Discussion #2425",[3521],{"type":94},{"text":3523,"type":91}," — official Solid 2.0 roadmap",{"type":113,"attrs":3525,"content":3527},{"id":3526},"li_x5quf71q",[3528],{"type":85,"attrs":3529,"content":3531},{"id":3530},"p_syfx6rcf",[3532,3536],{"text":3533,"type":91,"marks":3534},"npmjs.com\u002Fpackage\u002Fsolid-js",[3535],{"type":94},{"text":3537,"type":91}," — official description, integrations, environment support",{"type":113,"attrs":3539,"content":3541},{"id":3540},"li_n2ctlrnr",[3542],{"type":85,"attrs":3543,"content":3545},{"id":3544},"p_hmlh7isx",[3546,3550],{"text":3547,"type":91,"marks":3548},"Zylos Research (mar\u002F2026)",[3549],{"type":94},{"text":3551,"type":91}," — \"LLM Output Streaming and Real-Time Token Delivery Architectures\" — SSE as standard for agents, MCP\u002FA2A",{"type":113,"attrs":3553,"content":3555},{"id":3554},"li_e00128bs",[3556],{"type":85,"attrs":3557,"content":3559},{"id":3558},"p_ijenmnvn",[3560,3564],{"text":3561,"type":91,"marks":3562},"GitHub peerreynders\u002Fsolid-start-sse-chat",[3563],{"type":94},{"text":3565,"type":91}," — reference implementation of SSE chat in SolidStart",{"type":113,"attrs":3567,"content":3569},{"id":3568},"li_cvx5c062",[3570],{"type":85,"attrs":3571,"content":3573},{"id":3572},"p_bbu2p29m",[3574,3578],{"text":3575,"type":91,"marks":3576},"BCMS Blog (feb\u002F2026)",[3577],{"type":94},{"text":3579,"type":91}," — \"Top 10 Next.js Alternatives in 2026\" — SolidStart \"2x faster in dashboards with 10K+ rows\"",{"type":113,"attrs":3581,"content":3583},{"id":3582},"li_h9jdw0f2",[3584],{"type":85,"attrs":3585,"content":3587},{"id":3586},"p_7x5fetkj",[3588,3592],{"text":3589,"type":91,"marks":3590},"Toptal (may\u002F2026)",[3591],{"type":94},{"text":3593,"type":91}," — \"SolidJS vs React: The Go-to Guide\" — meta-framework comparison",{"type":113,"attrs":3595,"content":3597},{"id":3596},"li_sfxc1lir",[3598],{"type":85,"attrs":3599,"content":3601},{"id":3600},"p_rioaz3c0",[3602,3605],{"text":3037,"type":91,"marks":3603},[3604],{"type":94},{"text":3606,"type":91}," — official directory (220+ packages in 10 categories)",{"type":113,"attrs":3608,"content":3610},{"id":3609},"li_wdmtrm9n",[3611],{"type":85,"attrs":3612,"content":3614},{"id":3613},"p_coim57mt",[3615,3622,3625,3632,3635,3640],{"text":3616,"type":91,"marks":3617},"kobalte.dev",[3618,3621],{"type":2394,"attrs":3619},{"rel":2396,"href":3620,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fkobalte.dev",{"type":94},{"text":201,"type":91,"marks":3623},[3624],{"type":94},{"text":3626,"type":91,"marks":3627},"corvu.dev",[3628,3631],{"type":2394,"attrs":3629},{"rel":2396,"href":3630,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fcorvu.dev",{"type":94},{"text":201,"type":91,"marks":3633},[3634],{"type":94},{"text":2391,"type":91,"marks":3636},[3637,3639],{"type":2394,"attrs":3638},{"rel":2396,"href":2397,"class":2398,"title":9,"target":2399},{"type":94},{"text":3641,"type":91}," — documentation for main UI packages",{"type":113,"attrs":3643,"content":3645},{"id":3644},"li_3i3wz8v0",[3646],{"type":85,"attrs":3647,"content":3649},{"id":3648},"p_oehd24q8",[3650,3654],{"text":3651,"type":91,"marks":3652},"tanstack.com\u002Fquery\u002Fsolid",[3653],{"type":94},{"text":3655,"type":91}," — official documentation for TanStack Query for Solid (v5.100+)",{"type":113,"attrs":3657,"content":3659},{"id":3658},"li_lar8iw7d",[3660],{"type":85,"attrs":3661,"content":3663},{"id":3662},"p_srocswqx",[3664,3668],{"text":3665,"type":91,"marks":3666},"github.com\u002Fsolidjs-community\u002Fsolid-primitives",[3667],{"type":94},{"text":3669,"type":91}," — documentation and catalog of Solid Primitives",{"type":98},{"type":80,"attrs":3672,"content":3674},{"id":3673},"quote_4fj9cerl",[3675],{"type":85,"attrs":3676,"content":3678},{"id":3677},"p_hf4qbrh7",[3679,3681,3687,3688,3694],{"text":3680,"type":91},"Download data, versions, and benchmark positions reflect June 2026. Solid 2.0 is in beta — the API may change before the stable release. Company data (Radware, Jolt AI) is reported by the ecosystem, not independently verified. The \"2x faster for dashboards with 10K+ rows\" data is reported by BCMS in comparison with Next.js. Compare live at ",{"text":3682,"type":91,"marks":3683},"pkgpulse.com",[3684],{"type":2394,"attrs":3685},{"rel":2396,"href":3686,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fpkgpulse.com",{"text":2878,"type":91},{"text":3689,"type":91,"marks":3690},"framework-benchmarks.as93.net",[3691],{"type":2394,"attrs":3692},{"rel":2396,"href":3693,"class":2398,"title":9,"target":2399},"http:\u002F\u002Fframework-benchmarks.as93.net",{"text":3695,"type":91}," before deciding.",{"type":85,"attrs":3697},{"id":3698},"p_xrbf4mdb","SolidJS in 2026: Why Fine-Grained Reactivity Wins","Explore how SolidJS outperforms the Virtual DOM in 2026. Learn about fine-grained reactivity, Solid 2.0, and why it is the industry's top influencer.","2026-08-24T14:53:53.315534+00:00",[3703,3725,3743,3757],{"id":3704,"slug":3705,"title":3706,"excerpt":3707,"image":3708,"featured":110,"groupId":3709,"publishedAt":3710,"readingTime":3711,"views":48,"author":3712,"category":3713,"tags":3714},"81f24e9a-fc6b-47d0-beb9-d00a6137ed99","framework-vs-sdk-who-calls-whom","Framework vs SDK: Who Calls Whom","Most developers memorize names, but few understand the mechanism. Here is the simple rule to tell a framework from an SDK and level up your debugging.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1787491947099-featured-ikba2e.jpg","0ccb21eb-6459-40ed-8110-227836e9bb74","2026-08-23T13:15:25.439194+00:00",10,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[3715,3716,3719,3722],{"slug":57,"name":58},{"slug":3717,"name":3718},"python","Python",{"slug":3720,"name":3721},"runtime","Runtime",{"slug":3723,"name":3724},"sdk","Sdk",{"id":3726,"slug":3727,"title":3728,"excerpt":3729,"image":3730,"featured":44,"groupId":3731,"publishedAt":3732,"readingTime":3733,"views":3734,"author":3735,"category":3736,"tags":3737},"c2d6b1ca-29bf-401f-8ab9-a1f828504d0b","microfrontends-with-angular-and-nx-what-nobody-tells-you","Microfrontends with Angular and Nx: what nobody tells you","Every tutorial teaches how to set up microfrontends in minutes, but few reveal the architectural chaos that emerges after months of production deploys.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp","3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-08-03T01:42:48.969355+00:00",15,5,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[3738,3741,3742],{"slug":3739,"name":3740},"angular","Angular",{"slug":57,"name":58},{"slug":63,"name":64},{"id":3744,"slug":3745,"title":3746,"excerpt":3747,"image":3748,"featured":44,"groupId":3749,"publishedAt":3750,"readingTime":3751,"views":3711,"author":3752,"category":3753,"tags":3754},"36440333-311c-4081-92e6-030a04a38fed","astro-island-architecture-performance-and-where-the-framework-truly-fits","Astro: Island Architecture, Performance, and Where the Framework Truly Fits","Astro challenges the modern web status quo by prioritizing static HTML and isolating interactivity into independent, lightweight code islands.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785721161920-featured-a5vzkb.webp","cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T01:00:45.280114+00:00",38,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[3755,3756],{"slug":57,"name":58},{"slug":63,"name":64},{"id":3758,"slug":3759,"title":3760,"excerpt":3761,"image":3762,"featured":44,"groupId":3763,"publishedAt":3764,"readingTime":3765,"views":48,"author":3766,"category":3767,"tags":3768},"633b6488-2a90-4632-86a5-9cff7ed52f08","javascript-event-loop-the-heart-of-non-blocking-concurrency-revisited-in-2025","JavaScript Event Loop: The Heart of Non-Blocking Concurrency — Revisited in 2025","The Event Loop is not just a simple loop, but a sophisticated coordination mechanism between Call Stack, queues, and runtime. Essential for JS concurrency, it enables thousands of asynchronous operations without blocking the UI. This guide explores its structure, differences between Node.js and browsers, common bugs, advanced techniques, and 2025 trends like Structured Concurrency and scheduler.yield().","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1772847201637-featured-oreiro.jpeg","df6ca967-8130-4b2d-bcac-3532a150131e","2026-07-26T18:54:25.359533+00:00",6,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[3769,3770],{"slug":57,"name":58},{"slug":60,"name":61},{"pt":3772,"en":40},"solidjs-em-2026-por-que-a-reatividade-fina-esta-superando-o-virtual-dom"]