DEV Community: Eternal Dev

5 ways to concatenate string in Golang with reasons

Eternal Dev — Sat, 29 Oct 2022 05:16:06 +0000

String manipulation has always been a common task when you write code. You will understand the simple and best performing methods to do string concatenation in this post. In Go, string is a read-only slice of bytes and so you need to use the best method to perform the concatenation based on the situation.

Reasons to choose a method

I am going to cover the primary reason for the different methods. You can choose which method to use based on your situation.

Methods	Reason
Simple join using +	Simple concatenation of one or two small strings
strings.Builder	Efficient concatenation of large strings / inside loops
bytes.Buffer	Efficient concatenation of large strings / inside loops / reading from files
fmt.Sprint	Simple concatenation when using different data types
strings.Join	Concatenation of slice of string data types.

Golang string concatenation using + operator

A simple way to join two strings is by using the + operator. You can also use the += operator to do simple string joins.

This way is not the most performant solution but this will get the job done if the concatenation is for small strings which are not inside the loops

package main

import "fmt"

func main() {
    str1 := "Strings are "
    str2 := "Immutable in Go"

    fmt.Println(str1 + str2)
    // OUTPUT: Strings are Immutable in Go

    str3 := str1 + "(updated) "
    str3 += str2

    fmt.Println(str3)
    // OUTPUT: Strings are (updated) Immutable in Go

}

Output

Strings are Immutable in Go
Strings are (updated) Immutable in Go

Golang string concatenation using strings.Builder

If you want to do the string join inside the loop / do the join for a large string, you can use the more performant string.Builder methods to join multiple strings.

This was introduced from Go 1.10+ and now is the recommended way to perform optimized string manipulations.

package main

import (
    "fmt"
    "strings"
)

func main() {

    var strBuilder strings.Builder

    for i := 0; i < 10; i++ {
        strBuilder.WriteString("Testing String Buffer\n")
    }

    fmt.Println(strBuilder.String())
}

There are multiple methods that will let you add bytes or runes to the string builder. Check out the following page for more details on Golang string builder.

Output

Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer

Golang string concatenation using bytes.Bufferbytes.Buffer

Similar to the previous methods of joining strings, this will also let you do the join using bytes. This method is also a performant option when compared to the simple + operator. This method is preferred when you are reading a file and want to write the output to a string.

package main

import (
    "bytes"
    "fmt"
)

func main() {

    var strBytes bytes.Buffer

    for i := 0; i < 10; i++ {
        strBytes.WriteString("Testing String Buffer\n")
    }

    fmt.Println(strBytes.String())
}

Similar to the previous string builder method, bytes.Buffer also has some additional methods which can be useful. For more details on bytes.Buffer, check out this page - Golang bytes buffer

Output

Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer
Testing String Buffer

Golang string concatenation using fmt.Sprint()

If you want to do the string join while printing to the console or writing to another string, this method using the fmt package will be useful. Also you can combine different data types easily using the fmt.Sprintf method

package main

import "fmt"

func main() {
    str1 := "Strings are "
    str2 := "Immutable in Go"

    str3 := fmt.Sprint(str1, "(updated) ", str2)

    fmt.Println(str3)
    // OUTPUT: Strings are (updated) Immutable in Go

    numValue := 342
    str4 := fmt.Sprintf("%s(updated) %s %d", str1, str2, numValue)

    fmt.Println(str4)
    // OUTPUT: Strings are (updated) Immutable in Go 342
}

Output

Strings are (updated) Immutable in Go
Strings are (updated) Immutable in Go 342

Golang string concatenation using strings.Join()

When you have a string slice and want to concatenate them, you can use this method.

package main

import (
    "fmt"
    "strings"
)

func main() {
    strArray := []string{"Strings are", "Immutable in Go"}

    strJoined := strings.Join(strArray, " ")

    fmt.Println(strJoined)
}

Output

Strings are Immutable in Go

6 Reasons for developers to consider Svelte for your next project

Eternal Dev — Wed, 28 Sep 2022 13:27:57 +0000

In a world where each month seems to bring a new javascript framework why should you care about Svelte is a question lot of people will have. We also had that question when we first discovered Svelte. Let's look at the various things you can do with Svelte.

Svelte has been there for some time now and has come to major version 3 at the time of this writing. It has really evolved a lot over these years mainly improving the developer experience and focusing on simplicity.

Disclaimer

We are giving our opinion in this post and also we believe there is no silver bullet with respect to Javascript frameworks. So take this post with a grain of salt and if you like the javascript framework which you know, then you can use that as long as it gets the job done for you.

Reason 1 - Svelte is not a runtime framework

The top reason according to us where Svelte stands out is Svelte does most work during compile time rather than runtime frameworks like React

Most of the frontend framework seems to provide a layer of abstraction on top of javascript and runs in the browser which means you need to load the framework along with your app. Svelte says why do we need extra code, I will compile your code during development and give you the exact javascript needed for your app. That is the reason Svelte is regarded as a compiler time framework.

So in summary, after you do the Svelte build, you get an optimized javascript that you can run in the browser without any other dependency. Since we are removing the dependency, Svelte apps tend to be smaller to download for the browser than their counterparts which makes your app faster.

Reason 2 - Svelte State management

State management is a concept in which all frontend frameworks try to make their own approach to tackle that issue. In my opinion, Svelte makes it very easy for beginners to understand when it comes to state management. It is as simple as creating a variable and any change to that variable can be done by just assigning a new value. Svelte takes care of rendering that new state change to the browser.

let isOpen = false;

const toggleOpen = () => {
    isOpen = true;
}

That's it even if you have used the variable multiple times on this page, Svelte handles the rendering and updating of the browser. This might seem like a small thing with this simple example but this will save a lot of time in complicated apps.

Reactivity seems to be very much inbuilt into the Svelte apps. You can make one variable depend on other variables and have both the update of the variable by just assigning a new value to the first variable

let number = 3;
$: squared = number * number

const changeNum = () => {
    number = 6;
}

This makes the other variable updated with the new value. This is an excellent feature as you can clearly define dependencies in your code and be sure that the state is always accurate instead of manually calling the function to update all dependencies.

Reason 3 - Svelte Stores

Svelte also has an inbuilt store for more complex state management solutions. Reactivity of the apps is taken to the next level with this store concept.

You can define a store in your application and then all the components which need these values can just subscribe very easily to these stores. Any update to the store easily gets updated in all the components which make it an ideal solution when you have lots of components and they are dependent on a single source of truth.

import {writable} from 'svelte/store';

export const notificationsCounter = writable(0);

Once you have defined your variable as writable in one file, you can then import that store variable into another file and update the variable or listen to the changes in the variable.

You can use the below code to keep your UI in sync with the store variable. Using the $ syntax lets Svelte know that it needs to subscribe and unsubscribe to the store variable.

<script lang="ts">
  import { notificationsCounter } from './store';

</script>

<main class="min-h-screen bg-gray-200">
  <div class="flex items-center justify-between bg-black text-white p-5">
    <p> Notification count - {$notificationsCounter} </p>
  </div>
</main>

This reduces the complexity of state management and is very convenient for smaller-scale applications which do not need very complex state management solutions.

For a more in-depth tutorial, you can view the following page

https://www.eternaldev.com/blog/introduction-to-svelte-stores/

Reason 4 - Svelte promises syntax

Developing a modern application usually involves a lot of API network calls and asynchronous programming to handle the loading and error state in the UI. What if, Svelte makes it easier for you to do this as well? Svelte provides a convenient syntax to show the different states of the asynchronous promise calls.

<script>
    const getRandomUser = async () => {
        var response = await fetch('https://randomuser.me/api/');
        var result = await response.json();
        return result;
    }

    let userPromise = getRandomUser();
</script>

<h1>Random User name</h1>

