Bundle js modules with vite

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 static/style/tailwind.css
 .vscode/alive
+dist

Makefile

@@ -1,8 +1,8 @@
 install: ## Install dependencies
 	@qlot install ; npm i
 
-css: ## Scan and build tailwindcss
-	@npx tailwindcss -o ./static/style/tailwind.css --watch
+dev: ## Run dev mode
+	@npm run dev
 
 help: ## Show options
 	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \

package.json

@@ -1,6 +1,22 @@
 {
+  "name": "hp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
   "devDependencies": {
-    "daisyui": "^4.6.1",
-    "tailwindcss": "^3.4.1"
+    "autoprefixer": "^10.4.17",
+    "daisyui": "^4.7.2",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.4"
+  },
+  "dependencies": {
+    "alpinejs": "^3.13.5",
+    "htmx.org": "^1.9.10"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.lisp

@@ -19,8 +19,8 @@
 
 (defparameter *app*
   (lack:builder (:static
-                 :path "/static/"
-                 :root (asdf:system-relative-pathname :hp "static/"))
+                 :path "/dist/assets/"
+                 :root (asdf:system-relative-pathname :hp "assets/"))
                 *raw-app*))
 
 ; for clackup cmd

src/components/layout.lisp

@@ -9,10 +9,8 @@
     (html
       (head
         (title "skyizwhite.dev")
-        (script :src "/static/vendor/htmx.min.js")
-        (script :defer t :src "/static/vendor/alpine.min.js")
-        (link :href "/static/style/main.css" :rel "stylesheet")
-        (link :href "/static/style/tailwind.css" :rel "stylesheet"))
+        (script :type "module" :src "http://localhost:5173/@vite/client")
+        (script :type "module" :src "http://localhost:5173/src/js/main.js"))
       (body :class "h-[100svh] w-screen"
         (main :class "h-full"
           pi:children)))))

src/js/main.js

@@ -0,0 +1,8 @@
+import './style.css'
+import HTMX from 'htmx.org'
+import Alpine from 'alpinejs'
+
+window.htmx = HTMX;
+window.Alpine = Alpine
+
+Alpine.start()

vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    manifest: true,
+    rollupOptions: {
+      input: 'src/js/main.js',
+    },
+  },
+})