![\"Downloads](\"https://img.shields.io/npm/dm/web-component-analyzer.svg\")
\r\n\t![\"NPM](\"https://img.shields.io/npm/v/web-component-analyzer.svg\")
\r\n\t![\"Dependencies\"](\"https://img.shields.io/david/runem/web-component-analyzer.svg\")
\r\n\t![\"Contributors\"](\"https://img.shields.io/github/contributors/runem/web-component-analyzer.svg\")
\r\n\r\n\t\r\n\t\r\n\t\r\n\t\r\n
\r\n ![\"Web](\"https://user-images.githubusercontent.com/5372940/68087781-1044ce80-fe59-11e9-969c-4234f9287f1b.gif\")
\r\n
![](\"https://user-images.githubusercontent.com/5372940/54445420-02fd9700-4745-11e9-9305-47d6ec3c6307.gif\")
\r\n\r\n\r\n```bash\r\n$ wca analyze\r\n$ wca analyze src --format markdown\r\n$ wca analyze \"src/**/*.{js,ts}\" --outDir components\r\n$ wca analyze my-element.js --outFile custom-elements.json\r\n```\r\n\r\n### Options\r\n\r\n| Option | Type | Description |\r\n| -------------------- | -------------------------------- | ---------------------------------------------------------------------------- |\r\n| `--format FORMAT` | `markdown` \\| `json` \\| `vscode` | Specify output format. |\r\n| `--outFile FILE` | `file path` | Concatenate and emit output to a single file. |\r\n| `--outDir DIRECTORY` | `directory path` | Direct output to a directory where each file corresponds to a web component. |\r\n\r\n[](#api)\r\n\r\n## Output Formats\r\n\r\n### json\r\n\r\n```bash\r\nwca analyze src --format json --outFile custom-elements.json\r\n```\r\n\r\nTry the online playground [here](https://runem.github.io/web-component-analyzer?format=json)\r\n\r\nThis json format is for experimental and demo purposes, and is still being actively discussed. You can expect changes to this format. Please follow and contribute to the discussion at:\r\n\r\n- https://github.com/webcomponents/custom-elements-json\r\n- https://github.com/w3c/webcomponents/issues/776\r\n\r\n### markdown\r\n\r\n```bash\r\nwca analyze src --format markdown --outDir readme\r\n```\r\n\r\nTry the online playground [here](https://runem.github.io/web-component-analyzer?format=markdown)\r\n\r\nWeb Component Analyzer can output markdown documentation of your web components. This can either be output into a single file using `--outFile` or into multiple files using `--outDir`.\r\n\r\n### vscode\r\n\r\n```bash\r\nwca analyze src --format vscode --outFile vscode-html-custom-data.json\r\n```\r\n\r\nVSCode supports a JSON format called [vscode custom data](https://github.com/microsoft/vscode-custom-data) for the built in html editor which is set using `html.customData` vscode setting. Web Component Analyzer can output this format.\r\n\r\n[](#how-does-this-tool-analyze-my-components)\r\n\r\n## ➤ API\r\n\r\nYou can also use the underlying functionality of this tool if you don't want to use the CLI. Documentation will be added as soon as the API is considered stable.\r\n\r\n\r\n```typescript\r\nimport { analyzeComponents } from \"web-component-analyzer\";\r\n\r\nanalyzeComponents(sourceFile, { checker });\r\n```\r\n\r\n[](#how-does-this-tool-analyze-my-components)\r\n\r\n## ➤ How does this tool analyze my components?\r\n\r\nThis tool extract information about your components by looking at your code directly and by looking at your JSDoc comments.\r\n\r\n**Code**: Web Component Analyzer supports multiple libraries. [Click here](https://github.com/runem/web-component-analyzer/blob/master/ANALYZE.md) for an overview of how each library is analyzed.\r\n\r\n**JSDoc**: Read next section to learn more about how JSDoc is analyzed.\r\n\r\n[](#how-to-document-your-components-using-jsdoc)\r\n\r\n## ➤ How to document your components using JSDoc\r\n\r\nIn addition to analyzing the code of your components, this library also use JSDoc to construct the documentation. It's especially a good idea to use JSDoc for documenting `slots`, `events`, `css custom properties` and `css shadow parts` as these not analyzed statically by this tool as of now (except when constructing a CustomEvent within your component).\r\n\r\nHere's an example including all supported JSDoc tags. All JSDoc tags are on the the form `@tag {type} name - comment`.\r\n\r\n\r\n```javascript\r\n/**\r\n * Here is a description of my web component.\r\n * \r\n * @element my-element\r\n * \r\n * @fires change - This jsdoc tag makes it possible to document events.\r\n * @fires submit\r\n * \r\n * @attr {Boolean} disabled - This jsdoc tag documents an attribute.\r\n * @attr {on|off} switch - Here is an attribute with either the \"on\" or \"off\" value.\r\n * @attr my-attr\r\n * \r\n * @prop {String} myProp - You can use this jsdoc tag to document properties.\r\n * @prop value\r\n * \r\n * @slot - This is an unnamed slot (the default slot)\r\n * @slot start - This is a slot named \"start\".\r\n * @slot end\r\n * \r\n * @cssprop --main-bg-color - This jsdoc tag can be used to document css custom properties.\r\n * @cssprop --main-color\r\n\r\n * @csspart container \r\n */\r\nclass MyElement extends HTMLElement {\r\n\r\n /**\r\n * This is a description of a property with an attribute with exactly the same name: \"color\".\r\n * @type {\"red\"|\"green\"|\"blue\"}\r\n * @attr\r\n */\r\n color = \"red\";\r\n\r\n /**\r\n * This is a description of a property with an attribute called \"my-prop\".\r\n * @type {number}\r\n * @deprecated\r\n * @attr my-prop\r\n */\r\n myProp = 10\r\n\r\n}\r\n```\r\n\r\n### Overview of supported JSDoc tags\r\n\r\n| JSDoc Tag | Description |\r\n| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `@element` | Gives your component a tag name. This JSDoc tag is useful if your 'customElements.define` is called dynamically eg. using a custom function. |\r\n| `@fires` | Documents events. |\r\n| `@slot` | Documents slots. Using an empty name here documents the unnamed (default) slot. |\r\n| `@attr` or `@attribute` | Documents an attribute on your component. |\r\n| `@prop` or `@property` | Documents a property on your component. |\r\n| `@cssprop` or `@cssproperty` | Documents a css custom property on your component. |\r\n| `@csspart` | Documents a css shadow part on your component. |\r\n\r\n[](#contributors)\r\n\r\n## ➤ Contributors\r\n\r\n| [![\"Rune](\"https://avatars0.githubusercontent.com/u/5372940?s=400&u=43d97899257af3c47715679512919eadb07eab26&v=4\")
](https://github.com/runem) |\r\n| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\r\n| [Rune Mehlsen](https://github.com/runem) |\r\n\r\n[](#license)\r\n\r\n## ➤ License\r\n\r\nLicensed under [MIT](https://opensource.org/licenses/MIT).\r\n","readmeFilename":"README.md"}