Fix visibleName with dots

[Lazyuki]

Fixes: styleguidist/react-docgen-typescript#292

With react-docgen-typescript's version 1.20.4, components with @visibleName JSDoc tags are working. However, it changes the react component's displayName to the one specified in @visibleName, and when it contains a ., the code examples were not working. This was because Styleguidist was trying to import the component with the dot in its name in the code example which resulted in the syntax error.

Example:

// ===== DialogTitle.tsx ======
/**
 * @visibleName Dialog.Title
 */
export const DialogTitle = props => (<h2 {...props} />);

// ===== Dialog.tsx ======
import DialogTitle from './DialogTitle.tsx';
const Dialog = ({ children }) => <div>{children}</div>;
Dialog.Title = DialogTitle;
export default Dialog;

This caused Styleguidist to try

const Dialog.Title$0 = require('./DialogTitle.tsx');

in the example code renderer, which resulted in SyntaxError: Missing initializer in const declaration.

[codecov]

Codecov Report

Merging #1675 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted Files	Coverage Δ
src/loaders/utils/resolveESModule.ts	100.00% <100.00%> (ø)

[311chaos]

I had this issue come up, but with different characters. I had visible names with hyphens or commas that also stopped working.

[Lazyuki]

Oh I didn't expect those characters to be in @visibleName, but I guess that's possible. I can modify this to exclude all non-alphabetical characters.

[sapegin]

Thanks!

[styleguidist-bot]

🎉 This PR is included in version 11.0.10 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