nascent-africa · Felipe-PS-95 · Aug 8, 2022 · Aug 8, 2022 · Aug 8, 2022 · Aug 10, 2022
diff --git a/breeze/resources/views/layouts/app.blade.php b/breeze/resources/views/layouts/app.blade.php
@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
-        <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+       <!-- Scripts -->
+       @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         @include('layouts.navigation')

diff --git a/breeze/resources/views/layouts/guest.blade.php b/breeze/resources/views/layouts/guest.blade.php
@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ asset('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         {{ $slot }}

diff --git a/composer.json b/composer.json
@@ -1,11 +1,11 @@
 {
-  "name": "nascent-africa/jetstrap",
-  "description": "A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream to Bootstrap 4 or 5.",
+  "name": "felipe-ps/jetstrap",
+  "description": "A Laravel 9 package to easily switch TailwindCSS resources generated by Laravel Jetstream to Bootstrap 5 with Vite.",
   "keywords": ["laravel", "bootstrap", "jetstream"],
   "license": "MIT",
   "support": {
-    "issues": "https://github.com/nascent-africa/jetstrap/issues",
-    "source": "https://github.com/nascent-africa/jetstrap"
+    "issues": "https://github.com/Felipe-PS-95/jetstrap/issues",
+    "source": "https://github.com/Felipe-PS-95/jetstrap"
   },
   "authors": [
     {
@@ -15,13 +15,13 @@
     }
   ],
   "require": {
-    "php": "^7.3|^8.0",
+    "php": "^8.0.2",
     "illuminate/support": "^8.0|^9.0"
   },
   "require-dev": {
     "inertiajs/inertia-laravel": "^0.3",
     "laravel/breeze": "^1.1",
-    "laravel/jetstream": "^2.3",
+    "laravel/jetstream": "^2.10",
     "orchestra/testbench": "^6.0|^7.0",
     "phpunit/phpunit": "^9.3"
   },

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+    },
+};
diff --git a/src/NascentAfrica/Jetstrap/Console/InstallCommand.php b/src/NascentAfrica/Jetstrap/Console/InstallCommand.php
@@ -43,6 +43,18 @@ public function handle()
         copy(__DIR__.'/../../../../stubs/webpack.mix.js', base_path('webpack.mix.js'));
         copy(__DIR__.'/../../../../stubs/webpack.config.js', base_path('webpack.config.js'));
 
+        // Fix Errors Vite...
+        if ((new Filesystem)->exists(base_path('postcss.config.js'))) {
+            (new Filesystem)->delete(base_path('postcss.config.js'));
+        }
+
+        if ((new Filesystem)->exists(base_path('vite.config.js'))) {
+            (new Filesystem)->delete(base_path('vite.config.js'));
+        }
+
+        copy(__DIR__.'/../../../../postcss.config.js', base_path('postcss.config.js'));
+        copy(__DIR__.'/../../../../vite.config.js', base_path('vite.config.js'));
+
         // Assets...
         (new Filesystem)->deleteDirectory(resource_path('css'));
         (new Filesystem)->ensureDirectoryExists(resource_path('sass'));

diff --git a/stubs/inertia/resources/views/app.blade.php b/stubs/inertia/resources/views/app.blade.php
@@ -10,13 +10,10 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
         <!-- Scripts -->
         @routes
         <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="bg-light">
         @inertia

diff --git a/stubs/livewire/resources/views/layouts/app.blade.php b/stubs/livewire/resources/views/layouts/app.blade.php
@@ -10,13 +10,10 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
         @livewireStyles
 
         <!-- Scripts -->
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="font-sans antialiased bg-light">
         <x-jet-banner />

diff --git a/stubs/livewire/resources/views/layouts/guest.blade.php b/stubs/livewire/resources/views/layouts/guest.blade.php
@@ -10,11 +10,8 @@
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
         <!-- Scripts -->
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
     </head>
     <body class="bg-light font-sans antialiased">
         {{ $slot }}

diff --git a/stubs/resources/js/app.js b/stubs/resources/js/app.js
@@ -1,4 +1,4 @@
-require('./bootstrap');
+import './bootstrap';
 
 import Alpine from 'alpinejs';
 

diff --git a/stubs/resources/js/bootstrap.js b/stubs/resources/js/bootstrap.js
@@ -1,24 +1,25 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
  * for JavaScript based Bootstrap features such as modals and tabs. This
  * code may be modified to fit the specific needs of your application.
  */
 
-import '@popperjs/core'
+ import '@popperjs/core'
 
-const bootstrap = require('bootstrap')
-
-window.bootstrap = bootstrap
+ import * as bootstrap from 'bootstrap' 
+ window.bootstrap = bootstrap
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -30,11 +31,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
-// });
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });
diff --git a/stubs/resources/sass/app.scss b/stubs/resources/sass/app.scss
@@ -5,7 +5,7 @@
 @import 'variables';
 
 // Bootstrap
-@import '~bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap/scss/bootstrap';
 
 // Custom
 @import "custom";
diff --git a/stubs/resources/views/welcome.blade.php b/stubs/resources/views/welcome.blade.php
@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
 
     <!-- Styles -->
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
 
     <style>
         body {

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import laravel, { refreshPaths } from 'laravel-vite-plugin';
+import {resolve} from 'path'
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/sass/app.scss',
+                'resources/js/app.js',
+            ],
+            refresh: [
+                ...refreshPaths,
+                'app/Http/Livewire/**',
+            ],
+        }),
+    ]
+});