DEV Community: Josh Jackson

Building a Desktop App using Svelte and Electron

Josh Jackson — Sat, 22 Feb 2020 19:49:01 +0000

I watched a talk the other day by Felix Riesberg who talked about using JavaScript and Electron to build desktop apps and it inspired me to see how easy using Svelte would be. Turns out it is super easy, and just works out of the box!

If you just want a starter template to make your app without reading the blogpost, I created a template here.

This blogpost will walk you through creating a basic markdown editor for the desktop using Svelte and Electron. We will be able to edit markdown files and see a side-by-side preview as well as Open Files, Create New Files and Save Files using the Electron API and NodeJS.

You can see a gif of the finished product on my blog: https://joshuaj.co.uk/building-desktop-app-svelte-electron

Let's get started!

Getting Setup 🐣

Clone the Svelte template: npx degit sveltejs/template svelte-markdown-editor
CD into the new directory and run npm install to install Svelte dependencies.
Run npm install electron marked which will install Electron and then the marked library which we will use to convert our markdown into HTML.
In the root of the project, create a main.js file, this will be our Electron entry point.
Inside of the package.json, change the start script from "sirv public" to "npm run build && electron main.js" which will build the Svelte app and then tell Electron to run it.
Edit the public/index.html file so that all paths have a . infront of them. EG: /build/bundle.css becomes ./build/bundle.css. Electron won't be able to find these files otherwise.
Finally, add the following meta tag to the head of the index.html file: <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />. This won't cause us any issues for this small application, but we will get a warning in our console if not.
Read more about this here

Connecting Svelte with Electron 🖇️

Now we have the boilerplate setup, let's connect our Svelte app with Electron by returning to the main.js file we previously created.

A basic Electron app consists of an app and a BrowserWindow so let's import these:

const { app, BrowserWindow } = require("electron");

The app is what we use to handle the lifecycle of the application and the BrowserWindow is the actual window that will render our Svelte app.

Start by creating a new BrowserWindow once the application is ready and quitting the app once all windows are closed:

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
});

app.on("window-all-closed", () => {
  app.quit();
});

Note we set nodeIntegration to true, this allows us to use NodeJS code within our Svelte files.

and then, underneath where you created your BrowserWindow, tell it to open the index.html file that Svelte outputs when built:

mainWindow.loadFile("./public/index.html");

Now, if you run npm start, a window should open showing the basic Hello World Svelte app.

Creating a Basic Markdown Editor 📝

Before we implement the ability to open, save and create new files using the Electron API, let's remove the Svelte boilerplate and implement a basic Markdown editor.

In the src/main.js file, remove the props argument:

const app = new App({
  target: document.body
});

Next, create a component called Editor.svelte:

<script>
export let markdown = "";
</script>

<style>
    section {
        width: 100%;
        min-height: 95vh;
        border: 0.1rem solid #333;
        flex: 1.5;
    }

    textarea {
        width: 100%;
        height: 100%;
        min-height: 95vh;
        resize: none;
        margin: 0;
        border: none;
    }
</style>

<section>
    <!-- svelte-ignore a11y-autofocus -->
    <textarea bind:value={markdown} autofocus/>
</section>

This component takes a prop called markdown and binds it to a text area so that the markdown variable automatically updates when our text area is updated. We also autofocus the text area and remove the accessiblity warning as our application only has one input and it is the main focus of the application.

and then create a component called Preview.svelte:

<script>
    import marked from "marked";
    export let markdown = "";
</script>

<style>
    section {
        width: 100%;
        min-height: 95vh;
        margin-left: 0.5rem;
        padding: 0.2rem;
        flex: 2;
        background-color: #f5f5f5;
    }

    section :global(*) {
        word-break: break-word;
        white-space: pre-wrap;
    }
</style>

<section>
    {@html marked(markdown)}
</section>

This component takes some markdown text, and then uses the marked library to convert it to html. We then directly output this onto the page using the Svelte {@html} tag.

There's nothing fancy with any of the styling, you'll note we use :global(*) to target everything under our section. This is because we want to target all of the HTML under the section but Svelte thinks that no HTML exists (because it is dynamically generated) so we would get the css-unused-selector warning if we just used *.

In the App.svelte file replace everything with:

<script>
  import Editor from "./Editor.svelte";
  import Preview from "./Preview.svelte";

  let markdown = "# You can enter markdown here\n\n**This text is bold**\n\n_This text is italic_";

  let activeFilePath;
</script>

<style>
main {
    display: flex;
    flex-direction: column;
}

.file-path {
    font-weight: bold;
}

.editor-and-preview {
    display: flex;
    flex-direction: row;
}
</style>

<main>
    <p class="file-path">
        {activeFilePath ? activeFilePath : "Press 'Save' or hit 'CTRL + S' to save"}
    </p>

    <div class="editor-and-preview">
      <Editor bind:markdown />
      <Preview {markdown} />
    </div>
</main>

Here we store a markdown variable and tell Svelte to bind it to whatever the value of markdown is inside of the Editor component which we know is bound to the text area input. So whatever we type is stored inside markdown which we then pass into the Preview component to be rendered as HTML.

We also store an activeFilePath variable, which we will use later on to show which file is open in the editor, for now, whilst no file path exists, just show the user a message telling them how to save.

Now if you run npm start you should have a usable markdown editor with a live updating preview.

Saving Files with Electron 💾

Now we can write our markdown, let's give the user the ability to save what they've written.

In the App.svelte file, import the ipcRenderer which will allow us to both listen for messages from Electron as well as send messages to Electron:

