{"bugs":{"url":"https://github.com/strothj/react-docgen-typescript-loader/issues"},"dist":{"shasum":"26632d7b899453e5999b12cc20d4fb4e44dc017e","tarball":"https://registry.npmjs.org/react-docgen-typescript-loader/-/react-docgen-typescript-loader-2.0.2.tgz","fileCount":14,"integrity":"sha512-xLXAiaEJTlPs6d8pTHuUjmoujH8M/ohQcuqOZC7TQuEiGAJ7/aVtSVjjVogKHtO200S9Ez7kpBsxs5XqKOtX1g==","signatures":[{"sig":"MEUCIE34KNnRGvEE5vAdsNddkvlrZA87w33HD8IHRNEsysx6AiEAhHDIfuGUYaCeM3VKrZafor/UMHFRdg60ui30AR21nn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29273},"main":"dist/index.js","name":"react-docgen-typescript-loader","files":["dist/*"],"author":{"url":"https://github.com/strothj","name":"strothj"},"readme":"# react-docgen-typescript-loader\n\nWebpack loader to generate docgen information from TypeScript React components. The primary use case is to get the prop types table populated in the [Storybook Info Addon](https://github.com/storybooks/storybook/tree/master/addons/info).\n\n![Example Image](/example.png?raw=true)\n\n## Installation\n\n### Requirements\n\nRequires TypeScript 2.3 or above.\n\n### Add the package as a development dependency.\n\n```shell\n$ npm install --save-dev react-docgen-typescript-loader\n\nor\n\n$ yarn add --dev react-docgen-typescript-loader\n```\n\n### Performance\n\nThere is a significant startup cost due to the initial type parsing. Once the project is running in watch mode, things should be smoother due to Webpack caching.\n\n#### Optional Performance Setting\n\nYou can speed up the loading performance by restricting the set of project files which are processed by the parser. It accepts an optional array of includes and excludes as strings (converted to regular expressions). By default `includes` is set to `[\"\\\\.tsx$\"]` and excludes is set to `[\"node_modules\"]`.\n\nFolder structure:\n\n```\n/src/components/\n /SimpleButton/SimpleButton.tsx\n /SimpleButton/SimpleButton.stories.tsx\n```\n\nWebpack:\n\n```javascript\n{\n test: /\\.tsx?$/,\n exclude: /node_modules/,\n use: [\n \"ts-loader\",\n {\n loader: \"react-docgen-typescript-loader\",\n options: {\n includes: [\"components.*\\\\.tsx$\"],\n excludes: [\"stories\\\\.tsx$\"]\n }\n }\n ]\n}\n```\n\n### Alternative Implementation\n\nThis plugin uses a Webpack loader to inject the docgen information. There is also a version which works as a Webpack plugin. I will be supporting both versions. The loader version more accurately generates the injected code blocks and should work with all module types but at the cost of a longer initial startup. The plugin version may be faster.\n\nThe Webpack plugin version is available here:\nhttps://github.com/strothj/react-docgen-typescript-loader/tree/plugin\n\n### Add the loader to your Webpack configuration.\n\n**IMPORTANT:** Webpack loaders are executed right-to-left (or bottom-to-top). `react-docgen-typescript-loader` needs to be added under `ts-loader`.\n\nExample Storybook config `./storybook/webpack.config.js`.\n\n```javascript\nconst path = require(\"path\");\nconst genDefaultConfig = require(\"@storybook/react/dist/server/config/defaults/webpack.config.js\");\n\nmodule.exports = (baseConfig, env) => {\n const config = genDefaultConfig(baseConfig);\n\n config.module.rules.push({\n test: /\\.tsx?$/,\n include: path.resolve(__dirname, \"../src\"),\n use: [\n require.resolve(\"ts-loader\"),\n require.resolve(\"react-docgen-typescript-loader\"),\n ],\n });\n\n config.resolve.extensions.push(\".ts\", \".tsx\");\n\n return config;\n};\n```\n\n## Optional Loader Options\n\n| Option | Type | Description |\n| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| skipPropsWithName | string[] or string | Avoid including docgen information for the prop or props specified. |\n| skipPropsWithoutDoc | boolean | Avoid including docgen information for props without documentation. |\n| tsconfigPath | string | Specify the location of the tsconfig.json to use. Can not be used with compilerOptions. |\n| compilerOptions | typescript.CompilerOptions | Specify TypeScript compiler options. Can not be used with tsconfigPath. |\n| docgenCollectionName | string or null | Specify the docgen collection name to use. All docgen information will be collected into this global object. Set to `null` to disable. Defaults to `STORYBOOK_REACT_CLASSES` for use with the Storybook Info Addon. https://github.com/gongreg/react-storybook-addon-docgen |\n| setDisplayName | boolean | Automatically set the components' display name. If you want to set display names yourself or are using another plugin to do this, you should disable this option. Defaults to `true`. This is used to preserve component display names during a production build of Storybook. |\n| includes | string[] | Converted to an array of regular expressions. Files matching these regular expressions will be processed by the parser. Defaults to `[\"\\\\.tsx$\"]` |\n| excludes | string[] | See includes. Any file matched by includes will be checked against excludes. Any matching excludes will not be processed by the parser. Defaults to `[\"node_modules\"]`. |\n\n## Usage\n\n### Storybook Info Addon\n\nInclude the `withInfo` decorator as normal.\nReference the addon documentation for the latest usage instructions:\nhttps://github.com/storybooks/storybook/tree/master/addons/info\n\n**Special Note:**\n\nThe Storybook Info Addon is able to populate the story description from your component's documentation. It does this when your story name matches the display name of your component. The prop tables will popular in either case.\n\nIf you have a component named\n`ColorButton`, then you would have to use something like: `storiesOf(\"...\", module).add(\"ColorButton\", ...)` to have the story description come from the component description.\n\nIn addition to the description from the component, you may still include story description text using the normal withInfo api.\n\n**It is important** to export your component using a named export for docgen information to be generated properly.\n\n---\n\n`ColorButton.tsx`:\n\n```javascript\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n /**\n * Buttons background color\n **/\n color: \"blue\" | \"green\";\n\n /**\n * Font size in rem.\n *\n * @default 2\n */\n fontSize?: number;\n}\n\n/**\n * A button with a configurable background color.\n *\n * Notice the named export here, this is required for docgen info to be\n * generated correctly.\n **/\nexport const ColorButton: React.SFC = props => (\n \n {props.children}\n \n);\n\n// Can still be exported as default if it has a named export.\nexport default ColorButton;\n```\n\n`ColorButton.stories.tsx`:\n\n```javascript\nimport * as React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { withInfo } from \"@storybook/addon-info\";\nimport ColorButton from \"./ColorButton\";\n\nstoriesOf(\"Components\", module).add(\n \"ColorButton\",\n withInfo({ inline: true })(() => (\n Color Button\n )),\n);\n```\n\n## Experimental\n\nThis loader is a work in progress. If you encounter an issue, please feel free to open an issue.\n\n## Limitations\n\nThis plugin makes use of the project:\nhttps://github.com/styleguidist/react-docgen-typescript\n\nIt is subject to the same limitations. Component docgen information can not be\ngenerated for components that are only exported as default. You can work around\nthe issue by exporting the component using a named export.\n\n```javascript\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n /** Buttons background color */\n color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC = props => (\n \n {props.children}\n \n);\n\nexport default ColorButton;\n```\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n\n## Energy Drinks?\n\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NNRJYNNY5YTJ2)\n","engines":{"node":">= 8.9","yarn":">= 1.3.2"},"license":"MIT","scripts":{"lint":"tslint -p ./","test":"jest","build":"tsc -p tsconfig.publish.json","clean":"rimraf dist","start":"tsc -w","prepublishOnly":"npm-run-all lint test clean build"},"_npmUser":{"name":"strothj","email":"jason@jasons.io"},"homepage":"https://github.com/strothj/react-docgen-typescript-loader","keywords":["storybook","react","docgen","typescript","webpack","loader"],"pre-commit":["prepublishOnly"],"repository":{"url":"https://github.com/strothj/react-docgen-typescript-loader.git","type":"git"},"description":"Webpack loader to generate docgen information from TypeScript React components.","directories":{},"maintainers":[{"name":"strothj","email":"jason@jasons.io"}],"dependencies":{"ajv":"^6.1.1","react-docgen-typescript":"^1.2.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.2.1","react":"^16.2.0","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.0.3","webpack":"^3.10.0","prettier":"^1.10.2","memory-fs":"^0.4.1","ts-loader":"^3.5.0","pre-commit":"^1.2.2","typescript":"^2.7.1","@types/jest":"^22.1.1","@types/node":"^8.9.1","npm-run-all":"^4.1.2","@types/react":"^16.0.36","@types/webpack":"^3.8.5","@types/memory-fs":"^0.3.0","tslint-config-airbnb":"^5.6.0","tslint-config-prettier":"^1.7.0","tslint-plugin-prettier":"^1.3.0","tslint-language-service":"^0.9.8","typescript-snapshots-plugin":"^1.1.0"},"peerDependencies":{"typescript":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-docgen-typescript-loader_2.0.2_1520117744487_0.1470331449215505","host":"s3://npm-registry-packages"},"_id":"react-docgen-typescript-loader@2.0.2","version":"2.0.2"}