@v-c/util 0.0.1

package/src/PortalWrapper.tsx

@@ -0,0 +1,214 @@
+import type { SlotsType } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, onUpdated, shallowRef } from 'vue'
+import raf from './raf'
+import canUseDom from './Dom/canUseDom'
+import ScrollLocker from './Dom/scrollLocker'
+import setStyle from './setStyle'
+import type { PortalRef } from './Portal'
+import Portal from './Portal'
+
+// import raf from './raf';
+
+let openCount = 0
+const supportDom = canUseDom()
+
+/**
+ * @private
+ */
+export function getOpenCount() {
+  return process.env.NODE_ENV === 'test' ? openCount : 0
+}
+
+// https://github.com/ant-design/ant-design/issues/19340
+// https://github.com/ant-design/ant-design/issues/19332
+let cacheOverflow = {}
+
+function getParent(getContainer: GetContainer) {
+  if (!supportDom)
+    return null
+
+  if (getContainer) {
+    if (typeof getContainer === 'string')
+      return document.querySelectorAll(getContainer)[0]
+
+    if (typeof getContainer === 'function')
+      return getContainer()
+
+    if (
+      typeof getContainer === 'object'
+      && getContainer instanceof window.HTMLElement
+    )
+      return getContainer
+  }
+  return document.body
+}
+
+export type GetContainer = string | HTMLElement | (() => HTMLElement)
+
+export type DefaultSlotInfo = SlotsType<{
+  default: {
+    getOpenCount: () => number
+    getContainer: () => HTMLElement
+    switchScrollingEffect: () => void
+    scrollLocker: ScrollLocker
+  }
+}>
+
+export interface PortalWrapperProps {
+  visible?: boolean
+  getContainer?: GetContainer
+  wrapperClassName?: string
+  forceRender?: boolean
+}
+
+const PortalWrapper = defineComponent<PortalWrapperProps, any, string, DefaultSlotInfo>((props, ctx) => {
+  const container = shallowRef<HTMLElement>()
+  const componentRef = shallowRef<PortalRef>()
+  const rafId = shallowRef<number>()
+  const scrollLocker = shallowRef<ScrollLocker>()
+
+  const removeCurrentContainer = () => {
+    // Portal will remove from `parentNode`.
+    // Let's handle this again to avoid refactor issue.
+    container.value?.parentNode?.removeChild(container.value)
+  }
+
+  const updateOpenCount = (prevProps?: Partial<PortalWrapperProps>) => {
+    const { visible: prevVisible, getContainer: prevGetContainer }
+        = prevProps || {}
+    const { visible, getContainer } = props
+
+    // Update count
+    if (
+      visible !== prevVisible
+      && supportDom
+      && getParent(getContainer!) === document.body
+    ) {
+      if (visible && !prevVisible)
+        openCount += 1
+      else if (prevProps)
+        openCount -= 1
+    }
+
+    // Clean up container if needed
+    const getContainerIsFunc
+            = typeof getContainer === 'function'
+            && typeof prevGetContainer === 'function'
+    if (
+      getContainerIsFunc
+        ? getContainer.toString() !== prevGetContainer.toString()
+        : getContainer !== prevGetContainer
+    )
+      removeCurrentContainer()
+  }
+
+  const attachToParent = (force = false) => {
+    if (force || (container.value && !container.value.parentNode)) {
+      const parent = getParent(props.getContainer!)
+      if (parent) {
+        parent.appendChild(container.value!)
+        return true
+      }
+
+      return false
+    }
+
+    return true
+  }
+  const setWrapperClassName = () => {
+    const { wrapperClassName } = props
+    if (
+      container.value
+      && wrapperClassName
+      && wrapperClassName !== container.value.className
+    )
+      container.value.className = wrapperClassName
+  }
+
+  const getContainer = () => {
+    if (!supportDom)
+      return null
+
+    if (!container.value) {
+      container.value = document.createElement('div')
+      attachToParent(true)
+    }
+    setWrapperClassName()
+    return container.value
+  }
+
+  onMounted(() => {
+    scrollLocker.value = new ScrollLocker({
+      container: getParent(props.getContainer!) as HTMLElement,
+    })
+    updateOpenCount()
+    if (!attachToParent()) {
+      rafId.value = raf(() => {
+        // 对组件执行强制更新 forceUpdate,准备采用改变key的方式来实现
+      })
+    }
+  })
+
+  onUpdated(() => {
+    updateOpenCount(props)
+    updateOpenCount(props)
+    setWrapperClassName()
+    attachToParent()
+  })
+
+  onBeforeUnmount(() => {
+    const { visible, getContainer } = props
+    if (supportDom && getParent(getContainer!) === document.body) {
+      // 离开时不会 render， 导到离开时数值不变，改用 func 。。
+      openCount = visible && openCount ? openCount - 1 : openCount
+    }
+    removeCurrentContainer()
+    raf.cancel(rafId.value!)
+  })
+
+  /**
+   * Enhance ./switchScrollingEffect
+   * 1. Simulate document body scroll bar with
+   * 2. Record body has overflow style and recover when all of PortalWrapper invisible
+   * 3. Disable body scroll when PortalWrapper has open
+   *
+   * @memberof PortalWrapper
+   */
+  const switchScrollingEffect = () => {
+    if (openCount === 1 && !Object.keys(cacheOverflow).length) {
+      switchScrollingEffect()
+      // Must be set after switchScrollingEffect
+      cacheOverflow = setStyle({
+        overflow: 'hidden',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+      })
+    }
+    else if (!openCount) {
+      setStyle(cacheOverflow)
+      cacheOverflow = {}
+      switchScrollingEffect()
+    }
+  }
+  return () => {
+    const { forceRender, visible } = props
+    let portal = null
+    const childProps = {
+      getOpenCount,
+      getContainer,
+      switchScrollingEffect,
+      scrollLocker: scrollLocker.value,
+    }
+    if (forceRender || visible || componentRef.value) {
+      portal = (
+        <Portal getContainer={getContainer as any} ref={componentRef}>
+          {ctx?.slots?.default(childProps as any)}
+        </Portal>
+      )
+    }
+    return portal
+  }
+  // TODO
+})
+
+export default PortalWrapper

