Skip to content

Commit 49b4829

Browse files
endigo9740endigo9740
authored
v3 Docs and Svelte package dep fixes (#2679)
1 parent 28e4784 commit 49b4829

File tree

4 files changed

+70
-61
lines changed

4 files changed

+70
-61
lines changed

‎.changeset/lovely-dingos-join.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@skeletonlabs/skeleton-svelte": patch
3+
---
4+
5+
chore: Updated to the latest Svelte 5 RC peer depedency

‎packages/skeleton-svelte/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"./dist/**/*.d.cts"
3939
],
4040
"peerDependencies": {
41-
"svelte": "^4.0.0"
41+
"svelte": "^5.0.0-next.136"
4242
},
4343
"devDependencies": {
4444
"@playwright/test": "^1.42.1",
@@ -74,4 +74,4 @@
7474
"vitest": "^1.4.0"
7575
},
7676
"type": "module"
77-
}
77+
}

‎sites/next.skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx

+28-29
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
1313
{/* --- */}
1414

1515
<div class="card p-8 py-6 preset-tonal-error grid grid-cols-1 lg:grid-cols-[1fr_auto] items-center gap-4">
16-
<p>WARNING: This will install an early preview build of Skeleton v3. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report all bugs and issues on GitHub.</p>
16+
<p>WARNING: This will install an early preview build of Skeleton v3. Please be aware that some features may be missing, incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.</p>
1717
</div>
1818

1919
<Process>
@@ -34,40 +34,39 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
3434
</ProcessStep>
3535
<ProcessStep step="4">
3636
## Configure Tailwind
37-
Open and configure `tailwind.config.js` as shown.
38-
{/* prettier-ignore */}
39-
```js {2, 3, 11, 17-19}
40-
import { join } from 'path';
41-
import { skeleton } from '@skeletonlabs/skeleton';
42-
import * as themes from "@skeletonlabs/skeleton/themes";
37+
Open `tailwind.config` in the root of your project and make these changes:
38+
```js {3-5, 13, 19-21}
39+
import type { Config } from 'tailwindcss';
4340

44-
/** @type {import('tailwindcss').Config} \*/
45-
export default {
46-
content: [
47-
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
48-
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
49-
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
50-
join(require.resolve('@skeletonlabs/skeleton-react'), '../**/*.{html,js,jsx,tsx,ts}')
51-
],
52-
theme: {
53-
extend: {},
54-
},
55-
plugins: [
56-
skeleton({
57-
themes: [ themes.cerberus, themes.rose ]
58-
})
59-
]
60-
}
41+
import { join } from "path";
42+
import { skeleton } from "@skeletonlabs/skeleton/plugin";
43+
import * as themes from "@skeletonlabs/skeleton/themes";
6144

62-
````
45+
/** @type {import('tailwindcss').Config} \*/
46+
export default {
47+
content: [
48+
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
49+
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
50+
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
51+
join(require.resolve('@skeletonlabs/skeleton-react'), '../**/*.{html,js,jsx,tsx,ts}')
52+
],
53+
theme: {
54+
extend: {},
55+
},
56+
plugins: [
57+
skeleton({
58+
themes: [ themes.cerberus, themes.rose ]
59+
})
60+
]
61+
}
62+
```
6363
</ProcessStep>
6464
<ProcessStep step="5">
6565
## Set Active Theme
6666
Open `/src/app/layout.tsx`, then set the `data-theme` attribute to define the active theme.
67-
```html
68-
<body data-theme="cerberus">...</body>
69-
````
70-
67+
```html
68+
<body data-theme="cerberus">...</body>
69+
```
7170
</ProcessStep>
7271
<ProcessStep step="check">
7372
## Ready

‎sites/next.skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx

+35-30
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
1313
{/* --- */}
1414

1515
<div class="card p-8 py-6 preset-tonal-error grid grid-cols-1 lg:grid-cols-[1fr_auto] items-center gap-4">
16-
<p>WARNING: This will install an early preview build of Skeleton v3. Please be aware that some features may be missing, incomplete, or non-functional at this time. Please report all bugs and issues on GitHub.</p>
16+
<p>WARNING: This will install an early preview build of Skeleton v3 using Svelte 5. Please be aware that some features may be missing, incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.</p>
1717
</div>
1818

1919
<Process>
2020
<ProcessStep step="1">
2121
## Create a Project
22-
Start by creating a new project using `create-svelte`:
22+
Start by creating a new Svelte 5 project using `create-svelte`:
2323
```console
2424
npm create svelte@latest my-skeleton-app
25+
- Addtional Options > Svelte 5 Preview (required!)
2526
cd my-skeleton-app
2627
npm install
2728
```
@@ -40,41 +41,45 @@ import ProcessStep from '@components/docs/ProcessStep.astro';
4041
npx @svelte-add/tailwindcss@latest --typography false
4142
npm install
4243
```
44+
> NOTE: if you see "something went wrong", everything will work as expected. Please proceed to the next step.
4345
</ProcessStep>
4446
<ProcessStep step="4">
4547
## Configure Tailwind
46-
Open `tailwind.config.js`, then implement the highlighted snippets below.
47-
{/* prettier-ignore */}
48-
```js {2, 3, 9, 15-17}
49-
import { join } from 'path';
50-
import { skeleton } from '@skeletonlabs/skeleton';
51-
import * as themes from "@skeletonlabs/skeleton/themes";
48+
You may optionally install the `@types/node` package to prevent LSP errors in your Tailwind config.
49+
```console
50+
npm i --save-dev @types/node
51+
```
52+
Open `tailwind.config` in the root of your project and make these changes:
53+
```js {3-5, 11, 17-19}
54+
import type { Config } from 'tailwindcss';
5255

53-
/** @type {import('tailwindcss').Config} \*/
54-
export default {
55-
content: [
56-
'./src/**/*.{html,js,svelte,ts}',
57-
join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')
58-
],
59-
theme: {
60-
extend: {},
61-
},
62-
plugins: [
63-
skeleton({
64-
themes: [ themes.cerberus, themes.rose ]
65-
})
66-
]
67-
}
56+
import { join } from 'path';
57+
import { skeleton } from '@skeletonlabs/skeleton/plugin';
58+
import * as themes from '@skeletonlabs/skeleton/themes';
6859

69-
````
60+
/** @type {import('tailwindcss').Config} \*/
61+
export default {
62+
content: [
63+
'./src/**/*.{html,js,svelte,ts}',
64+
join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')
65+
],
66+
theme: {
67+
extend: {},
68+
},
69+
plugins: [
70+
skeleton({
71+
themes: [ themes.cerberus, themes.rose ]
72+
})
73+
]
74+
}
75+
```
7076
</ProcessStep>
7177
<ProcessStep step="5">
72-
## Set Active Theme
73-
Open `app.html`, then set the `data-theme` attribute on the body to define the active theme.
74-
```html
75-
<body data-theme="cerberus">...</body>
76-
````
77-
78+
## Set Active Theme
79+
Open `app.html`, then set the `data-theme` attribute on the body to define the active theme.
80+
```html
81+
<body data-theme="cerberus">...</body>
82+
```
7883
</ProcessStep>
7984
<ProcessStep step="check">
8085
## Ready

0 commit comments

Comments
 (0)