chore: add eslint (#282)

* chore: add eslint

* chore: lint on ci

.circleci/config.yml

@@ -39,6 +39,13 @@ jobs:
           at: ~/
       - run: yarn example
 
+  lint:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: yarn lint
+
   test:
     <<: *defaults
     steps:
@@ -57,6 +64,9 @@ workflows:
       - example-build:
           requires:
             - install
+      - lint:
+          requires:
+            - install
       - test:
           requires:
             - install

.eslintignore

@@ -0,0 +1,11 @@
+/dist/
+/lib/
+node_modules/
+
+/test/test.build.js
+/example/build.js
+
+# TOOD: remove after fixed decorator indent issue
+# https://github.com/eslint/typescript-eslint-parser/issues/438
+/example
+/test

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:vue-libs/recommended'],
+  parserOptions: {
+    parser: 'typescript-eslint-parser'
+  },
+  rules: {
+    'no-unused-vars': 'off',
+    'no-undef': 'off'
+  }
+}

build/dev-test.js

@@ -8,7 +8,7 @@ fs.watch('test/test.build.js', () => {
   run('mocha --reporter min test/test.build.js')
 })
 
-function run(command) {
+function run (command) {
   const [name, ...args] = command.split(' ')
   spawn(`node_modules/.bin/${name}`, args, {
     shell: true,

example/src/App.vue

@@ -82,7 +82,7 @@ export default class App extends AppProps {
   }
 
   // direct dispatch example
-  incrementIfOdd() {
+  incrementIfOdd () {
     this.$store.dispatch('incrementIfOdd')
   }
 }

example/src/components/Hello.vue

@@ -3,16 +3,16 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
-  import Component from '../../../lib/index'
+import Vue from 'vue'
+import Component from '../../../lib/index'
 
-  @Component
-  export default class Hello extends Vue {
-    helloTimes: number = 0
+@Component
+export default class Hello extends Vue {
+  helloTimes: number = 0
 
-    sayHello () {
-      this.helloTimes++
-    }
+  sayHello () {
+    this.helloTimes++
   }
+}
 </script>
 

example/src/components/World.tsx

@@ -3,7 +3,7 @@ import Component from '../../../lib/index'
 
 @Component
 export default class World extends Vue {
-  render(h: CreateElement) {
+  render (h: CreateElement) {
     return <p>This is rendered via TSX</p>
   }
 }

example/src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from "vue"
+import Vue, { VNode } from 'vue'
 
 declare global {
   namespace JSX {

example/src/store.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import Vuex from "vuex"
+import Vuex from 'vuex'
 
-interface CounterState{
+interface CounterState {
   count: number
 }
 
@@ -20,4 +20,4 @@ const mutations = {
 export default new Vuex.Store({
   state,
   mutations
-})
+})

package.json

@@ -16,6 +16,7 @@
     "example": "npm run build && webpack --config example/webpack.config.js",
     "dev": "webpack --config example/webpack.config.js --watch",
     "dev:test": "node build/dev-test.js",
+    "lint": "eslint --ext js,jsx,ts,tsx,vue .",
     "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js",
     "release": "bash build/release.sh"
   },
@@ -48,6 +49,8 @@
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "chai": "^4.1.2",
     "css-loader": "^1.0.0",
+    "eslint": "^5.7.0",
+    "eslint-plugin-vue-libs": "^3.0.0",
     "mocha": "^5.0.1",
     "reflect-metadata": "^0.1.12",
     "rimraf": "^2.6.2",
@@ -56,6 +59,7 @@
     "testdouble": "^3.5.0",
     "ts-loader": "^5.2.1",
     "typescript": "^3.1.1",
+    "typescript-eslint-parser": "^20.0.0",
     "uglify-js": "^3.3.10",
     "vue": "^2.5.13",
     "vue-loader": "^15.4.2",

src/component.ts

@@ -39,7 +39,6 @@ export function componentFactory (
     }
     const descriptor = Object.getOwnPropertyDescriptor(proto, key)!
     if (descriptor.value !== void 0) {
-
       // methods
       if (typeof descriptor.value === 'function') {
         (options.methods || (options.methods = {}))[key] = descriptor.value
@@ -51,7 +50,6 @@ export function componentFactory (
           }
         })
       }
-
     } else if (descriptor.get || descriptor.set) {
       // computed properties
       (options.computed || (options.computed = {}))[key] = {
@@ -138,7 +136,6 @@ function forwardStaticMembers (
     // we can check equality of them and exclude it if they have the same reference.
     // If it is a primitive value, it will be forwarded for safety.
     if (!hasProto) {
-
       // Only `cid` is explicitly exluded from property forwarding
       // because we cannot detect whether it is a inherited property or not
       // on the no `__proto__` environment even though the property is reserved.
@@ -149,18 +146,18 @@ function forwardStaticMembers (
       const superDescriptor = Object.getOwnPropertyDescriptor(Super, key)
 
       if (
-        !isPrimitive(descriptor.value)
-        && superDescriptor
-        && superDescriptor.value === descriptor.value
+        !isPrimitive(descriptor.value) &&
+        superDescriptor &&
+        superDescriptor.value === descriptor.value
       ) {
         return
       }
     }
 
     // Warn if the users manually declare reserved properties
     if (
-      process.env.NODE_ENV !== 'production'
-      && reservedPropertyNames.indexOf(key) >= 0
+      process.env.NODE_ENV !== 'production' &&
+      reservedPropertyNames.indexOf(key) >= 0
     ) {
       warn(
         `Static property name '${key}' declared on class '${Original.name}' ` +

src/data.ts

@@ -20,7 +20,7 @@ export function collectDataFromConstructor (vm: Vue, Component: VueClass<Vue>) {
       if (key.charAt(0) !== '_') {
         Object.defineProperty(this, key, {
           get: () => vm[key],
-          set: value => vm[key] = value,
+          set: value => { vm[key] = value },
           configurable: true
         })
       }

src/index.ts

@@ -15,10 +15,8 @@ function Component (options: ComponentOptions<Vue> | VueClass<Vue>): any {
   }
 }
 
-namespace Component {
-  export function registerHooks (keys: string[]): void {
-    $internalHooks.push(...keys)
-  }
+Component.registerHooks = function registerHooks (keys: string[]): void {
+  $internalHooks.push(...keys)
 }
 
 export default Component

src/reflect.ts

@@ -20,7 +20,7 @@ export function copyReflectionMetadata (
   })
 }
 
-function forwardMetadata(to: object, from: object, propertyKey?: string): void {
+function forwardMetadata (to: object, from: object, propertyKey?: string): void {
   const metaKeys = propertyKey
     ? Reflect.getOwnMetadataKeys(from, propertyKey)
     : Reflect.getOwnMetadataKeys(from)

src/util.ts

@@ -3,7 +3,8 @@ import { VueClass, DecoratedClass } from './declarations'
 
 export const noop = () => {}
 
-export const hasProto = { __proto__: [] } instanceof Array
+const fakeArray = { __proto__: [] }
+export const hasProto = fakeArray instanceof Array
 
 export interface VueDecorator {
   // Class decorator
@@ -43,7 +44,7 @@ export function mixins (...Ctors: VueClass<Vue>[]): VueClass<Vue> {
 
 export function isPrimitive (value: any): boolean {
   const type = typeof value
-  return value == null || (type !== "object" && type !== "function")
+  return value == null || (type !== 'object' && type !== 'function')
 }
 
 export function warn (message: string): void {

test/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    mocha: true
+  }
+}

test/test-babel.js

@@ -40,8 +40,8 @@ describe('vue-class-component with Babel', () => {
     const getterDecorator = (value) => () => {
       return {
         enumerable: true,
-        get() {
-          return value;
+        get () {
+          return value
         }
       }
     }

test/test.ts

@@ -1,11 +1,10 @@
-import 'reflect-metadata';
+import 'reflect-metadata'
 import Component, { createDecorator, mixins } from '../lib'
 import { expect } from 'chai'
 import * as td from 'testdouble'
 import Vue, { ComputedOptions } from 'vue'
 
 describe('vue-class-component', () => {
-
   it('hooks', () => {
     let created = false
     let destroyed = false
@@ -72,21 +71,19 @@ describe('vue-class-component', () => {
     const getterDecorator = (value: any) => (_: any, __: any): any => {
       return {
         enumerable: true,
-        get() {
-          return value;
+        get () {
+          return value
         }
       }
     }
 
     @Component
     class MyComp extends Vue {
-
       @valueDecorator('field1')
       field1!: string
 
       @getterDecorator('field2')
       field2!: string
-
     }
 
     const c = new MyComp()
@@ -347,7 +344,7 @@ describe('vue-class-component', () => {
     class MyComp extends Vue {
       static myValue = 52
 
-      static myFunc() {
+      static myFunc () {
         return 42
       }
     }