এসভেল্ট

npm এর মাধ্যমে vite এর সাহায্যে ইন্সটল করতে

npm create vite@latest myapp -- --template svelte
cd myapp
npm install
npm run dev

কম্পোনেন্ট ফরম্যাট

<script>
  // logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
  /* styles go here */
</style>

এসাইনমেন্ট (Assignment)

// App.svelte 

<script>
  let count = 0; 

  function incrementCount() {
    count += 1;
  }
</script>

<button on:click={incrementCount}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

ডিক্লারেশন (Declarations)

// App.svelte 

<script>
  let count = 0; 

  $: doubled = count * 2;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

ষ্টেটমেন্ট (Statements)

// App.svelte 

<script>
  let count = 0; 

  $: if (count >= 10) {
    alert('count is dangerously high!');
    count = 9;
  }

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>

অ্যারে এবং অবজেক্ট আপডেট

// App.svelte 

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    numbers = [...numbers, numbers.length + 1];
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>

if এর ব্যবহার

// App.svelte 

<script>
  let user = { loggedIn: false };

  function toggle() {
    user.loggedIn = !user.loggedIn;
  }
</script>

{#if user.loggedIn}
  <button on:click={toggle}>
    Log out
  </button>
{/if}

{#if !user.loggedIn}
  <button on:click={toggle}>
    Log in
  </button>
{/if}

else এর ব্যবহার

// App.svelte 

<script>
  let user = { loggedIn: false };

  function toggle() {
    user.loggedIn = !user.loggedIn;
  }
</script>

{#if user.loggedIn}
  <button on:click={toggle}>
    Log out
  </button>
{:else}
  <button on:click={toggle}>
    Log in
  </button>
{/if}

else if এর ব্যবহার

// App.svelte 

<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}

each এর ব্যবহার

// App.svelte 

<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>

<ul>
  {#each cats as { id, name }, i}
    <li><a target='_blank' href='https://www.youtube.com/watch?v={id}'>
      {i + 1}: {name}
    </a></li>
  {/each}
</ul>

keyed each এর ব্যবহার

// App.svelte 

<script>
  import Thing from './Thing.svelte';
  let things = [
    { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
    { id: 3, name: 'carrot' },
    { id: 4, name: 'doughnut' },
    { id: 5, name: 'egg' },
  ];
  function handleClick() {
    things = things.slice(1);
  }
</script>

<button on:click={handleClick}>
  Remove first thing
</button>

{#each things as thing (thing.id) },
  <Thing name={thing.name}/>
{/each}

// Thing.svelte

<script>
  const emojis = {
    apple: '🍎',
    banana: '🍌',
    carrot: '🥕',
    doughnut: '🍩',
    egg: '🥚'
  }

  export let name;

  const emoji = emojis[name];
</script>

<p>
  <span>The emoji for { name } is { emoji }</span>
</p>

<style>
  p {
    margin: 0.8em 0;
  }
  span {
    display: inline-block;
    padding: 0.2em 1em 0.3em;
    text-align: center;
    
    border-radius: 0.2em;
    background-color: #FFDFD3;
  }
</style>

await এর ব্যবহার

// App.svelte 

<script>
  async function getRandomNumber() {
    const res = await fetch(`/tutorial/random-number`);
    const text = await res.text();

    if (res.ok) {
      return text;
    } else {
      throw new Error(text);
    }
  }

  let promise = getRandomNumber();

  function handleClick() {,
    promise = getRandomNumber();
  }
</script>

<button on:click={handleClick}>
  generate random number
</button>

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style='color: red'>{error.message}</p>
{/await}

টেক্সট ইনপুট বাইন্ডিং

// App.svelte 

<script>
  let name = 'world';
</script>

<input bind:value={name}><h1>Hello {name}!</h1>

নাম্বার ইনপুট

// App.svelte <script>
  let a = 1;
  let b = 2;
</script>

<label>
  <input type=number bind:value={a} min=0 max=10>
  <input type=range bind:value={a} min=0 max=10>
</label> 

<label>
  <input type=number bind:value={b} min=0 max=10>
  <input type=range bind:value={b} min=0 max=10> 
</label> 

<p>{a} + {b} = {a + b}</p><style>
  label { display: flex }
  input, p { margin: 6px } 
</style>

চেকবক্স ইনপুট

// App.svelte 

<script>
  let yes = false;
</script>

<label>
  <input type=checkbox bind:checked={yes}>
  Yes! Send me regular email spam
</label>

{#if yes}
  <p>Thank you. We will bombard your inbox and sell your personal details.</p>
{:else}
  <p>You must opt in to continue. If you're not paying, you're the product.</p>
{/if}

<button disabled={!yes}>
  Subscribe
</button>

গ্রুপ ইনপুট

// App.svelte 

<script>
  let scoops = 1;
  let flavours = ['Mint choc chip'];
  let menu = [
    'Cookies and cream',
    'Mint choc chip',
    'Raspberry ripple'
  ];

  function join(flavours) {
    if (flavours.length === 1) return flavours[0];
    return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
  }
</script> 

<h2>Size</h2> 

<label>
  <input type=radio bind:group={scoops} name='scoops' value={1}>
  One scoop
</label> 

 <label> 
  <input type=radio bind:group={scoops} name='scoops' value={2}>
  Two scoops
</label> 

<label> 
  <input type=radio bind:group={scoops} name='scoops' value={3}> 
Three scoops
</label> 

<h2>Flavours</h2> 
{#each menu as flavour}
 <label>
    <input type=checkbox bind:group={flavours} name='flavours' value={flavour}> 
      {flavour}
    </label> 
{/each} 

{#if flavours.length === 0}
 <p>Please select at least one flavour</p> 
{:else if flavours.length > scoops} 
  <p>Can't order more flavours than scoops!</p> 
{:else} 
  <p>
    You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'} of {join(flavours)} 
  </p>
{/if}

টেক্সট এরিয়া ইনপুট বাইন্ডিং

// App.svelte 

<script>
  import { marked } from 'marked';
  let value = `Some words are *italic*, some are **bold**`;
</script> 

{@html marked(value)}

<textarea bind:value></textarea> 

<style>
  textarea { width: 100%; height: 200px; }
</style>

টেক্সট এরিয়া ইনপুট বাইন্ডিং

// App.svelte 

<script>
  import { marked } from 'marked';
  let value = `Some words are *italic*, some are **bold**`;
</script> 

{@html marked(value)}

<textarea bind:value></textarea> 

<style>
  textarea { width: 100%; height: 200px; }
</style>

সিলেক্ট বাইন্ডিং

// App.svelte 

<script>
  let questions = [
  let questions = [
    { id: 1, text: `Where did you go to school?` }, 
    { id: 2, text: `What is your mother's name?` },
    { id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
  ];

  let selected;

  let answer = '';

  function handleSubmit() { 
    alert(`answered question ${selected.id} (${selected.text}) with '${answer}'`);
  }
</script> 

<h2>Insecurity questions</h2> 

<form on:submit|preventDefault={handleSubmit}>
  <select bind:value={selected} on:change='{() => answer = ''}'>
    {#each questions as question}
      <option value={question}>
        {question.text}
      </option>
    {/each} 
  </select>

  <input bind:value={answer}>

  <button disabled={!answer} type=submit>
    Submit
  </button>
</form>

<p>selected question {selected ? selected.id : '[waiting...]'}</p>

<style>
  input {
    display: block;
    width: 500px;
    max-width: 100%;
  }
</style>

একাধিক সিলেক্ট

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';

এসভেল্ট এ 'Hello world' প্রিন্ট করা

// App.svelte

<h1>Hello world!</h1>

ডাটা যুক্ত করা(ভ্যারিয়েবল ডিক্লেয়ার)

// App.svelte

<script> 
  let name = 'world';
</script> 

<h1>Hello {name.toUpperCase()}!</h1>

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

// App.svelte

<script> 
  let src = '/tutorial/image.gif';
  let name = 'Rick Astley';
</script> 

<img {src} alt='{name} dances.'>

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

// App.svelte

<p>This is a paragraph.</p>

<style>
  p{
    color: purple;
  }
</style>

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

// App.svelte

<script>
  import NestedComponent from './Nested.svelte'; 
</script>

<h2>I'm Parent Component</h2> 
<NestedComponent/> 

// Nested.svelte 

<h2>I'm Nested Component</h2>

HTML ট্যাগস

// App.svelte

<script>
  let string = `this string contains some <strong>HTML!!!</strong>`; 
</script>

<h2><p>{@html string}</p></h2>

প্রপস ডিক্লারেশন

// App.svelte 

<script>
  import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

//Nested.svelte 

<script>
  export let answer;
</script>

<p>The answer is {answer}</p>

প্রপস এর ডিফল্ট ভ্যালু

// App.svelte 

<script>
  import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>
<Nested />

//Nested.svelte 

<script>
  export let answer = 'a mystery';
</script>

<p>The answer is {answer}</p>

প্রপস স্প্রেড

// App.svelte 

<script>
  import Info from './Info.svelte';
  const pkg = {
    name: 'svelte',
    version: 3,
    speed: 'blazing',
    website: 'https://devsonket.com'
  };
</script>

<Info {...pkg}/>

//Info.svelte 

<script>
  export let name;
  export let version;
  export let speed;
  export let website;
</script>

<p>The <code>{name}</code> package is {speed} fast. Download version {version} from <a href='https://www.npmjs.com package/{name}'>npm</a> and <a href={website}>learn more here</p>

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

// App.svelte 

<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>

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

// App.svelte <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>
  function handleClick() {
    alert('no more alerts')
  }
</script>

<button on:click|once={handleClick}>
  Click me
</button>

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

// 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>

ইভেন্ট ফরওয়ারর্ডিং

// App.svelte 

<script>
  import Outer from './Outer.svelte';

  function handleMessage(event) {
    alert(event.detail.text);
  }
</script>

<Outer 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>// Outer.svelte 

<script>
  import Inner from './Inner.svelte';
</script>

<Inner on:message/>

ডম ইভেন্ট ফরওয়ারর্ডিং

// App.svelte 

<script>
  import CustomButton from './CustomButton.svelte';

  function handleClick() {
    alert('Button Clicked');
  }
</script>

<CustomButton on:click={handleClick}/>

// CustomButton.svelte 

<button on:click>
  Click me
</button> 

<style>
  button {
    background: #E2E8F0;
    color: #64748B;
    border: unset;
    border-radius: 6px;
    padding: .75rem 1.5rem;
    cursor: pointer;
  }
  button:hover {
    background: #CBD5E1;
    color: #475569;
  }
  button:focus {
    background: #94A3B8;
    color: #F1F5F9;
  }
</style>

নেস্টেড ম্পোনেন্ট এ 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}

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

//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}> 

রাইটেবল(writable)

import { writable } from 'svelte/store';

const count = writable(0);
count.subscribe(value => {
	console.log(value);
}); // logs '0'

count.set(1); // logs '1'
count.update(n => n + 1); // logs '2'

রিডেবল(readable )

import { readable } from 'svelte/store';
const time = readable(null, set => {
	set(new Date());
	const interval = setInterval(() => {
		set(new Date());
	}, 1000);
	return () => clearInterval(interval);
});

ডিরাইভড(derived)

import { derived } from 'svelte/store';
const doubled = derived(a, $a => $a * 2);

গেট(get)

import { get } from 'svelte/store';
const value = get(store);