feat: @unhead/svelte

[harlan-zw]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Unhead has first-class support for Svelte, improving the developer experience and performance of using head tags in your app.

It provides advanced features in comparison to Svelte's in built <svelte:head>{lang="html"} component, supporting a more diverse set of use cases from SEO, structured data and
script loading.

It's designed to work with any Svelte setup, however this guide assumes you're following a similar structure to the Vite: ssr-svelte-ts template
or a Vite SPA.

Setup

1. Add Dependency

Install @unhead/svelte dependency to your project. The next tag is for v2 of Unhead which is required for Svelte.

pnpm add @unhead/svelte@next

(continued in install article

Usage

<script lang="ts">

let title = $state('hello world')

const head = useHead()

$effect(() => {
  head.path({
    title,
  })
})

</script>

<button onclick={title = 'Updated title'}>update title</button>

[github-actions]

Bundle Size Analysis

File	Size	Gzipped Size	Size Diff	Gzipped Size Diff
Client	10.5 kB (10765 B)	4.4 kB (4476 B)	0.03% (3 B)	0.04% ( 2 B)
Server	7.9 kB (8056 B)	3.3 kB (3379 B)	0.04% (3 B)	0.06% ( 2 B)