@zerodevx/svelte-img - npm Package Compare versions

Comparing version 0.1.0-rc1 to 1.0.0-rc.1

package.json

 {
   "name": "@zerodevx/svelte-img",
-  "description": "Lazy-load images progressively",
-  "version": "0.1.0-rc1",
+  "version": "1.0.0-rc.1",
+  "description": "Elegant responsive images for SvelteKit",
   "author": "Jason Lee <[e-mail]>",
-  "svelte": "src/index.js",
-  "main": "dist/svelte-img.js",
-  "scripts": {
-    "tailwind:build": "tailwind build -o docs/build/global.css",
-    "dev": "rollup -c -w",
-    "start": "sirv docs",
-    "lint": "eslint .",
-    "build:dev": "rollup -c",
-    "build:css": "NODE_ENV=production npm run tailwind:build",
-    "build:dist": "rollup -c rollup.dist.config.js",
-    "build": "run-s build:*",
-    "prepublishOnly": "npm run build"
+  "type": "module",
+  "dependencies": {
+    "imagetools-core": "^3.0.3",
+    "vite-imagetools": "^4.0.4"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.3.3",
-    "eslint": "^7.10.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-svelte3": "^2.7.3",
-    "npm-run-all": "^4.1.5",
-    "rollup": "^2.28.2",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^6.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "sirv-cli": "^1.0.6",
-    "svelte": "^3.28.0",
-    "tailwindcss": "^1.8.10"
+    "@playwright/test": "^1.25.1",
+    "@rollup/pluginutils": "^4.2.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.39",
+    "@sveltejs/kit": "^1.0.0-next.435",
+    "@sveltejs/package": "^1.0.0-next.1",
+    "@tailwindcss/typography": "^0.5.4",
+    "autoprefixer": "^10.4.8",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "magic-string": "^0.26.2",
+    "postcss": "^8.4.16",
+    "postcss-load-config": "^4.0.1",
+    "prettier": "^2.7.1",
+    "prettier-plugin-svelte": "^2.7.0",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.1",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.8",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.9"
   },
-  "files": [
-    "src",
-    "dist"
-  ],
   "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/zerodevx/svelte-img.git"
-  },
+  "repository": "github:zerodevx/svelte-img",
   "keywords": [
     "svelte",
-    "webcomponent",
-    "custom-element",
+    "sveltekit",
+    "responsive",
+    "progressive",
     "image",
-    "lazy-load",
-    "progressive"
-  ]
-}
+    "lazy-load"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./SvelteImg.svelte": "./SvelteImg.svelte",
+    "./imagetools": "./imagetools.js",
+    ".": "./index.js"
+  },
+  "svelte": "./index.js"
+}

README.md

 # svelte-img
 
-A component to lazy-load images natively and progressively.
+> Elegant responsive images for SvelteKit.
 
-DEMO: https://zerodevx.github.io/svelte-img/
+Demo: https://zerodevx.github.io/svelte-img/
 
-This is a super simple and lightweight component that transforms this:
+## Install
 
-```html
-<svelte-img src="/image.jpg" placeholder="/image-tiny.jpg"></svelte-img>
-```
+Install the package:
 
-into this:
-
-```html
-<div>
-  <div style="background:url('/image-tiny.jpg') center center / cover no-repeat"></div>
-  <img src="/image.jpg" alt="image" loading="lazy">
-</div>
 ```
-
-where the placeholder will be gaussian blurred and the main image beautifully transitioned in place when its download completes.
-
-The work of lazy-loading is deferred to browsers to handle natively via the `loading="lazy"` attribute. For browsers that don't support this (yet), images will load as normal (i.e. eagerly).
-
-## Usage
-
-### Install
-
-To install latest stable:
-
-```bash
 $ npm i -D @zerodevx/svelte-img
 ```
 
-**NOTE**
+Add `imagetools` plugin into your `vite.config.js`:
 
-This is still in `pre-release` so install with the `@next` tag:
+```js
+import { sveltekit } from '@sveltejs/kit/vite'
+import { imagetools } from '@zerodevx/svelte-img'
 
-```bash
-$ npm i -D @zerodevx/svelte-img@next
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit(), imagetools()]
+}
+
+export default config
 ```
 
-### Use as a Svelte component
+## Usage
 
-Simply consume anywhere in your app:
+Use anywhere in your Svelte app:
 
-`MyComponent.svelte`
-
+<!-- prettier-ignore -->
 ```html
 <script>
-  import Img from '@zerodevx/svelte-img`
+// Import original max-sized image with `?run` query param.
+import cat from '$lib/assets/cat.jpg?run'
+import { Img } from '@zerodevx/svelte-img'
 </script>
 
