Skip to content

Commit ab6d309

Browse files
CCherry07CCherry07
committed
feat: add commitlint
1 parent 5c22821 commit ab6d309

File tree

7 files changed

+473
-106
lines changed

7 files changed

+473
-106
lines changed

‎.eslintrc.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
module.exports = {
2-
"env": {
3-
"browser": true,
4-
"es2021": true
2+
env: {
3+
browser: true,
4+
es2021: true,
55
},
6-
"extends": [
7-
'plugin:vue/vue3-recommended',
6+
extends: [
7+
"plugin:vue/vue3-recommended",
8+
// 'prettier',
9+
// 'plugin:prettier/recommended'
810
],
9-
"parserOptions": {
10-
"ecmaVersion": "latest",
11-
"sourceType": "module"
11+
parserOptions: {
12+
ecmaVersion: "latest",
13+
sourceType: "module",
1214
},
13-
}
15+
};

‎.husky/pre-commit

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
pnpm lint-staged

‎.huskyrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"hooks": {
3+
"pre-commit": "pretty-quick --staged",
4+
"pre-publish": "npm run lint",
5+
"commit-msg": "commitlint -x @commitlint/config-conventional -e $GIT_PARAMS"
6+
}
7+
}

‎.prettier.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
printWidth: 120, // 换行字符串阈值
3+
tabWidth: 2, // 设置工具每一个水平缩进的空格数
4+
useTabs: false,
5+
semi: false, // 句末是否加分号
6+
vueIndentScriptAndStyle: true,
7+
singleQuote: true, // 用单引号
8+
trailingComma: "none", // 最后一个对象元素加逗号
9+
bracketSpacing: true, // 对象，数组加空格
10+
jsxBracketSameLine: true, // jsx > 是否另起一行
11+
arrowParens: "always", // (x) => {} 是否要有小括号
12+
requirePragma: false, // 不需要写文件开头的 @prettier
13+
insertPragma: false, // 不需要自动在文件开头插入 @prettier
14+
};

‎README.md

Lines changed: 78 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
21
## Installation
32

43
```bash
54
# Yarn
6-
$ yarn add vue-lazy-load-image-component
5+
$ pnpm add vue-lazy-load-image-component
76

8-
# NPM
9-
$ npm i --save vue-lazy-load-image-component
7+
# Pnpm
8+
$ pnpm i vue-lazy-load-image-component
109
```
1110