package/src/composeProps.ts

@@ -0,0 +1,23 @@
+function composeProps<T extends Record<string, any>>(
+  originProps: T,
+  patchProps: Partial<T>,
+  isAll?: boolean,
+) {
+  const composedProps: Record<string, any> = {
+    ...originProps,
+    ...(isAll ? patchProps : {}),
+  }
+
+  Object.keys(patchProps).forEach((key) => {
+    const func = patchProps[key]
+    if (typeof func === 'function') {
+      composedProps[key] = (...args: any[]) => {
+        func(...args)
+        return originProps[key]?.(...args)
+      }
+    }
+  })
+  return composedProps
+}
+
+export default composeProps

package/src/createRef.ts

@@ -0,0 +1,33 @@
+import type { Ref } from 'vue'
+
+// eslint-disable-next-line ts/no-unsafe-function-type
+export interface RefObject extends Function {
+  current?: any
+}
+
+function createRef(): any {
+  const func: RefObject = (node: any) => {
+    func.current = node
+  }
+  return func
+}
+
+export function fillRef<T>(ref: Ref, node: T) {
+  if (typeof ref === 'function')
+    (ref as any)(node)
+  else if (typeof ref === 'object' && ref && 'current' in ref)
+    (ref as any).current = node
+}
+
+/**
+ * Merge refs into one ref function to support ref passing.
+ */
+export function composeRef<T>(...refs: any[]) {
+  return (node: T) => {
+    refs.forEach((ref) => {
+      fillRef(ref, node)
+    })
+  }
+}
+
+export default createRef

package/src/debug/diff.ts

