From 23ef97192b25376b2174a956443051566a2fd92a Mon Sep 17 00:00:00 2001 From: Johann Schopplich Date: Wed, 13 Nov 2024 08:18:47 +0100 Subject: [PATCH] feat(svelte)!: mimgrate to Svelte 5 runes --- docs/integrations/svelte.md | 4 ++ packages/svelte/eslint.config.js | 18 ++--- packages/svelte/package.json | 2 +- packages/svelte/src/app.html | 2 +- packages/svelte/src/lib/UnLazyImage.svelte | 65 +++++++++++-------- .../svelte/src/lib/{index.js => index.ts} | 0 6 files changed, 49 insertions(+), 42 deletions(-) rename packages/svelte/src/lib/{index.js => index.ts} (100%) diff --git a/docs/integrations/svelte.md b/docs/integrations/svelte.md index 5da76a3..e879011 100644 --- a/docs/integrations/svelte.md +++ b/docs/integrations/svelte.md @@ -2,6 +2,10 @@ unlazy is not only framework-agnostic, but also provides a Svelte component that you can use in your Svelte application. +::: info +The component is written for Svelte 5 and above using runes. +::: + ## Installation Install the `@unlazy/svelte` package using your favorite package manager: diff --git a/packages/svelte/eslint.config.js b/packages/svelte/eslint.config.js index 6c7cad1..09ec246 100644 --- a/packages/svelte/eslint.config.js +++ b/packages/svelte/eslint.config.js @@ -1,16 +1,8 @@ // @ts-check import antfu from '@antfu/eslint-config' -export default antfu( - { - vue: false, - svelte: true, - ignores: ['.svelte-kit'], - }, - { - files: ['**/*.svelte'], - rules: { - 'no-undef-init': 'off', - }, - }, -) +export default antfu({ + vue: false, + svelte: true, + ignores: ['.svelte-kit'], +}) diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 75fdb98..bc31616 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -49,7 +49,7 @@ "test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "peerDependencies": { - "svelte": "^3 || ^4" + "svelte": "^5" }, "dependencies": { "unlazy": "workspace:*" diff --git a/packages/svelte/src/app.html b/packages/svelte/src/app.html index d891631..c90ad7b 100644 --- a/packages/svelte/src/app.html +++ b/packages/svelte/src/app.html @@ -6,7 +6,7 @@ @unlazy/svelte %sveltekit.head% - +
%sveltekit.body%
diff --git a/packages/svelte/src/lib/UnLazyImage.svelte b/packages/svelte/src/lib/UnLazyImage.svelte index bfd4a9a..56c4aa6 100644 --- a/packages/svelte/src/lib/UnLazyImage.svelte +++ b/packages/svelte/src/lib/UnLazyImage.svelte @@ -1,40 +1,51 @@ @@ -45,5 +56,5 @@ data-srcset={srcSet} data-sizes={autoSizes ? 'auto' : undefined} loading='lazy' - {...$$restProps} + {...restProps} /> diff --git a/packages/svelte/src/lib/index.js b/packages/svelte/src/lib/index.ts similarity index 100% rename from packages/svelte/src/lib/index.js rename to packages/svelte/src/lib/index.ts