hipstersmoothie / react-docgen-typescript-plugin

A webpack plugin to inject react typescript docgen information

react-docgen-typescript-plugin

A webpack plugin to inject react typescript docgen information

Install

npm install --save-dev react-docgen-typescript-plugin
# or
yarn add -D react-docgen-typescript-plugin

Usage

NOTE: The TypeScript compiler options allowSyntheticDefaultImports and esModuleInterop will make react-docgen-typescript-plugin a lot harder! Turn them off for faster build times.

const ts = require('typescript');
const ReactDocgenTypescriptPlugin = require("react-docgen-typescript-plugin").default;

module.exports = {
  plugins: [
    // Will default to loading your root tsconfig.json
    new ReactDocgenTypescriptPlugin(),
    // or with a specific tsconfig
    new ReactDocgenTypescriptPlugin({ tsconfigPath: "./tsconfig.dev.json" }),
    // or with compiler options
    new ReactDocgenTypescriptPlugin({ compilerOptions: { jsx: ts.JsxEmit.Preserve } }),
  ],
};

Options

This plugins support all parser options from react-docgen-typescript and all of the following options

Option	Type	Description	Default
tsconfigPath	string	Specify the location of the tsconfig.json to use.	null
compilerOptions	object	Specify compiler options. Cannot be used with tsconfigPath	null
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.	STORYBOOK_REACT_CLASSES
setDisplayName	boolean	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.	true
typePropName	string	Specify the name of the property for docgen info prop type.	type
exclude	glob[]	Glob patterns to ignore and not generate docgen information for. (Great for ignoring large icon libraries)	[]
include	glob[]	Glob patterns to generate docgen information for	['**/**.tsx']

Debugging

If you want to see how this plugins is including and excluding modules set the DEBUG environment variable.

• DEBUG=docgen:* - All logs
• DEBUG=docgen:include - Included modules
• DEBUG=docgen:exclude - Excluded modules
• DEBUG=docgen:docs - Generated docs

DEBUG=docgen:* npm run storybook

Another great way of debugging your generated docs is to use a debugger statement in your component source file. If you turn off source maps you will be able to see the code that this package generates.

Prior Art

• sn-client - Inspired by this custom webpack plugin
• react-docgen-typescript-loader - Webpack loader to generate docgen information from Typescript React components.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Andrew Lisowski 💻 🎨 📖 🤔 🚧 🚇 ⚠️	Michael Shilman 💻	Kyle Herock 💻	Juho Vepsäläinen 🚇 ⚠️ 💻 📖	Egor Pogadaev ⚠️ 💻	Anton Savoskin 💻	Trevor Burnham ⚠️ 💻
Maxime Meriouma-Caron 🚇 ⚠️ 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

react-docgen-typescript-plugin's Issues

TS > 4 with npm

Should the package.json depedency include typescript 4?

Something like:

"typescript": "^3 | ^4"

Currently I can't install this within by create-react-app project which uses TS 4.0.5 when using npm (7) since it states correctly

! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peer typescript@"~4.0.3" from the root project
npm ERR!   peer typescript@">= 3.x" from [email protected]
npm ERR!   node_modules/react-docgen-typescript-plugin
npm ERR!     peer react-docgen-typescript-plugin@"0.7.0" from the root project
npm ERR!   3 more (react-docgen-typescript-plugin, tsutils, react-docgen-typescript)

Can I use the `@private` to tag a react prop is private and not be provided to the outside in docs？

Trim is not a function

Having an issue with Typescript 4.3.2 and line 476 on parser.js

var trimmedText = (tag.text || '').trim();
...
TypeError: (tag.text || "").trim is not a function

I output the console and can see in certain scenarios that instead of getting:

{
  name: string,
  text: string
}

I am getting this kind of structure:

{
  name: 'see',
  text: [
    { text: 'https', kind: 'text' },
    {
      text: '://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute',
      kind: 'text'
    }
  ]
}

