Support for Vue.js script setup syntax

Issue:

I have encountered a problem where documentation.js is not able to generate documentation for Vue components when using the script setup syntax. However, it works correctly for traditional Vue components using <script lang="ts">.

The code snippet below is an example of a Vue component that documentation.js correctly generates documentation for:

<script lang="ts">
/**
 * A simple button component
 * @constructor Button
 */

/**
 * props variables
 *
 * @property {string} color - background color of the button
 * @property {number} width - button width
 * @property {number} height - button height
 * @property {Function} sum - sum function that takes x and y and returns the sum of x and y
 */
const props = defineProps({
  color: {
    type: String,
    required: true,
  },
  width: Number,
  height: Number,
  sum: {
    type: Function,
    required: true,
  },
});

/**
 * This method logs the input parameters to the console.
 * @param {string} text - user text input
 */
function summarize(text) {
  console.log("summarization...");
}

/**
 * The function
 * @param {number} x - one input number
 * @returns {number} This is the result
 */
function increase(x) {
  return x + 1;
}
</script>

However, when the same Vue component is written with the script setup syntax, documentation.js is unable to generate documentation:

<script setup lang="ts">
/**
 * A simple button component
 * @constructor Button
 */

/**
 * props variables
 *
 * @property {string} color - background color of the button
 * @property {number} width - button width
 * @property {number} height - button height
 * @property {Function} sum - sum function that takes x and y and returns the sum of x and y
 */
const props = defineProps({
  color: {
    type: String,
    required: true,
  },
  width: Number,
  height: Number,
  sum: {
    type: Function,
    required: true,
  },
});

/**
 * This method logs the input parameters to the console.
 * @param {string} text - user text input
 */
function summarize(text) {
  console.log("summarization...");
}

/**
 * The function
 * @param {number} x - one input number
 * @returns {number} This is the result
 */
function increase(x) {
  return x + 1;
}
</script>

Expected Output: I expected documentation.js to generate the same documentation as it does for the traditional script syntax, including documentation for props, methods, and any additional jsdoc/tsdoc comments.

I believe the issue lies in the lack of support for the Vue.js script setup syntax. I'd appreciate it if the support for this syntax could be added to the tool. Thank you!

Environment:

What version of documentation.js are you using?: 14.0.2
How are you running documentation.js (on the CLI, Node.js API, Grunt, other?): CLI
Node.js version: v19.9.0
Vue version: 3.2.45
TypeScript version: 4.7.4
OS: macOS

documentationjs / documentation

Support for Vue.js script setup syntax #1604