feat(experimental): expose ref macro types using separate d.ts file

Author: yyx990803

packages/runtime-core/src/helpers/refSugar.ts

@@ -149,6 +149,7 @@ declare module '@vue/reactivity' {
 export {
   ReactiveEffectOptions,
   DebuggerEvent,
+  DebuggerOptions,
   TrackOpTypes,
   TriggerOpTypes,
   Ref,
@@ -351,13 +352,3 @@ const _compatUtils = {
 export const compatUtils = (
   __COMPAT__ ? _compatUtils : null
 ) as typeof _compatUtils
-
-// Ref sugar macros ------------------------------------------------------------
-// for dts generation only
-export {
-  $ref,
-  $shallowRef,
-  $computed,
-  $raw,
-  $fromRefs
-} from './helpers/refSugar'

packages/runtime-core/src/index.ts

@@ -5,21 +5,9 @@ type _defineEmits = typeof defineEmits
 type _defineExpose = typeof defineExpose
 type _withDefaults = typeof withDefaults
 
-type _ref = typeof $ref
-type _shallowRef = typeof $shallowRef
-type _computed = typeof $computed
-type _fromRefs = typeof $fromRefs
-type _raw = typeof $raw
-
 declare global {
   const defineProps: _defineProps
   const defineEmits: _defineEmits
   const defineExpose: _defineExpose
   const withDefaults: _withDefaults
-
-  const $ref: _ref
-  const $shallowRef: _shallowRef
-  const $computed: _computed
-  const $fromRefs: _fromRefs
-  const $raw: _raw
 }

packages/runtime-core/types/scriptSetupHelpers.d.ts

@@ -0,0 +1,76 @@
+import {
+  Ref,
+  UnwrapRef,
+  ComputedRef,
+  WritableComputedOptions,
+  DebuggerOptions,
+  WritableComputedRef,
+  ShallowUnwrapRef
+} from '@vue/runtime-dom'
+
+declare const RefMarker: unique symbol
+type RefValue<T> = T & { [RefMarker]?: any }
+
+declare const ComputedRefMarker: unique symbol
+type ComputedRefValue<T> = T & { [ComputedRefMarker]?: any }
+
+declare const WritableComputedRefMarker: unique symbol
+type WritableComputedRefValue<T> = T & { [WritableComputedRefMarker]?: any }
+
+/**
+ * Vue ref transform macro for binding refs as reactive variables.
+ */
+declare function _$<T>(arg: ComputedRef<T>): ComputedRefValue<T>
+declare function _$<T>(arg: WritableComputedRef<T>): WritableComputedRefValue<T>
+declare function _$<T>(arg: Ref<T>): RefValue<T>
+declare function _$<T extends object>(arg?: T): ShallowUnwrapRef<T>
+
+/**
+ * Vue ref transform macro for accessing underlying refs of reactive varaibles.
+ */
+declare function _$$<T>(value: T): ComputedRef<T>
+declare function _$$<T>(
+  value: WritableComputedRefValue<T>
+): WritableComputedRef<T>
+declare function _$$<T>(value: RefValue<T>): Ref<T>
+declare function _$$<T extends object>(arg: T): ToRawRefs<T>
+
+type ToRawRefs<T extends object> = {
+  [K in keyof T]: T[K] extends ComputedRefValue<infer V>
+    ? ComputedRefValue<V>
+    : T[K] extends WritableComputedRefValue<infer V>
+    ? WritableComputedRef<V>
+    : T[K] extends RefValue<infer V>
+    ? Ref<V>
+    : T[K] extends object
+    ? T[K] extends
+        | Function
+        | Map<any, any>
+        | Set<any>
+        | WeakMap<any, any>
+        | WeakSet<any>
+      ? T[K]
+      : ToRawRefs<T[K]>
+    : T[K]
+}
+
+declare function _$ref<T>(arg?: T | Ref<T>): RefValue<UnwrapRef<T>>
+
+declare function _$shallowRef<T>(arg?: T): RefValue<T>
+
+declare function _$computed<T>(
+  getter: () => T,
+  debuggerOptions?: DebuggerOptions
+): ComputedRefValue<T>
+declare function _$computed<T>(
+  options: WritableComputedOptions<T>,
+  debuggerOptions?: DebuggerOptions
+): WritableComputedRefValue<T>
+
+declare global {
+  const $: typeof _$
+  const $$: typeof _$$
+  const $ref: typeof _$ref
+  const $shallowRef: typeof _$shallowRef
+  const $computed: typeof _$computed
+}

packages/vue/ref-macros.d.ts

@@ -1,15 +1,17 @@
 import { WritableComputedRef } from '@vue/reactivity'
-import {
-  expectType,
-  $ref,
-  $shallowRef,
-  $computed,
-  $fromRefs,
-  $raw,
-  ref,
-  Ref,
-  ComputedRef
-} from './index'
+import { expectType, ref, Ref, ComputedRef } from './index'
+import 'vue/ref-macros'
+
+// wrapping refs
+// normal
+// computed
+// writable computed
+
+// destructure
+const { x, y, z } = $(useFoo())
+expectType<number>(x)
+expectType<string>(y)
+expectType<number>(z)
 
 // $ref
 expectType<number>($ref(1))
@@ -45,23 +47,19 @@ function useFoo() {
   }
 }
 
-// $fromRefs
-const { x, y, z } = $fromRefs(useFoo())
-expectType<number>(x)
-expectType<string>(y)
-expectType<number>(z)
-
-// $raw
-expectType<Ref<number>>($raw(x))
-expectType<Ref<string>>($raw(y))
+// $$
+expectType<Ref<number>>($$(x))
+expectType<Ref<string>>($$(y))
 
 const c = $computed(() => 1)
-const cRef = $raw(c)
+const cRef = $$(c)
 expectType<ComputedRef<number>>(cRef)
 
 const c2 = $computed({
   get: () => 1,
   set: () => {}
 })
-const c2Ref = $raw(c2)
+const c2Ref = $$(c2)
 expectType<WritableComputedRef<number>>(c2Ref)
+
+// $$ on object