style: setup Prettier properly & lint files

.github/dependabot.yml

@@ -1,8 +1,8 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "21:00"
-  open-pull-requests-limit: 10
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+      time: '21:00'
+    open-pull-requests-limit: 10

README.md

@@ -50,8 +50,8 @@ import { ContentLoader } from 'vue-content-loader'
 
 export default {
   components: {
-    ContentLoader
-  }
+    ContentLoader,
+  },
 }
 </script>
 ```
@@ -65,7 +65,7 @@ import {
   CodeLoader,
   BulletListLoader,
   InstagramLoader,
-  ListLoader
+  ListLoader,
 } from 'vue-content-loader'
 ```
 

babel.config.js

@@ -5,9 +5,9 @@ module.exports = {
       {
         // Jest tests are run in Node and it requires commonjs modules
         modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
-        loose: true
-      }
-    ]
+        loose: true,
+      },
+    ],
   ],
-  plugins: ['@vue/babel-plugin-jsx']
+  plugins: ['@vue/babel-plugin-jsx'],
 }

bili.config.js

@@ -5,6 +5,6 @@ module.exports = {
   output: {
     format: ['cjs', 'es', 'umd', 'umd-min'],
     fileName: 'vue-content-loader.[format][min][ext]',
-    moduleName: 'contentLoaders'
-  }
+    moduleName: 'contentLoaders',
+  },
 }

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   testEnvironment: 'jsdom',
   transform: {
-    '\\.[jt]sx?$': 'babel-jest'
-  }
+    '\\.[jt]sx?$': 'babel-jest',
+  },
 }

package.json

@@ -22,7 +22,8 @@
     "test:dev": "jest --watch",
     "build": "bili",
     "storybook": "poi -so --config stories/poi.config.js",
-    "build:storybook": "poi --prod --config stories/poi.config.js"
+    "build:storybook": "poi --prod --config stories/poi.config.js",
+    "format": "prettier -w ."
   },
   "author": {
     "name": "EGOIST",
@@ -40,6 +41,7 @@
     "bili": "^5.0.5",
     "jest": "^27.0.6",
     "poi": "12.10.3",
+    "prettier": "^2.5.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "typescript": "^4.3.4",
     "vue": "^3.0.5",

src/ContentLoader.spec.js

@@ -23,16 +23,16 @@ describe('ContentLoader', () => {
       props: {
         width: 300,
         height: 200,
-        preserveAspectRatio: 'xMaxYMid slice'
-      }
+        preserveAspectRatio: 'xMaxYMid slice',
+      },
     })
 
     expect(wrapper.find('svg').attributes()).toEqual({
       width: '300',
       height: '200',
       preserveAspectRatio: 'xMaxYMid slice',
       version: '1.1',
-      viewBox: '0 0 300 200'
+      viewBox: '0 0 300 200',
     })
   })
 
@@ -41,16 +41,16 @@ describe('ContentLoader', () => {
       props: {
         width: 300,
         height: 200,
-        preserveAspectRatio: 'xMaxYMid slice'
-      }
+        preserveAspectRatio: 'xMaxYMid slice',
+      },
     })
 
     expect(wrapper.find('svg').attributes()).toEqual({
       width: '300',
       height: '200',
       preserveAspectRatio: 'xMaxYMid slice',
       version: '1.1',
-      viewBox: '0 0 300 200'
+      viewBox: '0 0 300 200',
     })
   })
 
@@ -63,23 +63,23 @@ describe('ContentLoader', () => {
       x: '0',
       y: '0',
       width: '100%',
-      height: '100%'
+      height: '100%',
     })
   })
 
   it('draws a clipPath with a unique ID', () => {
     const wrapper = mount(ContentLoader)
 
     expect(wrapper.find('defs clipPath').attributes()).toEqual({
-      id: wrapper.vm.idClip
+      id: wrapper.vm.idClip,
     })
   })
 
   it('draws a linear gradient with a unique ID', () => {
     const wrapper = mount(ContentLoader)
 
     expect(wrapper.find('defs linearGradient').attributes()).toEqual({
-      id: wrapper.vm.idGradient
+      id: wrapper.vm.idGradient,
     })
   })
 
@@ -91,17 +91,17 @@ describe('ContentLoader', () => {
     expect(stops[0].attributes()).toEqual({
       offset: '0%',
       'stop-color': '#f9f9f9',
-      'stop-opacity': '1'
+      'stop-opacity': '1',
     })
     expect(stops[1].attributes()).toEqual({
       offset: '50%',
       'stop-color': '#ecebeb',
-      'stop-opacity': '1'
+      'stop-opacity': '1',
     })
     expect(stops[2].attributes()).toEqual({
       offset: '100%',
       'stop-color': '#f9f9f9',
-      'stop-opacity': '1'
+      'stop-opacity': '1',
     })
   })
 