1211
## `LazyLoadImage` usage
@@ -15,38 +14,38 @@ $ npm i --save vue-lazy-load-image-component
1514
<template>
1615
<div>
1716
<MyImage :image="image" />
18-
<span>{{image.caption}}</span>
17+
<span>{{ image.caption }}</span>
1918
</div>
2019
</template>
21-
<script lang='ts' setup>
22-
import { LazyLoadImage } from 'vue-lazy-load-image-component';
20+
<script lang="ts" setup>
21+
import { LazyLoadImage } from "vue-lazy-load-image-component";
2322
const image = ref({
24-
alt: 'My image',
23+
alt: "My image",
2524
height: 100,
26-
src: 'https://example.com/image.jpg',
25+
src: "https://example.com/image.jpg",
2726
width: 100,
28-
caption: 'My image caption',
27+
caption: "My image caption",
2928
});
3029
</script>
3130
```
3231

3332
### Props
3433

35-
| Prop | Type | Default | Description |
36-
|:---|:---|:---|:---|
37-
| afterLoad | `Function` | | Function called after the image has been completely loaded. |
38-
| beforeLoad | `Function` | | Function called right before the placeholder is replaced with the image element. |
39-
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
40-
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod. |
41-
| effect | `String` | | Name of the effect to use. Please, read next section with an explanation on how to use them. |
42-
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
43-
| placeholderSrc | `String` | | Image src to display while the image is not visible or loaded. |
44-
| threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
45-
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
46-
| visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
47-
| wrapperClassName | `String` | | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. |
48-
| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
49-
| ... | | | Any other image attribute |
34+
| Prop | Type | Default | Description |
35+
| :---------------------- | :----------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
36+
| afterLoad | `Function` | | Function called after the image has been completely loaded. |
37+
| beforeLoad | `Function` | | Function called right before the placeholder is replaced with the image element. |
38+
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
39+
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod. |
40+
| effect | `String` | | Name of the effect to use. Please, read next section with an explanation on how to use them. |
41+
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
42+
| placeholderSrc | `String` | | Image src to display while the image is not visible or loaded. |
43+
| threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
44+
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
45+
| visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
46+
| wrapperClassName | `String` | | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. |
47+
| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
48+
| ... | | | Any other image attribute |
5049

5150
### Using effects
5251

@@ -60,29 +59,29 @@ They rely on CSS and the corresponding CSS file must be imported:
6059
<MyImage :image="image" />
6160
</div>
6261
</template>
63-
<script lang='ts' setup>
64-
import { LazyLoadImage } from 'vue-lazy-load-image-component';
65-
import 'vue-lazy-load-image-component/lib/style.css';
62+
<script lang="ts" setup>
63+
import { LazyLoadImage } from "vue-lazy-load-image-component";
64+
import "vue-lazy-load-image-component/lib/style.css";
6665
const image = ref({
67-
alt: 'My image',
66+
alt: "My image",
6867
height: 100,
69-
src: 'https://example.com/image.jpg',
68+
src: "https://example.com/image.jpg",
7069
width: 100,
7170
});
7271
</script>
7372
```
7473

7574
The current available effects are:
7675

77-
* `blur`: renders a blurred image based on `placeholderSrc` and transitions to a non-blurred one when the image specified in the src is loaded.
76+
- `blur`: renders a blurred image based on `placeholderSrc` and transitions to a non-blurred one when the image specified in the src is loaded.
7877

