{"_id":"@azee/vue-component-meta","_rev":"2-4dcd2bbd06def5e19493a6383f52cde5","name":"@azee/vue-component-meta","dist-tags":{"latest":"3.0.9"},"versions":{"2.3.18":{"name":"@azee/vue-component-meta","version":"2.3.18","license":"MIT","_id":"@azee/vue-component-meta@2.3.18","maintainers":[{"name":"azee","email":"aziztitu1996@gmail.com"}],"homepage":"https://github.com/vuejs/language-tools#readme","bugs":{"url":"https://github.com/vuejs/language-tools/issues"},"dist":{"shasum":"dc54aa9161a5e92523a770be4f8c260e72d154d5","tarball":"https://registry.npmjs.org/@azee/vue-component-meta/-/vue-component-meta-2.3.18.tgz","fileCount":9,"integrity":"sha512-y4jL2KpuxJCaWeMz91x7A5jAUDY87Irnsw9xCH/4lulhhPRy+/KkK92oSsp6/8XAhb5Vo46qTVsteSNGeYD68Q==","signatures":[{"sig":"MEYCIQDvgzwPF9Q09A4VSekKe8M41U2/LUuier2zUQLJG9+8aAIhAKqX3ytB3DSDqtiE7iOSfAv5Q06wPVd9hnv0+h3vpIJw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45897},"types":"./index.d.ts","gitHead":"4cbe46831d3df6863d2fc324a66a8ede29572ecf","private":false,"_npmUser":{"name":"azee","email":"aziztitu1996@gmail.com"},"repository":{"url":"git+https://github.com/vuejs/language-tools.git","type":"git","directory":"packages/component-meta"},"_npmVersion":"lerna/9.0.7/node@v22.21.1+x64 (win32)","description":"`@azee/vue-component-meta` allows you to extract the meta-data like props, slots, events, etc from your components via static code analysis. You can even generate description for your props from your source code. This helps document your components via au","directories":{},"sideEffects":false,"_nodeVersion":"22.21.1","dependencies":{"path-browserify":"^1.0.1","@volar/typescript":"2.4.11","@azee/vue-language-core":"^2.3.18","@azee/vue-component-type-helpers":"^2.3.18"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@types/node":"^22.10.4","@types/path-browserify":"^1.0.1"},"peerDependencies":{"typescript":"*"},"peerDependenciesMeta":{"typescript":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/vue-component-meta_2.3.18_1777537475360_0.02491345294091407","host":"s3://npm-registry-packages-npm-production"}},"3.0.9":{"name":"@azee/vue-component-meta","version":"3.0.9","license":"MIT","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/vuejs/language-tools.git","directory":"packages/component-meta"},"dependencies":{"@azee/vue-component-type-helpers":"3.0.9","@azee/vue-language-core":"3.0.9","@volar/typescript":"2.4.23","path-browserify":"^1.0.1"},"peerDependencies":{"typescript":"^5.7.2"},"devDependencies":{"@types/node":"^22.10.4","@types/path-browserify":"^1.0.1"},"gitHead":"5accd2445942272a632be066856fecd857b06f0e","types":"./index.d.ts","_id":"@azee/vue-component-meta@3.0.9","description":"`@azee/vue-component-meta` allows you to extract the meta-data like props, slots, events, etc from your components via static code analysis. You can even generate description for your props from your source code. This helps document your components via au","bugs":{"url":"https://github.com/vuejs/language-tools/issues"},"homepage":"https://github.com/vuejs/language-tools#readme","_nodeVersion":"22.21.1","_npmVersion":"lerna/9.0.7/node@v22.21.1+x64 (win32)","dist":{"integrity":"sha512-vQRPrqbHgUrU3lBbYk2ymmk54iljG4G9Nl+hlLh/tutYLWh4AvOHtEsopEi1qU/FNS4azpd8S1Dvw2koi8h+sw==","shasum":"c8b0391185186d88faa54b63286ac8ececbaaefd","tarball":"https://registry.npmjs.org/@azee/vue-component-meta/-/vue-component-meta-3.0.9.tgz","fileCount":11,"unpackedSize":45271,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDVoB/H5+5bzyHLZRf3OrCu+MfALNQ84ANTBoXhAs41vgIhALxfwtxH2GLTDm8KJef+cPS80zR78byXbUdsYqD4Dfhc"}]},"_npmUser":{"name":"azee","email":"aziztitu1996@gmail.com"},"directories":{},"maintainers":[{"name":"azee","email":"aziztitu1996@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-component-meta_3.0.9_1777544789200_0.6667322468562882"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-30T08:24:35.242Z","modified":"2026-04-30T10:26:29.437Z","2.3.18":"2026-04-30T08:24:35.503Z","3.0.9":"2026-04-30T10:26:29.330Z"},"bugs":{"url":"https://github.com/vuejs/language-tools/issues"},"license":"MIT","homepage":"https://github.com/vuejs/language-tools#readme","repository":{"type":"git","url":"git+https://github.com/vuejs/language-tools.git","directory":"packages/component-meta"},"description":"`@azee/vue-component-meta` allows you to extract the meta-data like props, slots, events, etc from your components via static code analysis. You can even generate description for your props from your source code. This helps document your components via au","maintainers":[{"name":"azee","email":"aziztitu1996@gmail.com"}],"readme":"# @azee/vue-component-meta\r\n\r\n`@azee/vue-component-meta` allows you to extract the meta-data like props, slots, events, etc from your components via static code analysis. You can even generate description for your props from your source code. This helps document your components via automation. Please refer to the [reference](#reference) section for references.\r\n\r\n## Guide 📗\r\n\r\nFirst of all, you need to create a component meta checker using `createChecker`:\r\n\r\n```ts\r\nimport * as url from 'url';\r\nimport path from 'path';\r\n\r\nimport type { MetaCheckerOptions } from '@azee/vue-component-meta';\r\nimport { createChecker } from '@azee/vue-component-meta';\r\n\r\nconst __dirname = url.fileURLToPath(new URL('.', import.meta.url));\r\n\r\nconst checkerOptions: MetaCheckerOptions = {\r\n  forceUseTs: true,\r\n  schema: { ignore: ['MyIgnoredNestedProps'] },\r\n  printer: { newLine: 1 },\r\n};\r\n\r\nconst tsconfigChecker = createChecker(\r\n  // Write your tsconfig path\r\n  path.join(__dirname, 'path-to-tsconfig'),\r\n  checkerOptions\r\n);\r\n```\r\n\r\nNow, you can extract the component meta using `getComponentMeta` method of checker:\r\n\r\n```ts\r\nimport * as url from 'url';\r\nimport path from 'path';\r\n\r\nconst __dirname = url.fileURLToPath(new URL('.', import.meta.url));\r\n\r\nconst componentPath = path.join(__dirname, 'path-to-component');\r\nconst meta = checker.getComponentMeta(componentPath);\r\n```\r\n\r\nThis meta contains really useful stuff like component props, slots, events and more. You can refer to its [type definition](https://github.com/vuejs/language-tools/blob/master/packages/component-meta/lib/types.ts) for more details.\r\n\r\n### Extracting prop meta\r\n\r\n`@azee/vue-component-meta` will automatically extract the prop details like its name, default value, is required or not, etc. Additionally, you can even write prop description in source code via [JSDoc](https://jsdoc.app/) comment for that prop.\r\n\r\n```ts\r\n/**\r\n * Hide/Show alert based on v-model value\r\n */\r\nmodelValue: {\r\n  type: Boolean,\r\n  default: null,\r\n},\r\n```\r\n\r\nWhen you extract the component meta and extract the `description` property of that prop it will be \"Hide/Show alert based on v-model value\" 😍\r\n\r\n> **Warning**\r\n>\r\n> Do note that `meta.props` will be array of props so you can't access it via `meta.props.<prop-name>`. Moreover, `meta.props` will also contain some global prop which you can identify via `prop.global` property.\r\n\r\nYou can use it to document your component as you build your project without writing additional documentation.\r\n\r\n## Pitfalls 👀\r\n\r\nAs `@azee/vue-component-meta` uses static code analysis, it can't extract the dynamic prop definition.\r\n\r\n### default value\r\n\r\n`@azee/vue-component-meta` won't be able to extract default value for prop as props can't be analyzed.\r\n\r\n```ts\r\nprops: {\r\n  // Props definition by function execution\r\n  ...useLayerProps({\r\n    color: {\r\n      default: 'primary',\r\n    },\r\n    variant: {\r\n      default: 'light',\r\n    },\r\n  }),\r\n}\r\n```\r\n\r\nIn this scenario, to get the correct default value you can let `@azee/vue-component-meta` know it by writing them explicitly:\r\n\r\n```ts\r\nprops: {\r\n  // let @azee/vue-component-meta found it\r\n  color: { default: 'primary' },\r\n  variant: { default: 'light' },\r\n\r\n  // Props definition by function execution\r\n  ...useLayerProps({\r\n    color: {\r\n      default: 'primary',\r\n    },\r\n    variant: {\r\n      default: 'light',\r\n    },\r\n  }),\r\n}\r\n```\r\n\r\n### description\r\n\r\nSame as above scenario you might have issue with description not generating when prop definition is dynamic. In this case writing prop description can be tricky.\r\n\r\nWhen it's function execution, write prop description in function definition:\r\n\r\n```ts\r\nexport const useLayerProp = (...) => {\r\n  const props = {\r\n       /**\r\n        * Layer variant\r\n        */\r\n       variant: {\r\n         type: String,\r\n         default: 'text',\r\n       },\r\n  }\r\n\r\n  export { props }\r\n}\r\n```\r\n\r\n### required\r\n\r\nFor generating the correct `required` value for props like below:\r\n\r\n```ts\r\n// @/composables/useProps.ts\r\nexport const disabled = {\r\n  type: Boolean,\r\n  default: false,\r\n};\r\n```\r\n\r\n```ts\r\nimport { disabled } from '@/composables/useProps';\r\n\r\nexport default defineComponent({\r\n  props: {\r\n    disabled,\r\n  },\r\n});\r\n```\r\n\r\nYou need to add `as const` to variable definition:\r\n\r\n```diff\r\n export const disabled = {\r\n   type: Boolean,\r\n   default: false,\r\n- }\r\n+ } as const\r\n```\r\n\r\n## Used by 🎉\r\n\r\n- [Anu](https://github.com/jd-solanki/anu) UI library uses `@azee/vue-component-meta` to generate components' API via [automation](https://github.com/jd-solanki/anu/blob/main/scripts/gen-component-meta.ts).\r\n\r\n## Reference 📚\r\n\r\n- [tests](https://github.com/vuejs/language-tools/blob/master/packages/component-meta/tests/index.spec.ts)\r\n- [Anu's components' API automation](https://github.com/jd-solanki/anu/blob/main/scripts/gen-component-meta.ts)\r\n- [Discord chat for dynamic usage](https://discord.com/channels/793943652350427136/1027819645677350912)\r\n","readmeFilename":"README.md"}