Dynamic Attribute Directive Plugin in Vue.js

This challenge asks you to create a Vue.js plugin that registers a custom directive. This directive will dynamically add or remove attributes to an HTML element based on a provided value. This is useful for scenarios like conditionally applying CSS classes, adding data attributes for tracking, or dynamically setting ARIA attributes.

Problem Description

You need to build a Vue.js plugin that registers a directive named dynamic-attr. This directive will accept a value (which can be a string or an object) and apply or remove attributes from the element it's bound to.

• Value Types: The directive can accept either:
  • A string: In this case, the directive should add an attribute named after the string with a value of "true".
  • An object: In this case, the directive should iterate through the object's keys and add attributes named after the keys with values corresponding to the object's values.
• Directive Behavior: The directive should:
  • When the bound value changes, it should update the attributes on the element accordingly.
  • If the value is null, undefined, or an empty string, it should remove all attributes added by the directive.
  • If the value is an empty object, it should remove all attributes added by the directive.
• Plugin Structure: The plugin should be a function that takes the Vue instance as an argument and registers the directive.

Examples

Example 1:

Input:
Template: <div v-dynamic-attr="true"></div>
Value: true

Output:
<div data-dynamic-attr="true"></div>

Explanation: The directive adds the attribute `data-dynamic-attr` with the value "true".

Example 2:

Input:
Template: <div v-dynamic-attr="{ 'data-tracking-id': '123', 'aria-label': 'My Element' }"></div>
Value: { 'data-tracking-id': '123', 'aria-label': 'My Element' }

Output:
<div data-tracking-id="123" aria-label="My Element"></div>

Explanation: The directive adds the attributes `data-tracking-id` with value "123" and `aria-label` with value "My Element".

Example 3:

Input:
Template: <div v-dynamic-attr="{ 'data-tracking-id': '123' }"></div>
Value: null

Output:
<div></div>

Explanation: The directive removes the attribute `data-tracking-id`.

Example 4:

Input:
Template: <div v-dynamic-attr="{ 'data-tracking-id': '123' }"></div>
Value: ""

Output:
<div></div>

Explanation: The directive removes the attribute `data-tracking-id`.

Constraints

• The plugin must be written in TypeScript.
• The directive should only add attributes that are not already present on the element. It should not overwrite existing attributes.
• The directive should handle changes to the bound value efficiently. Avoid unnecessary DOM manipulations.
• The directive should be compatible with Vue 3.

Notes

• Consider using Object.keys() to iterate over the keys of the object value.
• Think about how to handle the case where the bound value changes from a string to an object, or vice versa.
• The attribute names should be strings.
• The plugin should be reusable and not tightly coupled to any specific component.
• Use nextTick to ensure DOM updates are reflected correctly.