chore: NIP

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
 }