{#await userPromise}
    <h2>Loading....</h2>
{:then users}
    <h2>{users.results[0].name.first}</h2>
{:catch err}
    <h2>Error while loading the data</h2>
{/await}

We have the option to define their states in the await syntax to handle the loading, error, and success state.

UI for each of the states is neatly packed in HTML rather than making multiple javascript promise callbacks and tracking the loading state.

As developers, we might be lazy to implement the error and loading state for some API and this option might just be the answer. Still, developers like me are lazy and might not do even this :P

For more details tutorial, you can check this post - https://www.eternaldev.com/blog/how-to-make-an-api-call-in-svelte/

Reason 5 - Svelte transitions and animation

Animation in your User Interface gives polish to your app and provides good feedback for the user when they are performing any action. This can be daunting to implement when using Javascript frameworks, but Svelte has some convenient default animations to start with.

It is also really customizable to create user-defined transitions which are unique to your application

import { fade, fly } from 'svelte/transition';

<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
    <h1>Your awesome block </h1>
</p>

Svelte has in and out attributes that you can set which are played when the element comes in to view and goes out of view respectively.

We have a few inbuilt options for transitions to choose from. So we can import them from the svelte/transition and use them to add much-needed transition to your app.

Reason 6 - Svelte Performance and size

We have talked a lot about the different features of Svelte and all of that doesn't matter if the performance takes a hit. The good news is that it doesn't. Some of the veteran readers would have noticed that since there is no extra framework code to be downloaded by the user, your app code is smaller and loads faster.

Since we are going to ship only minified javascript after the build, the performance is usually very good and it is comparable to plain javascript performance in the browser.

If you are interested in learning more about Svelte from the basics, you can have a look at this free course

https://www.eternaldev.com/blog/svelte-basics-introduction-to-svelte

Drawbacks

Svelte does have some drawbacks which we have observed. These are some of the things which we have noticed while working with Svelte applications.

Package ecosystem

The main drawback right now is that the package ecosystem for Svelte is not as mature as the other popular frameworks like React, Angular, or Vue. This can be resolved over time depending on the adoption of Svelte by many developers but this is one of the things to consider if you are planning to shift your critical application to Svelte.

One more framework to learn

This depends on your preferences but for most people, it will be like learning one more new framework and a bunch of syntax to remember. We can overcome this by doing some small projects and prototypes which can be used for understanding the framework rather than producing production-ready code.

Have you tried Svelte or consider trying Svelte? Let us know in our Discord. You can also share your feedback about this post and we can have a discussion on the whole javascript ecosystem.

How to make a landing page with Astro, HTML, CSS

Eternal Dev — Sat, 17 Sep 2022 05:40:02 +0000

What is Astro

Astro is a meta-framework for building websites with your favorite frontend frameworks like Svelte, React, Preact and others. The key selling point of Astro is the way it approaches the static site generation in which it ships zero javascript to the browser.

It can do more than just static site generators using the island architecture which means that you can have SEO-friendly content when needed and also have interactive elements to spice up your webpage.

If the above two sentences are full of just jargon that you are not able to follow, don’t worry. Astro is great for most of the websites which is not updated on an hourly basis. It is specifically good if you want to build landing pages/product pages that need to be indexed by search engines.

We will look into the specifics as we start building the application

What are we building

We are going to build a simple landing page for a product that contains a Hero component at the top and a list of features below that.

Prerequisites

You will need a basic understanding of HTML and CSS
You will need to have Node js installed in your system

Initialize the Astro project

You can start with an Astro project using the following command. It gives a series of prompts that will guide you into creating your project

npm create astro@latest

Where would you like to create your new project? - Provide the path of the folder and the project name - astro-landingpage

Which template would you like to use? › Just the basics

The rest of the questions are straight forward and answer them with the below options

Would you like to install npm dependencies? (recommended) … yes
Would you like to initialize a new git repository? (optional) … yes
How would you like to setup TypeScript? › Strict (recommended)

Now the Astro project is ready to get started. You can see in the package.json file we have just one dev dependencies like below

{
  "name": "@example/basics",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "devDependencies": {
    "astro": "^1.1.1"
  }
}

Since it is under devDependencies, astro is not shipped with the build which means that we get only the static HTML needed for our application.

We also have a few scripts in the package.json file which correspond to the following

dev - Running the development server locally
start - Same as the Dev script
build - Building the project. This will generate dist folder which contains the build for running the website
preview - Used to preview the build in the dist folder locally.
astro - Can be used to run other Astro commands

Astro Project structure

Astro has an opinionated folder structure for your project which means that there are specific folders that you need to know about to get your job done easily.

Directories and Files

src/* - Main source code
public/* - Assets (Images, icons, etc)
astro.config.mjs - Config file for Astro

Learn more about the project structure in the below official link

https://docs.astro.build/en/core-concepts/project-structure/

Building the layout

Layouts are part of Astro which makes it easy for the developer to reuse some of the structure which is needed for most applications. If you have a Navbar, Header, and Footer component on all your pages, you can use Layout to add that component and use that layout on all the pages.

So when you want to change something in your layout, all the pages which use that layout are automatically changed.

So let’s define our layout for this application. This is going to be simple for this design since we can have the Footer in the layout and the rest of the content will be on the page.

Let’s build that in code. I am going to reuse the already present Layout.astro files in the layouts folder. You can choose to create a new file if you like.

---
export interface Props {
    title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <slot />
        <Footer/>
    </body>
</html>

<slot> tag will be replaced by the actual HTML of your page when you are using this layout file.You can learn more about layout in the following link

https://docs.astro.build/en/core-concepts/layouts/

Building the Footer component with Astro

Let’s create a new file called Footer.astro and we can add simple footer details on that component. We will not go into detail about the HTML component used but you can see the overview of the file below.

<div class="footer">
    <div class="footer-col">
        <b>Site Map</b>
        <br/>
        <a href="/home">Home</a>
        <a href="/about">About</a>
        <a href="/pricing">Pricing</a>
    </div>
    <div class="footer-col">
        <b>Address</b>
        <br/>
        485 Essex Court<br/>
        South Burlington<br/>
        Mobile No:  802-505-1847
    </div>
    <div class="footer-col">
        <b>Social</b>
        <br/>
        <a href="/">Facebook</a>
        <a href="/">Twitter</a>
        <a href="/">Instagram</a>
        <a href="/">Reddit</a>
    </div>
</div>

<style>

    .footer{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        gap: 50px;
        padding: 4rem 2rem;
        background-color: #F9EBC4;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
    }
</style>

We have a simple three-div structure and using flexbox, we can align them as three columns using the CSS in the <style> tag

The CSS in the <style> tag is scoped locally which means that it won’t affect the other components. This is a neat feature that requires some external packages and solutions in other frameworks. It works out of the box in Astro

The result will look like below image. Since we are yet to remove the content of index.astro default file, you will get the default page with the footer

Building the Content page

Let’s start by building the content page now. Clear all the contents of index.astro file

Updating the font family

Based on the design, we are going to use this font family from Google Fonts - Rowdies.

You can add the link to the font in the Layout.astro file

<html lang="en">
    <head>
        ...
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300;700&display=swap" rel="stylesheet">
    </head>


</html>
<style>
    ....
    html {
        font-family: 'Rowdies', cursive;
    }

</style>

You can these snippets directly from the Google Fonts website. We are adding the <link> tag to the <head> to download the font from the Google fonts. Then we add the font-family to the html in order to set the font for the whole page.

Building the Header in Astro

Let’s create the header of the design in Astro file. Create a new folder inside the component called landingpage and add the home page components to that folder

So create a file name herosection.astro inside src/components/landingpage

<div class="hero-section">
    <div>
        <h1>Managed Farmland</h1>
        <p>Start owning your farmland and leave the hard part to us</p>
        <button>Start Now</button>
    </div>
    <img src="hero-image.svg" width="400px"/>
</div>

<style>
    .hero-section {
        margin: 1rem;
        padding: 4rem;
        border-radius: 2rem;
        background-color:#F9EBC4;
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .hero-section div {
        flex: 1
    }

    .hero-section div p {
        margin: 2rem 0px;
    }
</style>

There are a couple of things to note in this component

Adding an image to Astro - You can add the images you want to display into the public folder and you can access the file directly in the <img/> tag.
We want to add a global style to the button and so you can use the :global() syntax to add CSS styles that will be applied globally

We have added the global style for the header in this Layout.astro file

:global(button) {
        background: #A7CF5D;
        border: 3px solid #000000;
        border-radius: 8px;
        font-size: large;
        padding: 0.75rem 1rem;
        font-weight: bold;
        text-transform: uppercase;
    }

Updating the Landing page

After creating the Hero section component, we need to update the main index.astro file to add the new component

---
import HeroSection from '../components/landingpage/HeroSection.astro';
import Layout from '../layouts/Layout.astro';
---

<Layout title="Managed Farmland">
    <main>
        <HeroSection/>
    </main>
</Layout>

<style>

    :global(h1) {
        margin: 2rem 0;
    }

    main {
        max-width: 1440px;
        margin:auto
    }
</style>

Result of the Hero section

Why Us Section

We have an interesting section after the Hero section about some of the details of the product. We can divide that into two equal halves horizontally using flex

We can then divide the left section into a grid of 4 items and place the items in order with an icon.

Let’s look at the code on how to do that

<div class="section-wrapper">
    <div class="features">
        <span><img src="favicon.svg" width="16" height="16"/>Water Management</span>
        <span><img src="favicon.svg" width="16" height="16"/>Farm Security</span>
        <span><img src="favicon.svg" width="16" height="16"/>Planting and Harvest</span>
        <span><img src="favicon.svg" width="16" height="16"/>Low Maintainence</span>
    </div>
    <div>
        <h2>Why should you buy ?</h2>
        <p>Awesome adventure and benefits if you buy this land from us and we promise you will not be disappointed</p>
    </div>
</div>

<style>
    .section-wrapper {
        display: flex;
        flex-direction: row;
        padding: 2rem;
        gap: 20px
    }
    .section-wrapper div {
        flex: 1
    }

    .features {
        display: grid;
        grid-template: "1fr 1fr";
        padding: 2rem;
    }
</style>

Things to note

We are saving all the div inside the .section-wrapper class to have a flex value set to 1. So there are two divs and both will get the value of 1 which makes the divs equal size
grid-template: “1fr 1fr” stands for dividing the grid into two equal fractions. So the grid is set to have two columns of equal size and depending on the number of items, it decides on the number of rows of the grid.

Features Section

We have another section after the Why Us section with more details.

We can then divide this section into a grid of 4 items and place the items similar to the previous section. We can also add a fancy background gradient for this div to make it look like the design

Let’s look at the code on how to do that

<div class="features-wrapper">
    <div class="box">
        <h2>Location</h2>
        <p>Located at the best of places the nature can offer and it is a ideal place to do agriculture with plenty of water sources nearby</p>
    </div>

    <div class="box">
        <h2>Method</h2>
        <p>We are using natural methods for the planting trees and agricultural techniques which combine both modern and traditional</p>
    </div>

    <div class="box">
        <h2>Technology</h2>
        <p>Integrating technology into the agriculture mix will let you examine each and every tree whereever you are located</p>
    </div>

    <div class="box">
        <h2>Weekend Resort</h2>
        <p>You can enjoy our resort with your family with free credit for our land owners</p>
    </div>
</div>

<style>
    .features-wrapper {
        display: grid;
        grid-template: "1fr 1fr";
        padding: 2rem;
    }

    .box {
        margin: 2rem;
        background: linear-gradient(124.28deg, #F9EBC4 59.55%, #A7CF5D 91.58%);
        border-radius: 20px;
        padding: 1rem;

    }
</style>

About Us Section

Create a new component inside the landingpage folder of component and name it AboutUsSection.astro

You can add the following content

<div>
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit repudiandae maxime tempora modi culpa provident necessitatibus distinctio, esse libero aliquid magnam cumque earum, totam soluta amet ex reiciendis voluptate! Veniam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit repudiandae maxime tempora modi culpa provident necessitatibus distinctio, esse libero aliquid magnam cumque earum, totam soluta amet ex reiciendis voluptate! Veniam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit repudiandae maxime tempora modi culpa provident necessitatibus distinctio, esse libero aliquid magnam cumque earum, totam soluta amet ex reiciendis voluptate! Veniam.</p>
</div>

<style>
    div {
        padding: 2rem;
        margin: 2rem 0px;
        background-color:#F9EBC4;
    }
</style>

Project Section

Create a new component inside the landingpage folder of component and name it Projects.astro

<div class="projects">
    <div class="project-item">
        <div>
            <h2>Farm Land 1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, eos. Repellat magnam maiores maxime in voluptate neque, ipsum modi sint recusandae ducimus explicabo. Perspiciatis aut dolor quaerat soluta tempore ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde corporis eaque soluta commodi doloremque dolores ratione perspiciatis nobis, fugiat quis temporibus officia qui, voluptatibus voluptatem harum? A corporis animi debitis!</p>
            <button>Buy Now</button>
        </div>
        <div>
            <img src="hero-image.svg"/>
        </div>
    </div>

    <div class="project-item">
        <div>
            <h2>Farm Land 2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, eos. Repellat magnam maiores maxime in voluptate neque, ipsum modi sint recusandae ducimus explicabo. Perspiciatis aut dolor quaerat soluta tempore ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde corporis eaque soluta commodi doloremque dolores ratione perspiciatis nobis, fugiat quis temporibus officia qui, voluptatibus voluptatem harum? A corporis animi debitis!</p>
            <button>Buy Now</button>
        </div>
        <div>
            <img src="hero-image.svg"/>
        </div>
    </div>
</div>

<style>

    .projects {
        padding: 2rem;
        margin: 0 2rem;
    }

    .project-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .project-item div {
        flex: 1;
        padding: 2rem;
    }

</style>

Conclusion

That’s all for today. We have done a full walkthrough of the code needed to get the landing page working in Astro. Join us on Discord if you have other questions

Discord - https://discord.gg/AUjrcK6eep

Testing a React application with Vitest

Eternal Dev — Sat, 23 Jul 2022 10:17:13 +0000

React is really popular when creating frontend components and when the scale of your application is increased, we need to have robust tests to cover all scenarios. The unit testing component becomes a great way to ensure the quality of the application and easily find bugs in the build time when the tests are written well. In this post, we will learn how to test a component with React and Vitest

What are we building?

We are going to build a simple accordion component in React and write unit tests in Vitest. The component will have two states. First is the collapsed state which displays only the title. Another state will be the open state which shows the title and the content below the title.

What is Vite?

Vite is a build tool that is easy to use and fast to compile the react project. We will make use of vite since it is easy to integrate the Vitest testing tool. If you want to know the basics of Vite, we have covered it in this blog post

Why use vitest?

Vitest is really fast and has a good developer experience when used with Vite. We can share the configuration of vite with vitest to make it simple and also ensures that the testing environment is similar to the build environment. Vitest supports HMR which really speeds up your workflow

What is HMR?

HMR stands for Hot Module Reloading. Whenever there is any change to the code, only the changes are updated to the server and the server reflects the new changes

The speed of seeing the changes on your server is improved as we are only sending partial changes for reloading instead of reloading the whole code.

Now that all the jargons are out of the way, let’s see some code that you have come for.

Initialize React project using Vite

We can initialize the project using the following command

npm init vite
cd react-vite-vitest
npm install

Adding Vitest for Testing

We can add Vitest to start adding tests to the project. Install the Vitest as a dev dependency.

npm install -D vitest

Vitest Configuration

One of the advantages of Vitest is that it uses the same config as Vite. This ensures that the test environment is the same as the build environment which increases the reliability of the tests

We will update the config to the following code to add js-dom which helps in testing

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
    test: {
      globals: true,
      environment: 'jsdom',
    }
})

Creating an Accordion component

Create a new component called Accordion.tsx and add the following code to create a simple accordion component. It is still incomplete and we will complete it by adding testing first

import React from "react";

type AccordionProps = {
    title: string;
    children: React.ReactNode;
}
const Accordion = (props: AccordionProps) => {

    const {title, children} = props;

    return (
        <div className="accordion">
            <h3 className="accordion-title">{title}</h3>
            <div className="accordion-content">
                {children}
            </div>
        </div>
    );
}

export default Accordion;

We are just taking the title and children and displaying them. An accordion component should be able to shrink and expand when a button is clicked. So let’s add a test case first for that feature and then implement it.

Creating the test in vitest

Create a new file called Accordion.test.tsx which will contain the test for the Accordion component. Add the following code to that file

import {describe, test} from 'vitest';

describe("Accordion test", () => {
    test("Should show title", () => {

    })
})

Let’s break down the above code

describe - Used to group the test and used to describe what is currently being tested
test - Individual test which is run by Vitest. It can either pass or fail

Here we have not added any test which will return true or false. We will do that shortly after adding the test script

Adding the test script

We need to add the vitest command to the package.json to start the testing script.

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "vitest"
  },

Just by calling the vitest command, the test execution will start and it will be in watch mode. This means that any changes being done to the file will re-run the test.

Start the test script

npm run test

Since we don't have any expect statement, the test is considered to be passed

Adding the config for Vitest

We need to have the DOM functionality replicated in the test environment to properly test the react components

JSDom helps in getting that environment for test and so we need to install that as a dev dependency.

We will also make use of testing-library as well which will help in having more utility functions to help test the components. We will get things like render function from this package which will simulate the component being rendered on the browser.

Installing the testing dependecies

npm i -D jsdom @testing-library/react

Adding the config for Vitest

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
    test: {
      globals: true,
      environment: 'jsdom',
    }
})

Write a unit test to see if text is visible in vitest

import {describe, expect, test} from 'vitest';
import {render, screen} from '@testing-library/react';
import Accordion from './Accordion';

describe("Accordion test", () => {
    test("should show title all the time", () => {

        render(<Accordion title='Testing'><h4>Content</h4></Accordion>);

        expect(screen.getByText(/Testing/i)).toBeDefined()
    })
})

This is the first basic test that makes sure that the title is always displayed on the screen. We are making use of some of the functions from testing-library like render and screen.getByText

getByText returns the element if found otherwise it will throw an exception which will fail the test case.

There are lot more utility functions to choose from based on your use case

https://testing-library.com/docs/react-testing-library/api

Create a test for hiding and showing content

We need to render the component on each test case. We can make use of beforeEach in this case which will run the code inside before each test

import {beforeEach, describe, expect, test} from 'vitest';
import {render, screen} from '@testing-library/react';
import Accordion from './Accordion';

describe("Accordion", () => {

    beforeEach(() => {
        render(<Accordion title='Testing'><h4>Content</h4></Accordion>);
    });

    test("should show title all the time", () => {

        expect(screen.getByText(/Testing/i)).toBeDefined()
    })

    test("should not show the content at the start", () => {

        expect(screen.getByText(/Content/i)).toBeUndefined()

    })
})

The second test should be failing now because we are expecting that the content should not be shown at the start but we didn’t implement the code to do that. This is a good example of how TDD (Test Driven Development) works. We first write a test that will fail and then implement the functionality to make it pass.

Implementing the logic to pass the test

import React, { useState } from "react";
import './Accordion.css'

type AccordionProps = {
    title: string;
    children: React.ReactNode;
}
const Accordion = (props: AccordionProps) => {

    const {title, children} = props;
    const [show, setShow] = useState(false);

    const onAccordionClick = () => {
        setShow(!show);
    }

    return (
        <div className="accordion">
            <div className="accordion-title">
                <h3>{title}</h3>
                <button onClick={() => onAccordionClick()}>{!show ? 'Show' : 'Hide'}</button>
            </div>
            {show && (
                <div>
                    {children}
                </div>
            )}
        </div>
    );
}

export default Accordion;

We are adding the code to hide and show the content of the accordion. This is achieved by simply changing the state variable of show

We are setting the initial value of show to false which will make the test pass.

Now that we have the basic accordion feature completed, let’s focus on getting more styles using CSS.

Adding the styles for the Accordion

.accordion {
    width: 80vw;
    border: 1px solid gray;
    border-radius: 5px;
}

.accordion-title {
    padding: 0px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid gray;
}

Writing test to validate the open/close behavior

We have completed the functionality of Accordion. Now we can add one more test to see if the accordion opens with a click of the button.

Let’s write the 3rd test like below

fireEvent from the testing library helps in simulating user actions in a unit test. We are using the click method to click the button. This should trigger the accordion to open and then we are awaiting the action to take place. Since that will be async action, we are using the await keyword.

The async unit test will have a default timeout and it will wait till that time. Once the timeout is completed, it will fail the test.

import {beforeEach, describe, expect, test} from 'vitest';
import {fireEvent, render, screen, waitFor} from '@testing-library/react';
import Accordion from './Accordion';
import "@testing-library/jest-dom";
import { act } from 'react-dom/test-utils';

describe("Accordion", () => {

    beforeEach(() => {
        render(<Accordion title='Testing'><h4>Content</h4></Accordion>);
    });

    test("should show title all the time", () => {

        expect(screen.getByText(/Testing/i)).toBeInTheDocument();
    })

    test("should not show the content at the start", () => {

        expect(screen.queryByText(/Content/i)).not.toBeInTheDocument();
    })

    test("should show the content on accordion click",async () => {

        const title = screen.getByText(/Show/i);
        fireEvent.click(title)

        expect(await screen.findByText(/Content/i)).toBeInTheDocument();
    })
})

Conclusion

We have learned how to write unit tests with Vitest in React. Vitest is still in the beta stage and not yet ready for production use. We think vitest has a huge potential and looks like a good alternative to Jest which is being used by a lot of developers.

Let us know if you have worked with Vitest and any feedback on this post is welcome

Join our Discord - https://discord.gg/AUjrcK6eep

How to use Svelte onMount Lifecycle method

Eternal Dev — Sat, 07 May 2022 16:00:37 +0000

Introduction

As a frontend developer, we need to know when the component is loaded and removed from the browser DOM to execute certain logic. This is very easy to do when you understand the lifecycle events of the framework. Svelte offers a handful of events to do these changes.

What is onMount Svelte?

onMount provides a way to run a function when the component is loaded to the DOM. This can be used to initialize values, calling API to load some data, perform actions which needs to run only once.

Template of onMount

<script>
    import {onMount} from "svelte";

    onMount(() => {
        // Write you code here....
        // This is executed when the component is loaded into the DOM

        // Optional return function
        return () => {
            // This is executed when the component is removed from the DOM
        }
    })
</script>

Examples for onMount

Let’s look at some of the examples

Fetching data from an API
Processing data
Accessing DOM Elements
Adding callback to event

Fetching data from an API

<script>
    import {onMount} from 'svelte';

    let posts = [];
    onMount(async () => {
        let data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
        let postData = await data.json(); 
        posts = [...postData];
    });
</script>

{#each posts as post}
    <h3>{post.title}</h3>
{/each}

We are creating a variable called posts to hold the data returned from the API. We can then use the onMount to call the API. Adding the async keyword before the onMount callback allows users to use the await syntax. We are using the fetch method to call the endpoint which will return the list of posts.

As we are using the await keyword, the execution of the next line is done only after the endpoint result is obtained. After that, we can convert the data into json format and we are appending to the posts variable.

Processing data

<script>
    import {onMount} from 'svelte';

    let names = ['first', 'second', 'third'];
    onMount(() => {
        names = names.map((item) => {
            return item.toUpperCase();
        })
    });
</script>

{#each names as name}
    <h3>{name}</h3>
{/each}

We are using simple logic to transform the data in the onMount in this example. we are converting the string to uppercase on the component load.

Accessing DOM Elements

<script>
    import {onMount} from "svelte";

    let emailInput;
    let email = "";

    onMount(() => {
        emailInput.focus();
    })
</script>

<input type="email" name="email" bind:value={email} bind:this={emailInput}/>

When we are creating a new form page and you want the user to start entering the text directly, you can bind the input element to a variable using bind:this syntax. This will give access to the variable to call any methods on that element. We can safely call the method on the onMount since we know that the element has been rendered on the screen when the onMount is executed.

Adding callback to event

<script>
    import {onMount} from "svelte";
    let count = 0;

    const keydownListener = (event) => {
        if (event.keyCode == 32) {
            count = count + 1;
        }
    }

    const resetCount = () => {
        count = 0;
    }

    onMount(() => {
        window.addEventListener('keydown', keydownListener) 
        return () => window.removeEventListener('keydown', keydownListener);
    })
</script> 

<h2>
    "Space" key has been pressed {count} times
</h2>

<button on:click={resetCount}>Reset</button>

We can add a callback to the window event called keydown to listen to any keystroke which the user is performing. We can then check if the keyCode value is 32, then increment the counter value. onMount can return another function which is executed when the component is removed from the DOM. We are removing the event listener to avoid any memory leak after the component is removed from the DOM

Things to note about onMount

onMount function can be called from a external module (ie. External module which has onMount function defined will be executed when you are calling that function inside your component.)
onMount function does not execute in Server Side Rendering (SSR)

Conclusion

Lifecycle methods are really helpful and svelte makes it easy to add these to the component.

How to write tests in Sveltekit and Vitest

Eternal Dev — Thu, 17 Mar 2022 06:18:59 +0000

💡 As of the writing of this post, both SvelteKit and Vitest are not ready for production usage. SvelteKit is very promising but not recommended for production use until they are out of the beta stage

Introduction

We will make use of Test Driven Development (TDD) in this article to test and develop an async component in Sveltekit

Test Driven Development has always been the major thing that we want to follow on every new project which we start. It means that we write the test cases before the actual implementation of the functionality and make sure all the things are tested and maintain a very high standard of quality. Hopefully, with Vitest and Sveltekit we can start every project with TDD. Vitest is a unit-testing framework powered by Vite.

Setting up the Sveltekit project

Let’s create a new Sveltekit project by following the official documentation - https://kit.svelte.dev/

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

For more about Sveltekit, check out the article on the official blog - https://svelte.dev/blog/whats-the-deal-with-sveltekit

What are we building?

We are going to build a component that will fetch data from a Pokemon API and display the pokemon data. This component will be an async component that will have the loading, success, and error states. This will be a very simple example to explain how we can perform TDD with Vitest and Sveltekit.

What is Vitest?

Vitest is one of the latest packages which hopes to take advantage of Vite’s fast pace and build a testing framework that is fast and easy to use. It is an open-source package that is still in the early stage of development (0.6.2) as of the writing of this post. One of the main advantages of the vitest is that it will work with the default configuration of vite which is used for config of your app. So you don’t need a separate config for your testing. It has a similar syntax as jest so that migration and learning are easy.

There are more significant features which are listed on the official website

https://vitest.dev/guide/features.html

Configure Vitest in SvelteKit

Official Guide - https://vitest.dev/guide/

Install vitest as a dev dependency
Add a config file for vitest (You can use existing vite.config.js if you have that file)
Adding the vitest test script in package.json

scripts: {
        ...
        "test": "vitest",
    "coverage": "vitest run --coverage"
}

Create a test file in vitest

Vitest API is very similar to Jest. There is also a guide from the official page on how to migrate from jest

https://vitest.dev/guide/migration.html#migrating-from-jest

Describe block - This is used to group related tests and create a block of content
it block - Used to create and provide a describing test which is easily recognizable
expect statements - Used to validate the test results. These form the basis of our test since the test passing/ failing is dependent on these expect statements.

Official API Docs - https://vitest.dev/api/

Create a new file - sample.spec.ts

import {describe, expect, it} from 'vitest';

describe("Sample Test Block", () => {
    it("sample test which should be true", () => {

        expect(true).toBe(true);
    })
})

After adding this file, you can run the test watch command

npm run test -- --watch

Creating a svelte component in Sveltekit

Create a new file called PokemonDetails.svelte inside the component folder in the src directory. We can just write a simple h2 message in that component. Our main objective is to see if we can load this component inside the test and verify that the component is loaded.

PokemonDetails.svelte

<h2>Pokemon</h2>

Mounting the svelte component in the test

Create a new file called PokemonDetails.spec.ts in the same folder as the PokemonDetails component and we can try to import that component in the test.

describe("Pokemon Details", () => {

    let instance = null;
    beforeEach(() => {
        const host = document.createElement('div');
        document.body.append(host);
        instance = new PokemonDetails({ target: host});
    })

    it('Should show a loading spinner when making the API Call', () => {
        expect(instance).toBeTruthy();
    })
})

This is a very naive way of adding the component to the document and testing if the component is mounted. This test will return true, but it is difficult for us to test further with this setup. It is difficult to test what things are rendered inside the component using this method. So we are going to take the help of another library svelte-testing-library to make things easier for us.

Adding the Svelte Testing library in Sveltekit

It makes it easy to render the components and get the details about the different elements inside the component

Official API - https://testing-library.com/docs/svelte-testing-library/api

You can install this in the package.json using the following command

npm install --save-dev @testing-library/svelte

A quick introduction to Test Driven Development (TDD)

Test Driven Development is the process of creating a failing test first, then implementing the logic to make the test pass. This will ensure that the functionality is tested properly with automation tests and it can ensure a higher quality of the product. TDD is often difficult to practice as it is more time-consuming than just writing the logic first. Time spent initially in the setup and writing comprehensive test will result in more time saved in debugging bugs when the application is getting bigger and bigger.

For a more detailed explanation on TDD - https://www.freecodecamp.org/news/an-introduction-to-test-driven-development-c4de6dce5c/

One more important cycle in TDD is the cycle of three-stage

Red stage - Write a test and watch it fail (Red)
Green stage - Write the most basic logic needed to make the test pass (Green)
Refractor stage - Refractor the code to make it better than before

Add your first test for the async component (Red stage)

We are going to create a test that will test if the component is showing a loading message. when the test is running, we should see that the test is failing as expected.

We are going to make use of @testing-library/svelte to render the Component. In using the render function, we get access to a bunch of helper functions which will let us test the content inside the component. Here we are going to use getByText which will return the element if the text is found, otherwise throws an exception.

So we are using that to see if the “Loading...” text is present in the component.

import {beforeEach, describe, expect, it} from 'vitest';
import { render } from '@testing-library/svelte';
import PokemonDetails from './PokemonDetails.svelte';

describe("Pokemon Details", () => {

    it('Should show a loading spinner when making the API Call', () => {
        const {getByText} = render(PokemonDetails);

        expect(() => getByText(/Loading.../i)).not.toThrow();
    })
})

Adding your code to fix our test(Green Stage)

We are calling the Pokemon API to get the details of the pokemon and displaying the details on the component.

<script>
    let data = null

    const getPokemon = async () => {
        var response = await fetch('https://pokeapi.co/api/v2/pokemon/1/');
        var result = await response.json();

        data = result;
    }

    getPokemon();
</script>

{#if !data}
    <h2>Loading...</h2>
{:else}
    <h2>Pokemon </h2>
{/if}

After adding the above code, the unit test should pass since the initial message on the component will be “Loading...”

Refractor the code (Refractor stage)

At this point in time, we know that our test is working. So we can refactor our code to make it better. This is essential as we are going to improve the quality of our code even though our tests is passing after the previous step. We are going to make use of the Svelte async/ await syntax to show the loading message which is simpler than our previous method.

For more detailed explanation on how to make an API call, you can look at this article - https://www.eternaldev.com/blog/how-to-make-an-api-call-in-svelte/

<script>
    const getPokemon = async () => {
        var response = await fetch('https://pokeapi.co/api/v2/pokemon/1/');
        var result = await response.json();
        return result;
    }

    let pokemonPromise = getPokemon();
</script>

{#await pokemonPromise}
        <h2>Loading....</h2>
{:then pokemon}
    <h2>Pokemon </h2>
{/await}

Async component testing in vitest

We have the data now coming from the API, we can add some simple HTML elements to display that data once the data is received. Let’s write the test first to test the functionality. Since we are using the async component, we need to add the async test in vitest.

Adding async it block in vitest

We can use the async keyword before the method to create an async test. Inside the method, we can use the await keyword and the execution will continue only when the awaiting promise is resolved/rejected.

it('should show the data',async () => {
    await someMethod();
}

Mocking the global fetch in vitest

We are going to use the global fetch to call the API in the component. So we need a way to mock this method when running the test. Mocking is a really important part of the writing test since we don’t want the test to be flaky or dependent on the network connection and so on. We want the test to detect if the component is working correctly and not test the network part. So we need to mock the API and return a response that we can control.

We can do this using the mockImplementation function in Vitest.

global.fetch = vi.fn().mockImplementation(() => {
    return Promise.resolve({
        json() {
          return Promise.resolve({name: 'Test Poke', height: 3, weight: 20, sprites: {front_default: ''}});
        }
    });
});

Waiting for the text to show up

After that we need to make sure, we are testing the UI only after the promise is resolved. So we are using the waitFor method which will wait for some time before making the assertion. There is a default timeout for this function and if the timeout is exceeded and still the element is not present, it will throw an exception and fail the test.

it('should show the data',async () => {
    const {getByText} = render(PokemonDetails);

        await waitFor(() => getByText(/Pokemon: Test Poke/i));
});

After doing all the three above steps, we are now able to test for the async component in Sveltekit and Vitest. Below is the complete code for that test

import {beforeEach, describe, expect, it, vi} from 'vitest';
import { render, waitFor } from '@testing-library/svelte';
import PokemonDetails from './PokemonDetails.svelte';

describe("Pokemon Details", () => {

    beforeEach(() => {
        global.fetch = vi.fn().mockImplementation(() => {
            return Promise.resolve({
                json() {
                  return Promise.resolve({name: 'Test Poke', height: 3, weight: 20, sprites: {front_default: ''}});
                }
            });
        });
    });

    it('Should show a loading message when making the API Call', () => {
        const {getByText} = render(PokemonDetails);

        expect(() => getByText(/Loading.../i)).not.toThrow();
    })

    it('should show the data',async () => {
        const {getByText} = render(PokemonDetails);

        await waitFor(() => getByText(/Pokemon: Test Poke/i));
        await waitFor(() => getByText(/Height: 3/i));
        await waitFor(() => getByText(/Weight: 20/i));
    })

})

After the test fails, we can update the PokemonDetails.svelte component to make the test pass.

<script>
    const getPokemon = async () => {
        var response = await fetch('https://pokeapi.co/api/v2/pokemon/1/');
        var result = await response.json();
        return result;
    }

    let pokemonPromise = getPokemon();
</script>

{#await pokemonPromise}
        <h2>Loading....</h2>
{:then pokemon}
        <h2>Pokemon: {pokemon.name}</h2>
    <h3>Height: {pokemon.height}</h3>
    <h3>Weight: {pokemon.weight}</h3>
{/await}

Adding the error handling of the API

Finally, we need to add an error handling part to the component when there is an error from the API or the network connection is not working.

Since we want the mock implementation to reject the promise for this test, we can override the mock only for this test.

it('should show error when the API fails', async () => {

      global.fetch = vi.fn().mockImplementationOnce(() => {
          return Promise.reject();
      });

      const {getByText } = render(PokemonDetails);

      await waitFor(() => getByText(/Error while loading the data/i));
  })

We can update the component to add that error text after the test is failing.

<script>
    const getPokemon = async () => {
        var response = await fetch('https://pokeapi.co/api/v2/pokemon/1/');
        var result = await response.json();
        return result;
    }

    let pokemonPromise = getPokemon();
</script>

{#await pokemonPromise}
        <h2>Loading....</h2>
{:then pokemon}
        <h2>Pokemon: {pokemon.name}</h2>
    <h3>Height: {pokemon.height}</h3>
    <h3>Weight: {pokemon.weight}</h3>
{:catch err}
    <h2>Error while loading the data</h2>
{/await}

Yay! we now have all the tests to test the whole async component and all of them are passing now. This is a good start for your application and you can continue adding more complicated tests which is suitable for your application.

Coverage report

Adding coverage report is easy by installing a package c8

npm install --save-dev c8

Add the following line to the package.json

"scripts": {
    ...
    "coverage": "vitest run --coverage"
}

So when you run the npm run coverage you will get the coverage report in the terminal. It will also create a new folder coverage in your source directory which will contain all the detailed information about the coverage.

Conclusion

We have actually been really impressed by the vitest package and it seems to have very seamless integration and working with the familiar jest like API has been a delight so far. It also seems to be really fast but those metrics can be calculated with a more complicated real-world project than this sample project. It seems to have a huge potential since it is not Svelte specific and it can be used with other frameworks as well. We are really looking forward to using more features of this package.

5 ways to perform for loop in Svelte (Each block)

Eternal Dev — Tue, 08 Feb 2022 12:56:42 +0000

Svelte provides an easy way to loop through the variable and display the data. There are multiple ways to use each block to your advantage and build awesome applications. Let’s look at some of the ways.

Each block with a simple object

We will start with the most basic usage. Consider having an array of objects and you want to display them in a list. You can start with this method.

<script>
    let names = ['Name 1', 'Name 2', 'Name 3'];
</script>

<ul>
    {#each names as name, index}
        <li>{index} - {name}</li>
    {/each}
</ul>

Each block will now use the names variable to loop through and the name is an alias for each item in the array. You can pass the second argument after the comma which will provide the index of the current iteration in the loop. Here we are passing the index variable.

Each block with the keyed object

Each block allows adding a key for each of the rows to uniquely identify that particular row. This is really helpful when you are updating a particular item in the array. It is recommended to provide this key.

<script>
    let names = [{id: 1, name: 'Name 1'},{id: 2, name: 'Name 2'},{id: 3, name: 'Name 3'}];
</script>

<ul>
    {#each names as item, index (item.id)}
        <li>{item.id} - {item.name}</li>
    {/each}
</ul>

You can use any property which will uniquely identify that particular row. Here we are using the id property in the array to identify the row.

Each block with object destructing

If you just want a few properties from the row item, you can make use of object destructing syntax. It allows you to pick a few properties from the overall item.

<script>
    let names = [{id: 1, name: 'Name 1'},{id: 2, name: 'Name 2'},{id: 3, name: 'Name 3'}];
</script>

<ul>
    {#each names as {id, name}, index (id)}
        <li>{id} - {name}</li>
    {/each}
</ul>

We are just picking the id and name from the item. You can then use those variables inside each block.

Each block with key-value objects

<script>
    let name1 = {
        name: 'Name 1',
        age: 25,
        gender: 'Male',
        occupation: 'Software Developer'
    }
</script>

<ul>
    {#each Object.entries(name1) as [key, value], index (key)}
        <li>{key} - {value}</li>
    {/each}
</ul>

You can iterate through all the fields in the object and display them in the list. This will be useful when you are not sure of the structure of the object returned. This is possible using the Object.entries method which will give a list of key-value pairs which we can iterate.

Each block with x number of times

If you just want to display a component a few times, you can use this method.

<ul>
    {#each Array(5) as _, index (index)}
        <li>Comment</li>
    {/each}
</ul>

We are using the Array(length) syntax to create a new array of 5 items that will be undefined. Since we do not care about the value inside the array, we use _ which is a convention meaning that value is not important for our app.

Conclusion

Svelte provides a nice syntax that helps increase the productivity of the developers and keep things inside in the application. If you have any feedback or any question, feel free to join our discord

Discord - https://discord.gg/AUjrcK6eep

What is a Web 3.0 wallet? Getting started with DApps

Eternal Dev — Sun, 06 Feb 2022 04:15:58 +0000

What is Web 3.0?

Web 3.0 is based on the next iteration of the internet that depends on Blockchain technology and decentralization. The name was coined by Ethereum co-founder Gavin Wood and Polkadot founder. The current iteration of the internet consists of a huge amount of data that is being held by a small number of big companies.

The main aim of web 3.0 is to interconnect data in a decentralized way rather than the current scenario of the data being in a centralized repository with big tech companies. Improvements in Artificial intelligence and machine learning might help propel the web forward. We will see more interaction with the decentralized applications in the future which will let us interact and perform actions in the blockchain like never before.

What Are Decentralized Applications (DApps)?

Applications that are maintained by a network of computer nodes rather than a single server are called Decentralized Applications. This has become possible with the blockchain technology that supports Smart contracts. Smart Contracts are pieces of code that are added to the blockchain and which will execute the code based on the agreement. There is no manual intervention needed to execute the contract which avoids the need for a middle-man.

DApps can provide a good level of service similar to the regular application but the difference is they are decentralized and their transactions are transparent.

What is a Web 3 wallet?

Now, that we are familiar with DApps, we will need a way to interact with the DApps without a centralized authority. Web3 wallets are non-custodial and so you don’t need a middleman like your bank. It will let you send, receive and store the cryptocurrencies. The wallet will hold the private key, public key, and the address (we will learn about these later in the post) which will provide access to your currency in the blockchain

There are two types are web3 wallet

Hardware Wallet
Software Wallet

What is a hardware wallet and software wallet?

Hardware Wallet

A hardware wallet is a physical device that you can use to store your keys which will provide access to your account in the blockchain. Once you have configured the wallet after buying, you don’t have to be connected to the internet and so they are known as cold wallets. These are considered to be more secure since they are physical devices.

Here’s a list of top 10 hardware wallets

https://101blockchains.com/best-hardware-wallets/#:~:text=The hardware wallets are just,any crypto sent to them.

Software Wallet

A software wallet is software which you can install on your computer or mobile phone which will provide access to your account in the blockchain. You can install the software and create a wallet to start your interactions with the DApps right away. These are considered to be less secure than their hardware counterparts.

Terms to know about digital wallets

Wallet addresses

Address of your wallet which can be shared with other people who are trying to send cryptocurrencies to you. Think of this as a unique address when your postman is delivering your postcard to you. When someone sends transactions to your wallet address, you will be able to receive those.

Usually, this will be a long alpha-numeric string and it can be shared as a QR code as well.

Private Key

Private keys are the important part of your wallet which is used to decrypt the messages. The private key is important to the security of your wallet. So don’t share your private key with anyone. Good things to do with your private key is to store them offline and backup your wallet when you can.

Public Key

Public key plays a major role in encrypting the messages and transactions which are sent to your address. They are used to make sure that only the intended recipient is able to read the message and not everyone can decrypt the message without the private key.

These are simple explanations and do not go in-depth about the different cryptography concepts involved in them. For more detailed information, public-key cryptography

What is Metamask ?

There are lots of different Software wallets present in the market. One of the popular wallets is Metamask. It is available to download as a browser extension and mobile apps. We will look into how to create a new account in Metamask and start accessing the DApps in your browser.

How to create an account in Metamask

You can download the application from their website

https://metamask.io/

Steps to create an account

Step 1 : Go to their landing page

Step 2: Click on the “Download” button

Step 3: Choose the device to download the application. We can select the Chrome browser to install a browser extension

Step 4: After installation, you will find the metamask icon on the extension in the navigation bar of Chrome.

If you don’t see it right away, click on the “Extensions” icon and you will see a list of all the apps installed on the browser.

You can click on the “Pin” icon and then it will show in the navigation bar.

Step 5: Open the Metamask app by clicking on the icon and then click “Get Started” to create a new account

Step 6: On the Get Started page, you will have two options

I already have a secret recovery phase - If you already have an account use this
Let’s set it up - Use this for a new account

Step 7: You will have to agree to the Terms and conditions of Metamask

Step 8 : Create a strong password which you will need to enter when you are accessing the Metamask application.

Step 9 : Secret Backup Phase

This step is _ very important _. You will need to click on the Reveal Secret button and then note down the phase. This will be 12 random words that will be displayed. You need to keep this secure

DO NOT SHARE THIS WITH ANYONE.

You can use this to get access to your account and so if anyone has this phase, they will be able to steal your account and all the assets inside your account.

Step 10 : Confirm the Secret Backup Phase. You will have to select the secret backup phase in the order it was provided. This step is to verify that you have properly noted down the phase similar to Confirm password text

Done! Enjoy your new Metamask account

Connect to your first Web 3.0 website

If you are a developer, you will be interested in learning more about the different resources available to build web 3.0 sites. ThirdWeb is a website that will help in getting started on your journey. So let’s connect our wallet and login to the site

I have taken the example of Thirdweb but a lot of other sites have a similar experience to connect your wallet.

Step 1: Open the thirdweb website

Step 2 : Click on the “Connect wallet” button on the top right. Click on Metamask button and then you will receive a popup on the browser extension to connect to the website.

Step 3 : Accept the notification in Metamask popup

Step 4 : Done! You should be logged in to the application in ThirdWeb

Conclusion

Web 3.0 is a really interesting space right now and evolving very rapidly in a few years. It will be interesting to see what the future holds for these decentralized applications and how it will affect the developer and creator economies.

Join our discord and let us know your question and what do you think of this web 3 hype going on right now.

Discord - https://discord.gg/AUjrcK6eep

How to make an API call in Svelte

Eternal Dev — Thu, 27 Jan 2022 03:53:44 +0000

Introduction

Useful applications need a way to fetch and store the data which is being displayed to the users. This involves calling custom backend APIs or public APIs from the Svelte applications to show the relevant information. Let’s look at how to make this process simple in Svelte by fetching public API

NOTE: If you want the TDLR version, scroll to the bottom to see the code

What is an API?

API stands for Application Programming Interface (API) which is like a contract between the multiple applications to get or send the data. You can imagine it as a structure of data that has been agreed upon by the engineers in the team. So it is helpful for both the frontend and backend developers to write their logic based on the structure of the data.

You have built a beautiful frontend application and now you think it will be great if you can display the weather data for your home city on the page. Since the weather data is dynamic and changing constantly, you need to rely on some third party to get that information. Your application now needs to communicate with the other weather data-providing application. A third-party website will provide some API that can be used to do this communication.

Example of weather data with a predefined structure

Using fetch to call the API

Let’s use the browser fetch to call the API to get data. We will use https://randomuser.me/ to get random user data.

<script>
    const getRandomUser = async () => {
        var response = await fetch('[https://randomuser.me/api/](https://randomuser.me/api/)');
        var result = await response.json();
        return result;
    }

    let userPromise = getRandomUser();
</script>

Create an async function getRandomUser which will return the result of the API call. We can use a variable to store the promise returned from the getRandomUser function.

Using Svelte await promise syntax

{#await PROMISE_VAR then RESULT_VAR}
    <b>{RESULT_VAR}</b>
{/await}

Using the #await syntax will help in waiting for the promise to return and then show the data. The following syntax can be used to show the data

{#await userPromise then users}
    <h2>{users.results[0].name.first}</h2>
{/await}

Showing loading and error message

We can add loading and error messages easily in svelte when using the await syntax. This is the brilliance of the svelte framework which knows that loading and error states are very common and essential when displaying the data fetched from API. So it provides an easy way to do that using the following syntax

{#await PROMISE_VAR}
    <b>Loading block</b>
{:then RESULT_VAR}
    <b>{RESULT_VAR}</b>
{:catch ERROR_VAR}
    <b>Error block</b>
{/await}

Let’s implement that in our example

We are showing an H2 loading message in the loading block. This can be replaced by any HTML which means you can have any complex animation or component to show the loading state
Display the result once the data is available
Error block which gets displayed when the promise is rejected or has network error.

{#await userPromise}
    <h2>Loading....</h2>
{:then users}
    <h2>{users.results[0].name.first}</h2>
{:catch err}
    <h2>Error while loading the data</h2>
{/await}

Full example for API Call in svelte

<script>
    const getRandomUser = async () => {
        var response = await fetch('https://randomuser.me/api/');
        var result = await response.json();
        return result;
    }

    let userPromise = getRandomUser();
</script>

<h1>Random User name</h1>

{#await userPromise}
    <h2>Loading....</h2>
{:then users}
    <h2>{users.results[0].name.first}</h2>
{:catch err}
    <h2>Error while loading the data</h2>
{/await}

Conclusion

Svelte makes it easy to load the API and show the different states to the user which is an integral part of any frontend application. Let us know what you think about this article and join the discussion in our discord community

Discord - https://discord.gg/AUjrcK6eep

How to build Contact us page with Sveltekit and Supabase

Eternal Dev — Sat, 15 Jan 2022 06:51:52 +0000

Introduction

Building an online presence takes time and effort and you will need to persuade your potential customers to make the intial contact. It is essential to have a good looking and working contact form in your website. We will create a form in SvelteKit and then use Supabase as a backend to store the form data.

Getting Started with SvelteKit

SvelteKit is a framework for building web applications that has an awesome developer experience and you can create powerful apps. It combines the power of Server Side Rendering (SSR) and navigation benefits of Single Page Applications (SPA)

Don’t worry if you are unfamiliar with these terms above, it means that your project gets the benefit of having a SEO (Search Engine Optimization) to rank higher in search engine. When you navigate from one page to another, the whole site is not reloaded like in traditional applications.

If you want to learn more on these, visit the SvelteKit Website

https://kit.svelte.dev/docs

Note: As of writing of this post, SvelteKit is not Production ready and so please check the latest version of the SvelteKit if you are planning to build a production ready application.

Creating your first project

Let’s create a new project.

It is easy to get started with a new project. You can just type the following command on the terminal and you will get a scaffold of SvelteKit app ready to use.

npm init svelte@next my-app
cd my-app
npm install
npm run dev

SvelteKit is an opinionated framework which has file-system based routing. Creating a new page is as easy as creating an new file in the src\routes folder. In the scaffold, you can find the index.svelte file inside the src\routes folder which will be used as the landing page of the application.

What are we building today ?

We are going to build a couple of pages for a fictional company which will have a contact us form and it will store the data to Supabase.

Creating the form data in supabase

Create a new project in Supabase. We have named the project contact-page-demo. You might have to wait for a few minutes for the project to be ready. Then you are good to go.

Create a new table in your project which will hold the data. Each entry made by any visitor in your website will be stored as a new row in the table. We are going to fetch the following details from the users and store them to the database

Name
Email
Message

User will be filling in these three fields. We will store this data in the table and then use the data to get in touch with the user

Steps in Supabase

Create a table contact in your supabase project
Add the following fields to the table

Integration of SvelteKit with Supabase

We need a way to integrate Supabase in SvelteKit so that we can store the data in the table. After updating the data in the table, we can make use of the data in some way to send some personalized response to the user.

Let’s create a .env file at the root of the project to store the variable for the Supabase url and key

VITE_SVELTE_APP_SUPABASE_URL=xxxxx
VITE_SVELTE_APP_SUPABASE_ANON_KEY=xxxxxx

Adding VITE to the start of the variable makes it visible in the client side code. Check the documentation of vite environment variables

You can find these variables in the following pages

Supabase Anon Key - Settings → API → Project API Keys
Supabase Url - Settings → API → Config

Add those details to the .env file and then you can create a new file in the src folder called supabaseClient.ts

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SVELTE_APP_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SVELTE_APP_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Creating the layout file in SvelteKit

We will start by designing the structure of the website. SvelteKit provides a nice way to define a layout file which will be used in all the routes. You can do this using the __layout.svelte file in the routes folder. The layout file should contain a slot element which will be replaced by the content in each of the routes.

Awesome feature if you ask me and which will save a lot of time when defining the project. Modern web applications will need to have some navigation bar. This can be defined in the layout file and magically all the routes will now have it.

<div class="content">
    <nav>
        <span class="company-title">Company Name</span>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact Us</a></li>
        </ul>
        <div>
            <a href="/login">Login</a>
        </div>
    </nav>

    <slot></slot>
</div>

<style>

    .content {
        padding: 20px 10px;
    }

    nav {
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    ul {
        list-style-type: none;
        display: flex;
        gap: 60px;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        text-decoration: underline;
    }

    .company-title {
        font-size: large;
        font-weight: bold;
    }
</style>

The important thing to note here is the after the nav element, we have the slot element which will contain the different content of the routes.

Installing carbon component for svelte

We will make use of the carbon component library created for svelte. This step is optional and we are using it to make our application look good and get some input form elements out of the box. So let’s install the carbon component.

npm i -D carbon-components-svelte

After installing the npm package, we need to add one of the carbon themes in our layout file to start using the carbon components.

Let’s add the css file to the src/__layout.svelte file

<script lang="ts">
    import "carbon-components-svelte/css/g10.css";
</script>

Creating the contact us page

We have all the things ready to create the contact page with forms which will connect with Supabase to store the data.

Installing the svelte-forms-lib

We are going to use an npm library for managing the form elements. This might be an overkill for this small form but it will help in reducing the code. We can install the package using the following code

npm install svelte-forms-lib

For more details on this package, please check the Svelte forms lib website

This library provides multiple ways to create the form. You can use the createForm method to create a new form. It will provide multiple variables which will help in building the form and the page.

You can have a look at the basic example here

Creating the Form component

<script>

    import { TextInput, TextArea, Button, FormGroup, Form } from "carbon-components-svelte";
        import { createForm } from "svelte-forms-lib";

    const { form, errors, handleChange, handleSubmit, isSubmitting } = createForm({
        initialValues: { name: "", email: "", message: "" },
        onSubmit: async values => {
            console.log(result);
      }
    });

</script>
<div class="page">

    <h2>Contact Us</h2>
    <p>Enter the details to get in touch with us. You can remove your email at any time after this.</p> <br/><br/>

    <Form on:submit={handleSubmit}>

        <FormGroup>
            <TextInput labelText="Name" name="name" 
                on:change={handleChange} bind:value={$form.name}/>
        </FormGroup>

        <FormGroup>
            <TextInput labelText="Email" name="email" type="email" 
            on:change={handleChange} bind:value={$form.email}/>
        </FormGroup>


        <FormGroup>
            <TextArea labelText="Message" name="message" type="textarea"
            on:change={handleChange} bind:value={$form.message}/>
        </FormGroup>

        <Button type="submit" disabled={$isSubmitting}>Submit</Button>
    </Form>
</div>

Let’s breakdown the above code

Import the createForm from the svelte-forms-lib
Pass the initialValues which are empty string to the createForm method
Pass an onSubmit handler to process the form data on click of the submit button

Now we can use the form component we downloaded as part of Carbon components. Form and FormGroup component can be used to group the elements.

TextInput component is used to enter text for the user. Set the name property to the name of the field. Bind the value of the text field to the $form.name. Setting the on:change event to the handleChange method of the svelte-forms-lib
TextArea component is used to display a text area to enter a bigger text. All the other properties are same of the other component
Button component can be used to show the “Submit” button

Adding the API to call

Let’s add the API call on the submit of the form. We will make use of the supabaseClient file which we created before. We will take the form data and send it to the supabase table to store it there.

<script>
    import { supabase } from "../../supabaseClient";

        let apiResult = null;

    const { form, errors, handleChange, handleSubmit, isSubmitting, handleReset } = createForm({
        initialValues: { name: "", email: "", message: "" },
        onSubmit: async values => {

            try {
                var result = await supabase.from("contact").insert(values);

                if (result.data != null) {
                    apiResult = true;
                } else {
                    apiResult = false;
                }

            } catch (ex) {
                apiResult = false;
            }

            handleReset();
      }
    });
</script>

The main thing to note here is supabase.from("contact").insert(values). This will call the supabase API and then we are awaiting the result. The result will be stored in the result variable. When the data property in resultis not null, then the API is successful. If there is any error or exception, we are setting the apiResult to false.

Adding success and error states

We will make use of InlineNotification component to show the result of the API call. Based on the success or failure, we are showing the message in the UI to notify the user after the event.

<h2>Contact Us</h2>
    <p>Enter the details to get in touch with us. You can remove your email at any time after this.</p> <br/><br/>

    {#if apiResult != null}

        {#if apiResult == true}
        <InlineNotification
            lowContrast
            kind="success"
            title="Success:"
            subtitle="Your message has been received"
        />
        {:else}
        <InlineNotification lowContrast kind="error"
            title="Error:"
            subtitle="An internal server error occurred."
        />

        {/if}    
    {/if}

Adding Validation

We can add simple validation for the form to make sure that form is not submitted with empty data. This can be achieved using simple javascript by checking the variables. If you have a more complicated validation, you can use the Yup package to show more advanced validation logic and add user-friendly validation messages.

npm install yup

This step is also optional, you can add more simple logic to check the variables, but this will show how to use the validation for bigger froms.

const validationSchema = yup.object().shape({
      name: yup.string().required('Please enter a name'),
      email: yup.string().email().required('Please enter a valid email'),
      message: yup.string().required('Please enter a message')
});

const { form, errors, handleChange, handleSubmit, isSubmitting, handleReset } = createForm({
        initialValues: { name: "", email: "", message: "" },
        validationSchema: validationSchema,
        onSubmit: async values => {
                        .......
                }
});

Let’s breakdown the above code

We are creating a validationSchema variable which will contain the validations
Each property can have it’s own validation logic with custom validation message.
name property is a string value and it’s required. The string entered in the required method will be the custom validation message
email property is a string value. It should follow the general validation of email and it’s required
message property is a string value. It is also a required property.
Once we have defined the variables for the validations, we can assign it to the validationSchema property in createForm which will handle the validations.

<Form on:submit={handleSubmit}>

        <FormGroup>
            <TextInput labelText="Name" name="name" 
                on:change={handleChange} bind:value={$form.name}
                invalid={$errors.name.length > 0} invalidText={$errors.name}/>
        </FormGroup>

        <FormGroup>
            <TextInput labelText="Email" name="email" type="email" 
            on:change={handleChange} bind:value={$form.email}
            invalid={$errors.email.length > 0} invalidText={$errors.email}/>
        </FormGroup>


        <FormGroup>
            <TextArea labelText="Message" name="message" type="textarea"
            on:change={handleChange} bind:value={$form.message}
            invalid={$errors.message.length > 0} invalidText={$errors.message}/>
        </FormGroup>


        <Button type="submit" disabled={$isSubmitting}>Submit</Button>
    </Form>

We just have to update the TextInput and TextArea components to show the validation messages using the invalid and invalidText props.

Finishing up the form

That’s all is needed to store the contact data in Supabase table. You can check the database on who has contacted and respond back to their message. You can even extend this setup to trigger an email once the contact form is filled using a custom backend app

Let’s look at the whole code for the contact page

<script>
    import { supabase } from "../../supabaseClient";

    import { createForm } from "svelte-forms-lib";
    import * as yup from "yup";

    import { TextInput, TextArea, Button, FormGroup, Form, InlineNotification } from "carbon-components-svelte";

    const validationSchema = yup.object().shape({
        name: yup.string().required('Please enter a name'),
        email: yup.string().email().required('Please enter a valid email'),
        message: yup.string().required('Please enter a message')
    });

    let apiResult = null;

    const { form, errors, handleChange, handleSubmit, isSubmitting, handleReset } = createForm({
        initialValues: { name: "", email: "", message: "" },
        validationSchema: validationSchema,
        onSubmit: async values => {

            try {
                var result = await supabase.from("contact").insert(values);

                if (result.data != null) {
                    apiResult = true;
                } else {
                    apiResult = false;
                }

            } catch (ex) {
                apiResult = false;
            }

            handleReset();
      }
    });

</script>
<div class="page">

    <h2>Contact Us</h2>
    <p>Enter the details to get in touch with us. You can remove your email at any time after this.</p> <br/><br/>

    {#if apiResult != null}

        {#if apiResult == true}
        <InlineNotification
            lowContrast
            kind="success"
            title="Success:"
            subtitle="Your message has been received"
        />
        {:else}
        <InlineNotification lowContrast kind="error"
            title="Error:"
            subtitle="An internal server error occurred."
        />

        {/if}    
    {/if}
    <Form on:submit={handleSubmit}>

        <FormGroup>
            <TextInput labelText="Name" name="name" 
                on:change={handleChange} bind:value={$form.name}
                invalid={$errors.name.length > 0} invalidText={$errors.name}/>
        </FormGroup>

        <FormGroup>
            <TextInput labelText="Email" name="email" type="email" 
                on:change={handleChange} bind:value={$form.email}
                invalid={$errors.email.length > 0} invalidText={$errors.email}/>
        </FormGroup>


        <FormGroup>
            <TextArea labelText="Message" name="message" type="textarea"
                on:change={handleChange} bind:value={$form.message}
                invalid={$errors.message.length > 0} invalidText={$errors.message}/>
        </FormGroup>


        <Button type="submit" disabled={$isSubmitting}>Submit</Button>
    </Form>
</div>

<style>
    .page {
        margin: 40px;
    }
</style>

Conclusion

SvelteKit provides a really nice set of tool for developers to build website and focus on the creative side. We have looked at how to create a contact us page in SvelteKit and integrate with Supabase in this article.

Let us know your thoughts on this and anything else on your mind in our discord server

Discord - https://discord.gg/AUjrcK6eep

Introduction to Svelte Derived Store

Eternal Dev — Sat, 01 Jan 2022 07:12:53 +0000

We have already covered the Writable and Readable store in the previous articles. In this article, we will learn how to make use of derived store from Svelte. If you want a refresher on those topic, have a look at the following two topics

https://www.eternaldev.com/blog/introduction-to-svelte-stores/

https://www.eternaldev.com/blog/introduction-to-svelte-readable-store/

When to use Svelte derived store

When you want to perform on client side filtering based on user input, then using a derived store can be a good option. Store the actual data in the store and then use another derived store to store just the filtered options.

In general, if you want to derive another data from a store value and want that value to update every time the store updates, you can use derived store

Let’s skip these generic definition and see a practical example. We will implement a client side search on a list of post we have fetched.

What are we building today ?

Building a home page which will have a list of post and then a search box to filter the post based on the search. We will pull the data from the Placeholder API which will return a total of 200 posts. When the user enter the text in the search box, we will use the derived store to filter the posts and show the filtered post to the user.

Create a derived store

Creating a derived store can be done after import derived from svelte/store. It needs to be dependent on either a writable or readable store and the value of this store is recalculated when one of its dependency changes

Create a new file called postStore.svelte inside the new folder called store

import { writable, derived} from "svelte/store";
import type { Writable } from "svelte/store";

type Post = {
    title: string;
    body: string;
}

export const allPostStore: Writable<Post[]> = writable([]);
export const filteredText: Writable<string> = writable("");

export const filteredPostStore = derived([allPostStore, filteredText], ([$allPostStore, $filteredText]) => {
    return $allPostStore.filter((item) => item.title.includes($filteredText));
})

Let’s breakdown the above code

We are importing the needed items from svelte/store
We are creating a Post type which fits the response form the API (placeholder post API)
Create allPostStore writable store which will be used to store the list of post from the API
Create filteredText writable store which will store the value of the text entered in Search input text
Finally, create the derived store, which will take the other two stores as dependencies as the first argument in array. Second argument is function which will have access to the dependent stores.
Then we can filter the all post list and only include the post which contains the search text in the title.

Create a component to use derived store

Create a new file called PostDisplay.svelte and add the following code

<script lang="ts">
    import {onMount} from "svelte";
    import {allPostStore, filteredPostStore, filteredText} from '../store/postStore';

    let postPromise;

    onMount(() => {
        postPromise = fetch('https://jsonplaceholder.typicode.com/posts').then((data) => data.json()).then((post) => {
            $allPostStore = post;
        });
    })
</script>

Import all the store from the ../store/postStore. This will give us access to the store to read and write content
Add the onMount life cycle method which will be called on the component being rendered on the screen
Call the Placeholder API to fetch a list of posts and then store the data in the $allPostStore store.

Now we have access to all the post. When the user enters the search text, we can do front-end filtering of the list and display only the post which match the search text. This is where our derived store helps.

We store the post value in the $allPostStore but we can use the derived store variable to display the post. This means that the original list of all the post is not disturbed and we get a new filtered list every time the search text changes. Sweet!

<h1>Posts</h1>

{#await postPromise}
    <h2>Loading....</h2>
{:then post}

    <input type="text" placeholder="Search..." bind:value={$filteredText} name="search"/>

    <div class="post-container">
        {#each $filteredPostStore as post}
            <h3>{post.title}</h3>
            <p>{post.body}</p>
        {/each}
    </div>

{:catch error}
    <h3>Error while loading the data</h3>
{/await}

We are using the await svelte syntax to make our life easier and then show the loading and error message.
Input field value is being linked to $filteredText which is the store variable using bind:value. So it automatically updates the store value. Wow!
Using the #each syntax, we can iterate through the derived store $filteredPostStore and display the post in a list

Final Result

Introduction to Svelte Readable Store

Eternal Dev — Wed, 29 Dec 2021 05:20:09 +0000

Store in Svelte are a very good way to keep the data and component logic separate and have access to those data across multiple components. In this article, we will learn how to make use of readable store from Svelte

When to use Svelte Readable store ?

You might have some data which needs to be shared across component but components should not update the values. You can use this when building a stock market app where the data refreshes every second. The components should not update the data but can read the data to display in the UI.

To understand this, Let’s build an app which will get a new user data every 10 seconds and displays the user data on the screen.

Creating a readable store

Let’s start by creating an new Svelte with Typescript project using Vite. You can follow this post to create a new project

https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/

After setting a new project, you can add a new folder called stores and create a new file called userStore.ts

import { readable } from "svelte/store";

type UserData = {
    id: string;
    firstname: string;
    lastname: string;
}

export const user = readable(initialData, (set) => {

});

Let’s break down the code

We are importing readable from the “svelte/store”
We are adding UserData typescript type which will be used to store the data for the user.

Calling API inside readable store

Since its readable store, we can only update the value of the store inside the store function. In our case, let’s call an API to fetch the data every 5 seconds and update the readable store.

readable store takes an initial value as the first argument. Second argument is the start function which has a set callback function. set callback is used to set the value of the store and cannot be used outside since its read-only for other components.

start function return a stop function. This is the interesting part as you can use these to perform cleanup when you store variable is not used by anyone.

The start function is called when the store gets its first subscriber and stop is called when the last subscriber unsubscribes.

const initialData: UserData = {id: '123', firstname: 'First Name', lastname: 'Last Name'};

export const user = readable(initialData, (set) => {
    const userApiInterval = setInterval(() => {

        fetch('https://randomuser.me/api/').then((data) => data.json()).then((user) => {
            const {first, last } = user.results[0].name;
            const {value} = user.results[0].id;
            const newUser: UserData = {
                id: value,
                firstname: first,
                lastname: last
            }
            set(newUser);
        }).catch((ex) => {
            set(null);
        })

    }, 5000);

    return () => clearInterval(userApiInterval)
})

In our example, we are calling the setInterval in the start function and calling an API which will return random user data. We are using the set function to set the new data.

The start function returns a stop function which call the clearInterval in this case so as to cleanup the interval in the browser when there is no subscribers to this store.

If you want to know about the API used here to get random user data, check this link. It has a lot more data about the user than what is used in this example.

Create component to use readable store

Create a new UserDisplay.svelte file in the lib folder.

<script lang="ts">
    import {user} from '../store/userStore';
</script>

{#if $user != null}
      <h1>{$user.firstname} {$user.lastname}</h1>
{:else}
    <h1>Error while loading the data</h1>
{/if}

Just import the store from ../store/userStore and the use the variable
Check if the user value is not null and display the value
If the value is null, show error message

Result

Conclusion

Readable store is a useful tool in the toolbox for svelte developers. I can help in reducing the code size and help prevent unwanted updates to the store data.