Path Frontend

Ada dua path yang dapat dikonfigurasi, dan keduanya berada di bawah directory resources/ milik application: tempat komponen Vue PandaBear dipublish, serta tempat generator menulis component yang dibuatnya. Gunakan halaman ini ketika project Anda sudah memiliki struktur resources/js sendiri, atau ketika component hasil generator tidak berada di lokasi yang Anda harapkan.

Contoh minimal yang berfungsi

// config/panda-panel.php

'frontend' => [
    'panel_path' => 'js/panel',
    'pages_path' => 'js/pages/Panels',
],

use PandaPanel\Support\FrontendPaths;

FrontendPaths::panel();                    // /app/resources/js/panel
FrontendPaths::pages();                    // /app/resources/js/pages/Panels
FrontendPaths::panel('icons/registry.ts'); // /app/resources/js/panel/icons/registry.ts

Itulah nilai default-nya. Application yang tidak mempublish file config tetap mendapatkan hasil yang sama, karena kedua default tersebut juga didefinisikan di dalam FrontendPaths, bukan hanya di file config.

PandaPanel\Support\FrontendPaths

Method	Signature	Config key	Default
panel	static panel(string $path = ''): string	panda-panel.frontend.panel_path	js/panel
pages	static pages(string $path = ''): string	panda-panel.frontend.pages_path	js/pages/Panels

Keduanya mengembalikan path absolute yang di-resolve melalui resource_path(), dan menerima suffix opsional:

use PandaPanel\Support\FrontendPaths;

FrontendPaths::panel();                                  // …/resources/js/panel
FrontendPaths::panel('widgets/registry.ts');             // …/resources/js/panel/widgets/registry.ts
FrontendPaths::pages();                                  // …/resources/js/pages/Panels
FrontendPaths::pages('Admin/Pages/Reports.vue');         // …/resources/js/pages/Panels/Admin/Pages/Reports.vue
FrontendPaths::pages('/Admin/Widgets/SystemInfo.vue');   // the same — a leading slash is trimmed

Proses resolution-nya sederhana, tetapi penting untuk dipahami:

1. Config key dibaca.
2. Value yang bukan string non-empty akan fallback ke default. null, false, 0, dan '' semuanya dianggap "tidak dikonfigurasi".
3. Slash pada awal dan akhir base path di-trim.
4. Jika suffix diberikan, slash pada awal suffix di-trim lalu digabung dengan tepat satu /.

Tidak ada path ketiga, dan kedua path tersebut tidak dapat dipindahkan keluar dari resources/. Keduanya selalu relatif terhadap directory tersebut karena seluruh component registry frontend menggunakan import.meta.glob terhadap tree application sendiri, dan Vite tidak dapat melakukan glob di luar project.

Siapa yang membaca path ini

Semua bagian framework yang perlu menentukan lokasi file menggunakan class ini. Jika publisher, generator, dan icon command memiliki cara sendiri-sendiri dalam menyusun path, ketiganya akan mudah berbeda.

Caller	Menggunakan	Digunakan untuk
PandaPanel\Support\Installer\PublishedAssets::map()	panel()	Destination package resources/js/panel pada vendor:publish --tag=panda-panel-assets
MakePanelPageCommand	pages("{$panel}/Pages/{$class}.vue")	Lokasi make:panel-page --component menulis file
MakePanelWidgetCommand	pages("{$panel}/Widgets/{$class}.vue")	Lokasi make:panel-widget menulis custom widget
SyncPanelIconsCommand	panel('icons/registry.ts')	File yang ditulis ulang oleh panel:icons

php artisan make:panel-page Reports --panel=Admin --component
# resources/js/pages/Panels/Admin/Pages/Reports.vue

php artisan make:panel-widget Revenue --panel=Admin --type=custom
# resources/js/pages/Panels/Admin/Widgets/Revenue.vue

php artisan panel:icons
# rewrites resources/js/panel/icons/registry.ts

panel_path merupakan destination untuk file hasil publish. pages_path bukan destination publish: package tidak membuat file apa pun di sana; generator akan mengisinya sesuai kebutuhan.

Memindahkan panel_path

Publish config terlebih dahulu, ubah nilainya, lalu publish assets — urutannya seperti ini:

