SKN Svelte Kit (Svelte 5) Type Extension Library

TypeScript Svelte

Introduction:

This is a simple TypeScript Type Extension Library for Svelte Kit (Svelte 5)

I made this library so that I can use it in all of my Svelte Kit (Svelte 5) projects without writing the same codes over and over again

Details:

SveltePageDataProps Type

• Provides page server data type for svelte rune $props()
• This type is intended to be used only in +page.svelte
• For usage instruction, see Usage section

SvelteChildrenProps Type

• Provides svelte children type for svelte components having svelte rune $props()
• This type is intended to be used for components containing child components
• For usage instruction, see Usage section

SveltePageLayoutProps Type

• Provides page layout data type for svelte rune $props()
• This type is intended to be used only in +layout.svelte
• For usage instruction, see Usage section

Special Markdown Definition

• This library contains a markdown definition to support mdsvex in .md files
• mdsvex is not a requirement but if you do use it, then this definition will certainly help to process

Use Case:

• Svelte Kit

Requirements:

This library has peer dependency for Svelte of minimum 5.16.0. It may or may not work on 6.x

This library is intended to be used in Svelte Kit of minimum 2.15.0. It may or may not work on 3.x

• 💀 Minimum svelte Version: 5.16.0
• 💀 Minimum @sveltejs/kit Version: 2.15.0

Usage:

To install the package, type the following in console

npm add -D @best-skn/svelte-types
#or
yarn add -D @best-skn/svelte-types
#or
pnpm add -D @best-skn/svelte-types
#or
bun add -D @best-skn/svelte-types

Create a directory called types in the root location of your project, and create a file called svelte.d.ts, then do this

import "@best-skn/svelte-types";

Check your tsconfig.json if includes property has **/*.ts, **/*.tsx, **/*.svelte otherwise the type definition file may not work

Now Inside your Svelte Kit (Svelte 5) Project, use the package like this (Just an example)

SveltePageDataProps Type:

Import & use SveltePageDataProps inside +page.svelte like this

//* `+page.svelte`
<script lang="ts">
 import type { SveltePageDataProps } from "svelte";
 import type { PageServerData } from "./$types";

 let { data }: SveltePageDataProps<PageServerData> = $props();
</script>

SvelteChildrenProps Type:

Import & use SvelteChildrenProps inside svelte components containing child components

<script lang="ts">
 import type { SvelteChildrenProps } from "svelte";

 let { children }: SvelteChildrenProps = $props();
</script>

<div>
 {@render children()}
</div>

SveltePageLayoutProps Type:

Import & use SveltePageLayoutProps inside +layout.svelte like this

//* `+layout.svelte`
<script lang="ts">
 import type { SveltePageLayoutProps } from "svelte";

 let { children, data, row }: SveltePageLayoutProps<unknown> = $props();
</script>

<div>
 <main>
   {@render children()}
 </main>
</div>

Dedicated To:

• 👩‍🎨Prodipta Das Logno & 🧛‍♀️Atoshi Sarker Prithula: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.
• 💯My Parents: The greatest treasures of my life ever.

License:

Copyright (C) 2024 SKN Shukhan

Licensed under the MIT License