Skip to content

Commit fbcade9

Browse files
johannschopplichjohannschopplich
committed
feat: svelte component
1 parent 4766264 commit fbcade9

File tree

15 files changed

+582
-5
lines changed

15 files changed

+582
-5
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.nuxt
22
.output
3+
.svelte-kit
34
**/.vitepress/cache
45
*.log*
56
.DS_Store

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ You can target specific images by passing a CSS selector, a DOM element, a list
5555
2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
5656
3. Install dependencies using `pnpm install`
5757
4. Run `pnpm run dev:prepare`
58-
5. Start development server using `pnpm run dev`
58+
5. Start development server using `pnpm run dev` inside the one of the `packages` directories
5959

6060
## License
6161

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
"private": true,
55
"packageManager": "pnpm@8.3.1",
66
"scripts": {
7-
"dev": "pnpm -r --filter=./packages/** run dev:prepare",
87
"build": "pnpm -r --filter=./packages/** run build",
8+
"dev:prepare": "pnpm -r --filter=./packages/** run dev:prepare",
99
"docs": "pnpm -C docs run dev",
1010
"docs:build": "pnpm -C docs run build",
1111
"docs:serve": "pnpm -C docs run serve",
@@ -14,7 +14,7 @@
1414
"test": "pnpm -r test:run",
1515
"test:types": "pnpm -r test:types",
1616
"release": "bumpp -r",
17-
"prepare": "pnpm run dev"
17+
"prepare": "pnpm run dev:prepare"
1818
},
1919
"devDependencies": {
2020
"@antfu/eslint-config": "^0.38.5",

‎packages/nuxt/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@
4242
"dev": "nuxi dev playground",
4343
"dev:build": "nuxi build playground",
4444
"dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
45-
"test:types": "vue-tsc --noEmit",
46-
"prepare": "nuxi prepare playground"
45+
"test:types": "vue-tsc --noEmit"
4746
},
4847
"dependencies": {
4948
"@nuxt/kit": "^3.4.2",

‎packages/svelte/.eslintrc.cjs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
extends: ['@antfu/eslint-config-ts'],
3+
plugins: ['svelte3'],
4+
overrides: [
5+
{
6+
files: ['*.svelte'],
7+
processor: 'svelte3/svelte3',
8+
},
9+
],
10+
settings: {
11+
'svelte3/typescript': () => require('typescript'),
12+
},
13+
// Disable some conflicting `@antfu/eslint-config-ts` rules
14+
rules: {
15+
'@typescript-eslint/comma-dangle': 'off',
16+
'import/first': 'off',
17+
'import/no-mutable-exports': 'off',
18+
'no-multiple-empty-lines': 'off',
19+
'no-undef-init': 'off',
20+
},
21+
}

‎packages/svelte/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# @unlazy/svelte
2+
3+
unlazy integration for Svelte.
4+
5+
## Documentation
6+
7+
Please refer to the [documentation](https://unlazy.byjohann.dev/integrations/svelte).
8+
9+
## License
10+
11+
MIT License © 2023-present [Johann Schopplich](https://github.com/johannschopplich)

‎packages/svelte/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@unlazy/svelte",
3+
"type": "module",
4+
"version": "0.7.6",
5+
"packageManager": "pnpm@8.3.1",
6+
"description": "Svelte lazy loading library for placeholder images",
7+
"author": "Johann Schopplich <pkg@johannschopplich.com>",
8+
"license": "MIT",
9+
"homepage": "https://unlazy.byjohann.dev",
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/johannschopplich/unlazy.git",
13+
"directory": "packages/svelte"
14+
},
15+
"bugs": {
16+
"url": "https://github.com/johannschopplich/unlazy/issues"
17+
},
18+
"keywords": [
19+
"blurhash",
20+
"lazy",
21+
"loading",
22+
"lozad",
23+
"placeholder",
24+
"responsive",
25+
"thumbhash",
26+
"svelte"
27+
],
28+
"sideEffects": false,
29+
"exports": {
30+
".": {
31+
"types": "./dist/index.d.ts",
32+
"svelte": "./dist/index.js"
33+
}
34+
},
35+
"svelte": "./dist/index.js",
36+
"types": "./dist/index.d.ts",
37+
"files": [
38+
"dist"
39+
],
40+
"scripts": {
41+
"build": "pnpm run package",
42+
"dev": "vite dev",
43+
"dev:build": "vite build && pnpm run package",
44+
"dev:prepare": "pnpm run package",
45+
"dev:preview": "vite preview",
46+
"package": "svelte-kit sync && svelte-package",
47+
"test:types": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
48+
},
49+
"peerDependencies": {
50+
"svelte": "^3.54.0"
51+
},
52+
"dependencies": {
53+
"unlazy": "workspace:*"
54+
},
55+
"devDependencies": {
56+
"@sveltejs/adapter-auto": "^2.0.1",
57+
"@sveltejs/kit": "^1.15.8",
58+
"@sveltejs/package": "^2.0.2",
59+
"eslint-plugin-svelte3": "^4.0.0",
60+
"svelte": "^3.58.0",
61+
"svelte-check": "^3.2.0",
62+
"tslib": "^2.5.0"
63+
}
64+
}

‎packages/svelte/src/app.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
%sveltekit.head%
7+
</head>
8+
<body>
9+
<div>%sveltekit.body%</div>
10+
</body>
11+
</html>

‎packages/svelte/src/lib/UnLazyImage.svelte‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import { onDestroy, onMount } from 'svelte'
3+
import { lazyLoad } from 'unlazy'
4+
import type { UnLazyLoadOptions } from 'unlazy'
5+
6+
/**
7+
* A flag to indicate whether the sizes attribute should be automatically calculated.
8+
* @default false
9+
*/
10+
export let autoSizes = false
11+
/** A BlurHash string representing the blurry placeholder image. */
12+
export let blurhash: string | undefined = undefined
13+
/** A ThumbHash string representing the blurry placeholder image. */
14+
export let thumbhash: string | undefined = undefined
15+
export let placeholderSize: UnLazyLoadOptions['placeholderSize'] = 32
16+
/**
17+
* A flag to indicate whether the image should be loaded immediately.
18+
* @default false
19+
*/
20+
export let immediate = false
21+
22+
let target: HTMLImageElement | null = null
23+
let cleanup: (() => void) | null = null
24+
let isMounted = false
25+
26+
onMount(() => {
27+
isMounted = true
28+
})
29+
30+
$: if (isMounted && target) {
31+
cleanup?.()
32+
33+
cleanup = lazyLoad(target, {
34+
hash: thumbhash || blurhash,
35+
hashType: thumbhash ? 'thumbhash' : 'blurhash',
36+
placeholderSize,
37+
immediate,
38+
})
39+
}
40+
41+
onDestroy(() => {
42+
cleanup?.()
43+
})
44+
</script>
45+
46+
<!-- svelte-ignore a11y-missing-attribute -->
47+
<img
48+
bind:this={target}
49+
data-sizes={autoSizes ? 'auto' : undefined}
50+
loading="lazy"
51+
{...$$restProps}
52+
/>

‎packages/svelte/src/lib/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as UnLazyimage } from './UnLazyImage.svelte'

0 commit comments

Comments
 (0)