vue3-lazyload - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

package.json

 {
   "name": "vue3-lazyload",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "packageManager": "pnpm@6.32.3",
@@ -15,2 +15,3 @@ "description": "A Vue3.x image lazyload plugin",
   "types": "./dist/index.d.ts",
+  "unpkg": "dist/index.min.js",
   "exports": {
@@ -35,12 +36,2 @@ ".": {
   "sideEffects": false,
-  "typings": "types/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/murongg/vue3-lazyload/issues"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "homepage": "https://github.com/murongg/vue3-lazyload#readme",
   "peerDependencies": {
@@ -59,4 +50,9 @@ "@vue/composition-api": "^1.0.0-rc.1",
   "devDependencies": {
+    "@babel/core": "^7.18.6",
     "@babel/types": "^7.17.0",
     "@murongg/eslint-config": "^0.1.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.3",
     "@types/node": "^14.11.8",
@@ -70,5 +66,9 @@ "@vitejs/plugin-vue": "^2.3.2",
     "happy-dom": "^3.1.1",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.0",
     "pnpm": "^6.32.6",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.75.7",
+    "rollup-plugin-uglify": "^6.0.4",
     "typescript": "^4.6.3",
@@ -80,6 +80,21 @@ "unbuild": "^0.7.2",
   },
+  "lint-staged": {
+    "*": "pnpm run lint:fix"
+  },
+  "typings": "types/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/murongg/vue3-lazyload/issues"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "homepage": "https://github.com/murongg/vue3-lazyload#readme",
   "scripts": {
-    "build": "rimraf dist && unbuild",
+    "build": "rimraf dist && unbuild && npm run rollup:build",
+    "rollup:build": "node rollup.config.js",
     "dev": "unbuild --stub",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "demo:dev": "vite",
@@ -91,4 +106,3 @@ "demo:build": "vite build",
     "typecheck": "tsc --noEmit"
-  },
-  "readme": "# vue3-lazyload\n\n<div style=\"display:flex;width:100%;justify-content:center;\">\n<img src=\"https://img.shields.io/npm/v/vue3-lazyload\" />\n<img src=\"https://img.shields.io/github/package-json/dependency-version/murongg/vue3-lazyload/dev/rollup/develop\" />\n<img src=\"https://img.shields.io/npm/dw/vue3-lazyload\" />\n</div>\n<br />\n<div style=\"display:flex;width:100%;justify-content:center;\">\n<img src=\"https://img.shields.io/travis/murongg/vue3-lazyload\" />\n<img src=\"https://img.shields.io/bundlephobia/min/vue3-lazyload\" />\n<img src=\"https://img.shields.io/github/repo-size/murongg/vue3-lazyload\" />\n<img src=\"https://img.shields.io/npm/l/vue3-lazyload\" />\n<img src=\"https://img.shields.io/github/issues/murongg/vue3-lazyload\" />\n<img src=\"https://img.shields.io/github/issues-pr/murongg/vue3-lazyload\" />\n</div>\n<br />\nA vue3.x image lazyload plugin.  \n<br />\n\n## 🚀 Features\n- ⚡ **0 dependencies:** No worry about your bundle size\n- 🦾 **Type Strong:** Written in Typescript\n- 🌎 **Browser support:** Use it through CDN\n- 😊 **Support Hook:** useLazyload\n\n## 📎 Installation\n```sh\n$ npm i vue3-lazyload\n# or\n$ yarn add vue3-lazyload\n```\n\n## 🌎 CDN\n\nCDN:  https://unpkg.com/vue3-lazyload\n```html\n<script src=\"https://unpkg.com/vue3-lazyload\"></script>\n<script>\n  Vue.createApp(App).use(VueLazyLoad)\n  ...\n</script>\n```\n\n## 👽 Usage\n\nmain.js:\n\n```js\nimport { createApp } from 'vue'\nimport VueLazyLoad from 'vue3-lazyload'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueLazyLoad, {\n  // options...\n})\napp.mount('#app')\n```\nApp.vue:\n```html\n<template>\n  <img v-lazy=\"your image url\" />\n</template>\n```\n\n### v-lazy use object params\n\n```vue\n<template>\n  <img v-lazy=\"{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }\">\n</template>\n```\n\n### Use lifecycle\n\nIn main.js\n\n```js\nimport { createApp } from 'vue'\nimport VueLazyLoad from 'vue3-lazyload'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueLazyLoad, {\n  loading: '',\n  error: '',\n  lifecycle: {\n    loading: (el) => {\n      console.log('loading', el)\n    },\n    error: (el) => {\n      console.log('error', el)\n    },\n    loaded: (el) => {\n      console.log('loaded', el)\n    }\n  }\n})\napp.mount('#app')\n```\n\nor\n\nIn xxx.vue\n> Have to be aware of is v-lazy don't use v-lazy=\"lazyOptions\", in this case, vue cannot monitor data changes.\n\n```vue\n<script>\nimport { reactive } from 'vue'\nexport default {\n  name: 'App',\n  setup() {\n    const lazyOptions = reactive({\n      src: 'your image url',\n      lifecycle: {\n        loading: (el) => {\n          console.log('image loading', el)\n        },\n        error: (el) => {\n          console.log('image error', el)\n        },\n        loaded: (el) => {\n          console.log('image loaded', el)\n        }\n      }\n    })\n    return {\n      lazyOptions,\n    }\n  }\n}\n</script>\n\n<template>\n  <img v-lazy=\"{src: lazyOptions.src, lifecycle: lazyOptions.lifecycle}\" width=\"100\">\n</template>\n\n```\n\n### Use Hook\n```vue\n<script lang=\"ts\">\nimport { ref } from 'vue'\nimport { useLazyload } from 'vue3-lazyload'\nexport default {\n  name: 'App',\n  setup() {\n    const src = ref('/example/assets/logo.png')\n    const lazyRef = useLazyload(src, {\n      lifecycle: {\n        loading: () => {\n          console.log('loading')\n        },\n        error: () => {\n          console.log('error')\n        },\n        loaded: () => {\n          console.log('loaded')\n        }\n      }\n    })\n    return {\n      lazyRef\n    }\n  }\n}\n</script>\n\n<template>\n  <img ref=\"lazyRef\" class=\"image\" width=\"100\">\n</template>\n```\n\n#### Use css state\n\nThere are three states while image loading.  \nYou can take advantage of this feature, make different css controls for different states.  \n\n- `loading` \n- `loaded` \n- `error`\n\n```html\n<img src=\"...\" lazy=\"loading\">\n<img src=\"...\" lazy=\"loaded\">\n<img src=\"...\" lazy=\"error\">\n```\n```css\n<style>\n  img[lazy=loading] {\n    /*your style here*/\n  }\n  img[lazy=error] {\n    /*your style here*/\n  }\n  img[lazy=loaded] {\n    /*your style here*/\n  }\n</style>\n```\n\n### Delay loading of images\n\nTo avoid loading images that are only shortly visible (e. g. fast scrolling through list of images), a delay in milliseconds can be configured.\nIf a delay is set, an image is only loaded if it stays visible for the specified amount of time.\n\nSet delay in object parameter:\n\n```vue\n<template>\n  <img v-lazy=\"{ src: 'your image url', loading: 'your loading image url', error: 'your error image url', delay: 500 }\">\n</template>\n```\n\n## 📁 Options\n\n|  key   | description  | default | type |\n|  ----  | ----  | ----  | ----  |\n| loading  | The image used when the image is loaded | - | string |\n| error  | The image used when the image failed to load | -  | string |\n| observerOptions  | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | [IntersectionObserverInit]([链接地址](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver))|\n| log  | Do not print debug info\t | true  | boolean |\n| lifecycle  | Specify state execution function\t | -  | [Lifecycle](#Lifecycle) |\n| delay  | Time in milliseconds an image has to stay visible before loading starts | 0  | number |\n\n## ⛱ Lifecycle Hooks\n\n|  key   | description  |\n|  ----  | ----  |\n| loading  | Image loading |\n| loaded  | Image loaded |\n| error  | Image load error |\n\n## 📄 TODO\n- [x] Migrate to typescript\n- [x] rollup\n- [x] eslint\n- [x] overall unit tests\n- [x] *.d.ts\n- [x] Perfect type\n- [x] lifecycle\n- [x] commitlint & husky\n- [ ] LazyComponent\n- [ ] LazyImage\n- [ ] LazyContainer\n- [ ] Perfect example\n"
+  }
 }

README.md

@@ -218,18 +218,18 @@ # vue3-lazyload
 
-|  key   | description  | default | type |
-|  ----  | ----  | ----  | ----  |
-| loading  | The image used when the image is loaded | - | string |
-| error  | The image used when the image failed to load | -  | string |
-| observerOptions  | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | [IntersectionObserverInit]([链接地址](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver))|
-| log  | Do not print debug info	 | true  | boolean |
-| lifecycle  | Specify state execution function	 | -  | [Lifecycle](#Lifecycle) |
-| delay  | Time in milliseconds an image has to stay visible before loading starts | 0  | number |
+| key             | description                                                             | default                               | type                                                                                                          |
+| --------------- | ----------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| loading         | The image used when the image is loaded                                 | -                                     | string                                                                                                        |
+| error           | The image used when the image failed to load                            | -                                     | string                                                                                                        |
+| observerOptions | IntersectionObserver options                                            | { rootMargin: '0px', threshold: 0.1 } | [IntersectionObserverInit]([链接地址](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)) |
+| log             | Do not print debug info                                                 | true                                  | boolean                                                                                                       |
+| lifecycle       | Specify state execution function                                        | -                                     | [Lifecycle](#Lifecycle)                                                                                       |
+| delay           | Time in milliseconds an image has to stay visible before loading starts | 0                                     | number                                                                                                        |
 
 ## ⛱ Lifecycle Hooks
 
-|  key   | description  |
-|  ----  | ----  |
-| loading  | Image loading |
-| loaded  | Image loaded |
-| error  | Image load error |
+| key     | description      |
+| ------- | ---------------- |
+| loading | Image loading    |
+| loaded  | Image loaded     |
+| error   | Image load error |
 
@@ -249,1 +249,5 @@ ## 📄 TODO
 - [ ] Perfect example
+
+## [Contributors](https://github.com/murongg/vue3-lazyload/graphs/contributors)
+
+![Contributors](https://contrib.rocks/image?repo=murongg/vue3-lazyload)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31965

increased by3.3%

Number of package files

6

increased by20%

Lines of code

570

increased by4.59%

Number of lines in readme file

252

increased by1.61%

Worsened metrics

Dev dependency count

27

increased by50%

Number of low quality alerts

2

increased by100%

No dependency changes