@v-c/util 0.0.1

package/src/props-util/index.ts

@@ -0,0 +1,22 @@
+import { Fragment } from 'vue'
+
+export function isEmptyElement(c: any) {
+  return (
+    c
+    && (c.type === Comment
+    || (c.type === Fragment && c.children.length === 0)
+    || (c.type === Text && c.children.trim() === ''))
+  )
+}
+export function filterEmpty(children: any[] = []) {
+  const res: any[] = []
+  children.forEach((child: any) => {
+    if (Array.isArray(child))
+      res.push(...child)
+    else if (child?.type === Fragment)
+      res.push(...filterEmpty(child.children))
+    else
+      res.push(child)
+  })
+  return res.filter(c => !isEmptyElement(c))
+}

package/src/raf.ts

@@ -0,0 +1,55 @@
+let raf = (callback: FrameRequestCallback) => +setTimeout(callback, 16)
+let caf = (num: number) => clearTimeout(num)
+
+if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+  raf = (callback: FrameRequestCallback) =>
+    window.requestAnimationFrame(callback)
+  caf = (handle: number) => window.cancelAnimationFrame(handle)
+}
+
+let rafUUID = 0
+
+const rafIds = new Map<number, number>()
+
+function cleanup(id: number) {
+  rafIds.delete(id)
+}
+
+function wrapperRaf(callback: () => void, times = 1): number {
+  rafUUID += 1
+  const id = rafUUID
+
+  function callRef(leftTimes: number) {
+    if (leftTimes === 0) {
+      // Clean up
+      cleanup(id)
+
+      // Trigger
+      callback()
+    }
+    else {
+      // Next raf
+      const realId = raf(() => {
+        callRef(leftTimes - 1)
+      })
+
+      // Bind real raf id
+      rafIds.set(id, realId)
+    }
+  }
+
+  callRef(times)
+
+  return id
+}
+
+wrapperRaf.cancel = (id: number) => {
+  const realId = rafIds.get(id)
+  cleanup(id)
+  return caf(realId!)
+}
+
+if (process.env.NODE_ENV !== 'production')
+  wrapperRaf.ids = () => rafIds
+
+export default wrapperRaf

package/src/setStyle.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'vue'
+
+export interface SetStyleOptions {
+  element?: HTMLElement
+}
+
+/**
+ * Easy to set element style, return previous style
+ * IE browser compatible(IE browser doesn't merge overflow style, need to set it separately)
+ * https://github.com/ant-design/ant-design/issues/19393
+ *
+ */
+
+function setStyle(
+  style: CSSProperties,
+  options: SetStyleOptions = {},
+): CSSProperties {
+  if (!style)
+    return {}
+
+  const { element = document.body } = options
+  const oldStyle: CSSProperties = {}
+
+  const styleKeys = Object.keys(style)
+
+  // IE browser compatible
+  styleKeys.forEach((key: any) => {
+    oldStyle[key] = element.style[key]
+  })
+
+  styleKeys.forEach((key: any) => {
+    (element as any).style[key] = style[key]
+  })
+
+  return oldStyle
+}
+
+export default setStyle

package/src/switchScrollingEffect.ts

@@ -0,0 +1,48 @@
+import getScrollBarSize from './getScrollBarSize'
+import setStyle from './setStyle'
+
+function isBodyOverflowing() {
+  return (
+    document.body.scrollHeight
+    > (window.innerHeight || document.documentElement.clientHeight)
+    && window.innerWidth > document.body.offsetWidth
+  )
+}
+
+let cacheStyle = {}
+
+export default (close: any) => {
+  if (!isBodyOverflowing() && !close)
+    return
+
+  // https://github.com/ant-design/ant-design/issues/19729
+  const scrollingEffectClassName = 'ant-scrolling-effect'
+  const scrollingEffectClassNameReg = new RegExp(
+    `${scrollingEffectClassName}`,
+    'g',
+  )
+  const bodyClassName = document.body.className
+
+  if (close) {
+    if (!scrollingEffectClassNameReg.test(bodyClassName))
+      return
+    setStyle(cacheStyle)
+    cacheStyle = {}
+    document.body.className = bodyClassName
+      .replace(scrollingEffectClassNameReg, '')
+      .trim()
+    return
+  }
+
+  const scrollBarSize = getScrollBarSize()
+  if (scrollBarSize) {
+    cacheStyle = setStyle({
+      position: 'relative',
+      width: `calc(100% - ${scrollBarSize}px)`,
+    })
+    if (!scrollingEffectClassNameReg.test(bodyClassName)) {
+      const addClassName = `${bodyClassName} ${scrollingEffectClassName}`
+      document.body.className = addClassName.trim()
+    }
+  }
+}

package/src/test/domHook.ts

