fix: Livewire components without publishing (#9)

* feat: Before testing the no-publishing method

* fix: Sidebar and navbar works without publishing

* docs: Moved the npm above publishing

* feat: Vite to build app.sass and sidebar.sass

* fix: Background image instead of color

README.md

@@ -16,18 +16,18 @@ You can install the package via composer:
 composer require achyutn/laravel-dashboard
 ```
 
-You can publish the views and config file with:
+Install `sass` and `bootstrap` to your project:
 
 ```bash
-php artisan vendor:publish --provider="AchyutN\Dashboard\DashboardServiceProvider"
+npm install sass bootstrap
 ```
 
-Install `sass` and `bootstrap` to your project:
+You can publish the views and config file with:
 
 ```bash
-npm install sass bootstrap
+php artisan vendor:publish --provider="AchyutN\Dashboard\DashboardServiceProvider"
 ```
 
 ## Usage
 
-You can simply customize the dashboard by editing the `config/dashboard.php` file.
+You can simply customize the dashboard by editing the [config/dashboard.php](config/dashboard.php) file.

composer.json

@@ -6,7 +6,8 @@
         "rappasoft/laravel-livewire-tables": "^3.1.5|^2.15.0",
         "spatie/laravel-medialibrary": "^11.0.0",
         "laravel/framework": "^v10.38.0",
-        "laravel/ui": "^4.3.0"
+        "laravel/ui": "^4.3.0",
+        "ext-json": "*"
     },
     "autoload": {
         "psr-4": {

config/dashboard.php

@@ -26,7 +26,7 @@
      * Background for the sidebar
      * options => 'image' or 'color'
      */
-    'background' => 'color',
+    'background' => 'image',
 
     /**
      * background color for the sidebar

src/DashboardServiceProvider.php

@@ -2,7 +2,10 @@
 
 namespace AchyutN\Dashboard;
 
+use AchyutN\Dashboard\Livewire\Navbar;
+use AchyutN\Dashboard\Livewire\Sidebar;
 use Illuminate\Support\ServiceProvider;
+use Livewire\Livewire;
 
 class DashboardServiceProvider extends ServiceProvider
 {
@@ -13,6 +16,12 @@ class DashboardServiceProvider extends ServiceProvider
      */
     public function boot()
     {
+        /**
+         * Register Livewire components
+         */
+        Livewire::component('sidebar', Sidebar::class);
+        Livewire::component('navbar', Navbar::class);
+
         /**
          * Load views from the package
          *
@@ -47,24 +56,9 @@ public function boot()
             $livewire_version = (int)substr($livewire_version, 1);
 
             $viewPath = $livewire_version >= 3 ? 'components/' : '';
-            $compPath = $livewire_version >= 3 ? '' : 'Http/';
-
-            if($livewire_version >= 3) {
-                $this->publishes([
-                    __DIR__.'/LiveWire/Sidebar.php' => app_path('Livewire/Components/Sidebar.php'),
-                    __DIR__.'/LiveWire/Navbar.php' => app_path('Livewire/Components/Navbar.php'),
-                ]);
-            } else {
-                $this->publishes([
-                    __DIR__.'/LiveWire/Sidebarv2.php' => app_path('Http/Livewire/Components/Sidebar.php'),
-                    __DIR__.'/LiveWire/Navbarv2.php' => app_path('Http/Livewire/Components/Navbar.php'),
-                ]);
-            }
 
             $this->publishes([
                 __DIR__.'/../config/dashboard.php' => config_path('dashboard.php'),
-                __DIR__.'/views/sidebar.blade.php' => resource_path('views/livewire/components/sidebar.blade.php'),
-                __DIR__.'/views/navbar.blade.php' => resource_path('views/livewire/components/navbar.blade.php'),
                 __DIR__.'/views/layout.blade.php' => resource_path('views/'.$viewPath.'layouts/app.blade.php'),
 
                 __DIR__.'/sass/_variables.scss' => resource_path('sass/_variables.scss'),
@@ -82,6 +76,12 @@ public function boot()
             $bootstrap_js = "import 'bootstrap';\n" . $bootstrap_js;
             file_put_contents(resource_path('js/bootstrap.js'), $bootstrap_js);
         }
+
+        $vite = file_get_contents(base_path('vite.config.js'));
+        if(strpos($vite, "resources/sass/app.scss") === false) {
+            $vite = str_replace("input: ['resources/css/app.css', 'resources/js/app.js'],", "input: ['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js', 'resources/sass/sidebar.scss'],", $vite);
+            file_put_contents(base_path('vite.config.js'), $vite);
+        }
     }
 
     /**

src/Livewire/Navbar.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace App\Livewire\Components;
+namespace AchyutN\Dashboard\Livewire;
 
 use Livewire\Component;
 
@@ -13,6 +13,6 @@ public function mount($title)
     }
     public function render()
     {
-        return view('livewire.components.navbar');
+        return app('view')->make('dashboard::navbar');
     }
 }

src/Livewire/Sidebar.php

@@ -1,13 +1,13 @@
 <?php
 
-namespace App\Livewire\Components;
+namespace AchyutN\Dashboard\Livewire;
 
 use Livewire\Component;
 
 class Sidebar extends Component
 {
     public function render()
     {
-        return view('livewire.components.sidebar');
+        return app('view')->make('dashboard::sidebar');
     }
 }

src/views/layout.blade.php

@@ -46,11 +46,11 @@
 <body>
 <div id="app" class="vh-100 d-flex flex-row overflow-hidden">
     @auth
-        @livewire('components.sidebar')
+        <livewire:sidebar />
     @endauth
     <main class="position-absolute body-comp top-0">
         @auth
-            @livewire('components.navbar', ['title' => app()->view->getSections()['page_title'] ?? 'Undefined'])
+            <livewire:navbar :title="app()->view->getSections()['page_title'] ?? 'Undefined'" />
             <div class="container-fluid w-100">
                 {{ $slot }}
             </div>