svelte-remote-image 0.4.5 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/Img.svelte +81 -54
  2. package/dist/components/Img.svelte.d.ts +22 -20
  3. package/dist/components/Picture.svelte +100 -72
  4. package/dist/components/Picture.svelte.d.ts +22 -20
  5. package/package.json +4 -4
package/dist/components/Img.svelte CHANGED
@@ -1,62 +1,89 @@
1
- <script>import { BROWSER } from "esm-env";
2
- import { afterUpdate } from "svelte";
3
- export let src;
4
- export let alt = "";
5
- export let title = "";
6
- export let style = "";
7
- let className = "";
8
- export { className as class };
9
- const imgId = `svelte-remote-image-${alt.replaceAll(" ", "-")}-${Math.round(Math.random() * 1e7)}`;
10
- const getImgElement = () => BROWSER ? document.getElementById(imgId) : null;
11
- let visibilityStyle = "invisible";
12
- let imgSrc;
1
+ <script lang="ts">
2
+ import { BROWSER } from 'esm-env'
3
+ import type { ImgSrc } from './type.js'
4
+ import { afterUpdate } from 'svelte'
5
+
6
+ export let src: ImgSrc
7
+ // biome-ignore lint/style/useConst:
8
+ export let alt = ''
9
+ // biome-ignore lint/style/useConst:
10
+ export let title = ''
11
+
12
+ // biome-ignore lint/style/useConst:
13
+ export let style = ''
14
+ // biome-ignore lint/style/useConst:
15
+ let className = ''
16
+ export { className as class }
17
+
18
+ const imgId = `svelte-remote-image-${alt.replaceAll(' ', '-')}-${Math.round(Math.random() * 10000000)}`
19
+ const getImgElement = () =>
20
+ BROWSER ? (document.getElementById(imgId) as HTMLImageElement | null) : null
21
+
22
+ let visibilityStyle: 'invisible' | 'visible' = 'invisible'
23
+
24
+ let imgSrc: ImgSrc
25
+
13
26
  $: {
14
- imgSrc = src;
15
- visibilityStyle = "invisible";
27
+ imgSrc = src
28
+ visibilityStyle = 'invisible'
16
29
  }
30
+
17
31
  afterUpdate(async () => {
18
- const img = getImgElement();
19
- if (!img || !img.complete) {
20
- return;
21
- }
22
- if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
23
- visibilityStyle = "visible";
24
- } else {
25
- handleImgError();
26
- }
27
- });
32
+ const img = getImgElement()
33
+
34
+ if (!img || !img.complete) {
35
+ return
36
+ }
37
+
38
+ // Image load success check.
39
+ if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
40
+ visibilityStyle = 'visible'
41
+ } else {
42
+ // Failed
43
+ handleImgError()
44
+ }
45
+ })
46
+
28
47
  const handleImgError = () => {
29
- if (!imgSrc.fallback) {
30
- visibilityStyle = "visible";
31
- return;
32
- }
33
- visibilityStyle = "invisible";
34
- const img = getImgElement();
35
- if (!img) {
36
- return;
37
- }
38
- let fallbackUrl = void 0;
39
- const index = imgSrc.fallback.findIndex(
40
- (url) => new URL(url).toString() === new URL(img.src).toString()
41
- );
42
- if (index === -1) {
43
- fallbackUrl = imgSrc.fallback[0];
44
- } else {
45
- fallbackUrl = imgSrc.fallback[index + 1];
46
- }
47
- if (!fallbackUrl) {
48
- visibilityStyle = "visible";
49
- return;
50
- }
51
- imgSrc = {
52
- ...imgSrc,
53
- img: fallbackUrl,
54
- srcsets: void 0
55
- };
56
- };
48
+ if (!imgSrc.fallback) {
49
+ visibilityStyle = 'visible'
50
+ return
51
+ }
52
+ visibilityStyle = 'invisible'
53
+
54
+ const img = getImgElement()
55
+
56
+ if (!img) {
57
+ return
58
+ }
59
+
60
+ let fallbackUrl: string | undefined = undefined
61
+
62
+ const index = imgSrc.fallback.findIndex(
63
+ (url) => new URL(url).toString() === new URL(img.src).toString(),
64
+ )
65
+ if (index === -1) {
66
+ fallbackUrl = imgSrc.fallback[0]
67
+ } else {
68
+ fallbackUrl = imgSrc.fallback[index + 1]
69
+ }
70
+
71
+ if (!fallbackUrl) {
72
+ visibilityStyle = 'visible'
73
+ return
74
+ }
75
+
76
+ // fallback
77
+ imgSrc = {
78
+ ...imgSrc,
79
+ img: fallbackUrl,
80
+ srcsets: undefined,
81
+ }
82
+ }
83
+
57
84
  const handleLoaded = () => {
58
- visibilityStyle = "visible";
59
- };
85
+ visibilityStyle = 'visible'
86
+ }
60
87
  </script>
61
88
 
