vue3-lazyload - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/hooks.d.ts

@@ -1,6 +0,2 @@
-import { Ref } from 'vue-demi';
-import { L as LazyOptions } from './types-5d7d0538.js';
-
-declare function useLazyload(src: Ref<string>, options?: LazyOptions): Ref<HTMLElement | null>;
-
-export { useLazyload };
+import 'vue-demi';
+export { u as useLazyload } from './hooks-5af612a8.js';

dist/index.d.ts

 import { App } from 'vue-demi';
-import { L as LazyOptions } from './types-5d7d0538.js';
+import { L as LazyOptions } from './hooks-5af612a8.js';
+export { u as useLazyload } from './hooks-5af612a8.js';
 
@@ -4,0 +5,0 @@ declare const _default: {

package.json

 {
   "name": "vue3-lazyload",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "packageManager": "pnpm@6.32.3",
@@ -34,2 +34,14 @@ "description": "A Vue3.x image lazyload plugin",
   "sideEffects": false,
+  "scripts": {
+    "build": "rimraf dist && unbuild",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "demo:dev": "vite",
+    "demo:build": "vite build",
+    "prepublishOnly": "nr build",
+    "release": "bumpp --commit --push --tag && pnpm publish",
+    "start": "esno src/index.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
   "typings": "types/index.d.ts",
@@ -76,15 +88,3 @@ "bugs": {
     "vue": "^3.2.33"
-  },
-  "scripts": {
-    "build": "rimraf dist && unbuild",
-    "dev": "unbuild --stub",
-    "lint": "eslint .",
-    "demo:dev": "vite",
-    "demo:build": "vite build",
-    "release": "bumpp --commit --push --tag && pnpm publish",
-    "start": "esno src/index.ts",
-    "test": "vitest",
-    "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- 💪 **Small Size:** Only 4kb\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/dist/hooks'\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## 📁 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\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

@@ -146,3 +146,3 @@ # vue3-lazyload
 import { ref } from 'vue'
-import { useLazyload } from 'vue3-lazyload/dist/hooks'
+import { useLazyload } from 'vue3-lazyload'
 export default {
@@ -149,0 +149,0 @@ name: 'App',

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

502

increased by1.62%

Worsened metrics

Total package byte prevSize

22953

decreased by-17.93%

No dependency changes