I'll try to dig deeper tonight to see if I can find out what is happening and try to create a simplified demo.

Not possible to set setDisplayName to false

react-docgen-typescript-plugin/src/plugin.ts

Line 290 in 31ce4e8

setDisplayName: setDisplayName || true,

Because of the use of the logical or operator here it is not possible to pass false as an option. Passing false incorrectly results in setDisplayName being set to true. Instead I would recommend using the nullish coalescing operator instead (or some similar approach).

Happy to put in a PR if you need.

Stale __docgenInfo generated due to cache

Thanks for the library, it's very helpful when developing a React component library doc site.

react-docgen-typescript-plugin/src/plugin.ts

Lines 99 to 109 in abe4c74

	const hash = crypto
	.createHash("sha1")
	.update(webpackModule._source._value)
	.digest("hex");
	const cached = cache.getKey(hash);
	if (cached) {
	debugInclude(`Got cached docgen for "${webpackModule.request}"`);
	webpackModule._source._value = cached;
	return;
	}

webpackModule._source._value seems to be the output of the ts-loader. So when user only edits the comments in a TS interface, webpackModule._source._value will keep same as before ( because the whole interface code is stripped by ts-loader) . In this case, the produced __docgenInfo will be incorrect, and the doc page which consumes __docgenInfo will display wrong interface comments.

Update react-docgen-typescript to fix "Cannot read property 'getSourceFile' of undefined"

An issue in react-docgen-typescript cause errors when commentSource.valueDeclaration is undefined, this has been fixed in react-docgen-typescript version 1.20.1. Could react-docgen-typescript-plugin be updated to use this new version?

Related issue for react-docgen-typescript: styleguidist/react-docgen-typescript#276
Related pull-request for react-docgen-typescript: styleguidist/react-docgen-typescript#277

Document/configure supported node version(s)

I was going to make a PR to update the flat-cache dependency to the latest major, but given that it dropped support for Node <16, I figured it was worth consulting this package's support node version. However, I didn't find one documented anywhere.

Given that the package still supports webpack 4, is the intention to support whatever minimum version webpack 4 supports (Node 6 or something)? If not, I think it would be worth declaring supported node versions via the package.json#engines field, or similar.

ENAMETOOLONG: name too long

I am using Ubuntu 22.04, which has a file name limit of 255. I am getting the following error on installations

 YN0013: │ @storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0001: │ Error: @storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0: ENAMETOOLONG: name too long, copyfile '/home/*/.yarn/berry/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0-b31cc57c40-8.zip' -> '/home/*/*/*/.yarn/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0-b31cc57c40-91a3015d38.zip-a8e868fb1210c3a9.tmp'
➤ YN0013: │ react-docgen-typescript-plugin@npm:1.0.5 can't be found in the cache and will be fetched from the remote registry

Deprecation warnings after updating to TypeScript 4.8

Hi!

After updating my project to TS4.8, I started getting some deprecation warnings logged into my console:

70% sealing React Docgen Typescript PluginDeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNull' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTrue' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createArrayLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createFalse' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.

Is there any plan to update the plugin to remove the use of deprecated methods?

Issues with canary package name length

Has anyone else experienced issues with this long canary name? At least one of my teammates has hit this error:

➤ YN0000: └ Completed in 0s 843ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ @storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f
➤ YN0001: │ Error: @storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0: ENAMETOOLONG: name too long, copyfile '/tmp/some/path/archive.zip' -> '/home/some/path/.yarn/cache/@storybook-react-docgen-typescript-plugin-npm-1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0-b31cc57c40-91a3015d38.zip-ab77634ccf8aae0f.tmp'
➤ YN0000: └ Completed in 1s 358ms
➤ YN0000: Failed with errors in 2s 205ms

They were forced to downgrade to 1.0.1 to get around their issue.

If there is no specific reason for the change in naming I vote going back to the shortened SHA version as seen in previous canary releases:

displayName causing __docgenInfo not to be generated

Not 100% sure if this is an issue caused by this plugin. But I have a component which has a displayName set differently to the variable name it's assigned to - as it's a sub-component:

const Item = () => {...}
Item.displayName = 'List.Item'; 

// or

Item.displayName = 'ListItem'; 

And when I used a display name like this then no docgen data gets attached to the component. However if I do either of the following:

// Set displayName to match the variable name
const Item = () => {...}
Item.displayName = 'Item'; 

// or have no displayName
const Item = () => {...}

Then it works as expected. I'm seeing the problem in Storybook, which seems to read the __docgenInfo property this plugin creates, so I don't think it's an issue in Storybook, and the react-docgen playground doesn't seem to have an issue generating the docs - so I'm assuming it might be this plugin.

Is there anything you can think of in the code that might be causing something like this to happen?

Invalid JS generated under a certain TS export. Uses `default` reserved word

Given the file test.tsx

import React from 'react';

export class Column extends React.Component {}

export default function Test() {
  return <span>hi</span>;
}
Test.Column = Column;

I get invalid generated code:

try {
    // @ts-ignore
    default.Column.displayName = "default.Column";
    // @ts-ignore
    default.Column.__docgenInfo = { "description": "", "displayName": "default.Column", "props": {} };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["components/virtualized-table/test.tsx#default.Column"] = { docgenInfo: default.Column.__docgenInfo, name: "default.Column", path: "components/virtualized-table/test.tsx#default.Column" };
}

It is for some reason using default.Column but default is a JS reserved word, so this results in a syntax error Uncaught SyntaxError: expected expression, got keyword 'default'

---

I can fix this by changing my TS to:

import React from 'react';

export class Column extends React.Component {}

function Test() {
  return <span>hi</span>;
}
Test.Column = Column;

export default Test;

It seems like the order of the export matters in relation to the Test.Column = Column assignment 😕

---

Versions:

└─ @storybook/[email protected]
└─ @storybook/[email protected]
└─ [email protected]

Webpack 5

So [email protected] depends on [email protected], which depends on @webpack-contrib/[email protected] which has a peer of webpack@^3.0.0 || ^4.0.0.

Normally I'd make a PR to @webpack-contrib/schema-utils, but they're on version v3.0.0! Luckily the latest version doesn't have any peers (weird), but there's two breaking versions difference so there's some work to do. I head over to react-docgen-typescript-loader, but it's currently archived! So now I'm here, which is a library that is still shipping 0.X.Y, to see what I can do about getting ready for Webpack 5. Thoughts?

Typescript v5 compatibility

Hi! I tried upgrading to [email protected] yesterday and ran into the below issue with react-docgen-typescript-plugin when trying to run storybook. Seems like the api of the typescript compiler, expected to be released some time this month, has changed in an incompatible way. I've set up a reproduction repo to help investigate the issue here: https://github.com/dnjstrom/storybook-typescript-5.

npm run storybook

> [email protected] storybook
> start-storybook -p 6006 -s public

info @storybook/react v6.5.16
info
(node:85516) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info Addon-docs: using MDX1
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
(node:85516) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
70% sealing plugins DocGenPlugin/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37
    return insertTsIgnoreBeforeStatement(typescript_1.default.createExpressionStatement(typescript_1.default.createBinary(typescript_1.default.createPropertyAccess(typescript_1.default.createIdentifier(d.displayName), typescript_1.default.createIdentifier("displayName")), typescript_1.default.SyntaxKind.EqualsToken, typescript_1.default.createLiteral(d.displayName))));
                                                                                                                                                                                         ^

