feat: `unrefy`

Hello everyone,

While on a project, i had to dynamically call functions but the arguments I called them with were sometimes Refs. So my first thought was wrapping the function using the reactify utility; But then I remembered the wrapped function returns ComputedRef<T> and is evaluated on every changes of the arguments. And I want the function to only return T and only when I call it. I started looking for other utilities that might help and either did not found suitable one or did not search thoroughly enough.

This is where unrefy comes from. Below is it’s documentation entry.

Pull Request : #789

Documentation

Convert a plain function into a function that unref it’s aguments before every call. The converted function accepts refs and raw values as its arguments and returns the same value the unconverted function returns, with proper typing.

::: tip Make sure you’re using the right tool for the job. Using reactify might be more pertinent in some cases where you want to evaluate the function on each changes of it’s arguments. :::

Usage

import axios from 'axios'
import { ref } from 'vue-demi'
import { unrefy } from '.'

const url = ref('https://httpbin.org/post')
const data = ref({foo: 'bar'})
const post = (url, data) => axios.post(url, data)
const postUnrefied = unrefy(post)

post(url, data)           /* ❌ Will throw an error because the arguments are refs */
postUnrefied(url, data)   /* ✔️ Will Work because the arguments will be "unrefied" */

Related Functions

• reactify

Source

import { unref } from 'vue-demi'
import { MaybeRef } from '../../shared/utils'

/** Unrefied method. */
type Unrefy<T> = T extends (...args: infer A) => infer R ? (...args: {
  [K in keyof A]: MaybeRef<A[K]>
}) => R : never

/**
 * Convert a plain function into a function that unref it's aguments before every call.
 * The converted function accepts refs as its arguments and returns the same value
 * the unconverted function returns, with proper typing.
 * @param fn - Source function
 */
export const unrefy = <T extends Function>(fn: T): Unrefy<T> => {
  return function(this: any, ...args: any[]) {
    return fn.apply(this, args.map(i => unref(i)))
  } as Unrefy<T>
}

[antfu]

https://github.com/antfu/unplugin-vue2-script-setup#configurations

[antfu]

I see. But maybe the ref sugar could be a better solution for this? https://github.com/vuejs/rfcs/discussions/369