const { ipcRenderer } = require("electron");

Inside the same script tag, let's use the ipcRenderer to listen for a "savefile" message (the message name can be anything you want), we will eventually send this message from Electron when the user clicks a menu item or uses CTRL + S.

ipcRenderer.on("savefile", () => {

});

Inside of this function, we want to first check if there is an activeFilePath and if there is, we want to send a message to Electron telling it to save the content inside of the markdown variable to the file at the activeFilePath and if there isn't, we want to send a message telling Electron to ask the user where the file should be saved.

This looks like the following:

ipcRenderer.on("savefile", () => {
    if (activeFilePath) {
      ipcRenderer.send("saveexistingfile", {
        path: activeFilePath,
        content: markdown
      });
    } else {
      ipcRenderer.send("savenewfile", markdown);
    }
  });

This won't do anything yet, as we haven't implemented the corresponding message listeners and functionality in our main process (main process is what I have been calling "Electron"). Let's do that next, starting with saving a new file.

In the main.js file, import Menu, MenuItem, ipcMain and dialog from electron and fs from the nodejs standard library:

const {
  app,
  BrowserWindow,
  Menu,
  MenuItem,
  ipcMain,
  dialog
} = require("electron");

const fs = require("fs");

next, create a function called createNewFile inside of the app.whenReady().then callback that takes a string, this function should open a dialog box to ask the user to name a file and select a location to which it should be saved and then save the file at that location, with that name containing the string provided.

*Documentation for dialog can be found at https://www.electronjs.org/docs/api/dialog

Inside of the app.whenReady().then callback:

const createNewFile = content => {
    dialog.showSaveDialog(mainWindow, {
        title: "Create New File",
        properties: ["showOverwriteConfirmation"],
        filters: [
          {
            name: "Markdown Files",
            extensions: ["md"]
          }
        ]
      })
      .then(({ canceled, filePath }) => {
        if (canceled) return;

        fs.writeFile(filePath, content, err => {
          if (err) return;
        });
      });
  };

In the code above, we use Electron.dialog to open a save dialog that will only save (and show) markdown files and then, if the user didn't close the dialog, we use the fs module to write the file to the file path they selected.

Now we have the function, let's setup the code to call it when we receive a "savenewfile" message.

In the same place, write the following code:

ipcMain.on("savenewfile", (e, content) => {
    createNewFile(content);
  });

There's one last step before we can save a new file, if you remember, the message listener above only triggers when our Svelte app sends a "savenewfile" message, which can only be sent when our Svelte app receives a "savefile" message. So we must send a "savefile" message from Electron when the user selects save from the menu or hits CTRL + S.

You do this by creating a new Menu inside of the app.whenReady().then callback and then adding MenuItem objects to it like so:

const menu = new Menu();

menu.append(
    new MenuItem({
      label: "Save",
      accelerator: "CmdOrCtrl+S",
      click: () => mainWindow.webContents.send("savefile")
    })
  );

Here we are saying, when CTRL + S is pressed, or our menu item with the label "Save" is clicked, send a message to the BrowserWindow (our Svelte app) with the name "savefile".

One last thing, we must set our Menu as the ApplicationMenu like so:

Menu.setApplicationMenu(menu);

Now if you run npm start, type some markdown, and then hit CTRL + S (or the menu item). You should see a save dialog and when you enter a name and click save, your file should now have saved to the directory you chose.

The next part is adding the message listener for when we want to save an existing file. In the same place as the previous one, add the following:

ipcMain.on("saveexistingfile", (e, { path, content }) => {
    fs.writeFile(path, content, err => {
      if (err) return;
    });
});

This just uses the fs module to create a new file at an existing path which will overwrite the existing file with the new contents.

If this is confusing, here's a diagram showing how messages flow between the Renderer process (our Svelte App) and the Main process (Electron):

(Open in new tab for fullscreen view)

You can also read more about the Renderer and Main processes here

Next we will add the ability to open/save an existing file, or to create a new one using the menu.

Opening/Saving Existing Files 📂 💾

This works in much the same way, I would say even easier!

Start by, in the App.svelte file, creating a new message listener that listens for a "fileopened" message that contains a file path and the content inside of the file. When we get this message, update the variables so that Svelte will update our HTML:

ipcRenderer.on("fileopened", (e, { path, content }) => {
    activeFilePath = path;
    markdown = content;
});

and then in the main.js file, in the same place as the createNewFile function, create a openFile function that will present the user with similar dialog but for choosing an existing file:

const openFile = () => {
    const file = dialog.showOpenDialogSync(mainWindow, {
      properties: ["openFile"],
      filters: [{ name: "Markdown Files", extensions: ["md"] }]
    });

    if (file) {
      fs.readFile(file[0], "utf8", (err, data) => {
        if (err) return;

        mainWindow.webContents.send("fileopened", {
          path: file[0],
          content: data
        });
      });
    }
};

We get the user's selection, read the file and file path and then send a "fileopened" message to our Svelte app. Whilst we're at it, let's also send a "fileopened" message in the createNewFile function so that when we save the new file, it updates the activeFilePath:

...})
      .then(({ canceled, filePath }) => {
        if (canceled) return;

        fs.writeFile(filePath, content, err => {
          if (err) return;

          mainWindow.webContents.send("fileopened", {
            path: filePath,
            content
          });
        });
      });

Next, let's add a menu item and keyboard shortcut for opening files:

menu.append(
    new MenuItem({
      label: "Open",
      accelerator: "CmdOrCtrl+O",
      click: openFile
    })
);