@@ -0,0 +1,67 @@
+const NO_EXIST = { __NOT_EXIST: true }
+
+// eslint-disable-next-line ts/no-unsafe-function-type
+export type ElementClass = Function
+// eslint-disable-next-line ts/no-unsafe-function-type
+export type Property = PropertyDescriptor | Function
+
+export function spyElementPrototypes<T extends ElementClass>(
+  elementClass: T,
+  properties: Record<string, Property>,
+) {
+  const propNames = Object.keys(properties)
+  const originDescriptors: any = {}
+
+  propNames.forEach((propName) => {
+    const originDescriptor: any = Object.getOwnPropertyDescriptor(elementClass.prototype, propName)
+    originDescriptors[propName] = originDescriptor || NO_EXIST
+
+    const spyProp: any = properties[propName]
+
+    if (typeof spyProp === 'function') {
+      // If is a function
+      elementClass.prototype[propName] = function spyFunc(...args: any[]) {
+        return spyProp.call(this, originDescriptor, ...args)
+      }
+    }
+    else {
+      // Otherwise tread as a property
+      Object.defineProperty(elementClass.prototype, propName, {
+        ...spyProp,
+        set(value) {
+          if (spyProp.set)
+            return (spyProp as any).set.call(this, originDescriptor, value)
+
+          return originDescriptor.set(value)
+        },
+        get() {
+          if (spyProp.get)
+            return spyProp.get.call(this, originDescriptor)
+
+          return originDescriptor.get()
+        },
+        configurable: true,
+      })
+    }
+  })
+
+  return {
+    mockRestore() {
+      propNames.forEach((propName) => {
+        const originDescriptor = originDescriptors[propName]
+        if (originDescriptor === NO_EXIST)
+          delete elementClass.prototype[propName]
+        else if (typeof originDescriptor === 'function')
+          elementClass.prototype[propName] = originDescriptor
+        else
+          Object.defineProperty(elementClass.prototype, propName, originDescriptor)
+      })
+    },
+  }
+}
+
+export function spyElementPrototype(Element: ElementClass, propName: string, property: Property) {
+  return spyElementPrototypes(Element, {
+    [propName]: property,
+  })
+}

package/src/type.ts

@@ -0,0 +1,94 @@
+import type { App, Plugin, PropType, Ref, SlotsType, VNode } from 'vue'
+
+// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
+export const tuple = <T extends string[]>(...args: T) => args
+
+export const tupleNum = <T extends number[]>(...args: T) => args
+
+/**
+ * https://stackoverflow.com/a/59187769
+ * Extract the type of an element of an array/tuple without performing indexing
+ */
+export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never
+
+/**
+ * https://github.com/Microsoft/TypeScript/issues/29729
+ */
+export type LiteralUnion<T extends string> = T | (string & {})
+
+export type Data = Record<string, unknown>
+
+export type Key = string | number
+
+type DefaultFactory<T> = (props: Data) => T | null | undefined
+
+export interface PropOptions<T = any, D = T> {
+  type?: PropType<T> | true | null
+  required?: boolean
+  default?: D | DefaultFactory<D> | null | undefined | object
+  validator?: (value: unknown) => boolean
+}
+
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void
+
+export type VueNode = VNodeChildAtom | VNodeChildAtom[] | VNode
+
+export function withInstall<T>(comp: T) {
+  const c = comp as any
+  c.install = function (app: App) {
+    app.component(c.displayName || c.name, comp as any)
+  }
+
+  return comp as T & Plugin
+}
+
+export type MaybeRef<T> = T | Ref<T>
+
+export function eventType<T>() {
+  return { type: [Function, Array] as PropType<T | T[]> }
+}
+
+export function objectType<T = object>(defaultVal?: T) {
+  return { type: Object as PropType<T>, default: defaultVal as T }
+}
+
+export function booleanType(defaultVal?: boolean) {
+  return { type: Boolean, default: defaultVal as boolean }
+}
+
+export function functionType<T = () => object>(defaultVal?: T) {
+  return { type: Function as PropType<T>, default: defaultVal as T }
+}
+
+export function anyType<T = any>(defaultVal?: T, required?: boolean) {
+  const type = { validator: () => true, default: defaultVal as T } as unknown
+  return required
+    ? (type as {
+        type: PropType<T>
+        default: T
+        required: true
+      })
+    : (type as {
+        default: T
+        type: PropType<T>
+      })
+}
+export function vNodeType<T = VueNode>() {
+  return { validator: () => true } as unknown as { type: PropType<T> }
+}
+
+export function arrayType<T extends any[]>(defaultVal?: T) {
+  return { type: Array as unknown as PropType<T>, default: defaultVal as T }
+}
+
+export function stringType<T extends string = string>(defaultVal?: T) {
+  return { type: String as unknown as PropType<T>, default: defaultVal as T }
+}
+
+export function someType<T>(types?: any[], defaultVal?: T) {
+  return types ? { type: types as PropType<T>, default: defaultVal as T } : anyType<T>(defaultVal)
+}
+
+export type CustomSlotsType<T extends Record<string, any>> = SlotsType<T>
+
+export type AnyObject = Record<PropertyKey, any>

