vue-context-storage 0.1.9 → 0.1.11

package/src/handlers/query/index.ts

@@ -1,355 +0,0 @@
-import { ContextStorageHandlerConstructor } from '../../handlers.ts'
-import { deserializeParams, serializeParams } from './helpers.ts'
-import { contextStorageQueryHandler } from '../../symbols.ts'
-import { cloneDeep, isEqual, merge, pick } from 'lodash'
-import { getCurrentInstance, inject, MaybeRefOrGetter, onBeforeUnmount, toValue, watch } from 'vue'
-import { LocationQuery, useRoute, useRouter } from 'vue-router'
-import {
-  ContextStorageQueryRegisteredItem,
-  IContextStorageQueryHandler,
-  QueryHandlerBaseOptions,
-  RegisterQueryHandlerBaseOptions,
-  RegisterQueryHandlerOptions,
-} from './types.ts'
-
-export function useContextStorageQueryHandler<T extends Record<string, unknown>>(
-  data: MaybeRefOrGetter<T>,
-  options?: RegisterQueryHandlerBaseOptions<T>,
-): void {
-  const handler = inject<InstanceType<typeof ContextStorageQueryHandler>>(
-    contextStorageQueryHandler,
-  )
-
-  if (!handler) {
-    throw new Error('[ContextStorage] ContextStorageQueryHandler is not provided')
-  }
-
-  const currentInstance = getCurrentInstance()
-  const uid = currentInstance?.uid || 0
-
-  const causer = new Error().stack?.split('\n')[2]?.trimStart() || 'unknown'
-
-  const stop = handler.register(data, { causer, uid, ...options })
-  onBeforeUnmount(() => {
-    stop()
-  })
-}
-
-function sortQueryByReference(query: LocationQuery, ...references: LocationQuery[]): LocationQuery {
-  const sorted: LocationQuery = {}
-
-  const referenceKeys = new Set<string>()
-
-  references.forEach((reference) => {
-    Object.keys(reference).forEach((key) => {
-      referenceKeys.add(key)
-    })
-  })
-
-  referenceKeys.forEach((key) => {
-    if (key in query && !(key in sorted)) {
-      sorted[key] = query[key]
-    }
-  })
-
-  Object.keys(query).forEach((key) => {
-    if (!(key in sorted)) {
-      sorted[key] = query[key]
-    }
-  })
-
-  return sorted
-}
-
-export class ContextStorageQueryHandler implements IContextStorageQueryHandler {
-  private enabled = false
-  private registered: ContextStorageQueryRegisteredItem<any>[] = []
-  private currentQuery: LocationQuery | undefined = undefined
-  private readonly route: ReturnType<typeof useRoute>
-  private router: ReturnType<typeof useRouter>
-  private initialState?: Record<string, unknown>
-  private hasAnyRegistered = false
-  private preventSyncRegisteredToQueryByAfterEachRoute = false
-  private preventAfterEachRouteCallsWhileCallingRouter = false
-
-  static customQueryHandlerOptions: QueryHandlerBaseOptions = {}
-
-  private readonly options: Required<QueryHandlerBaseOptions> = {
-    mode: 'replace',
-    emptyPlaceholder: '_',
-    mergeOnlyExistingKeysWithoutTransform: true,
-    preserveUnusedKeys: false,
-    preserveEmptyState: false,
-  }
-
-  // noinspection JSUnusedGlobalSymbols
-  static configure(options: QueryHandlerBaseOptions): ContextStorageHandlerConstructor {
-    ContextStorageQueryHandler.customQueryHandlerOptions = options
-
-    return ContextStorageQueryHandler
-  }
-
-  constructor() {
-    this.route = useRoute()
-    this.router = useRouter()
-
-    this.options = {
-      ...this.options,
-      ...ContextStorageQueryHandler.customQueryHandlerOptions,
-    }
-
-    const stopAfterEach = this.router.afterEach(() => {
-      this.afterEachRoute()
-    })
-
-    onBeforeUnmount(() => {
-      stopAfterEach()
-    })
-  }
-
-  getInjectionKey(): typeof contextStorageQueryHandler {
-    return contextStorageQueryHandler
-  }
-
-  setInitialState(state: Record<string, unknown> | undefined): void {
-    this.initialState = state
-  }
-
-  static getInitialStateResolver(): () => LocationQuery {
-    const route = useRoute()
-
-    return () => route.query
-  }
-
-  setEnabled(state: boolean, initial: boolean): void {
-    const prevState = this.enabled
-    this.enabled = state
-
-    if (this.hasAnyRegistered) {
-      if (initial) {
-        this.syncInitialStateToRegistered()
-      }
-
-      if ((state && !prevState) || !initial) {
-        this.syncRegisteredToQuery()
-      }
-    }
-  }
-
-  async syncRegisteredToQuery(): Promise<void> {
-    if (!this.enabled) {
-      return
-    }
-
-    if (this.preventSyncRegisteredToQueryByAfterEachRoute) {
-      return
-    }
-
-    const { newQuery, newQueryRaw } = this.#buildQueryFromRegistered()
-
-    this.currentQuery = newQueryRaw
-
-    if (isEqual(newQuery, this.route.query)) {
-      return
-    }
-
-    this.preventAfterEachRouteCallsWhileCallingRouter = true
-    try {
-      if (this.options.mode === 'replace') {
-        await this.router.replace({ ...this.route, query: newQuery })
-      } else {
-        await this.router.push({ ...this.route, query: newQuery })
-      }
-    } catch (e) {
-      console.error('[ContextStorage] Got error while routing', e)
-    }
-    this.preventAfterEachRouteCallsWhileCallingRouter = false
-  }
-
-  afterEachRoute(): void {
-    if (!this.enabled) {
-      return
-    }
-
-    if (this.preventAfterEachRouteCallsWhileCallingRouter) {
-      return
-    }
-
-    this.setInitialState(this.route.query)
-
-    this.preventSyncRegisteredToQueryByAfterEachRoute = true
-    queueMicrotask(() => {
-      this.preventSyncRegisteredToQueryByAfterEachRoute = false
-
-      this.syncInitialStateToRegistered()
-      this.syncRegisteredToQuery()
-    })
-
-    setTimeout(() => {
-      this.syncInitialStateToRegistered()
-      this.syncRegisteredToQuery()
-    })
-  }
-
-  syncInitialStateToRegisteredItem<T extends Record<string, unknown>>(
-    item: ContextStorageQueryRegisteredItem<T>,
-  ): void {
-    if (this.initialState === undefined) {
-      return
-    }
-
-    let deserialized = deserializeParams(this.initialState)
-
-    const {
-      prefix,
-      mergeOnlyExistingKeysWithoutTransform = this.options.mergeOnlyExistingKeysWithoutTransform,
-    } = item.options || {}
-
-    if (typeof prefix === 'string' && prefix.length > 0) {
-      deserialized = deserialized[prefix]
-    }
-
-    if (deserialized === undefined) {
-      return
-    }
-
-    const itemData = toValue(item.data)
-
-    /**
-     * null can be if query parameter only has a name without a value sign
-     */
-    if (deserialized !== null) {
-      const deserializedKeys = Object.keys(deserialized)
-
-      /**
-       * If the data is empty, return the initial value.
-       *
-       * This can happen when directly navigating to a route, for example through a menu item.
-       */
-      if (!deserializedKeys.length) {
-        merge(itemData, item.initialData)
-        return
-      }
-
-      if (deserializedKeys.length === 1 && deserialized[this.options.emptyPlaceholder] === null) {
-        delete deserialized[this.options.emptyPlaceholder]
-      }
-    }
-
-    if (item.options?.transform) {
-      deserialized = item.options.transform(deserialized, item.initialData)
-    } else {
-      if (mergeOnlyExistingKeysWithoutTransform) {
-        deserialized = pick(deserialized, Object.keys(item.initialData))
-      }
-    }
-
-    if (isEqual(itemData, deserialized)) {
-      return
-    }
-
-    merge(itemData, deserialized)
-  }
-
-  syncInitialStateToRegistered(): void {
-    this.registered.forEach((item) => this.syncInitialStateToRegisteredItem(item))
-  }
-
-  register<T extends Record<string, unknown>>(
-    data: MaybeRefOrGetter<T>,
-    options: RegisterQueryHandlerOptions<T>,
-  ): () => void {
-    this.hasAnyRegistered = true
-
-    const watchHandle = watch(data, () => this.syncRegisteredToQuery(), {
-      deep: true,
-    })
-
-    const item: ContextStorageQueryRegisteredItem<T> = {
-      data,
-      initialData: cloneDeep(toValue(data)) as T,
-      options,
-      watchHandle,
-    }
-    this.registered.push(item)
-
-    const syncCallback = (): void => {
-      this.syncInitialStateToRegisteredItem(item)
-      this.syncRegisteredToQuery()
-    }
-
-    if (this.preventAfterEachRouteCallsWhileCallingRouter) {
-      /**
-       * Macrotask solves syncing issues when syncRegisteredToQuery called after HMR
-       */
-      setTimeout(syncCallback)
-    } else {
-      queueMicrotask(syncCallback)
-    }
-
-    return (): void => {
-      this.registered.splice(this.registered.indexOf(item), 1)
-      this.syncRegisteredToQuery()
-    }
-  }
-
-  #buildQueryFromRegistered(): { newQuery: LocationQuery; newQueryRaw: LocationQuery } {
-    const newQueryRaw: LocationQuery = {}
-
-    this.registered.forEach((item) => {
-      const { prefix, preserveEmptyState = this.options.preserveEmptyState } = item.options || {}
-      const patch = serializeParams(toValue(item.data), {
-        prefix,
-      })
-
-      const patchKeys = Object.keys(patch)
-
-      // If there are key intersections between the query and the patch, a warning is issued.
-      // Patches should not overwrite each other, otherwise, upon reload, an incorrect value will be restored.
-      patchKeys.forEach((key) => {
-        if (newQueryRaw.hasOwnProperty(key)) {
-          console.warn(
-            `[ContextStorage] Key ${key} is already present, overriding ` +
-              (item.options?.causer || ''),
-          )
-        }
-      })
-
-      if (!patchKeys.length && preserveEmptyState) {
-        patch[prefix || this.options.emptyPlaceholder] = null
-      }
-
-      Object.assign(newQueryRaw, patch)
-    })
-
-    let newQuery = { ...newQueryRaw }
-
-    /*
-     * It will not delete from the query the keys that are not used in the patch.
-     *
-     * It will only work if the registered item has a transform, otherwise without
-     * it - all keys are dumped into item.data during the initial fill from initialState
-     */
-    if (this.options.preserveUnusedKeys) {
-      newQuery = { ...this.route.query, ...newQuery }
-    }
-
-    if (this.currentQuery !== undefined) {
-      //Perform a diff of keys between currentQuery and newQueryRaw, and remove the keys that are in currentQuery but not in newQueryRaw.
-      //This is necessary to ensure that the query string does not contain keys that are no longer used.
-      Object.keys(this.currentQuery).forEach((key) => {
-        if (!newQueryRaw.hasOwnProperty(key)) {
-          delete newQuery[key]
-        }
-      })
-    }
-
-    if (Object.keys(newQuery).length > 1 && newQuery[this.options.emptyPlaceholder] === null) {
-      delete newQuery[this.options.emptyPlaceholder]
-    }
-
-    newQuery = sortQueryByReference(newQuery, newQueryRaw)
-
-    return { newQuery, newQueryRaw }
-  }
-}