62
89
  <img
package/dist/components/Img.svelte.d.ts CHANGED
@@ -1,23 +1,25 @@
1
- import { SvelteComponent } from "svelte";
2
1
  import type { ImgSrc } from './type.js';
3
- declare const __propDef: {
4
- props: {
5
- src: ImgSrc;
6
- alt?: string;
7
- title?: string;
8
- style?: string;
9
- class?: string;
2
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
10
12
  };
11
- events: {
12
- [evt: string]: CustomEvent<any>;
13
- };
14
- slots: {};
15
- exports?: {} | undefined;
16
- bindings?: string | undefined;
17
- };
18
- export type ImgProps = typeof __propDef.props;
19
- export type ImgEvents = typeof __propDef.events;
20
- export type ImgSlots = typeof __propDef.slots;
21
- export default class Img extends SvelteComponent<ImgProps, ImgEvents, ImgSlots> {
13
+ z_$$bindings?: Bindings;
22
14
  }
23
- export {};
15
+ declare const Img: $$__sveltets_2_IsomorphicComponent<{
16
+ src: ImgSrc;
17
+ alt?: string;
18
+ title?: string;
19
+ style?: string;
20
+ class?: string;
21
+ }, {
22
+ [evt: string]: CustomEvent<any>;
23
+ }, {}, {}, string>;
24
+ type Img = InstanceType<typeof Img>;
25
+ export default Img;
package/dist/components/Picture.svelte CHANGED
@@ -1,79 +1,107 @@
1
- <script>import { BROWSER } from "esm-env";
2
- import { afterUpdate } from "svelte";
3
- export let src;
4
- export let alt = "";
5
- export let title = "";
6
- export let style = "";
7
- let className = "";
8
- export { className as class };
9
- const imgId = `svelte-remote-image-${alt.replaceAll(" ", "-")}-${Math.round(Math.random() * 1e7)}`;
10
- const getImgElement = () => BROWSER ? document.getElementById(imgId) : null;
11
- let loadStatus = "loading";
1
+ <script lang="ts">
2
+ import { BROWSER } from 'esm-env'
3
+ import type { PictureSrc } from './type.js'
4
+ import { afterUpdate } from 'svelte'
5
+
6
+ export let src: PictureSrc
7
+ // biome-ignore lint/style/useConst:
8
+ export let alt = ''
9
+ // biome-ignore lint/style/useConst:
10
+ export let title = ''
11
+
12
+ export let style = ''
13
+ // biome-ignore lint/style/useConst:
14
+ let className = ''
15
+ export { className as class }
16
+
17
+ const imgId = `svelte-remote-image-${alt.replaceAll(' ', '-')}-${Math.round(Math.random() * 10000000)}`
18
+ const getImgElement = () =>
19
+ BROWSER ? (document.getElementById(imgId) as HTMLImageElement | null) : null
20
+
21
+ let loadStatus: 'loading' | 'loaded' = 'loading'
12
22
  $: {
13
- loadStatus = "loading";
14
- if (src.placeholder) {
15
- if (src.placeholder.dataUri) {
16
- style = `${style} background: url(${src.placeholder.dataUri}) no-repeat center/cover;`;
17
- }
18
- if (src.placeholder.color) {
19
- style = `${style} background-color: ${src.placeholder.color};`;
20
- }
21
- }
22
- const img = getImgElement();
23
- if (img) {
24
- img.style.visibility = "hidden";
25
- }
23
+ loadStatus = 'loading'
24
+
25
+ if (src.placeholder) {
26
+ if (src.placeholder.dataUri) {
27
+ style = `${style} background: url(${src.placeholder.dataUri}) no-repeat center/cover;`
28
+ }
29
+ if (src.placeholder.color) {
30
+ style = `${style} background-color: ${src.placeholder.color};`
31
+ }
32
+ }
33
+
34
+ const img = getImgElement()
35
+
36
+ if (img) {
37
+ img.style.visibility = 'hidden'
38
+ }
26
39
  }
