feat: created query package

Author: jsbroks

README.md

@@ -27,16 +27,18 @@
 - **Zero-config** server-side rendering capability.
 - **Self-contained** with no dependencies.
 - **Backed by a team** using VueHooks in production.
-- **Additional addons** such as vue-router, timeago, etc.
+- **Additional addons** such as vue-router, timeago, query, etc.
 
 <br />
 
 ## :earth_americas: Ecosystem
 
 <!-- omit in toc -->
 
-- [@vuehooks/core](#vuehookscore)
-- [@vuehooks/router](#vuehooksrouter)
+- [@vuehooks/core](#vuehookscore) - Collection of common hooks.
+- [@vuehooks/query](#vuehooksquery) - Hooks for fetching, caching and updating
+  asynchronous data.
+- [@vuehooks/router](#vuehooksrouter) - Hooks for make using VueRouter easier.
 
 <br />
 

package.json

@@ -8,11 +8,11 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch --coverage",
-    "build": "lerna run build --npm-client=yarn",
+    "build": "yarn clean && lerna run build --npm-client=yarn",
     "bootstrap": "lerna bootstrap --npm-client=yarn",
-    "clean": "rimraf packages/**/dist packages/**/*.tsbuildinfo",
+    "clean": "rimraf packages/**/dist packages/**/*.tsbuildinfo packages/**/node_modules",
     "update": "yarn upgrade-interactive --latest",
-    "release": "yarn clean && yarn build && lerna publish"
+    "release": "yarn build && lerna publish"
   },
   "dependencies": {},
   "peerDependencies": {

packages/core/src/index.ts

@@ -7,3 +7,5 @@ export { useTimeout } from './useTimeout'
 export { useTimeoutFn } from './useTimeoutFn'
 export { useLongPress } from './useLongPress'
 export { useBus } from './useBus'
+
+export { Emitter } from './utils/emitter'

packages/core/src/useHover.ts

@@ -1,12 +1,12 @@
 import { Ref } from '@vue/composition-api'
-import { useEventListenerElement } from './useEventListenerElement'
-import useToggle from './useToggle'
+import { useEvent } from './useEvent'
+import { useToggle } from './useToggle'
 
 export function useHover(target: Ref<HTMLElement | null>) {
   const { on: hovering, set } = useToggle(false)
 
-  useEventListenerElement(target, 'mouseenter', () => set(true))
-  useEventListenerElement(target, 'mouseleave', () => set(false))
+  useEvent(target, 'mouseenter', () => set(true))
+  useEvent(target, 'mouseleave', () => set(false))
 
   return hovering
 }

packages/core/src/useMouse.ts

@@ -1,5 +1,5 @@
 import { ref } from '@vue/composition-api'
-import { useEventListener } from './useEventListener'
+// import { useEvent } from './useEvent'
 
 interface Options {
   initial?: { x: number; y: number }
@@ -26,14 +26,14 @@ export function useMouse({ initial = { x: 0, y: 0 } }: Options = {}) {
   const x = ref(initial.x)
   const y = ref(initial.y)
 
-  const set = (event: TouchEvent | MouseEvent) => {
-    const [newX, newY] = getXY(event)
-    x.value = newX
-    y.value = newY
-  }
+  // const set = (event: TouchEvent | MouseEvent) => {
+  //   const [newX, newY] = getXY(event)
+  //   x.value = newX
+  //   y.value = newY
+  // }
 
-  useEventListener('mousemove', set)
-  useEventListener('touchmove', set)
+  // useEvent('mousemove', set)
+  // useEvent('touchmove', set)
 
   return { x, y }
 }

packages/core/src/useMouseElement.ts

@@ -1,5 +1,5 @@
 import { Ref, ref } from '@vue/composition-api'
-import { useEventListenerElement } from './useEventListenerElement'
+import { useEvent } from './useEvent'
 import { getXY } from './useMouse'
 
 export function useMouseInElement(target: Ref<HTMLElement | null>) {
@@ -29,8 +29,8 @@ export function useMouseInElement(target: Ref<HTMLElement | null>) {
     elementWidth.value = width
   }
 
-  useEventListenerElement(target, 'mousemove', move)
-  useEventListenerElement(target, 'touchmove', move)
+  useEvent(target, 'mousemove', move)
+  useEvent(target, 'touchmove', move)
 
   return {
     x,

packages/query/README.md

@@ -0,0 +1,23 @@
+<h1 align="center">
+  VueHooks Query
+</h1>
+<h4 align="center">Collection of utility composition functions for Vue</h4>
+
+Hooks for fetching, caching and updating asynchronous data in Vue
+
+<p align="center">
+<a href="https://www.npmjs.com/package/@vuehooks/query" target="__blank">
+<img src="https://img.shields.io/npm/v/@vuehooks/query?color=1abc9c" alt="NPM version" /></a>
+<a href="https://www.npmjs.com/package/@vuehooks/query" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vuehooks/query?color=34495e"/></a>
+
+## `@vuehooks/query`
+
+## :rocket: Features
+
+- **Agnostic** data fetching (GraphQL, RESt, promises, whatever!).
+- **Auto caching** and updating across components.
+
+## :fire: Functions
+
+- `useQuery` - Resolves asynchronous data using advanced features.
+- `useQueryCache` - Returns the active in-memory cache.

packages/query/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@vuehooks/query",
+  "version": "0.0.5",
+  "description": "Hooks for fetching, caching and updating asynchronous data in Vue",
+  "keywords": [
+    "vue3"
+  ],
+  "author": "Justin Brooks <[email protected]>",
+  "homepage": "https://github.com/jsbroks/vuehooks#readme",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.yarnpkg.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jsbroks/vuehooks.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/jsbroks/vuehooks/issues"
+  },
+  "dependencies": {
+    "@vuehooks/core": "^0.0.5"
+  }
+}

packages/query/src/__test__/queryKeySerlization.spec.ts

@@ -0,0 +1,42 @@
+import { defaultQueryKeySerializerFn } from '../queryKey'
+
+describe('defaultQuerySerializationFunction', () => {
+  it('serializes booleans', () => {
+    const [aHash, a] = defaultQueryKeySerializerFn(true)
+    const [bHash, b] = defaultQueryKeySerializerFn(false)
+
+    expect(a).toEqual([true])
+    expect(b).toEqual([false])
+    expect(aHash).toEqual('[true]')
+    expect(bHash).not.toEqual([false])
+    expect(bHash).toEqual('[false]')
+  })
+
+  test.each([
+    ['boolean', true],
+    ['number', 0],
+    ['string', 'test']
+  ])('serializes single %s array to match primitives', (_, input) => {
+    const [aHash, a] = defaultQueryKeySerializerFn(input)
+    const [bHash, b] = defaultQueryKeySerializerFn([input])
+
+    expect(a).toEqual(b)
+    expect(aHash).toEqual(bHash)
+  })
+
+  it('serializes nested objects', () => {
+    const a = { a: 'hello', b: 20, c: { d: true, g: [{}, false] } }
+    const b = { b: 20, c: { g: [{}, false], d: true }, a: 'hello' }
+
+    const [aHash, aKey] = defaultQueryKeySerializerFn(a)
+    const [bHash, bKey] = defaultQueryKeySerializerFn(b)
+
+    expect(aHash).toEqual(bHash)
+    expect(aKey).toEqual(bKey)
+  })
+
+  it('does not accept functions', () => {
+    const fn = () => defaultQueryKeySerializerFn(() => {})
+    expect(fn).toThrowError()
+  })
+})

packages/query/src/__test__/useQuery.spec.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '../'
+
+describe('useQuery', () => {
+  const fetch = () =>
+    Promise.resolve({
+      idk: [{ id: 1 }, { id: 2 }]
+    })
+
+  it('', async () => {
+    const { data } = useQuery('fetch', fetch)
+    expect(data).toBe(await fetch())
+  })
+})

packages/query/src/getQuery.ts

@@ -0,0 +1,33 @@
+import { isObject } from './utils'
+import { QueryConfig, QueryFunction } from './query'
+import { QueryKey } from './queryKey'
+
+export function getQueryArgs<TResult, TError, TOptions = undefined>(
+  args: any[]
+): [QueryKey, QueryConfig<TResult, TError>, TOptions] {
+  let queryKey: QueryKey
+  let queryFn: QueryFunction<TResult> | undefined
+  let config: QueryConfig<TResult, TError> | undefined
+  let options: TOptions
+
+  if (isObject(args[0])) {
+    queryKey = args[0].queryKey
+    queryFn = args[0].queryFn
+    config = args[0].config
+    options = args[1]
+  } else if (isObject(args[1])) {
+    queryKey = args[0]
+    config = args[1]
+    options = args[2]
+  } else {
+    queryKey = args[0]
+    queryFn = args[1]
+    config = args[2]
+    options = args[3]
+  }
+
+  config = config ?? {}
+  if (queryFn) config = { ...config, queryFn }
+
+  return [queryKey, config, options]
+}

packages/query/src/getQueryCache.ts

@@ -0,0 +1,5 @@
+import { defaultCache } from './queryCache'
+
+export function getQueryCache() {
+  return defaultCache
+}

packages/query/src/index.ts

@@ -0,0 +1,2 @@
+export { useQuery } from './useQuery'
+export { getQueryCache } from './getQueryCache'

packages/query/src/query.ts

@@ -0,0 +1,107 @@
+import { deepEqual } from './utils/equals'
+import { QueryKeyArray } from './queryKey'
+import { createEmitter, Emitter } from '@vuehooks/core'
+
+export enum QueryStatus {
+  Idle = 'idle',
+  Loading = 'loading',
+  Error = 'error',
+  Success = 'success'
+}
+
+export type QueryFunction<TResult> = (
+  ...args: any[]
+) => TResult | Promise<TResult>
+
+export type RetryFunction<TError> = (
+  failureCount: number,
+  error: TError
+) => boolean
+
+/**
+ * Query Configs
+ */
+export interface BaseQueryConfig<TResult, TError = unknown> {
+  queryFn?: QueryFunction<TResult>
+  isDataEqual?: (newData: unknown, oldData: unknown) => boolean
+  retry?: boolean | number | RetryFunction<TError>
+}
+
+export interface QueryConfig<TResult, TError = unknown>
+  extends BaseQueryConfig<TResult, TError> {}
+
+export interface QueryInitConfig<TResult, TError = unknown> {
+  queryKey: QueryKeyArray
+  queryHash: string
+  config: QueryConfig<TResult, TError>
+}
+
+export interface QueryState<TResult, TError = unknown> {
+  data: TResult | undefined
+  status: QueryStatus
+  error?: TError
+}
+
+export type SubscriptionHandler<TResult, TError> = (
+  status: QueryState<TResult, TError>
+) => void
+
+export class Query<TResult, TError> {
+  readonly queryKey: QueryKeyArray
+  readonly queryHash: string
+  readonly config: QueryConfig<TResult, TError>
+
+  state: QueryState<TResult, TError>
+
+  private emitter: Emitter
+  private promise?: Promise<TResult | undefined>
+
+  constructor(init: QueryInitConfig<TResult, TError>) {
+    this.config = { isDataEqual: deepEqual, ...init.config }
+    this.queryKey = init.queryKey
+    this.queryHash = init.queryHash
+    this.emitter = createEmitter()
+
+    // Default state
+    this.state = { data: undefined, status: QueryStatus.Idle }
+  }
+
+  async fetch(): Promise<TResult | undefined> {
+    let queryFn = this.config.queryFn
+
+    if (!queryFn) return
+    if (this.promise) return this.promise
+
+    this.promise = (async () => {
+      try {
+        this.dispatch({ status: QueryStatus.Loading })
+        const data = await queryFn!()
+
+        if (!this.config.isDataEqual!(this.state.data, data))
+          this.dispatch({ status: QueryStatus.Success, data })
+        delete this.promise
+
+        return data
+      } catch (error) {
+        this.dispatch({ status: QueryStatus.Error })
+        delete this.promise
+        throw error
+      }
+    })()
+
+    return this.promise
+  }
+
+  private dispatch(state: Partial<QueryState<TResult, TError>>) {
+    this.state = { ...this.state, ...state }
+    this.emitter.emit('*', { state: this.state })
+  }
+
+  subscribe(handler: SubscriptionHandler<TResult, TError>) {
+    this.emitter.on('*', handler)
+  }
+
+  unsubscribe(handler: SubscriptionHandler<TResult, TError>) {
+    this.emitter.off('*', handler)
+  }
+}