Svelte essentials

Svelte refers to that front-end web application framework that allows us to build apps with hierarchical components, neatly organizing "the 3 S's" of web apps:

• scripting with JavaScript in <script> tags
• structure with HTML and {JavaScript-enhanced} tags
• styling with CSS in <style> tags
  • with an option to import stylesheets from the aforementioned <script> tag to make things even cleaner

This provides for a very no-nonsense approach to web application development experience!

Setup

Assuming we already have Node and Code installed, let us proceed by installing Svelte with Vite (a front-end tooling system that allows us to install Svelte and other frameworks):

% npm install -D vite
% npm init vite

Need to install the following packages:
create-vite@8.2.0
Ok to proceed? (y) y

> npx
> "create-vite"

│
◇  Project name:
│  .
│
◆  Current directory is not empty. Please choose how to proceed:
│  ○ Cancel operation
│  ○ Remove existing files and continue
│  ● Ignore files and continue
│
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ● Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
◆  Select a variant:
│  ○ TypeScript
│  ● JavaScript
│  ○ SvelteKit ↗
◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
│
◆  Install with npm and start now?
│  ● Yes / ○ No
└

Vite will then load a sample page on http://localhost:5173 (assuming nothing else has previously taken up port 5173). As with most other front-end frameworks, the sample page shows a boilerplate Svelte app which can change (i.e. hot-reload) the moment we change any of the files! Try playing around at this moment to get comfortable with the environment...

Folder and file structure

We will see files organized as such:

• 📁 public (media files)
• 📁 src (app-specific files)
  • 📁 assets (app-specific media files)
  • 📁 lib (app-specific Svelte files)
  • app.css (optional stylesheet)
  • App.svelte (parent component)
  • main.js (JavaScript entry point for the Svelte app)
• index.html (HTML entry point for the Svelte app)
• .gitignore (files to ignore when pushing to remote git repo)
• a bunch of configuration files
  • package.json
  • package-lock.json
  • README.md
  • svelte.config.js
  • vite.config.js

Basic Svelte components

Parent (super) component

In the App.svelte file we will eventually learn that every Svelte file will look something like this:

<script>
  <!-- JavaScript goes here -->
</script>

<!-- HTML goes here -->
<div attribute={someJSVariableCanGoHere}>
  ...
</div>

<style>
  /* optional CSS can go here */
</style>

As a rule-of-thumb, we would try to make our components as tall as our code editors: if these files get any longer, we should put them in sub-components! On file load, we should see our script, structure and style all at once!!!

Child (sub) component

Let's create a new component by creating a new file in the lib folder called Child.svelte:

<!-- lib/Child.svelte -->

<script>
  export let parent
</script>

<main>
  This child's name is {parent}!
</main>

We will see what the export let parent part does soon!

Connecting Svelte components

So, how do we connect the parent (super-) and child (sub-) components? By using import statement in the script tag in the parent component:

<!-- App.svelte -->

<script>
  import Child from './lib/Child.svelte'
</script>

<Child parent="Parent 1" />

So we can see now, what the export keyword meant in lib/Child.svelte: it allows the parent component to export values to the child component which the latter can then use!

Of course, we can import several child components into a parent component:

<!-- App.svelte -->

<script>
  import Child1 from './lib/Child.svelte'
  import Child2 from './lib/Child.svelte'
  import Friend from '/lib/Friend.svelte'
</script>

<Child1 parent="Parent 1" />
<Child2 parent="Parent 2" />
<Friend name="Jon" /></Friend>

(Note how we can use the same lib/Child.svelte file for two different child components)

JavaScript in HTML

Inserting dynamic JavaScript into static HTML forms a large part why most web developers no longer use just plain HTML - recall from the child component above:

<!-- lib/Child.svelte -->

<script>
  export let parent
</script>

<main>
  This child's name is {parent}!
</main>

The {scriptVariable} syntax allows us to "inject" scripting elements into the HTML markup, where we can perform things like:

• arithmetic operations
  • {price * taxRate}
• ternary decision operations
  • {parent === 'Jon' ? 'non-existent' : 'Child'}

We can also inject these curly braces into attributes, e.g. in styles:

<!-- lib/Child.svelte -->

<script>
  export let parent
  let color = "red"
</script>

<main style="color: {color}">
  This child's name is {parent}!
</main>

Importing CSS in JavaScript

For whatever reason, we could optionally bring CSS from a separate file into a Svelte file by simply importing it via JavaScript:

<!-- App.svelte -->

<script>
  import './lib/custom.css'
</script>

<h1>This text will appear as a huge 128pt heading!</h1>

/* lib/custom.css */

h1 {
  font-size: 128pt;
}