vue-comp-doc-gen

vue-comp-doc-gen - это npm пакет для автоматической генерации документации по Vue 3 приложению

Disclaimer

Пакет работает только с компонентами написанными в синтаксисе Composition API. Пакет работает только с Pinia store. Ниже будут приведены примеры. Этот пакет в настоящее время находится в активной разработке. В связи с этим в документации могут встречаться неточности или неполные данные. Мы благодарим вас за понимание и терпение.

Installation

npm install vue-comp-doc-gen  

Usage

npx gen-doc

Features

• Автоматическая генерация документации:
  Создает файл index.html в папке docs, содержащий структурированную и подробную документацию ваших Vue-компонентов и ts файлов.
• Дерево компонентов и ts файлов:
  Сгенерированная документация включает визуальное дерево компонентов, отражающее структуру папок вашего каталога src.
• Подробная информация о компонентах:
  • Описание компонента: Краткий обзор того, что делает компонент, его роль в приложении и функциональность.
  • Props: Входные свойства, определенные для компонентов.
  • Methods: Функции, определенные в ваших компонентах.
  • Watchers: Наблюдатели за изменениями реактивных данных.
  • Computed Properties: Вычисляемые свойства, которые автоматически обновляются при изменении зависимостей.
  • Lifecycle Hooks: Информация о методах жизненного цикла, таких как onMounted, onUpdated и т.д.
• JSDoc Integration:
  Supports inline comments written in JSDoc format, allowing you to add additional context for methods, watchers, computed properties, and more directly in your code.

Project Folder Structure

The project must have the following structure for the documentation generator to work correctly (future versions will allow customization):

projectFolder  
  ├── App.vue  
  ├── folder1  
  │   ├── Component1.vue  
  │   ├── Component2.vue  
  │   └── Component3.vue  
  ├── folder2  
  │   ...  
  └── folderN  

Example

<template>...</template>

<script lang="ts" setup>
/**
 * ExampleComponent.vue
 * This is an example component to demonstrate
 * the features of vue-comp-doc-gen.
 */

import {ref, computed, watch, onMounted, onUpdated, PropType} from 'vue';

/**
 * Props for the component
 * The title of the component (default: "Example Component")
 * The initial count value (default: 0)
 */
const props = defineProps({
  title: {
    type: String,
    required: false,
    default: 'Example Component',
  },
  initialCount: {
    type: Object as PropType<number>,
    required: true,
    default: null,
  },
});

const count = ref<number>(0);
const description = ref<string>('Example');

/**
 * Computed property for double the count
 */
const doubleCount = computed(() => count.value * 2);

const reversedMessage = computed(() => {
  return description.value.split('').reverse().join('');
});

/**
 * Increments the current count by a specified value.
 * @param value - The number to add to the current count.
 * This value can be positive or negative, depending on
 * whether you want to increase or decrease the count.
 */
const addValue = (value: number) => {
  count.value += value;
};

/**
 * Watcher for count changes
 */
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

/**
 * Lifecycle onMounted hook
 */
onMounted(() => {
  console.log('ExampleComponent has been mounted.');
});

onUpdated(() => {
  console.log('ExampleComponent has been updated.');
});
</script>

Result documentation for ExampleComponent.vue

Disclaimer

This package is currently under active development. As such, there might be inaccuracies or incomplete details in the documentation. We appreciate your understanding and patience.

Bug Reports and Feedback

If you encounter any issues or have suggestions, please don't hesitate to open an issue in the GitHub repository.