Implementing a Custom v-Show Directive in Vue.js (TypeScript)

This challenge asks you to implement a custom v-show directive for Vue.js using TypeScript. The v-show directive controls the visibility of an element by adding or removing the display CSS property. This is a fundamental directive in Vue and understanding how to implement it provides valuable insight into Vue's internals and custom directive creation.

Problem Description

You need to create a custom Vue directive named v-show that toggles the display property of an element based on an expression. The directive should accept a boolean expression as its argument. When the expression evaluates to true, the element should be visible ( display: block; or the element's default display value). When the expression evaluates to false, the element should be hidden (display: none;).

Key Requirements:

• Directive Name: The directive must be named show.
• Boolean Expression: The directive must accept a boolean expression as its argument.
• display Property: The directive must modify the display CSS property of the element.
• Reactivity: The directive must be reactive. When the bound expression changes, the element's visibility should update accordingly.
• Initial State: The directive should respect the initial value of the bound expression. If the expression is initially true, the element should be visible; if it's initially false, the element should be hidden.
• Element Type: The directive should work with any valid HTML element.

Expected Behavior:

1. When the directive is bound to an element, the element's display property should be set to none if the expression evaluates to false, or to the element's default display value (e.g., block, inline, inline-block) if the expression evaluates to true.
2. When the expression changes, the element's display property should be updated accordingly.
3. The directive should not interfere with any other CSS styles applied to the element.

Edge Cases to Consider:

• Null/Undefined Expression: Handle cases where the expression might be null or undefined. Treat these as false for hiding purposes.
• Non-Boolean Expression: While the directive expects a boolean, ensure it handles other data types gracefully (e.g., by converting them to booleans using Boolean()).
• Element Already Hidden/Visible: The directive should correctly handle elements that are already hidden or visible when the directive is bound.
• Multiple v-show Directives: Consider how the directive interacts with other directives on the same element.

Examples

Example 1:

Input:  <div v-show="isVisible">This content should be visible.</div>
        data: { isVisible: true }
Output: The div element is visible, displaying "This content should be visible."
Explanation: The expression `isVisible` is `true`, so the element's `display` is set to its default value (likely `block`).

Example 2:

Input:  <div v-show="isHidden">This content should be hidden.</div>
        data: { isHidden: false }
Output: The div element is hidden (display: none).
Explanation: The expression `isHidden` is `false`, so the element's `display` is set to `none`.

Example 3:

Input: <div v-show="someValue">This content's visibility depends on someValue.</div>
       data: { someValue: 0 }
Output: The div element is hidden (display: none).
Explanation: The expression `someValue` is 0, which is coerced to `false` by the directive.

Constraints

• Vue Version: Assume Vue 3.
• TypeScript: The solution must be written in TypeScript.
• Performance: The directive should be efficient and avoid unnecessary DOM manipulations. Avoid using setTimeout or other methods that introduce delays.
• Directive API: Adhere to the standard Vue directive API ( bind, update, unbind ).
• No External Libraries: Do not use any external libraries.

Notes

• The update hook is the most important hook for this directive, as it's responsible for updating the element's visibility whenever the bound expression changes.
• Consider using element.style.display to set the display property.
• Remember to handle the initial state of the expression correctly in the bind hook.
• Think about how to preserve the element's original display value when it's initially hidden, so that it can be restored when the expression becomes true. You can store this value in the element's dataset.