TypeError: typescript_1.default.createIdentifier is not a function
    at setDisplayName (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37:186)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:201:34
    at Array.map (<anonymous>)
    at Object.generateDocgenCodeBlock (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:200:46)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:166:68
    at Array.forEach (<anonymous>)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:157:34
    at Hook.eval [as call] (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:14:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.seal (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2801:19)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compiler.js:1187:20
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2757:4
    at _next2 (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at eval (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:68:1)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2850:39)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2850:39)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16
    at Hook.eval [as callAsync] (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:62:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.finish (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2714:28)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compiler.js:1182:19
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Node.js v18.12.0

Support webpack 5

Relates to storybookjs/storybook#14118

Storybook has enabled experimental support for webpack5 in 6.2. react-docgen-typescript-plugin does not seem to work properly with webpack 5 enabled.

Issues on typescript 5.0.2

So using Storybook, and their default [email protected] alongside [email protected]
When I build npm run storybook I get errors on this plugin

70% sealing plugins DocGenPlugin/USER_PATH_OMMITED_FOR_PRIVACY/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37
    return insertTsIgnoreBeforeStatement(typescript_1.default.createExpressionStatement(typescript_1.default.createBinary(typescript_1.default.createPropertyAccess(typescript_1.default.createIdentifier(d.displayName), typescript_1.default.createIdentifier("displayName")), typescript_1.default.SyntaxKind.EqualsToken, typescript_1.default.createLiteral(d.displayName))));
                                                                                                                                                                                         ^

TypeError: typescript_1.default.createIdentifier is not a function

I've tried using resolutions on my package.json but to no avail

  "resolutions": {
    "@storybook/react-docgen-typescript-plugin": "npm:[email protected]"
  },

JSDocs tags (e.g. `@since ×××` etc.)

The react-docgen-typescript library passes tags from JSDocs (lines with tokens starting with “at” character) which react-docgen-typescript-plugin ignores. This pull request amends this so that tags metadata is passed appropriately into the generated code.

I’ve prepared a pull request #53 to merge. Please release it so that it's working also (or predominantly) with webpack@4 [no problems here I guess] and react-docgen-typescript@1 [I’ve noticed there’re plans to bump to @2] as those are versions I am bound for now in code I maintain.

Thanks in advance for finding some time to deal with this issue!

Generated code doesn't work with forwardedRef

I have a component that is exported this way : export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(...)
When I look into the code generated by webpack, it looks like this :

exports.IconButton = (0, react_1.forwardRef)((_a,ref)=>{...});
exports.IconButton.displayName = 'IconButton';

try {
    // @ts-ignore
    IconButton.displayName = "IconButton";
    // @ts-ignore
    IconButton.__docgenInfo = {
        ...
    };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["src/components/buttons/icon-button.tsx#IconButton"] = {
            docgenInfo: IconButton.__docgenInfo,
            name: "IconButton",
            path: "src/components/buttons/icon-button.tsx#IconButton"
        };
} catch (__react_docgen_typescript_loader_error) {}

The generated code doesn't include the exports. prefix, which ends up throwing this error : ReferenceError: IconButton is not defined (logged __react_docgen_typescript_loader_error);

Docgen codeblock uses incorrect identifiers when component has a different display name

Given this example component:

import * as React from "react";

interface ButtonComponentProps {
  text: string;
}

export const Button = (props: ButtonComponentProps) => (
  <button>{props.text}</button>
);

Button.displayName = "MyButtonDisplayName";

generateDocgenCodeBlock({ docgenCollectionName: "STORYBOOK_REACT_CLASSES" }) outputs:

try {
    // @ts-ignore
    MyButtonDisplayName.displayName = "MyButtonDisplayName";
    // @ts-ignore
    Button.__docgenInfo = { "description": "", "displayName": "MyButtonDisplayName", "props": { "text": { "defaultValue": null, "description": "", "name": "text", "required": true, "type": { "name": "string" } } } };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["DisplayName.tsx#MyButtonDisplayName"] = { docgenInfo: MyButtonDisplayName.__docgenInfo, name: "MyButtonDisplayName", path: "DisplayName.tsx#MyButtonDisplayName" };
}
catch (__react_docgen_typescript_loader_error) { }"

The component's identifier name is Button, but the codeblock assigns displayName to MyButtonDisplayName, which does not exist. In the global collection object, it uses MyButtonDisplayName.__docgenInfo, which likewise doesn't exist.

Typescript 4.1

It seems not to work with Typescript 4.1. The stack trace refers only to typescript paths but disabling the plugin in storybook has made it pass.

70% sealing React Docgen Typescript Plugin /Volumes/unix/.../node_modules/typescript/lib/typescript.js:2229
        return str.lastIndexOf(prefix, 0) === 0;
                   ^

TypeError: Cannot read property 'lastIndexOf' of undefined
    at Object.startsWith (/Volumes/unix/workplace/.../node_modules/typescript/lib/typescript.js:2229:20)

Can I use it in React + TS + Webpack/Rollup projects

Does this have to be used with the storyBook

how to set shouldExtractLiteralValuesFromEnum: true like doc

how to set shouldExtractLiteralValuesFromEnum: true like doc

it similar not work. and options is given to react-docgen-typescript-plugin not react-docgen-typescript

`trim` is not a function error after updating Typescript to 4.3

After updating to [email protected] I get the following error when running start-storybook -p 6006:

70% sealing React Docgen Typescript Plugin ~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:475
            var trimmedText = (tag.text || '').trim();
                                               ^
TypeError: (tag.text || "").trim is not a function
    at ~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:475:48
    at Array.forEach (<anonymous>)
    at Parser.getFullJsDocComment (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:474:14)
    at Parser.findDocComment (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:443:28)
    at ~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:406:38
    at Array.forEach (<anonymous>)
    at Parser.getPropsInfo (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:402:27)
    at Parser.getComponentInfo (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:187:30)
    at ~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:895:30
    at Array.forEach (<anonymous>)
    at ~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:894:20
    at Array.reduce (<anonymous>)
    at parseWithProgramProvider (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:886:10)
    at Object.parseWithProgramProvider (~/projects/.../node_modules/react-docgen-typescript/lib/parser.js:75:20)
    at processModule (~/projects/.../node_modules/react-docgen-typescript-plugin/dist/plugin.js:18:34)
    at ~/projects/.../node_modules/react-docgen-typescript-plugin/dist/plugin.js:97:49

In [email protected] this error does not appear. Is there anything I can do to fix it?

v1.0.3 and above have not been published to NPM

I need to update to v1.0.5 to account for a bug (#58) that was fixed and published with that version, according to this repo's releases. However, when trying to update, I could not get the version to change from a 1.0.2-canary version. When looking at the npm page for this package, it shows no version above v1.0.2. It looks like the GitHub Action to release might be failing: https://github.com/hipstersmoothie/react-docgen-typescript-plugin/actions/runs/4094827997/jobs/7061430005

Bump react-docgen-typescript dependency to 2.0.0

Hi,

Is it possible to bump react-docgen-typescript dependency's version to 2.0.0?

Context

It seems that there's an issue fixed inside react-docgen-typescript dependency when using typescript version 4.3

TypeError: (tag.text || "").trim is not a function.

code fix : styleguidist/react-docgen-typescript#356
new version on npm : https://www.npmjs.com/package/react-docgen-typescript

Thanks 🙂

TypeError: typescript_1.default.createIdentifier is not a function (ts 5.0.0-beta)

ts.createIdentifier is deprecated (use ts.factory.create* instead).

See: microsoft/TypeScript#51362 (comment)

Regression in 1.0.5

Sample code

export enum A {
  static = 'static'
}

TypeScript 5.0.4

In 1.0.4 it generated something like this:

A.static.displayName = "A.static"
A.static.__docgenInfo = { ... }

In 1.0.5 it generates:

A.static.displayName = "A.static"
static.__docgenInfo = { ... }

(that in this example breaks parsing because static is a reserved word, such that even try/catch doesn't help)

I think it is the result of this commit a91043f