vue-component-meta

Statically extract metadata such as props, events, slots, and exposed from Vue components. Useful for auto-generating component documentation or displaying component APIs in tools like Storybook.

Installation

npm install vue-component-meta typescript

Usage

Create a Checker from tsconfig.json

import { createChecker } from 'vue-component-meta';

const checker = createChecker('/path/to/tsconfig.json', {
  schema: true, // Enable schema parsing
});

const meta = checker.getComponentMeta('/path/to/MyComponent.vue');

Create a Checker from JSON Configuration

import { createCheckerByJson } from 'vue-component-meta';

const checker = createCheckerByJson('/project/root', {
  include: ['src/**/*.vue'],
  compilerOptions: { /* ... */ },
  vueCompilerOptions: { /* ... */ },
});

API

`checker.getComponentMeta(filePath, exportName?)`

Get the metadata of a component. exportName defaults to 'default'.

The returned ComponentMeta object contains:

interface ComponentMeta {
  name?: string;
  description?: string;
  type: TypeMeta;
  props: PropertyMeta[];
  events: EventMeta[];
  slots: SlotMeta[];
  exposed: ExposeMeta[];
}

`checker.getExportNames(filePath)`

Get all export names of a file.

`checker.updateFile(filePath, content)`

Update file content (for virtual files or live editing).

`checker.deleteFile(filePath)`

Remove a file from the project.

`checker.reload()`

Reload the tsconfig.json configuration.

`checker.clearCache()`

Clear cached file content.

`checker.getProgram()`

Get the underlying TypeScript Program instance.

Metadata Structures

PropertyMeta (Props)

interface PropertyMeta {
  name: string;
  description: string;      // Read from JSDoc
  type: string;             // Type string
  default?: string;         // Default value
  required: boolean;
  global: boolean;          // Whether it's a global prop
  tags: { name: string; text?: string }[];  // JSDoc tags
  schema: PropertyMetaSchema;
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type;
}

EventMeta

interface EventMeta {
  name: string;
  description: string;
  type: string;
  signature: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema[];
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type | undefined;
}

SlotMeta

interface SlotMeta {
  name: string;
  description: string;
  type: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema;
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type;
}

ExposeMeta

interface ExposeMeta {
  name: string;
  description: string;
  type: string;
  tags: { name: string; text?: string }[];
  schema: PropertyMetaSchema;
  getDeclarations(): Declaration[];
  getTypeObject(): ts.Type;
}

Options

interface MetaCheckerOptions {
  schema?: boolean | {
    ignore?: (string | ((name: string, type: ts.Type, typeChecker: ts.TypeChecker) => boolean))[];
  };
  printer?: ts.PrinterOptions;
}

`schema`

Controls whether to parse the schema structure of types. Set to true to enable, or pass an object to configure types to ignore.

const checker = createChecker(tsconfig, {
  schema: {
    ignore: ['HTMLElement', (name) => name.startsWith('Internal')],
  },
});

Related Packages

vue-component-type-helpers - Type helper utilities

License

MIT License

Current Tags

1.8.27 ... latest (2 years ago)