SvelteKit 1.0 released

What is SvelteKit?

 

SvelteKit is a framework for building web applications with Svelte, a popular JavaScript library for creating user interfaces. It is a modern, performant, and accessible framework for developing apps with minimal effort. It features an integrated development environment, with a CLI for scaffolding projects, a hot-reloading server, and a production-ready build system. SvelteKit also provides a plugin system for extending the core features and allows developers to create custom plugins for their apps.

 

One of the key features of SvelteKit is its ability to create page components, which can be easily integrated into your app. This allows you to build your app in a modular way, with each page component representing a different part of your user interface.

Here's an example of how to create a page in SvelteKit:

<script context="module" lang="ts">
  import { variables } from '$lib/variables';
  import H1 from "$lib/components/H1.svelte";
  import { text } from "svelte/internal";
  import * as prismicH from '@prismicio/helpers';
  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
</script>

<script lang="ts">
  export let data: any;
</script>

<style>/* Your CSS code here ... */</style>

<svelte:head>
  <title>{ data.record.title } | {variables.VITE_APP_NAME} blog</title>
  <meta name="description" content={data.record.summary}>
</svelte:head>

<Breadcrumbs breadcrumbs={data.breadcrumbs} />

<main class="container blog mx-auto p-5" itemscope itemtype="http://schema.org/BlogPosting">
  <H1 text={data.record.title}/>
  <div class="p-12 mt-6 mb-6 text-xl text-gray-600 bg-gray-100 rounded-lg">
    {@html data.record.body[0].text}
  </div>
</main>

 

The SvelteKit code example above renders this very blog page.

SvelteKit also makes it easy to fetch data from REST APIs. This is especially useful for building dynamic apps that need to display up-to-date information.

Here's an example of how to fetch data from Prismic.io in SvelteKit. The data is then used in the page component code (above).

 

import Client from '$lib/utils/client';
import type { BlogArticle } from  '$lib/types/blog';

/**
 * @type {import('@sveltejs/kit').RequestHandler}
 */
export async function get({ params }) {
  const { slug } = params;
  const document = await Client.getByUID('blog', slug, null);

  if (!document) {
    return false;
  }

  const record: BlogArticle = {
    'slug': document.uid,
    'title': document.data.title[0].text,
    'summary': document.data.summary,
    'publishedAt': document.data.published_at,
    'body': document.data.body[0].text,
  };

  if (record) {
    return {
      body: { record }
    };
  }
}

 

Why SvelteKit?

First, the syntax is easier and cleaner than that of React and probably even Vue. The other reason why to choose SvelteKit is its speed. This website (www.internetmate.uk) is achieving 100% scores in all categories in the Lighthouse test on both desktop and mobile tests.

To conclude

SvelteKit 1.0 is a major milestone for the Svelte community and offers a powerful new way to build web applications. Whether you're a seasoned Svelte developer or just getting started, SvelteKit is definitely worth checking out.

----------------------------------------------------------------

Do you need a blazing-fast fine-tuned website in SvelteKit with a custom-made or third-party integrated highly available content management system (CMS)? Get in touch today at info@internetmate.uk and we'll get back to you.