Svelte

`))),mdx("p",null,"Svelte uses a custom file format, similar to HTML"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte","App.svelte":!0}),`

Hello {name}

`))),mdx("p",null,"You can use curly braces to render data."),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte","App.svelte":!0}),"")),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte","MyComponent.svelte":!0}),`

`))),mdx("p",null,"Each svelte file is a different component"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=2,5,6","App.svelte":!0,focus:"2,5,6"}),` `)),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=2[1]","MyComponent.svelte":!0,focus:"2[1]"}),`

`))),mdx("p",null,"You can add imports inside the script tag"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=5[14:26],6[14:28]","App.svelte":!0,focus:"5[14:26],6[14:28]"}),` `)),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=2[1]","MyComponent.svelte":!0,focus:"2[1]"}),`

`))),mdx("p",null,"To share data with children components"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=5[14:26],6[14:28]","App.svelte":!0,focus:"5[14:26],6[14:28]"}),` `)),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=2,6","MyComponent.svelte":!0,focus:"2,6"}),`

`))),mdx("p",null,"you can create props using the export keyword"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=3,8","MyComponent.svelte":!0,focus:"3,8"}),`

{"\u26BD".repeat(goalCount)}

`))),mdx("p",null,"Inside curly braces you can put any javascript expression"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=11[11:32]","MyComponent.svelte":!0,focus:"11[11:32]"}),`

{"\u26BD".repeat(goalCount)}

`))),mdx("p",null,"With the on directive you can listen to events"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=5:7,11[11:32]","MyComponent.svelte":!0,focus:"5:7,11[11:32]"}),`

{"\u26BD".repeat(goalCount)}

`))),mdx("p",null,"here, when the goalcount changes after a click, svelte will rerender the component (show)"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=2:3,8,10,11","MyComponent.svelte":!0,focus:"2:3,8,10,11"}),`

{"\u26BD".repeat(goalCount)}

`))),mdx("p",null,"You can also use a custom event to share data with the parent"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=9[27:42],10[29:44]","App.svelte":!0,focus:"9[27:42],10[29:44]"}),` `)),mdx("hr",null),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"MyComponent.svelte focus=10","MyComponent.svelte":!0,focus:"10"}),""))),mdx("p",null,"and use the on directive again to handle it"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=4:6,9[27:42],10[29:44]","App.svelte":!0,focus:"4:6,9[27:42],10[29:44]"}),` `))),mdx("p",null,"and do something with the data"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=3","App.svelte":!0,focus:"3"}),` `))),mdx("p",null,"If you want to render a list"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=3,9,10[16:28],11","App.svelte":!0,focus:"3,9,10[16:28],11"}),` {#each players as player} {/each} `))),mdx("p",null,"you can use the each block."),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=9:13","App.svelte":!0,focus:"9:13"}),`

{#each players as player} {/each}

`))),mdx("p",null,"Svelte also support style tags,"),mdx(StepHead,{mdxType:"StepHead"},mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-svelte",metastring:"App.svelte focus=10:12,15,19","App.svelte":!0,focus:"10:12,15,19"}),""))),mdx("p",null,"Here the style only applies to the div from the current component and not others."))}MDXContent.isMDXComponent=!0;