Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vue-styleguidist.github.io/docs/Docgen.html below:

Website Navigation

• GitHub (opens new window)

vue-docgen-api | Vue Styleguidist

vue-docgen-api turns VueJs components into documentation objects.

• API
• Architecture
• Custom Tags

Every parser in docgen-api returns an instance of ComponentDoc or a ComponentDoc[].

Parses the file at filePath. Returns and objects containing all documented and undocumented properties of the component.

In the options, specify the changes you made to node resolution through your Webpack config. Write additional script and template handlers and push them in the options object to parse non-standard elements.

Same as parse, but this way you can force the content of the code. The filePath parameter will then only be used for dependency resolution.

Same as parse, but allows for multiple exported components in one file.

NOTE Return type is Array<ComponentDoc> instead of ComponentDoc. Use exportName to differentiate the exports.

This is a mirror to the webpack alias (opens new window) options. If you are using alias in Webpack (opens new window) or paths in TypeScript, you should reflect this here.

resolve mirrors the webpack option (opens new window) too. If you have it in Webpack or use baseDir in TypeScript, you should probably see how this one works.

The additional custom handlers allow you to add custom handlers to the parser. A handler can navigate and see custom objects that the standard parser would ignore.

Replaces all of the handlers by those specified. If each of those 3 handlers are set to [], the library will only parse the given component. It will not run any standard handlers anymore.

NOTE Standard handlers are available as namespaces. Import and use them this way:

Function - Returns if an extended component should be parsed by docgen.

NOTE If docgen fails to parse the targeted component, it will log a warning. It is non-blocking but annoying.

NOTE If you allow all of node_modules to try to be parsed, you might degrade performance. Use it responsibly.

The Documentation class is the container of information before getting compiled. To be used and exported, use the toObject() function to make a neutral serializable object.

The object has functions to get descriptors for props, events, methods, and slots. All those functions follow the same principle. If you call it twice with the same argument, it will return twice the same reference to the prop. This way if your prop is decorated in multiple places, it simplifies its documentation.

First, we use babel to parse the comments in the code.

Then we use vue-template-compiler to parse the HTML template.

These parsers give us Abstract Syntax Trees (AST). We then traverse them with handlers to extract the info we need from components and their JSdoc.

Script and template have 2 different AST structure. It makes sense that they have different handlers. There are a few standard handlers in docgen. You can add your own using the addScriptHandler or addTemplateHandler options.

To handle scripts, we can register them this way. Each handler is a JavaScript function following this prototype.

In the example next, we extract the functional flag of a Vue component object.

Template handlers have the following prototype.

The following example stores all buttons name attributes in the template in a buttons key.

The API collects any custom doclets your code blocks contain. For a given slot, prop or root component documentation (the comment block before export default), any unrecognized doclet tags will get pushed to a separate tags object. For example, imagine that in your documentation, you wanted to give your documentation readers a textbox that had a two-way binding to your slot so they could preview their slot content in the actual component. You would want some mock data available for when the user hasn't entered anything. You could provide that mock data like so:

The output object for this component would show something like this:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4