1import{S as s,u as p,x as n,e as c,M as w}from"./main-Ex-1LHMJ.js";import{m as t}from"./mdx-LEb1kaIk.js";import{M as f,m as h,I as C}from"./ValidatorInput-PzAJrwPH.js";import{B as u}from"./Buttons-E-yT_r7C.js";import{F as E}from"./Form-cLix5-9l.js";p();new f([{$text:new s("Learn Rezact"),$completed:new s(!1)},{$text:new s("Learn TypeScript"),$completed:new s(!0)},{$text:new s("Build something awesome"),$completed:new s(!1)}]);let i=new f([{$text:new s("Learn Rezact"),$completed:new s(!1)},{$text:new s("Learn TypeScript"),$completed:new s(!0)},{$text:new s("Build something awesome"),$completed:new s(!1)}]),j=h(([a])=>a.Map(e=>e),[i]);p();function $(){return n("div",{class:"m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"},n("h1",null,"Todo List"),n("p",null,c(([a])=>a.get().length,[i])," Todos"),h(([a])=>a.Map((e,o)=>n(y,{$todo:e,$idx:o})),[j]))}function y({$todo:a,$idx:e}){const o=c(([r,d])=>r.get().$completed.get()?"text-decoration: line-through;":"",[a,a.get().$completed]);return n("div",{style:o,class:"max-w-96"},n("span",null,c(([r])=>r.get()+1,[e])," - ",a.get().$text.get()),n("input",{type:"checkbox",class:"float-right",checked:a.get().$completed}))}let b=h(([a])=>a.Map(e=>e),[i]);p();function T(){const a=e=>{i.push({$text:new s(e.newTodo),$completed:new s(!1)})};return n("div",{class:"m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"},n("h1",null,"Todo List"),n("p",null,c(([e])=>e.get().length,[i])," Todos"),h(([e])=>e.Map((o,r)=>n(v,{$todo:o,$idx:r})),[b]),n(E,{onSubmit:a},n(C,{placeholder:"Add Todo",name:"newTodo",required:!0}),n(u,{type:"submit",class:"mt-2 w-full"},"Add")))}function v({$todo:a,$idx:e}){const o=c(([r,d])=>r.get().$completed.get()?"text-decoration: line-through;":"",[a,a.get().$completed]);return n("div",{style:o,class:"max-w-96"},n("span",null,c(([r])=>r.get()+1,[e])," - ",a.get().$text.get()),n("input",{type:"checkbox",class:"float-right",checked:a.get().$completed}))}let k=h(([a])=>a.Map(e=>e),[i]);p();function S(){const a=e=>{i.push({$text:new s(e.newTodo),$completed:new s(!1)})};return n("div",{class:"m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"},n("h1",null,"Todo List"),n("p",null,c(([e])=>e.get().length,[i])," Todos"),h(([e])=>e.Map((o,r)=>n(z,{$todo:o,$idx:r})),[k]),n(E,{onSubmit:a},n(C,{placeholder:"Add Todo",name:"newTodo",required:!0}),n(u,{type:"submit",class:"mt-2 w-full"},"Add")))}function z({$todo:a,$idx:e}){const o=c(([l,m])=>l.get().$completed.get()?"text-decoration: line-through;":"",[a,a.get().$completed]),r=l=>{const m=i.get().indexOf(l);i.splice(m,1)};let d=c(([l])=>l.get()+1,[e]);return n("div",{style:o,class:"max-w-96 leading-7"},n("span",null,d," - ",a.get().$text.get()),n(u,{class:"float-right ml-2 ",size:"xs",color:"danger",onClick:()=>r(a)},"X"),n("input",{type:"checkbox",class:"float-right",checked:a.get().$completed}))}p();function x({label:a,id:e,checked:o}){return n("div",null,n("input",{type:"radio",id:e,value:e,checked:o}),n("label",{for:e},a))}function I(){const a=d=>{i.push({$text:new s(d.newTodo),$completed:new s(!1)})};let e=new s("all"),o=h(([d,l])=>d.get().filter(m=>{if(l.get()==="all")return!0;if(l.get()==="completed")return m.get().$completed.get();if(l.get()==="todo")return!m.get().$completed.get()}),[i,e]),r=h(([d])=>d.Map(l=>l),[o]);return n("div",{class:"m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"},n("h1",null,"Todo List"),n("p",null,c(([d])=>d.get().length,[i])," Todos"),n("fieldset",null,n("legend",null,"Filter:"),n(x,{label:"Show All",id:"all",checked:e}),n(x,{label:"Show Completed",id:"completed",checked:e}),n(x,{label:"Show Todo",id:"todo",checked:e})),h(([d])=>d.Map((l,m)=>n(R,{$todo:l,$idx:m})),[r]),n(E,{onSubmit:a},n(C,{placeholder:"Add Todo",name:"newTodo",required:!0}),n(u,{type:"submit",class:"mt-2 w-full"},"Add")))}function R({$todo:a,$idx:e}){const o=c(([l,m])=>l.get().$completed.get()?"text-decoration: line-through;":"",[a,a.get().$completed]),r=l=>{const m=i.get().indexOf(l);i.splice(m,1)};let d=c(([l])=>l.get()+1,[e]);return n("div",{style:o,class:"max-w-96 leading-7"},n("span",null,d," - ",a.get().$text.get()),n(u,{class:"float-right ml-2 ",size:"xs",color:"danger",onClick:()=>r(a)},"X"),n("input",{type:"checkbox",class:"float-right",checked:a.get().$completed}))}const O=void 0,_=w;
1function g(a){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...a.components};return t.xCreateElement("div",{class:"mdx max-w-3xl pb-[80vh]"},t.xCreateElement(e.h1,null,"Signals (Reactive Variables)"),t.xCreateElement(e.p,null,"Rezact offers a unique approach to reactivity, simplifying state management and component updates. This section will delve into the core principles of Rezact's reactivity system."),t.xCreateElement(e.h2,null,"1. Reactive Variables"),t.xCreateElement(e.p,null,"In Rezact, reactive variables are prefixed with a ",t.xCreateElement(e.code,null,"$")," sign. These variables are special because any changes to them will automatically trigger updates in the UI."),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"let")," $count = ",t.xCreateElement(e.span,{class:"hljs-number"},"0"),`; 2 3`,t.xCreateElement(e.span,{class:"hljs-keyword"},"let"),` $todos = [ 4 { `,t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"Learn Rezact"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"false"),` }, 5 { `,t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"Build an app"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"true"),` }, 6]; 7`)),t.xCreateElement(e.p,null,"Unlike traditional state management systems where state changes are explicitly triggered, in Rezact, simply modifying the value of a reactive variable is enough. Also notice that a reactive variable can be an array of objects with reactive properties as shown above."),t.xCreateElement(e.h2,null,"2. Direct Data Mutation"),t.xCreateElement(e.p,null,"One of the standout features of Rezact is its encouragement of direct data mutations. While many modern frameworks advocate for immutability, Rezact takes a different approach."),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-comment"},"// These will trigger a UI update"),` 8 9$count++; 10 11$todos.`,t.xCreateElement(e.span,{class:"hljs-title function_"},"push"),"({ ",t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"This is awesome!"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"false"),` }); 12`)),t.xCreateElement("hr",{class:" block p-8"}),t.xCreateElement(e.h1,null,"Simple Todo Tutorial"),t.xCreateElement(e.p,null,"Let's demonstrate signals by building a todo example:"),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"let")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"$todos"),`: any = [ 13 { `,t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"Learn Rezact"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"false"),` }, 14 { `,t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"Learn TypeScript"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"true"),` }, 15 { `,t.xCreateElement(e.span,{class:"hljs-attr"},"$text"),": ",t.xCreateElement(e.span,{class:"hljs-string"},'"Build something awesome"'),", ",t.xCreateElement(e.span,{class:"hljs-attr"},"$completed"),": ",t.xCreateElement(e.span,{class:"hljs-literal"},"false"),` }, 16]; 17 18`,t.xCreateElement(e.span,{class:"hljs-keyword"},"export")," ",t.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"Todo100"),"(",t.xCreateElement(e.span,{class:"hljs-params"}),`) { 19 `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 20 `,t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"div")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",t.xCreateElement(e.span,{class:"hljs-string"},'"m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"'),">"),` 21 `,t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"h1"),">"),"Todo List",t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"h1"),">"),` 22 `,t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),"{$todos.length} Todos",t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"p"),">"),` 23 24 {$todos.map(($todo, $idx) => ( 25 `,t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"TodoItem")," $",t.xCreateElement(e.span,{class:"hljs-attr"},"todo"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{$todo}")," $",t.xCreateElement(e.span,{class:"hljs-attr"},"idx"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{$idx}")," />"),` 26 ))} 27 `,t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"div"),">")),` 28 ); 29} 30 31`,t.xCreateElement(e.span,{class:"hljs-keyword"},"function")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"TodoItem"),"(",t.xCreateElement(e.span,{class:"hljs-params"},"{ $todo, $idx }"),`) { 32 `,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," $completedStyle = $todo.",t.xCreateElement(e.span,{class:"hljs-property"},"$completed"),` 33 ? `,t.xCreateElement(e.span,{class:"hljs-string"},'"text-decoration: line-through;"'),` 34 : `,t.xCreateElement(e.span,{class:"hljs-string"},'""'),`; 35 36 `,t.xCreateElement(e.span,{class:"hljs-keyword"},"return"),` ( 37 `,t.xCreateElement(e.span,{class:"xml"},t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"div")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"style"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{$completedStyle}")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",t.xCreateElement(e.span,{class:"hljs-string"},'"max-w-96"'),">"),` 38 `,t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">"),` 39 {$idx + 1} - {$todo.$text} 40 `,t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"span"),">"),` 41 42 `,t.xCreateElement(e.span,{class:"hljs-tag"},"<",t.xCreateElement(e.span,{class:"hljs-name"},"input")," ",t.xCreateElement(e.span,{class:"hljs-attr"},"type"),"=",t.xCreateElement(e.span,{class:"hljs-string"},'"checkbox"')," ",t.xCreateElement(e.span,{class:"hljs-attr"},"class"),"=",t.xCreateElement(e.span,{class:"hljs-string"},'"float-right"')," ",t.xCreateElement(e.span,{class:"hljs-attr"},"checked"),"=",t.xCreateElement(e.span,{class:"hljs-string"},"{$todo.$completed}")," />"),` 43 `,t.xCreateElement(e.span,{class:"hljs-tag"},"</",t.xCreateElement(e.span,{class:"hljs-name"},"div"),">")),` 44 ); 45} 46 47`)),t.xCreateElement(e.h3,null,"Output:"),t.xCreateElement($),t.xCreateElement(e.p,null,`There are a couple subtle things happening in this example that need to be 48broke down.`),t.xCreateElement(e.p,null,`The very first thing you will notice is that the array of todo objects is 49declared at the top of the module. In rezact, this is referred to as 50`,t.xCreateElement(e.strong,null,"Module Level State.")),t.xCreateElement(e.p,null,"You could also declare the array inside the ",t.xCreateElement(e.code,null,"Todo100"),` component as you 51would when using `,t.xCreateElement(e.code,null,"useState")," in React. This would be called ",t.xCreateElement(e.strong,null,"Component Level State.")),t.xCreateElement(e.p,null,"More on all of that in a moment..."),t.xCreateElement(e.p,null,`The last subtle thing in the example above is the following code from the
52`,t.xCreateElement(e.code,null,"TodoItem")," component:"),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," $completedStyle = $todo.",t.xCreateElement(e.span,{class:"hljs-property"},"$completed"),` 53 ? `,t.xCreateElement(e.span,{class:"hljs-string"},'"text-decoration: line-through;"'),` 54 : `,t.xCreateElement(e.span,{class:"hljs-string"},'""'),`; 55`)),t.xCreateElement(e.p,null,`At first this seems pretty straightforward, but you may be wondering why we 56bother creating a new signal to store the results. Those familiar with React 57understand that entire component functions will rerun when state changes. In 58contrast frameworks like SolidJS and Sveltes have component functions that will 59only run `,t.xCreateElement(e.strong,null,"once")," when first rendered. Rezact is the same way."),t.xCreateElement(e.p,null,`This is why assigning the results to a signal are important. There are 2 things 60happening here.`),t.xCreateElement(e.ul,null,` 61`,t.xCreateElement(e.li,null,`Rezact's compiler will detect any assignments to a signal that depend on other 62signals. In this case, the compiler instruments the instruction to track when 63`,t.xCreateElement(e.code,null,"$todo.$completed"),` changes. When this happens the instrumented code will rerun 64the statement and assign the results to `,t.xCreateElement(e.code,null,"$completedStyle")),` 65`,t.xCreateElement(e.li,null,`Rezact's runtime detects when signals are being used in the JSX and subscribes 66to changes so that it can update the DOM when the signal values update/change. 67In this case, when `,t.xCreateElement(e.code,null,"$todo.$completed")," is updated, so will ",t.xCreateElement(e.code,null,"$completedStyle"),`. 68The runtime will handle updating the `,t.xCreateElement(e.code,null,"style")," attribute of the ",t.xCreateElement(e.code,null,"span")," element."),` 69`),t.xCreateElement(e.p,null,`The rest of the example should feel pretty familiar for people experienced with 70JSX frameworks.`),t.xCreateElement(e.p,null,"Now back to state..."),t.xCreateElement(e.h3,null,"Signals and State"),t.xCreateElement(e.p,null,"In Rezact, ",t.xCreateElement(e.code,null,"Signals"),` are just plain javascript objects. To be precise they are 71instances of the Signal class. It is because of this, they can be declared 72anywhere and passed around freely through function arguments or component props.`),t.xCreateElement(e.p,null,`This turns out to be a very valuable and powerful feature as there are no 73`,t.xCreateElement(e.strong,null,"hook rules")," that must be observed (like when using ",t.xCreateElement(e.code,null,"useState"),` in React). 74This makes everything much simpler and reduces cognitive overhead.`),t.xCreateElement(e.p,null,`The only thing that really needs to be kept in mind is that any variable or 75object property that is prefixed with a `,t.xCreateElement(e.code,null,"$"),` sign is a Signal in Rezact. 76There are a few "Gotchas" that come with this and they are documented 77are the `,t.xCreateElement(e.a,{href:"/docs/gotchas"},"Gotchas")," section of the docs."),t.xCreateElement(e.h3,null,"Module Level State"),t.xCreateElement(e.p,null,`Signals declared at the module level have a nice property in that they persist 78across renders of any components declared inside the module. This works great 79for Singletons where you want this behavior. To demonstrate this try changing 80a couple items in the todo list and navigating to another page and coming back. 81Keep in mind that if you refresh the page the module will be reloaded and state 82will be lost. But navigating within the site using the sidebar or header will 83maintain any state of items in the todo list because this is the nature of 84`,t.xCreateElement(e.strong,null,"Single Page Applications.")),t.xCreateElement(e.p,null,`If you haven't guessed it already, this enables state stores without any extra 85work... `,t.xCreateElement(e.a,{href:"/docs/stores"},"Rezact Stores"),` are simply Signals declared 86and exported from a module.`),t.xCreateElement(e.h3,null,"Component Level State"),t.xCreateElement(e.p,null,`For components that are meant to be reused, it is best to declare signals inside 87the component function as you would inside a regular react component. This 88means the state will be created new everytime a component is mounted. This 89behaves in all the ways that you would expect state declared in a component to 90behave.`),t.xCreateElement(e.hr),t.xCreateElement(e.h2,null,"Mutating Signals"),t.xCreateElement(e.p,null,"Following our todo tutorial, how do we add new todos?"),t.xCreateElement(e.p,null,"Below we show the code needed to add a new todo to the list."),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-diff"},t.xCreateElement(e.span,{class:"hljs-addition"},'+import { Btn } from "./Buttons";'),` 91`,t.xCreateElement(e.span,{class:"hljs-addition"},'+import { Form } from "./Form";'),` 92`,t.xCreateElement(e.span,{class:"hljs-addition"},'+import { Input } from "./ValidatorInput";'),` 93`,t.xCreateElement(e.span,{class:"hljs-addition"},'+import { $todos } from "./todoData";'),` 94 95export function Todo200() { 96`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ const addTodo = (data) => {"),` 97`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ $todos.push({ $text: data.newTodo, $completed: false });"),` 98`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ };"),` 99 100 return ( 101 <div class="m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"> 102 <h1>Todo List</h1> 103 <p>{$todos.length} Todos</p> 104 105 {$todos.map(($todo, $idx) => ( 106 <TodoItem $todo={$todo} $idx={$idx} /> 107 ))} 108 109`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <Form onSubmit={addTodo}>"),` 110`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <Input placeholder="Add Todo" name="newTodo" required />'),` 111`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <Btn type="submit" class="mt-2 w-full">'),` 112`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ Add"),` 113`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ </Btn>"),` 114`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ </Form>"),` 115 </div> 116 ); 117} 118`)),t.xCreateElement(T),t.xCreateElement(e.p,null,"Go ahead and try it out!"),t.xCreateElement(e.p,null,"Wanna know the fun part??"),t.xCreateElement(e.p,null,"The todo you just added here is available in the first todo list we created earlier!"),t.xCreateElement(e.p,null,"Go ahead, scroll up, I dare you!"),t.xCreateElement(e.p,null,"To be completely fair, we have pulled out the data and placed it in its own module (",t.xCreateElement(e.a,{href:"/docs/stores"},"store"),`). 119This is because we want to demonstrate how to use the data in multiple places. 120But the point is that the data is available anywhere in the app and `,t.xCreateElement(e.a,{href:"/docs/stores"},"Rezact stores")," make this easy."),t.xCreateElement(e.p,null,"And also to be even more fair, we are hiding some lower level details in the ",t.xCreateElement(e.code,null,"Form"),", ",t.xCreateElement(e.code,null,"Btn")," and ",t.xCreateElement(e.code,null,"Input"),` components. 121But the main focus is on the `,t.xCreateElement(e.code,null,"addTodo")," function. This is where the magic happens."),t.xCreateElement(e.p,null,"You can see all the source code in the repo for this website. All of it is completely approachable and easy to understand."),t.xCreateElement(e.p,null,`Probably the most important take away is that with rezact we don't need to make copies of data just so we can 122satisfy a runtime comparison that would trigger a UI update. This is a huge win for performance and simplicity.`),t.xCreateElement(e.p,null,"With Rezact, we can just mutate the data directly and the UI will update automatically."),t.xCreateElement(e.hr),t.xCreateElement(e.h2,null,"Deleting Todos"),t.xCreateElement(e.p,null,"Ok, let's add a delete button."),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-diff"},`function TodoItem({ $todo, $idx }) { 123 const $completedStyle = $todo.$completed 124 ? "text-decoration: line-through;" 125 : ""; 126 127`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ const deleteTodo = (todo) => {"),` 128`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ $todos.deleteValue(todo);"),` 129`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ };"),` 130 131 let $idxPlusOne = $idx + 1; 132 133 return ( 134 <div style={$completedStyle} class="max-w-96 leading-7">
135 <span> 136 {$idxPlusOne} - {$todo.$text} 137 </span> 138 139`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <Btn onClick={() => deleteTodo($todo)}>X</Btn>"),` 140 141 <input type="checkbox" class="float-right" checked={$todo.$completed} /> 142 </div> 143 ); 144} 145`)),t.xCreateElement(S),t.xCreateElement(e.p,null,"Easy right? The ",t.xCreateElement(e.code,null,".deleteValue"),` method is a helper method that is available on all signals that are maps/arrays. 146It's basically a wrapper around the native `,t.xCreateElement(e.code,null,"splice")," method. You could also do the following:"),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-jsx"},t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," ",t.xCreateElement(e.span,{class:"hljs-title function_"},"deleteTodo")," = (",t.xCreateElement(e.span,{class:"hljs-params"},"todo"),`) => { 147 `,t.xCreateElement(e.span,{class:"hljs-keyword"},"const")," idx = $todos.",t.xCreateElement(e.span,{class:"hljs-title function_"},"indexOf"),`(todo); 148 $todos.`,t.xCreateElement(e.span,{class:"hljs-title function_"},"splice"),"(idx, ",t.xCreateElement(e.span,{class:"hljs-number"},"1"),`); 149}; 150`)),t.xCreateElement(e.hr),t.xCreateElement(e.h2,null,"Filtering Todos"),t.xCreateElement(e.pre,null,t.xCreateElement(e.code,{class:"hljs language-diff"},t.xCreateElement(e.span,{class:"hljs-addition"},"+function Radio({ label, id, checked }) {"),` 151`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ return ("),` 152`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <div>"),` 153`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <input type="radio" id={id} value={id} checked={checked} />'),` 154`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <label for={id}>{label}</label>"),` 155`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ </div>"),` 156`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ );"),` 157`,t.xCreateElement(e.span,{class:"hljs-addition"},"+}"),` 158 159export function Todo400() { 160 const addTodo = (data) => { 161 $todos.push({ $text: data.newTodo, $completed: false }); 162 }; 163 164`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ let $filter = "all";'),` 165`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ let $filteredTodos = $todos.filter(($todo) => {"),` 166`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ if ($filter === "all") return true;'),` 167`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ if ($filter === "completed") return $todo.$completed;'),` 168`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ if ($filter === "todo") return !$todo.$completed;'),` 169`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ });"),` 170 171 return ( 172 <div class="m-4 rounded-lg bg-zinc-300 p-8 drop-shadow-xl"> 173 <h1>Todo List</h1> 174 <p>{$todos.length} Todos</p> 175 176`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <fieldset>"),` 177`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ <legend>Filter:</legend>"),` 178`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <Radio label="Show All" id="all" checked={$filter} />'),` 179`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <Radio label="Show Completed" id="completed" checked={$filter} />'),` 180`,t.xCreateElement(e.span,{class:"hljs-addition"},'+ <Radio label="Show Todo" id="todo" checked={$filter} />'),` 181`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ </fieldset>"),` 182 183`,t.xCreateElement(e.span,{class:"hljs-deletion"},"- {$todos.map(($todo, $idx) => ("),` 184`,t.xCreateElement(e.span,{class:"hljs-addition"},"+ {$filteredTodos.map(($todo, $idx) => ("),` 185 <TodoItem $todo={$todo} $idx={$idx} /> 186 ))} 187 188 <Form onSubmit={addTodo}> 189 <Input placeholder="Add Todo" name="newTodo" required /> 190 <Btn type="submit" class="mt-2 w-full"> 191 Add 192 </Btn> 193 </Form> 194 </div> 195 ); 196} 197`)),t.xCreateElement(I))}function q(a={}){const{wrapper:e}=a.components||{};return e?t.xCreateElement(e,{...a},t.xCreateElement(g,{...a})):g(a)}export{_ as Layout,q as default,O as fm};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.