7978
![Screenshot of the blur effect](https://user-images.githubusercontent.com/3616980/37790728-9f95529a-2e07-11e8-8ac3-5066c065e0af.gif)
8079

81-
* `black-and-white`: renders a black and white image based on `placeholderSrc` and transitions to a colorful image when the image specified in the src is loaded.
80+
- `black-and-white`: renders a black and white image based on `placeholderSrc` and transitions to a colorful image when the image specified in the src is loaded.
8281

8382
![Screenshot of the black-and-white effect](https://user-images.githubusercontent.com/3616980/37790682-864e58d6-2e07-11e8-8984-ad5d7b056d9f.gif)
8483

85-
* `opacity`: renders a blank space and transitions to full opacity when the image is loaded.
84+
- `opacity`: renders a blank space and transitions to full opacity when the image is loaded.
8685

8786
![Screenshot of the opacity effect](https://user-images.githubusercontent.com/3616980/37790755-b48a704a-2e07-11e8-91c3-fcd43a91e7b1.gif)
8887

@@ -96,24 +95,24 @@ The current available effects are:
9695
</LazyLoadComponent>
9796
</div>
9897
</template>
99-
<script lang='ts' setup>
100-
import { LazyLoadComponent } from 'vue-lazy-load-image-component';
101-
import MyComponent from './MyComponent.vue';
98+
<script lang="ts" setup>
99+
import { LazyLoadComponent } from "vue-lazy-load-image-component";
100+
import MyComponent from "./MyComponent.vue";
102101
</script>
103102
```
104103

105104
### Props
106105

107-
| Prop | Type | Default | Description |
108-
|:---|:---|:---|:---|
109-
| afterLoad | `Function` | | Function called after the component has been rendered. |
110-
| beforeLoad | `Function` | | Function called right before the component is rendered. |
111-
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
112-
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod from lodash. |
113-
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
114-
| threshold | `Number` | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. |
115-
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
116-
| visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. |
106+
| Prop | Type | Default | Description |
107+
| :---------------------- | :----------- | :--------- | :----------------------------------------------------------------------------------------------- |
108+
| afterLoad | `Function` | | Function called after the component has been rendered. |
109+
| beforeLoad | `Function` | | Function called right before the component is rendered. |
110+
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
111+
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod from lodash. |
112+
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
113+
| threshold | `Number` | 100 | Threshold in pixels. So the component starts loading before it appears in the viewport. |
114+
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
115+
| visibleByDefault | `Boolean` | false | Whether the component must be visible from the beginning. |
117116

118117
## Using `trackWindowScroll` HOC to improve performance
119118

@@ -127,30 +126,29 @@ For example, if we have an `App` which renders a `Gallery`, we would wrap the `G
127126
<GalleryWithScrollTracking :images="images" />
128127
</div>
129128
</template>
130-
<script lang='ts' setup>
131-
import { trackWindowScroll } from 'vue-lazy-load-image-component';
132-
import Gallery from './Gallery.vue';
129+
<script lang="ts" setup>
130+
import { trackWindowScroll } from "vue-lazy-load-image-component";
131+
import Gallery from "./Gallery.vue";
133132
// Wrap Gallery with trackWindowScroll HOC so it receives
134133
// a scrollPosition prop to pass down to the images
135134
const images = ref([
136135
{
137-
alt: 'My image',
136+
alt: "My image",
138137
height: 100,
139-
src: 'https://example.com/image.jpg',
138+
src: "https://example.com/image.jpg",
140139
width: 100,
141-
scrollPosition:{x:0,y:0}
140+
scrollPosition: { x: 0, y: 0 },
142141
},
143142
{
144-
alt: 'My image 2',
143+
alt: "My image 2",
145144
height: 100,
146-
src: 'https://example.com/image2.jpg',
145+
src: "https://example.com/image2.jpg",
147146
width: 100,
148-
scrollPosition:{x:0,y:0}
147+
scrollPosition: { x: 0, y: 0 },
149148
},
150149
]);
151150
152151
const GalleryWithScrollTracking = trackWindowScroll(Gallery);
153-
154152
</script>
155153
```
156154

@@ -160,24 +158,24 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th
160158

161159
`LazyLoadImage`
162160

163-
| Prop | Type | Default | Description |
164-
|:---|:---|:---|:---|
165-
| scrollPosition | `Object` | | Object containing `x` and `y` with the curent window scroll position. Required. |
166-
| afterLoad | `Function` | | Function called after the image has been rendered. |
167-
| beforeLoad | `Function` | | Function called right before the image is rendered. |
168-
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
169-
| threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
170-
| visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
171-
| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
172-
| ... | | | Any other image attribute |
161+
| Prop | Type | Default | Description |
162+
| :--------------- | :----------- | :------- | :--------------------------------------------------------------------------------------------------------------------- |
163+
| scrollPosition | `Object` | | Object containing `x` and `y` with the curent window scroll position. Required. |
164+
| afterLoad | `Function` | | Function called after the image has been rendered. |
165+
| beforeLoad | `Function` | | Function called right before the image is rendered. |
166+
| placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
167+
| threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |
168+
| visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. |
169+
| wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) |
170+
| ... | | | Any other image attribute |
173171

174172
Component wrapped with `trackWindowScroll` (in the example, `Gallery`)
175173

176-
| Prop | Type | Default | Description |
177-
|:---|:---|:---|:---|
178-
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
179-
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod from lodash. |
180-
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
174+
| Prop | Type | Default | Description |
175+
| :---------------------- | :-------- | :--------- | :----------------------------------------------------------------------------------------------- |
176+
| delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
177+
| delayTime | `Number` | 300 | Time in ms sent to the delayMethod from lodash. |
178+
| useIntersectionObserver | `Boolean` | true | Whether to use browser's IntersectionObserver when available. |
181179

182180
Notice you can do the same replacing `LazyLoadImage` with `LazyLoadComponent`.
183181

@@ -196,32 +194,31 @@ Maybe the following code snippet will make it more clear:
196194
<GalleryWithScrollTracking :images="images" />
197195
</div>
198196
</template>
199-
<script lang='ts' setup>
200-
import { trackWindowScroll } from 'vue-lazy-load-image-component';
201-
import Gallery from './Gallery.vue';
197+
<script lang="ts" setup>
198+
import { trackWindowScroll } from "vue-lazy-load-image-component";
199+
import Gallery from "./Gallery.vue";
202200
const images = ref([
203201
{
204-
alt: 'My image',
202+
alt: "My image",
205203
height: 100,
206-
src: 'https://example.com/image.jpg',
204+
src: "https://example.com/image.jpg",
207205
width: 100,
208206
},
209207
{
210-
alt: 'My image 2',
208+
alt: "My image 2",
211209
height: 100,
212-
src: 'https://example.com/image2.jpg',
210+
src: "https://example.com/image2.jpg",
213211
width: 100,
214212
// If the image we are creating here has the same src than before,
215213
// we can directly display it with no need to lazy-load.
216-
visibleByDefault:image.src === '/landscape.jpg',
214+
visibleByDefault: image.src === "/landscape.jpg",
217215
},
218216
]);
219217
220218
const GalleryWithScrollTracking = trackWindowScroll(Gallery);
221-
222219
</script>
223220
```
224221

225222
## reference
226223

227-
[react-lazy-load-image-component]('https://github.com/Aljullu/react-lazy-load-image-component')
224+
[react-lazy-load-image-component]('https://github.com/Aljullu/react-lazy-load-image-component')

‎package.json

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"name": "vue-lazy-load-image-component",
33
"version": "0.0.6",
44
"description": "vue-lazy-load-image-component",
5-
"type": "module",
65
"main": "lib/index.js",
76
"exports": {
87
".": "./lib/index.js",
@@ -13,7 +12,16 @@
1312
"dev": "vite",
1413
"build": "vite build",
1514
"serve": "vite preview",
16-
"test": "vitest"
15+
"test": "vitest",
16+
"prepare": "husky install",
17+
"lint-staged": "lint-staged --allow-empty",
18+
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
19+
},
20+
"lint-staged": {
21+
"**/*.{js,jsx,ts,tsx}": "pnpm run lint-staged:js",
22+
"**/*.{js,jsx,tsx,ts,less,md,json}": [
23+
"prettier --write"
24+
]
1725
},
1826
"keywords": [
1927
"vue",
@@ -25,7 +33,7 @@
2533
"lazyload-component",
2634
"Vue-performance"
2735
],
28-
"author": "",
36+
"author": "CCherry07",
2937
"license": "ISC",
3038
"files": [
3139
"lib"
@@ -35,8 +43,12 @@
3543
"@vue/test-utils": "^2.3.2",
3644
"babel": "^6.23.0",
3745
"eslint": "^8.40.0",
46+
"eslint-config-prettier": "^8.8.0",
47+
"eslint-plugin-prettier": "^4.2.1",
48+
"lint-staged": "^13.2.2",
3849
"lodash-es": "^4.17.21",
3950
"mockjs": "^1.1.0",
51+
"prettier": "^2.8.8",
4052
"typescript": "^5.0.4",
4153
"vite": "^4.3.5",
4254
"vite-plugin-dts": "^2.3.0",
@@ -49,6 +61,7 @@
4961
"@vitejs/plugin-vue-jsx": "^3.0.1",
5062
"@vue/babel-plugin-jsx": "^1.1.1",
5163
"eslint-plugin-vue": "^9.12.0",
64+
"husky": "^8.0.0",
5265
"jest": "^29.5.0",
5366
"jsdom": "^22.0.0",
5467
"vitest": "^0.31.0"

0 commit comments

Comments
 (0)