এসভেল্ট

npx এর মাধ্যমে ইন্সটল করতে

 npx degit sveltejs/template awsome-svelte
 cd awsome-svelte
 npm install
 npm run dev

Git এর মাধ্যমে ইন্সটল

 git clone https://github.com/sveltejs/template.git awsome-svelte
 cd awsome-svelte
 npm install
 npm run dev

onMount

<script> 
 import { onMount } from 'svelte'; 
 let photos = []; 
onMount(async () => { 
 const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`); 
 photos = await res.json(); 
 }); 
</script>
<h1>Photo album</h1>
 <div>{JSON.stringify(photos)}</div>

onDestroy

//App.svelte 
 <script> 
 import Timer from './Timer.svelte'; 
 let open = true; 
 let seconds = 0; 
 const toggle = () => (open = !open); 
 const handleTick = () => (seconds += 1); 
</script> 
<div> 
 <button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button> 
 <p>
 	 The Timer component has been open for 	 {seconds} {seconds === 1 ? 'second' : 'seconds'} 
 </p> 
 {#if open} 
 <Timer on:tick={handleTick}/> 
 {/if} 
 </div> 


 //Timer.svelte 
 <script> 
 import { onInterval } from './utils.js'; 
 export let callback; 
 export let interval = 1000; 
 onInterval(callback, interval); 
 </script> 

 <p> This component executes a callback every  {interval } millisecond{interval === 1 ? '' : 's' } </p> 
//utils.js 
 import { onDestroy } from 'svelte'; 
 export function onInterval(callback, milliseconds) { 
 const interval = setInterval(callback, milliseconds); 
 onDestroy(() => { 
 clearInterval(interval); 
 }); 
 } 

beforeUpdate, afterUpdate

import { beforeUpdate, afterUpdate } from 'svelte';

tick

import { tick } from 'svelte';

ভ্যারিয়েবল ডিক্লেয়ার

<script> 
 let name = 'world'; 
</script> 
<h1>Hello {name}!</h1>

ডায়ন্যামিক অ্যাট্রিবিউট

<script> 
 let src = 'tutorial/image.gif', widht='100', height='100'; 
</script>  
<img {src} {width} {height}>

কম্পোনেন্ট স্ট্যাইল

 <p>This is a paragraph.</p>
<style>
 p{
	 color: purple; 
} 
</style>

নেস্টেড কম্পোনেন্ট

//App.svelte 
<script>
	 import ChildComponent from './Child.svelte'; 
</script> 
<h2>I'm Parent Component</h2> 
<ChildComponent/> 

//Child.svelte 
 <h2>I'm Child Component</h2>

নেস্টেড কম্পোনেন্ট এ props পাঠানো

//App.svelte 
 <script>
 import ChildComponent from './Child.svelte'; 
 let title = 'I'm Child Component'; 
</script> 
 <h2>I'm Parent Component</h2> 
 <ChildComponent {title}/> 

//Child.svelte 
 <script> 
 export let title; 
</script> 
<h2>{title || 'Hello world'}</h2>

ডিফল্ট props

//App.svelte 
 <script>
 import ChildComponent from './Child.svelte'; 
 let title = 'I'm Child Component'; 
</script> 
 <h2>I'm Parent Component</h2> 
<ChildComponent {title}/> 
 <ChildComponent/> 

//Child.svelte 
 <script> 
 export let title = 'Hello world'; 
</script> 
<h2>{title}</h2>

ইভেন্ট হ্যান্ডেলার

<script> 
 let count = 0; 
 function incrementCount() { 
 count += 1; 
 } 
</script>
<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>

রিয়্যাক্টিভ অ্যাসাইনমেন্ট

<script> 
 let count = 0; 
 $: doubled = count * 2; 
 function incrementCount() { 
 count += 1; 
 } 
</script>
<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>
<p>{count} doubled is {doubled}</p>

রিয়্যাক্টিভ লজিক

<script>
 let x = 7;
 </script>
{#if x > 10}
 <p>{x} is greater than 10</p> 
 {:else if 5 > x}
 <p>{x} is less than 5</p> 
 {:else}
 <p>{x} is between 5 and 10</p>
 {/if}

লজিক

<script> 
 let count = 0; 
 $: if (count >= 10) { 
 alert(`count is dangerously high!`); 
 count = 9; 
} 
 function incrementCount() { 
 count += 1; 
 } 
</script>
<button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>

লুপ

<script> 
 let cats = [ { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, { id: 'z_AbfPXTKms', name: 'Maru' }, { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' } ]; 
</script> 
<h1>The Famous Cats of YouTube</h1>
{#each cats as { id, name }, i} 
 <div> 
 <a target='_blank' href='https: //www.youtube.com/watch?v={id}'>{i + 1}: {name}</a> 
 </div> 
 {/each}

ডম ইভেন্ট হ্যান্ডেলার

<script> 
 let m = { x: 0, y: 0 }; 
 function handleMousemove(event) { 
 m.x = event.clientX; 
 m.y = event.clientY; 
 } 
 </script> 
<div on:mousemove={handleMousemove}> 
 The mouse position is {m.x} x {m.y} 
 </div> 
<style> 
 div { 
 width: 100%; 
 height: 100%; 
 } 
</style>

ইনলাইন ডম ইভেন্ট হ্যান্ডেলার

<script> 
 let m = { x: 0, y: 0 }; 
 </script> 
<div on:mousemove='{e => m = { x: e.clientX, y: e.clientY}}'> 
 The mouse position is {m.x} x {m.y} 
 </div> 
<style> 
 div { 
 width: 100%; 
 height: 100%; 
 } 
</style>

কম্পোনেন্ট ইভেন্টস

//App.svelte 
 <script> 
 import Inner from './Inner.svelte'; 
  function handleMessage(event) { 
 alert(event.detail.text); 
 } 
 </script> 
<Inner on:message={handleMessage}/>

//Inner.svelte
 <script> 
 import { createEventDispatcher } from 'svelte'; 
 const dispatch = createEventDispatcher(); 
 function sayHello() { 
 dispatch('message', { 
	 text: 'Hello!'}); 
 } 
 </script> 
<button on:click={sayHello}> Click to say hello </button>

text/number/textarea input ফিল্ড বাইন্ডিং

<script> 
 let name = 'world'; 
 </script> 
<input bind:value={name}> 
<h1>Hello {name}!</h1>

checkbox বাইন্ডিং

<script> 
 let yes = false; 
 </script> 
<input type=checkbox checked={yes}>