Implement Vue's v-show Directive

Vue's v-show directive is a fundamental tool for conditionally displaying elements. Unlike v-if, v-show always renders the element in the DOM but toggles its display CSS property. This challenge asks you to replicate the behavior of v-show using plain TypeScript, simulating how a custom directive might work.

Problem Description

Your task is to create a function that acts like Vue's v-show directive. This function will receive a DOM element and a boolean value. Based on the boolean value, it should either make the element visible or hide it by manipulating its display style.

Key Requirements:

• The function should accept a DOM HTMLElement and a boolean as arguments.
• If the boolean is true, the element should be visible.
• If the boolean is false, the element should be hidden.
• The visibility should be controlled by setting the display CSS property of the element.
• When hiding an element, preserve its original display value if it was explicitly set, otherwise use none. This is crucial for correctly restoring the element's display state when it becomes visible again.

Expected Behavior:

When vShow(element, true) is called, the element should be displayed according to its original styling or default display behavior. When vShow(element, false) is called, the element's display style should be set to none.

Edge Cases:

• What if the element already has an inline display style set? This should be preserved when toggling back to visible.
• What if the element is initially hidden using a CSS class that sets display: none? The v-show directive should still work by directly manipulating the inline display style.

Examples

Example 1:

Input:
element = <div id="myDiv">Hello World</div> (initial inline styles: none)
value = true

Output:
The element's style.display will be set to an appropriate value (e.g., "block", "inline", or its original value if it had one). For this simple div, it would likely become "block".

Explanation: When the value is true, the element is made visible. The v-show directive typically tries to restore the original display value if it was explicitly set. If no inline style was present and it was hidden by default CSS rules, it will be displayed with its default block behavior.

Example 2:

Input:
element = <span id="mySpan">Inline Text</span> (initial inline styles: none)
value = false

Output:
The element's style.display will be set to "none".

Explanation: When the value is false, the element is hidden by setting its display to none.

Example 3:

Input:
element = <p id="myPara" style="display: inline-block;">Some text</p>
value = true

Output:
The element's style.display will be set back to "inline-block".

Explanation: This demonstrates preserving the original inline display value when toggling visibility back to true.

Constraints

• The input element will always be a valid HTMLElement.
• The input value will always be a boolean.
• The function should be performant and suitable for use in a dynamic UI framework.

Notes

To implement the preservation of the original display style, you might need a way to store this value. Consider how Vue itself might handle this. You could associate this stored value with the element itself, perhaps using a data attribute or a separate data structure.

Your function signature will likely be:

function vShow(el: HTMLElement, value: boolean): void;