refactor: refactor code

Author: xiaoluoboding

package.json

@@ -13,13 +13,13 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.0",
     "@rollup/plugin-replace": "^2.4.1",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^26.0.19",
     "@types/keymaster": "^1.6.28",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^14.14.32",
-    "@vue/test-utils": "^1.1.3",
+    "@vue/test-utils": "^1.1.2",
     "axios": "^0.21.1",
     "color2k": "^1.2.4",
     "esbuild": "^0.8.29",
@@ -42,7 +42,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "screenfull": "^5.1.0",
     "stateshot": "^1.3.3",
-    "ts-jest": "^26.5.3",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.2.3",
     "vue": "^2.6.12",
     "vuex": "^3.6.2"

packages/core/types/ref.ts

@@ -1,14 +1,11 @@
 import { defineComponent, Ref, ComputedRef } from 'vue-demi'
 
 export type RefTyped<T> = T | Ref<T>
-export type RefElement = Element | Ref<Element | undefined | null>
-export type MaybeElement = Element | Ref<Element | undefined>
+export type RefTypedElement = RefTyped<Element | undefined | null>
+export type RefElement = Element | Ref<Element | undefined>
 export type ToRefs<T = any> = { [K in keyof T]: Ref<T[K]> }
 export type ReactiveFn<T> = T extends (...args: infer A) => infer R
   ? (...args: { [K in keyof A]: RefTyped<A[K]> }) => ComputedRef<R>
   : never
 
-export type MaybeRef<T> = T | Ref<T> | ComputedRef<T>
-
 export type VueInstance = InstanceType<ReturnType<typeof defineComponent>>
-export type MaybeRefElement = MaybeRef<Element | VueInstance | undefined | null>

packages/core/useElementSize/index.ts

@@ -1,11 +1,11 @@
 import { ref } from 'vue-demi'
 
 import { useResizeObserver } from '../useResizeObserver'
-import { ResizeObserverOptions, ElementSize, MaybeRefElement } from '../types'
+import { ResizeObserverOptions, ElementSize, RefTypedElement } from '../types'
 import { isElement } from '../utils'
 
 const useElementSize = (
-  target: MaybeRefElement,
+  target: RefTypedElement,
   options: ResizeObserverOptions = {},
 ): ElementSize => {
   const width = ref(isElement(target) ? target.clientWidth : 0)

packages/core/useFullscreen/index.ts

@@ -1,7 +1,7 @@
 import { ref, Ref } from 'vue-demi'
 import screenfull, { Screenfull } from 'screenfull'
 import { tryOnMounted } from '../useLifecycle'
-import { Fn, MaybeElement } from '../types'
+import { Fn, RefElement } from '../types'
 
 export interface IFullScreen {
   isFullscreen: Ref<boolean>;
@@ -14,7 +14,7 @@ export interface IFullScreen {
  * @param options
  */
 const useFullscreen = (
-  target: MaybeElement,
+  target: RefElement,
   options: FullscreenOptions = {}
 ): IFullScreen => {
   const targetRef = ref(target || document.querySelector('html'))

packages/core/useResizeObserver/index.ts

@@ -3,7 +3,7 @@ import { ResizeObserver } from '@juggle/resize-observer'
 import {
   ResizeObserverOptions,
   ResizeObserverCallback,
-  MaybeRefElement
+  RefTypedElement
 } from '../types'
 import { unrefElement } from '../utils'
 import { tryOnUnmounted } from '../useLifecycle'
@@ -15,7 +15,7 @@ import { tryOnUnmounted } from '../useLifecycle'
  * @param options 
  */
 const useResizeObserver = (
-  target: MaybeRefElement,
+  target: RefTypedElement,
   callback: ResizeObserverCallback,
   options: ResizeObserverOptions = {}
 ) => {

packages/core/utils/ref.ts

@@ -1,10 +1,10 @@
 import { isRef, ref, Ref, computed, unref } from 'vue-demi'
 
-import { RefTyped, RefElement, ReactiveFn, MaybeRefElement, VueInstance } from '../types'
+import { RefTyped, RefElement, ReactiveFn, RefTypedElement } from '../types'
 
 export function unwrap<T>(o: RefTyped<T>): T
 export function unwrap<T>(o: RefTyped<T>): T {
-  return isRef(o) ? o.value : o;
+  return isRef(o) ? o.value : o
 }
 
 export function wrap(o: RefElement): Ref<Element>
@@ -19,7 +19,6 @@ export function reactiveFn<T extends Function>(fn: T): ReactiveFn<T> {
   } as ReactiveFn<T>
 }
 
-export function unrefElement(refEl: MaybeRefElement) {
-  const plain = unref(refEl)
-  return (plain as VueInstance).$el ?? plain
+export function unrefElement(refEl: RefTypedElement): any {
+  return unref(refEl)
 }

scripts/rollup.config.ts

@@ -93,6 +93,7 @@ for (const { name, display, external = [], globals = {} } of activePackages) {
           },
         }),
         replace({
+          preventAssignment: true,
           __DEV__: config.format !== 'umd'
             ? `(process.env.NODE_ENV !== 'production')`
             : config.isMinify ? 'false' : 'true'

yarn.lock

@@ -1594,7 +1594,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^26.0.20":
+"@types/jest@^26.0.19":
   version "26.0.20"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.20.tgz#cd2f2702ecf69e86b586e1f5223a60e454056307"
   integrity sha512-9zi2Y+5USJRxd0FsahERhBwlcvFh6D2GLQnY2FH2BzK8J9s9omvNHIbvABwIluXa0fD8XVKMLTO0aOEuUfACAA==
@@ -1733,7 +1733,7 @@
   dependencies:
     tslib "^2.1.0"
 
-"@vue/test-utils@^1.1.3":
+"@vue/test-utils@^1.1.2":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.1.3.tgz#747f5683d8d4633c85a385fe2e02c1bb35bec153"
   integrity sha512-BAY1Cwe9JpkJseimC295EW3YlAmgIJI9OPkg2FSP62+PHZooB0B+wceDi9TYyU57oqzL0yLbcP73JKFpKiLc9A==
@@ -8100,7 +8100,7 @@ trim-off-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
   integrity sha1-n5up2e+odkw4dpi8v+sshI8RrbM=
 
-ts-jest@^26.5.3:
+ts-jest@^26.4.4:
   version "26.5.3"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.3.tgz#a6ee00ba547be3b09877550df40a1465d0295554"
   integrity sha512-nBiiFGNvtujdLryU7MiMQh1iPmnZ/QvOskBbD2kURiI1MwqvxlxNnaAB/z9TbslMqCsSbu5BXvSSQPc5tvHGeA==