Upgrade packages, Use typescript

.eslintrc.cjs

@@ -1,6 +1,14 @@
+/** @type { import("eslint").Linter.Config } */
 module.exports = {
   root: true,
-  extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'prettier'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
@@ -11,5 +19,14 @@ module.exports = {
     es2017: true,
     node: true
   },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ],
   rules: { 'no-tabs': 'error', 'no-unexpected-multiline': 'error' }
 }

package.json

@@ -7,45 +7,47 @@
     "dev": "vite dev",
     "build": "npm run lint && vite build",
     "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "format": "prettier --write --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss .",
     "lint": "prettier --plugin prettier-plugin-svelte --plugin prettier-plugin-tailwindcss --check . && eslint . && npm run check",
     "test": "playwright test",
     "package": "npm run lint && svelte-package && npx publint",
     "deploy": "npx gh-pages -d build -t -f"
   },
   "dependencies": {
-    "vite-imagetools": "5.0.8"
+    "vite-imagetools": "6.2.9"
   },
   "peerDependencies": {
     "svelte": "^3.55.1 || ^4.0.0"
   },
   "devDependencies": {
-    "@fontsource-variable/inter": "^5.0.8",
-    "@iconify-json/mdi": "^1.1.54",
-    "@iconify/tailwind": "^0.1.3",
-    "@playwright/test": "^1.38.1",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.25.0",
-    "@sveltejs/package": "^2.2.2",
+    "@fontsource-variable/inter": "^5.0.17",
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify/tailwind": "^0.1.4",
+    "@playwright/test": "^1.42.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/package": "^2.3.0",
     "@tailwindcss/typography": "^0.5.10",
-    "autoprefixer": "^10.4.16",
-    "daisyui": "^3.7.7",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte": "^2.33.2",
-    "postcss": "^8.4.30",
-    "postcss-load-config": "^4.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "svelte": "^4.2.1",
-    "svelte-check": "^3.5.2",
-    "tailwindcss": "^3.3.3",
+    "autoprefixer": "^10.4.18",
+    "daisyui": "^4.7.3",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "postcss": "^8.4.35",
+    "postcss-load-config": "^5.0.3",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.7",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6"
   },
   "type": "module",
   "exports": {
@@ -69,7 +71,9 @@
   },
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
   ],
   "license": "ISC",
   "repository": "github:zerodevx/svelte-img",

src/ambient.d.ts

