@unhead/solid-js 2.0.14 → 2.0.18

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 +194 -0
  2. package/package.json +5 -4
package/README.md ADDED
@@ -0,0 +1,194 @@
1
+ # @unhead/solid-js
2
+
3
+ > Full-stack `<head>` management for SolidJS 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
+ - 💎 SolidJS-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 SolidJS & unhead)
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ # npm
21
+ npm install @unhead/solid-js
22
+
23
+ # yarn
24
+ yarn add @unhead/solid-js
25
+
26
+ # pnpm
27
+ pnpm add @unhead/solid-js
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ### Setup
33
+
34
+ #### Client-side (SPA)
35
+
36
+ ```jsx
37
+ import { UnheadContext } from '@unhead/solid-js'
38
+ import { createHead } from '@unhead/solid-js/client'
39
+ // main.jsx
40
+ import { render } from 'solid-js/web'
41
+ import App from './App'
42
+
43
+ const head = createHead({ /* config */ })
44
+
45
+ render(() => (
46
+ <UnheadContext.Provider value={head}>
47
+ <App />
48
+ </UnheadContext.Provider>
49
+ ), document.getElementById('root'))
50
+ ```
51
+
52
+ #### Server-side (SSR)
53
+
54
+ ```jsx
55
+ import { UnheadContext } from '@unhead/solid-js'
56
+ import { createHead } from '@unhead/solid-js/server'
57
+ // entry-server.jsx
58
+ import { renderToString } from 'solid-js/web'
59
+ import App from './App'
60
+
61
+ export function render(url) {
62
+ const head = createHead()
63
+ const html = renderToString(() => (
64
+ <UnheadContext.Provider value={head}>
65
+ <App />
66
+ </UnheadContext.Provider>
67
+ ))
68
+ return { html, head }
69
+ }
70
+ ```
71
+
72
+ ```jsx
73
+ import { UnheadContext } from '@unhead/solid-js'
74
+ import { createHead } from '@unhead/solid-js/client'
75
+ // entry-client.jsx (for hydration)
76
+ import { hydrate } from 'solid-js/web'
77
+ import App from './App'
78
+
79
+ const head = createHead({ /* config */ })
80
+
81
+ hydrate(() => (
82
+ <UnheadContext.Provider value={head}>
83
+ <App />
84
+ </UnheadContext.Provider>
85
+ ), document.getElementById('root'))
86
+ ```
87
+
88
+ ### Basic Usage
89
+
90
+ ```jsx
91
+ // Home.jsx
92
+ import { useHead } from '@unhead/solid-js'
93
+
94
+ function Home() {
95
+ useHead({
96
+ title: 'Home Page',
97
+ meta: [
98
+ {
99
+ name: 'description',
100
+ content: 'Welcome to our website'
101
+ }
102
+ ]
103
+ })
104
+
105
+ return <h1>Home</h1>
106
+ }
107
+
108
+ export default Home
109
+ ```
110
+
111
+ ### Setting Meta Tags
112
+
113
+ ```jsx
114
+ // About.jsx
115
+ import { useSeoMeta } from '@unhead/solid-js'
116
+
117
+ function About() {
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
+
126
+ return <h1>About Us</h1>
127
+ }
128
+
129
+ export default About
130
+ ```
131
+
132
+ ### Reactive Head Elements
133
+
134
+ ```jsx
135
+ import { useHead } from '@unhead/solid-js'
136
+ // Profile.jsx
137
+ import { createEffect, createSignal } from 'solid-js'
138
+
139
+ function Profile() {
140
+ const [userName, setUserName] = createSignal('User')
141
+
142
+ // SolidJS automatically tracks reactive changes in useHead
143
+ useHead(() => ({
144
+ title: `${userName()} - Profile`, // Reactive title
145
+ meta: [
146
+ {
147
+ name: 'description',
148
+ content: `${userName()}'s profile page`, // Reactive description
149
+ },
150
+ ],
151
+ }))
152
+
153
+ return (
154
+ <div>
155
+ <h1>
156
+ {userName()}
157
+ 's Profile
158
+ </h1>
159
+ <button onClick={() => setUserName('New Name')}>
160
+ Update Name
161
+ </button>
162
+ </div>
163
+ )
164
+ }
165
+
166
+ export default Profile
167
+ ```
168
+
169
+ ## Development
170
+
171
+ ```bash
172
+ # Install dependencies
173
+ npm install
174
+
175
+ # Generate build files
176
+ npm run build
177
+
178
+ # Run tests
179
+ npm run test
180
+ ```
181
+
182
+ ## License
183
+
184
+ [MIT](./LICENSE)
185
+
186
+ <!-- Badges -->
187
+ [npm-version-src]: https://img.shields.io/npm/v/@unhead/solid-js/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
188
+ [npm-version-href]: https://npmjs.com/package/@unhead/solid-js
189
+
190
+ [npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/solid-js.svg?style=flat&colorA=18181B&colorB=28CF8D
191
+ [npm-downloads-href]: https://npmjs.com/package/@unhead/solid-js
192
+
193
+ [license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
194
+ [license-href]: https://github.com/unjs/unhead/blob/main/LICENSE
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@unhead/solid-js",
3
3
  "type": "module",
4
- "version": "2.0.14",
4
+ "version": "2.0.18",
5
+ "description": "Full-stack <head> manager built for SolidJS.",
5
6
  "author": "Harlan Wilton <harlan@harlanzw.com>",
6
7
  "license": "MIT",
7
8
  "funding": "https://github.com/sponsors/harlan-zw",
@@ -69,13 +70,13 @@
69
70
  ]
70
71
  },
71
72
  "dependencies": {
72
- "unhead": "2.0.14"
73
+ "unhead": "2.0.18"
73
74
  },
74
75
  "devDependencies": {
75
76
  "@solidjs/testing-library": "^0.8.10",
76
- "@testing-library/jest-dom": "^6.6.4",
77
+ "@testing-library/jest-dom": "^6.8.0",
77
78
  "@testing-library/user-event": "14.6.1",
78
- "solid-js": "^1.9.7",
79
+ "solid-js": "^1.9.9",
79
80
  "vite-plugin-solid": "^2.11.8"
80
81
  },
81
82
  "scripts": {