package/src/utils/checkSlotProp.ts

@@ -0,0 +1,10 @@
+export function checkSlotProp(props: Record<string, any>, slots: Record<string, any>, name: string, ...args: any[]) {
+  if (slots[name])
+    return slots[name]?.(...args)
+  if (name in props) {
+    if (typeof props[name] === 'function')
+      return props[name]?.(...args)
+    return props[name]
+  }
+  return null
+}

package/src/utils/get.ts

@@ -0,0 +1,15 @@
+export default function get(
+  entity: any,
+  path: (string | number | symbol)[] | readonly (string | number | symbol)[],
+) {
+  let current = entity
+
+  for (let i = 0; i < path.length; i += 1) {
+    if (current === null || current === undefined)
+      return undefined
+
+    current = current[path[i]]
+  }
+
+  return current
+}

package/src/utils/set.ts

@@ -0,0 +1,110 @@
+import get from './get'
+
+export type Path = (string | number | symbol)[]
+
+function internalSet<Entity = any, Output = Entity, Value = any>(
+  entity: Entity,
+  paths: Path,
+  value: Value,
+  removeIfUndefined: boolean,
+): Output {
+  if (!paths.length)
+    return (value as unknown) as Output
+
+  const [path, ...restPath] = paths
+
+  let clone: Output
+  if (!entity && typeof path === 'number')
+    clone = ([] as unknown) as Output
+  else if (Array.isArray(entity))
+    clone = ([...entity] as unknown) as Output
+  else
+    clone = ({ ...entity } as unknown) as Output
+
+  // Delete prop if `removeIfUndefined` and value is undefined
+  if (removeIfUndefined && value === undefined && restPath.length === 1)
+    delete (clone as any)[path][restPath[0]]
+  else
+    (clone as any)[path] = internalSet((clone as any)[path], restPath, value, removeIfUndefined)
+
+  return clone
+}
+
+export default function set<Entity = any, Output = Entity, Value = any>(
+  entity: Entity,
+  paths: Path,
+  value: Value,
+  removeIfUndefined: boolean = false,
+): Output {
+  // Do nothing if `removeIfUndefined` and parent object not exist
+  if (
+    paths.length
+    && removeIfUndefined
+    && value === undefined
+    && !get(entity, paths.slice(0, -1))
+  ) {
+    return (entity as unknown) as Output
+  }
+
+  return internalSet(entity, paths, value, removeIfUndefined)
+}
+
+function isObject(obj: any) {
+  return (
+    typeof obj === 'object'
+    && obj !== null
+    && Object.getPrototypeOf(obj) === Object.prototype
+  )
+}
+
+function createEmpty<T>(source: T) {
+  return (Array.isArray(source) ? [] : {}) as T
+}
+
+const keys = typeof Reflect === 'undefined' ? Object.keys : Reflect.ownKeys
+
+/**
+ * Merge objects which will create
+ */
+export function merge<T extends object>(...sources: T[]) {
+  let clone = createEmpty(sources[0])
+
+  sources.forEach((src) => {
+    function internalMerge(path: Path, parentLoopSet?: Set<object>) {
+      const loopSet = new Set(parentLoopSet)
+
+      const value = get(src, path)
+
+      const isArr = Array.isArray(value)
+
+      if (isArr || isObject(value)) {
+        // Only add not loop obj
+        if (!loopSet.has(value)) {
+          loopSet.add(value)
+
+          const originValue = get(clone, path)
+
+          if (isArr) {
+            // Array will always be overridden
+            clone = set(clone, path, [])
+          }
+          else if (!originValue || typeof originValue !== 'object') {
+            // Init container if not exist
+            clone = set(clone, path, createEmpty(value))
+          }
+
+          keys(value).forEach((key) => {
+            internalMerge([...path, key], loopSet)
+          })
+        }
+      }
+      else {
+        clone = set(clone, path, value)
+      }
+    }
+
+    internalMerge([])
+  })
+
+  return clone
+}

package/src/vnode.ts

