https://component-party.dev/_app/immutable/chunks/CGzaqwXx.js

1import{$ as e,B as t,C as i,F as s,G as r,H as a,K as n,L as o,M as p,N as l,O as c,P as d,Q as u,R as m,S as f,T as v,U as h,V as g,W as y,X as b,Y as w,_ as x,a as I,b as _,c as D,g as k,i as N,k as E,l as z,m as j,n as S,o as A,p as P,s as $,tt as O,v as L,w as R,y as C,z as T}from"./D0CPMC31.js";import{t as V}from"./D9gD021h.js";import{t as M}from"./POFxoyoN.js";import"./BvIhFN19.js";import{t as q}from"./BzeQ7qyJ.js";import{n as W,t as F}from"./_G9GqTeF.js";import{t as H}from"./T_62LX89.js";var B={svelte5:()=>M(()=>import("./CR5At8Mo.js"),[],import.meta.url),react:()=>M(()=>import("./DjiN3OoC.js"),[],import.meta.url),vue3:()=>M(()=>import("./qU7KrhO12.js"),[],import.meta.url),angularRenaissance:()=>M(()=>import("./Bg_Aa1Gp.js"),[],import.meta.url),angularClassic:()=>M(()=>import("./Bjo1mrU0.js"),[],import.meta.url),lit:()=>M(()=>import("./GttJ7QYE.js"),[],import.meta.url),emberPolaris:()=>M(()=>import("./D2nKcmPC.js"),[],import.meta.url),emberOctane:()=>M(()=>import("./BHK7fHvG.js"),[],import.meta.url),solid:()=>M(()=>import("./Bin0IC5O.js"),[],import.meta.url),svelte4:()=>M(()=>import("./DDbis-17.js"),[],import.meta.url),vue2:()=>M(()=>import("./CsZJM-8P.js"),[],import.meta.url),alpine:()=>M(()=>import("./DW-EQ_qj.js"),[],import.meta.url),mithril:()=>M(()=>import("./C6rgabnM.js"),[],import.meta.url),aurelia2:()=>M(()=>import("./C2O_wjmv.js"),[],import.meta.url),qwik:()=>M(()=>import("./DDRv7D67.js"),[],import.meta.url),marko:()=>M(()=>import("./CUKsXe7g.js"),[],import.meta.url),aurelia1:()=>M(()=>import("./fEy2jgIM.js"),[],import.meta.url),ripple:()=>M(()=>import("./D3MNEAuU.js"),[],import.meta.url)},U=["forEach","isDisjointFrom","isSubsetOf","isSupersetOf"],G=["difference","intersection","symmetricDifference","union"],J=!1,Y=class e extends Set{#e=new Map;#t=y(0);#i=y(0);#s=E||-1;constructor(e){if(super(),e){for(var t of e)super.add(t);this.#i.v=super.size}J||this.#r()}#a(e){return E===this.#s?y(e):h(e)}#r(){J=!0;var t=e.prototype,i=Set.prototype;for(const e of U)t[e]=function(...t){return v(this.#t),i[e].apply(this,t)};for(const s of G)t[s]=function(...t){return v(this.#t),new e(i[s].apply(this,t))}}has(e){var t=super.has(e),i=this.#e,s=i.get(e);if(void 0===s){if(!t)return v(this.#t),!1;s=this.#a(!0),i.set(e,s)}return v(s),t}add(e){return super.has(e)||(super.add(e),a(this.#i,super.size),g(this.#t)),this}delete(e){var t=super.delete(e),i=this.#e,s=i.get(e);return void 0!==s&&(i.delete(e),a(s,!1)),t&&(a(this.#i,super.size),g(this.#t)),t}clear(){if(0!==super.size){super.clear();var e=this.#e;for(var t of e.values())a(t,!1);e.clear(),a(this.#i,0),g(this.#t)}}keys(){return this.values()}values(){return v(this.#t),super.values()}entries(){return v(this.#t),super.entries()}[Symbol.iterator](){return this.keys()}get size(){return v(this.#i)}},K=class extends Map{#e=new Map;#t=y(0);#i=y(0);#s=E||-1;constructor(e){if(super(),e){for(var[t,i]of e)super.set(t,i);this.#i.v=super.size}}#a(e){return E===this.#s?y(e):h(e)}has(e){var t=this.#e,i=t.get(e);if(void 0===i){if(!super.has(e))return v(this.#t),!1;i=this.#a(0),t.set(e,i)}return v(i),!0}forEach(e,t){this.#n(),super.forEach(e,t)}get(e){var t=this.#e,i=t.get(e);if(void 0===i){if(!super.has(e))return void v(this.#t);i=this.#a(0),t.set(e,i)}return v(i),super.get(e)}set(e,t){var i=this.#e,s=i.get(e),r=super.get(e),n=super.set(e,t),o=this.#t;if(void 0===s)s=this.#a(0),i.set(e,s),a(this.#i,super.size),g(o);else if(r!==t){g(s);var p=null===o.reactions?null:new Set(o.reactions);null!==p&&s.reactions?.every(e=>p.has(e))||g(o)}return n}delete(e){var t=this.#e,i=t.get(e),s=super.delete(e);return void 0!==i&&(t.delete(e),a(i,-1)),s&&(a(this.#i,super.size),g(this.#t)),s}clear(){if(0!==super.size){super.clear();var e=this.#e;

1for(var t of(a(this.#i,0),e.values()))a(t,-1);g(this.#t),e.clear()}}#n(){v(this.#t);var e=this.#e;if(this.#i.v!==e.size)for(var t of super.keys())if(!e.has(t)){var i=this.#a(0);0,e.set(t,i)}for([,i]of this.#e)v(i)}keys(){return v(this.#t),super.keys()}values(){return this.#n(),super.values()}entries(){return this.#n(),super.entries()}[Symbol.iterator](){return this.entries()}get size(){return v(this.#i),super.size}},Q=_('<img class="shrink-0"/>'),X=_('<div class="flex items-center space-x-1.5"><!> <span class="shrink-0 inline-block"> </span></div>');function Z(e,t){b(t,!0);let i=N(t,"size",3,20);const s=r(()=>W(t.id));var a=X(),n=o(a),p=e=>{var t=Q();l(()=>{A(t,"src","/"+v(s).img),A(t,"width",i()),A(t,"height",i()),A(t,"alt",`logo of ${v(s).title}`)}),L(e,t)};k(n,e=>{v(s)?.img&&e(p)});var c=T(n,2),d=o(c,!0);O(c),O(a),l(()=>x(d,v(s)?.title||t.id)),L(e,a),w()}var ee=[{sectionId:"reactivity",sectionDirName:"1-reactivity",title:"Reactivity"},{sectionId:"templating",sectionDirName:"2-templating",title:"Templating"},{sectionId:"lifecycle",sectionDirName:"3-lifecycle",title:"Lifecycle"},{sectionId:"component-composition",sectionDirName:"4-component-composition",title:"Component composition"},{sectionId:"form-input",sectionDirName:"6-form-input",title:"Form input"},{sectionId:"webapp-features",sectionDirName:"7-webapp-features",title:"Webapp features"}],te=[{sectionId:"reactivity",snippetId:"declare-state",snippetDirName:"1-declare-state",sectionDirName:"1-reactivity",title:"Declare state"},{sectionId:"reactivity",snippetId:"update-state",snippetDirName:"2-update-state",sectionDirName:"1-reactivity",title:"Update state"},{sectionId:"reactivity",snippetId:"computed-state",snippetDirName:"3-computed-state",sectionDirName:"1-reactivity",title:"Computed state"},{sectionId:"templating",snippetId:"minimal-template",snippetDirName:"1-minimal-template",sectionDirName:"2-templating",title:"Minimal template"},{sectionId:"templating",snippetId:"styling",snippetDirName:"2-styling",sectionDirName:"2-templating",title:"Styling"},{sectionId:"templating",snippetId:"loop",snippetDirName:"3-loop",sectionDirName:"2-templating",title:"Loop"},{sectionId:"templating",snippetId:"event-click",snippetDirName:"4-event-click",sectionDirName:"2-templating",title:"Event click"},{sectionId:"templating",snippetId:"dom-ref",snippetDirName:"5-dom-ref",sectionDirName:"2-templating",title:"Dom ref"},{sectionId:"templating",snippetId:"conditional",snippetDirName:"6-conditional",sectionDirName:"2-templating",title:"Conditional"},{sectionId:"lifecycle",snippetId:"on-mount",snippetDirName:"1-on-mount",sectionDirName:"3-lifecycle",title:"On mount"},{sectionId:"lifecycle",snippetId:"on-unmount",snippetDirName:"2-on-unmount",sectionDirName:"3-lifecycle",title:"On unmount"},{sectionId:"component-composition",snippetId:"props",snippetDirName:"1-props",sectionDirName:"4-component-composition",title:"Props"},{sectionId:"component-composition",snippetId:"emit-to-parent",snippetDirName:"2-emit-to-parent",sectionDirName:"4-component-composition",title:"Emit to parent"},{sectionId:"component-composition",snippetId:"slot",snippetDirName:"3-slot",sectionDirName:"4-component-composition",title:"Slot"},{sectionId:"component-composition",snippetId:"slot-fallback",snippetDirName:"4-slot-fallback",sectionDirName:"4-component-composition",title:"Slot fallback"},{sectionId:"component-composition",snippetId:"context",snippetDirName:"5-context",sectionDirName:"4-component-composition",title:"Context"},{sectionId:"form-input",snippetId:"input-text",snippetDirName:"1-input-text",sectionDirName:"6-form-input",title:"Input text"},{sectionId:"form-input",snippetId:"checkbox",snippetDirName:"2-checkbox",sectionDirName:"6-form-input",title:"Checkbox"},{sectionId:"form-input",snippetId:"radio",snippetDirName:"3-radio",sectionDirName:"6-form-input",title:"Radio"},{sectionId:"form-input",snippetId:"select",snippetDirName:"4-select",sectionDirName:"6-form-input",title:"Select"},{sectionId:"webapp-features",snippetId:"render-app",snippetDirName:"1-render-app",sectionDirName:"7-webapp-features",title:"Render app"}

1,{sectionId:"webapp-features",snippetId:"fetch-data",snippetDirName:"2-fetch-data",sectionDirName:"7-webapp-features",title:"Fetch data"}];async function ie(e){if(navigator.clipboard?.writeText)try{return await navigator.clipboard.writeText(e),!0}catch{}return function(e){const t=document.createElement("textarea");t.value=e,t.style.position="fixed",t.style.opacity="0",document.body.appendChild(t),t.select();let i=!1;try{i=document.execCommand("copy")}catch{i=!1}return t.remove(),i}(e)}var se=_("<button> </button>"),re=_('<div class="flex space-x-1 items-center ml-0 overflow-x-auto"></div> <div class="relative group"><div class="bg-[#0d1117] px-4 py-3 text-sm overflow-auto rounded-b rounded-tr"><!></div> <div class="absolute hidden group-hover:block group-focus-within:block transition-all top-0 right-0 mt-2 mr-2"><div class="flex items-center space-x-3"><a target="_blank" rel="noreferrer" aria-label="Edit on Github" class="bg-[#0d1117] rounded border opacity-60 hover:opacity-90 transition-all duration-200 p-1 flex items-center justify-center"><span class="iconify ph--pencil size-4" aria-hidden="true"></span></a> <button class="bg-[#0d1117] rounded border opacity-60 hover:opacity-90 transition-all duration-200 p-1 flex items-center justify-center" title="Copy to clipboard" aria-label="Copy to clipboard"><span class="iconify ph--clipboard size-4" aria-hidden="true"></span></button></div></div></div>',1);f(["click"]);var ae="undefined"!=typeof window?window:void 0;"undefined"!=typeof window&&window.document,"undefined"!=typeof window&&window.navigator,"undefined"!=typeof window&&window.location;new class{#o;#p;constructor(e={}){const{window:t=ae,document:i=t?.document}=e;void 0!==t&&(this.#o=i,this.#p=n(e=>{const i=R(t,"focusin",e),s=R(t,"focusout",e);return()=>{i(),s()}}))}get current(){return this.#p?.(),this.#o?function(e){let t=e.activeElement;for(;t?.shadowRoot;){const e=t.shadowRoot.activeElement;if(e===t)break;t=e}return t}(this.#o):null}};function ne(e,t,i,r={}){const{lazy:a=!1}=r;let n=!a,o=Array.isArray(e)?[]:void 0;!function(e,t){switch(e){case"post":d(t);break;case"pre":s(t)}}(t,()=>{const t=Array.isArray(e)?e.map(e=>e()):e();if(!n)return n=!0,void(o=t);const s=c(()=>i(t,o));return o=t,s})}function oe(e,t,i){ne(e,"post",t,i)}oe.pre=function(e,t,i){ne(e,"pre",t,i)};var pe=function(e,t,i){var s=null,r=null,a=i&&i.leading,n=i&&i.trailing;null==a&&(a=!0);null==n&&(n=!a);1==a&&(n=!1);var o=function(){s&&(clearTimeout(s),s=null)},p=function(){var i=a&&!s,o=this,p=arguments;if(r=function(){return e.apply(o,p)},s||(s=setTimeout(function(){if(s=null,n)return r()},t)),i)return i=!1,r()};return p.cancel=o,p.flush=function(){var e=r;o(),e&&e()},p};var le=_("<li><button> </button></li>"),ce=_("<li><button> </button> <ul></ul></li>"),de=_('<aside class="no-scroll hidden lg:block sticky shrink-0 w-[240px] overflow-y-auto top-0 pr-8 max-h-screen border-r border-gray-700"><nav class="w-full text-base py-2 pl-4 pb-20"><ul class="space-y-6"></ul></nav></aside>');function ue(e,t){b(t,!0);let s=y("");function n(e){const t=document.getElementById(e);t&&(window.history.pushState(null,"",`#${e}`),t.scrollIntoView({block:"start"}))}S(function(){function e(){const e=document.querySelectorAll("[data-snippet-id]");if(window.scrollY<=0)return void a(s,e[0]?.getAttribute("data-snippet-id")??"",!0);const t=function(e){let t=0,i=null,s=null;for(const r of e){const e=r.getBoundingClientRect(),a=Math.min(e.right,window.innerWidth)-Math.max(e.left,0),n=Math.min(e.bottom,window.innerHeight)-Math.max(e.top,0);if(a>0&&n>0){const o=a*n;e.top>=0&&e.left>=0&&e.bottom<=window.innerHeight&&e.right<=window.innerWidth&&!s&&(s=r),o>t&&(t=o,i=r)}}return s||i}(e);t?a(s,t.getAttribute("data-snippet-id")??"",!0):a(s,"")}const t=pe(e,100);return document.addEventListener("scroll",t,{passive:!0}),e(),()=>{document.removeEventListener("scroll",t)}});var p=de(),c=o(p),d=o(c);j(d,21,()=>ee,e=>e.sectionId,(e,t)=>{var a=ce(),p=o(a),c=o(p,!0);O(p);var d=T(p,2);j(d,21,()=>te.filter(e=>e.sectionId===v(t).sectionId),e=>e.snippetId,(e,a)=>{const p=r(()=>v(t).sectionId+"."+v(a).snippetId);var c=le(),d=o(c),u=o(d,!0);O(d),O(c),l(()=>{D(d,1,z(["inline-block w-full py-1.5 px-4 text-white font-medium hover:bg-gray-800 rounded hover:opacity-100 transition-opacity text-left",v(p)===v(s)?"bg-gray-800 opacity-70":"opacity-50"])),x(u,v(a).title)}),i("click",d,()=>n(v(p))),L(e,c)}),O(d),O(a),l(e=>{D(p,1,e),x(c,v(t).title)},[()=>z(["inline-block w-full py-1.5 px-4 text-white font-semibold opacity-90 hover:opacity-100 hover:bg-gray-800 rounded transition-opacity text-left",{"bg-gray-800":v(s)&&v(s).startsWith(v(t).sectionId)}])]),i("click",p,()=>n(v(t).sectionId)),L(e,a)}),O(d),O(c),O(p),L(e,p),w()}f(["click"]);var me=_("<button><!></button>"),fe=_('<button title="show more frameworks" class="opacity-70 text-sm shrink-0 rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all mr-2 flex items-center justify-center" data-testid="show-more-frameworks-button" aria-label="show more frameworks"><span class="iconify ph--dots-three size-4" aria-hidden="true"></span></button>'),ve=_('<section class="space-y-4" data-testid="empty-state" aria-labelledby="empty-state-heading"><div class="flex justify-center"><span class="iconify ph--arrow-up size-6 animate-bounce" aria-hidden="true"></span></div> <div class="flex justify-center">

1<h1 id="empty-state-heading" class="sr-only">Select Frameworks to Compare</h1> <p class="text-lg opacity-80 flex items-center text-center space-x-3" data-testid="empty-state-message"><img src="/popper.svg" alt="Component Party logo" class="size-6"/> <span>Please select a framework to view framework\'s snippets</span> <img src="/popper.svg" alt="Component Party logo" class="size-6"/></p></div></section>'),he=_('<a target="_blank" rel="noreferrer" class="opacity-50 hover:opacity-100 bg-gray-800 hover:bg-gray-700 py-1 px-2 rounded transition-all flex items-center gap-x-2"><span class="iconify ph--play size-4" aria-hidden="true"></span></a>'),ge=_('<div class="flex items-center space-x-3"><!></div>'),ye=_('<div class="bg-gray-800 text-white rounded-md mx-auto"><div class="text-center py-8 px-4 sm:px-6"><div><span class="block text-2xl tracking-tight font-bold" data-testid="missing-snippet-title">Missing snippet</span> <span class="block text-lg mt-1 font-semibold space-x-1" data-testid="missing-snippet-message"><span>Help us to improve Component Party</span> <img src="/popper.svg" alt="logo" class="size-5 m-0 inline-block"/></span></div> <div class="mt-6 flex justify-center"><div class="inline-flex rounded-md shadow"><a class="inline-flex space-x-2 items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-[#161b22] hover:bg-[#161b22]/80 no-underline"><span>Contribute on Github</span> <span class="iconify simple-icons--github size-5" aria-hidden="true"></span></a></div></div></div></div>'),be=_('<div role="status"><div class="w-75px h-23px bg-[#0d1117] py-3 px-4 rounded-t"><div class="h-2.5 rounded-full bg-gray-700 w-10 animate-pulse"></div></div> <div class="w-full h-40 bg-[#0d1117] px-4 py-7"><div class="max-w-sm animate-pulse"><div class="h-3.5 rounded-full bg-gray-700 w-48 mb-4"></div> <div class="h-3.5 rounded-full bg-gray-700 max-w-[360px] mb-2.5"></div> <div class="h-3.5 rounded-full bg-gray-700 mb-4"></div> <div class="h-3.5 rounded-full bg-gray-700 max-w-[330px] mb-2.5"></div> <span class="sr-only" data-testid="loading-text">Loading...</span></div></div></div>'),we=_('<p class="text-orange-500">Error loading snippets. Please reload the page.</p>'),xe=_('<div><div class="flex justify-between items-center space-x-3"><h4 class="m-0"><!></h4> <!></div> <div class="mt-2"><!></div></div>'),Ie=_('<div class="snippet-cv svelte-qq9oyz"><h3 class="header-anchor sticky py-2 top-[2.94rem] z-10 bg-[var(--bg-color)] font-semibold text-xl svelte-qq9oyz"> <a aria-hidden="true" tabindex="-1" class="svelte-qq9oyz">#</a></h3> <div class="grid grid-cols-1 xl:grid-cols-2 gap-y-4 xl:gap-y-8 gap-x-10 mt-2"></div></div>'),_e=_('<div class="px-6 md:px-14 lg:px-20 max-w-full"><h2 class="header-anchor text-2xl font-bold svelte-qq9oyz"> <a aria-hidden="true" tabindex="-1" class="svelte-qq9oyz">#</a></h2> <div class="space-y-8 mt-2"></div></div>'),De=_('<div class="space-y-20"></div>'),ke=_('<div class="flex border-b border-gray-700"><!> <div class="pb-8 w-10 grow"><div class="flex px-6 lg:px-20 py-2 sticky top-0 z-20 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto" data-testid="framework-selection-bar" role="group" aria-label="Select frameworks to compare"><!> <!></div> <main class="relative pt-6"><div><!></div></main></div></div>');function Ne(e,t){b(t,!0);let s=N(t,"persist",3,!0);const n=F.slice(9),p=q("framework_display",[]);function d(e){const t=[],i=new Set;for(const s of e){const e=W(s);e&&!i.has(e.id)&&(i.add(e.id),t.push(e.id))}return t}const u=new Y(c(()=>t.initialFrameworkIds)),f=new K(Object.entries(c(()=>t.initialSnippets))),h=r(()=>[...u]),g=r(()=>v(h).map(e=>W(e)));let _=y(2);function E(e){const t=v(h).map(t=>f.get(t)?.find(t=>t.snippetId===e));return t.every(e=>!e)?600:52+Math.ceil(t.length/v(_))*(Math.max(0,...t.map(e=>{return t=e?.files,t?.length?20*Math.max(...t.map(e=>e.lineCount))+24+64:0;var t}))+32)}S(()=>{const e=window.matchMedia("(min-width: 1280px)"),t=()=>{a(_,e.matches?2:1,!0)};return t(),e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}});const R=r(()=>{const e=H.url.searchParams.get("f");return"string"==typeof e?d(e.split("-")):[]});async function M(){const e=new URL(H.url);0===u.size?e.searchParams.delete("f"):e.searchParams.set("f",v(h).join("-")),e.toString()!==H.url.toString()&&await V(e,{replaceState:!0,keepFocus:!0,noScroll:!0})}oe([()=>v(R)],()=>{!function(e){u.clear();for(const t of e)u.add(t);M()}(v(R))},{lazy:!0}),S(()=>

1{if(v(R).length>0){u.clear();for(const e of v(R))u.add(e)}else if(s()){const e=d(p.getJSON());if(e.length>0){u.clear();for(const t of e)u.add(t);M()}}});let U=new Y,G=new Y;oe([()=>u.entries()],()=>{for(const e of v(h))if(!f.has(e)){const t=B[e];if(!t){G.add(e);continue}G.delete(e),U.add(e),t().then(({default:t})=>{f.set(e,t)}).catch(()=>{G.add(e)}).finally(()=>{U.delete(e)})}0===u.size&&V("/",{replaceState:!0,keepFocus:!0,noScroll:!0})});let J=y(!1);const Q=r(()=>n.filter(({id:e})=>!u.has(e))),X=r(()=>F.filter(({id:e})=>e&&!u.has(e))),ae=r(()=>[...v(g).filter(e=>e),...v(X).filter(e=>e&&!v(Q).find(t=>t.id===e.id)),...v(J)?v(Q):[]].filter(e=>!!e));var ne=ke(),pe=o(ne);ue(pe,{});var le=T(pe,2),ce=o(le),de=o(ce);j(de,17,()=>v(ae),e=>e.id,(e,t)=>{var r=C(),a=m(r),n=e=>{var r=me();Z(o(r),{get id(){return v(t).id},size:16}),O(r),l((e,i,s)=>{A(r,"title",e),D(r,1,i),A(r,"data-testid",`framework-button-${v(t).id}`),A(r,"aria-pressed",s)},[()=>u.has(v(t).id)?`Hide ${v(t).title}`:`Display ${v(t).title}`,()=>z(["text-sm shrink-0 rounded border px-3 py-1 bg-gray-900 hover:bg-gray-800 transition-all mr-2",u.has(v(t).id)?"border-blue-900":"opacity-70 border-opacity-50 border-gray-700"]),()=>u.has(v(t).id)]),i("click",r,()=>{var e;e=v(t).id,u.has(e)?u.delete(e):u.add(e),s()&&(0===v(h).length?p.remove():p.setJSON(v(h))),M()}),L(e,r)};k(a,e=>{v(t)&&e(n)}),L(e,r)});var Ne=T(de,2),Ee=e=>{var t=fe();i("click",t,()=>{a(J,!v(J))}),L(e,t)};k(Ne,e=>{v(Q).length>0&&!v(J)&&e(Ee)}),O(ce);var ze=T(ce,2),je=o(ze),Se=o(je),Ae=e=>{var t=ve();L(e,t)},Pe=e=>{var t=De();j(t,21,()=>ee,e=>e.sectionId,(e,t)=>{var s=_e(),n=o(s),p=o(n),c=T(p);O(n);var d=T(n,2);j(d,21,()=>te.filter(e=>e.sectionId===v(t).sectionId),e=>e.snippetId,(e,s)=>{const n=r(()=>v(t).sectionId+"."+v(s).snippetId);var p=Ie(),c=o(p),d=o(c),u=T(d);O(c);var g=T(c,2);j(g,20,()=>v(h),e=>e,(e,t)=>{const n=r(()=>W(t)),p=r(()=>f.get(t)?.find(e=>e.snippetId===v(s).snippetId)),c=r(()=>U.has(t)),d=r(()=>G.has(t));var u=C(),h=m(u),g=e=>{var u=xe(),f=o(u),h=o(f);Z(o(h),{get id(){return v(n).id}}),O(h);var g=T(h,2),_=e=>{var i=ge(),r=o(i),a=e=>{var i=he();l(()=>{A(i,"href",v(p).playgroundURL),A(i,"title",`Open playground for ${v(n).title}`),A(i,"aria-label",`Open playground for ${v(n).title}`),A(i,"data-testid",`playground-button-${t}-${v(s).snippetId}`)}),L(e,i)};k(r,e=>{v(p).playgroundURL&&e(a)}),O(i),L(e,i)};k(g,e=>{v(p)&&e(_)}),O(f);var E=T(f,2),S=o(E),R=e=>{var n=C(),c=m(n),d=e=>{{let n=r(()=>`code-editor-${t}-${v(s).snippetId}`);!function(e,t){b(t,!0);const s=N(t,"files",19,()=>[]),n=r(()=>s().length>0?20*Math.max(...s().map(e=>e.lineCount))+24:0);let p=y(void 0),c=y(void 0),d=r(()=>v(c)??(s().length>0?s()[0]?.fileName:void 0));const u=r(()=>v(d)?s().find(e=>e.fileName===v(d)):void 0);var f=re(),h=m(f);j(h,21,s,e=>e.fileName,(e,t)=>{var s=se(),r=o(s,!0);O(s),l(()=>{D(s,1,z(["bg-[#0d1117] py-1.5 px-3 shrink-0 text-xs rounded-t inline-block transition-all duration-200 hover:opacity-100",v(d)!==v(t).fileName&&"opacity-60"])),x(r,v(t).fileName)}),i("click",s,()=>{a(c,v(t).fileName,!0)}),L(e,s)}),O(h);var g=T(h,2),_=o(g),E=o(_),S=e=>{var t=C(),i=m(t);P(i,()=>v(u).contentHtml),L(e,t)};k(E,e=>{v(u)&&e(S)}),O(_),I(_,e=>a(p,e),()=>v(p));var R=T(_,2),V=o(R),M=o(V),q=T(M,2);O(V),O(R),O(g),l(()=>{A(h,"data-testid",t["data-testid"]),$(_,`min-height: ${v(n)}px`),A(M,"href",t.snippetEditHref)}),i("click",q,function(){v(p)&&ie(v(p).innerText)}),L(e,f),w()}(e,{get files(){return v(p).files},get snippetEditHref(){return v(p).snippetEditHref},get"data-testid"(){return v(n)}})}},u=e=>{var i=ye(),r=o(i),a=T(o(r),2),n=o(a),c=o(n);O(n),O(a),O(r),O(i),l(()=>{A(i,"data-testid",`missing-snippet-${t}-${v(s).snippetId}`),A(c,"href",v(p).snippetEditHref),A(c,"data-testid",`contribute-link-${t}-${v(s).snippetId}`)}),L(e,i)};k(c,e=>{v(p).files.length>0?e(d):e(u,-1)}),L(e,n)},V=e=>{var i=be();l(()=>A(i,"data-testid",`loading-snippet-${t}-${v(s).snippetId}`)),L(e,i)},M=e=>{var i=we();l(()=>A(i,"data-testid",`error-snippet-${t}-${v(s).snippetId}`)),L(e,i)};k(S,e=>{v(p)?e(R):v(c)?e(V,1):v(d)&&e(M,2)}),O(E),O(u),l(()=>{A(u,"data-testid",`framework-snippet-${t}-${v(s).snippetId}`),A(h,"data-testid",`framework-title-${t}-${v(s).snippetId}`)}),L(e,u)};k(h,e=>{v(n)&&e(g)}),L(e,u)}),O(g),O(p),l(e=>{$(p,e),A(p,"id",v(n)),A(p,"data-snippet-id",v(n)),A(p,"data-testid",`snippet-${v(n)}`),A(c,"data-testid",`snippet-title-${v(n)}`),x(d,`${v(s).title??""} `),A(u,"href","#"+v(n))},[()=>`contain-intrinsic-size: auto ${E(v(s).snippetId)}px`]),L(e,p)}),O(d),O(s),l(()=>{A(n,"id",v(t).sectionId),A(n,"data-testid",`section-${v(t).sectionId}`),x(p,`${v(t).title??""} `),A(c,"href","#"+v(t).sectionId)}),L(e,s)}),O(t),L(e,t)};k(Se,e=>{0===u.size?e(Ae):e(Pe,-1)}),O(je),O(ze),O(le),O(ne),l(e=>A(ce,"data-framework-id-selected-list",e),[()=>v(h).join(",")]),L(e,ne),w()}f(["click"]);var Ee="2024-01-01",ze={"@type":"Organization",name:"Component Party",url:"https://component-party.dev",logo:{"@type":"ImageObject",url:"https://component-party.dev/popper.svg"}};function je(e){return{"@context":"https://schema.org","@type":"WebApplication",name:"Component Party",description:"Compare JavaScript frameworks side-by-side: React, Vue, Angular, Svelte, Solid.js, and more. See syntax differences, features, and code examples for web development frameworks.",url:"https://component-party.dev/",applicationCategory:"DeveloperApplication",operatingSystem:"Web Browser",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},author:ze,publisher:ze,inLanguage:"en-US",isAccessibleForFree:!0,datePublished:Ee,dateModified:e}}function Se(e){return{"@context":"https://schema.org","@type":"TechArticle",headline:`${e.titleA} vs ${e.titleB}

1 - side-by-side code comparison`,description:e.description,url:e.url,image:e.image,inLanguage:"en-US",datePublished:Ee,dateModified:e.buildDate,author:ze,publisher:ze,about:[{"@type":"SoftwareApplication",name:e.titleA,applicationCategory:"WebApplication",operatingSystem:"Web Browser"},{"@type":"SoftwareApplication",name:e.titleB,applicationCategory:"WebApplication",operatingSystem:"Web Browser"}]}}var Ae="2026-07-03";export{B as a,Ne as i,Se as n,je as r,Ae as t};