Implement toRefs in Vue

Vue's toRefs function is a utility that converts a reactive object into a collection of individual reactive refs. This is incredibly useful for destructuring reactive objects in composition API setups, allowing you to maintain reactivity on the destructured properties. Your challenge is to implement this functionality yourself in TypeScript.

Problem Description

You need to create a TypeScript function named toRefs that takes a reactive object as input and returns a new object. This new object should contain the same keys as the input object, but each value should be a reactive ref that mirrors the corresponding property of the original object. When the value of a ref in the returned object changes, the original object's property should update, and vice-versa.

Key Requirements:

• The function should accept an object where properties might be reactive or non-reactive.
• For each property in the input object, the output object should have a corresponding key.
• The value associated with each key in the output object must be a Ref<T> where T is the type of the original property.
• Changes to the refs in the output object should be reflected in the input object.
• Changes to the properties in the input object should be reflected in the corresponding refs in the output object.
• The function should handle various JavaScript primitive types and object types.

Expected Behavior:

If you have a reactive object:

const state = reactive({ count: 0, name: 'Vue' });

Calling toRefs(state) should return an object like:

{
  count: Ref<number>; // a ref with value 0
  name: Ref<string>;  // a ref with value 'Vue'
}

If you then modify count.value to 1, state.count should also become 1. If you modify state.name to 'Vite', name.value should become 'Vite'.

Edge Cases:

• Handling null and undefined values.
• Handling properties that are not directly reactive (though toRefs typically operates on objects created with reactive). For this challenge, assume the input object's properties are accessible and their values can be wrapped.

Examples

Example 1:

import { reactive, ref } from 'vue'; // Assuming these exist for context

// Mocking Vue's reactive and ref for the purpose of this problem's context
// In a real Vue environment, you would import them.
const mockReactive = <T extends object>(obj: T): T => {
  const proxy = new Proxy(obj, {
    get(target, key) {
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      return Reflect.set(target, key, value);
    }
  });
  return proxy as T;
};

const mockRef = <T>(value: T): { value: T } => {
  let internalValue = value;
  return {
    get value() {
      return internalValue;
    },
    set value(newValue) {
      internalValue = newValue;
    }
  };
};

// Your implementation would go here, using mockReactive and mockRef for testing
// const toRefs = (obj: any) => { ... }

const originalState = mockReactive({ count: 0, message: 'Hello' });
const refs = toRefs(originalState); // Assuming your toRefs function is implemented

// Expected output: an object containing refs
console.log(refs.count); // Should be a ref-like object with value 0
console.log(refs.message); // Should be a ref-like object with value 'Hello'

// Demonstrating reactivity
refs.count.value = 5;
console.log(originalState.count); // Should output 5

originalState.message = 'World';
console.log(refs.message.value); // Should output 'World'

Output:

{ value: 0 }
{ value: 'Hello' }
5
World

Explanation:

The toRefs function takes the originalState object. It creates a new object where refs.count is a ref pointing to originalState.count (initially 0) and refs.message is a ref pointing to originalState.message (initially 'Hello'). When refs.count.value is modified, originalState.count is updated. Similarly, when originalState.message is directly modified, refs.message.value is updated.

Example 2:

// Using mockReactive and mockRef as defined in Example 1

const user = mockReactive({
  id: 1,
  details: {
    firstName: 'Jane',
    lastName: 'Doe'
  }
});

const userRefs = toRefs(user);

console.log(userRefs.id.value);
console.log(userRefs.details.value.firstName); // Note: nested objects won't be individually ref-ified by toRefs

Output:

1
Jane

Explanation:

toRefs only creates refs for the top-level properties of the object. Nested objects, like user.details, are assigned as the value to the corresponding ref (userRefs.details). If userRefs.details.value were assigned a new object, user.details would be updated. However, individual properties within user.details (like firstName) are not automatically turned into refs by toRefs itself.

Constraints

• The toRefs function must be implemented in TypeScript.
• The function signature should be function toRefs<T extends object>(obj: T): { [K in keyof T]: Ref<T[K]> }.
• The returned object should contain refs that correctly track the original object's properties.
• The implementation should be efficient and avoid unnecessary overhead.

Notes

• Consider how you would simulate Vue's reactivity system for testing purposes. For this challenge, you can assume a basic reactive and ref implementation or mock them as shown in the examples. The core task is the logic within toRefs.
• Think about the relationship between a ref and the original property it's linked to. How can you ensure that updates flow in both directions?
• The problem statement implies that the input to toRefs is an object for which you want to create refs for its direct properties. You don't need to recursively convert nested objects into refs.