chore: add linting

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/vue',
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 11,
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  plugins: ['vue', '@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+  },
+}

.github/workflows/ci.yml

@@ -22,8 +22,11 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Lint
+        run: yarn lint
+
       - name: Test
-        run: yarn test:ci
+        run: yarn test --coverage
 
       - name: Upload coverage to Codecov
         env:

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "eslint.codeActionsOnSave.mode": "all",
+  "eslint.validate": [
+    "typescript",
+    "typescriptreact",
+    "javascript",
+    "javascriptreact",
+    "vue"
+  ]
+}

examples/src/App.vue

@@ -1,7 +1,14 @@
 <template>
   <div>
-    <TestButton @click="handleClick">Button</TestButton>
-    <TestButton @click="handleClick" disabled>Button</TestButton>
+    <TestButton @click="handleClick">
+      Button
+    </TestButton>
+    <TestButton
+      disabled
+      @click="handleClick"
+    >
+      Button
+    </TestButton>
   </div>
 </template>
 

examples/src/TestButton.vue

@@ -18,9 +18,9 @@ import { Clickable, clickableProps } from 'ari-vue/src/Clickable'
 
 export default {
   name: 'TestButton',
-  props: clickableProps,
   components: {
     Clickable,
   },
+  props: clickableProps,
 }
 </script>

package.json

@@ -2,10 +2,20 @@
   "name": "ari-vue",
   "version": "0.0.0",
   "scripts": {
-    "test": "jest --watch",
-    "test:ci": "jest --coverage",
+    "lint": "eslint . --ext js,ts,tsx,vue --fix",
+    "test": "jest",
     "new": "yarn hygen component new"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && yarn jest"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,vue}": [
+      "eslint --ext js,ts,tsx,vue --fix"
+    ]
+  },
   "peerDependencies": {
     "vue": "^3.0.0-rc.3"
   },
@@ -18,12 +28,20 @@
     "@testing-library/jest-dom": "^5.11.1",
     "@testing-library/user-event": "^12.0.11",
     "@types/jest": "^26.0.4",
+    "@typescript-eslint/eslint-plugin": "^3.7.1",
+    "@typescript-eslint/parser": "^3.7.1",
     "@vue/compiler-sfc": "^3.0.0-rc.3",
     "@vue/test-utils": "^2.0.0-alpha.7",
     "babel-jest": "^26.1.0",
+    "eslint": "^7.5.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-vue": "^7.0.0-beta.0",
+    "husky": "^4.2.5",
     "hygen": "^6.0.4",
     "jest": "^26.1.0",
+    "lint-staged": "^10.2.11",
     "prettier": "^2.0.5",
+    "typescript": "^3.9.7",
     "vue": "^3.0.0-rc.3"
   }
 }

src/Button/Button.ts

@@ -2,7 +2,7 @@ import { ComponentObjectPropsOptions, ref, computed } from 'vue'
 import { defineComponent, useOnElement } from '../utils'
 import { useClickable, clickableProps, ClickableProps } from '../Clickable'
 