php artisan vendor:publish --tag=panda-panel-config
# edit frontend.panel_path
php artisan vendor:publish --tag=panda-panel-assets

PublishedAssets::map() dibangun setiap kali dipanggil, bukan disimpan sebagai constant, agar value config yang terbaru dibaca ketika proses publish berlangsung. Jika assets dipublish lebih dahulu, file akan masuk ke lokasi default. Memindahkannya setelah itu menjadi pekerjaan manual dan setiap import di dalam file tersebut juga harus tetap valid.

Ada konsekuensi kedua yang menjadi alasan sebagian besar project sebaiknya tidak mengubah key ini: component yang dipublish saling mengimport menggunakan alias literal @/panel/..., misalnya @/panel/types/form, @/panel/icons/registry, dan @/panel/composables/usePanel, dalam banyak file. Pada starter kit, @ menunjuk ke resources/js. Jadi jika panel_path diubah dari js/panel, file akan dipublish ke lokasi yang tidak lagi sesuai dengan import internalnya.

Jika Anda benar-benar memindahkan panel_path, Anda harus:

• mengubah import tersebut; atau
• membuat Vite alias yang memetakan @/panel ke lokasi baru.

Memindahkan pages_path

Perubahan ini memiliki dampak lebih besar. pages_path bukan hanya lokasi generator menulis component, tetapi juga root yang secara konseptual digunakan oleh pattern import.meta.glob untuk me-resolve setiap custom component name yang dikirim server. Pattern tersebut berupa string literal di file registry yang sudah dipublish.

Mengubah config hanya mengubah lokasi generator menulis file. Pattern glob tidak ikut berubah.

Registry file (di bawah panel_path)	Pattern
widgets/registry.ts	../../pages/Panels/**/Widgets/*.vue
hooks/registry.ts	../../pages/Panels/**/Hooks/*.vue
shell/registry.ts	../../pages/Panels/**/Shell/*.vue
tables/registry.ts	../../pages/Panels/**/Columns/*.vue
tables/registryEmptyStates.ts	../../pages/Panels/**/EmptyStates/*.vue
forms/registry.ts	../../pages/Panels/**/Fields/*.vue, **/Schemas/*.vue, **/Entries/*.vue, **/Modals/*.vue

Jika pages_path dipindahkan, seluruh pattern di atas juga harus disesuaikan.

Pattern sengaja menggunakan relative path, bukan alias. Pada Vite dev server, aliased glob dapat me-resolve menjadi kosong sementara production build bekerja normal. Kondisi itu membuat setiap custom component menampilkan fallback saat development tetapi tiba-tiba bekerja setelah build production, sehingga sangat sulit didiagnosis.

Inertia memiliki constraint lain. @inertiajs/vite hanya melakukan glob terhadap:

resources/js/pages/**

Karena itu component yang harus dapat di-resolve sebagai Inertia Page tetap harus berada di bawah resources/js/pages. Itulah alasan pages_path default ditempatkan di sana.

Hal yang perlu diperhatikan

• Memindahkan pages_path memerlukan dua perubahan, bukan satu. Mengubah config tanpa mengubah glob membuat semua custom component gagal di-resolve. Petunjuknya hanya development-only warning di console.
• Default ada di dua tempat. config/panda-panel.php dan FrontendPaths sama-sama mendefinisikan js/panel serta js/pages/Panels, sehingga application tanpa published config tetap bekerja. Jika Anda sedang mengubah source package, pastikan kedua lokasi tetap konsisten.
• FrontendPaths tidak membuat directory. Class ini hanya menjawab lokasi file; generator yang membuat directory yang dibutuhkan.
• vendor:publish melewati file yang sudah ada. Jika panel_path diubah lalu assets dipublish ulang, Anda akan memiliki copy kedua di lokasi baru sementara directory lama tetap ada. Hapus directory lama secara manual.
• panel:assets membandingkan file terhadap destination yang sedang dikonfigurasi. Setelah memindahkan panel_path, file yang masih berada di lokasi lama tidak lagi terlihat oleh command tersebut — tidak dilaporkan dan tidak diperbarui. Lihat Updating Published Assets.

Lihat juga

• config/panda-panel.php
• Published Asset Structure
• Updating Published Assets
• Component Registries
• Publish Tags
• make:panel-page
• make:panel-widget
• panel:icons
• Directory Structure