Language-tools: Mendokumentasikan komponen dengan docstring yang muncul di dokumentasi hover

Dibuat pada 5 Jul 2020  ·  16Komentar  ·  Sumber: sveltejs/language-tools

Masalah

Dengan alat React, Anda dapat mengomentari komponen seperti ini:

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

Namun, di Svelte, saya belum menemukan cara untuk melakukan ini.

Larutan

Saya ingin tahu di mana saya dapat menempatkan komentar yang akan diambil oleh dokumentasi editor yang bergerak seperti VSCode dan Vim/Neovim (dengan coc.nvim).

Sebagai ilustrasi, di sini saya mengarahkan MyComponent tetapi saya hanya melihat import MyComponent :

image

Saya ingin docstring Documentation that will appear on hover in other places where this is imported disertakan dalam tooltip.

Saya telah mencari-cari di Google untuk sementara waktu dan mencoba pengaturan lokal saya dengan TypeScript dan saya tidak dapat menemukan cara untuk melakukannya. Saya menemukan diskusi terkait yang menarik tentang metadata untuk komponen Svelte tetapi diskusinya lebih tentang tipe prop.

Sunting: karena kami sedang mendiskusikan apakah ini lebih baik ditambahkan ke kompiler, saya membuat masalah analog di sini https://github.com/sveltejs/svelte/issues/5102

Fixed enhancement

Semua 16 komentar

Karena ini juga bisa bermanfaat untuk komponen tanpa tag skrip, saya mengusulkan untuk menggunakan komentar HTML untuk itu. svelte2tsx kemudian akan mencari komentar HTML yang dimulai dengan tag khusus (seperti @doc ) dan menempatkan konten sebagai jsdoc di atas ekspor default.

Pendapat? Ide lain?

Saya akan sangat tertarik untuk mencoba menerapkan ini. Namun saya pikir itu perlu dirancang dengan hati-hati karena ini adalah fitur yang digunakan beberapa pengembang _sangat sering_ setiap hari.

Sesuatu yang terlintas dalam pikiran adalah:

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

Di awal file. Tapi saya pikir hanya komentar HTML yang berfungsi di sana, bukan?

Juga, mungkin untuk membuatnya lebih mirip dengan tag lain, saya merasa seperti tag <svelte:documentation> mirip dengan <svelte:head> bisa bagus, tapi itu perlu diimplementasikan di kompiler.

Bahkan mungkin <svelte:options documentation="blabla" /> ?

Itu juga membutuhkan beberapa pekerjaan di kompiler dan persetujuan dari repo utama. Opsi mendapat verifikasi oleh kompiler.

Saya membuat masalah analog pada repo utama, mari kita lihat apakah kita dapat mencapai beberapa kesimpulan :+1:

Setengah dari itu dilakukan setelah https://github.com/sveltejs/language-tools/pull/282 digabung. LSP tidak menunjukkan string dokumentasi saat melayang.

Sekarang yang perlu saya lakukan adalah mencari sumber docstring dari komentar HTML @doc dan menambahkannya ke addComponentExport di svelte2tsx.

@dummdidumm Saat ini tidak mungkin untuk menambahkan docstrings ke ekspor default, karena mereka tidak bernama:

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

Saya kira, karena satu-satunya hal yang dapat masuk ke ruang lingkup root dari setiap file adalah render dan ekspor default, maka tidak ada salahnya untuk memberinya nama generik seperti Component ? Atau mungkin memilih dari nama file?

Ya itu seharusnya tidak menjadi masalah.

Apakah salah satu dari kode ini pernah menjadi bagian dari runtime aplikasi, atau hanya untuk dukungan perkakas?

Hanya untuk perkakas.
Tentang ekspor default itu: kita perlu memeriksa bagaimana hal itu memengaruhi pelengkapan otomatis impor.

Benar hm. Saya tidak mengerti cara kerjanya saat ini. Jika saya mencoba menirunya di lingkungan khusus TS seperti ini:

// Component.ts
export default class {}

Saya tidak mendapatkan pelengkapan otomatis untuk Component pada file lain, tetapi pada Svelte entah bagaimana berhasil. Saya mungkin harus membaca kode terkait di LSP.

Bagaimanapun, jika saya melakukan ini sebagai gantinya:

// Component.ts
export default class Component {}

Kemudian saya mendapatkan pelengkapan otomatis untuk ekspor default sebagai Component pada file lain. Jadi saya mendukung taruhan yang aman adalah memberi nama ekspor default yang sama dengan file, untuk saat ini, dan kemudian mengujinya secara langsung.

Baiklah, jadi saya sudah mencoba dua opsi, tetapi dengan LSP kami, satu-satunya hal yang berfungsi untuk pelengkapan otomatis impor komponen adalah:

export default class {
  // etc
}

Hal-hal yang saya coba:

  • Mendeklarasikan kelas dan kemudian mengekspornya sebagai default di baris yang berbeda.
  • Menambahkan nama tepat di baris export default class Name .

~ Tak satu pun dari mereka bekerja. Saya sekarang mencari penyedia penyelesaian (https://github.com/sveltejs/language-tools/blob/master/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts) untuk melihat di mana pelakunya adalah, karena di lingkungan khusus TS saya mendapatkan penyelesaian untuk ekspor default kelas bernama, berdasarkan nama kelas.~

Pembaruan: mendeklarasikan kelas dan kemudian mengekspornya sebagai default di baris yang berbeda berfungsi selama nama ekspor sama dengan nama file. Aku akan untuk pilihan ini.

Ya penyelesaian impor untuk komponen langsing memiliki beberapa kode tambahan di sana, pada dasarnya membangun saran impor. Mungkin kode itu bisa dibuang jika svelte2tsx memiliki ekspor default bernama yang sama dengan nama file.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

brunnerh picture brunnerh  ·  3Komentar

arxpoetica picture arxpoetica  ·  3Komentar

johanbissemattsson picture johanbissemattsson  ·  4Komentar

scippio picture scippio  ·  3Komentar

matthewmueller picture matthewmueller  ·  5Komentar