@@ -0,0 +1,86 @@
+import type { Slots, VNode, VNodeArrayChildren, VNodeProps } from 'vue'
+import { Comment, Fragment, render as VueRender, cloneVNode, isVNode } from 'vue'
+import { filterEmpty } from './props-util'
+import warning from './warning'
+import type { RefObject } from './createRef'
+
+type NodeProps = Record<string, any> &
+  Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject }
+
+export function cloneElement<T, U>(
+  vnode: VNode<T, U> | VNode<T, U>[],
+  nodeProps: NodeProps = {},
+  override = true,
+  mergeRef = false,
+): VNode<T, U> | null {
+  let ele = vnode
+  if (Array.isArray(vnode))
+    ele = filterEmpty(vnode)[0]
+
+  if (!ele)
+    return null
+
+  const node: any = cloneVNode(ele as VNode<T, U>, nodeProps as any, mergeRef)
+
+  // cloneVNode内部是合并属性，这里改成覆盖属性
+  node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any
+  warning(typeof node.props.class !== 'object', 'class must be string')
+  return node
+}
+
+export function cloneVNodes(vnodes: any, nodeProps = {}, override = true) {
+  return vnodes.map((vnode: any) => cloneElement(vnode, nodeProps, override))
+}
+
+export function deepCloneElement<T, U>(
+  vnode: VNode<T, U> | VNode<T, U>[],
+  nodeProps: NodeProps = {},
+  override = true,
+  mergeRef = false,
+): any {
+  if (Array.isArray(vnode)) {
+    return vnode.map((item: any) => deepCloneElement(item, nodeProps, override, mergeRef))
+  }
+  else {
+    // 需要判断是否为vnode方可进行clone操作
+    if (!isVNode(vnode))
+      return vnode
+
+    const cloned: any = cloneElement(vnode, nodeProps, override, mergeRef)
+    if (Array.isArray(cloned.children))
+      cloned.children = deepCloneElement(cloned.children as VNode<T, U>[])
+
+    return cloned
+  }
+}
+
+export function triggerVNodeUpdate(vm: VNode, attrs: Record<string, any>, dom: any) {
+  VueRender(cloneVNode(vm, { ...attrs }), dom)
+}
+
+function ensureValidVNode(slot: VNodeArrayChildren | null) {
+  return (slot || []).some((child) => {
+    if (!isVNode(child))
+      return true
+    if (child.type === Comment)
+      return false
+    if (child.type === Fragment && !ensureValidVNode(child.children as VNodeArrayChildren))
+      return false
+    return true
+  })
+    ? slot
+    : null
+}
+
+export function customRenderSlot(
+  slots: Slots,
+  name: string,
+  props: Record<string, unknown>,
+  fallback?: () => VNodeArrayChildren,
+) {
+  const slot = slots[name]?.(props)
+  if (ensureValidVNode(slot as any))
+    return slot
+
+  return fallback?.()
+}

package/src/warning.ts

@@ -0,0 +1,79 @@
+let warned: Record<string, boolean> = {}
+
+export type preMessageFn = (
+  message: string,
+  type: 'warning' | 'note',
+) => string | null | undefined | number
+
+const preWarningFns: preMessageFn[] = []
+
+/**
+ * Pre warning enable you to parse content before console.error.
+ * Modify to null will prevent warning.
+ */
+export function preMessage(fn: preMessageFn) {
+  preWarningFns.push(fn)
+}
+
+export function warning(valid: boolean, message: string) {
+  // Support uglify
+  if (
+    process.env.NODE_ENV !== 'production'
+    && !valid
+    && console !== undefined
+  ) {
+    const finalMessage = preWarningFns.reduce(
+      (msg, preMessageFn) => (preMessageFn as any)(msg ?? '', 'warning'),
+      message,
+    )
+
+    if (finalMessage)
+      console.error(`Warning: ${finalMessage}`)
+  }
+}
+
+export function note(valid: boolean, message: string) {
+  // Support uglify
+  if (
+    process.env.NODE_ENV !== 'production'
+    && !valid
+    && console !== undefined
+  ) {
+    const finalMessage = preWarningFns.reduce(
+      (msg, preMessageFn) => (preMessageFn as any)(msg ?? '', 'note'),
+      message,
+    )
+
+    if (finalMessage)
+      console.warn(`Note: ${finalMessage}`)
+  }
+}
+
+export function resetWarned() {
+  warned = {}
+}
+
+export function call(
+  method: (valid: boolean, message: string) => void,
+  valid: boolean,
+  message: string,
+) {
+  if (!valid && !warned[message]) {
+    method(false, message)
+    warned[message] = true
+  }
+}
+
+export function warningOnce(valid: boolean, message: string) {
+  call(warning, valid, message)
+}
+
+export function noteOnce(valid: boolean, message: string) {
+  call(note, valid, message)
+}
+
+warningOnce.preMessage = preMessage
+warningOnce.resetWarned = resetWarned
+warningOnce.noteOnce = noteOnce
+
+export default warningOnce