Skip to content

Commit 1929976

Browse files
committed
style: setup Prettier properly & lint files
1 parent 3ec76ca commit 1929976

15 files changed

+120
-114
lines changed

.github/dependabot.yml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
version: 2
22
updates:
3-
- package-ecosystem: npm
4-
directory: "/"
5-
schedule:
6-
interval: daily
7-
time: "21:00"
8-
open-pull-requests-limit: 10
3+
- package-ecosystem: npm
4+
directory: '/'
5+
schedule:
6+
interval: daily
7+
time: '21:00'
8+
open-pull-requests-limit: 10

README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ import { ContentLoader } from 'vue-content-loader'
5050
5151
export default {
5252
components: {
53-
ContentLoader
54-
}
53+
ContentLoader,
54+
},
5555
}
5656
</script>
5757
```
@@ -65,7 +65,7 @@ import {
6565
CodeLoader,
6666
BulletListLoader,
6767
InstagramLoader,
68-
ListLoader
68+
ListLoader,
6969
} from 'vue-content-loader'
7070
```
7171

babel.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ module.exports = {
55
{
66
// Jest tests are run in Node and it requires commonjs modules
77
modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
8-
loose: true
9-
}
10-
]
8+
loose: true,
9+
},
10+
],
1111
],
12-
plugins: ['@vue/babel-plugin-jsx']
12+
plugins: ['@vue/babel-plugin-jsx'],
1313
}

bili.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ module.exports = {
55
output: {
66
format: ['cjs', 'es', 'umd', 'umd-min'],
77
fileName: 'vue-content-loader.[format][min][ext]',
8-
moduleName: 'contentLoaders'
9-
}
8+
moduleName: 'contentLoaders',
9+
},
1010
}

jest.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
testEnvironment: 'jsdom',
33
transform: {
4-
'\\.[jt]sx?$': 'babel-jest'
5-
}
4+
'\\.[jt]sx?$': 'babel-jest',
5+
},
66
}

package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"test:dev": "jest --watch",
2323
"build": "bili",
2424
"storybook": "poi -so --config stories/poi.config.js",
25-
"build:storybook": "poi --prod --config stories/poi.config.js"
25+
"build:storybook": "poi --prod --config stories/poi.config.js",
26+
"format": "prettier -w ."
2627
},
2728
"author": {
2829
"name": "EGOIST",
@@ -40,6 +41,7 @@
4041
"bili": "^5.0.5",
4142
"jest": "^27.0.6",
4243
"poi": "12.10.3",
44+
"prettier": "^2.5.0",
4345
"rollup-plugin-typescript2": "^0.31.1",
4446
"typescript": "^4.3.4",
4547
"vue": "^3.0.5",

src/ContentLoader.spec.js

+27-27
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ describe('ContentLoader', () => {
2323
props: {
2424
width: 300,
2525
height: 200,
26-
preserveAspectRatio: 'xMaxYMid slice'
27-
}
26+
preserveAspectRatio: 'xMaxYMid slice',
27+
},
2828
})
2929

3030
expect(wrapper.find('svg').attributes()).toEqual({
3131
width: '300',
3232
height: '200',
3333
preserveAspectRatio: 'xMaxYMid slice',
3434
version: '1.1',
35-
viewBox: '0 0 300 200'
35+
viewBox: '0 0 300 200',
3636
})
3737
})
3838

@@ -41,16 +41,16 @@ describe('ContentLoader', () => {
4141
props: {
4242
width: 300,
4343
height: 200,
44-
preserveAspectRatio: 'xMaxYMid slice'
45-
}
44+
preserveAspectRatio: 'xMaxYMid slice',
45+
},
4646
})
4747

4848
expect(wrapper.find('svg').attributes()).toEqual({
4949
width: '300',
5050
height: '200',
5151
preserveAspectRatio: 'xMaxYMid slice',
5252
version: '1.1',
53-
viewBox: '0 0 300 200'
53+
viewBox: '0 0 300 200',
5454
})
5555
})
5656

