components-helper
Advanced tools
Based on the docs to provide code prompt files for vue component library
:warning: This library is no longer maintained.
With the WebStorm support of Volar, you may no longer need this library.
It is more recommended that you use Volar's code prompt by improving the type declaration.
If you still need this library, you can continue to use it, but this library will no longer have new feature updates.
Based on the documents to provide code prompt files for vue component library
Reference documents format reference test files
yarn add components-helper -D
# or
npm i components-helper --save-dev
const { main } = require('components-helper')
main({
// Options
})
then in package.json
{
"scripts": {
+ "build:helper": "node helper/file.js"
},
+ "vetur": {
+ "tags": "config outDir/tags.json",
+ "attributes": "config outDir/attributes.json"
+ },
+ "web-types": "config outDir/web-types.json"
}
truestring | string[]Specify the entry directory. refer: fast-glob
for example:
docs/*.md -- matches all files in the docsdocs/(a|b).md -- matches files a.md and b.mddocs/!(a|b).md -- matches files except for a.md and b.mdobjectThe config of fast-glob
truestringSpecify the output directory. For example, `lib``
truestringname of the component library.
truestringthe version of the component library.
number | stringAdds indentation, white space, and line break characters to the return-value JSON text to make it easier to read
string/the separator for propsOptions, slotsSubtags, type ...
(title: string, fileName: string, path: string) => stringhyphenate(title || fileName)rewriting the name of the component
for example (title) => 'prefix-' + title.replace(/\B([A-Z])/g, '-$1').toLowerCase()
(fileName: string, header?: string, path: string) => string | undefindrewriting the doc url of the component
(value: string, key: string, row: string[], title: string) => string | undefinedrewriting the attribute of the component
(description?: string, defaultValue?: string, docUrl?: string) => string${description}, default: ${defaultValue}.\n\n[Docs](${docUrl})rewriting the description of vetur
(title: string, fileName: string, path: string) => Sourcerewriting the source of web-types. (the name of export from the component library)
(type: string) => undefined | string | BaseContributionOnly some common types are processed internally, and the rest are exported from the component library by default. If your document also references types in third-party libraries, you can choose to override the relevant behavior through this function
stringtags.jsonname for tags of the vetur
stringattributes.jsonname for attributes of the Vetur
stringweb-types.jsonname for web-types of the WebStorm
string (This is a regular string and ignores case.)propsThe title of the props table. other string in the header will be identified as sub-component
stringNameThe header name of the Name in the props table
stringDescriptionThe header name of the Description in the props table
stringTypeThe header name of the Type in the props table
stringOptionsThe header name of the Options in the props table
stringDefaultThe header name of the Default in the props table
string (This is a regular string and ignores case.)eventsThe title of the events table. other string in the header will be identified as sub-component
stringNameThe header name of the Name in the events table
stringDescriptionThe header name of the Description in the events table
string (This is a regular string and ignores case.)slotsThe title of the slots table. other string in the header will be identified as sub-component
stringNameThe header name of the Name in the slots table
stringDescriptionThe header name of the Description in the slots table
stringTypeThe header name of the Type in the slots table
stringSubtagsThe header name of the Subtags in the slots table
string (This is a regular string and ignores case.)directivesThe title of the directives table. other string in the header will be identified as sub-component
stringNameThe header name of the Name in the directives table
stringDescriptionThe header name of the Description in the directives table
stringTypeThe header name of the Type in the directives table
RegExp | string (This is a regular string.)/#+\s+(.*)\n+([^(#|\n)]*)/gmatches the title and description information from docs
RegExp | string (This is a regular string.)/#+\s+(.*)\n+(\|?.+\|.+)\n\|?\s*:?-+:?\s*\|.+((\n\|?.+\|.+)+)/gmatches the title and table header and the table contains information from docs
RegExp | string (This is a regular string.)/\/((\w|-)+)\.\w+$/matches the file name from the path
matches the first format information in the docs
/#+\s+(.*)\n+([^(#|\n)]*)/
title
descriptionand
title
matches other formats, For example:
/#+\s+(.*)\n+>\s*([^(#|\n)]*)/g
title
descriptionmatches the format information in the docs
/#+\s+(.*)\n+(\|?.+\|.+)\n|?\s*:?-+:?\s*|.+((\n\|?.+\|.+)+)/g
title
| header || column || column |and
sub-component title
| header || column || column |by default matches all tables, Optimize it through tableRegExp, For example:
/#+\s+(.*\s*Props|.*\s*Events|.*\s*Slots|.*\s*Directives)\n+(\|?.+\|.+)\n|?\s*:?-+:?\s*|.+((\n\|?.+\|.+)+)/g
Props / Events / Slots / Directives
| header || column || column |and
sub-component Props
| header || column || column |When this document does not include the primary title or Props Events Slots and Directives, this component is not created.
2.2.0
berak change
- index.js
+ index.cjs
- index.es.js
+ index.js
FAQs
Based on the docs to provide code prompt files for vue component library
The npm package components-helper receives a total of 245 weekly downloads. As such, components-helper popularity was classified as not popular.
We found that components-helper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."