reactjs / reactjs/react-docgen

Typescript: Component declaration reference is not recognized by parser

Abierto
#898 0 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

typescript
Lenguaje dominante
TypeScript
Estrellas
3.8k
Forks
316
Merge medio
5 h 7 min
PR fusionados (30 d)
4

Descripción

Description

Many Typescript libraries publish types in declaration files (.d.ts) alongside their associated .js bundles. In .d.ts files generated through TS compilation, function types are often defined using declaration references, such as:

declare const MyComponent: React.FunctionComponent<ComponentProps>;

Currently declaration references are not recognized by reactDocgen.parse(). When react-docgen parses a .d.ts file with a single declaration reference, it emits an error: Error: No suitable component definition found..

Desired Behavior

The following code:

import * as React from 'react';

interface ComponentProps {
  foo: string;
}

/**
 * My component is so darn cool!
 */
const Component1: React.FunctionComponent<ComponentProps> = () => <div />;

/**
 * Mine too!
 */
declare const Component2: React.FunctionComponent<ComponentProps>;

Results in the following output:

[
  {
    "description": "My component is so darn cool!",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  },
  {
    "description": "Mine too!",
    "displayName": "Component2",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Actual Behavior

The same code results in the following output:

[
  {
    "description": "My component is so darn cool!",
    "displayName": "Component1",
    "methods": [],
    "props": {
      "foo": {
        "required": true,
        "tsType": {
          "name": "string"
        },
        "description": ""
      }
    }
  }
]

Steps to Reproduce

Paste the .tsx sample code from the "Expected Behavior" section into the react-docgen playground with Language set to Typescript.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza reproduciendo el problema en el playground de react-docgen con Language establecido en Typescript, utilizando el ejemplo .tsx y llamando a reactDocgen.parse() sobre la referencia a la declaración. Sigue el punto de entrada del parser para las declaraciones .d.ts y compara el resultado con la salida esperada, en la que Component2 aparece con su descripción, displayName, methods y props.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react, typescript
Área
devtools
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
48/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.