Merge pull request #661 from chantouchsek/fix/660-form-type

Fix/660 form type

Author: chantouchsek

.eslintrc

@@ -19,7 +19,15 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }],
     "no-prototype-builtins": "off",
-    "no-useless-escape": "off"
+    "no-useless-escape": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["type", "builtin", "external", "internal", "index", "sibling", "parent", "object"],
+        "alphabetize": { "order": "asc" }
+      }
+    ]
   }
 }

nuxt/index.js

@@ -1,4 +1,4 @@
-import { resolve, join } from 'path'
+import { resolve, join } from 'node:path'
 
 module.exports = function nuxtAxiosHttpModule(moduleOptions = {}) {
   const { axiosHttp = {} } = this.options
@@ -9,7 +9,6 @@ module.exports = function nuxtAxiosHttpModule(moduleOptions = {}) {
     src: resolve(__dirname, './templates/plugin.js'),
     fileName: join('vue-nuxt-axios.js'),
   })
-  // this.options.build.transpile.push(/^escape-string-regexp/)
 }
 
 // required by nuxt

nuxt/templates/plugin.js

@@ -4,7 +4,7 @@ import AxiosHttp, { BaseService, Validator } from 'vue-axios-http'
 const errorProperty = '<%= options.errorProperty %>'
 const parsedQs = '<%= options.parsedQs %>'
 