@@ -63,23 +63,23 @@ describe('ContentLoader', () => {
6363
x: '0',
6464
y: '0',
6565
width: '100%',
66-
height: '100%'
66+
height: '100%',
6767
})
6868
})
6969

7070
it('draws a clipPath with a unique ID', () => {
7171
const wrapper = mount(ContentLoader)
7272

7373
expect(wrapper.find('defs clipPath').attributes()).toEqual({
74-
id: wrapper.vm.idClip
74+
id: wrapper.vm.idClip,
7575
})
7676
})
7777

7878
it('draws a linear gradient with a unique ID', () => {
7979
const wrapper = mount(ContentLoader)
8080

8181
expect(wrapper.find('defs linearGradient').attributes()).toEqual({
82-
id: wrapper.vm.idGradient
82+
id: wrapper.vm.idGradient,
8383
})
8484
})
8585

@@ -91,17 +91,17 @@ describe('ContentLoader', () => {
9191
expect(stops[0].attributes()).toEqual({
9292
offset: '0%',
9393
'stop-color': '#f9f9f9',
94-
'stop-opacity': '1'
94+
'stop-opacity': '1',
9595
})
9696
expect(stops[1].attributes()).toEqual({
9797
offset: '50%',
9898
'stop-color': '#ecebeb',
99-
'stop-opacity': '1'
99+
'stop-opacity': '1',
100100
})
101101
expect(stops[2].attributes()).toEqual({
102102
offset: '100%',
103103
'stop-color': '#f9f9f9',
104-
'stop-opacity': '1'
104+
'stop-opacity': '1',
105105
})
106106
})
107107

@@ -114,27 +114,27 @@ describe('ContentLoader', () => {
114114
attributeName: 'offset',
115115
values: '-2; 1',
116116
dur: '2s',
117-
repeatCount: 'indefinite'
117+
repeatCount: 'indefinite',
118118
})
119119
expect(animations[1].attributes()).toEqual({
120120
attributeName: 'offset',
121121
values: '-1.5; 1.5',
122122
dur: '2s',
123-
repeatCount: 'indefinite'
123+
repeatCount: 'indefinite',
124124
})
125125
expect(animations[2].attributes()).toEqual({
126126
attributeName: 'offset',
127127
values: '-1; 2',
128128
dur: '2s',
129-
repeatCount: 'indefinite'
129+
repeatCount: 'indefinite',
130130
})
131131
})
132132

133133
it('does not animate if animate prop is false', () => {
134134
const wrapper = mount(ContentLoader, {
135135
props: {
136-
animate: false
137-
}
136+
animate: false,
137+
},
138138
})
139139

140140
expect(wrapper.findAll('defs linearGradient animate').length).toBe(0)
@@ -149,15 +149,15 @@ describe('ContentLoader', () => {
149149
rx: '5',
150150
ry: '5',
151151
width: '100%',
152-
height: '100%'
152+
height: '100%',
153153
})
154154
})
155155

