feat: svelte component

.gitignore

@@ -1,5 +1,6 @@
 .nuxt
 .output
+.svelte-kit
 **/.vitepress/cache
 *.log*
 .DS_Store

README.md

@@ -55,7 +55,7 @@ You can target specific images by passing a CSS selector, a DOM element, a list
 2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
 3. Install dependencies using `pnpm install`
 4. Run `pnpm run dev:prepare`
-5. Start development server using `pnpm run dev`
+5. Start development server using `pnpm run dev` inside the one of the `packages` directories
 
 ## License
 

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "packageManager": "[email protected]",
   "scripts": {
-    "dev": "pnpm -r --filter=./packages/** run dev:prepare",
     "build": "pnpm -r --filter=./packages/** run build",
+    "dev:prepare": "pnpm -r --filter=./packages/** run dev:prepare",
     "docs": "pnpm -C docs run dev",
     "docs:build": "pnpm -C docs run build",
     "docs:serve": "pnpm -C docs run serve",
@@ -14,7 +14,7 @@
     "test": "pnpm -r test:run",
     "test:types": "pnpm -r test:types",
     "release": "bumpp -r",
-    "prepare": "pnpm run dev"
+    "prepare": "pnpm run dev:prepare"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.5",

packages/nuxt/package.json

@@ -42,8 +42,7 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "test:types": "vue-tsc --noEmit",
-    "prepare": "nuxi prepare playground"
+    "test:types": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@nuxt/kit": "^3.4.2",

packages/svelte/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: ['@antfu/eslint-config-ts'],
+  plugins: ['svelte3'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3',
+    },
+  ],
+  settings: {
+    'svelte3/typescript': () => require('typescript'),
+  },
+  // Disable some conflicting `@antfu/eslint-config-ts` rules
+  rules: {
+    '@typescript-eslint/comma-dangle': 'off',
+    'import/first': 'off',
+    'import/no-mutable-exports': 'off',
+    'no-multiple-empty-lines': 'off',
+    'no-undef-init': 'off',
+  },
+}

packages/svelte/README.md

@@ -0,0 +1,11 @@
+# @unlazy/svelte
+
+unlazy integration for Svelte.
+
+## Documentation
+
+Please refer to the [documentation](https://unlazy.byjohann.dev/integrations/svelte).
+
+## License
+
+MIT License © 2023-present [Johann Schopplich](https://github.com/johannschopplich)

packages/svelte/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@unlazy/svelte",
+  "type": "module",
+  "version": "0.7.6",
+  "packageManager": "[email protected]",
+  "description": "Svelte lazy loading library for placeholder images",
+  "author": "Johann Schopplich <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://unlazy.byjohann.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johannschopplich/unlazy.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/johannschopplich/unlazy/issues"
+  },
+  "keywords": [
+    "blurhash",
+    "lazy",
+    "loading",
+    "lozad",
+    "placeholder",
+    "responsive",
+    "thumbhash",
+    "svelte"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm run package",
+    "dev": "vite dev",
+    "dev:build": "vite build && pnpm run package",
+    "dev:prepare": "pnpm run package",
+    "dev:preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package",
+    "test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "svelte": "^3.54.0"
+  },
+  "dependencies": {
+    "unlazy": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.1",
+    "@sveltejs/kit": "^1.15.8",
+    "@sveltejs/package": "^2.0.2",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "svelte": "^3.58.0",
+    "svelte-check": "^3.2.0",
+    "tslib": "^2.5.0"
+  }
+}

packages/svelte/src/app.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>

packages/svelte/src/lib/UnLazyImage.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+  import { lazyLoad } from 'unlazy'
+  import type { UnLazyLoadOptions } from 'unlazy'
+
+  /**
+   * A flag to indicate whether the sizes attribute should be automatically calculated.
+   * @default false
+   */
+  export let autoSizes = false
+  /** A BlurHash string representing the blurry placeholder image. */
+  export let blurhash: string | undefined = undefined
+  /** A ThumbHash string representing the blurry placeholder image. */
+  export let thumbhash: string | undefined = undefined
+  export let placeholderSize: UnLazyLoadOptions['placeholderSize'] = 32
+  /**
+   * A flag to indicate whether the image should be loaded immediately.
+   * @default false
+   */
+  export let immediate = false
+
+  let target: HTMLImageElement | null = null
+  let cleanup: (() => void) | null = null
+  let isMounted = false
+
+  onMount(() => {
+    isMounted = true
+  })
+
+  $: if (isMounted && target) {
+    cleanup?.()
+
+    cleanup = lazyLoad(target, {
+      hash: thumbhash || blurhash,
+      hashType: thumbhash ? 'thumbhash' : 'blurhash',
+      placeholderSize,
+      immediate,
+    })
+  }
+
+  onDestroy(() => {
+    cleanup?.()
+  })
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img
+  bind:this={target}
+  data-sizes={autoSizes ? 'auto' : undefined}
+  loading="lazy"
+  {...$$restProps}
+/>

packages/svelte/src/lib/index.js

@@ -0,0 +1 @@
+export { default as UnLazyimage } from './UnLazyImage.svelte'

packages/svelte/src/routes/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import UnLazyImage from '../lib/UnLazyImage.svelte'
+</script>
+
+<UnLazyImage
+  blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+  auto-sizes={true}
+  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+  width="640"
+  height="640"
+/>
+<UnLazyImage
+  thumbhash="1QcSHQRnh493V4dIh4eXh1h4kJUI"
+  auto-sizes={true}
+  data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+  width="480"
+  height="640"
+/>

packages/svelte/svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/kit/vite'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter(),
+  },
+}
+
+export default config

packages/svelte/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+}

packages/svelte/vite.config.ts

@@ -0,0 +1,25 @@
+import { resolve } from 'node:path'
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+const currentDir = new URL('.', import.meta.url).pathname
+
+export default defineConfig({
+  plugins: [sveltekit()],
+
+  // Custom alias for unlazy until Jiti issue is resolved
+  // https://github.com/unjs/jiti/issues/136
+  resolve: {
+    alias: {
+      '@unlazy/core': `${resolve(currentDir, '../core/src')}/`,
+      'unlazy': `${resolve(currentDir, '../unlazy/src')}/`,
+    },
+  },
+
+  optimizeDeps: {
+    exclude: [
+      '@unlazy/core',
+      'unlazy',
+    ],
+  },
+})