bundle

Makefile

@@ -1,17 +1,22 @@
 LESS := $(shell npm bin)/lessc
+ROLLUP := $(shell npm bin)/rollup
 APP := app
 CSS := $(APP)/cyp.css
+JS := $(APP)/cyp.js
 ICONS := $(APP)/js/icons.js
 SYSD_USER := ~/.config/systemd/user
 SERVICE := cyp.service
 
-all: $(CSS)
+all: $(CSS) $(JS)
 
 icons: $(ICONS)
 
 $(ICONS): $(APP)/icons/*
 	$(APP)/svg2js.sh $(APP)/icons > [email protected]
 
+$(JS): $(APP)/js/* $(APP)/js/elements/*
+	$(ROLLUP) -i $(APP)/js/cyp.js > [email protected]
+
 $(CSS): $(APP)/css/* $(APP)/css/elements/*
 	$(LESS) -x $(APP)/css/cyp.less > [email protected]
 
@@ -25,7 +30,7 @@ watch: all
 	while inotifywait -e MODIFY -r $(APP)/css $(APP)/js ; do make $^ ; done
 
 clean:
-	rm -f $(SERVICE) $(CSS)
+	rm -f $(SERVICE) $(CSS) $(JS)
 
 docker-image:
 	docker build -t cyp .

app/index.html

@@ -88,25 +88,12 @@
 				</button>
 				<button data-for="playlists" data-icon="playlist-music"><span>Playlists</span></button>
 				<button data-for="library" data-icon="library-music"><span>Library</span></button>
-<!--				<button data-for="fs" data-icon="folder"><span>Files</span></button> -->
 				<button data-for="yt" data-icon="download"><span>YouTube</span></button>
 				<button data-for="settings" data-icon="settings"><span>Settings</span></button>
 			</cyp-menu>
 		</footer>
 		</cyp-app>
 
-		<script type="module" src="js/elements/range.js"></script>
-		<script type="module" src="js/elements/app.js"></script>
-		<script type="module" src="js/elements/menu.js"></script>
-		<script type="module" src="js/elements/player.js"></script>
-		<script type="module" src="js/elements/queue.js"></script>
-		<script type="module" src="js/elements/playlists.js"></script>
-		<script type="module" src="js/elements/settings.js"></script>
-		<script type="module" src="js/elements/yt.js"></script>
-		<script type="module" src="js/elements/song.js"></script>
-		<script type="module" src="js/elements/library.js"></script>
-		<script type="module" src="js/elements/tag.js"></script>
-		<script type="module" src="js/elements/back.js"></script>
-		<script type="module" src="js/elements/path.js"></script>
+		<script type="module" src="cyp.js"></script>
 	</body>
 </html>

app/js/cyp.js

@@ -0,0 +1,13 @@
+import "./elements/range.js";
+import "./elements/app.js";
+import "./elements/menu.js";
+import "./elements/player.js";
+import "./elements/queue.js";
+import "./elements/playlists.js";
+import "./elements/settings.js";
+import "./elements/yt.js";
+import "./elements/song.js";
+import "./elements/library.js";
+import "./elements/tag.js";
+import "./elements/back.js";
+import "./elements/path.js";

package.json

@@ -9,7 +9,8 @@
     "ws2mpd": "^2.0.0"
   },
   "devDependencies": {
-    "less": "^3.9.0"
+    "less": "^3.9.0",
+    "rollup": "^2.0.6"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"