Skip to content

Commit 98e22fe

Browse files
ghostdevvghostdevv
authored
feat: add svelte 5 support using s4 compatibility mode (#172)
1 parent 0737346 commit 98e22fe

File tree

8 files changed

+90
-21
lines changed

8 files changed

+90
-21
lines changed

‎.changeset/cuddly-clouds-travel.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"svelte-cloudinary": minor
3+
---
4+
5+
feat: add svelte 5 support using s4 compatibility mode

‎packages/docs/src/content/docs/components/image/index.mdx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: <CldImage />
3+
description: se Cloudinary to power your images, includes powerful options for resizing, transformations, generative AI, and more.
34
---
45

56
import { CldImage } from 'svelte-cloudinary';
@@ -10,12 +11,7 @@ The `CldImage` component is the main way of displaying a Cloudinary image in you
1011

1112
The required props are `width`, `height`, `src`, and `alt`:
1213

13-
<CldImage
14-
src="images/turtle"
15-
alt="Turtle"
16-
width={960}
17-
height={600}
18-
/>
14+
<CldImage src="images/turtle" alt="Turtle" width={960} height={600} />
1915

2016
```svelte
2117
<script>

‎packages/docs/src/content/docs/components/og-image/index.mdx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: <CldOgImage />
3+
description: Svelte Cloudinary makes it easy to create your open graph tags and images with Cloudinary.
34
---
45

56
The `CldOgImage` component provides a simple way to use Cloudinary for your open graph image. It supports all of the same transforms/effects as `<CldImage />`.
@@ -22,14 +23,23 @@ The only required props are `src` and `alt`:
2223
This will generate the following meta tags:
2324

2425
```html
25-
<meta property="og:image" content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0">
26-
<meta property="og:image:secure_url" content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0">
27-
<meta property="og:image:width" content="1200">
28-
<meta property="og:image:height" content="627">
29-
<meta property="og:image:alt" content="Turtle">
30-
<meta property="twitter:title" content=" ">
31-
<meta property="twitter:card" content="summary_large_image">
32-
<meta property="twitter:image" content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0">
26+
<meta
27+
property="og:image"
28+
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
29+
/>
30+
<meta
31+
property="og:image:secure_url"
32+
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
33+
/>
34+
<meta property="og:image:width" content="1200" />
35+
<meta property="og:image:height" content="627" />
36+
<meta property="og:image:alt" content="Turtle" />
37+
<meta property="twitter:title" content=" " />
38+
<meta property="twitter:card" content="summary_large_image" />
39+
<meta
40+
property="twitter:image"
41+
content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
42+
/>
3343
```
3444

3545
## Twitter Title
@@ -51,5 +61,5 @@ You'll need to set the `twitterTitle` prop if you want the images to render on t
5161
Which will generate the following meta tag:
5262

5363
```html
54-
<meta property="twitter:title" content="Turtles!">
64+
<meta property="twitter:title" content="Turtles!" />
5565
```

‎packages/docs/src/content/docs/components/upload-widget/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: <CldUploadWidget />
3+
description: Allow users to easily upload images and then serve them in your app with Cloudinary.
34
---
45

56
The `CldUploadWidget` creates a new instance of the [Cloudinary upload widget](https://cloudinary.com/documentation/upload_widget) giving you an easy way to add upload capabilities to your Svelte app.

‎packages/docs/src/content/docs/components/video-player/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: <CldVideoPlayer />
3+
description: Play videos uploaded to your Cloudinary account with our built-in video player.
34
---
45

56
import { CldVideoPlayer } from 'svelte-cloudinary';

‎packages/docs/src/content/docs/get-started.mdx‎

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,65 @@
11
---
22
title: Get Started
3+
description: Learn how to get started with Cloudinary & Svelte!
34
---
45

5-
Svelte Cloudinary works with both Svelte and SvelteKit, you can get started by installing the package:
6+
import {
7+
Tabs,
8+
TabItem,
9+
Steps,
10+
LinkCard,
11+
CardGrid,
12+
} from '@astrojs/starlight/components';
613

7-
```bash title="Install dependencies..."
8-
npm install svelte-cloudinary -D
9-
```
14+
<Steps>
15+
1. Install Svelte Cloudinary. We support Svelte v3, v4, v5 (compatibility mode), and SvelteKit!
1016

11-
Then you'll need to set your [cloud name](https://cloudinary.com/documentation/finding_your_credentials_tutorial), which can be set wih the `VITE_CLOUDINARY_CLOUD_NAME` environment variable if you're using Vite or SvelteKit. You can read more about [configuring svelte-cloudinary here](/config), including how to use other bundlers.
17+
<Tabs>
18+
<TabItem label="npm">
19+
```bash
20+
npm install svelte-cloudinary -D
21+
```
22+
</TabItem>
23+
<TabItem label="pnpm">
24+
```bash
25+
pnpm add svelte-cloudinary -D
26+
```
27+
</TabItem>
28+
<TabItem label="yarn">
29+
```bash
30+
yarn add svelte-cloudinary
31+
```
32+
</TabItem>
33+
</Tabs>
34+
35+
2. Configure svelte-cloudinary
36+
37+
When using Vite/SvelteKit all you need to do is set the `VITE_CLOUDINARY_CLOUD_NAME` environment variable to your [cloud name](https://cloudinary.com/documentation/finding_your_credentials_tutorial). If you don't have a Cloudinary account you can [create one for free here](https://cloudinary.com/users/register_free?utm_campaign=devx_sveltecloudinary&utm_medium=referral&utm_source=sveltecloudinary)! If you're not using Vite/SvelteKit, or want to learn more about configuration, you can [read the guide here](/config).
38+
39+
```bash title=".env"
40+
# https://cloudinary.com/documentation/finding_your_credentials_tutorial
41+
VITE_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
42+
```
43+
44+
3. Start using Cloudinary!
45+
46+
<CardGrid>
47+
<LinkCard
48+
title="Images"
49+
description="Use Cloudinary to power your images, includes powerful options for resizing, transformations, generative AI, and more."
50+
href="/components/image" />
51+
<LinkCard
52+
title="Open Graph tags"
53+
description="Svelte Cloudinary makes it easy to create your open graph tags and images with Cloudinary."
54+
href="/components/og-image" />
55+
<LinkCard
56+
title="Upload Widget"
57+
description="Allow users to easily upload images and then serve them in your app with Cloudinary."
58+
href="/components/upload-widget" />
59+
<LinkCard
60+
title="Video Player"
61+
description="Play videos uploaded to your Cloudinary account with our built-in video player."
62+
href="/components/video-player" />
63+
</CardGrid>
64+
65+
</Steps>

‎packages/svelte-cloudinary/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ High-performance image delivery and uploading at scale in Svelte powered by Clou
4040
npm install svelte-cloudinary
4141
```
4242

43+
We support Svelte v3, v4, v5 (compatibility mode), and SvelteKit!
44+
4345
- Add an environment variable with your Cloud Name:
4446

4547
```bash

‎packages/svelte-cloudinary/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"!dist/**/*.spec.*"
3333
],
3434
"peerDependencies": {
35-
"svelte": "^3.0.0 || ^4.0.0"
35+
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
3636
},
3737
"devDependencies": {
3838
"@sveltejs/package": "^2.3.7",

0 commit comments

Comments
 (0)