@@ -1,8 +1,4 @@
-declare module '*?as=run' {
-  var img
-  export default img
-}
-declare module '*&as=run' {
-  var img
-  export default img
+declare module './assets/*' {
+  let meta
+  export default meta
 }

src/lib/FxParallax.svelte

@@ -1,4 +1,7 @@
 <script>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import Img from './SvelteImg.svelte'
 import { observe } from './utils.js'
 import { onMount } from 'svelte'

src/lib/FxReveal.svelte

@@ -1,4 +1,7 @@
 <script>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import Img from './SvelteImg.svelte'
 import { observe, len, lqipToBackground } from './utils.js'
 import { onMount } from 'svelte'

src/lib/SvelteImg.svelte

@@ -1,48 +1,88 @@
-<script>
-import Picture from './Picture.svelte'
+<script lang="ts">
+import SveltePicture from './SveltePicture.svelte'
 import { len, lqipToBackground } from './utils.js'
+import type { HTMLImgAttributes } from 'svelte/elements'
+import type { Picture } from 'vite-imagetools'
+
+interface $$Props extends Omit<HTMLImgAttributes, 'src'> {
+  /** imagetools import */
+  src: Picture
+
+  /** img tag `sizes` attr */
+  sizes?: string
+
+  /** img width override */
+  width?: number
+
+  /** img height override */
+  height?: number
+
+  /** img tag `loading` attr */
+  loading?: 'lazy' | 'eager'
+
+  /** img tag `decoding` attr */
+  decoding?: 'async' | 'auto' | 'sync'
+
+  /** bindable reference to `<img>` element */
+  ref?: HTMLImageElement
+}
+
+export let src: $$Props['src']
+export let sizes: $$Props['sizes'] = undefined
+export let width: $$Props['width'] = undefined
+export let height: $$Props['height'] = undefined
+export let loading: $$Props['loading'] = 'lazy'
+export let decoding: $$Props['decoding'] = 'async'
+export let ref: $$Props['ref'] = undefined
 
-/** @type {Object} imagetools import */
-export let src = {}
-/** @type {string|undefined} img tag `sizes` attr */
-export let sizes = undefined
-/** @type {number|undefined} img width override */
-export let width = undefined
-/** @type {number|undefined} img height override */
-export let height = undefined
-/** @type {'lazy'|'eager'} img tag `loading` attr */
-export let loading = 'lazy'
-/** @type {'async'|'auto'|'sync'} img tag `decoding` attr */
-export let decoding = 'async'
-/** @type {HTMLImageElement|undefined} bindable reference to `<img>` element */
-export let ref = undefined
-
-let sources = []
-let img = {}
-let background = undefined
-
-$: sources = src.sources || {}
-$: img = src.img || {}
+let sources: Picture['sources'] | undefined
+let img: (Picture['img'] & { lqip?: string }) | undefined
+let background: string | undefined
+
+$: sources = src?.sources
+$: img = src?.img
 $: if (len(img)) {
-  const { lqip } = img
-  background = lqip ? lqipToBackground(lqip) : undefined
+  background = img?.lqip ? lqipToBackground(img.lqip) : undefined
 }
 </script>
 
 {#if len(img)}
-  <Picture {sources} {sizes}>
+  <SveltePicture {sources} {sizes}>
     <!-- svelte-ignore a11y-missing-attribute a11y-no-noninteractive-element-interactions -->
     <img
       {loading}
       {decoding}
-      width={width || img.w || undefined}
-      height={height || img.h || undefined}
+      width={width || img?.w || undefined}
+      height={height || img?.h || undefined}
       style:background
       bind:this={ref}
       on:click
       on:load
       {...$$restProps}
-      src={img.src}
+      src={img?.src}
     />
-  </Picture>
+  </SveltePicture>
 {/if}
+
+<!--
+@component
+High-performance responsive/progressive images for SvelteKit
+
+## Usage
+```html
+<script>
+  import Img from '@zerodevx/svelte-img'
+  import cat from '$lib/assets/cat.jpg?as=run'
+</script>
+<Img class="cool kitty" src="{cat}" alt="Very meow" />
+```
+
+## Props
+- `src: Picture` - imagetools import
+- `sizes?: string` - img tag `sizes` attr
+- `width?: number` - img `width` override
+- `height?: number` - img `height` override
+- `loading?: 'lazy' | 'eager'` - img tag `loading` attr
+- `decoding?: 'async' | 'auto' | 'sync'` - img tag `decoding` attr
+- `ref?: HTMLImageElement` - bindable reference to `<img>` element
+-->

src/lib/Picture.svelte → src/lib/SveltePicture.svelte

@@ -1,4 +1,7 @@
 <script>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { len } from './utils.js'
 
 export let sources = {}
@@ -7,22 +10,15 @@ export let sizes = undefined
 let srcs = []
 
 $: if (len(sources)) {
-  const list = []
-  for (const [format, imgs] of Object.entries(sources)) {
-    list.push({
-      format,
-      srcset: imgs.map((i) => `${i.src} ${i.w}w`).join()
-    })
-  }
-  srcs = list
+  srcs = Object.entries(sources)
 } else {
   srcs = []
 }
 </script>
 
 {#if len(srcs)}
   <picture>
-    {#each srcs as { format, srcset }}
+    {#each srcs as [format, srcset]}
       <source type="image/{format}" {sizes} {srcset} />
     {/each}
     <slot />

src/lib/utils.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 /** @type {IntersectionObserver} */
 let observer
 

src/lib/vite.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { imagetools, pictureFormat } from 'vite-imagetools'
 
 function run(cfg) {

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 /* eslint-disable no-useless-escape */
 import hero from './assets/hero.jpg?w=480;1024;1920;2560;h=720&as=run'
 import i1 from './assets/1920/1.jpg?h=720&as=run'
@@ -7,19 +7,20 @@ import i3 from './assets/1920/3.jpg?h=720&as=run'
 import i4 from './assets/1920/4.jpg?h=720&as=run'
 import i5 from './assets/1920/5.jpg?h=720&as=run'
 import pllx from './assets/pllx.jpg?h=1024&as=run'
-import Img, { FxReveal, FxParallax } from '$lib'
+import Img, { FxReveal, FxParallax } from '$lib/index.js'
 import { version } from '$app/environment'
 import testSingle from './assets/640/01.jpg?w=80&h=80&format=jpg&as=run:0'
 import testFallback from './assets/640/01.jpg?h=80'
 import testProfile from './assets/640/01.jpg?as=run2'
+import type { Picture } from 'vite-imagetools'
 
 const modules = import.meta.glob('./assets/640/*.jpg', {
   import: 'default',
   eager: true,
   query: { w: 640, h: 640, fit: 'cover', as: 'run' }
 })
-const esc = (i) => i
-const images = Object.entries(modules).map((i) => i[1])
+const esc = (i: string) => i
+const images = Object.entries(modules).map((i) => i[1]) as Picture[]
 let selected = 0
 </script>
 

svelte.config.js

@@ -1,4 +1,4 @@
-import { vitePreprocess } from '@sveltejs/kit/vite'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 import adapter from '@sveltejs/adapter-static'
 import { readFileSync } from 'node:fs'
 

tests/test.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { expect, test } from '@playwright/test'
 
 test('basic - variants are generated', async ({ page }) => {

jsconfig.json → tsconfig.json

@@ -1,11 +1,16 @@
 {
   "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "moduleResolution": "NodeNext"
+    "strict": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "./dist"
   }
 }