-export interface ButtonProps extends ClickableProps {}
+export type ButtonProps = ClickableProps
 
 export const buttonProps: ComponentObjectPropsOptions<ButtonProps> = {
   ...clickableProps,

src/Clickable/Clickable.ts

@@ -2,7 +2,7 @@ import { ComponentObjectPropsOptions } from 'vue'
 import { defineComponent } from '../utils'
 import { useTabbable, tabbableProps, TabbableProps } from '../Tabbable'
 
-export interface ClickableProps extends TabbableProps {}
+export type ClickableProps = TabbableProps
 
 export const clickableProps: ComponentObjectPropsOptions<ClickableProps> = {
   ...tabbableProps,

src/Dialog/Dialog.ts

@@ -7,7 +7,7 @@ import {
 } from '../Disclosure'
 import { Portal } from '../Portal'
 
-export interface DialogProps extends DisclosureContentProps {}
+export type DialogProps = DisclosureContentProps
 
 export const dialogProps: ComponentObjectPropsOptions<DialogProps> = {
   ...disclosureContentProps,

src/Dialog/DialogDisclosure.ts

@@ -2,7 +2,7 @@ import { ComponentObjectPropsOptions } from 'vue'
 import { defineComponent } from '../utils'
 import { useDisclosure, disclosureProps, DisclosureProps } from '../Disclosure'
 
-export interface DialogDisclosureProps extends DisclosureProps {}
+export type DialogDisclosureProps = DisclosureProps
 
 export const dialogDisclosureProps: ComponentObjectPropsOptions<DialogDisclosureProps> = {
   ...disclosureProps,

src/Dialog/DialogState.ts

@@ -5,7 +5,7 @@ import {
   useDisclosureState,
 } from '../Disclosure'
 
-export interface DialogStateReturn extends DisclosureStateReturn {}
+export type DialogStateReturn = DisclosureStateReturn
 
 export const dialogStateReturn: ComponentObjectPropsOptions<DialogStateReturn> = {
   ...disclosureStateReturn,

src/Disclosure/DisclosureState.ts

@@ -1,13 +1,13 @@
-import { ComponentObjectPropsOptions, ref, Ref } from 'vue'
+import { ComponentObjectPropsOptions, ref, Ref, PropType } from 'vue'
 
 let currentIdCount = 0
 
 export interface DisclosureStateReturn {
   baseId: string
   visible: Ref<boolean>
-  show: Function
-  hide: Function
-  toggle: Function
+  show: () => void
+  hide: () => void
+  toggle: () => void
 }
 
 export const disclosureStateReturn: ComponentObjectPropsOptions<DisclosureStateReturn> = {
@@ -19,13 +19,13 @@ export const disclosureStateReturn: ComponentObjectPropsOptions<DisclosureStateR
     required: true,
   },
   show: {
-    type: Function,
+    type: Function as PropType<() => void>,
   },
   hide: {
-    type: Function,
+    type: Function as PropType<() => void>,
   },
   toggle: {
-    type: Function,
+    type: Function as PropType<() => void>,
   },
 }
 

src/Tabbable/Tabbable.ts

@@ -1,4 +1,4 @@
-import { computed, ref, ComponentObjectPropsOptions } from 'vue'
+import { computed, ref, ComponentObjectPropsOptions, PropType } from 'vue'
 import { defineComponent, useOnElement } from '../utils'
 import { boxProps, BoxProps, useBox } from '../Box'
 
@@ -17,9 +17,9 @@ function useIsNativeTabbable(elementRef) {
 export interface TabbableProps extends BoxProps {
   disabled: boolean
   focusable: boolean
-  onClick: Function
-  onMousedown: Function
-  onMouseover: Function
+  onClick: () => void
+  onMousedown: () => void
+  onMouseover: () => void
 }
 
 export const tabbableProps: ComponentObjectPropsOptions<TabbableProps> = {
@@ -33,15 +33,15 @@ export const tabbableProps: ComponentObjectPropsOptions<TabbableProps> = {
     default: false,
   },
   onClick: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: null,
   },
   onMousedown: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: null,
   },
   onMouseover: {
-    type: Function,
+    type: Function as PropType<() => void>,
     default: null,
   },
 }

src/utils/component.ts

@@ -1,9 +1,4 @@
-import {
-  h,
-  unref,
-  defineComponent as vueDefineComponent,
-  ComponentObjectPropsOptions,
-} from 'vue'
+import { h, unref, defineComponent as vueDefineComponent } from 'vue'
 
 function addRefToAttributes(attributes, ref) {
   const [key, value] = ref
@@ -17,17 +12,14 @@ function addRefToAttributes(attributes, ref) {
   return attributes
 }
 
-export function refsToAttributes(refs: Object): Object {
+export function refsToAttributes(refs) {
   return Object.entries(refs).reduce(addRefToAttributes, {})
 }
 
-export function defineComponent<P extends Object>(
-  componentProps: ComponentObjectPropsOptions<P>,
-  useAttributeRefs: { (props: Object | P): Object }
-): any & JSX.Element {
+export function defineComponent(componentProps, useAttributeRefs) {
   return vueDefineComponent({
     props: componentProps,
-    setup(props: Object, { slots }) {
+    setup(props, { slots }) {
       const attributeRefs = useAttributeRefs(props)
       return () => {
         const attributes = refsToAttributes(attributeRefs)

test/utils/events.ts

@@ -10,7 +10,9 @@ export const mousedown = (element: Element) =>
 export const mouseover = (element: Element) =>
   fireEvent(element, new MouseEvent('mouseover'))
 
-const createPress = (key) => async (element: Element & { focus: Function }) => {
+const createPress = (key) => async (
+  element: Element & { focus: () => void }
+) => {
   element.focus()
   await type(element, key, { skipClick: true })
 }