Implementing KeepAlive for Component Caching in Vue.js (TypeScript)

KeepAlive is a powerful Vue.js component that can dramatically improve application performance by caching inactive components. This challenge asks you to implement a basic KeepAlive wrapper for a Vue component, demonstrating how to cache and restore component state. This is particularly useful for components that are frequently shown and hidden, preventing costly re-renders and data re-initialization.

Problem Description

You are tasked with creating a KeepAliveWrapper component in Vue.js using TypeScript. This component should wrap another component and cache its state when it becomes inactive. When the wrapped component becomes active again, it should restore the cached state.

What needs to be achieved:

Create a Vue component named KeepAliveWrapper.
Accept a component prop, which is the component to be wrapped and cached.
Maintain a cached state of the wrapped component.
When the wrapped component is inactive (e.g., removed from the DOM), cache its state.
When the wrapped component becomes active again, restore the cached state.
The KeepAliveWrapper should render the wrapped component.

Key Requirements:

The KeepAliveWrapper must be written in TypeScript.
The cached state should be a simple object containing any props passed to the wrapped component. For simplicity, assume the component only accepts props.
The component should use provide and inject to communicate the cached state between the wrapper and the wrapped component.
The wrapped component should be able to access the cached props via inject.

Expected Behavior:

When the KeepAliveWrapper is mounted, it renders the wrapped component with the initial props.
When the KeepAliveWrapper is unmounted or the wrapped component is conditionally rendered out of the DOM, the props are cached.
When the KeepAliveWrapper is remounted or the wrapped component is conditionally rendered back into the DOM, the cached props are injected into the wrapped component, effectively restoring its state.

Edge Cases to Consider:

What happens if the props change while the component is inactive? (For this challenge, assume the cached props are the last known props before deactivation. No complex change tracking is required.)
How to handle components that don't accept props? (Assume the wrapped component always accepts props for this challenge.)
What happens if the wrapped component is destroyed before it can be cached? (This is acceptable; no caching needs to occur in this scenario.)

Examples

Example 1:

Input:
Wrapped Component:
<template>
  <div>
    <p>Name: {{ name }}</p>
  </div>
</template>
<script setup lang="ts">
import { inject } from 'vue';

const name = inject('cachedName', 'Default Name');
</script>

KeepAliveWrapper props: { component: WrappedComponent }
Initial props: { name: "Alice" }

Output:
Initially, the wrapped component renders "Name: Alice".
After being cached and remounted, the wrapped component still renders "Name: Alice".

Explanation: The KeepAliveWrapper caches the name prop ("Alice") when the wrapped component is deactivated. When the component is reactivated, the cached value is injected, restoring the component's state.

Example 2:

Input:
Wrapped Component:
<template>
  <div>
    <p>Name: {{ name }}</p>
  </div>
</template>
<script setup lang="ts">
import { inject } from 'vue';

const name = inject('cachedName', 'Default Name');
</script>

KeepAliveWrapper props: { component: WrappedComponent }
Initial props: { name: "Bob" }
Props changed to { name: "Charlie" } while inactive.

Output:
Initially, the wrapped component renders "Name: Bob".
After being cached and remounted, the wrapped component renders "Name: Charlie".

Explanation: The KeepAliveWrapper caches the last known props. Since the props changed to { name: "Charlie" } before the component was remounted, that's the value that's restored.

Constraints

The solution must be written in TypeScript.
The KeepAliveWrapper must use provide and inject for state management.
The wrapped component must be able to access the cached props via inject.
The solution should be reasonably efficient and avoid unnecessary re-renders.
The solution should handle the case where the wrapped component does not have any props. (Although, as stated above, assume it always has props for this challenge).

Notes

Consider using the onBeforeUnmount and onMounted lifecycle hooks to manage caching and restoration.
Think about how to handle different prop types. For simplicity, assume all props are strings in this challenge.
This is a simplified implementation of KeepAlive. A real-world implementation would likely be more complex, handling asynchronous data fetching and more sophisticated state management.
Focus on demonstrating the core concepts of caching and restoring component state.