chore: NIP

Author: surmon-china

dev/Readonly.tsx

@@ -17,11 +17,14 @@ export const Component: React.FC = () => {
     <div>
       <mark>renderCount: {renderCount}</mark>
       <pre>shallowReadonlyObject = {JSON.stringify(shallowReadonlyObject, null, 2)}</pre>
+      {/* @ts-ignore */}
       <button onClick={() => shallowReadonlyObject.data++}>shallowReadonlyObject.data++</button>
       <button onClick={() => shallowReadonlyObject.nested.data++}>shallowReadonlyObject.nested.data++</button>
       <hr />
       <pre>readonlyObject = {JSON.stringify(readonlyObject, null, 2)}</pre>
+      {/* @ts-ignore */}
       <button onClick={() => readonlyObject.data++}>readonlyObject.data++</button>
+      {/* @ts-ignore */}
       <button onClick={() => readonlyObject.nested.data++}>readonlyObject.nested.data++</button>
     </div>
   )

src/computed.ts

@@ -4,16 +4,16 @@
  */
 
 import { useState as useReactState } from 'react'
-import { useWatch } from './watch'
-import { useForceUpdate } from './_utils'
-import { computed as vComputed } from '@vue/reactivity'
+import { computed as vueComputed } from '@vue/reactivity'
 import type {
-  ComputedGetter,
-  DebuggerOptions,
   ComputedRef,
-  WritableComputedOptions,
+  ComputedGetter,
   WritableComputedRef,
+  WritableComputedOptions,
+  DebuggerOptions,
 } from '@vue/reactivity'
+import { useWatch } from './watch'
+import { useForceUpdate } from './_utils'
 
 /**
  * Takes a getter function and returns a readonly reactive ref object for the
@@ -55,7 +55,7 @@ export function useComputed<T, S = T>(
   debugOptions?: DebuggerOptions,
 ): WritableComputedRef<T, S>
 export function useComputed(arg1: any, arg2: any) {
-  const [value] = useReactState(() => vComputed(arg1, arg2))
+  const [value] = useReactState(() => vueComputed(arg1, arg2))
   const forceUpdate = useForceUpdate()
   useWatch(value, forceUpdate)
   return value

src/effectScope.ts

@@ -4,7 +4,7 @@
  */
 
 import { useState as useReactState, useRef as useReactRef, useCallback as useReactCallback } from 'react'
-import { effectScope } from '@vue/reactivity'
+import { effectScope as vueEffectScope } from '@vue/reactivity'
 import { ArgumentTypes } from './_utils'
 
 /**
@@ -16,9 +16,9 @@ import { ArgumentTypes } from './_utils'
  * @param detached - Can be used to create a "detached" effect scope.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope Vue `effectScope()`}
  */