@@ -0,0 +1,66 @@
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-nocheck
+function createArray() {
+  const arr: any[] = []
+  // eslint-disable-next-line no-proto,no-restricted-properties
+  arr.__proto__ = []
+  // eslint-disable-next-line no-proto,no-restricted-properties
+  arr.__proto__.format = function toString() {
+    return this.map(obj => ({
+      ...obj,
+      path: obj.path.join(' > '),
+    }))
+  }
+  // eslint-disable-next-line no-proto,no-restricted-properties
+  arr.__proto__.toString = function toString() {
+    return JSON.stringify(this.format(), null, 2)
+  }
+  return arr
+}
+
+export default function diff(obj1, obj2, depth = 10, path = [], diffList = createArray()) {
+  if (depth <= 0)
+    return diffList
+
+  const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)])
+  keys.forEach((key) => {
+    const value1 = obj1[key]
+    const value2 = obj2[key]
+
+    // Same value
+    if (value1 === value2)
+      return
+
+    const type1 = typeof value1
+    const type2 = typeof value2
+
+    // Diff type
+    if (type1 !== type2) {
+      diffList.push({
+        path: path.concat(key),
+        value1,
+        value2,
+      })
+      return
+    }
+
+    // NaN
+    if (Number.isNaN(value1) && Number.isNaN(value2))
+      return
+
+    // Object & Array
+    if (type1 === 'object' && value1 !== null && value2 !== null) {
+      diff(value1, value2, depth - 1, path.concat(key), diffList)
+      return
+    }
+
+    // Rest
+    diffList.push({
+      path: path.concat(key),
+      value1,
+      value2,
+    })
+  })
+
+  return diffList
+}

package/src/deprecated.ts

@@ -0,0 +1,8 @@
+export default function deprecated(props: any, instead: any, component: any) {
+  if (typeof window !== 'undefined' && window.console && window.console.error) {
+    window.console.error(
+      `Warning: ${props} is deprecated at [ ${component} ], `
+      + `use [ ${instead} ] instead of it.`,
+    )
+  }
+}

package/src/getScrollBarSize.tsx

@@ -0,0 +1,57 @@
+let cached: number
+
+export default function getScrollBarSize(fresh?: boolean) {
+  if (typeof document === 'undefined')
+    return 0
+
+  if (fresh || cached === undefined) {
+    const inner = document.createElement('div')
+    inner.style.width = '100%'
+    inner.style.height = '200px'
+
+    const outer = document.createElement('div')
+    const outerStyle = outer.style
+
+    outerStyle.position = 'absolute'
+    outerStyle.top = '0'
+    outerStyle.left = '0'
+    outerStyle.pointerEvents = 'none'
+    outerStyle.visibility = 'hidden'
+    outerStyle.width = '200px'
+    outerStyle.height = '150px'
+    outerStyle.overflow = 'hidden'
+
+    outer.appendChild(inner)
+
+    document.body.appendChild(outer)
+
+    const widthContained = inner.offsetWidth
+    outer.style.overflow = 'scroll'
+    let widthScroll = inner.offsetWidth
+
+    if (widthContained === widthScroll)
+      widthScroll = outer.clientWidth
+
+    document.body.removeChild(outer)
+
+    cached = widthContained - widthScroll
+  }
+  return cached
+}
+
+function ensureSize(str: string) {
+  const match = str.match(/^(.*)px$/)
+  const value = Number(match?.[1])
+  return Number.isNaN(value) ? getScrollBarSize() : value
+}
+
+export function getTargetScrollBarSize(target: HTMLElement) {
+  if (typeof document === 'undefined' || !target || !(target instanceof Element))
+    return { width: 0, height: 0 }
+
+  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar')
+  return {
+    width: ensureSize(width),
+    height: ensureSize(height),
+  }
+}

package/src/guid.ts

@@ -0,0 +1,4 @@
+let seed = 0
+export default function guid() {
+  return `${Date.now()}_${seed++}`
+}

package/src/hooks/useId.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue'
+import canUseDom from '../Dom/canUseDom'
+
+let uuid = 0
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom()
+
+/** Get unique id for accessibility usage */
+export function getUUID(): number | string {
+  let retId: string | number
+
+  // Test never reach
+  /* istanbul ignore if */
+  if (isBrowserClient) {
+    retId = uuid
+    uuid += 1
+  }
+  else {
+    retId = 'TEST_OR_SSR'
+  }
+
+  return retId
+}
+
+export default function useId(id = ref('')) {
+  // Inner id for accessibility usage. Only work in client side
+  const innerId = `vc_unique_${getUUID()}`
+
+  return id.value || innerId
+}

