Introduction to Svelte (Part 3 of 3)

First, we need to set up VS Code and Svelte. Refer to Introduction to Svelte Part 1. (See Part 2)

For this post, we’ll cover LoadingSpinner, TextInput, and Modal components that we import into App.svelte. We are not going to cover Error component. Ii really just implements the Modal component. The code for App.Svelte is below:

The App.svelte code is fairly simple. The <script> section imports the five components that we are using for this application. First, we load the basic Header component. We’re not making in changes to this component.

We’re using a loadingInput variable along with the function loading to simulate a delay in loading the application so that you can see the loadingSpinner component. We are using the javascript built-in setTimeout function. The last thing we do is call the loading function. The spinner is loaded when the svelte {#if loadingInput} is true. When the page is loaded the loadingInput is set to false.

After the loadingSpinner finishes we load the TextInput components. The properties are similar on each component.:

• id: different for each component.
• label: the label that is to be displayed for the input.
• bind:value = variable: This property sets the variable which will use to access the component in the <script> section. Different for each component.
• validityMessage: the message to display for an invalid entry.
• controlType: either text or textarea. Determines which HTML element will be created.
• value: optional value to pass to the component.
• hasFocus: This a property that we are adding to the basic component to set the cursor into the element. Usually the first input element. Should only be set to true on one component.

Next, we define a Button component and bind and the click event to display the Modal component. In the buttonClick function, we check to see if a value is entered in each input component as display an alert if not. Otherwise, we display the Modal component.

Lastly, we have another svelte {#if}{/if} block to check the showModal variable. If true, we display the Modal component. The Modal component and on:cancel={cancelModal} event which is generated when the Close button is clicked in the Modal component.

The next component is the LoadingSpinner. We are using the default code for that.

Next, we’ll look at the TextInput component code:

We are going to look at the <script> code in some detail:

We start with the import onMount statement this imports the onMount command for our use, the onMount command executes when the component is first loaded. We use this command to check to see if the hasFocus variable is set to true. If it is, we set the focus of the control. This is a property and function that we have added to the supplied component.

Next, we define the variables that we’re going to use that have been exported by the component. Then we define inputControl which is a pointer to the HTML input or textarea element. Whichever one that has been created. We’ve added this variable to the supplied component.

Next is the touched variable where we store whether or not the input element has had an entry made.

After that the onMount entry which calls an anonymous function, () => {}, to check the variable and set the focus.

The last thing we added to the component is the blur function which removed anonymous function implementations from the HTML input/textarea elements on:blur events. In this function we do several things:

• Set valid to true before testing
• Set touched to true
• Validation for controlType textarea
• Set regular expression to numbers
• Match regular expression to value
• Set valid to false if hasNumber
• Validation for controlType text
• Check for only upper case characters
• Set valid to false if there are lower case characters

Finally, we’ll look at the Modal component. Let’s start with the HTML markup

The svelte {#if}{/if} checks the showModal variable and if true displays the Modal component. One thing I want to point out is that the markup between the <Modal></Modal> is inserted in the slot defined in the Modal component markup but any variables. like {inputOnText} refer to the page that contains the component.

Now we will examine the Modal component code and markup:

The script tag begins with some imports:

• createEventDispatcher from svelte
• fly, fade from svelte/transition
• Button component

We declare the export title and then create a dispatch event and a function to generate a dispatch(“cancel”) to propagate the cancel event up.

The <style> section applies the default component styles. We didn’t make any changes to the code.

The HTML markup section set an on:click={closeModal} to generate a cancel event along with setting up a slot to render provided content within the Modal component. Within the footer there is a second slot with a name of footer and includes a Button component with an on:click={closeModal} event handler to propagate the cancel event up.

That covers the remainder of the included example components. The components are just examples to be modified for whatever purpose, Hope you got something out of this 3 part series.

For a more in-depth look at Svelte, you can take a look at Amazon Book Web Development for Seniors and Juniors