Now if you run npm start, you should be able to click the "open" button in the menu or hit CTRL + O and be presented with a file browser dialog. If you select an existing markdown file, it should open in the editor. We're pretty much there!

Finally, add a new menu item that will create a new markdown file with some template content:

menu.append(
    new MenuItem({
      label: "Create New File",
      accelerator: "CmdOrCtrl+N",
      click: () =>
        createNewFile(
          "# You can enter markdown here\n\n**This text is bold**\n\n_This text is italic_"
        )
    })
);

🎉 You should now have a working markdown editor!

Building for your current platform 🏗️

To package the app, we can use a CLI tool called electron-packager

First start by installing the package locally: npm install electron-packager --save-dev
Then remove the sirv-cli package from the package.json file (we don't need this for an electron app).
Move the electron package into the devDependencies
Add a "main" property to the package json that points to the entry file: "main": "./main.js"
Add a "productName" property to the package json: "productName": "markdown-editor"
Add a "package" script to the scripts: "package": "npm install && npm run build && electron-packager ."
Run npm run package to build your electron app for your current platform

This will create a folder with your executable in (on windows) and the relevant files if on mac os. You can check out the electron-packager docs here for more information.

Conclusion

With very little code we've managed to build a very basic markdown editor using Svelte and Electron. This blogpost was really just a whistle-stop tour of how to get started, if you want to properly make something, please use the official Electron docs or more indepth tutorials.

Some Extra Notes

We used the Electron and Node APIs by sending messages between the Renderer process (Svelte) and the Main process (Electron). An alternative to this is to use the Electron and Node APIs directly in our Svelte files.
This was my first experiment with Electron, please take this guide/tutorial as more of an intro to how it could be used and not how it should be used.

PS: I will be giving a really short lightning talk on this in March at the Svelte London Meetup.

Lets Create: A Data Visualization using Svelte

Josh Jackson — Wed, 08 Jan 2020 14:28:01 +0000

If you haven't heard of Svelte, it is a relatively new JavaScript framework that challenges the norm by shifting the bulk of the work from the browser to the compile/build step.

In doing that, it brings many benefits, most notably, the ability to ship less code to the browser (as you don't need the entire library like with frameworks such as React or Vue) as well as a bunch more stuff that I won't be talking about in this article as, in my opinion, the main benefit of Svelte is how easy it is to get started and how nice it is to use from a development perspective.

What are we going to build?

So now we have gotten the intro out of the way, let's talk about what we're going to build and why.

When learning a new language/framework it is often de-facto to just build a todo app as it covers most bases and lets you see its usage within a sort of real-world application but to me a todo app is really boring, I use one everyday but I don't really want to build one. That's where this idea comes in.

We're going to create a very simple Data Visualization using Svelte. This data visualization will show, on a map of the UK & Ireland, which regions have contributed most to the English Premier League title wins since its creation in 1992. Don't worry if you don't like sports, everything is applicable outside of sports. The main reason I chose this topic is that there is so much data available, but it is also scoped small enough for an article (hopefully 🤞).

You can find a working demo of this data visualization at the following link: https://pjaerr.github.io/Svelte-Data-Vis-Premier-League/

which looks like this:

Setup 🛠️

I won't go too deep into setting up Svelte as there are already guides on this, but the steps below should be enough to get started:

Run npx degit sveltejs/template premier-league-data-vis
Run cd premier-league-data-vis
Run npm install
Delete the contents of the default App.svelte and main.js files.
Run npm run dev

If you are using VS Code, there is a really useful extension called Svelte for VS Code by James Birtles that gives you intellisense for .svelte files however you can follow this article without it.

The Data 📊

For this project we will need the following data:

Each team that has won the premier league since its creation in 1992.
For each team that has won, the season they won and the squad that played in the season they won.
A list of players from the UK and Ireland who had atleast 1 appearance for a winning team and the region they were born in.

To get the football data I used the following website and made it into something that we can work with which you can find in the github repo here

The data looks like the following where it is split up by region and that region has an array of players from the region who have won premier league titles, it also has a region's overall appearances (every player's appearances added together). For each player, we just list the seasons they won, who they won it with and how many appearances they had. It looks like the following:

{
    name: "Berkshire",
    players: [
      {
        name: "Neil Webb",
        seasons: [
          {
            year: "1992/1993",
            team: "Manchester United",
            appearances: 1
          }
        ]
      },
      {
        name: "Stephen Hughes",
        seasons: [
          {
            year: "1997/1998",
            team: "Arsenal FC",
            appearances: 16
          }
        ]
      },
      ...etc

In your project, create a folder in src called Data and then create the following files:

data.js - This should hold the data for each region found here
regionPaths.js - We'll get to this in the next section, but this will hold each region of our map as an actual SVG path to be drawn to the screen.
getRegionData.js - This will export a function that takes a region's name and will return all the data associated with that region.

If you haven't already, populate the data.js file and the regionPaths.js file with the data at the following link: https://github.com/Pjaerr/Svelte-Data-Vis-Premier-League/tree/master/src/Data

Next, inside of the getRegionData.js file, import the data.js file and work out what the highest number of appearances is for any single region as we will need this to determine how much a region has contributed to premier league wins.

import data from "./data";

//Obtain the highest number of appearances that any single region has
let highestNumberOfAppearances = 0;

for (const region of data) {
  if (region.overallAppearances > highestNumberOfAppearances) {
    highestNumberOfAppearances = region.overallAppearances;
  }
}

The end goal of this data visualization is to have a map of the UK where each region is coloured in based on their contribution to premier league title wins. To do this we must determine each region's contribution and then assign a colour based on that.

We'll be using the following colour palette where green = higher contribution:

In the getRegionData.js file underneath the code you've already written, store the colours in an array:

const colourPalette = ["#38003c", "#2a404e", "#274c52", "#265053", "#255454", "#245956", "#226659","#1f735d", "#1c8060", "#198c64", "#169968", "#14a66b", "#11b26f", "#0ebf73", "#0bcc76", "#08d97a",
"#06e67e", "#03f281", "#00ff85"];

Next, we want to map the overall appearances of a region to a value in the array of colours. We do this using a formula which maps (0 to highestNumberOfAppearances) in the range of (0 to length of colours array) and then just create a colour property on each region with the hex value or to the default dark colour if they haven't contributed at all.

Place the following code below the colour palette array:

//Map the number of appearances (0 to highestNumberOfAppearances) to a HEX value in the array
for (const region of data) {
  const index = Math.round(
    (region.overallAppearances / highestNumberOfAppearances) *
      (colourPalette.length - 1)
  );

  if (region.overallAppearances <= 0) {
    region.colour = "rgba(51, 51, 51, 0.5)";
  } else {
    region.colour = colourPalette[index];
  }
}

You can read more on the maths behind this here if you are interested.

Finally, in the getRegionData.js file, create a function that takes a region's name and then returns the actual data for that region. We also want to export this function as the default function so it can be imported and used throughout our application to gain access to the data:

//Export a function that takes a region name and will return the region for that name.
const getRegionData = regionName => {
  return data.filter(region => region.name === regionName)[0];
};

export default getRegionData;

In the next two sections we will make sure Svelte is working and then create a component that holds all of our SVG paths creating a full SVG map of the UK.

The Map 🗺️

Now we have our data, we need the map. For this project I am using a map of the UK and Ireland that I found here. We can download this map as an SVG but we won't be directly using it as an SVG. For our purposes we need each <path> within the SVG to be seperated out. This is where our regionPaths.js file comes in.

Feel free to just copy the contents of the file from Github to speed things up if you haven't already.

Your regionPaths.js file should look something like this:

export default [
  {
    svgPath: "M642.97,979.16L643.67,982.94L647.4,986...",
    name: "Bedfordshire"
  },
  {
    svgPath:"M612.68,1061.2L613.28,1059L614.67,1058.64L...",
    name: "Berkshire"
  },
  ...
]

The `<MapContainer>` Component 🗺️ → 📦

This is our first component, but before we begin, let's write the code that will actually hold the application.

Edit the main.js file to include the following code:

import App from "./App.svelte"

//Here we use intro:true so that transitions run on initial load.
const app = new App({
  target: document.body,
  intro: true,
})

export default app

This is the entry file where we create a new instance of the App.svelte component and tell it to add itself to the body of the page using target: document.body.

We then tell it that we want any animations/transitions on this component and its children to happen when we first load the component (By default Svelte only plays animations/transitions after a state change). We do this by adding the intro: true property, this is important as we want to animate the map by drawing it when you first load the page.

Once you have done this, you won't see anything on the page as you need to edit the App.svelte file. As a test, let's pull in our Regions and put their names onto the screen using a Svelte #each loop.

In the App.svelte file:

<script>
  import regions from "./Data/regionPaths.js"
</script>

{#each regions as { name }}
<h1>{name}</h1>
{/each}

Here we import the array from regionPaths.js as you do with normal JavaScript, and then create an #each loop that will put an <h1> tag onto the page with the name of the region inside for each item in the regions array.

The page should have hot-reloaded (at localhost:5000) and you should now see the name of each region on the page.

With the basic setup out of the way, let's create the <MapContainer> component. This component will just be an SVG that lets us put any valid SVG code inside of it and it will be used to house the svgPaths of the regions. This way we can seperate the regions (which are just svg paths) from their parent SVG element.

Start by creating a folder called Components inside of the src folder. Inside of that folder, create a new file called MapContainer.svelte

Write the following in the MapContainer.svelte file:

<script>
  let width = "100%";
  let height = "100%";
</script>

<svg width="{width}" height="{height}"></svg>

This is a very simple component that defines a width and height and then creates an SVG element with that width and height. Currently nothing will display on the page as there is nothing inside of the SVG and we haven't imported it into our App.svelte file.

Let's make it so we can pass in a width and height to our component when we create it. In Svelte you do this by placing export in front of variables within the JavaScript. This tells Svelte that we wish to provide values when we create an instance of the component.

We can also simplify the usage of the width and height as attributes because they are named the same by just removing the width= part on the svg element.

<script>
  export let width = "100%";
  export let height = "100%";
</script>

<svg {width} {height}></svg>

As we have given the variables a default value, they will fallback to "100%" if nothing is passed into the component, you can also choose not to provide a default value and in that case it will default to undefined when nothing is provided.

Let's replace the example code with our component.

In the App.svelte file:

<script>
  import MapContainer from "./Components/MapContainer.svelte"
</script>

<MapContainer width="800px" height="600px" />

If you inspect the page using dev tools you should be able to see an empty SVG element. This is obviously very exciting but let's turn it into something more useful!

First remove the export from the width and height variables, these will be decided based on the elements inside of the SVG later on so no values need to be provided.

Next, we are going to create something called a <slot> inside of our SVG element. A slot is a feature of Svelte that allows us to decide where elements placed inside of a component when it is created should appear inside the actual component.

In the MapContainer.svelte file:

<script>
  let width = "100%";
  let height = "100%";
</script>

<svg {width} {height}>
  <g class="regions">
    <slot />
  </g>
</svg>

This means that we can do something like the following in the App.svelte file:

<script>
  import MapContainer from "./Components/MapContainer.svelte"
</script>

<MapContainer>
  <rect width="300" height="100" style="fill:red" />
</MapContainer>

Inside of our component, it will turn into:

<svg {width} {height}>
  <g class="regions">
    <rect width="300" height="100" style="fill:red" />
  </g>
</svg>

as the contents inside of <MapContainer> </MapContainer> are placed inside of the <slot>.

You should now see a red rectangle on the screen.

Using what we've written, let's get our map onto the page.

Add the #each loop back into the App.svelte file, but this time pull through and put the svgPath onto the page and inside of our MapContainer component:

<script>
  import regions from "./Data/regionPaths.js"
  import MapContainer from "./Components/MapContainer.svelte"
</script>

<MapContainer>
  {#each regions as { name, svgPath }}
    <path d="{svgPath}" />
  {/each}
</MapContainer>

You should now see the full map on the page. What we've just done is essentially re-create the original SVG but as Svelte components.

You may notice that the map is too big. We can do a few things to fix this, first start by providing some structure in the App.svelte file:

<main class="app">
  <div class="map-container">
    <MapContainer>
      {#each regions as { name, svgPath }}
        <path d="{svgPath}" />
      {/each}
    </MapContainer>
  </div>
</main>

and then add the following styles:

  .app {
    display: flex;
  }

  .map-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    justify-content: center;
  }

  @media (max-width: 860px) {
    .app {
      flex-direction: column;
    }

    .map-container {
      position: relative;
    }
  }

Once you've done that, we can use the onMount function that Svelte provides to run some code when our component is added to the page. This code should get the bounding box of our SVG once it has content inside of it and then update the width and height to fit that bounding box.

In the MapContainer.svelte file, start by importing the onMount function from Svelte:

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

and then create a local variable for the width, height and then a variable to hold a reference to the SVG element:

<script>
  import { onMount } from "svelte"

  let svg;
  let width = "0";
  let height = "0";
</script>

next, create a function called resizeSVG that updates the width and height variables based on the SVG's bounding box and pass this function into Svelte's onMount function:

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

  let svg;
  let width = "0";
  let height = "0";

  const resizeSVG = () => {
    let svgBoundingBox = svg.getBBox();

    width = svgBoundingBox.x + svgBoundingBox.width + svgBoundingBox.x;
    height = svgBoundingBox.y + svgBoundingBox.height + svgBoundingBox.y;
  };

  onMount(resizeSVG);
</script>

finally, in the HTML add the calculated attributes to the SVG element and bind the element to the svg variable:

<svg viewBox="0 0 {width} {height}" height={window.innerHeight - 10} bind:this={svg}>
  <g class="regions">
    <slot />
  </g>
</svg>

As you can see, we import onMount from Svelte and then we pass it a function to run. This function does what we described above and, when the width and height change, Svelte automatically re-renders our svg element with the updated values.

We also have a new variable called svg and bind:this={svg} on our svg element. All this does is store a reference to the actual svg element inside of the svg variable. In our use case, this is like calling document.querySelector(svg) in vanilla javascript.

This works as expected but we also want this to happen when the page is resized, for this Svelte provides a special meta tag called svelte:window which we can use to bind our resize functionality to the window being resized as well as binding the height of the window so our SVG is always up to date.

Start by creating a new variable in the JavaScript

let windowHeight = 10;

and then create a new element in the html that takes the resizeSVG function as a callback and also binds the inner height of the window to our windowHeight variable:

<svelte:window on:resize={resizeSVG} bind:innerHeight={windowHeight} />

and also update the SVG element so it uses the new windowHeight variable instead of window.innerHeight:

<svelte:window on:resize={resizeSVG} bind:innerHeight={windowHeight} />

<svg viewBox="0 0 {width} {height}" height={windowHeight - 10} bind:this={svg}>
  <g class="regions">
    <slot />
  </g>
</svg>

This should result in the map fitting within the window even when it is resized.

You can look into the svelte:window tag here and all the cool things that can be done with it.

And That's it! It might seem like a lot of effort just to get our SVG onto the page when we could have just put it directly onto the page but this allows us to directly manage our regions outside of the SVG, which is important as you'll find out in the next section.

The Basic `<MapRegion>` Component 🗺️ → 📦 → 📍

Now we have the SVG as a component, I think it only makes sense to also make the paths into components.

Create a new component called MapRegion.svelte and make it take an svgPath that it will output onto the page.

In the MapRegion.svelte file:

<script>
  export let svgPath;
</script>

<path class="path" d="{svgPath}" />

and then in the App.svelte file, import the new component and replace the direct path:

<MapContainer>
  {#each regions as { name, svgPath }}
    <MapRegion {svgPath} />
  {/each}
</MapContainer>

Let's say we wanted to be able to specify a fill colour for the path, we'd simply export a variable and then use that variable like so:

In the MapRegion.svelte file:

<script>
  export let svgPath;
  export let fillColour = "#333";
</script>

<path class="path" d="{svgPath}" fill="{fillColour}" />

In the App.svelte file:

<MapContainer>
  {#each regions as { name, svgPath }}
  <MapRegion {svgPath} fillColour="red" />
  {/each}
</MapContainer>

We can also do the same thing for stroke colour and stroke width like so:

In the MapRegion.svelte file:

<script>
  export let svgPath;
  export let fillColour = "#333";
  export let strokeColour = "#fff";
  export let strokeWidth = "1px";
</script>

<path
  class="path"
  d="{svgPath}"
  fill="{fillColour}"
  stroke="{strokeColour}"
  style="stroke-width: {strokeWidth}"
/>

In the App.svelte file:

<MapContainer>
  {#each regions as { name, svgPath }}
  <MapRegion
    {svgPath}
    fillColour="red"
    strokeColour="white"
    strokeWidth="1px"
  />
  {/each}
</MapContainer>

This is the very basic <MapRegion> component. In the next section we'll spice things up a bit by adding a svelte transition to our map regions so they draw themselves.

Adding Transitions to our `<MapRegion>` Component 📍 → 💫

One of the coolest parts about Svelte is how easy it makes animation. This is mostly because it treats it as first-class functionality.

We are going to make use of animation by using the Transition directive.

To get up and running, all we need to do is import the draw transition at the top of the <script> tags:

import { draw } from "svelte/transition";

and then add the transition:draw attribute to the SVG path which tells it to draw itself:

<path
  transition:draw
  class="path"
  d="{svgPath}"
  fill="{fillColour}"
  stroke="{strokeColour}"
  style="stroke-width: {strokeWidth}"
/>

That results in an SVG that draws itself through each path drawing itself individually:

but we can make it better, let's start by specifying the speed at which we want to draw each path, we do this by changing the attribute to be:

transition:draw={{ duration: 1500 }}

where 1500 is the time in milliseconds the animation should take.

Now it's kind of hard to see the actual animation because of the conflicting colours. Let's flip the stroke colour and fill colour for the duration of the animation. We first start by defining a new variable in our script tags.

let transitionEnded = false;

and then on the path, we can add an event listener that will set transitionEnded to true once the transition has ended. Svelte handles all of this for us as it knows when the draw transition finishes.

<path
  transition:draw={{ duration: 1500 }}
  on:introend={() => (transitionEnded = true)}
  class="path"
  d="{svgPath}"
  fill="{fillColour}"
  stroke="{strokeColour}"
  style="stroke-width: {strokeWidth}"
/>

Now let's add a condition to the fill and stroke attributes to flip the colours if transitionEnded is false.

  <path 
    fill={transitionEnded ? fillColour : strokeColour}
    stroke={transitionEnded ? strokeColour : fillColour}
  />

As a final touch, let's add a CSS transition to the fill attribute so that when the fill colour is set, it doesn't just flash onto the screen.

Add the following CSS rule to the <style> tags:

<style>
  .path {
    transition: fill 0.5s ease;
  }
</style>

If everything has gone smoothly, we should end up with something that looks like the following, excluding the choppy gif of course:

Adding Interactivity 🖱️ → 🗺️

Now the map has some animations, let's take it a step further and make it interactive. In this section we will be making each <MapRegion> log it's name to the console when it is clicked.

First navigate to the <MapRegion> component and add an empty on:click event to the svg path.

<path 
  on:click
  transition:draw={{ duration: 1500 }}
  on:introend={ () => (transitionEnded = true)}
  d={svgPath}
  class="path"
  fill={transitionEnded ? fillColour : strokeColour}
  stroke={transitionEnded ? strokeColour : fillColour}
  style="stroke-width: {strokeWidth}"
 />

This says we don't want to handle the on:click event in our <MapRegion> component, rather we want to bubble it up and instead handle it wherever our <MapRegion> component is used.

We can do this easily by adding the same on:click event to our <MapRegion> component but instead of it being empty we want to print the name of the component to the console.

In the App.svelte file:

<MapContainer>
  {#each regions as { name, svgPath }}
  <MapRegion
    on:click={() => { console.log(name + ' clicked!') }}
    {svgPath}
    fillColour="red"
    strokeColour="white"
    strokeWidth="1px"
  />
  {/each}
</MapContainer>

If you open the browser and click on the different regions of the map, you should see the name of that region in the console.

Now let's make it a bit more obvious by storing which region was last clicked and showing it on the page inside of a <h1>

Start by creating a variable in the App.svelte file:

let activeRegion;

and then in the on:click event handler replace the console.log with:

activeRegion = name;

Finally, add a <h1> tag to the page that just contains the active region:

<main class="app">
  <h1>{activeRegion}</h1>
  <div class="map-container">
    <MapContainer>
      {#each Regions as { name, svgPath }}
        <MapRegion
          on:click={() => {
            activeRegion = name;
          }}
          {svgPath}
          fillColour="red"
          strokeColour="white"
          strokeWidth="1px" />
      {/each}
    </MapContainer>
  </div>
</main>

If you check the browser, you'll notice that it says undefined, this is because we haven't set any text by default, you can just set the default text of activeRegion to be something like "No region selected" for the time being.

Now if you click on any of the regions you'll see that it shows the region we last clicked. Although this seems simple it is a key part of how Svelte works. Svelte treats every top-level variable in your <script> tags as that component's state and when that state is updated, it will re-render the HTML with the updated state. This is all done for us automatically but it is important to be aware of!

As a finishing touch before we move onto the next section, let's just add a tiny bit of CSS so that the regions are highlighted when you hover over them and a condition in the App.svelte file so that the active region stays highlighted.

Add the following CSS in the <MapRegion> component:

.path:hover {
    fill: #333;
  }

and then in the App.svelte file replace the fillColour property of the <MapRegion> component with the following ternary conditon:

<MapRegion 
  fillColour={activeRegion === name ? '#333' : 'red'}
/>

this says that if the active region is equal to the name of the region being rendered, then fill it in with the grey colour, if not, fill it in red as normal.

If you've done everything correctly, you should have something that looks like the following:

In the next section we will be using the function we created at the very beginning to colour in the MapRegion components based on their contribution to the premier league.

Visualizing the data 🔢

Inside of the App.svelte file, import the getRegionData function in the <script> tags:

import getRegionData from "./Data/getRegionData.js";

and then for the fillColour property of each <MapRegion>, instead of passing in 'red', we can instead just call our function and access the .colour property on it like so:

<MapRegion
  on:click={() => {
    activeRegion = name;
  }}
  {svgPath}
  fillColour={activeRegion === name ? '#333' : getRegionData(name).colour}
  strokeColour="white"
  strokeWidth="1px" />

If you've done everything correctly, you should end up with a map that looks like this:

This section was a brief one as we did all the work at the very beginning; In the remaining sections we will create a Svelte component that shows all of the data about the region you have clicked. We will also do some housekeeping and make sure everything is styled properly and then we are pretty much finished!

The `<RegionInformation>` Component 🖱️ → 🗺️ → 🗃️

In this section we will be creating a new Svelte component that shows us all the data about a region when we click it.

Let's start by making a new component called RegionInformation.svelte in the Components folder.

This component will be a modal that pops up when the user clicks on a region and has all of the information about the region inside of it.

As with the other components, let's make it so we need to pass it a variable when we create it. We should also make it take a function that gets called when we close this component so that we can change the active region in App.svelte.

Call these region and onClose respectively.

In RegionInformation.svelte:

<script>
  export let region;
  export let onClose;
</script>

<p>This is the information for {region.name}</p>

Now inside of App.svelte, import the component and put one on the page to test it out:

  <script>
    import RegionInformation from "./Components/RegionInformation.svelte";
  </script>
  <main class="app">
    <h1>{activeRegion}</h1>
    <RegionInformation region={getRegionData('Derbyshire')} />
    ...

You should see the something like the following on the page:

Now let's build out the component using the data we have given it. First add the styles for the modal:

<style>
.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #333;
    opacity: 0.5;
    z-index: 5;
  }

  .container {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .modal {
    padding: 10px;
    overflow-y: scroll;
    text-align: center;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 0px 0.5px 2px rgba(0, 0, 0, 0.25);
    height: 420px;
  }

  @media (min-width: 400px) {
    .modal {
      height: 520px;
    }
  }

  @media (min-width: 820px) {
    .container {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal {
      width: 820px;
      height: 620px;
    }
  }

  .header {
    margin-bottom: 20px;
  }

  .header-back-button {
    position: absolute;
  }

  .header-back-button > button {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #f5f5f5;
  }

  .header-title {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .header-title > h1 {
    margin: 0;
    font-size: 1.4em;
  }

  .body-players {
    display: flex;
    flex-direction: column;
  }

  .body-players > h2 {
    font-size: 1.2em;
  }
</style>

next, create the HTML structure and use the data from the region object.

We'll start with an empty div which will act as an overlay to dim the background when the modal is open:

  <div class="modal-overlay" />

and then for the container that will hold the modal we want to import two functions from Svelte which will animate the modal in and out of the screen when it is added to the page. For that we will need both the slide transition and the quintInOut easing function. Simply import these at the top of the component:

<script>
  import { slide } from "svelte/transition";
  import { quintInOut } from "svelte/easing";
</script>

and then create the container:

  <section class="container" transition:slide={{ duration: 200, easing: quintInOut }}>
  </section>

Inside of the container we want to create a div for the modal which will have a header and body inside of it:

  <div class="modal">
    <header class="header">
    </header>
    <section class="body">
    </section>
  </div>

Inside of the header put the following HTML:

<div class="header-back-button">
  <button on:click={onClose}>
    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <path
        fill="#333"
        d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
    </svg>
  </button>
</div>
<div class="header-title">
  <h1>{region.name}</h1>
</div>

This creates a button with a back arrow inside of it that, when clicked, calls the onClose function passed into the component. It also has a <h1> element with the name of this region inside of it.

Inside of the body, we want to put the following HTML:

{#if region.overallAppearances > 0}
  <div class="body-stats">
    Number of appearances by players from this region during winning
    seasons:
    <b>{region.overallAppearances}</b>
  </div>

  <div class="body-players">
    <h2>Players</h2>
    <!--Put each player here-->
  </div>
{:else}
  <div class="body-stats">
    This region hasn't contributed to the English Premier League 😢
  </div>
{/if}

Next, create a new component called Player.svelte and inside of that component put the following markup:

<script>
  export let name;
  export let seasons;
</script>

<style>
  .container {
    width: 100%;
    background-color: #f5f5f5;
    margin-bottom: 5px;
  }

  .name {
    margin-bottom: 10px;
    font-weight: bold;
  }
</style>

<div class="container">
  <p class="name">{name}</p>
  {#each seasons.reverse() as { year, team, appearances }}
    <p>
      <b>{year}</b>
      with
      <b>{appearances}</b>
      appearances for
      <b>{team}</b>
    </p>
  {/each}
</div>

For each player in our region, we are going to create a new Player component that will display the player's name and then each season they contributed to, what year and with what team.

Note that we do seasons.reverse() so that the most recent seasons are at the top of the list when display the player.

To finalise this, back inside of the RegionInformation component, import the new Player component and then add the following Svelte #each loop in place of the  comment:

{#each players as { name, seasons }}
  <Player {name} {seasons} />
{/each}

and then inside of the script tags, put the following:

const players = region.players.sort((player1, player2) => {
  let player1Appearances = 0;
  let player2Appearances = 0;

  player1.seasons.forEach(
    season => (player1Appearances += season.appearances)
  );
  player2.seasons.forEach(
    season => (player2Appearances += season.appearances)
  );

  return player2Appearances - player1Appearances;
});

which will order the player's in descending order according to their number of appearances.

If you have done everything correctly, you should see something like this on the page:

We don't want to show the modal when no region has been selected, so in App.svelte, start by giving activeRegion no default value and then in the markup, replace the current RegionInformation component and the temporary <h1> tag with the following:

{#if activeRegion}
  <RegionInformation
    region={getRegionData(activeRegion)}
    onClose={() => {
      activeRegion = undefined;
    }} />
{/if}

This now hides the component if no region is selected, and will show the information for whichever region has been selected instead of just Derbyshire. Notice we also added an onClose function that just sets the activeRegion to undefined, this will happen when we click the back button on the modal.

You should now be able to click on any region in the map and you should be shown all of the statistics for that region.

Housekeeping 🏠

We're almost finished, all that's left to do is some housekeeping.

Let's start by creating a simple component that will fill up the whitespace on desktop and tell the user some information about the data visualization.

Call the component Overview.svelte and give it the following javascript and markup:

  <script>
    import { blur } from "svelte/transition";
  </script>

  <div class="container" transition:blur|local>
  <h1>English Premier League</h1>
  <p>
    The Premier League, often referred to as the English Premier League or the
    EPL outside England, is the top level of the English football league system.
  </p>
  <p>
    This is a data visualization on the map of the UK & Ireland that highlights
    which regions have contributed the most to premier league title wins based
    on British & Irish players that took part within winning teams.
  </p>
  <p class="key">
    The colour of a region on the map is based on its contribution
    which can be
    <span class="none">None</span>
    , or interpolated between
    <span class="low">Low</span>
    and
    <span class="high">High</span>
    .
  </p>
</div>

*The reason we write transition:blur|local instead of just transition:blur is that we only want this transition to run when the block this code belongs to is created/destroyed but not when any parent blocks are created or destroyed. This results in a less janky animation when we open or close the modal but just means that this transition won't run when the entire application first loads.

Next, give it the following styles:

  .container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 300px;
    padding: 20px;
  }

  @media (min-width: 940px) {
    .container {
      display: block;
    }
  }

  @media (min-width: 1100px) {
    .container {
      max-width: 400px;
    }
  }

  @media (min-width: 1500px) {
    .container {
      max-width: 600px;
    }
  }

  .none,
  .low,
  .high {
    font-weight: bold;
  }

  .none {
    background-color: rgba(51, 51, 51, 0.5);
  }

  .low {
    background-color: #38003c;
    color: #f5f5f5;
  }

  .high {
    background-color: #00ff85;
  }

Finally, import the new component into the App.svelte file and show it if no region is currently active like so:

  {#if activeRegion}
    <RegionInformation
      region={getRegionData(activeRegion)}
      onClose={() => {
        activeRegion = undefined;
      }} />
  {:else}
    <Overview />
  {/if}

You should now see some information and a key next to the map, this will only show on screens that are large enough:

Conclusion 😎

That's it! We've built a small data visualization using Svelte and explored some of the unique features of the framework and I hope the article didn't feel too long and that you can take this knowledge on to build bigger and better things!

If you want to host your website, it's really quick and easy as Svelte just outputs static files:

Run npm run build to generate the final js and css files.
Put the contents of the public folder onto a static file host. If you're using Github you can create a new branch called gh-pages and then just put the static files there. (Read me about this here)

Some things to note:

None of the JavaScript has been transpiled to work on older browsers which is fine for this article but you can read up on how to do this here for more important applications.

I am totally new to Svelte so take this article as a starting point and not as the definitive way to use Svelte.

Lastly, Svelte is a fully fleshed out framework and we barely scratched the surface, here are some features of Svelte that we didn't utilise that you should definitely look into:

and that's just a few things that I think will be really useful in most applications, there's much more which can all be found here.

Thanks for reading, if you have any questions I will try my best to answer them!

DEV Community: Josh Jackson

Building a Desktop App using Svelte and Electron

Getting Setup 🐣

Connecting Svelte with Electron 🖇️

Creating a Basic Markdown Editor 📝

Saving Files with Electron 💾

Opening/Saving Existing Files 📂 💾

Building for your current platform 🏗️

Conclusion

Lets Create: A Data Visualization using Svelte

What are we going to build?

Setup 🛠️

The Data 📊

The Map 🗺️

The <MapContainer> Component 🗺️ → 📦

The Basic <MapRegion> Component 🗺️ → 📦 → 📍

Adding Transitions to our <MapRegion> Component 📍 → 💫

Adding Interactivity 🖱️ → 🗺️

Visualizing the data 🔢

The <RegionInformation> Component 🖱️ → 🗺️ → 🗃️

Housekeeping 🏠

Conclusion 😎

The `<MapContainer>` Component 🗺️ → 📦

The Basic `<MapRegion>` Component 🗺️ → 📦 → 📍

Adding Transitions to our `<MapRegion>` Component 📍 → 💫

The `<RegionInformation>` Component 🖱️ → 🗺️ → 🗃️