Merge pull request #128 from chantouchsek/feat/add-first-by-to-validator

Added new first by method validator class

Author: chantouchsek

README.md

@@ -50,13 +50,27 @@ export default {
     // simple usage
     'vue-api-queries/nuxt',
     // With options
-    ['vue-api-queries/nuxt', { errorProperty: 'errors' }],
+    ['vue-api-queries/nuxt', { errorProperty: 'errors', blockDuplicate: false }],
     '@nuxtjs/axios',
   ],
-  apiQueries: { errorProperty: 'errors' },
+  apiQueries: { errorProperty: 'errors', blockDuplicate: false },
 }
 ```
 
+### Options
+
+If `blockDuplicate` enabled, the default option of `axios-duplicate-blocker` will be:
+```js
+{
+  blockDuplicate: false
+  debug: true
+  onPageChange: true
+  blockByDefault: true
+  headerBlockerKey: ''
+}
+```
+you can overwrite it, by adding in config above.
+
 ### Note:
 
 `baseURL` is required.

jest.config.js

@@ -5,14 +5,10 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.ts', 'src/**/*.js'],
   coverageThreshold: {
     global: {
-      // branches: 100,
-      // functions: 100,
-      // lines: 100,
-      // statements: 100,
-      branches: 65,
-      functions: 70,
-      lines: 50,
-      statements: 50,
+      lines: 100,
+      functions: 100,
+      branches: 90,
+      statements: 99,
     },
   },
   testEnvironment: 'node',

nuxt/index.js

@@ -1,13 +1,19 @@
 import { resolve, join } from 'path'
-import merge from 'lodash.merge'
 
 module.exports = function nuxtVueApiQueriesModule(moduleOptions = {}) {
-  const { apiQueries = {} } = this.options
-  const options = merge({}, moduleOptions, apiQueries)
+  const { apiQueries = {}, dev } = this.options
+  const defaultOpts = {
+    debug: dev,
+    onPageChange: true,
+    blockByDefault: true,
+    headerBlockerKey: '',
+  }
+  const options = Object.assign(defaultOpts, moduleOptions, apiQueries)
   this.addPlugin({
+    options,
+    ssr: true,
     src: resolve(__dirname, './templates/plugin.js'),
     fileName: join('vue-api-queries.js'),
-    options,
   })
   this.options.build.transpile.push(/^escape-string-regexp/)
 }

nuxt/templates/plugin.js

@@ -1,10 +1,158 @@
 import Vue from 'vue'
-import VueApiQueries, { Validator } from 'vue-api-queries'
+import { CancelToken } from 'axios'
+import VueApiQueries, { isPlainObject, Validator } from 'vue-api-queries'
 
-const options = <%= serialize(options) %> || {}
-const { errorProperty, parsedQs } = options
+const errorProperty = '<%= options.errorProperty %>'
+const parsedQs = '<%= options.parsedQs %>'
+const blockDuplicate = '<%= options.blockDuplicate %>'
 
-export default function (ctx) {
-  Vue.use(VueApiQueries, { errorProperty, axios: ctx.$axios, parsedQs })
-  ctx.$errors = Validator
+function createRequestKey(url, params) {
+  let requestKey = url
+  if (params) {
+    requestKey += `:${createStringFromParameters(params)}`
+  }
+  return requestKey
+}
+
+function createStringFromParameters(obj) {
+  const keysArr = []
+  for (const key in obj) {
+    keysArr.push(key)
+    if (isPlainObject(obj[key])) {
+      keysArr.push(createStringFromParameters(obj[key]))
+    }
+  }
+  return keysArr.join('|')
+}
+
+function createCancelMessage(requestKey, paramsStr) {
+  return {
+    statusCode: 100,
+    requestKey: requestKey,
+    message: `Request canceled: ${requestKey}`,
+    paramsStr: paramsStr,
+  }
+}
+
+export default function ({ $axios, app }, inject) {
+  if (blockDuplicate === 'true') {
+    $axios.activeRequests = {}
+    $axios.onRequest((config) => {
+      let blockerConfigContainer = config
+      const headerBlockerKey = '<%= options.headerBlockerKey %>'
+      if (headerBlockerKey) {
+        if (config.headers.hasOwnProperty(headerBlockerKey)) {
+          blockerConfigContainer = config.headers[headerBlockerKey]
+          delete config.headers[headerBlockerKey]
+        }
+      }
+      let requestBlockingAllowed = blockerConfigContainer.blockAllowed
+      if (requestBlockingAllowed === undefined) {
+        requestBlockingAllowed = '<%= options.blockByDefault %>' === 'true'
+      }
+      if (!requestBlockingAllowed) {
+        return config
+      }
+
+      //Check if user has set a custom requestKey
+      let { requestKey } = blockerConfigContainer
+      if (!requestKey) {
+        //If there is no custom requestKey, create a default requestKey based on url and parameters
+        requestKey = createRequestKey(
+          config.baseURL + config.url,
+          config.params,
+        )
+      }
+      const paramsStr = JSON.stringify(config.params)
+      //If another request with the same requestKey already exists, cancel it
+      if (
+        $axios.activeRequests.hasOwnProperty(requestKey) &&
+        $axios.activeRequests[requestKey].cancelToken
+      ) {
+        $axios.activeRequests[requestKey].cancelToken.cancel(
+          createCancelMessage(requestKey, paramsStr),
+        )
+      }
+      if (!$axios.hasOwnProperty(requestKey)) {
+        //If request has not been sent before, create a custom promise
+        let reqResolve, reqReject
+        const promise = new Promise((resolve, reject) => {
+          reqResolve = resolve
+          reqReject = reject
+        })
+        //Insert current request to activeRequests
+        $axios.activeRequests[requestKey] = {
+          promise: promise,
+          resolve: reqResolve,
+          reject: reqReject,
+        }
+      }
+      //Update the active request's params
+      $axios.activeRequests[requestKey].paramsStr = paramsStr
+      //Create a cancel token for current request
+      const cancelToken = CancelToken.source()
+      $axios.activeRequests[requestKey].cancelToken = cancelToken
+      //Add the cancel token to the request
+      return {
+        ...config,
+        cancelToken: cancelToken && cancelToken.token,
+      }
+    })
+    $axios.onError((err) => {
+      //Check if error message has a requestKey set in active requests
+      if (
+        err.hasOwnProperty('message') &&
+        err.message.hasOwnProperty('requestKey') &&
+        $axios.activeRequests.hasOwnProperty(err.message.requestKey)
+      ) {
+        const currentRequest = $axios.activeRequests[err.message.requestKey]
+        //Check if error concerns a cancellation
+        if (
+          err.message &&
+          err.message.statusCode === 100 &&
+          currentRequest &&
+          currentRequest.paramsStr === err.message.paramsStr
+        ) {
+          //Handle the cancellation error
+          const debug = '<%= options.debug %>'
+          if (debug === 'true') {
+            console.warn(err.message.message)
+          }
+          //Return a promise to the active request that overrides the current one
+          return $axios.activeRequests[err.message.requestKey].promise
+        }
+      }
+      return Promise.reject(err)
+    })
+    $axios.onResponse((response) => {
+      //Check if user has set a custom requestKey
+      let { requestKey } = response.config
+      if (!requestKey) {
+        //If there is no custom requestKey, create a default requestKey based on url and parameters
+        requestKey = createRequestKey(
+          response.config.url,
+          response.config.params,
+        )
+      }
+      if ($axios.activeRequests.hasOwnProperty(requestKey)) {
+        //Inform all previously cancelled requests with the current response & remove requestKey from activeRequests
+        $axios.activeRequests[requestKey].resolve(response)
+        delete $axios.activeRequests[requestKey]
+      }
+    })
+    const onPageChange = '<%= options.onPageChange %>'
+    if (onPageChange === 'true') {
+      app.router.beforeEach((to, from, next) => {
+        for (const requestKey in $axios.activeRequests) {
+          $axios.activeRequests[requestKey].cancelToken.cancel(
+            createCancelMessage(requestKey),
+          )
+          delete $axios.activeRequests[requestKey]
+        }
+        next()
+      })
+    }
+  }
+  Vue.use(VueApiQueries, { errorProperty, $axios, parsedQs })
+  inject('errors', Validator)
 }

package.json

@@ -5,15 +5,14 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "nuxt-ts demo",
     "lint": "eslint './src/**/*.{js,ts,tsx}'",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watchAll",
     "test:watch:jsdom": "jest --watchAll --env=jsdom",
     "build": "yarn clean && tsc",
     "watch": "tsc -w",
     "start": "yarn link && nodemon",
-    "semantic-release": "semantic-release",
+    "release": "standard-version && git push --follow-tags origin main && yarn publish",
     "prepublish": "yarn test && yarn build",
     "clean": "rimraf dist",
     "prepare": "husky install"
@@ -29,11 +28,16 @@
     "rest",
     "query",
     "builder",
-    "laravel"
+    "laravel",
+    "queries",
+    "vue-api-queries",
+    "vue api queries",
+    "api request"
   ],
   "author": {
     "name": "Chantouch Sek",
-    "email": "[email protected]"
+    "email": "[email protected]",
+    "url": "https://chantouch.me"
   },
   "license": "ISC",
   "bugs": {
@@ -46,7 +50,6 @@
     "@nuxt/types": "^2.15.8",
     "@types/escape-string-regexp": "^2.0.1",
     "@types/jest": "^27.0.1",
-    "@types/lodash.merge": "^4.6.6",
     "@types/node": "^16.9.3",
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -62,12 +65,14 @@
     "husky": "^7.0.2",
     "jest": "^27.2.0",
     "nodemon": "^2.0.12",
-    "nuxt": "^2.15.8",
+    "nuxt-edge": "^2.16.0-27217455.034b9901",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
-    "semantic-release": "^18.0.0",
+    "standard-version": "^9.3.1",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "vue": "^2.6.14",
+    "vue-api-queries": "^1.1.4"
   },
   "files": [
     "dist",

src/__tests__/base-proxy.test.ts

@@ -1,7 +1,7 @@
 import Axios from 'axios'
 import BaseProxy from '../core/BaseProxy'
 import MockAdapter from 'axios-mock-adapter'
-import PostProxy from '../core/PostPorxy'
+import PostProxy from '../util/PostPorxy'
 import type { ValidatorType } from '../core/Validator'
 import Validator from '../core/Validator'
 import BaseTransformer from '../core/BaseTransformer'

src/__tests__/form-data.test.ts

@@ -1,4 +1,4 @@
-import { objectToFormData } from '../util/formData'
+import { objectToFormData } from '../util'
 
 describe('FormData', () => {
   it('if object is null, undefined or array length is zero', async () => {
@@ -11,4 +11,18 @@ describe('FormData', () => {
     expect(formData.get('items1')).toHaveLength(0)
     expect(formData.get('name')).toBe('')
   })
+  it('window is undefined', async () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    delete global.window
+    const formData = objectToFormData({
+      null: '',
+      items1: [],
+      name: null,
+      __proto__: 'Hi',
+    })
+    expect(formData.get('null')).toBe('')
+    expect(formData.get('items1')).toHaveLength(0)
+    expect(formData.get('name')).toBe('')
+  })
 })

src/__tests__/object.test.ts

@@ -1,4 +1,10 @@
-import { isFile, cloneDeep } from '../util/objects'
+import {
+  isFile,
+  cloneDeep,
+  hasOwnProperty,
+  merge,
+  isPlainObject,
+} from '../util'
 
 describe('Object Test', () => {
   // const { window, File } = global
@@ -35,4 +41,36 @@ describe('cloneDeep', () => {
     const obj = [{ name: 'Chantouch' }]
     expect(cloneDeep(obj)).toBeInstanceOf(Object)
   })
+  it('Has own property undefined', () => {
+    const obj = [{ name: 'Chantouch' }]
+    expect(hasOwnProperty(obj, undefined)).toBeFalsy()
+  })
+  it('Merge object into object', () => {
+    const obj1 = { name: 'Chantouch' }
+    const obj2 = { email: '[email protected]' }
+    const merged = { email: '[email protected]', name: 'Chantouch' }
+    expect(merge(obj1, obj2)).toEqual(merged)
+  })
+  it('should return `true` if the object is created by the `Object` constructor.', () => {
+    expect(isPlainObject(Object.create({}))).toBeTruthy()
+    expect(isPlainObject(Object.create(Object.prototype))).toBeTruthy()
+    expect(isPlainObject({ foo: 'bar' })).toBeTruthy()
+    expect(isPlainObject({})).toBeTruthy()
+    expect(isPlainObject(Object.create(null))).toBeTruthy()
+  })
+  it('should return `false` if the object is not created by the `Object` constructor.', () => {
+    function Foo(this: any) {
+      this.abc = {}
+    }
+    expect(isPlainObject(/foo/)).toBeFalsy()
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    expect(isPlainObject(function () {})).toBeFalsy()
+    expect(isPlainObject(1)).toBeFalsy()
+    expect(isPlainObject(['foo', 'bar'])).toBeFalsy()
+    expect(isPlainObject([])).toBeFalsy()
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(isPlainObject(new Foo())).toBeFalsy()
+    expect(isPlainObject(null)).toBeFalsy()
+  })
 })