Language-tools: Documentar componentes con una cadena de documentos que aparece en la documentación flotante

Creado en 5 jul. 2020  ·  16Comentarios  ·  Fuente: sveltejs/language-tools

Problema

Con las herramientas de React, puede comentar sobre un componente como este:

/** Documentation that will appear on hover in other places where this is imported */
function MyComponent() { return null }

Sin embargo, en Svelte, no he encontrado la manera de hacer esto.

Solución

Me gustaría saber dónde puedo colocar un comentario que será retomado por la documentación en movimiento de editores como VSCode y Vim / Neovim (con coc.nvim).

Para ilustrar, aquí estoy flotando MyComponent pero solo veo import MyComponent :

image

Me gustaría que mi docstring Documentation that will appear on hover in other places where this is imported se incluyera en la información sobre herramientas.

Busqué en Google por un tiempo y probé mi configuración local con TypeScript y no puedo encontrar la manera de hacerlo. Encontré una discusión relacionada interesante sobre metadatos para componentes de Svelte, pero la discusión es más sobre tipos de accesorios.

Editar: dado que estamos discutiendo si esto se agrega mejor al compilador, creé un problema análogo aquí https://github.com/sveltejs/svelte/issues/5102

Fixed enhancement

Todos 16 comentarios

Dado que esto también podría ser valioso para componentes sin una etiqueta de script, propongo usar el comentario HTML para eso. svelte2tsx buscaría comentarios HTML que comenzaran con una etiqueta especial (como @doc ) y colocaría el contenido como un jsdoc encima de la exportación predeterminada.

Opiniones ¿Otras ideas?

Me interesaría mucho intentar implementar esto. Sin embargo, creo que debe diseñarse con cuidado porque es una característica que algunos desarrolladores usan _con mucha frecuencia_ todos los días.

Algo que me viene a la mente es:

/**
 * <strong i="6">@file</strong> Here is my documentation for this component
 */

Al comienzo del archivo. Pero creo que allí solo funcionan los comentarios HTML, ¿verdad?

Además, tal vez para que sea más similar a las otras etiquetas, creo que una etiqueta <svelte:documentation> similar a <svelte:head> podría ser buena, pero debería implementarse en el compilador.

¿Quizás incluso <svelte:options documentation="blabla" /> ?

Eso también necesitará algo de trabajo en el compilador y la aprobación del repositorio principal. El compilador verificó las opciones.

Creé un problema análogo en el repositorio principal, veamos si podemos llegar a alguna conclusión: +1:

La mitad se hace una vez que se fusiona https://github.com/sveltejs/language-tools/pull/282 . El LSP no mostraba cadenas de documentación al pasar el mouse.

Ahora lo que tengo que hacer es obtener una cadena de documentos de un comentario HTML @doc y agregarlo a addComponentExport en svelte2tsx.

@dummdidumm Actualmente no es posible agregar cadenas de documentos a las exportaciones predeterminadas, ya que no tienen nombre:

export default class {
    $$prop_def = __sveltets_partial(render().props)
    $$slot_def = render().slots
}

Supongo que, dado que las únicas cosas que pueden ir en el alcance raíz de cada archivo son render y la exportación predeterminada, entonces es inofensivo darle un nombre genérico como Component ? ¿O tal vez elegir el nombre del archivo?

Sí, eso no debería ser un problema.

¿Alguno de este código termina siendo parte del tiempo de ejecución de una aplicación, o está ahí solo para el soporte de herramientas?

Solo para herramientas.
Acerca de esa exportación predeterminada: debemos verificar cómo afecta eso al autocompletado de importación.

Correcto hmm. No entiendo cómo funciona actualmente. Si trato de emularlo en un entorno solo TS como este:

// Component.ts
export default class {}

No obtengo autocompletar para Component en otros archivos, pero en Svelte funciona de alguna manera. Probablemente debería leer el código relacionado en el LSP.

De todos modos, si hago esto en su lugar:

// Component.ts
export default class Component {}

Luego obtengo autocompletar para la exportación predeterminada como Component en otros archivos. Por lo tanto, apoyo que la apuesta segura es nombrar la exportación predeterminada igual que el archivo, por ahora, y luego probarlo en vivo.

Muy bien, probé dos opciones, pero con nuestro LSP, lo único que funciona para el autocompletado de las importaciones de componentes es:

export default class {
  // etc
}

Cosas que he probado:

  • Declarar una clase y luego exportarla como predeterminada en una línea diferente.
  • Añadiendo el nombre directamente en la línea export default class Name .

~ Ninguno de los dos funciona. Ahora estoy buscando en el proveedor de finalización (https://github.com/sveltejs/language-tools/blob/master/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts) para ver dónde está El culpable es que, en entornos de solo TS, obtengo finalizaciones para las exportaciones predeterminadas de clases con nombre, según el nombre de la clase. ~

Actualización: declarar una clase y luego exportarla como predeterminada en una línea diferente funciona siempre que el nombre de la exportación sea el mismo que el nombre del archivo. Voy por esta opción.

Sí, la finalización de la importación para componentes esbeltos tiene un código adicional allí, esencialmente construyendo la sugerencia de importación. Tal vez ese código se pueda desechar si svelte2tsx tiene una exportación predeterminada con nombre que es el mismo que el nombre del archivo.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

baileyherbert picture baileyherbert  ·  3Comentarios

non25 picture non25  ·  5Comentarios

matthewmueller picture matthewmueller  ·  3Comentarios

johanbissemattsson picture johanbissemattsson  ·  4Comentarios

PatrickG picture PatrickG  ·  3Comentarios