package/src/hooks/useMemo.ts

@@ -0,0 +1,21 @@
+import type { Ref, WatchSource } from 'vue'
+import { ref, watch } from 'vue'
+
+export default function useMemo<T>(
+  getValue: () => T,
+  condition: (WatchSource<unknown> | object)[],
+  shouldUpdate?: (prev: any[], next: any[]) => boolean,
+) {
+  const cacheRef: Ref<T> = ref(getValue() as any)
+  watch(condition, (next, pre) => {
+    if (shouldUpdate) {
+      if (shouldUpdate(next, pre))
+        cacheRef.value = getValue()
+    }
+    else {
+      cacheRef.value = getValue()
+    }
+  })
+
+  return cacheRef
+}

package/src/hooks/useMergedState.ts

@@ -0,0 +1,44 @@
+import type { ComputedRef, Ref, UnwrapRef } from 'vue'
+import { ref, toRaw, unref, watch, watchEffect } from 'vue'
+
+export default function useMergedState<T, R = Ref<T>>(
+  defaultStateValue: T | (() => T),
+  option?: {
+    defaultValue?: T | (() => T)
+    value?: Ref<T> | Ref<UnwrapRef<T>> | ComputedRef<T>
+    onChange?: (val: T, prevValue: T) => void
+    postState?: (val: T) => T
+  },
+): [R, (val: T) => void] {
+  const { defaultValue, value = ref() } = option || {}
+  let initValue: T
+        = typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue
+  if (value.value !== undefined)
+    initValue = unref(value as any) as T
+
+  if (defaultValue !== undefined)
+    initValue = typeof defaultValue === 'function' ? (defaultValue as any)() : defaultValue
+
+  const innerValue = ref(initValue) as Ref<T>
+  const mergedValue = ref(initValue) as Ref<T>
+  watchEffect(() => {
+    let val = value.value !== undefined ? value.value : innerValue.value
+    if (option?.postState)
+      val = option.postState(val as T)
+    mergedValue.value = val as T
+  })
+
+  function triggerChange(newValue: T) {
+    const preVal = mergedValue.value
+    innerValue.value = newValue
+    if (toRaw(mergedValue.value) !== newValue && option?.onChange)
+      option.onChange(newValue, preVal)
+  }
+
+  // Effect of reset value to `undefined`
+  watch(value, () => {
+    innerValue.value = value.value as T
+  })
+
+  return [mergedValue as unknown as R, triggerChange]
+}

package/src/hooks/useState.ts

@@ -0,0 +1,17 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+export default function useState<T, R = Ref<T>>(
+  defaultStateValue?: T | (() => T),
+): [R, (val: T) => void] {
+  const initValue: T
+        = typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue
+
+  const innerValue = ref(initValue) as Ref<T>
+
+  function triggerChange(newValue: T) {
+    innerValue.value = newValue
+  }
+
+  return [innerValue as unknown as R, triggerChange]
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as get } from './utils/get'
+export { default as set } from './utils/set'
+export { default as warning } from './warning'

package/src/isEqual.ts