156156
it('outputs the default slot within the clipPath', () => {
157157
const wrapper = mount(ContentLoader, {
158158
slots: {
159-
default: '<circle cx="30" cy="30" r="30" />'
160-
}
159+
default: '<circle cx="30" cy="30" r="30" />',
160+
},
161161
})
162162

163163
expect(wrapper.find('defs clipPath circle').html()).toEqual(
@@ -168,21 +168,21 @@ describe('ContentLoader', () => {
168168
it('use the baseUrl to link the gradient & clip path', () => {
169169
const wrapper = mount(ContentLoader, {
170170
props: {
171-
baseUrl: '/path'
172-
}
171+
baseUrl: '/path',
172+
},
173173
})
174174

175175
expect(wrapper.find('rect').attributes()).toMatchObject({
176176
style: `fill: url(/path#${wrapper.vm.idGradient});`,
177-
'clip-path': `url(/path#${wrapper.vm.idClip})`
177+
'clip-path': `url(/path#${wrapper.vm.idClip})`,
178178
})
179179
})
180180

181181
it('use the uniqueKey to generate static IDs', () => {
182182
const wrapper = mount(ContentLoader, {
183183
props: {
184-
uniqueKey: 'unique'
185-
}
184+
uniqueKey: 'unique',
185+
},
186186
})
187187

188188
expect(wrapper.vm.idClip).toEqual('unique-idClip')
@@ -193,8 +193,8 @@ describe('ContentLoader', () => {
193193
const wrapper = mount(ContentLoader, {
194194
props: {
195195
class: 'loader',
196-
id: 'loader'
197-
}
196+
id: 'loader',
197+
},
198198
})
199199

200200
expect(wrapper.find('svg').classes()).toEqual(['loader'])

src/ContentLoader.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -6,49 +6,49 @@ export default defineComponent({
66

77
props: {
88
width: {
9-
type: [Number, String]
9+
type: [Number, String],
1010
},
1111
height: {
12-
type: [Number, String]
12+
type: [Number, String],
1313
},
1414
viewBox: {
15-
type: String
15+
type: String,
1616
},
1717
preserveAspectRatio: {
1818
type: String,
19-
default: 'xMidYMid meet'
19+
default: 'xMidYMid meet',
2020
},
2121
speed: {
2222
type: Number,
23-
default: 2
23+
default: 2,
2424
},
2525
baseUrl: {
2626
type: String,
27-
default: ''
27+
default: '',
2828
},
2929
primaryColor: {
3030
type: String,
31-
default: '#f9f9f9'
31+
default: '#f9f9f9',
3232
},
3333
secondaryColor: {
3434
type: String,
35-
default: '#ecebeb'
35+
default: '#ecebeb',
3636
},
3737
primaryOpacity: {
3838
type: Number,
39-
default: 1
39+
default: 1,
4040
},
4141
secondaryOpacity: {
4242
type: Number,
43-
default: 1
43+
default: 1,
4444
},
4545
uniqueKey: {
46-
type: String
46+
type: String,
4747
},
4848
animate: {
4949
type: Boolean,
50-
default: true
51-
}
50+
default: true,
51+
},
5252
},
5353

5454
setup(props) {
@@ -61,7 +61,7 @@ export default defineComponent({
6161
return {
6262
idClip,
6363
idGradient,
64-
computedViewBox
64+
computedViewBox,
6565
}
6666
},
6767

@@ -139,5 +139,5 @@ export default defineComponent({
139139
</defs>
140140
</svg>
141141
)
142-
}
142+
},
143143
})

src/index.spec.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,27 @@ describe.each([
1111
['CodeLoader', CodeLoader],
1212
['FacebookLoader', FacebookLoader],
1313
['ListLoader', ListLoader],
14-
['InstagramLoader', InstagramLoader]
14+
['InstagramLoader', InstagramLoader],
1515
])('%s', (name, component) => {
1616
it('renders its shapes', () => {
1717
const wrapper = mount(component)
1818

19-
expect(wrapper.findAll('clipPath > *').map(c => c.html())).toMatchSnapshot()
19+
expect(
20+
wrapper.findAll('clipPath > *').map((c) => c.html())
21+
).toMatchSnapshot()
2022
})
2123

2224
it('forwards attributes to ContentLoader', () => {
2325
const wrapper = mount(component, {
2426
props: {
2527
id: 'loader',
26-
class: 'loader'
27-
}
28+
class: 'loader',
29+
},
2830
})
2931

3032
expect(wrapper.attributes()).toMatchObject({
3133
id: 'loader',
32-
class: 'loader'
34+
class: 'loader',
3335
})
3436
})
3537
})

src/uid.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1 @@
1-
export default () =>
2-
Math.random()
3-
.toString(36)
4-
.substring(2)
1+
export default () => Math.random().toString(36).substring(2)

0 commit comments

Comments
 (0)