Changes

.changeset/gentle-plants-smell.md

@@ -0,0 +1,5 @@
+---
+'react-docgen': major
+---
+
+Rename `propDocBlockHandler` to `propDocblockHandler` for consistency

.changeset/plenty-cooks-grow.md

@@ -0,0 +1,5 @@
+---
+'react-docgen': patch
+---
+
+Fix using react-docgen in browsers

.changeset/polite-pandas-push.md

@@ -0,0 +1,5 @@
+---
+'react-docgen': patch
+---
+
+Add `displayName` and `description` to Documentation type

packages/react-docgen/package.json

@@ -6,7 +6,9 @@
   "type": "module",
   "browser": {
     "./dist/importer/fsImporter.js": "./dist/importer/ignoreImporter.js",
-    "./src/importer/fsImporter.ts": "./src/importer/ignoreImporter.ts"
+    "./src/importer/fsImporter.ts": "./src/importer/ignoreImporter.ts",
+    "./dist/importer/makeFsImporter.js": "./dist/importer/makeIgnoreImporter.js",
+    "./src/importer/makeFsImporter.ts": "./src/importer/makeIgnoreImporter.ts"
   },
   "files": [
     "dist"

packages/react-docgen/src/Documentation.ts

@@ -1,15 +1,17 @@
 export interface DocumentationObject {
-  props?: Record<string, PropDescriptor>;
-  context?: Record<string, PropDescriptor>;
   childContext?: Record<string, PropDescriptor>;
   composes?: string[];
+  context?: Record<string, PropDescriptor>;
+  description?: string;
+  displayName?: string;
   methods?: MethodDescriptor[];
+  props?: Record<string, PropDescriptor>;
 }
 
 export interface MethodParameter {
   name: string;
-  type?: TypeDescriptor<FunctionSignatureType> | null;
   optional: boolean;
+  type?: TypeDescriptor<FunctionSignatureType> | null;
 }
 
 export interface MethodReturn {
@@ -162,6 +164,7 @@ export default class Documentation {
     this.#data.set(key, value);
   }
 
+  get<T>(key: string): T | null;
   get(key: string): unknown {
     return this.#data.get(key);
   }

packages/react-docgen/src/config.ts

@@ -9,7 +9,7 @@ import {
   contextTypeHandler,
   defaultPropsHandler,
   displayNameHandler,
-  propDocBlockHandler,
+  propDocblockHandler,
   propTypeCompositionHandler,
   propTypeHandler,
 } from './handlers/index.js';
@@ -52,7 +52,7 @@ export const defaultHandlers: Handler[] = [
   contextTypeHandler,
   childContextTypeHandler,
   propTypeCompositionHandler,
-  propDocBlockHandler,
+  propDocblockHandler,
   codeTypeHandler,
   defaultPropsHandler,
   componentDocblockHandler,

packages/react-docgen/src/handlers/__tests__/propDocblockHandler-test.ts

@@ -5,12 +5,12 @@ import Documentation from '../../Documentation';
 import type { Importer } from '../../importer';
 import type { ComponentNode } from '../../resolver';
 import type DocumentationMock from '../../__mocks__/Documentation';
-import propDocBlockHandler from '../propDocBlockHandler.js';
+import propDocblockHandler from '../propDocblockHandler.js';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 vi.mock('../../Documentation.js');
 
-describe('propDocBlockHandler', () => {
+describe('propDocblockHandler', () => {
   let documentation: Documentation & DocumentationMock;
 
   beforeEach(() => {
@@ -49,7 +49,7 @@ describe('propDocBlockHandler', () => {
         ),
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'Foo comment',
@@ -75,7 +75,7 @@ describe('propDocBlockHandler', () => {
         ),
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description:
@@ -102,7 +102,7 @@ describe('propDocBlockHandler', () => {
         ),
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'Foo comment',
@@ -126,7 +126,7 @@ describe('propDocBlockHandler', () => {
         ),
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'Foo comment',
@@ -150,7 +150,7 @@ describe('propDocBlockHandler', () => {
         ),
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'Foo comment',
@@ -169,7 +169,7 @@ describe('propDocBlockHandler', () => {
         };
       `);
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'Foo comment',
@@ -186,7 +186,7 @@ describe('propDocBlockHandler', () => {
         mockImporter,
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'A comment on imported props',
@@ -210,7 +210,7 @@ describe('propDocBlockHandler', () => {
         mockImporter,
       );
 
-      propDocBlockHandler(documentation, definition);
+      propDocblockHandler(documentation, definition);
       expect(documentation.descriptors).toEqual({
         foo: {
           description: 'A comment on imported props',
@@ -263,15 +263,15 @@ describe('propDocBlockHandler', () => {
       const definition = parse.expression<ObjectExpression>('{fooBar: 42}');
 
       expect(() =>
-        propDocBlockHandler(documentation, definition),
+        propDocblockHandler(documentation, definition),
       ).not.toThrow();
     });
 
     test('ClassDeclaration', () => {
       const definition = parse.statement<ClassDeclaration>('class Foo {}');
 
       expect(() =>
-        propDocBlockHandler(documentation, definition),
+        propDocblockHandler(documentation, definition),
       ).not.toThrow();
     });
   });

packages/react-docgen/src/handlers/componentMethodsJsDocHandler.ts

@@ -29,7 +29,7 @@ function merge<T, U>(obj1: T, obj2: U): (T & U) | null {
 const componentMethodsJsDocHandler: Handler = function (
   documentation: Documentation,
 ): void {
-  let methods = documentation.get('methods') as MethodDescriptor[] | null;
+  let methods = documentation.get<MethodDescriptor[]>('methods');
 
   if (!methods) {
     return;

packages/react-docgen/src/handlers/index.ts

@@ -8,7 +8,7 @@ export { default as componentMethodsJsDocHandler } from './componentMethodsJsDoc
 export { default as defaultPropsHandler } from './defaultPropsHandler.js';
 export { default as displayNameHandler } from './displayNameHandler.js';
 export { default as codeTypeHandler } from './codeTypeHandler.js';
-export { default as propDocBlockHandler } from './propDocBlockHandler.js';
+export { default as propDocblockHandler } from './propDocblockHandler.js';
 export { default as propTypeCompositionHandler } from './propTypeCompositionHandler.js';
 export {
   propTypeHandler,

packages/react-docgen/src/handlers/propDocBlockHandler.ts → packages/react-docgen/src/handlers/propDocblockHandler.ts

@@ -29,7 +29,7 @@ function resolveDocumentation(
   });
 }
 
-const propDocBlockHandler: Handler = function (
+const propDocblockHandler: Handler = function (
   documentation: Documentation,
   componentDefinition: NodePath<ComponentNode>,
 ): void {
@@ -49,4 +49,4 @@ const propDocBlockHandler: Handler = function (
   resolveDocumentation(documentation, propTypesPath);
 };
 
-export default propDocBlockHandler;
+export default propDocblockHandler;

packages/react-docgen/src/importer/ignoreImporter.ts

@@ -1,7 +1,5 @@
-import type { Importer } from './index.js';
+import makeIgnoreImporter from './makeIgnoreImporter.js';
 
-const ignoreImports: Importer = function (): null {
-  return null;
-};
+const ignoreImporter = makeIgnoreImporter();
 
-export default ignoreImports;
+export default ignoreImporter;

packages/react-docgen/src/importer/makeIgnoreImporter.ts

@@ -0,0 +1,5 @@
+import type { Importer } from './index.js';
+
+export default function makeIgnoreImporter(): Importer {
+  return () => null;
+}

packages/website/pages/_app.mdx

@@ -0,0 +1,3 @@
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

packages/website/pages/docs/reference/cli.mdx

@@ -1,15 +1,3 @@
-import Image from 'next/image';
-
-export const whoa = (
-  <Image
-    src="/mind-blown-shocked.gif"
-    alt="whoa"
-    width={30}
-    height={50}
-    style={{ display: 'inline-block' }}
-  />
-);
-
 # Command Line Interface (CLI) Reference
 
 This is the complete reference of all available options for the CLI. A basic
@@ -49,7 +37,7 @@ independent of this option.
 
 ### `--help`
 
-Displays the help for the command with the current default values. <>{whoa}</>
+Displays the help for the command with the current default values.
 
 ### `-i, --ignore <globs>`