@@ -0,0 +1,50 @@
+import warning from './warning'
+
+/**
+ * Deeply compares two object literals.
+ * @param obj1 object 1
+ * @param obj2 object 2
+ * @param shallow shallow compare
+ */
+function isEqual(obj1: any, obj2: any, shallow = false): boolean {
+  // https://github.com/mapbox/mapbox-gl-js/pull/5979/files#diff-fde7145050c47cc3a306856efd5f9c3016e86e859de9afbd02c879be5067e58f
+  const refSet = new Set<any>()
+  function deepEqual(a: any, b: any, level = 1): boolean {
+    const circular = refSet.has(a)
+    warning(!circular, 'Warning: There may be circular references')
+    if (circular)
+      return false
+
+    if (a === b)
+      return true
+
+    if (shallow && level > 1)
+      return false
+
+    refSet.add(a)
+    const newLevel = level + 1
+    if (Array.isArray(a)) {
+      if (!Array.isArray(b) || a.length !== b.length)
+        return false
+
+      for (let i = 0; i < a.length; i++) {
+        if (!deepEqual(a[i], b[i], newLevel))
+          return false
+      }
+      return true
+    }
+    if (a && b && typeof a === 'object' && typeof b === 'object') {
+      const keys = Object.keys(a)
+      if (keys.length !== Object.keys(b).length)
+        return false
+
+      return keys.every(key => deepEqual(a[key], b[key], newLevel))
+    }
+    // other
+    return false
+  }
+
+  return deepEqual(obj1, obj2)
+}
+
+export default isEqual

package/src/isMobile.ts

@@ -0,0 +1,15 @@
+export default () => {
+  if (typeof navigator === 'undefined' || typeof window === 'undefined')
+    return false
+
+  const agent
+        = navigator.userAgent || navigator.vendor || (window as any).opera
+  return (
+    /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+      agent,
+    )
+    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
+      agent?.substr(0, 4),
+    )
+  )
+}

package/src/omit.ts

@@ -0,0 +1,14 @@
+export default function omit<T extends object, K extends keyof T>(
+  obj: T,
+  fields: K[] | readonly K[],
+): Omit<T, K> {
+  const clone = { ...obj }
+
+  if (Array.isArray(fields)) {
+    fields.forEach((key) => {
+      delete clone[key]
+    })
+  }
+
+  return clone
+}

package/src/pickAttrs.ts

@@ -0,0 +1,78 @@
+const attributes = `accept acceptCharset accessKey action allowFullScreen allowTransparency
+    alt async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
+    charSet checked classID className colSpan cols content contentEditable contextMenu
+    controls coords crossOrigin data dateTime default defer dir disabled download draggable
+    encType form formAction formEncType formMethod formNoValidate formTarget frameBorder
+    headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode integrity
+    is keyParams keyType kind label lang list loop low manifest marginHeight marginWidth max maxLength media
+    mediaGroup method min minLength multiple muted name noValidate nonce open
+    optimum pattern placeholder poster preload radioGroup readOnly rel required
+    reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
+    shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
+    summary tabIndex target title type useMap value width wmode wrap`
+
+const eventsName = `onCopy onCut onPaste onCompositionEnd onCompositionStart onCompositionUpdate onKeyDown
+    onKeyPress onKeyUp onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick
+    onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown
+    onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel
+    onTouchEnd onTouchMove onTouchStart onScroll onWheel onAbort onCanPlay onCanPlayThrough
+    onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata
+    onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting onLoad onError`
+
+const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/)
+
+const ariaPrefix = 'aria-'
+const dataPrefix = 'data-'
+
+function match(key: string, prefix: string) {
+  return key.indexOf(prefix) === 0
+}
+
+export interface PickConfig {
+  aria?: boolean
+  data?: boolean
+  attr?: boolean
+}
+
+/**
+ * Picker props from exist props with filter
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ */
+export default function pickAttrs(
+  props: object,
+  ariaOnly: boolean | PickConfig = false,
+) {
+  let mergedConfig: PickConfig
+  if (ariaOnly === false) {
+    mergedConfig = {
+      aria: true,
+      data: true,
+      attr: true,
+    }
+  }
+  else if (ariaOnly === true) {
+    mergedConfig = {
+      aria: true,
+    }
+  }
+  else {
+    mergedConfig = {
+      ...ariaOnly,
+    }
+  }
+
+  const attrs: Record<string, any> = {}
+  Object.keys(props).forEach((key) => {
+    if (
+    // Aria
+      (mergedConfig.aria && (key === 'role' || match(key, ariaPrefix)))
+      // Data
+      || (mergedConfig.data && match(key, dataPrefix))
+      // Attr
+      || (mergedConfig.attr && propList.includes(key))
+    )
+      attrs[key] = (props as any)[key]
+  })
+  return attrs
+}