lazy-svelte-image 0.0.1
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.
- package/README.md +58 -0
- package/dist/components/Image.svelte +63 -0
- package/dist/components/Image.svelte.d.ts +22 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +6 -0
- package/package.json +52 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# create-svelte
|
|
2
|
+
|
|
3
|
+
Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
|
4
|
+
|
|
5
|
+
Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
|
|
6
|
+
|
|
7
|
+
## Creating a project
|
|
8
|
+
|
|
9
|
+
If you're seeing this, you've probably already done this step. Congrats!
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# create a new project in the current directory
|
|
13
|
+
npm create svelte@latest
|
|
14
|
+
|
|
15
|
+
# create a new project in my-app
|
|
16
|
+
npm create svelte@latest my-app
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Developing
|
|
20
|
+
|
|
21
|
+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run dev
|
|
25
|
+
|
|
26
|
+
# or start the server and open the app in a new browser tab
|
|
27
|
+
npm run dev -- --open
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
|
|
31
|
+
|
|
32
|
+
## Building
|
|
33
|
+
|
|
34
|
+
To build your library:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm run package
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
To create a production version of your showcase app:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npm run build
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
You can preview the production build with `npm run preview`.
|
|
47
|
+
|
|
48
|
+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
|
49
|
+
|
|
50
|
+
## Publishing
|
|
51
|
+
|
|
52
|
+
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
53
|
+
|
|
54
|
+
To publish your library to [npm](https://www.npmjs.com):
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm publish
|
|
58
|
+
```
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
<script>import { icons } from "../index.ts";
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
export let src;
|
|
4
|
+
let loaded = false;
|
|
5
|
+
let failed = false;
|
|
6
|
+
let loading = false;
|
|
7
|
+
onMount(() => {
|
|
8
|
+
const img = new Image();
|
|
9
|
+
img.src = src;
|
|
10
|
+
loading = true;
|
|
11
|
+
img.onload = () => {
|
|
12
|
+
loading = false;
|
|
13
|
+
loaded = true;
|
|
14
|
+
};
|
|
15
|
+
img.onerror = () => {
|
|
16
|
+
loading = false;
|
|
17
|
+
failed = true;
|
|
18
|
+
};
|
|
19
|
+
});
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#if loaded}
|
|
23
|
+
<img {...$$restProps} {src} alt="" />
|
|
24
|
+
{:else if failed}
|
|
25
|
+
<div class="image-placeholder">
|
|
26
|
+
{#if $$slots.broken}
|
|
27
|
+
<slot name="broken" />
|
|
28
|
+
{:else}
|
|
29
|
+
<div class="broken-image">
|
|
30
|
+
{@html icons.broken}
|
|
31
|
+
Not Found
|
|
32
|
+
</div>
|
|
33
|
+
{/if}
|
|
34
|
+
</div>
|
|
35
|
+
{:else if loading}
|
|
36
|
+
<div class="image-placeholder">
|
|
37
|
+
{#if $$slots.loader}
|
|
38
|
+
<slot name="loader" />
|
|
39
|
+
{:else}
|
|
40
|
+
{@html icons.loader}
|
|
41
|
+
{/if}
|
|
42
|
+
</div>
|
|
43
|
+
{/if}
|
|
44
|
+
|
|
45
|
+
<style>
|
|
46
|
+
.broken-image {
|
|
47
|
+
width: 4rem;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
gap: 10px;
|
|
51
|
+
font-size: 10px;
|
|
52
|
+
font-family: monospace;
|
|
53
|
+
text-align: center;
|
|
54
|
+
}
|
|
55
|
+
.image-placeholder {
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
width: 100%;
|
|
59
|
+
height: 100%;
|
|
60
|
+
align-items: center;
|
|
61
|
+
background-color: #c2c2c224;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
src: string;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {
|
|
11
|
+
broken: {};
|
|
12
|
+
loader: {};
|
|
13
|
+
};
|
|
14
|
+
exports?: undefined;
|
|
15
|
+
bindings?: undefined;
|
|
16
|
+
};
|
|
17
|
+
export type ImageProps = typeof __propDef.props;
|
|
18
|
+
export type ImageEvents = typeof __propDef.events;
|
|
19
|
+
export type ImageSlots = typeof __propDef.slots;
|
|
20
|
+
export default class Image extends SvelteComponent<ImageProps, ImageEvents, ImageSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
// Reexport your entry components here
|
|
2
|
+
export { default as ImageLoader } from './components/Image.svelte';
|
|
3
|
+
export const icons = {
|
|
4
|
+
loader: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="100" height="100" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-dasharray="117.80972450961724 41.269908169872416" r="25" stroke-width="7" stroke="#8996a0" fill="none" cy="50" cx="50"><animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1.6129032258064517s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>',
|
|
5
|
+
broken: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM116.6 187.9L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9zM220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3L220.9 270z"/></svg>'
|
|
6
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "lazy-svelte-image",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "vite dev",
|
|
6
|
+
"build": "vite build && npm run package",
|
|
7
|
+
"preview": "vite preview",
|
|
8
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
9
|
+
"prepublishOnly": "npm run package",
|
|
10
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
11
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
12
|
+
"lint": "prettier --check . && eslint .",
|
|
13
|
+
"format": "prettier --write ."
|
|
14
|
+
},
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/index.d.ts",
|
|
18
|
+
"svelte": "./dist/index.js"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"!dist/**/*.test.*",
|
|
24
|
+
"!dist/**/*.spec.*"
|
|
25
|
+
],
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"svelte": "^4.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@sveltejs/adapter-auto": "^3.0.0",
|
|
31
|
+
"@sveltejs/kit": "^2.0.0",
|
|
32
|
+
"@sveltejs/package": "^2.3.2",
|
|
33
|
+
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
|
34
|
+
"@types/eslint": "^8.56.7",
|
|
35
|
+
"eslint": "^9.0.0",
|
|
36
|
+
"eslint-config-prettier": "^9.1.0",
|
|
37
|
+
"eslint-plugin-svelte": "^2.36.0",
|
|
38
|
+
"globals": "^15.0.0",
|
|
39
|
+
"prettier": "^3.1.1",
|
|
40
|
+
"prettier-plugin-svelte": "^3.1.2",
|
|
41
|
+
"publint": "^0.1.9",
|
|
42
|
+
"svelte": "^4.2.7",
|
|
43
|
+
"svelte-check": "^3.6.0",
|
|
44
|
+
"tslib": "^2.4.1",
|
|
45
|
+
"typescript": "^5.0.0",
|
|
46
|
+
"typescript-eslint": "^8.0.0-alpha.20",
|
|
47
|
+
"vite": "^5.0.11"
|
|
48
|
+
},
|
|
49
|
+
"svelte": "./dist/index.js",
|
|
50
|
+
"types": "./dist/index.d.ts",
|
|
51
|
+
"type": "module"
|
|
52
|
+
}
|