-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support react-docgen-typescript in another way (#58)
- Loading branch information
Showing
13 changed files
with
457 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/react-rsbuild/src/loaders/react-docgen-loader.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* Code taken from https://github.com/storybookjs/storybook/tree/next/code/presets/react-webpack/src/loaders | ||
*/ | ||
|
||
import { describe, expect, it, vi } from 'vitest' | ||
import { getReactDocgenImporter } from './react-docgen-loader' | ||
|
||
const reactDocgenMock = vi.hoisted(() => { | ||
return { | ||
makeFsImporter: vi.fn().mockImplementation((fn) => fn), | ||
} | ||
}) | ||
|
||
const reactDocgenResolverMock = vi.hoisted(() => { | ||
return { | ||
defaultLookupModule: vi.fn(), | ||
} | ||
}) | ||
|
||
vi.mock('./docgen-resolver', async (importOriginal) => { | ||
const actual = await importOriginal<typeof import('path')>() | ||
return { | ||
...actual, | ||
defaultLookupModule: reactDocgenResolverMock.defaultLookupModule, | ||
} | ||
}) | ||
|
||
vi.mock('react-docgen', async (importOriginal) => { | ||
const actual = await importOriginal<typeof import('path')>() | ||
return { | ||
...actual, | ||
makeFsImporter: reactDocgenMock.makeFsImporter, | ||
} | ||
}) | ||
|
||
describe('getReactDocgenImporter function', () => { | ||
it('should not map the request if a tsconfig path mapping is not available', () => { | ||
const filename = './src/components/Button.tsx' | ||
const basedir = '/src' | ||
const imported = getReactDocgenImporter(undefined) | ||
reactDocgenResolverMock.defaultLookupModule.mockImplementation( | ||
(filen: string) => filen, | ||
) | ||
const result = (imported as any)(filename, basedir) | ||
expect(result).toBe(filename) | ||
}) | ||
|
||
it('should map the request', () => { | ||
const mappedFile = './mapped-file.tsx' | ||
const matchPath = vi.fn().mockReturnValue(mappedFile) | ||
const filename = './src/components/Button.tsx' | ||
const basedir = '/src' | ||
const imported = getReactDocgenImporter(matchPath) | ||
reactDocgenResolverMock.defaultLookupModule.mockImplementation( | ||
(filen: string) => filen, | ||
) | ||
const result = (imported as any)(filename, basedir) | ||
expect(result).toBe(mappedFile) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
packages/react-rsbuild/src/plugins/docgen-handlers/actualNameHandler.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
/** | ||
* Code taken from https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-vite/src/plugins | ||
*/ | ||
|
||
/** | ||
* This is heavily based on the react-docgen `displayNameHandler` | ||
* (https://github.com/reactjs/react-docgen/blob/26c90c0dd105bf83499a83826f2a6ff7a724620d/src/handlers/displayNameHandler.ts) | ||
* but instead defines an `actualName` property on the generated docs that is taken first from the component's actual name. | ||
* This addresses an issue where the name that the generated docs are stored under is incorrectly named with the `displayName` | ||
* and not the component's actual name. | ||
* | ||
* This is inspired by `actualNameHandler` from https://github.com/storybookjs/babel-plugin-react-docgen, but is modified | ||
* directly from displayNameHandler, using the same approach as babel-plugin-react-docgen. | ||
*/ | ||
|
||
import type { Handler, NodePath, babelTypes as t } from 'react-docgen' | ||
import { utils } from 'react-docgen' | ||
|
||
const { getNameOrValue, isReactForwardRefCall } = utils | ||
|
||
const actualNameHandler: Handler = function actualNameHandler( | ||
documentation, | ||
componentDefinition, | ||
) { | ||
documentation.set('definedInFile', componentDefinition.hub.file.opts.filename) | ||
|
||
if ( | ||
(componentDefinition.isClassDeclaration() || | ||
componentDefinition.isFunctionDeclaration()) && | ||
componentDefinition.has('id') | ||
) { | ||
documentation.set( | ||
'actualName', | ||
getNameOrValue(componentDefinition.get('id') as NodePath<t.Identifier>), | ||
) | ||
} else if ( | ||
componentDefinition.isArrowFunctionExpression() || | ||
componentDefinition.isFunctionExpression() || | ||
isReactForwardRefCall(componentDefinition) | ||
) { | ||
let currentPath: NodePath = componentDefinition | ||
|
||
while (currentPath.parentPath) { | ||
if (currentPath.parentPath.isVariableDeclarator()) { | ||
documentation.set( | ||
'actualName', | ||
getNameOrValue(currentPath.parentPath.get('id')), | ||
) | ||
return | ||
} | ||
if (currentPath.parentPath.isAssignmentExpression()) { | ||
const leftPath = currentPath.parentPath.get('left') | ||
|
||
if (leftPath.isIdentifier() || leftPath.isLiteral()) { | ||
documentation.set('actualName', getNameOrValue(leftPath)) | ||
return | ||
} | ||
} | ||
|
||
currentPath = currentPath.parentPath | ||
} | ||
// Could not find an actual name | ||
documentation.set('actualName', '') | ||
} | ||
} | ||
|
||
export default actualNameHandler |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/** | ||
* Code taken from https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-vite/src/plugins | ||
*/ | ||
|
||
import { extname } from 'node:path' | ||
import resolve from 'resolve' | ||
|
||
export class ReactDocgenResolveError extends Error { | ||
// the magic string that react-docgen uses to check if a module is ignored | ||
readonly code = 'MODULE_NOT_FOUND' | ||
|
||
constructor(filename: string) { | ||
super(`'${filename}' was ignored by react-docgen.`) | ||
} | ||
} | ||
|
||
/* The below code was copied from: | ||
* https://github.com/reactjs/react-docgen/blob/df2daa8b6f0af693ecc3c4dc49f2246f60552bcb/packages/react-docgen/src/importer/makeFsImporter.ts#L14-L63 | ||
* because it wasn't exported from the react-docgen package. | ||
* watch out: when updating this code, also update the code in code/presets/react-webpack/src/loaders/docgen-resolver.ts | ||
*/ | ||
|
||
// These extensions are sorted by priority | ||
// resolve() will check for files in the order these extensions are sorted | ||
export const RESOLVE_EXTENSIONS = [ | ||
'.js', | ||
'.cts', // These were originally not in the code, I added them | ||
'.mts', // These were originally not in the code, I added them | ||
'.ctsx', // These were originally not in the code, I added them | ||
'.mtsx', // These were originally not in the code, I added them | ||
'.ts', | ||
'.tsx', | ||
'.mjs', | ||
'.cjs', | ||
'.mts', | ||
'.cts', | ||
'.jsx', | ||
] | ||
|
||
export function defaultLookupModule(filename: string, basedir: string): string { | ||
const resolveOptions = { | ||
basedir, | ||
extensions: RESOLVE_EXTENSIONS, | ||
// we do not need to check core modules as we cannot import them anyway | ||
includeCoreModules: false, | ||
} | ||
|
||
try { | ||
return resolve.sync(filename, resolveOptions) | ||
} catch (error) { | ||
const ext = extname(filename) | ||
let newFilename: string | ||
|
||
// if we try to import a JavaScript file it might be that we are actually pointing to | ||
// a TypeScript file. This can happen in ES modules as TypeScript requires to import other | ||
// TypeScript files with .js extensions | ||
// https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions | ||
switch (ext) { | ||
case '.js': | ||
case '.mjs': | ||
case '.cjs': | ||
newFilename = `${filename.slice(0, -2)}ts` | ||
break | ||
|
||
case '.jsx': | ||
newFilename = `${filename.slice(0, -3)}tsx` | ||
break | ||
default: | ||
throw error | ||
} | ||
|
||
return resolve.sync(newFilename, { | ||
...resolveOptions, | ||
// we already know that there is an extension at this point, so no need to check other extensions | ||
extensions: [], | ||
}) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
/** | ||
* Code taken from https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-vite/src/plugins | ||
*/ | ||
|
||
import { describe, expect, it, vi } from 'vitest' | ||
import { getReactDocgenImporter } from './react-docgen' | ||
|
||
const reactDocgenMock = vi.hoisted(() => { | ||
return { | ||
makeFsImporter: vi.fn().mockImplementation((fn) => fn), | ||
} | ||
}) | ||
|
||
const reactDocgenResolverMock = vi.hoisted(() => { | ||
return { | ||
defaultLookupModule: vi.fn(), | ||
} | ||
}) | ||
|
||
vi.mock('./docgen-resolver', async (importOriginal) => { | ||
const actual = await importOriginal<typeof import('path')>() | ||
return { | ||
...actual, | ||
defaultLookupModule: reactDocgenResolverMock.defaultLookupModule, | ||
} | ||
}) | ||
|
||
vi.mock('react-docgen', async (importOriginal) => { | ||
const actual = await importOriginal<typeof import('path')>() | ||
return { | ||
...actual, | ||
makeFsImporter: reactDocgenMock.makeFsImporter, | ||
} | ||
}) | ||
|
||
describe('getReactDocgenImporter function', () => { | ||
it('should not map the request if a tsconfig path mapping is not available', () => { | ||
const filename = './src/components/Button.tsx' | ||
const basedir = '/src' | ||
const imported = getReactDocgenImporter(undefined) | ||
reactDocgenResolverMock.defaultLookupModule.mockImplementation( | ||
(filen: string) => filen, | ||
) | ||
const result = (imported as any)(filename, basedir) | ||
expect(result).toBe(filename) | ||
}) | ||
|
||
it('should map the request', () => { | ||
const mappedFile = './mapped-file.tsx' | ||
const matchPath = vi.fn().mockReturnValue(mappedFile) | ||
const filename = './src/components/Button.tsx' | ||
const basedir = '/src' | ||
const imported = getReactDocgenImporter(matchPath) | ||
reactDocgenResolverMock.defaultLookupModule.mockImplementation( | ||
(filen: string) => filen, | ||
) | ||
const result = (imported as any)(filename, basedir) | ||
expect(result).toBe(mappedFile) | ||
}) | ||
}) |
Oops, something went wrong.