Vue Transform Plugins: Customizing Build Output

Transform plugins in Vue.js allow you to modify the output of your Vue components during the build process. This is incredibly useful for tasks like automatically adding prefixes to class names, injecting code, or modifying the component's structure. This challenge asks you to implement a simple transform plugin that adds a unique identifier attribute to all div elements within a Vue component's template.

Problem Description

You need to create a Vue transform plugin that modifies the template of a Vue component. The plugin should iterate through the Abstract Syntax Tree (AST) of the template and find all div elements. For each div element found, it should add a unique identifier attribute named data-vue-transform-id with a randomly generated alphanumeric string (e.g., data-vue-transform-id="aBcDeFgHiJkLmNoPqRsTuVwXyZ123456").

Key Requirements:

AST Traversal: The plugin must be able to parse the Vue component's template into an AST.
Element Identification: The plugin must accurately identify div elements within the AST.
Attribute Modification: The plugin must add the data-vue-transform-id attribute to each identified div element.
Random ID Generation: The identifier should be a random alphanumeric string of length 20.
No Template Structure Changes: The plugin should only add attributes; it should not alter the overall structure of the template (e.g., nesting, parent-child relationships).

Expected Behavior:

Given a Vue component template, the plugin should return a modified template string where each div element has the data-vue-transform-id attribute added. The identifier should be unique for each div element.

Edge Cases to Consider:

Nested div elements: The plugin should correctly identify and modify all div elements, regardless of their nesting level.
div elements with existing attributes: The plugin should add the new attribute without overwriting existing attributes.
Empty templates: The plugin should handle empty templates gracefully without errors.
Templates with no div elements: The plugin should return the original template unchanged.

Examples

Example 1:

Input: `<template><div>Hello</div><div>World</div></template>`
Output: `<template><div data-vue-transform-id="aBcDeFgHiJkLmNoPqRsTuVwXyZ123456">Hello</div><div data-vue-transform-id="aBcDeFgHiJkLmNoPqRsTuVwXyZ123456">World</div></template>`
Explanation: Two `div` elements were found, and each was assigned a unique `data-vue-transform-id` attribute.

Example 2:

Input: `<template><div><p>Hello</p></div><div>World</div></template>`
Output: `<template><div data-vue-transform-id="aBcDeFgHiJkLmNoPqRsTuVwXyZ123456"><p>Hello</p></div><div data-vue-transform-id="aBcDeFgHiJkLmNoPqRsTuVwXyZ123456">World</div></template>`
Explanation: Two `div` elements were found, one containing a paragraph, and each was assigned a unique `data-vue-transform-id` attribute.

Example 3:

Input: `<template><p>Hello</p></template>`
Output: `<template><p>Hello</p></template>`
Explanation: No `div` elements were found, so the template remains unchanged.

Constraints

Random ID Length: The generated random ID must be exactly 20 characters long.
Character Set: The random ID must consist of alphanumeric characters (a-z, A-Z, 0-9).
Performance: The plugin should be reasonably efficient. While not a primary concern for this challenge, avoid excessively complex or inefficient AST traversal.
Input: The input will always be a valid Vue component template string.
Output: The output must be a valid Vue component template string.

Notes

You'll need to use a Vue plugin that provides AST parsing capabilities. @vue/compiler-sfc is a good choice.
Consider using a library like uuid or a similar function to generate random alphanumeric strings.
Focus on the core logic of identifying div elements and adding the attribute. Error handling and more complex template transformations are beyond the scope of this challenge.
The goal is to demonstrate your understanding of Vue transform plugins and AST manipulation.