{"id":19584776,"url":"https://github.com/flex-development/vite-plugin-react-docgen-typescript","last_synced_at":"2025-02-26T12:42:01.542Z","repository":{"id":49743493,"uuid":"517893073","full_name":"flex-development/vite-plugin-react-docgen-typescript","owner":"flex-development","description":"🚧 A react-docgen-typescript plugin for Vite","archived":false,"fork":false,"pushed_at":"2023-01-27T09:10:28.000Z","size":2086,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-09T09:48:53.491Z","etag":null,"topics":["docgen","react","react-docgen-typescript","typescript","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flex-development.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-26T02:59:00.000Z","updated_at":"2022-12-16T07:42:04.000Z","dependencies_parsed_at":"2023-02-15T07:31:05.169Z","dependency_job_id":null,"html_url":"https://github.com/flex-development/vite-plugin-react-docgen-typescript","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flex-development%2Fvite-plugin-react-docgen-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flex-development%2Fvite-plugin-react-docgen-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flex-development%2Fvite-plugin-react-docgen-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flex-development%2Fvite-plugin-react-docgen-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flex-development","download_url":"https://codeload.github.com/flex-development/vite-plugin-react-docgen-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240858536,"owners_count":19868997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docgen","react","react-docgen-typescript","typescript","vite","vite-plugin"],"created_at":"2024-11-11T07:49:40.562Z","updated_at":"2025-02-26T12:42:01.489Z","avatar_url":"https://github.com/flex-development.png","language":"TypeScript","readme":"# vite-plugin-react-docgen-typescript\n\n[![conventional commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![license](https://img.shields.io/github/license/flex-development/vite-plugin-react-docgen-typescript.svg)](LICENSE.md)\n[![npm](https://img.shields.io/npm/v/@flex-development/vite-plugin-react-docgen-typescript.svg)](https://npmjs.com/package/@flex-development/vite-plugin-react-docgen-typescript)\n[![typescript](https://badgen.net/badge/-/typescript?color=2a72bc\u0026icon=typescript\u0026label)](https://typescriptlang.org)\n\n\u003e A [`react-docgen-typescript`][3] plugin for [Vite][5].\\\n\u003e Parse modules for docgen information during development **and** at build time.\n\n## Install\n\n```sh\nyarn add -D @flex-development/vite-plugin-react-docgen-typescript\n```\n\n### GitHub Package Registry\n\nTo install from the GitHub Package Registry, setup a `.npmrc` or `.yarnrc.yml`\nfile to authenticate with the registry. A [Personal Access Token with at least\nthe `read:packages` scope][6] is required.\n\n#### `.npmrc`\n\n```utf-8\n//npm.pkg.github.com/:_authToken=${GH_PAT}\n@flex-development:registry=https://npm.pkg.github.com/\n```\n\n#### `.yarnrc.yml`\n\n```yaml\nnpmRegistries:\n  //npm.pkg.github.com:\n    npmAlwaysAuth: true\n    npmAuthToken: ${GH_PAT}\n\nnpmScopes:\n  flex-development:\n    npmRegistryServer: https://npm.pkg.github.com\n```\n\n### Git\n\nFor details on requesting a specific branch, commit, or tag, see\n[npm-install][7] or [Git - Protocols | Yarn][8].\n\n#### NPM\n\n```sh\nnpm i -D flex-development/vite-plugin-react-docgen-typescript\n```\n\n#### Yarn\n\n```sh\nyarn add -D @flex-development/vite-plugin-react-docgen-typescript@flex-development/vite-plugin-react-docgen-typescript\n```\n\n## Usage\n\nOptions can be viewed [here](src/options.ts). Defaults (or equivalents, in the\ncase of `apply`, `componentNameResolver`, and `handler`) are shown below.\n\nAll [`react-docgen-typescript` options][9] are supported.\n\n```typescript\n/**\n * @file Vite Configuration\n * @module config/vite\n * @see https://vitejs.dev/config\n */\n\nimport docgen from '@flex-development/vite-plugin-react-docgen-typescript'\nimport react from '@vitejs/plugin-react'\nimport path from 'node:path'\nimport type { ComponentDoc, PropItem } from 'react-docgen-typescript'\nimport type { SourceFile, Symbol } from 'typescript'\nimport * as vite from 'vite'\n\n/**\n * Vite configuration options.\n *\n * @const {vite.UserConfigExport} config\n */\nconst config: vite.UserConfigExport = vite.defineConfig({\n  plugins: [\n    react(),\n    docgen({\n      apply: (config: vite.ConfigEnv, env: vite.ConfigEnv) =\u003e true,\n      componentNameResolver: (exp: Symbol, source: SourceFile) =\u003e null,\n      enforce: 'pre',\n      exclude: ['**/**.stories.tsx'],\n      handler: (doc: ComponentDoc) =\u003e doc,\n      include: ['**/**.tsx'],\n      propFilter: (p: PropItem) =\u003e !p.parent?.fileName.includes('node_modules'),\n      savePropValueAsString: false,\n      shouldExtractLiteralValuesFromEnum: false,\n      shouldExtractValuesFromUnion: false,\n      shouldIncludeExpression: false,\n      shouldIncludePropTagMap: true,\n      shouldRemoveUndefinedFromOptional: true,\n      skipChildrenPropWithoutDoc: true,\n      sourcemap: true,\n      tsconfig: path.resolve('tsconfig.json')\n    })\n  ]\n})\n\nexport default config\n```\n\n### Storybook\n\n```typescript\n/**\n * @file Storybook Main\n * @module storybook/main\n * @see https://storybook.js.org/docs/react/configure/overview\n */\n\nimport docgen from '@flex-development/vite-plugin-react-docgen-typescript'\nimport type { StorybookViteConfig } from '@storybook/builder-vite'\nimport path from 'node:path'\nimport type { PropItem } from 'react-docgen-typescript'\nimport * as vite from 'vite'\n\n/**\n * Storybook configuration options.\n *\n * @const {StorybookViteConfig} config\n */\nconst config: StorybookViteConfig = {\n  addons: [\n    {\n      name: '@storybook/addon-docs',\n      options: {\n        configureJSX: true,\n        sourceLoaderOptions: null,\n        transcludeMarkdown: true\n      }\n    },\n    '@storybook/addon-controls'\n  ],\n  core: {\n    builder: '@storybook/builder-vite',\n    disableTelemetry: true\n  },\n  framework: {\n    name: '@storybook/react'\n  },\n  stories: [\n    '../src/index.stories.mdx',\n    '../src/blocks/*.stories.mdx',\n    '../src/components/**/**/*.stories.@(mdx|tsx)'\n  ],\n  typescript: {\n    reactDocgen: false\n  },\n  /**\n   * Alters the default Vite configuration.\n   *\n   * @param {vite.InlineConfig} config - Default Vite configuration\n   * @return {vite.InlineConfig} Vite configuration options\n   */\n  viteFinal(config: vite.InlineConfig): vite.InlineConfig {\n    config = vite.mergeConfig(config, {\n      plugins: [\n        docgen({\n          /**\n           * Omits props from documentation generation.\n           *\n           * @param {PropItem} prop - Component prop data\n           * @return {boolean} `false` for omitted prop, `true` otherwise\n           */\n          propFilter(prop: PropItem): boolean {\n            if (prop.parent \u0026\u0026 /@types\\/react/.test(prop.parent.fileName)) {\n              // hide handlers unless explicitly defined by a story\n              if (/^on[A-Z].*/.test(prop.name)) return false\n            }\n\n            return true\n          },\n          skipChildrenPropWithoutDoc: false,\n          tsconfig: path.resolve('tsconfig.docgen.json')\n        })\n      ]\n    } as vite.InlineConfig)\n\n    return config\n  }\n}\n\nexport default config\n```\n\n### Why Vite Only?\n\nBoth `options.apply` and `options.enforce` are specific to the Vite Plugin API\n(see [Conditional Application][10] and [Plugin Ordering][11]).\n\nFuture feature updates will also make use of [Vite specific hooks][12].\n\n## Built With\n\n- [`@rollup/pluginutils`][1]\n- [`magic-string`][2]\n- [`react-docgen-typescript`][3]\n- [`telejson`][4]\n\n[1]: https://github.com/rollup/plugins/tree/master/packages/pluginutils\n[2]: https://github.com/Rich-Harris/magic-string\n[3]: https://github.com/styleguidist/react-docgen-typescript\n[4]: https://github.com/storybookjs/telejson\n[5]: https://vitejs.dev\n[6]:\n  https://docs.github.com/en/packages/learn-github-packages/about-permissions-for-github-packages#about-scopes-and-permissions-for-package-registries\n[7]: https://docs.npmjs.com/cli/v8/commands/npm-install#description\n[8]: https://yarnpkg.com/features/protocols#git\n[9]:\n  https://github.com/styleguidist/react-docgen-typescript/blob/v2.2.2/src/parser.ts#L83-L94\n[10]: https://vitejs.dev/guide/api-plugin.html#conditional-application\n[11]: https://vitejs.dev/guide/api-plugin.html#plugin-ordering\n[12]: https://vitejs.dev/guide/api-plugin.html#vite-specific-hooks\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflex-development%2Fvite-plugin-react-docgen-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflex-development%2Fvite-plugin-react-docgen-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflex-development%2Fvite-plugin-react-docgen-typescript/lists"}