Forem: Ashutosh

Currency Converter using Svelte

Ashutosh — Wed, 02 Mar 2022 13:21:12 +0000

In this article, we learn how to develop a simple currency convertor using Svelte. To start with let's create a project in Svelte

npx degit sveltejs/template CurrencyConv
cd CurrencyConv
yarn install

yarn dev

The app will run at http://localhost:8080

In the index.html under the public folder, add the Tailwind css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

    <script defer src='/build/bundle.js'></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
</body>
</html>

NOTE:- Adding Tailwind via CDN is not a bad idea but not recommended. If you want to integrate Tailwind properly then follow this article.

Next is to add a Component CurrencyConverter.svelte

In this we'll use https://currencyconverterapi.com/ API to convert the currency. Please register and get a Free API key in order to proceed.

<script>

    let amount = 0.00;
    let convertFrom = 'INR';
    let finalAmount = '';
    let convertTo = '';

    let currencyList = [
        {name : "USD", desc:"US Dollar"},
        {name:"EUR", desc:"Euro"},
        {name:"INR", desc:"Indian Rupee"}
    ];

    async function convertCurrency() {
        finalAmount = 0.00
    }

</script>



<div class="mt-4 rounded shadow border bg-red-50">

    <div id="currency-converter" class="px-4 py-4">

        <h1 class="font-bold text-3xl font-sans justify-center mb-10">
            Currency Converter
        </h1> <br />

        <span class="mt-10">Enter Amount:</span>

        <input class="px-2 py-2 focus:ring-indigo-500 focus:border-indigo-500 rounded sm:text-sm border-gray-300" type="number" name="currencyAmount" placeholder="Enter Amount" bind:value="{amount}" />
        <br /> <br/>

        <span>Convert From:</span>

        <select class="px-4 py-3 rounded-full" bind:value={convertFrom} >
            {#each currencyList as cl }
                <option value="{cl.name}">
                    {cl.desc}
                </option>
            {/each}
        </select>

        <span class="ml-10 mr-10">Convert To:</span>

        <select class="px-4 py-3 rounded-full" bind:value={convertTo} on:change="{convertCurrency}">

            {#each currencyList as cl }
                <option value="{cl.name}">
                    {cl.desc}
                </option>
            {/each}
        </select><br/><br/>

        <span> {amount} {convertFrom} equals {finalAmount} {convertTo}</span>

    </div>

</div>

We create input parameters and bind the values. And on the second select we bind an onChange function convertCurrency. Whenever we change the values of second select, it'll call a function.

Now we need to convertCurrency() function.

let curKey = convertTo + '_' + convertFrom;
        let url = "https://free.currconv.com/api/v7/convert?q=" + curKey + "&compact=ultra&apiKey=f3ff612a1eaaf011f3c6"

        await fetch(url).then( response => {
            return response.json()
        })
        .then( data => {
            let rate = data[curKey]

            finalAmount = rate * amount
        })

Here is the complete content of CurrencyConverter.svelte component.

<script>

    let amount = 0.00;
    let convertFrom = 'INR';
    let finalAmount = '';
    let convertTo = '';
    let yourApi = 'YOUR_API_KEY';

    let currencyList = [
        {name : "USD", desc:"US Dollar"},
        {name:"EUR", desc:"Euro"},
        {name:"INR", desc:"Indian Rupee"}
    ];

    async function convertCurrency() {
        finalAmount = 0.00

        let curKey = convertFrom + '_' + convertTo;
        let url = "https://free.currconv.com/api/v7/convert?q=" + curKey + "&compact=ultra&apiKey=yourApi

        await fetch(url).then( response => {
            return response.json()
        })
        .then( data => {
            let rate = data[curKey]

            finalAmount = rate * amount
        })

    }

</script>

<div class="mt-4 rounded shadow border bg-red-50">

    <div id="currency-converter" class="px-4 py-4">

        <h1 class="font-bold text-3xl font-sans justify-center mb-10">
            Currency Converter
        </h1> <br />

        <span class="mt-10">Enter Amount:</span>

        <input class="px-2 py-2 focus:ring-indigo-500 focus:border-indigo-500 rounded sm:text-sm border-gray-300" type="number" name="currencyAmount" placeholder="Enter Amount" bind:value="{amount}" />
        <br /> <br/>

        <span>Convert From:</span>

        <select class="px-4 py-3 rounded-full" bind:value={convertFrom} >
            {#each currencyList as cl }
                <option value="{cl.name}">
                    {cl.desc}
                </option>
            {/each}
        </select>

        <span class="ml-10 mr-10">Convert To:</span>

        <select class="px-4 py-3 rounded-full" bind:value={convertTo} on:change="{convertCurrency}">

            {#each currencyList as cl }
                <option value="{cl.name}">
                    {cl.desc}
                </option>
            {/each}
        </select><br/><br/>

        <span> {amount} {convertFrom} equals {finalAmount} {convertTo}</span>

    </div>

</div>

And now open the App.svelte and replace the contents with

<script>
    import CurrencyConverter from "./CurrencyConverter.svelte";
</script>

<main>
    <CurrencyConverter />
</main>

Now you are ready with your currency converter. Though its not perfect but not a bad starting point.

How onDestroy() lifecycle function works in Svelte?

Ashutosh — Thu, 17 Feb 2022 05:14:15 +0000

When we removed the component from DOM, the onDestroy() method is used. We need to call it before the component is removed from the DOM.

Let's create a new component, DateAndTimeComponent.svelte and add the following code.

<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Epoch Time</th>
        <th>Time</th>
    </tr>
    </thead>

        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>

</table>

We have only implemented the onMount() lifecycle function. If you are not aware of onMount then please visit the following article.
And in the App.svelte add the following:

<script>
    import DateAndTimeComponent from "./DateAndTimeComponent.svelte";

    let showComponent = false;
</script>

<main>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

If you visit the webpate http://localhost:5000 then you'll see an empty page because showComponent variable is false at the moment.

Lets add a button to show the component. onMount will only be called once when the component is loaded to the DOM.

In the App.svelte, add the following under the main tag.

<script>
....
..
..
..
</script>

<main>
    <button on:click={ () => showComponent = !showComponent }>Show Component</button>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

And in the DateAndTimeComponent.svelte we'll add the onDestroy lifecycle function.


<script>
    import { onMount, onDestroy } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });

    onDestroy( () => {
        console.log("Date Component removed")
    });

</script>

<table>
    <thead>

        <tr>
            <th>Date</th>
            <th>Epoch Time</th>
            <th>Time</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>
    </tbody>


</table>

Take a look at import { onMount, onDestroy } from 'svelte'

and

onDestroy( () => {
        console.log("Date Component removed")
    });

How onMount() works in Svelte?

Ashutosh — Mon, 24 Jan 2022 10:46:35 +0000

Often, a series of actions requires to perform when a component renders to DOM. For example, we need to call a function before updating or removing a component. To handle this, Svelte has built-in lifecycle methods like **onMount(), beforeUpdate, afterUpdate, onDestroy()**.

In this article, we learn about the onMount() lifecycle method of svelte. If you are a beginner, you must visit my old posts on Svelte.

Svelte creates, mounts, updates, and destroys a component. In short, every component has a lifecycle. The application makes and eventually destroys a svelte component.

The onMount() method executes after the component renders to the DOM.

Create a new file OnMountComponent.svelte, And add the following content

<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'https://jsonplaceholder.typicode.com/todos/'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
        <tr>
            <th>Task Id</th>
            <th>Task Name</th>
            <th>Status</th>
        </tr>
    </thead>

    {#each tasks as t}
        <tr>
            <td>{t.id}</td>
            <td>{t.title}</td>
            <td>{t.completed}</td>
        </tr>
    {/each}
</table>

We imported an onMount() function and we use a public url https://jsonplaceholder.typicode.com/todos/ to fetch the API. This is a public API for testing purpose, please do not abuse it.

Here we use an onMount() to get the data using the fetch API.

onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });

We'll discuss fetch API in different article.

Next is to import this component in the App.svelte.

<script>
    import OnMountComponent from "./OnMountComponent.svelte";
</script>

<main>
    <OnMountComponent />
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Thats all for now. In this article, we learn how to the use onMount() function in Svelte to load the component in DOM. See you in the next article.

How to do CSS like transitions in Svelte?

Ashutosh — Thu, 13 Jan 2022 06:23:28 +0000

Shorthand properties are the CSS properties, allowing us to set the values of multiple CSS properties.

The transition is also a shorthand CSS property that facilitates us to define the transition between two states of an element. Like fading/sliding an HTML element.

In Svelte, the transition is inbuilt. In this article, we learn about it in Svelte transitions.

The svelte/transition module contains the following animation: blur, fade, fly, slide, scale, draw and crossfade.

They are used with the, in, or out directives. The in and out directives works when the HTML element is added or removed from the DOM.

In our previous article, we discuss Animation in Svelte. If you haven't gone through the article, please visit this link.

We'll start with adding a new route animations/transition. If you are new here, before proceeding further you need to visit this link. To create a route, we need to create a new file animations/transition.svelte.

Add the following content in the transition.svelte:

<script>
    import { fade } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
{/if}

We import the fade transition and set the duration in options variable. Then we create a checkbox and bind it with the onclick and set the value true or false.

Similarly, we can add the other transitions like blur, draw, scale, slide etc.

<script>
    import { fade, blur, scale, slide } from "svelte/transition"

    let options = { duration: 1000 }
    let show = true;

</script>
<h1>Transition in Svelte.</h1>

<label>Click here to view transitions</label>
<input type="checkbox" on:click={() => show = !show} />


{#if show}
    <h1 transition:fade={options}>Fading Away.</h1>
    <h1 transition:blur={options}> Text to Blur </h1>
    <h1 transition:scale={options}> Text to Scale </h1>
    <h1 transition:slide={options}> Text to Slide </h1>
{/if}

See you in the next article.

How to handle in forms in Svelte?

Ashutosh — Sun, 02 Jan 2022 06:45:48 +0000

Forms! Forms! Forms!

Forms are an integral part of any web application. We can't imagine an application without forms. Generally, we use forms for

User registration
User login
Subscription
Contact Form
Adding/Updating/Removing any kind data to or from the database

In this article, we learn how to create an HTML form. And we also go through how to handle the form validation. This article will not cover the backend APIs required to Post the data into the application. It'll only cover the frontend part.

Lets take a look at this code quickly

<script>

</script>

<main>

    <form>
        <label for="first_name"> <strong> First Name </strong> </label>
        <input id="first_name" name="first_name" type="text"  />

        <label for="last_name"> <strong> Last Name </strong> </label>
        <input id="last_name" name="last_name" type="text"  />

        <label for="email"> <strong> Email ID </strong> </label>
        <input id="email" name="email" type="email"  />

        <br />
        <button type="submit">Save</button>
    </form>

</main>


<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Most of the code above is already familiar to anyone familiar with HTML. Currently, our form is doing nothing. In case if we click on the Save button. It'll merely submit the form without checking or validating any input parameters.

Let's handle the submit event first.

<script>
    const submitForm = () => alert('You submit the Form.');
</script>

<form on:submit|preventDefault={submitForm}>
    .....
 </form>

Take a look at this line,<form on:submit|preventDefault={submitForm}>. We bind the form with the on:submit handler.

We bind the form with the on:submit handler.

Now, what happens if we submit the form?
It'll show an alert, You submit the form

Please note, the event modifier |preventDefault. This is equivalent to adding the Event preventDefault method in the handler.

Let's add some validation on input parameters.

Validation

We have three fields in our Html form:

First Name
Last Name
Email Id

And here are the following validation rules:

First name, Last name, and Email cannot be null
First names and last names can only have alphabets.

We'll start with the null validations, eventually we'll add other validations. Let's add the following under the script tag.

<script>

    function isRequired(value) {
        return value != null && value !== ""
    }

    const submitForm = (event) => {
        const formData = new FormData(event.target)

        let error = false;

        for ( let field of formData ) {
            const [key, value] = field;

            if( !isRequired(value) ) {
                alert('Field ' + key + ' is required')
                error = true
            }

        }


        if ( !error ) {
            alert('You submit the form.')
        }

    };



</script>

At present, our application is showing the alerts whenever it caught the exceptions. This is not the correct way of displaying errors. We need to display the errors under the fields.

<script>

    let errors = {};

    function isRequired(value) {
        return value != null && value !== ""
    }

    const submitForm = (event) => {
        const formData = new FormData(event.target)

        let error_flag = false;

        for ( let field of formData ) {
            const [key, value] = field;

            if( !isRequired(value) ) {
                errors[key] = key + ' is required'
                error_flag = true
            }

        }

        if ( !error_flag ) {
            alert('You submit the form.')
        }

    };



</script>

<main>

    <form on:submit|preventDefault={submitForm}>
        <label for="first_name"> <strong> First Name </strong> </label>
        <input id="first_name" name="first_name" type="text"  />
        {#if errors.first_name}
            <p><small style="color: red"> { errors.first_name } </small></p>
        {/if}

        <label for="last_name"> <strong> Last Name </strong> </label>
        <input id="last_name" name="last_name" type="text"  />
        {#if errors.last_name}
            <p><small style="color: red"> { errors.last_name } </small></p>
        {/if}

        <label for="email"> <strong> Email ID </strong> </label>
        <input id="email" name="email" type="email"  />
        {#if errors.email}
            <p><small style="color: red"> { errors.email } </small></p>
        {/if}

        <br />
        <button type="submit">Save</button>
    </form>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

So far so good. Let's add the validation for valid first_name, last_name and email. We need to create two functions isNameValid() and isEmailValid().

Add the following functions under the script.

function isNameValid( value ) {
    return /^[a-zA-Z]$/.test( value )
}

function isEmailValid( value ) {
    return /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test( value )
}

And also

const submitForm = (event) => {
    const formData = new FormData(event.target)

    let error_flag = false;

    for ( let field of formData ) {
        ...
        ...

    // Validate First name and Last_name
        if ( key === 'first_name' || key === 'last_name' ) {
            if ( !isNameValid( value ) ) {
                errors[key] = key + ' can only have alphabets'
                error_flag = true
            }
        }

        // Valid Email
        if ( key === 'email' ) {
            if ( !isEmailValid( value ) ) {
                errors[key] = 'Invalid Email Id'
                error_flag = true
            }
        }
    }
    ...
    ...
}

If we notice carefully, then we found the regex we put can handle the null fields. So it is safe to remove the the isRequired() function. Let's refactor the code.

<script>

    let errors = {};

    function isNameValid( value ) {
        return /^[a-zA-Z]$/.test( value )
    }

    function isEmailValid( value ) {
        return /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test( value )
    }

    const submitForm = (event) => {
        errors = {}
        const formData = new FormData(event.target)

        let error_flag = false;

        for ( let field of formData ) {
            const [key, value] = field;

            // Validate First name and Last_name
            if ( key === 'first_name' || key === 'last_name' ) {
                if ( !isNameValid( value ) ) {
                    errors[key] = key + ' can only have alphabets'
                    error_flag = true
                }
            }

            // Valid Email
            if ( key === 'email' ) {
                if ( !isEmailValid( value ) ) {
                    errors[key] = 'Invalid Email Id'
                    error_flag = true
                }
            }

        }

        if ( !error_flag ) {
            alert('You submit the form.')
        }

    };


</script>

<main>

    <form on:submit|preventDefault={submitForm}>
        <label for="first_name"> <strong> First Name </strong> </label>
        <input id="first_name" name="first_name" type="text"  />
        {#if errors.first_name}
            <p><small style="color: red"> { errors.first_name } </small></p>
        {/if}

        <label for="last_name"> <strong> Last Name </strong> </label>
        <input id="last_name" name="last_name" type="text"  />
        {#if errors.last_name}
            <p><small style="color: red"> { errors.last_name } </small></p>
        {/if}

        <label for="email"> <strong> Email ID </strong> </label>
        <input id="email" name="email" type="email"  />
        {#if errors.email}
            <p><small style="color: red"> { errors.email } </small></p>
        {/if}

        <br />
        <button type="submit">Save</button>
    </form>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Now, if you try to submit the form with all valid parameters, then you'll get an alert alert('You submit the form.') on your screen.

Thats all for this post. In our next post, we'll discuss other ways of handling forms in Svelte.

Handle Svelte routes with Routify?

Ashutosh — Fri, 24 Dec 2021 08:27:12 +0000

Routing is an integral part of any web application.If you are a backend developer, you already have familiarity with the concept of routing on server-side applications. The routing allows the application to render the content based on the URL.

For Ex-

• GET /user returns the list of all users.

• GET /user/{id} returns the details of particular user.

Similarly, Client-side routing provides the ability to navigate between the pages of a web application. Client-side routers are the components that allow our application to render the correct view.

During this article, we learn how to add routing to our application. We'll use Routify to add the routing functionality.

There are two ways to add Routify in Svelte.

Create a routify app
Add routify to the existing Svelte application.

We'll cover both these approaches in this article.

Before proceeding further, we need to install page package

npm i -D @roxi/routify npm-run-all

Execute npm run dev or yarn dev

You'll see the below page.

Starter Template in existing Project

To install it in the existing project, execute

npm i -D @roxi/routify

In the package.json

"scripts": {
    "dev": "routify -c my-server",
    "my-server": "rollup -c -w",
    "build": "routify -b && rollup -c",
 }

And in App.svelte

<script>
  import { Router } from "@roxi/routify";
  import { routes } from "@roxi/routify/tmp/routes";
</script>

<Router {routes} />

You can know more about this at this link.

Understanding the Structure

Take a look at the src folder structure. In this folder, we found

pages (All the routes that we'll define is under this folder)
example (example routes created along with the project). It is absolutely safe to delete this folder. Infact delete it please :)
_layout.svelte (It may contain all the repeated files, like Navigation, CSS imports, Footer, etc.)
index.svelte ( It is the same as the "/" of the application ). If you open the file, it'll have the same content http://localhost:5000.

For the time being we'll ignore _fallback.svelte. We'll discuss it later in this article.

Adding Routes

To navigate the different parts of the application, we use routing.

First we'll add the Routes, where we know the end point of URL like /about, /contact, /profile, etc. We'll discuss the wildcards later.

Let's add a few pages to our app.

Under the pages, create a new file about.svelte and add the following content:

<script>
    import { metatags } from '@roxi/routify'

    metatags.title = 'About Us Page'
    metatags.description = 'Description of about us'
</script>

<h1>About Us</h1>

<p>Write something about your self.</p>

And then add contact.svelte, and add the following content.

<script>
    import { metatags } from '@roxi/routify'

    metatags.title = 'Contact Us Page'
    metatags.description = 'Description of Contact us'
</script>

<h1>Contact Us</h1>

<p>You can contact me at kukreti.ashutosh@gmail.com</p>
<p>Or you can also visit <a href="https://ashutosh.dev"> my website </a> </p>

If we visit the page /contact and /about, we can see the content that we just added.

Periodically, the web application requires nested routes like /auth/login or /auth/register. Let's build these pages. Please do not forget to add every file under thepagesfolder.

Under the pages, create a new folder auth and then login under the auth folder. Add index.svelte under the login folder. Add the following content

<script>
    import { metatags } from '@roxi/routify'

    metatags.title = 'Login Page'
    metatags.description = 'User Login Page'
</script>

<h1>Login Page</h1>

<form action="#">
    <input type="email" id="username" name="username">
    <input type="password" id="password" name="password">

    <input type="submit" value="submit">
</form>

If you visit the http://localhost.0x484c.com:5000/auth/login, you'll see the login page.

So far, so good. Let's do one more thing. Copy the content of index.svelte under the login folder and delete the folder. Yes, you read it right. **Delete the login folder**. Create a file login.svelte under the auth folder. And paste the content.

You'll notice /auth/login page is still working :)

So we learned index.svelte is a default file accessed by the routify under any folder. There is no right or wrong way to define the routes. It's upto the individual user.

It's fair to assume that sometimes we need dynamic URLs route. For ex /user/1 where 1 is the user_id. And it is not wise to build the routes for individual users. Routify svelte app, provides a dynamic way of creating routes.

If we create a file [user_id].svelte, svelte treats it as a dynamic route. And whatever the value we feed into it will be passed further to the routes.

Let's understand it with the help of an example.

Create a folder user under the pages and add the [user_id].svelte file under it.

<script>
    import { metatags } from "@roxi/routify";
    import { params } from "@roxi/routify"

    let user_id = $params.user_id;

    metatags.title = 'User Details page for ' + user_id
    metatags.description = 'User Description'

</script>

<h1>
    User Details
</h1>

<p> User Id is { user_id }</p>

And if you visit http://localhost.0x484c.com:5000/user/1 then you'll see the User Id is 1 on the webpage. When we change the user id from 1 to 2, It'll change dynamically on the webpage.

_layout.svelte ?

Until now, if we want to load another URL, We need to change it from the browser. There is no way to change the routes within the app. To achieve this, we need to add navigation.

At this point, _layout.svelte comes into the play. Open the file, and replace the content with the following code:

<script>
    import { isActive, url } from "@roxi/routify"
</script>
<html>
<head>
    <style>
        .active { font-weight: bold }
    </style>
</head>

<body>
    <div>
        <nav>
            <div><a href={$url('./')}>Home</a> </div>
            <div class:active={$isActive('./about')} ><a href={$url('./about')}>About</a> </div>
            <div class:active={$isActive('./contact')}><a href={$url('./contact')}>Contact</a> </div>
            <div class:active={$isActive('./auth/login')}><a href={$url('./auth/login')}>Login</a> </div>
        </nav>
    </div>
    <slot />

</body>
</html>

url is the helper, that creates links (href) from the paths. And isActive helper shows us the active route or path.

When we visit the application url, straightaway we now navigate to different urls. And isActive shows us the active path.

In this article, we learn about the routes in Svelte. See you in the next article.

What are Custom stores?

Ashutosh — Sun, 19 Dec 2021 16:25:25 +0000

What are Custom stores?

Typically in a store (Writable), there are three methods:

subscribe()
set()
update()

As long as we implemented the subscribe() method, the javascript object is a store.

A store provides reactive data that can change over time. What if we want to create stores that restrict updates? It makes sense on large web/mobile applications, where we put restrictions on other components to overwrite the store variables. In other words, we allow store variables to update within the store only.

To create a custom store:

Create a writable store in a function
Return subscribe() function on an object.

Let's assume we have a shopping cart, and we need to add or remove items from there. In this example, we only increase or decrease the count of the cart. We start with a simple prototype and then move to more complicated in the upcoming articles.

Create a new file shoppingcart.js under the src directory.

import { writable } from 'svelte/store';

function addOrRemoveCartItems() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        add: () => { update(n => n + 1) },
        // Shopping Cart doesnot contain Negative Items
        remove: () => { update(n => n <= 0 ? 0 : n - 1 ) },
        resetCart: () => { set(0) }
    };
}

export const items = addOrRemoveCartItems();

And in the App.svelte

<script>

    import { items } from "./shoppingcart";

</script>

<main>
    <p> Custom Store Example. </p>

    <h1> Total Cart Items { $items }</h1>

    <button on:click={ items.add }> Add to Cart </button>
    <button on:click={ items.remove }> Remove from Cart </button>
    <button on:click={ items.resetCart }> Remove All Items </button>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Refresh the page and it'll look like this

In this article, we learn about custom stores. See you in the upcoming articles.

How to configure Tailwind with Svelte?

Ashutosh — Tue, 14 Dec 2021 06:20:57 +0000

CSS frameworks like bootstrap or Material-UI, are excellent tools for developing web applications. However, when we visit the sites, they suffers from identical syndrome.

To solve this identical syndrome, we have Tailwind CSS, a utility-first framework.

It provides low-level helper classes.
We can quickly implement custom designs
It does not force us to use pre-built components.
Utility classes provide the freedom to outline the site as per the design.

Pre-Requisite

Before proceeding further, your system must have:

The latest version of node installed
Install yarn or npm on the system
Install npx on the system

Create a Svelte Project

To create a Svelte Project, we need to install degit using yarn

yarn add global degit

Now, we are ready to create the project in Svelte.

npx degit sveltejs/template sveltetailwind  

# Change the directory
cd sveltetailwind

Install Tailwind, PostCss and AutoPrefixer

In order to install tailwind, we'll use yarn. Though you're free to use npm

 yarn add tailwind postcss autoprefixer

Configuration

Create a new file postcss.config.js under the sveltetailwind directory. And add the following content

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Create another file tailwind.config.js

module.exports = {
    plugins: [
    ],
    purge: {
        content: [
            "./src/*.svelte", "./src/**/*.{html,js,svelte}"
        ],
    },
};

Next step is to create the css folder under the public and add the following:

tailwind.css under the css folder
app.css under the css folder

In thetailwind.css file add the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Modify package.json

Open the package.json file and modify the content under the script tag.

  "scripts": {
    "watch:tailwind": "postcss public/css/tailwind.css -o public/css/app.css -w",
    "build": "rollup -c",
    "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\"",
    "start": "sirv public --no-clear --single --dev --port 5000 --host 0.0.0.0"
  },

Next is to add <link rel='stylesheet' href='/css/app.css'> in the index.html file.

Now you are ready to use tailwind.css in your svelte project.

In order to to test if the tailwind is working on our svelte project, add the following code in App.svelte (under the main tag) file.

<button class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-6 px-8 rounded-md uppercase" type="submit">Submit</button>

When you visit the homepage, it'll look like the below screenshot

That's all for this. See you in the next one.

What are Stores in Svelte?

Ashutosh — Wed, 08 Dec 2021 05:29:20 +0000

In large applications, passing the state of the application through the component is cumbersome. Often, several Svelte components require the same data (For example, notification or list of cart items). To achieve this feat, Svelte has stores. You can relate it (Svelte stores) similar to Redux in React.

In this article, we learn about:

Stores
Types of stores a. Writable stores b. Readable stores c. Derived stores

What you should know before further reading?

Basic Javascript
Have a basic knowledge of Svelte
Know how to get started with Svelte
Adding components in Svelte

What is Store?

A store is an object that holds data and gains admittance to that data from different parts of the application. Svelte stores are a built-in functionality that facilitates an elegant way to manage the state of the application. They're reactive, which means that they'll update components whenever the data changes across the application. Inshort, stores are global data that hold values or an object. Components subscribe to stores and receive notifications when their values changes.

Writable Stores

Every store has a subscribe method that returns a function allow us to unsubscribe.

Writable stores allow components to modify their data. It also has set and update method addition to the subscribe method.

Let's say we have login file that has login key and we want to use it in our app. Create a file login.js under the src folder.

import { writable } from "svelte/store";

export const loginKey = writable('something-secret-is-the-login-key')

In the above code, we define a loginKey variable and put it under the writable(). It is just to define that our loginKey variable is writable in nature.

And then create a file WritableStoreComponent.svelte under the src folder and add the following code.

<script>
    import { loginKey } from './login.js'

    let login_key;

    loginKey.subscribe(value => {
        login_key = value
    });
</script>

<div>
    <h2 style="color: darkgreen"> { login_key }  </h2>
</div>

In this file, we simply imported the loginKey from the login.js javascript file. We already discussed, to every store has the subscribe function. We use the subscribe function and assign the value to login_key variable. And then we render the variable under the <div> element.

Last thing, we need to do is in the App.svelte

<script>

    import WritableComponent from "./WritableComponent.svelte";

</script>

<main>
    <p> Writable Store Example. </p>
    <hr/>

    <div>
        <br />
        <WritableComponent />
    </div>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

If you go the web page, we'll see.

We see the secret key that we defined in the login.js file. But this is not the example of the writable store. In general login keys has expiration date and it needs to be updated from time to time basis. How we can do that?

We'll use set method to update the loginKey variable. Add the following line loginKey.set('updated-something-secret-login-key') to the WritableStoreComponent and you'll see the updated key on the webpage.

<script>
    import { loginKey } from './login.js'

    let login_key;

    loginKey.subscribe(value => {
        login_key = value
    });

    loginKey.set('updated-something-secret-login-key')

</script>

<div>
    <h2 style="color: darkgreen"> { login_key }  </h2>
</div>

Readable Store

As the name implies, it's a read-only store. In Svelte, other components cannot update the readable stores. Unlike writable stores, there's no set() or update() method. We must initialise the value of the Readable store values at the time of creation.

In short, we can say that it is an abstraction around writable stores in which set() and update() method are hidden from the enduser.

Let's create another file date.js under the src folder.

import { readable } from "svelte/store";

export const date = readable(0, (set) => {
    const interval = setInterval( () => {
        set( new Date() );
    }, 1000 );

    return () => clearInterval( interval )
});

Here is a simple example, where we can set the date in the store. Please take a look at readable() function. It looks complicated at first look but actually it is not.

As it's a readable store, we can't change the value. We just use it in our App.svelte file. Add the following code just below the <WritableComponent>.

// Under the script
import { date } from "./date";

// Under the main

<hr />

    <p> <strong> Readable Store Example. </strong> </p>
    <hr/>

    <div>
        <br />
        <div>
            { $date.toLocaleString() }
        </div>
    </div>

So the complete code is

<script>

    import WritableComponent from "./WritableComponent.svelte";

    import { date } from "./date";

</script>

<main>
    <p> Writable Store Example. </p>
    <hr/>

    <div>
        <br />
        <WritableComponent />
    </div>

    <hr />

    <p> <strong> Readable Store Example. </strong> </p>
    <hr/>

    <div>
        <br />
        <div>
            { $date.toLocaleString() }
        </div>
    </div>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Visit the page and we'll see

Derived Stores

The Derived store values depend on other stores. They'll update themselves when the value they are derived from changes. They always listen to other stores and then return to a computed value as a readable store.

We'll modify the code of the date.js and import the derived function. And then we calculate the total time spends on that page.

import { readable, derived } from "svelte/store";

export const date = readable(0, (set) => {
    const interval = setInterval( () => {
        set( new Date() );
    }, 1000 );

    return () => clearInterval( interval )
});

const startDate = new Date()

export const totalTime = derived( date, $time => {
    return Math.round(( $time  - startDate ) / 1000 )
})

You'll find this example in the Svelte Docs also but you need to add return before Math.round(). Otherwise it will not work.

And then in the App.svelte

// Under script
import { date, totalTime } from "./date";

// Before </main>
<p> <strong> Derived Store Example. </strong> </p>
    <hr/>

    <div>
        <br />
        <div>
            Total Seconds { $totalTime }
        </div>
    </div>

Here we can see the Total Seconds added from the derived stores. In this article we see, how convenient it is to use the stores in Svelte. They are fairly simple to use and provides great flexibility to share the data between the components. There is one more type of stores and i.e. is Custom Stores, we'll cover it separately in our next article.

How to use context in Svelte?

Ashutosh — Wed, 01 Dec 2021 10:09:57 +0000

Let's think of a scenario where we have three components A, B, and C. We want to define a variable or an object in Component A. And we want, It to be accessible from Component C. In our previous articles, we discussed different methods to pass the props data to the parent component. In this article, we'll discuss the context method in svelte.

Svelte passes parent component data to its child components. The getContext and setContext functions can access associated data with a key on the context. Changes made to context values are only valid for the current child component. Parent component values are intact.

Let's say a user logged in and, in another component, we want to show the user details (the email and login status in another child component). In this, it is a good idea to use the Context API instead of passing the props. (Probably a store will be more appropriate but, it is out of scope for this article).

In the App.svelte

<script>

    import { setContext } from 'svelte'

    const userDetails = { username: 'abc@example.com', islogin: 'yes' };

    setContext('user-details', userDetails )

    import ContextComponent from "./ContextComponent.svelte";

</script>

<main>
    <p> Context Example. </p>
    <hr/>

    <div>
        <br />
        <ContextComponent />
    </div>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

If we check the setContext{} function, we'll see something similar export declare function setContext<T>(key: any, context: T): void;

The setContext function accept two arguments:

Context Key
Value or variable or an object that we want to send all of the child application components.

setContext('user-details', userDetails ) we set the context key as user-details and pass userDetails object as second argument.

Svelte provides getContext function to retrieve the setContext key. Create another component ContextComponent.svelte and add the following code:

<script>
    import { getContext } from 'svelte'

    const userDetails = getContext('user-details')

</script>

<div>
    <div>
        <strong>User Name:</strong> { userDetails.username }
    </div>

    <div>
        <strong>User Login Status:</strong> { userDetails.islogin }
    </div>

</div>

export declare function getContext<T>(key: any): T; how the getContext function is defined in svelte.

It only accepts one argument (key). That we defined in our App component( user-details ) in this case.

If you go to the web page, you'll see:

Thats all about Context in Svelte. See you in the next article.

Comprehensive guide of Event Handling in Svelte

Ashutosh — Mon, 22 Nov 2021 18:14:25 +0000

Using the on: directive, Svelte listens for any event on an element. Customised events convey data between child and parent components. Components in Svelte can listen for DOM and custom events. The on:event-name directive specifies how an event will be handled. It's worth noting that the term on comes after a comma and the name of the event. Its value is the function that will be called after the event has been dispatched. The name of the event could be either DOM or custom. The specified function receives an event object.

In this article, we learn about the event handling. Let's proceed.

Events are objects that serve as communication units between an emitter and the listeners. In short, any activity that happens on the HTML web page is an event. And with the help of JavaScript (Svelte in this case), we can handle these events. For Ex- Clicking a button, Submitting a form is one of the few examples of Events

Example of simple Event:

<script>

    function eventClickMe() {
        // Handle something
    }
</script>

<button on:click={eventClickMe}>Click Me</button>

And in the App.svelte

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

<main>
    <p> Event communication. </p>
    <hr/>

    <EventComponent />

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

When you load the application, it will look like the below screenshot

You can see a button, but it will not do anything. Let's add an alert only to check if our events are working correctly.

<script>

    function eventClickMe() {
        alert('I am clicked')
    }
</script>

<button on:click={eventClickMe}>Click Me</button>

How about this 'Inline Event Handler'.

<button on:click={ e => { alert('I am clicked') } }>
    Click Me
</button>

Here is an alternate way of defining the Inline Event Handler using the anonymous function on:click={ e => { alert('I am clicked') } }

Event Dispatcher

Event Dispatching allows developers to add logic to the Svelte application. Using an event dispatcher, we can dispatch events and communicate within the components. Components can forward events by creating and using an event dispatcher.

In the EventComponent.svelte

<script>

    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher()

    function eventClickMe() {
        dispatch('message', {
            text: 'Pass to main component'
        });
    }
</script>

<button on:click={eventClickMe}>
    Click Me
</button>

The data given as the second argument to the **dispatch** function is the detail property of this object. Additional parameters supplied to dispatch are not taken into consideration.

And in the App.svelte

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

    function handleMessage(event) {
        alert(event.detail.text)
    }

</script>

<main>
    <p> Event communication. </p>
    <hr/>

    <EventComponent on:message={handleMessage}/>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Only the parent component receives these events. They don't float to the top of the component hierarchy by themselves. The on:directive is used by parent components to listen for events from child components.

Event Modifiers

We can modify the events in svelte using these modifiers. Following are the modifier that we can use

once: remove the handler after the first time it runs.

In the EventComponent.svelte, modify the button with the below code.

<button on:click|once={eventClickMe}>
    Click Me
</button>

You'll notice that, when you try to click the button second time, it'll not show any alert.

preventDefault: calls e.preventDefault() before running the handler.

When used with forms, it'll prevent the default submitting of form.

stopPropagation: calls e.stopPropagation(). Prevents the propagation of the events within the same handler.
passive: improves scrolling performance.
capture: fires the handler during the capture phase not on the bubbling phase.
self: only trigger handler if event.target is the element itself.

Event Forwarding

We already discussed, When we fire the event only the parent component receives it. It'll not go to hierarchy itself. However, sometimes, we need the events to be used by other parent components. We need to nest the events further up in hierarchy.

Create a new file FirstEventComponent.svelte, modify the button with the below code.

<script>

    import { createEventDispatcher } from 'svelte'

    const dispatch = createEventDispatcher()

    function eventClickMe() {
        dispatch('message', {
            text: 'Pass to main component'
        });
    }
</script>

<button on:click|preventDefault={eventClickMe}>
    Click Me
</button>

Create a another file SecondEventComponent.svelte, modify the button with the below code.

<script>
  import FirstEventComponent from './FirstEventComponent.svlete';
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher();

  function forward(event) {
    dispatch('message', event.detail);
  }
</script>

<FirstEventComponent on:message={forward} />

And in the App.svelte

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

    function handleMessage(event) {
        alert(event.detail.text)
    }

</script>

<main>
    <p> Event communication. </p>
    <hr/>

    <SecondEventComponent on:message={handleMessage}/>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Thats all about the events. Hope you like it. See you in the next article.

A guide of Slots in Svelte

Ashutosh — Sun, 07 Nov 2021 14:01:17 +0000

As per the developer.mozilla.org, The HTML element—part of the Web Components technology suite - is a placeholder inside a web component that you can fill with your markup, which lets you create separate DOM trees and present them together.

It is represented as .

In Svelte, we use <slot> for communication between the components. The <slot> help create reusable UI components.
In this article we learn how to use svelte and create the reusable components with examples.

Create a file SlotComponent.svelte and update the following code in it:

<div class="card">
    <slot name="name"></slot>
    <slot name="location"></slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

And in the App.svelte

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

<main>
    <p> Slot communcation. </p>
    <hr/>
    <SlotComponent>
        <div slot="name">Michael Foo</div>
        <div slot="location">Lives in Mountain</div>

    </SlotComponent>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Open the page, it will look like below screenshot.

What happens if we duplicate the slot in the Parent component. Let try to update it

<div class="card">
    <slot name="name"></slot>
    <slot name="name"></slot>
    <slot name="location"></slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

On the webpage, you'll see the name Michael Foo appears twice :).

Now, you can delete it. It is just for testing the slots.
Sometimes, when we are loading the slots dynamically (Ex- using the fetch API). We need to show some message, while our application receives the actual data. This is called as fallbacks.

In the SlotComponent.svelte file,

<div class="card">
    <slot name="name">
        <h4>Loading user name ...</h4>
    </slot>
    <slot name="location">
        <h4>Loading user location....</h4>
    </slot>
</div>

<style>
    .card {
        width: 400px;
        border: 1px;
        border-radius: 2.5px;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        padding: 1em;
    }
</style>

And in the App.svelte

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

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent />

</main>

And on the webpage, you'll see

Fragments

The <svelte:fragment> element allows us to place the content in a named slot. Fragments have no external dependencies and are independent of DOM elements.

Let's say, we have a blog and we want to show the title and date of the blog.

<div class="card">
    <slot name="blog">Title of the Blog</slot>
    <slot name="body"></slot>
</div>

In the App.sevelte

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent>
        <svelte:fragment slot="date">
            <hr />
             <h6>{ date }</h6>
        </svelte:fragment>
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

On the webpage, you'll see the content just like the below screenshot.

Data through Props

In slots, we can also pass the data using the props. There is a directive let: reserved for this operation.

In SlotComponent.svelte

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>

    <SlotComponent let:blogs>
        {#each blogs as blog}
            <h4>{blog.title}</h4>
            <p>{blog.body}</p>
        {/each}
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

We created a blog object, though we can get the blog object using the ajax query. In the App.svelte

<script>
    import SlotComponent from './SlotComponent.svelte';
    let date = new Date()
</script>

<main>
    <p> Slot communcation. </p>
    <hr/>
    // let:blogs is the reserved keyword for this
    <SlotComponent let:blogs>
        {#each blogs as blog}
            <h4>{blog.title}</h4>
            <p>{blog.body}</p>
        {/each}
    </SlotComponent>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Refresh the webpage, you can see

Thats all for slots. In the Next article, we learn about other ways of passing the data to the components. See you in the next tutorial.