@@ -114,27 +114,27 @@ describe('ContentLoader', () => {
       attributeName: 'offset',
       values: '-2; 1',
       dur: '2s',
-      repeatCount: 'indefinite'
+      repeatCount: 'indefinite',
     })
     expect(animations[1].attributes()).toEqual({
       attributeName: 'offset',
       values: '-1.5; 1.5',
       dur: '2s',
-      repeatCount: 'indefinite'
+      repeatCount: 'indefinite',
     })
     expect(animations[2].attributes()).toEqual({
       attributeName: 'offset',
       values: '-1; 2',
       dur: '2s',
-      repeatCount: 'indefinite'
+      repeatCount: 'indefinite',
     })
   })
 
   it('does not animate if animate prop is false', () => {
     const wrapper = mount(ContentLoader, {
       props: {
-        animate: false
-      }
+        animate: false,
+      },
     })
 
     expect(wrapper.findAll('defs linearGradient animate').length).toBe(0)
@@ -149,15 +149,15 @@ describe('ContentLoader', () => {
       rx: '5',
       ry: '5',
       width: '100%',
-      height: '100%'
+      height: '100%',
     })
   })
 
   it('outputs the default slot within the clipPath', () => {
     const wrapper = mount(ContentLoader, {
       slots: {
-        default: '<circle cx="30" cy="30" r="30" />'
-      }
+        default: '<circle cx="30" cy="30" r="30" />',
+      },
     })
 
     expect(wrapper.find('defs clipPath circle').html()).toEqual(
@@ -168,21 +168,21 @@ describe('ContentLoader', () => {
   it('use the baseUrl to link the gradient & clip path', () => {
     const wrapper = mount(ContentLoader, {
       props: {
-        baseUrl: '/path'
-      }
+        baseUrl: '/path',
+      },
     })
 
     expect(wrapper.find('rect').attributes()).toMatchObject({
       style: `fill: url(/path#${wrapper.vm.idGradient});`,
-      'clip-path': `url(/path#${wrapper.vm.idClip})`
+      'clip-path': `url(/path#${wrapper.vm.idClip})`,
     })
   })
 
   it('use the uniqueKey to generate static IDs', () => {
     const wrapper = mount(ContentLoader, {
       props: {
-        uniqueKey: 'unique'
-      }
+        uniqueKey: 'unique',
+      },
     })
 
     expect(wrapper.vm.idClip).toEqual('unique-idClip')
@@ -193,8 +193,8 @@ describe('ContentLoader', () => {
     const wrapper = mount(ContentLoader, {
       props: {
         class: 'loader',
-        id: 'loader'
-      }
+        id: 'loader',
+      },
     })
 
     expect(wrapper.find('svg').classes()).toEqual(['loader'])

src/ContentLoader.tsx

@@ -6,49 +6,49 @@ export default defineComponent({
 
   props: {
     width: {
-      type: [Number, String]
+      type: [Number, String],
     },
     height: {
-      type: [Number, String]
+      type: [Number, String],
     },
     viewBox: {
-      type: String
+      type: String,
     },
     preserveAspectRatio: {
       type: String,
-      default: 'xMidYMid meet'
+      default: 'xMidYMid meet',
     },
     speed: {
       type: Number,
-      default: 2
+      default: 2,
     },
     baseUrl: {
       type: String,
-      default: ''
+      default: '',
     },
     primaryColor: {
       type: String,
-      default: '#f9f9f9'
+      default: '#f9f9f9',
     },
     secondaryColor: {
       type: String,
-      default: '#ecebeb'
+      default: '#ecebeb',
     },
     primaryOpacity: {
       type: Number,
-      default: 1
+      default: 1,
     },
     secondaryOpacity: {
       type: Number,
-      default: 1
+      default: 1,
     },
     uniqueKey: {
-      type: String
+      type: String,
     },
     animate: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
 
   setup(props) {
@@ -61,7 +61,7 @@ export default defineComponent({
     return {
       idClip,
       idGradient,
-      computedViewBox
+      computedViewBox,
     }
   },
 
@@ -139,5 +139,5 @@ export default defineComponent({
         </defs>
       </svg>
     )
-  }
+  },
 })

src/index.spec.js

@@ -11,25 +11,27 @@ describe.each([
   ['CodeLoader', CodeLoader],
   ['FacebookLoader', FacebookLoader],
   ['ListLoader', ListLoader],
-  ['InstagramLoader', InstagramLoader]
+  ['InstagramLoader', InstagramLoader],
 ])('%s', (name, component) => {
   it('renders its shapes', () => {
     const wrapper = mount(component)
 
-    expect(wrapper.findAll('clipPath > *').map(c => c.html())).toMatchSnapshot()
+    expect(
+      wrapper.findAll('clipPath > *').map((c) => c.html())
+    ).toMatchSnapshot()
   })
 
   it('forwards attributes to ContentLoader', () => {
     const wrapper = mount(component, {
       props: {
         id: 'loader',
-        class: 'loader'
-      }
+        class: 'loader',
+      },
     })
 
     expect(wrapper.attributes()).toMatchObject({
       id: 'loader',
-      class: 'loader'
+      class: 'loader',
     })
   })
 })

src/uid.ts

@@ -1,4 +1 @@
-export default () =>
-  Math.random()
-    .toString(36)
-    .substring(2)
+export default () => Math.random().toString(36).substring(2)