ডেভসংকেত

এসভেল্ট

এসভেল্ট (Svelte) হচ্ছে একটি জাভাস্ক্রিপ্ট ইউজার ইন্টারফেস তৈরির ফ্রেমওয়ার্ক, যেটি অন্যান্য UI ফ্রেমওয়ার্ক থেকে ভিন্ন, কেননা এটি ডেভলাপমেন্টের সময় আপনার কোডকে ব্রাউজারের জন্য তৈরি করে নেয়।

কন্ট্রিবিউটর

  • msisaifu

শেয়ার করুন

শুরু

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

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর