Feature/vite asset builder (#895)

* Add Vite support for Lucky project generation

* Simplify to only support Vite for new projects

Author: watzon

fixtures/browser_src_template/expected/bs-config.js

@@ -1,24 +1,22 @@
 {
   "license": "UNLICENSED",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@rails/ujs": "^7.1.0",
     "modern-normalize": "^2.0.0"
   },
   "scripts": {
-    "heroku-postbuild": "yarn prod",
-    "dev": "yarn run mix",
-    "watch": "yarn run mix watch",
-    "prod": "yarn run mix --production"
+    "heroku-postbuild": "yarn build",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "watch": "vite build --watch"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.23.5",
-    "browser-sync": "^2.29.3",
-    "compression-webpack-plugin": "^10.0.0",
-    "laravel-mix": "^6.0.49",
-    "postcss": "^8.4.32",
-    "resolve-url-loader": "^5.0.0",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.2"
+    "vite": "^5.0.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dev-manifest": "^1.2.1"
   }
-}
+}

fixtures/browser_src_template/expected/package.json

@@ -8,7 +8,7 @@
 //
 //    @import "./variables/colors" # Imports the file in src/css/variables/_colors.scss
 //
-// Note: importing with `~` tells webpack to look in the installed npm packages
+// Note: Vite automatically resolves imports from node_modules
 // https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
 
 @import 'modern-normalize/modern-normalize.css';

fixtures/browser_src_template/expected/public/mix-manifest.json

@@ -0,0 +1,87 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+import compression from 'vite-plugin-compression'
+import devManifest from 'vite-plugin-dev-manifest'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // Root directory is project root (where vite.config.js is)
+  root: '.',
+  
+  // Public directory for static assets
+  publicDir: 'public/assets',
+  
+  // Build configuration
+  build: {
+    // Output directory
+    outDir: 'public',
+    // Don't empty the output directory (Lucky serves from public/)
+    emptyOutDir: false,
+    // Generate manifest for Lucky asset helpers
+    manifest: true,
+    // Define entry points
+    rollupOptions: {
+      input: {
+        // These entry names map to asset paths in Lucky:
+        // "app" -> asset("js/app.js")
+        // "styles" -> asset("css/app.scss")
+        app: resolve(__dirname, 'src/js/app.js'),
+        styles: resolve(__dirname, 'src/css/app.scss')
+      }
+    },
+    // Asset output configuration
+    assetsDir: 'assets',
+    // Source maps for production
+    sourcemap: process.env.NODE_ENV === 'production' ? false : 'inline'
+  },
+  
+  // CSS configuration
+  css: {
+    devSourcemap: true
+  },
+  
+  // Server configuration for development
+  server: {
+    // This allows Vite to be accessed from Lucky's dev server
+    origin: 'http://localhost:3001',
+    port: 3001,
+    strictPort: true,
+    // Enable HMR
+    hmr: {
+      host: 'localhost'
+    }
+  },
+  
+  // Preview server configuration (for testing production builds)
+  preview: {
+    port: 3001
+  },
+  
+  // Plugins
+  plugins: [
+    // Generate dev manifest for Lucky's compile-time asset validation
+    devManifest({
+      manifestName: 'manifest.dev',
+      clearOnClose: false
+    }),
+    // Gzip compression for production builds
+    process.env.NODE_ENV === 'production' && compression({
+      algorithm: 'gzip',
+      ext: '.gz',
+      threshold: 1024,
+    }),
+    // Add Brotli compression if desired
+    // process.env.NODE_ENV === 'production' && compression({
+    //   algorithm: 'brotliCompress',
+    //   ext: '.br',
+    //   threshold: 1024,
+    // }),
+  ].filter(Boolean),
+  
+  // Resolve configuration
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  }
+})

fixtures/browser_src_template/expected/src/css/app.scss

@@ -1,24 +1,22 @@
 {
   "license": "UNLICENSED",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@rails/ujs": "^7.1.0",
     "modern-normalize": "^2.0.0"
   },
   "scripts": {
-    "heroku-postbuild": "yarn prod",
-    "dev": "yarn run mix",
-    "watch": "yarn run mix watch",
-    "prod": "yarn run mix --production"
+    "heroku-postbuild": "yarn build",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "watch": "vite build --watch"
   },
   "devDependencies": {
-    "@babel/compat-data": "^7.23.5",
-    "browser-sync": "^2.29.3",
-    "compression-webpack-plugin": "^10.0.0",
-    "laravel-mix": "^6.0.49",
-    "postcss": "^8.4.32",
-    "resolve-url-loader": "^5.0.0",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.2"
+    "vite": "^5.0.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dev-manifest": "^1.2.1"
   }
-}
+}

fixtures/browser_src_template/expected/vite.config.js

@@ -8,7 +8,7 @@
 //
 //    @import "./variables/colors" # Imports the file in src/css/variables/_colors.scss
 //
-// Note: importing with `~` tells webpack to look in the installed npm packages
+// Note: Vite automatically resolves imports from node_modules
 // https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
 
 @import 'modern-normalize/modern-normalize.css';