@unhead/svelte 2.0.14 โ†’ 2.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +187 -0
  2. package/package.json +5 -4
package/README.md ADDED
@@ -0,0 +1,187 @@
1
+ # @unhead/svelte
2
+
3
+ > Full-stack `<head>` management for Svelte applications
4
+
5
+ [![npm version][npm-version-src]][npm-version-href]
6
+ [![npm downloads][npm-downloads-src]][npm-downloads-href]
7
+ [![License][license-src]][license-href]
8
+
9
+ ## Features
10
+
11
+ - ๐Ÿงก Svelte-optimized head management
12
+ - ๐Ÿ”„ Reactive titles, meta tags, and other head elements
13
+ - ๐Ÿ” SEO-friendly head control
14
+ - ๐Ÿ–ฅ๏ธ Server-side rendering support
15
+ - ๐Ÿ“ฆ Lightweight with zero dependencies (except for Svelte & unhead)
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ # npm
21
+ npm install @unhead/svelte
22
+
23
+ # yarn
24
+ yarn add @unhead/svelte
25
+
26
+ # pnpm
27
+ pnpm add @unhead/svelte
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ### Setup
33
+
34
+ #### Client-side (SPA)
35
+
36
+ ```ts
37
+ import { createHead, UnheadContextKey } from '@unhead/svelte/client'
38
+ import { mount } from 'svelte'
39
+ import App from './App.svelte'
40
+ // main.ts
41
+ import './app.css'
42
+
43
+ const unhead = createHead()
44
+ const context = new Map()
45
+ context.set(UnheadContextKey, unhead)
46
+
47
+ mount(App, {
48
+ target: document.getElementById('app')!,
49
+ context
50
+ })
51
+ ```
52
+
53
+ #### Server-side (SSR)
54
+
55
+ ```ts
56
+ import { createHead, UnheadContextKey } from '@unhead/svelte/server'
57
+ // entry-server.ts
58
+ import { render as _render } from 'svelte/server'
59
+ import App from './App.svelte'
60
+
61
+ export function render(url: string) {
62
+ const unhead = createHead()
63
+ const context = new Map()
64
+ context.set(UnheadContextKey, unhead)
65
+
66
+ return {
67
+ render: _render(App, { context }),
68
+ unhead,
69
+ }
70
+ }
71
+ ```
72
+
73
+ ```ts
74
+ import { createHead, UnheadContextKey } from '@unhead/svelte/client'
75
+ import { hydrate } from 'svelte'
76
+ import App from './App.svelte'
77
+ // entry-client.ts (for hydration)
78
+ import './app.css'
79
+
80
+ const unhead = createHead()
81
+ const context = new Map()
82
+ context.set(UnheadContextKey, unhead)
83
+
84
+ hydrate(App, {
85
+ target: document.getElementById('app')!,
86
+ context
87
+ })
88
+ ```
89
+
90
+ ### Basic Usage
91
+
92
+ ```svelte
93
+ <!-- Home.svelte -->
94
+ <script>
95
+ import { useHead } from '@unhead/svelte'
96
+
97
+ useHead({
98
+ title: 'Home Page',
99
+ meta: [
100
+ {
101
+ name: 'description',
102
+ content: 'Welcome to our website'
103
+ }
104
+ ]
105
+ })
106
+ </script>
107
+
108
+ <h1>Home</h1>
109
+ ```
110
+
111
+ ### Setting Meta Tags
112
+
113
+ ```svelte
114
+ <!-- About.svelte -->
115
+ <script>
116
+ import { useSeoMeta } from '@unhead/svelte'
117
+
118
+ useSeoMeta({
119
+ title: 'About Us',
120
+ description: 'Learn more about our company',
121
+ ogTitle: 'About Our Company',
122
+ ogDescription: 'Our fantastic about page',
123
+ ogImage: 'https://example.com/image.jpg',
124
+ })
125
+ </script>
126
+
127
+ <h1>About Us</h1>
128
+ ```
129
+
130
+ ### Reactive Head Elements
131
+
132
+ ```svelte
133
+ <!-- Profile.svelte -->
134
+ <script lang="ts">
135
+ import { useHead } from '@unhead/svelte'
136
+
137
+ let userName = $state('User')
138
+
139
+ const entry = useHead()
140
+ $effect(() => {
141
+ entry.patch({
142
+ title: `${userName} - Profile`, // Reactive title
143
+ meta: [
144
+ {
145
+ name: 'description',
146
+ content: `${userName}'s profile page`, // Reactive description
147
+ },
148
+ ],
149
+ })
150
+ })
151
+
152
+ function updateName() {
153
+ userName = 'New Name'
154
+ // Title and meta automatically update!
155
+ }
156
+ </script>
157
+
158
+ <h1>{userName}'s Profile</h1>
159
+ <button onclick={updateName}>Update Name</button>
160
+ ```
161
+
162
+ ## Development
163
+
164
+ ```bash
165
+ # Install dependencies
166
+ npm install
167
+
168
+ # Generate build files
169
+ npm run build
170
+
171
+ # Run tests
172
+ npm run test
173
+ ```
174
+
175
+ ## License
176
+
177
+ [MIT](./LICENSE)
178
+
179
+ <!-- Badges -->
180
+ [npm-version-src]: https://img.shields.io/npm/v/@unhead/svelte/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
181
+ [npm-version-href]: https://npmjs.com/package/@unhead/svelte
182
+
183
+ [npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/svelte.svg?style=flat&colorA=18181B&colorB=28CF8D
184
+ [npm-downloads-href]: https://npmjs.com/package/@unhead/svelte
185
+
186
+ [license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
187
+ [license-href]: https://github.com/unjs/unhead/blob/main/LICENSE
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@unhead/svelte",
3
3
  "type": "module",
4
- "version": "2.0.14",
4
+ "version": "2.0.17",
5
+ "description": "Full-stack <head> manager built for Svelte.",
5
6
  "author": "Harlan Wilton <harlan@harlanzw.com>",
6
7
  "license": "MIT",
7
8
  "funding": "https://github.com/sponsors/harlan-zw",
@@ -55,7 +56,7 @@
55
56
  "dist"
56
57
  ],
57
58
  "peerDependencies": {
58
- "svelte": ">=5.36.16"
59
+ "svelte": ">=5.38.0"
59
60
  },
60
61
  "build": {
61
62
  "external": [
@@ -63,11 +64,11 @@
63
64
  ]
64
65
  },
65
66
  "dependencies": {
66
- "unhead": "2.0.14"
67
+ "unhead": "2.0.17"
67
68
  },
68
69
  "devDependencies": {
69
70
  "@testing-library/svelte": "^5.2.8",
70
- "svelte": "^5.37.3"
71
+ "svelte": "^5.39.2"
71
72
  },
72
73
  "scripts": {
73
74
  "build": "unbuild .",