Watch, recompile and reload views when they change

cloudamqp · Oct 10, 2024 · 66393ec · 66393ec
1 parent 5bf1a59
commit 66393ec
Show file tree

Hide file tree

Showing 33 changed files with 165 additions and 70 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,3 +17,4 @@ package.json
 package-lock.json
 /playwright/
 /playwright-report/
+/static/views/
diff --git a/Makefile b/Makefile
@@ -1,9 +1,35 @@
 BINS := bin/lavinmq bin/lavinmqctl bin/lavinmqperf
 SOURCES := $(shell find src/lavinmq src/stdlib -name '*.cr' 2> /dev/null)
+VIEW_SOURCES := $(wildcard views/*.ecr)
+VIEW_TARGETS := $(patsubst views/%.ecr,static/views/%.html,$(VIEW_SOURCES))
+VIEW_PARTIALS := $(wildcard views/partials/*.ecr)
 JS := static/js/lib/chunks/helpers.segment.js static/js/lib/chart.js static/js/lib/amqp-websocket-client.mjs static/js/lib/amqp-websocket-client.mjs.map static/js/lib/luxon.js static/js/lib/chartjs-adapter-luxon.esm.js static/js/lib/elements-8.2.0.js static/js/lib/elements-8.2.0.css
 CRYSTAL_FLAGS := --release --stats
 override CRYSTAL_FLAGS += --error-on-warnings --link-flags=-pie
 
+.PHONY: livereload
+livereload:
+	@echo "Starting livereload server..."
+	@(pid=$$!; trap 'kill -TERM $$pid' INT; crystal run views/_livereload.cr &)
+
+.PHONY: views
+views: $(VIEW_TARGETS)
+
+.PHONY: watch-views
+watch-views:
+	while true; do $(MAKE) -q -s views || $(MAKE) -j views; sleep 0.5; done
+
+.PHONY: dev-ui
+dev-ui: livereload watch-views
+
+static/views/%.html: views/%.ecr $(VIEW_PARTIALS)
+	@mkdir -p static/views
+	@INPUT=$< crystal run views/_render.cr > $@ && echo "Rendered $< to $@"
+
+.PHONY: clean-views
+clean-views:
+	$(RM) $(VIEW_TARGETS)
+
 .PHONY: all
 all: $(BINS)
 
@@ -119,4 +145,4 @@ uninstall:
 
 .PHONY: clean
 clean:
-	$(RM) $(BINS) $(DOCS) $(JS) $(MANPAGES)
+	$(RM) $(BINS) $(DOCS) $(JS) $(MANPAGES) $(VIEW_TARGETS)
diff --git a/shard.lock b/shard.lock
@@ -12,6 +12,14 @@ shards:
     git: https://github.com/cloudamqp/amqp-client.cr.git
     version: 1.2.7
 
+  inotify:
+    git: https://github.com/petoem/inotify.cr.git
+    version: 1.0.3
+
+  live_reload:
+    git: https://github.com/bcardiff/live_reload.cr.git
+    version: 0.1.0
+
   lz4:
     git: https://github.com/84codes/lz4.cr.git
     version: 1.0.0+git.commit.96d714f7593c66ca7425872fd26c7b1286806d3d

diff --git a/shard.yml b/shard.yml
@@ -36,6 +36,11 @@ dependencies:
 development_dependencies:
   ameba:
     github: crystal-ameba/ameba
+  live_reload:
+    github: bcardiff/live_reload.cr
+  inotify:
+    github: petoem/inotify.cr
+    version: 1.0.3
 
 crystal: 1.13.2
 

diff --git a/src/lavinmq/http/controller/static.cr b/src/lavinmq/http/controller/static.cr
@@ -67,7 +67,9 @@ module LavinMQ
         end
       {% else %}
         private def serve(context, file_path)
+          Log.debug { "Serve #{file_path} from static?" }
           File.open(File.join(PUBLIC_DIR, file_path)) do |file|
+            Log.debug { "Serving static #{file_path}" }
             file.read_buffering = false
             etag = %(W/"#{Digest::MD5.hexdigest(file)}")
             if context.request.headers["If-None-Match"]? == etag
@@ -85,6 +87,13 @@ module LavinMQ
             context
           end
         rescue File::NotFoundError
+          # To enable faster frontend development, we try to serve a views from static folder.
+          # Use `make dev-ui` to compile and watch for changes.
+          return if file_path.starts_with?("/views/")
+          view = file_path.lstrip("/")
+          view = "overview" if view.empty?
+          file_path = "/views/#{view}.html"
+          serve(context, file_path)
         end
       {% end %}
 

diff --git a/views/401.ecr b/views/401.ecr
@@ -2,15 +2,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <h1>401 - Not Allowed</h1>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/404.ecr b/views/404.ecr
@@ -2,15 +2,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <h1>404 - Not Found</h1>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/_livereload.cr b/views/_livereload.cr
@@ -0,0 +1,23 @@
+require "live_reload"
+require "inotify"
+
+dir = "#{__DIR__}/../static/views"
+live_reload = LiveReload::Server.new
+watcher = Inotify.watch dir do |event|
+  puts "File changed: #{event.inspect}"
+  path = event.path
+  next unless path
+  sleep 2 # wait until the whole file is written
+  live_reload.send_reload(path: path, liveCSS: path.ends_with?(".css"))
+end
+
+puts "Watching changes from #{dir}"
+puts "LiveReload on http://#{live_reload.address}"
+
+Process.on_terminate do |_reason|
+  watcher.close
+  live_reload.http_server.close
+  exit
+end
+
+live_reload.listen
diff --git a/views/_render.cr b/views/_render.cr
@@ -0,0 +1,20 @@
+require "ecr/macros"
+require "live_reload"
+require "../src/lavinmq/version"
+
+# Used by `make dev-ui` to render views to static files for faster frontend development.
+{% begin %}
+  {%
+    source = env("INPUT").gsub(/views\/(.*)\.ecr/, "\\1")
+  %}
+
+  macro render(file)
+    ECR.embed("views/\{{file.id}}.ecr", STDOUT)
+  end
+
+  macro active_path?(path)
+    "#{\{{path}}}" == {{source}}
+  end
+
+  render({{source}})
+{% end %}
diff --git a/views/channel.ecr b/views/channel.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/channel.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card cols-6">
         <h3>Details</h3>
@@ -72,6 +72,6 @@
         </div>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/channels.ecr b/views/channels.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/channels.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <div class="table-wrapper">
@@ -28,6 +28,6 @@
         </div>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/connection.ecr b/views/connection.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
    <script type="module" src="js/connection.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card cols-6">
         <h3>Details</h3>
@@ -102,6 +102,6 @@
         <button type="submit" class="btn-secondary">Close</button>
       </form>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/connections.ecr b/views/connections.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/connections.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <div class="table-wrapper">
@@ -36,6 +36,6 @@
         </div>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/consumers.ecr b/views/consumers.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/consumers.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <div class="table-wrapper">
@@ -29,6 +29,6 @@
         </div>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/exchange.ecr b/views/exchange.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/exchange.js"></script>
   </head>
   <body>
-  <% render "header" %>
+  <% render "partials/header" %>
     <main>
       <section class="card cols-4">
         <h3>Details</h3>
@@ -152,6 +152,6 @@
         </form>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/exchanges.ecr b/views/exchanges.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/exchanges.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <div id="table-error"></div>
@@ -85,6 +85,6 @@
         <button type="submit" class="btn-primary">Add exchange</button>
       </form>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/federation.ecr b/views/federation.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/federation.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section class="card">
         <div class="table-wrapper">
@@ -130,6 +130,6 @@
 
       </form>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>
diff --git a/views/logs.ecr b/views/logs.ecr
@@ -2,11 +2,11 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% render "head" %>
+    <% render "partials/head" %>
     <script type="module" src="js/logs.js"></script>
   </head>
   <body>
-    <% render "header" %>
+    <% render "partials/header" %>
     <main>
       <section id="livelog" class="card livelog">
         <button id="download-logs" class="btn-primary"><a download href="api/logs">Download logs</a></button>
@@ -24,6 +24,6 @@
         </table>
       </section>
     </main>
-    <% render "footer" %>
+    <% render "partials/footer" %>
   </body>
 </html>