Add suport to Vite (#1308)

* Add suport to Vite * Reidenting master.blade.php * Update master.blade.php * Update master.blade.php * Update master.blade.php * Insert 'type="module"' in script tags that uses $ * Remove 'vite_spa' option * Reident master.blade.php * Add vite_js_only option * [resources/views]: Highlight script section of components with blank lines again * [config]: Update docs for asset bundling section * [resources/views]: Revert some style changes on master and improve vite support --------- Co-authored-by: Diego Smania <[email protected]>
jeroennoten · Oct 5, 2024 · 9282c7b · gpibarra · Oct 11, 2024 · dfsmania
1 parent ab57959
commit 9282c7b
Show file tree

Hide file tree

Showing 16 changed files with 69 additions and 39 deletions.
diff --git a/config/adminlte.php b/config/adminlte.php
@@ -267,19 +267,23 @@
 
     /*
     |--------------------------------------------------------------------------
-    | Laravel Mix
+    | Laravel Asset Bundling
     |--------------------------------------------------------------------------
     |
-    | Here we can enable the Laravel Mix option for the admin panel.
+    | Here we can enable the Laravel Asset Bundling option for the admin panel.
+    | Currently, the next modes are supported: 'mix', 'vite' and 'vite_js_only'.
+    | When using 'vite_js_only', it's expected that your CSS is imported using
+    | JavaScript. Typically, in your application's 'resources/js/app.js' file.
+    | If you are not using any of these, leave it as 'false'.
     |
-    | For detailed instructions you can look the laravel mix section here:
+    | For detailed instructions you can look the asset bundling section here:
     | https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Other-Configuration
     |
     */
 
-    'enabled_laravel_mix' => false,
-    'laravel_mix_css_path' => 'css/app.css',
-    'laravel_mix_js_path' => 'js/app.js',
+    'laravel_asset_bundling' => false,
+    'laravel_css_path' => 'css/app.css',
+    'laravel_js_path' => 'js/app.js',
 
     /*
     |--------------------------------------------------------------------------

diff --git a/resources/views/components/form/date-range.blade.php b/resources/views/components/form/date-range.blade.php
@@ -17,7 +17,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         let usrCfg = _AdminLTE_DateRange.parseCfg( @json($config) );

diff --git a/resources/views/components/form/input-color.blade.php b/resources/views/components/form/input-color.blade.php
@@ -17,7 +17,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
 

diff --git a/resources/views/components/form/input-date.blade.php b/resources/views/components/form/input-date.blade.php
@@ -17,7 +17,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         let usrCfg = _AdminLTE_InputDate.parseCfg( @json($config) );

diff --git a/resources/views/components/form/input-file-krajee.blade.php b/resources/views/components/form/input-file-krajee.blade.php
@@ -36,7 +36,7 @@
 {{-- Add the plugin initialization code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
 
@@ -67,4 +67,4 @@
     })
 
 </script>
-@endpush
+@endpush
diff --git a/resources/views/components/form/input-file.blade.php b/resources/views/components/form/input-file.blade.php
@@ -28,7 +28,7 @@
 
 @once
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         bsCustomFileInput.init();

diff --git a/resources/views/components/form/input-slider.blade.php b/resources/views/components/form/input-slider.blade.php
@@ -17,7 +17,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         let usrCfg = @json($config);

diff --git a/resources/views/components/form/input-switch.blade.php b/resources/views/components/form/input-switch.blade.php
@@ -17,7 +17,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         $('#{{ $id }}').bootstrapSwitch( @json($config) );

diff --git a/resources/views/components/form/select-bs.blade.php b/resources/views/components/form/select-bs.blade.php
@@ -19,7 +19,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         $('#{{ $id }}').selectpicker( @json($config) );

diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php
@@ -20,7 +20,7 @@
 
 @if($errors->any() && $enableOldSupport)
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
 

diff --git a/resources/views/components/form/select2.blade.php b/resources/views/components/form/select2.blade.php
@@ -19,7 +19,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         $('#{{ $id }}').select2( @json($config) );

diff --git a/resources/views/components/form/text-editor.blade.php b/resources/views/components/form/text-editor.blade.php
@@ -18,7 +18,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         let usrCfg = @json($config);

diff --git a/resources/views/components/layout/navbar-darkmode-widget.blade.php b/resources/views/components/layout/navbar-darkmode-widget.blade.php
@@ -12,7 +12,7 @@
 
 @once
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
 

diff --git a/resources/views/components/layout/navbar-notification.blade.php b/resources/views/components/layout/navbar-notification.blade.php
@@ -43,7 +43,7 @@
 
 @if (! is_null($makeUpdateUrl()) && $makeUpdatePeriod() > 0)
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
 

diff --git a/resources/views/components/tool/datatable.blade.php b/resources/views/components/tool/datatable.blade.php
@@ -38,7 +38,7 @@
 {{-- Add plugin initialization and configuration code --}}
 
 @push('js')
-<script>
+<script type="module">
 
     $(() => {
         $('#{{ $id }}').DataTable( @json($config) );

diff --git a/resources/views/master.blade.php b/resources/views/master.blade.php
@@ -22,17 +22,32 @@
     {{-- Custom stylesheets (pre AdminLTE) --}}
     @yield('adminlte_css_pre')
 
-    {{-- Base Stylesheets --}}
-    @if(!config('adminlte.enabled_laravel_mix'))
-        <link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
-        <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
-        <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
-
-        @if(config('adminlte.google_fonts.allowed', true))
-            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
-        @endif
-    @else
+    {{-- Base Stylesheets (depends on Laravel asset bundling tool) --}}
+    @if(config('adminlte.enabled_laravel_mix', false))
         <link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
+    @else
+        @switch(config('adminlte.laravel_asset_bundling', false))
+            @case('mix')
+                <link rel="stylesheet" href="{{ mix(config('adminlte.laravel_css_path', 'css/app.css')) }}">
+            @break
+
+            @case('vite')
+                @vite([config('adminlte.laravel_css_path', 'resources/css/app.css'), config('adminlte.laravel_js_path', 'resources/js/app.js')])
+            @break
+
+            @case('vite_js_only')
+                @vite(config('adminlte.laravel_js_path', 'resources/js/app.js'))
+            @break
+
+            @default
+                <link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
+                <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
+                <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
+
+                @if(config('adminlte.google_fonts.allowed', true))
+                    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
+                @endif
+        @endswitch
     @endif
 
     {{-- Extra Configured Plugins Stylesheets --}}
@@ -67,7 +82,7 @@
         <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicons/favicon-16x16.png') }}">
         <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicons/favicon-32x32.png') }}">
         <link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicons/favicon-96x96.png') }}">
-        <link rel="icon" type="image/png" sizes="192x192"  href="{{ asset('favicons/android-icon-192x192.png') }}">
+        <link rel="icon" type="image/png" sizes="192x192" href="{{ asset('favicons/android-icon-192x192.png') }}">
         <link rel="manifest" crossorigin="use-credentials" href="{{ asset('favicons/manifest.json') }}">
         <meta name="msapplication-TileColor" content="#ffffff">
         <meta name="msapplication-TileImage" content="{{ asset('favicon/ms-icon-144x144.png') }}">
@@ -80,14 +95,25 @@
     {{-- Body Content --}}
     @yield('body')
 
-    {{-- Base Scripts --}}
-    @if(!config('adminlte.enabled_laravel_mix'))
-        <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
-        <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
-        <script src="{{ asset('vendor/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
-        <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
-    @else
+    {{-- Base Scripts (depends on Laravel asset bundling tool) --}}
+    @if(config('adminlte.enabled_laravel_mix', false))
         <script src="{{ mix(config('adminlte.laravel_mix_js_path', 'js/app.js')) }}"></script>
+    @else
+        @switch(config('adminlte.laravel_asset_bundling', false))
+            @case('mix')
+                <script src="{{ mix(config('adminlte.laravel_js_path', 'js/app.js')) }}"></script>
+            @break
+
+            @case('vite')
+            @case('vite_js_only')
+            @break
+
+            @default
+                <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
+                <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
+                <script src="{{ asset('vendor/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
+                <script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
+        @endswitch
     @endif
 
     {{-- Extra Configured Plugins Scripts --}}