Implementing a Basic Reactive State Manager in Vue (TypeScript)

Reactive state management is a cornerstone of Vue.js, allowing components to automatically update when data changes. This challenge asks you to implement a simplified version of Vue's reactivity system, focusing on the core concept of tracking dependencies and triggering updates. This exercise will solidify your understanding of how reactivity works under the hood and provide a foundation for more complex state management solutions.

Problem Description

You are tasked with creating a basic reactive state manager. This manager should allow you to define reactive variables (using a ref function) and automatically trigger updates in any functions (called "effects") that depend on those variables. The core functionality revolves around dependency tracking and change notification.

What needs to be achieved:

ref function: A function that takes a value and returns a reactive object. This object should have a .value property that holds the current value and can be accessed and modified.
Dependency Tracking: When an effect (a function) reads a reactive variable's .value, the effect should be registered as a dependency of that variable.
Change Notification: When a reactive variable's .value is changed, all registered effects should be re-executed.

Key Requirements:

The solution must be written in TypeScript.
The ref function should return an object with a .value property.
Effects should be functions that can be passed to the reactive state manager.
The state manager should handle multiple effects for a single reactive variable.
The state manager should handle multiple reactive variables.

Expected Behavior:

When a reactive variable is initially created, its .value should be set to the provided initial value.
When an effect reads a reactive variable's .value, the effect should be added to a dependency list for that variable.
When a reactive variable's .value is modified, all effects that depend on that variable should be re-executed.
Effects should be executed in an order that doesn't cause infinite loops (though strict ordering isn't required for this simplified implementation).

Edge Cases to Consider:

Effects that read the same reactive variable multiple times. (Should only be added to the dependency list once per execution).
Nested reactive variables (e.g., a reactive variable containing another reactive variable). (This challenge does not require handling nested reactivity).
Effects that modify the same reactive variable. (This challenge does not require handling this, and may lead to infinite loops if not handled carefully in a full implementation).

Examples

Example 1:

// Assume a 'reactive' object with ref and effect functions is available
const count = reactive.ref(0);

const effect1 = () => {
  console.log("Effect 1: Count is", count.value);
};

const effect2 = () => {
  console.log("Effect 2: Count is", count.value);
};

reactive.effect(effect1);
reactive.effect(effect2);

count.value = 1; // Output: Effect 1: Count is 1, Effect 2: Count is 1
count.value = 2; // Output: Effect 1: Count is 2, Effect 2: Count is 2

Explanation: Both effect1 and effect2 are registered as dependencies of count. When count.value changes, both effects are re-executed.

Example 2:

// Assume a 'reactive' object with ref and effect functions is available
const name = reactive.ref("Alice");

const effect3 = () => {
  console.log("Effect 3: Name is", name.value);
};

reactive.effect(effect3);

name.value = "Bob"; // Output: Effect 3: Name is Bob

Explanation: effect3 is registered as a dependency of name. When name.value changes, effect3 is re-executed.

Example 3: (Edge Case - Multiple Reads in a Single Effect)

// Assume a 'reactive' object with ref and effect functions is available
const message = reactive.ref("Hello");

const effect4 = () => {
  console.log("Effect 4 - First read:", message.value);
  console.log("Effect 4 - Second read:", message.value);
};

reactive.effect(effect4);

message.value = "World"; // Output: Effect 4 - First read: Hello, Effect 4 - Second read: Hello, Effect 4 - First read: World, Effect 4 - Second read: World

Explanation: Even though message.value is read twice within effect4, the effect should only be added to the dependency list of message once per execution.

Constraints

Time Complexity: The dependency tracking and change notification should be reasonably efficient. Avoid unnecessary iterations.
Space Complexity: The dependency lists should not grow excessively large.
Input Type: The ref function should accept any type as its initial value.
Effect Function: The effect function must be a function that takes no arguments and returns nothing (void).
No external libraries: You cannot use any external libraries for reactivity. This is a simplified implementation.

Notes

Think about how to store dependencies for each reactive variable. A simple array or Set might be suitable.
Consider how to trigger effects when a reactive variable's value changes.
This is a simplified implementation and does not cover all aspects of Vue's reactivity system (e.g., computed properties, watchers, asynchronous updates).
Focus on the core concepts of dependency tracking and change notification.
The reactive object will be provided as an interface. You only need to implement the ref and effect functions. You don't need to define the reactive object itself.
The goal is to demonstrate understanding of the fundamental principles of reactive state management.