Allow for custom file extensions

[slogsdon]

Hello! Is there any interest supporting custom file extensions for components? Today, it seems like these are limited to .js, .jsx, and .mdx, but this prevents using languages that compile to JavaScript for these files. A less than ideal workaround exists where a simple JS file can be used to re-export the component (see below), but it would be fantastic if this workaround wasn't required.

Workaround example: Typescript

File ./components/component.tsx:

import * as React from "react";
const Component = () => <div>Example Component</div>;
export default Component;

File ./docs/component.js:

export default from "../components/component";

where x0 is invoked as x0 build docs.

[jxnblk]

Yeah, we've been looking into ways to handle this and using something like minimatch for file patterns – the biggest issue is the webpack's require.context has to have a static regex. We could require a context for all files, then filter based on the match, but I'd definitely want to do some light performance benchmarks to see what that's like.

Is the main thing you're looking for TypeScript support? If so, that'd be worth opening a new issue for as I'd like to add that as a feature

[slogsdon]

Yes, Typescript’s .tsx extension (required for JSX support) was the first one I tried, but another one that soon came to mind was for Vue’s .vue extension to support its single-file components.

I can open another issue specifically for Typescript if you’d like to go down that path and can also submit a PR to help out.