vue3-lazyload - npm Package Compare versions

Comparing version 0.2.5-beta to 0.3.0

package.json

 {
   "name": "vue3-lazyload",
-  "version": "0.2.5-beta",
+  "version": "0.3.0",
+  "packageManager": "pnpm@6.32.3",
   "description": "A Vue3.x image lazyload plugin",
-  "main": "dist/vue3-lazyload.js",
-  "module": "dist/vue3-lazyload.esm.js",
-  "unpkg": "dist/vue3-lazyload.min.js",
-  "scripts": {
-    "dev": "tsc --watch",
-    "demo:dev": "vite",
-    "demo:build": "vite build",
-    "lint": "eslint -c ./.eslintrc --fix --ext .jsx,.js,.vue,.ts,.tsx ./src",
-    "build": "node rollup.config.js && tsc -d --declarationDir types --emitDeclarationOnly",
-    "changelog": "conventional-changelog -p conventionalcommits -i CHANGELOG.md -s -r 0 -n .convention-changelog-config.js",
-    "test": "jest --config jest.config.js",
-    "commit": "git-cz"
-  },
+  "license": "MIT",
+  "author": "木荣 <[e-mail]>",
   "repository": {
@@ -22,5 +12,25 @@ "type": "git",
   },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "typings": "types/index.d.ts",
-  "author": "木荣 <[e-mail]>",
-  "license": "MIT",
   "bugs": {
@@ -35,43 +45,46 @@ "url": "https://github.com/murongg/vue3-lazyload/issues"
   "homepage": "https://github.com/murongg/vue3-lazyload#readme",
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "vue-demi": "^0.12.5"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.14",
+    "@babel/types": "^7.17.0",
+    "@murongg/eslint-config": "^0.1.0",
     "@types/node": "^14.11.8",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@vitejs/plugin-vue": "^2.3.2",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-beta.6",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "conventional-changelog": "^3.1.23",
-    "conventional-changelog-cli": "^2.1.0",
-    "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.12.0",
-    "eslint-plugin-vue": "^7.0.1",
-    "husky": "^4.3.0",
-    "jest": "^26.5.3",
-    "jest-canvas-mock": "^2.3.0",
-    "jest-serializer-vue": "^2.0.2",
+    "bumpp": "^7.1.1",
+    "eslint": "^8.13.0",
+    "esno": "^0.14.1",
+    "happy-dom": "^3.1.1",
+    "pnpm": "^6.32.6",
     "prettier": "^2.1.2",
-    "rollup": "^2.29.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "ts-jest": "^26.4.1",
-    "typescript": "^4.0.3",
-    "vite": "^1.0.0-rc.1",
-    "vue-jest": "^3.0.7"
+    "rimraf": "^3.0.2",
+    "typescript": "^4.6.3",
+    "unbuild": "^0.7.2",
+    "vite": "^2.9.1",
+    "vitest": "^0.9.3",
+    "vue": "^3.2.33"
   },
-  "peerDependencies": {
-    "@vue/compiler-sfc": ">=3.0.0",
-    "vue": ">=3.0.0"
-  }
+  "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

@@ -26,2 +26,3 @@ # vue3-lazyload
 - 🌎 **Browser support:** Use it through CDN
+- 😊 **Support Hook:** useLazyload
 
@@ -37,5 +38,5 @@ ## 📎 Installation
 
-CDN: https://unpkg.com/vue3-lazyload/dist/vue3-lazyload.min.js
+CDN:  https://unpkg.com/vue3-lazyload
 ```html
-<script src="https://unpkg.com/vue3-lazyload/dist/vue3-lazyload.min.js"></script>
+<script src="https://unpkg.com/vue3-lazyload"></script>
 <script>
@@ -53,4 +54,4 @@ Vue.createApp(App).use(VueLazyLoad)
 import { createApp } from 'vue'
+import VueLazyLoad from 'vue3-lazyload'
 import App from './App.vue'
-import VueLazyLoad from 'vue3-lazyload'
 
@@ -74,3 +75,3 @@ const app = createApp(App)
 <template>
-  <img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }" />
+  <img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }">
 </template>
@@ -85,4 +86,4 @@ ```
 import { createApp } from 'vue'
+import VueLazyLoad from 'vue3-lazyload'
 import App from './App.vue'
-import VueLazyLoad from 'vue3-lazyload'
 
@@ -93,3 +94,3 @@ const app = createApp(App)
   error: '',
-  lifecycle:{
+  lifecycle: {
     loading: (el) => {
@@ -115,6 +116,2 @@ console.log('loading', el)
 ```vue
-<template>
-  <img v-lazy="{src: lazyOptions.src, lifecycle: lazyOptions.lifecycle}" width="100"> 
-</template>
-
 <script>
@@ -146,4 +143,42 @@ import { reactive } from 'vue'
 
+<template>
+  <img v-lazy="{src: lazyOptions.src, lifecycle: lazyOptions.lifecycle}" width="100">
+</template>
+
 ```
 
+### Use Hook
+```vue
+<script lang="ts">
+import { ref } from 'vue'
+import { useLazyload } from 'vue3-lazyload/dist/hooks'
+export default {
+  name: 'App',
+  setup() {
+    const src = ref('/example/assets/logo.png')
+    const lazyRef = useLazyload(src, {
+      lifecycle: {
+        loading: () => {
+          console.log('loading')
+        },
+        error: () => {
+          console.log('error')
+        },
+        loaded: () => {
+          console.log('loaded')
+        }
+      }
+    })
+    return {
+      lazyRef
+    }
+  }
+}
+</script>
+
+<template>
+  <img ref="lazyRef" class="image" width="100">
+</template>
+```
+
 #### Use css state
@@ -150,0 +185,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

18

decreased by-48.57%

Number of lines in readme file

235

increased by17.5%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

27968

decreased by-61.22%

Dependency count

3

increased by50%

Number of package files

11

decreased by-65.62%

Lines of code

494

decreased by-69.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedvue-demi@^0.12.5

• + Added@vue/composition-api@1.7.2(transitive)

• + Addedvue@2.6.14(transitive)

• + Addedvue-demi@0.12.5(transitive)