Nested makefile and libraries from CDN

Makefile

@@ -1,37 +1,31 @@
 
-JS_SOURCES = $(wildcard frontend/src/*.js)
-JS_OUTPUTS = $(patsubst frontend/src/%.js, public/js/%.min.js, $(JS_SOURCES))
-SERVER_EXECUTABLE = phc-website-server
+GO_SOURCES = $(shell find . -name '*.go')
+GO_EXECUTABLE = phc-website-server
 
 .PHONY: all
 all: js go
 
-#
-# Build Frontend
-#
+.PHONY: setup
+setup:
+	mkdir -p public/js
 
 .PHONY: js
-js: $(JS_OUTPUTS)
-	@echo "Compiled Frontend"
-
-public/js/%.min.js: frontend/src/%.js
-	cd frontend; rollup -c rollup.config.js
-	mkdir -p public/js
-	cp $(patsubst frontend/src/%.js, frontend/dist/%.min.js, $<) $@
+js: setup
+	$(MAKE) -C frontend/
+	cp frontend/dist/*.min.js public/js/
 
 #
 # Build Server
 #
 
 .PHONY: go
-go: $(SERVER_EXECUTABLE)
+go: $(GO_EXECUTABLE)
 	@echo "Compiled Server"
 
-$(SERVER_EXECUTABLE):
-	go build -o $(SERVER_EXECUTABLE) .
+$(GO_EXECUTABLE): $(GO_SOURCES)
+	go build -o $(GO_EXECUTABLE) .
 
 .PHONY: debug
 debug:
-	@echo "JS_SOURCES = $(JS_SOURCES)"
-	@echo "JS_OUTPUTS = $(JS_OUTPUTS)"
-	@echo "SERVER_EXECUTABLE = $(SERVER_EXECUTABLE)"
+	@echo "GO_SOURCES = $(GO_SOURCES)"
+	@echo "GO_EXECUTABLE = $(GO_EXECUTABLE)"

frontend/Makefile

@@ -0,0 +1,14 @@
+
+JS_SOURCES = src/utenti.js
+JS_BUNDLES = $(patsubst src/%.js, dist/%.min.js, $(JS_SOURCES))
+
+.PHONY: all
+all: $(JS_BUNDLES)
+
+dist/%.min.js: src/%.js
+	rollup -c rollup.config.js $<
+
+.PHONY: debug
+debug:
+	@echo "JS_SOURCES = $(JS_SOURCES)"
+	@echo "JS_BUNDLES = $(JS_BUNDLES)"

frontend/rollup.config.js

@@ -1,15 +1,24 @@
 import { defineConfig } from 'rollup'
 
-import { nodeResolve } from '@rollup/plugin-node-resolve'
+// import resolve from '@rollup/plugin-node-resolve'
 import { terser } from 'rollup-plugin-terser'
 
 export default defineConfig([
     {
         input: 'src/utenti.js',
+        external: ['alpinejs', 'fuse.js'], // libraries to not bundle
         output: {
             file: 'dist/utenti.min.js',
-            format: 'es',
+            format: 'iife',
+            globals: {
+                // map library names to global constants
+                alpinejs: 'Alpine',
+                'fuse.js': 'Fuse',
+            },
         },
-        plugins: [terser(), nodeResolve()],
+        plugins: [
+            // resolve(),
+            terser(),
+        ],
     },
 ])

frontend/src/utenti.js

@@ -78,5 +78,3 @@ Alpine.data('utenti', () => ({
         console.timeEnd('search')
     },
 }))
-
-Alpine.start()

views/utenti.html

@@ -1,4 +1,9 @@
-{{template "base" .}} {{define "title"}}Utenti • PHC{{end}} {{define "body"}}
+{{template "base" .}} 
+{{define "title"}}Utenti • PHC{{end}}
+{{define "body"}}
+<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
+<script src="/public/js/utenti.min.js"></script>
 <section x-data="utenti">
     <h2>
         <i class="fas fa-users"></i>
@@ -51,7 +56,4 @@
         </div>
     </div>
 </section>
-
-<script type="module" src="/public/js/utenti.min.js"></script> 
-
 {{end}}