package/src/handlers/query/transform-helpers.ts

@@ -1,309 +0,0 @@
-import { QueryValue } from './types.ts'
-
-interface AsNumberOptions {
-  nullable?: boolean
-  missable?: boolean
-  fallbackValue?: number
-}
-
-export function asNumber(value: QueryValue | number | undefined): number
-export function asNumber(
-  value: QueryValue | number | undefined,
-  options: { nullable: true; missable: true; fallbackValue?: number },
-): number | null | undefined
-export function asNumber(
-  value: QueryValue | number | undefined,
-  options: { nullable: true; missable?: false; fallbackValue?: number },
-): number | null
-export function asNumber(
-  value: QueryValue | number | undefined,
-  options: { nullable?: false; missable: true; fallbackValue?: number },
-): number | undefined
-export function asNumber(
-  value: QueryValue | number | undefined,
-  options: { nullable?: false; missable?: false; fallbackValue?: number },
-): number
-export function asNumber(
-  value: QueryValue | number | undefined,
-  options?: AsNumberOptions,
-): number | null | undefined {
-  const {
-    nullable = false,
-    missable = false,
-    fallbackValue = missable ? undefined : nullable ? null : 0,
-  } = options || {}
-
-  if (value === null && nullable) {
-    return null
-  }
-
-  if (value === undefined && missable) {
-    return undefined
-  }
-
-  value = Number(value)
-
-  return isNaN(value) ? fallbackValue : value
-}
-
-interface AsStringOptions<T extends readonly string[] = string[]> {
-  nullable?: boolean
-  missable?: boolean
-  fallbackValue?: T extends readonly string[] ? T[number] : string
-  allowedValues?: T
-}
-
-export function asString(value: QueryValue | undefined): string
-export function asString<T extends readonly string[]>(
-  value: QueryValue | undefined,
-  options: {
-    nullable: true
-    missable: true
-    fallbackValue?: T[number]
-    allowedValues: T
-  },
-): T[number] | null | undefined
-export function asString<T extends readonly string[]>(
-  value: QueryValue | undefined,
-  options: {
-    nullable: true
-    missable?: false
-    fallbackValue?: T[number]
-    allowedValues: T
-  },
-): T[number] | null
-export function asString<T extends readonly string[]>(
-  value: QueryValue | undefined,
-  options: {
-    nullable?: false
-    missable: true
-    fallbackValue?: T[number]
-    allowedValues: T
-  },
-): T[number] | undefined
-export function asString<T extends readonly string[]>(
-  value: QueryValue | undefined,
-  options: {
-    nullable?: false
-    missable?: false
-    fallbackValue?: T[number]
-    allowedValues: T
-  },
-): T[number]
-export function asString(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable: true; fallbackValue?: string },
-): string | null | undefined
-export function asString(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable?: false; fallbackValue?: string },
-): string | null
-export function asString(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable: true; fallbackValue?: string },
-): string | undefined
-export function asString(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable?: false; fallbackValue?: string },
-): string
-export function asString(
-  value: QueryValue | undefined,
-  options?: AsStringOptions,
-): QueryValue | undefined {
-  const {
-    nullable = false,
-    missable = false,
-    fallbackValue = missable ? undefined : nullable ? null : '',
-    allowedValues,
-  } = options || {}
-
-  if (value === null && nullable) {
-    return null
-  }
-
-  if (value === undefined && missable) {
-    return undefined
-  }
-
-  const stringValue = value ?? fallbackValue
-
-  if (allowedValues && typeof stringValue === 'string' && !allowedValues.includes(stringValue)) {
-    return fallbackValue
-  }
-
-  return stringValue
-}
-
-interface AsNumberArrayOptions {
-  nullable?: boolean
-}
-
-export function asNumberArray(value: QueryValue | undefined): number[]
-export function asNumberArray(
-  value: QueryValue | undefined,
-  options: { nullable: true },
-): number[] | null
-export function asNumberArray(
-  value: QueryValue | undefined,
-  options: { nullable?: false },
-): number[]
-export function asNumberArray(
-  value: QueryValue | undefined,
-  options?: AsNumberArrayOptions,
-): number[] | null {
-  const { nullable = false } = options || {}
-
-  if (value === null && nullable) {
-    return null
-  }
-
-  if (value === undefined) {
-    return nullable ? null : []
-  }
-
-  let arrayValue: (string | null)[]
-
-  if (Array.isArray(value)) {
-    arrayValue = value
-  } else if (typeof value === 'string') {
-    arrayValue = [value]
-  } else {
-    arrayValue = []
-  }
-
-  return arrayValue.map((item) => {
-    if (item === null) {
-      return 0
-    }
-    const num = Number(item)
-    return isNaN(num) ? 0 : num
-  })
-}
-
-interface AsArrayOptions<T> {
-  nullable?: boolean
-  missable?: boolean
-  transform?: (value: QueryValue) => T
-}
-
-export function asArray<T>(value: QueryValue | undefined): T[]
-export function asArray<T>(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable: true; transform?: (value: QueryValue) => T },
-): T[] | null | undefined
-export function asArray<T>(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable?: false; transform?: (value: QueryValue) => T },
-): T[] | null
-export function asArray<T>(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable: true; transform?: (value: QueryValue) => T },
-): T[] | undefined
-export function asArray<T>(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable?: false; transform?: (value: QueryValue) => T },
-): T[]
-export function asArray<T>(
-  value: QueryValue | undefined,
-  options?: AsArrayOptions<T>,
-): T[] | null | undefined {
-  const { nullable = false, missable = false, transform } = options || {}
-
-  if (value === null && nullable) {
-    return null
-  }
-
-  if (value === undefined && missable) {
-    return undefined
-  }
-
-  if (value === undefined) {
-    return nullable ? null : []
-  }
-
-  let arrayValue: QueryValue[]
-
-  if (Array.isArray(value)) {
-    arrayValue = value
-  } else {
-    arrayValue = [value]
-  }
-
-  if (transform) {
-    return arrayValue.map((item) => transform(item))
-  }
-
-  return arrayValue as T[]
-}
-
-interface AsBooleanOptions {
-  nullable?: boolean
-  missable?: boolean
-  fallbackValue?: boolean
-}
-
-export function asBoolean(value: QueryValue | undefined): boolean
-export function asBoolean(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable: true; fallbackValue?: boolean },
-): boolean | null | undefined
-export function asBoolean(
-  value: QueryValue | undefined,
-  options: { nullable: true; missable?: false; fallbackValue?: boolean },
-): boolean | null
-export function asBoolean(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable: true; fallbackValue?: boolean },
-): boolean | undefined
-export function asBoolean(
-  value: QueryValue | undefined,
-  options: { nullable?: false; missable?: false; fallbackValue?: boolean },
-): boolean
-export function asBoolean(
-  value: QueryValue | undefined,
-  options?: AsBooleanOptions,
-): boolean | null | undefined {
-  const {
-    nullable = false,
-    missable = false,
-    fallbackValue = missable ? undefined : nullable ? null : false,
-  } = options || {}
-
-  if (value === null && nullable) {
-    return null
-  }
-
-  if (value === undefined && missable) {
-    return undefined
-  }
-
-  if (value === undefined || value === null) {
-    return fallbackValue
-  }
-
-  if (typeof value === 'string') {
-    const lowerValue = value.toLowerCase()
-    if (lowerValue === 'true' || lowerValue === '1') {
-      return true
-    }
-    if (lowerValue === 'false' || lowerValue === '0') {
-      return false
-    }
-  }
-
-  return fallbackValue
-}
-
-export const transform: {
-  asString: typeof asString
-  asNumber: typeof asNumber
-  asArray: typeof asArray
-  asNumberArray: typeof asNumberArray
-  asBoolean: typeof asBoolean
-} = {
-  asString,
-  asNumber,
-  asArray,
-  asNumberArray,
-  asBoolean,
-}