40
+
27
41
  afterUpdate(async () => {
28
- const img = getImgElement();
29
- if (!img || !img.complete) {
30
- return;
31
- }
32
- if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
33
- img.style.visibility = "visible";
34
- loadStatus = "loaded";
35
- } else {
36
- handleImgError();
37
- }
38
- });
42
+ const img = getImgElement()
43
+
44
+ if (!img || !img.complete) {
45
+ return
46
+ }
47
+
48
+ // Image load success check.
49
+ if (img.naturalWidth !== 0 && img.naturalHeight !== 0) {
50
+ img.style.visibility = 'visible'
51
+ loadStatus = 'loaded'
52
+ } else {
53
+ // Failed
54
+ handleImgError()
55
+ }
56
+ })
57
+
39
58
  const handleImgError = () => {
40
- if (!src.fallback) {
41
- return;
42
- }
43
- const img = getImgElement();
44
- if (!img) {
45
- return;
46
- }
47
- img.style.visibility = "hidden";
48
- let fallbackUrl = void 0;
49
- const index = src.fallback.findIndex(
50
- (url) => new URL(url).toString() === new URL(img.src).toString()
51
- );
52
- if (index === -1) {
53
- fallbackUrl = src.fallback[0];
54
- } else {
55
- fallbackUrl = src.fallback[index + 1];
56
- }
57
- if (!fallbackUrl) {
58
- return;
59
- }
60
- src = {
61
- ...src,
62
- img: fallbackUrl,
63
- webp: [],
64
- jpeg: [],
65
- png: [],
66
- placeholder: {
67
- color: src.placeholder?.color,
68
- dataUri: src.placeholder?.dataUri
69
- }
70
- };
71
- };
72
- const handleLoaded = (e) => {
73
- const img = e.currentTarget;
74
- img.style.visibility = "visible";
75
- loadStatus = "loaded";
76
- };
59
+ if (!src.fallback) {
60
+ return
61
+ }
62
+
63
+ const img = getImgElement()
64
+
65
+ if (!img) {
66
+ return
67
+ }
68
+
69
+ img.style.visibility = 'hidden'
70
+
71
+ let fallbackUrl: string | undefined = undefined
72
+
73
+ const index = src.fallback.findIndex(
74
+ (url) => new URL(url).toString() === new URL(img.src).toString(),
75
+ )
76
+ if (index === -1) {
77
+ fallbackUrl = src.fallback[0]
78
+ } else {
79
+ fallbackUrl = src.fallback[index + 1]
80
+ }
81
+
82
+ if (!fallbackUrl) {
83
+ return
84
+ }
85
+
86
+ // fallback
87
+ src = {
88
+ ...src,
89
+ img: fallbackUrl,
90
+ webp: [],
91
+ jpeg: [],
92
+ png: [],
93
+ placeholder: {
94
+ color: src.placeholder?.color,
95
+ dataUri: src.placeholder?.dataUri,
96
+ },
97
+ }
98
+ }
99
+
100
+ const handleLoaded = (e: Event) => {
101
+ const img = e.currentTarget as HTMLImageElement
102
+ img.style.visibility = 'visible'
103
+ loadStatus = 'loaded'
104
+ }
77
105
  </script>
78
106
 
79
107
  <picture>
package/dist/components/Picture.svelte.d.ts CHANGED
@@ -1,23 +1,25 @@
1
- import { SvelteComponent } from "svelte";
2
1
  import type { PictureSrc } from './type.js';
3
- declare const __propDef: {
4
- props: {
5
- src: PictureSrc;
6
- alt?: string;
7
- title?: string;
8
- style?: string;
9
- class?: string;
2
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: Props & {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
10
12
  };
11
- events: {
12
- [evt: string]: CustomEvent<any>;
13
- };
14
- slots: {};
15
- exports?: {} | undefined;
16
- bindings?: string | undefined;
17
- };
18
- export type PictureProps = typeof __propDef.props;
19
- export type PictureEvents = typeof __propDef.events;
20
- export type PictureSlots = typeof __propDef.slots;
21
- export default class Picture extends SvelteComponent<PictureProps, PictureEvents, PictureSlots> {
13
+ z_$$bindings?: Bindings;
22
14
  }
23
- export {};
15
+ declare const Picture: $$__sveltets_2_IsomorphicComponent<{
16
+ src: PictureSrc;
17
+ alt?: string;
18
+ title?: string;
19
+ style?: string;
20
+ class?: string;
21
+ }, {
22
+ [evt: string]: CustomEvent<any>;
23
+ }, {}, {}, string>;
24
+ type Picture = InstanceType<typeof Picture>;
25
+ export default Picture;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-remote-image",
3
- "version": "0.4.5",
3
+ "version": "0.4.6",
4
4
  "license": "MIT",
5
5
  "homepage": "https://github.com/ocknamo/svelte-remote-image",
6
6
  "scripts": {
@@ -27,17 +27,17 @@
27
27
  "!dist/**/*.spec.*"
28
28
  ],
29
29
  "peerDependencies": {
30
- "svelte": "^4.0.0"
30
+ "svelte": "^4.0.0 || ^5.0.0"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@biomejs/biome": "^1.8.1",
34
34
  "@sveltejs/adapter-auto": "^3.0.0",
35
35
  "@sveltejs/adapter-cloudflare": "^4.4.1",
36
36
  "@sveltejs/package": "^2.0.0",
37
- "@sveltejs/vite-plugin-svelte": "^3.0.0",
37
+ "@sveltejs/vite-plugin-svelte": "^4.0.0",
38
38
  "esm-env": "^1.2.1",
39
39
  "publint": "^0.1.9",
40
- "svelte": "^4.2.7",
40
+ "svelte": "^5.0.0",
41
41
  "svelte-check": "^3.6.0",
42
42
  "tslib": "^2.4.1",
43
43
  "typescript": "^5.0.0",