feat(core): Hot Module Replacement

package.json

@@ -4,8 +4,7 @@
   "description": "Vue(3) meta-framework that uses Laravel Mix.",
   "main": "./src/mix.js",
   "scripts": {
-    "build": "mix",
-    "dev": "mix watch",
+    "dev": "mix watch --hot",
     "prod": "mix --production",
     "serve": "npx http-server -p 8000 -a localhost _dist --gzip --proxy http://localhost:8000?"
   },
@@ -18,13 +17,11 @@
     "@vueuse/head": "^0.9.7",
     "@vueuse/router": "^9.3.0",
     "autoprefixer": "^10.4.8",
-    "browser-sync": "^2.27.10",
-    "browser-sync-webpack-plugin": "^2.3.0",
+    "cli-color": "^2.0.3",
     "imagemin-jpegtran": "^7.0.0",
     "laravel-mix": "^6.0.49",
     "laravel-mix-ejs": "^2.0.0",
     "laravel-mix-replace-in-file": "^0.1.0",
-    "laravel-mix-serve": "^2.2.2",
     "laravel-mix-simple-image-processing": "^1.0.7",
     "path": "^0.12.7",
     "postcss": "^8.4.16",

src/mix.js

@@ -1,37 +1,41 @@
 const mix = require('laravel-mix')
 const path = require('path')
 const fs = require('fs')
+const clc = require('cli-color')
+
+require('laravel-mix-simple-image-processing')
+require('laravel-mix-replace-in-file')
+require('laravel-mix-ejs')
 
 const pkg = require('../package.json')
 
+const port = '3000'
 let isImgGenerated = false
 
-require('laravel-mix-serve')
-require('laravel-mix-simple-image-processing')
-require('laravel-mix-replace-in-file')
-require('laravel-mix-ejs')
+fs.rmSync('_dist/assets', { recursive: true, force: true })
+
+if (!fs.existsSync('./_dist/assets/img')) {
+  fs.mkdirSync('./_dist/assets/img', { recursive: true })
+}
 
 class VulmixInit {
   name() {
     return 'vulmix'
   }
 
   register() {
-    console.log(
-      // Cyan
-      '\x1b[36m%s\x1b[0m',
-      `\n\nVulmix ${pkg.version}.\n\n`
-    )
+    console.log(clc.cyan.underline(`\n\nVulmix ${pkg.version}`))
 
     mix
-      .before(() => {
-        console.log('Warming up...\n\n')
-
-        fs.rmSync('_dist/assets', { recursive: true, force: true })
+      .options({
+        hmrOptions: {
+          host: 'localhost',
+          port: port,
+        },
+      })
 
-        if (!fs.existsSync('./_dist/assets/img')) {
-          fs.mkdirSync('./_dist/assets/img', { recursive: true })
-        }
+      .before(() => {
+        console.log(`\n\nWarming up...`)
       })
 
       .setPublicPath('_dist')
@@ -107,8 +111,6 @@ class VulmixInit {
         // Synchronous run
         setTimeout(() => {
           if (isImgGenerated === false) {
-            console.log('Generating optimized images...\n\n')
-
             mix.imgs({
               source: 'assets/img',
               destination: '_dist/assets/img',
@@ -124,12 +126,9 @@ class VulmixInit {
             isImgGenerated = true
           }
 
-          console.log('\nServing on:')
           console.log(
-            // Cyan
-            '\x1b[36m%s\x1b[0m',
-            'http://localhost:3000 (Live reload)\n' +
-            'http://localhost:8000 (No live reload)\n'
+            clc.white('\nServing on:'),
+            clc.magentaBright.underline(`http://localhost:${port}\n`)
           )
         })
       })
@@ -144,11 +143,7 @@ class VulmixInit {
     if (mix.inProduction()) {
       mix
         .before(() => {
-          console.log(
-            // Cyan
-            '\x1b[36m%s\x1b[0m',
-            '\n\nPreparing production bundle...\n\n'
-          )
+          console.log(clc.cyan('\n\nPreparing production bundle...\n\n'))
         })
 
         .copy('node_modules/vulmix/utils/deploy/.htaccess', '_dist')
@@ -163,30 +158,6 @@ class VulmixInit {
 
         .sourceMaps()
 
-      mix
-        .serve(
-          'npx http-server -p 8000 -a localhost _dist --proxy http://localhost:8000?',
-          {
-            verbose: false,
-            build: false,
-            dev: true,
-            prod: false,
-          }
-        )
-
-        .browserSync({
-          open: false,
-          proxy: 'localhost:8000',
-          files: [
-            './app.vue',
-            './assets/**/*.{js,vue,scss}',
-            './components/**/*.{js,vue}',
-            './composables/**/*.{js,vue}',
-            './pages/**/*.{js,vue}',
-          ],
-          online: false,
-        })
-
         .disableSuccessNotifications()
     }
   }