-Vue.use(AxiosHttp, { errorProperty: errorProperty, parsedQs })
+Vue.use(AxiosHttp, { errorProperty, parsedQs })
 
 export default function ({ $axios }, inject) {
   BaseService.$http = $axios

package.json

@@ -55,7 +55,7 @@
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.9.0",
-    "@vitest/coverage-c8": "^0.28.1",
+    "@vitest/coverage-c8": "^0.28.2",
     "@vue/test-utils": "^1.3.3",
     "axios-mock-adapter": "^1.20.0",
     "eslint": "^8.13.0",
@@ -74,7 +74,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
-    "vitest": "^0.28.1",
+    "vitest": "^0.28.2",
     "vue": "^2.7.14"
   },
   "files": [

src/__tests__/base-service.test.ts

@@ -1,10 +1,10 @@
+import type { ValidatorType } from '../core/Validator'
 import Axios from 'axios'
-import BaseService from '../core/BaseService'
 import MockAdapter from 'axios-mock-adapter'
-import PostService from '../util/PostService'
-import type { ValidatorType } from '../core/Validator'
-import Validator from '../core/Validator'
 import { merge } from 'lodash'
+import BaseService from '../core/BaseService'
+import Validator from '../core/Validator'
+import PostService from '../util/PostService'
 
 let service: PostService
 let mockAdapter: MockAdapter
@@ -22,7 +22,7 @@ describe('BaseService', () => {
   })
 
   it('check if http was installed', async () => {
-    BaseService.$http = undefined as any
+    BaseService.$http = undefined as never
     try {
       await service.all()
     } catch (e) {

src/__tests__/package.spec.ts

@@ -1,7 +1,7 @@
+import { mount } from '@vue/test-utils'
 import Vue from 'vue'
 import AxiosHttp from '../'
 import { addElemWithDataAppToBody, disableTransitions, sleep } from '../util'
-import { mount } from '@vue/test-utils'
 
 describe('Vue Api Queries', () => {
   disableTransitions()

src/__tests__/post-service.spec.ts

@@ -1,7 +1,7 @@
 import Axios from 'axios'
+import MockAdapter from 'axios-mock-adapter'
 import BaseService from '../core/BaseService'
 import PostService from '../util/PostService'
-import MockAdapter from 'axios-mock-adapter'
 
 let service: PostService
 let mockAdapter: MockAdapter
@@ -33,21 +33,4 @@ describe('PostService', () => {
     expect(data.length).toEqual(1)
     expect(item.pagination.page).toEqual(1)
   })
-  it('it should throw exception if method is not inlist', async () => {
-    const items = {
-      data: [{ name: 'Chantouch', post_id: 1 }],
-      meta: {
-        pagination: { count: 1, page: 1, perPage: 20 },
-        include: [],
-      },
-    }
-    mockAdapter.onGet('/posts/1/tags').reply(500, items)
-    try {
-      await service.throwException(1)
-    } catch (e: any) {
-      expect(e.message).toEqual(
-        '`unlink` is not a valid request type, must be one of: `get`, `GET`, `delete`, `DELETE`, `head`, `HEAD`, `options`, `OPTIONS`, `post`, `POST`, `put`, `PUT`, `patch`, `PATCH`.',
-      )
-    }
-  })
 })

src/core/BaseService.ts

@@ -1,9 +1,10 @@
-import type { AxiosError, AxiosInstance, AxiosResponse, Method, AxiosRequestConfig } from 'axios'
-import type { Errors } from '..'
-import Validator from './Validator'
-import { hasFiles, objectToFormData, removeDoubleSlash } from '../util'
+import type { ValidatorType } from './Validator'
+import type { AxiosError, AxiosInstance, Method, AxiosRequestConfig, AxiosResponse } from 'axios'
+import type { IParseOptions } from 'qs'
 import { isObject, isArray } from 'lodash'
-import qs, { IParseOptions } from 'qs'
+import qs from 'qs'
+import Validator from './Validator'
+import { hasFiles, objectToFormData } from '../util'
 
 const validator = Validator
 const UNPROCESSABLE_ENTITY = 422
@@ -13,7 +14,7 @@ interface AxiosResponseData {
 }
 
 class BaseService {
-  errors: Errors
+  errors: ValidatorType
   parameters: Record<string, any>
   endpoint: string
   static $http: AxiosInstance
@@ -62,9 +63,7 @@ class BaseService {
     const parameter = id && !isObject(id) ? `/${id}` : ''
     const body = isObject(id) ? id : payload
     const requestType: Method = hasFiles(body) ? 'post' : 'put'
-    if (hasFiles(body)) {
-      Object.assign(body, { _method: 'put' })
-    }
+    if (hasFiles(body)) Object.assign(body, { _method: 'put' })
     return this.submit<T>(requestType, parameter, body, config)
   }
 
@@ -86,18 +85,25 @@ class BaseService {
     return this.delete<T>(id)
   }
 
-  submit<T = any>(method: Method, parameter?: string | number, form?: T, config?: AxiosRequestConfig): Promise<T> {
-    BaseService.__validateRequestType(method)
+  submit<T = any>(method: Method, url?: string | number, form?: any, config?: AxiosRequestConfig) {
+    return new Promise<T>((resolve, reject) => {
+      this.$submit<T>(method, url, form, config)
+        .then(({ data }) => resolve(data))
+        .catch((err) => reject(err))
+    })
+  }
+
+  $submit<T = any>(method: Method, param?: string | number, form?: any, config?: AxiosRequestConfig) {
     this.beforeSubmit()
-    return new Promise((resolve, reject) => {
+    return new Promise<AxiosResponse<T>>((resolve, reject) => {
       const data = hasFiles(form) ? objectToFormData(form) : form
-      const endpoint = parameter ? `/${this.endpoint}/${parameter}` : `/${this.endpoint}`
-      const url = this.__getParameterString(removeDoubleSlash(endpoint))
+      const endpoint = param ? `/${this.endpoint}/${param}` : `/${this.endpoint}`
+      const url = this.__getParameterString(endpoint.replace(/\/\//g, '/'))
       config = Object.assign({}, config, { url, data, method })
       this.$http(config)
-        .then((response: AxiosResponse) => {
+        .then((response) => {
           this.onSuccess()
-          resolve(response.data)
+          resolve(response)
         })
         .catch((error: AxiosError<AxiosResponseData>) => {
           this.errors.processing = false
@@ -115,39 +121,10 @@ class BaseService {
   }
 
   private __getParameterString(url: string) {
-    const query = qs.stringify(this.parameters, {
-      encode: false,
-      skipNulls: true,
-      addQueryPrefix: true,
-    })
+    const query = qs.stringify(this.parameters, { encode: false, skipNulls: true, addQueryPrefix: true })
     return `${url}${query}`
   }
 
-  private static __validateRequestType(requestType: Method) {
-    const requestTypes: Method[] = [
-      'get',
-      'GET',
-      'delete',
-      'DELETE',
-      'head',
-      'HEAD',
-      'options',
-      'OPTIONS',
-      'post',
-      'POST',
-      'put',
-      'PUT',
-      'patch',
-      'PATCH',
-    ]
-    if (!requestTypes.includes(requestType)) {
-      throw new Error(
-        `\`${requestType}\` is not a valid request type, ` + `must be one of: \`${requestTypes.join('`, `')}\`.`,
-      )
-    }
-    return requestType
-  }
-
   setParameters(parameters: Record<string, any>): this {
     Object.keys(parameters).forEach((key) => {
       this.parameters[key] = parameters[key]
@@ -173,9 +150,7 @@ class BaseService {
     if (!parameters || !parameters.length) {
       this.parameters = []
     } else if (isArray(parameters)) {
-      for (const parameter of parameters) {
-        delete this.parameters[parameter]
-      }
+      for (const parameter of parameters) delete this.parameters[parameter]
     }
     return this
   }
@@ -191,9 +166,7 @@ class BaseService {
   }
 
   beforeSubmit() {
-    if (!this.$http) {
-      throw new Error('Vue Axios Http, No http library provided.')
-    }
+    if (!this.$http) throw new Error('Vue Axios Http, No http library provided.')
     this.errors.flush()
     this.errors.processing = true
     this.errors.successful = false

src/core/Validator.ts

@@ -13,12 +13,8 @@ class Validator {
   }
 
   add(field: string, message: string, forceUpdate?: boolean) {
-    if (this.missed(field)) {
-      this.errors[field] = []
-    }
-    if (!this.errors[field].includes(message)) {
-      this.errors[field].unshift(message)
-    }
+    if (this.missed(field)) this.errors[field] = []
+    if (!this.errors[field].includes(message)) this.errors[field].unshift(message)
     if (forceUpdate) {
       this.errors[field] = []
       this.errors[field].push(message)
@@ -79,9 +75,7 @@ class Validator {
       }
       return errors
     }
-    if (!fields.length) {
-      return Object.keys(this.errors).length > 0
-    }
+    if (!fields.length) return Object.keys(this.errors).length > 0
     const errors: Record<string, any> = {}
     fields.forEach((key: string) => (errors[key] = this.get(key)))
     return Object.keys(errors).length > 0

src/index.ts

@@ -1,45 +1,35 @@
 import type { ValidatorType } from './core/Validator'
+import type { IParseOptions } from 'qs'
+import type _Vue from 'vue'
+import { merge } from 'lodash'
 import BaseService from './core/BaseService'
 import Validator from './core/Validator'
-import { merge } from 'lodash'
-import _Vue from 'vue'
 
 // augment typings of Vue.js
 import './vue'
 
-export type Errors = ValidatorType
-export type { ValidatorType }
-
 class AxiosHttp {
   installed = false
-  parsedQs = {
+  parsedQs: IParseOptions = {
     comma: true,
     allowDots: true,
     ignoreQueryPrefix: true,
   }
   install(Vue: typeof _Vue, options: Record<string, any> = {}) {
     if (this.installed) return
     this.installed = true
-    const defaultOption = merge(
-      {
-        parsedQs: this.parsedQs,
-        errorProperty: 'errors',
-      },
-      options,
-    )
+    const defaultOption = merge({ parsedQs: this.parsedQs, errorProperty: 'errors' }, options)
     const { $axios, errorProperty, parsedQs } = defaultOption
     BaseService.$http = $axios
     BaseService.$errorProperty = errorProperty || 'errors'
-    BaseService.$parsedQs = parsedQs || this.parsedQs
+    BaseService.$parsedQs = parsedQs
     Vue.mixin({
       beforeCreate() {
-        this.$options.$errors = {} as any
+        this.$options.$errors = {} as never
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         Vue.util.defineReactive(this.$options, '$errors', Validator)
-        if (!this.$options.computed) {
-          this.$options.computed = {}
-        }
+        if (!this.$options.computed) this.$options.computed = {}
         this.$options.computed.$errors = function () {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
@@ -49,6 +39,8 @@ class AxiosHttp {
     })
   }
 }
-export { Validator, BaseService }
+
 export * from './util'
+export type { ValidatorType }
+export { Validator, BaseService }
 export default new AxiosHttp()