-export function useEffectScope(...args: ArgumentTypes<typeof effectScope>) {
+export function useEffectScope(...args: ArgumentTypes<typeof vueEffectScope>) {
   const hasRun = useReactRef(false)
-  const [scope] = useReactState(() => effectScope(...args))
+  const [scope] = useReactState(() => vueEffectScope(...args))
   const originalRunRef = useReactRef(scope.run)
   const runFn = useReactCallback(<T>(fn: () => T) => {
     if (!hasRun.current) {

src/reactive.ts

@@ -4,10 +4,10 @@
  */
 
 import { useState as useReactState } from 'react'
+import { reactive as vueReactive, shallowReactive as vueShallowReactive } from '@vue/reactivity'
+import type { Reactive, ShallowReactive } from '@vue/reactivity'
 import { useWatch } from './watch'
 import { useForceUpdate } from './_utils'
-import { reactive as vReactive, shallowReactive as vShallowReactive } from '@vue/reactivity'
-import type { Reactive, ShallowReactive } from '@vue/reactivity'
 
 /**
  * Returns a reactive proxy of the object.
@@ -26,7 +26,7 @@ import type { Reactive, ShallowReactive } from '@vue/reactivity'
  */
 export function useReactive<T extends object>(target: T): Reactive<T>
 export function useReactive(target: object) {
-  const [value] = useReactState(() => vReactive(target))
+  const [value] = useReactState(() => vueReactive(target))
   const forceUpdate = useForceUpdate()
   useWatch(value, forceUpdate)
   return value
@@ -63,7 +63,7 @@ export function useReactive(target: object) {
  * ```
  */
 export function useShallowReactive<T extends object>(target: T): ShallowReactive<T> {
-  const [value] = useReactState(() => vShallowReactive(target))
+  const [value] = useReactState(() => vueShallowReactive(target))
   const forceUpdate = useForceUpdate()
   useWatch(value, forceUpdate)
   return value

src/readonly.ts

@@ -4,10 +4,10 @@
  */
 
 import { useState as useReactState } from 'react'
+import { readonly as vueReadonly, shallowReadonly as vueShallowReadonly } from '@vue/reactivity'
+import type { DeepReadonly, UnwrapNestedRefs } from '@vue/reactivity'
 import { useWatch } from './watch'
 import { useForceUpdate } from './_utils'
-import { readonly as vReadonly, shallowReadonly as vShallowReadonly } from '@vue/reactivity'
-import type { DeepReadonly, UnwrapNestedRefs } from '@vue/reactivity'
 
 /**
  * Takes an object (reactive or plain) or a ref and returns a readonly proxy to
@@ -38,7 +38,7 @@ import type { DeepReadonly, UnwrapNestedRefs } from '@vue/reactivity'
  * ```
  */
 export function useReadonly<T extends object>(target: T): DeepReadonly<UnwrapNestedRefs<T>> {
-  const [value] = useReactState(() => vReadonly(target))
+  const [value] = useReactState(() => vueReadonly(target))
   const forceUpdate = useForceUpdate()
   useWatch(value, forceUpdate)
   return value
@@ -78,7 +78,7 @@ export function useReadonly<T extends object>(target: T): DeepReadonly<UnwrapNes
  * ```
  */
 export function useShallowReadonly<T extends object>(target: T): Readonly<T> {
-  const [value] = useReactState(() => vShallowReadonly(target))
+  const [value] = useReactState(() => vueShallowReadonly(target))
   const forceUpdate = useForceUpdate()
   useWatch(value, forceUpdate)
   return value

src/ref.ts

@@ -4,10 +4,10 @@
  */
 
 import { useState as useReactState } from 'react'
+import { ref as vueRef, shallowRef as vueShallowRef, customRef as vueCustomRef } from '@vue/reactivity'
+import type { Ref, UnwrapRef, ShallowRef, CustomRefFactory } from '@vue/reactivity'
 import { useForceUpdate, IfAny } from './_utils'
 import { useWatch } from './watch'
-import { ref as vRef, shallowRef as vShallowRef, customRef as vCustomRef } from '@vue/reactivity'
-import type { Ref, UnwrapRef, ShallowRef, CustomRefFactory } from '@vue/reactivity'
 
 /**
  * Takes an inner value and returns a reactive and mutable ref object, which
@@ -30,10 +30,10 @@ export function useRef<T>(
 ): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T>
 export function useRef<T = any>(): Ref<T | undefined>
 export function useRef(initValue?: unknown) {
-  const [refObj] = useReactState(() => vRef(initValue))
+  const [refObject] = useReactState(() => vueRef(initValue))
   const forceUpdate = useForceUpdate()
-  useWatch(refObj, forceUpdate, { deep: true })
-  return refObj as unknown as any
+  useWatch(refObject, forceUpdate, { deep: true })
+  return refObject as unknown as any
 }
 
 /**
@@ -56,10 +56,10 @@ export function useShallowRef<T>(
 ): Ref extends T ? (T extends Ref ? IfAny<T, ShallowRef<T>, T> : ShallowRef<T>) : ShallowRef<T>
 export function useShallowRef<T = any>(): ShallowRef<T | undefined>
 export function useShallowRef(initValue?: unknown) {
-  const [sRefObj] = useReactState(() => vShallowRef(initValue))
+  const [shallowRefObject] = useReactState(() => vueShallowRef(initValue))
   const forceUpdate = useForceUpdate()
-  useWatch(sRefObj, forceUpdate)
-  return sRefObj
+  useWatch(shallowRefObject, forceUpdate)
+  return shallowRefObject
 }
 
 /**
@@ -70,8 +70,8 @@ export function useShallowRef(initValue?: unknown) {
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#customref Vue `customRef()`}
  */
 export function useCustomRef<T>(factory: CustomRefFactory<T>): Ref<T> {
-  const [cRefObj] = useReactState(() => vCustomRef(factory))
+  const [customRefObject] = useReactState(() => vueCustomRef(factory))
   const forceUpdate = useForceUpdate()
-  useWatch(cRefObj, forceUpdate)
-  return cRefObj
+  useWatch(customRefObject, forceUpdate)
+  return customRefObject
 }