-<style>
-  .container {
-    width: 100%;
-    max-width: 800px;
-    height: 500px;
-  }
-</style>
-
-<div class="container">
-  <Img
-    srcset="/images/hello-800.jpg 800w, /images/hello-480.jpg 480w"
-    sizes="(max-width: 600px) 480px, 800px"
-    src="/images/hello-800.jpg"
-    alt="hello"
-    placeholder="/images/hello-20.jpg"
-    />
-</div>
+<Img class="any classes" src="{cat}" alt="Cute cat" />
 ```
 
-### Use as native Web Component
+The `<Img>` tag renders into:
 
-Just load the web component definition from CDN then use anywhere.
-
 ```html
-<head>
-  ...
-  <!-- Load the web component definition -->
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-img@0"></script>
-</head>
-<body>
-  ...
-  <!-- Use anywhere -->
-  <div class="explicitly-sized-container">
-    <svelte-img src="/image.jpg"></svelte-img>
-  </div>
-</body>
+<picture>
+  <source
+    type="image/avif"
+    srcset="path/to/avif/480 480w, path/to/avif/1024 1024w, path/to/avif/1920 1920w"
+  />
+  <source
+    type="image/webp"
+    srcset="path/to/webp/480 480w, path/to/webp/1024 1024w, path/to/webp/1920 1920w"
+  />
+  <img
+    class="any classes"
+    src="path/to/jpg/480"
+    srcset="path/to/jpg/480 480w, path/to/jpg/1024 1024w, path/to/jpg/1920 1920w"
+    loading="lazy"
+    decoding="async"
+    style='background: url("data:image/webp;base64,UklGRmwAAABXRUJQVlA4IGAAAADwAQCdASoQAAwABUB8JbACdACVHAuzHEAA+FXw/vPuIDGE/UU8XBsY0aVUcxdGEcG5CngK2JQO7wxCmgwPJrlpw4REDWFeMX1yfLUHBxkTmnPYhBDAP1QyVOF7EB/AAAA=") no-repeat center/cover'
+    alt="Cute cat"
+  />
+</picture>
 ```
 
-Or you can [download](https://raw.githubusercontent.com/zerodevx/svelte-img/master/dist/svelte-img.js) the script and host it yourself.
-
-## Contributing
-
-Fork, clone and install dependencies:
-
-```bash
-$ git clone https://github.com/<username>/svelte-img
-$ cd svelte-img
-$ npm i
-```
-
-Start the dev server:
-
-```bash
-$ npm run dev
-```
-
-Create a new branch, make changes and commit:
-
-```bash
-$ git checkout -b my-contribution
-$ git add -A
-$ git commit -m <message>
-```
-
-Lint the code:
-
-```bash
-$ npm run lint
-```
-
-Then raise a PR.
-
-
 ## License
 
 ISC

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

9

increased by28.57%

Lines of code

83

increased by207.41%

Is type module

Yes

Worsened metrics

Total package byte prevSize

7983

decreased by-89.53%

Dependency count

2

increased byInfinity%

Dev dependency count

22

increased by22.22%

Number of lines in readme file

71

decreased by-45.8%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedimagetools-core@^3.0.3

• + Addedvite-imagetools@^4.0.4

• + Added@rollup/pluginutils@5.1.4(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbl@4.1.0(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedchownr@1.1.4(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addeddecompress-response@6.0.0(transitive)

• + Addeddeep-extend@0.6.0(transitive)

• + Addeddetect-libc@2.0.3(transitive)

• + Addedend-of-stream@1.4.4(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedexpand-template@2.0.3(transitive)

• + Addedfs-constants@1.0.0(transitive)

• + Addedgithub-from-package@0.0.0(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedimagetools-core@3.3.1(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedini@1.3.8(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedmimic-response@3.1.0(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp-classic@0.5.3(transitive)

• + Addednapi-build-utils@2.0.0(transitive)

• + Addednode-abi@3.74.0(transitive)

• + Addednode-addon-api@5.1.0(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpicomatch@4.0.2(transitive)

• + Addedprebuild-install@7.1.3(transitive)

• + Addedpump@3.0.2(transitive)

• + Addedrc@1.2.8(transitive)

• + Addedreadable-stream@3.6.2(transitive)

• + Addedsafe-buffer@5.2.1(transitive)

• + Addedsemver@7.7.1(transitive)

• + Addedsharp@0.31.3(transitive)

• + Addedsimple-concat@1.0.1(transitive)

• + Addedsimple-get@4.0.1(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedstring_decoder@1.3.0(transitive)

• + Addedstrip-json-comments@2.0.1(transitive)

• + Addedtar-fs@2.1.2(transitive)

• + Addedtar-stream@2.2.0(transitive)

• + Addedtunnel-agent@0.6.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedvite-imagetools@4.0.19(transitive)

• + Addedwrappy@1.0.2(transitive)