build: add add prettier and linting on commit

Author: dobromir-hristov

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none"
+}

package.json

@@ -21,14 +21,30 @@
     "@lmiller1990/vue-jest-transformer": "^0.0.2",
     "@types/estree": "^0.0.42",
     "@types/jest": "^24.9.1",
+    "husky": "^4.2.3",
     "jest": "^25.1.0",
+    "lint-staged": "^10.0.9",
+    "prettier": "^2.0.2",
     "rollup": "^1.31.1",
     "rollup-plugin-typescript2": "^0.26.0",
     "ts-jest": "^25.0.0",
     "typescript": "^3.7.5"
   },
   "scripts": {
     "test": "yarn jest --runInBand",
-    "build": "yarn rollup -c rollup.config.js"
+    "build": "yarn rollup -c rollup.config.js",
+    "lint": "prettier -c --parser typescript \"src/**/*.ts?(x)\"",
+    "lint:fix": "yarn lint --write"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --parser=typescript --write",
+      "git add"
+    ]
   }
 }

src/dataMixin.ts

@@ -8,4 +8,4 @@ export const createDataMixin = (data: Record<string, unknown>) => {
       }
     }
   }
-}
+}

src/dom-wrapper.ts

@@ -36,18 +36,22 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
   }
 
   findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
-    return Array.from(this.element.querySelectorAll<T>(selector)).map(x => new DOMWrapper(x))
+    return Array.from(this.element.querySelectorAll<T>(selector)).map(
+      (x) => new DOMWrapper(x)
+    )
   }
 
   async setChecked(checked: boolean = true) {
     // typecast so we get typesafety
     const element = (this.element as unknown) as HTMLInputElement
 
     if (element.tagName !== 'INPUT') {
-      throw Error(`You need to call setChecked on an input element. You called it on a ${this.element.tagName}`)
+      throw Error(
+        `You need to call setChecked on an input element. You called it on a ${this.element.tagName}`
+      )
     }
 
-    // we do not want to trigger an event if the user 
+    // we do not want to trigger an event if the user
     // attempting set the same value twice
     // this is beacuse in a browser setting checked = true when it is
     // already true is a no-op; no change event is triggered

src/emitMixin.ts

@@ -8,8 +8,8 @@ export const createEmitMixin = () => {
       const originalEmit = getCurrentInstance().emit
       getCurrentInstance().emit = (event: string, ...args: unknown[]) => {
         events[event]
-          ? events[event] = [...events[event], [...args]]
-          : events[event] = [[...args]]
+          ? (events[event] = [...events[event], [...args]])
+          : (events[event] = [[...args]])
 
         return originalEmit.call(getCurrentInstance(), event, ...args)
       }
@@ -20,4 +20,4 @@ export const createEmitMixin = () => {
     events,
     emitMixin
   }
-}
+}

src/index.ts

@@ -1,3 +1,3 @@
 import { mount } from './mount'
 
-export { mount }
+export { mount }

src/mount.ts

@@ -12,7 +12,7 @@ interface MountingOptions<Props> {
   slots?: {
     default?: Slot
     [key: string]: Slot
-  },
+  }
   plugins?: any[]
   mixins?: any[]
   provides?: Record<any, any>
@@ -23,26 +23,30 @@ export function mount<P>(
   component: any,
   options?: MountingOptions<P>
 ): VueWrapper {
-
   // Reset the document.body
-  document.getElementsByTagName('html')[0].innerHTML = '';
+  document.getElementsByTagName('html')[0].innerHTML = ''
   const el = document.createElement('div')
   el.id = 'app'
   document.body.appendChild(el)
 
   // handle any slots passed via mounting options
-  const slots = options?.slots &&
-    Object.entries(options.slots).reduce<Record<string, () => VNode | string>>((acc, [name, fn]) => {
-    acc[name] = () => fn
-    return acc
-  }, {})
+  const slots =
+    options?.slots &&
+    Object.entries(options.slots).reduce<Record<string, () => VNode | string>>(
+      (acc, [name, fn]) => {
+        acc[name] = () => fn
+        return acc
+      },
+      {}
+    )
 
   // create the wrapper component
-  const Parent = (props?: P) => defineComponent({
-    render() {
-      return h(component, props, slots)
-    }
-  })
+  const Parent = (props?: P) =>
+    defineComponent({
+      render() {
+        return h(component, props, slots)
+      }
+    })
 
   // create the vm
   const vm = createApp(Parent(options && options.props))
@@ -55,17 +59,14 @@ export function mount<P>(
 
   // use and plugins from mounting options
   if (options?.plugins) {
-    for (const use of options.plugins)
-    vm.use(use)
+    for (const use of options.plugins) vm.use(use)
   }
 
   // use any mixins from mounting options
   if (options?.mixins) {
-    for (const mixin of options.mixins)
-    vm.mixin(mixin)
+    for (const mixin of options.mixins) vm.mixin(mixin)
   }
 
-
   // provide any values passed via provides mounting option
   if (options?.provides) {
     for (const key of Reflect.ownKeys(options.provides)) {
@@ -82,4 +83,4 @@ export function mount<P>(
   const app = vm.mount('#app')
 
   return createWrapper(app, events)
-}
+}

src/types.ts

@@ -6,4 +6,4 @@ export interface WrapperAPI {
   find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper
   findAll<T extends Element>(selector: string): DOMWrapper<T>[]
   exists: () => boolean
-}
+}

src/vue-shims.d.ts

@@ -7,4 +7,4 @@ declare module '*.vue' {
 declare module 'vue' {
   import Vue from 'vue/dist/vue'
   export = Vue
-}
+}

src/vue-wrapper.ts

@@ -44,20 +44,22 @@ export class VueWrapper implements WrapperAPI {
 
   findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
     const results = (this.vm.$el as Element).querySelectorAll<T>(selector)
-    return Array.from(results).map(x => new DOMWrapper(x))
+    return Array.from(results).map((x) => new DOMWrapper(x))
   }
 
   async setChecked(checked: boolean = true) {
     return new DOMWrapper(this.vm.$el).setChecked(checked)
   }
 
-
-  trigger(eventString: string) { 
+  trigger(eventString: string) {
     const rootElementWrapper = new DOMWrapper(this.vm.$el)
     return rootElementWrapper.trigger(eventString)
   }
 }
 
-export function createWrapper(vm: ComponentPublicInstance, events: Record<string, unknown[]>): VueWrapper {
+export function createWrapper(
+  vm: ComponentPublicInstance,
+  events: Record<string, unknown[]>
+): VueWrapper {
   return new VueWrapper(vm, events)
 }