Svelte is an up and coming front end framework for developing front end web apps.
It’s simple to use and lets us create results fast.
In this article, we’ll look at special Svelte elements and how we can use them.
svelte:component
We can use the svelte:component
element to load components dynamically. It takes a this
prop which accepts a component object to load.
For instance, we can use it as follows:
<script>
import Foo from "./Foo.svelte";
import Bar from "./Bar.svelte";
let component = Foo;
const toggle = () => {
component = component === Foo ? Bar : Foo;
};
</script>
<button on:click={toggle}>Toggle</button>
<svelte:component this={component}/>
In the code above, we have the toggle
to set component
to the component we want to load by toggling between Foo
and Bar
as the value of component
.
Then we pass component
into the this
prop to load the component.
svelte:window
We can use the svelte:window
component to add listeners to the window
object.
For instance, we can use it as follows:
<script>
let key;
const handleKeydown = e => {
key = e.keyCode;
};
</script>
<p>{key}</p>
<svelte:window on:keydown={handleKeydown}/>
The code above attaches the handleKeydown
to the window
object. handleKeydown
gets the keyCode
from the event object e
and then sets the value to key
.
key
is then displayed in a p element. Then when we press on keys then we see the key code of the key that’s pressed.
We can also add event modifiers like preventDefault
to svelte:window
like any other DOM element.
Also, we can bind to certain properties of window
such as the following:
innerWidth
innerHeight
outerWidth
outerHeight
scrollX
scrollY
online
— an alias forwindow.navigator.onLine
All properties except scrollX
and scrollY
are read-only. For instance, we can write the following to display those values on the screen:
<script>
let innerWidth;
let innerHeight;
let outerWidth;
let outerHeight;
let scrollX;
let scrollY;
let online;
</script>
<p>{innerWidth}</p>
<p>{innerHeight}</p>
<p>{outerWidth}</p>
<p>{outerHeight}</p>
<p>{scrollX}</p>
<p>{scrollY}</p>
<p>{online}</p>
<svelte:window
bind:innerWidth
bind:innerHeight
bind:outerWidth
bind:outerHeight
bind:online
bind:scrollX
bind:scrollY
/>
The values are automatically updated since we used bind
to bind the values to the variables.
svelte:body
svelte:body
element allows us to listen for events in that’s fired on document.body
.
For instance, we can use it to listen to mouse movements on the body element as follows:
<script>
let clientX;
let clientY;
const handleMousemove = e => {
clientX = e.clientX;
clientY = e.clientY;
};
</script>
<p>{clientX}</p>
<p>{clientY}</p>
<svelte:body on:mousemove={handleMousemove} />
The code above watches for mouse movements in the body adding the on:mousemove
directive to svelte:body
and setting the handleMousemove
handler function as the value.
Then we get the mouse position by getting the clientX
and clientY
from the event object e
and setting them to variables.
Finally, we display those values by interpolating those variables in the p elements.
Therefore, when we move the mouse inside the body, then we see the mouse position coordinates displayed.
svelte:head
The svelte:head
elements let us insert elements inside the head
of our document. For instance, we can use it to reference an external CSS file by writing:
<svelte:head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</svelte:head>
<h1 class="text-primary">foo</h1>
In the code above, we just put the link tag for Bootstrap CSS in between the svelte:head
tags. Then we can see the word foo with the color blue.
In server-side rendering mode, svelte:head
‘s contents are returned separated from the rest of the HTML.
svelte:options
svelte:options
lets us specify compiler options. We can change the following options by passing them as props:
immutable={true}
— Make the compiler do simple referential checks to determine if values have changedimmutable={false}
— The default choice. Svelte will be more conservative about whether or not mutable objects have changedaccessors={true}
— Adds getters and setters for the component’s propsaccessors={false}
— The default choice.namespace="..."
— The namespace where this component will be usedtag="..."
— The name to use when compiling a component as a custom element.
For example, we can write the following to set the immutable
option to true
:
<svelte:options immutable={true} />
<h1>foo</h1>
Conclusion
Svelte’s special components let us access various parts of the DOM like window
and document.body
without hassle.
svelte:component
lets us dynamically load components.
Also, we can reference the svelte:options
component to set various app-wide options.