feat: support Svelte 4

johannschopplich · Jan 3, 2024 · e0d4cda · e0d4cda
1 parent 43d9675
commit e0d4cda
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 36 deletions.
diff --git a/packages/svelte/eslint.config.js b/packages/svelte/eslint.config.js
@@ -1,28 +1,14 @@
-import sveltePlugin from 'eslint-plugin-svelte'
-import * as svelteParser from 'svelte-eslint-parser'
-import * as tsParser from '@typescript-eslint/parser'
 import antfu from '@antfu/eslint-config'
 
 export default await antfu(
   {
     vue: false,
+    svelte: true,
     ignores: ['.svelte-kit', 'tsconfig.json'],
   },
   {
     files: ['**/*.svelte'],
-    plugins: {
-      svelte: sveltePlugin,
-    },
-    languageOptions: {
-      parser: svelteParser,
-      parserOptions: {
-        extraFileExtensions: ['.svelte'],
-        parser: tsParser,
-      },
-    },
     rules: {
-      ...sveltePlugin.configs.recommended.rules,
-      'import/no-mutable-exports': 'off',
       'no-undef-init': 'off',
     },
   },

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "@unlazy/svelte",
   "type": "module",
   "version": "0.10.2",
-  "packageManager": "pnpm@8.11.0",
+  "packageManager": "pnpm@8.14.0",
   "description": "Svelte lazy loading library for placeholder images",
   "author": "Johann Schopplich <[email protected]>",
   "license": "MIT",
@@ -49,15 +49,15 @@
     "test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0"
+    "svelte": "^3 || ^4"
   },
   "dependencies": {
     "unlazy": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.1",
-    "@sveltejs/kit": "^1.27.7",
-    "@sveltejs/package": "^2.2.3",
+    "@sveltejs/adapter-auto": "^3.0.1",
+    "@sveltejs/kit": "^2.0.6",
+    "@sveltejs/package": "^2.2.5",
     "eslint-plugin-svelte": "^2.35.1",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",

diff --git a/packages/svelte/src/lib/UnLazyImage.svelte b/packages/svelte/src/lib/UnLazyImage.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang='ts'>
   import { onDestroy } from 'svelte'
   import { lazyLoad } from 'unlazy'
 
@@ -20,8 +20,8 @@
   /** The size of the longer edge (width or height) of the BlurHash image to be decoded, depending on the aspect ratio. This option only applies when the `blurhash` prop is used. */
   export let placeholderSize: number | undefined = undefined
 
-  let target: HTMLImageElement | undefined
-  let cleanup: (() => void) | undefined
+  let target: HTMLImageElement | undefined = undefined
+  let cleanup: (() => void) | undefined = undefined
 
   $: if (target) {
     cleanup?.()
@@ -45,6 +45,6 @@
   data-src={src}
   data-srcset={srcSet}
   data-sizes={autoSizes ? 'auto' : undefined}
-  loading="lazy"
+  loading='lazy'
   {...$$restProps}
 />
diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte
@@ -1,17 +1,17 @@
-<script lang="ts">
+<script lang='ts'>
   import UnLazyImage from '../lib/UnLazyImage.svelte'
 </script>
 
 <UnLazyImage
-  blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
-  srcSet="image-320w.jpg 320w, image-640w.jpg 640w"
+  blurhash='LKO2:N%2Tw=w]~RBVZRi};RPxuwH'
+  srcSet='image-320w.jpg 320w, image-640w.jpg 640w'
   autoSizes
-  width="640"
-  height="640"
+  width='640'
+  height='640'
 />
 <UnLazyImage
-  thumbhash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
-  src="/images/sunrise-evan-wallace.jpg"
-  width="480"
-  height="640"
+  thumbhash='1QcSHQRnh493V4dIh4eXh1h4kJUI'
+  src='/images/sunrise-evan-wallace.jpg'
+  width='480'
+  height='640'
 />
diff --git a/packages/svelte/svelte.config.js b/packages/svelte/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto'
-import { vitePreprocess } from '@sveltejs/kit/vite'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json
@@ -8,6 +8,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
   }
 }
diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts
@@ -5,7 +5,6 @@ import { defineConfig } from 'vite'
 const currentDir = new URL('.', import.meta.url).pathname
 
 export default defineConfig({
-  // @ts-expect-error: Vite 5 support pending
   plugins: [sveltekit()],
 
   // Custom alias for unlazy until Jiti issue is resolved