feat(experimental): minify js files using esbuild

assets/js/.gitignore

@@ -0,0 +1 @@
+minified

scripts/minify-js.cr

@@ -0,0 +1,96 @@
+require "http"
+require "colorize"
+
+ESBUILD_VERSION = "0.25.0"
+
+esbuild_os = ""
+esbuild_arch = ""
+
+# https://esbuild.github.io/getting-started/#other-ways-to-install
+{% if flag?(:linux) %}
+  esbuild_os = "linux"
+{% elsif flag?(:windows) %}
+  esbuild_os = "win32"
+{% elsif flag?(:darwin) %}
+  esbuild_os = "darwin"
+{% elsif flag?(:freebsd) %}
+  esbuild_os = "freebsd"
+{% elsif flag?(:openbsd) %}
+  esbuild_os = "openbsd"
+{% elsif flag?(:netbsd) %}
+  esbuild_os = "netbsd"
+{% elsif flag?(:solaris) %}
+  esbuild_os = "sunos"
+{% else %}
+  esbuild_os = "linux"
+{% end %}
+
+{% if flag?(:x86_64) %}
+  esbuild_arch = "x64"
+{% elsif flag?(:arm64) %}
+  esbuild_arch = "arm64"
+{% else %}
+  esbuild_arch = "x64"
+{% end %}
+
+tmp_dir_path = "#{Dir.tempdir}/invidious-esbuild-binary"
+esbuild_tar_location = "#{tmp_dir_path}/esbuild-#{esbuild_os}-#{esbuild_os}-#{ESBUILD_VERSION}.tgz"
+esbuild_binary_location = "#{tmp_dir_path}/package/bin/esbuild"
+Dir.mkdir(tmp_dir_path) if !Dir.exists? tmp_dir_path
+
+esbuild_url = "https://registry.npmjs.org/@esbuild/#{esbuild_os}-#{esbuild_arch}/-/#{esbuild_os}-#{esbuild_arch}-#{ESBUILD_VERSION}.tgz"
+
+# Download esbuild binary
+HTTP::Client.get(esbuild_url) do |response|
+  puts "Downloading esbuild from #{esbuild_url}"
+  data = response.body_io.gets_to_end
+  File.write(esbuild_tar_location, data)
+
+  `tar -vzxf '#{esbuild_tar_location}' -C '#{tmp_dir_path}'`
+  raise "Extraction for #{esbuild_tar_location} failed" if !$?.success?
+  puts "esbuild downloaded successfully"
+end
+
+files_to_minify = [
+  "_helpers.js",
+  "comments.js",
+  "embed.js",
+  "handlers.js",
+  "notifications.js",
+  "pagination.js",
+  "playlist_widget.js",
+  "post.js",
+  "sse.js",
+  "themes.js",
+  "watch.js",
+  "player.js",
+  "watched_indicator.js",
+  "watched_widget.js",
+]
+
+files_to_minify.each do |file|
+  file_path = "assets/js/#{file}"
+  outdir = "assets/js/minified"
+  process_output = IO::Memory.new
+
+  process = Process.run("#{esbuild_binary_location}", error: process_output, args: [
+    file_path,
+    "--color=false",
+    "--sourcemap",
+    "--minify",
+    "--outdir=#{outdir}",
+  ]
+  )
+
+  if process.success?
+    puts "Minified #{file}".colorize(:green)
+  elsif !process.success?
+    puts "Failed to minify #{file}, esbuild exited with exit code #{process.exit_code}: #{process_output.to_s.split("\n").first}".colorize(:red)
+    raise Exception.new("All files have to be minified sucessfully in order to compile!")
+  end
+end
+
+puts "Minify done!"
+
+# Cleanup
+`rm -rf #{tmp_dir_path}`

src/invidious.cr

@@ -160,6 +160,15 @@ LOGGER = Invidious::LogHandler.new(OUTPUT, CONFIG.log_level, CONFIG.colorize_log
 # Check table integrity
 Invidious::Database.check_integrity(CONFIG)
 
+# Minifies Invidious Javascript
+{% if flag?(:minify_debug) || (flag?(:release) || flag?(:production)) && !flag?(:skip_minified_js) %}
+  {% puts "\nMinifying Invidious JavaScript\n" %}
+  {% puts run("../scripts/minify-js.cr").stringify %}
+  JS_PATH="js/minified"
+{% else %}
+  JS_PATH="js"
+{% end %}
+
 {% if !flag?(:skip_videojs_download) %}
   # Resolve player dependencies. This is done at compile time.
   #

src/invidious/views/add_playlist_items.ecr

@@ -29,7 +29,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 
 
 <%= rendered "components/items_paginated" %>

src/invidious/views/channel.ecr

@@ -45,7 +45,7 @@
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed/channel/<%= ucid %>" />
 <%- end -%>
 
-<script src="/js/pagination.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/pagination.js?v=<%= ASSET_COMMIT %>"></script>
 
 <link rel="alternate" href="<%= youtube_url %>">
 <title><%= author %> - Invidious</title>

src/invidious/views/community.ecr

@@ -43,4 +43,4 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/community.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/community.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/items_paginated.ecr

@@ -18,4 +18,4 @@
 %>
 </script>
 
-<script src="/js/watched_indicator.js"></script>
+<script src="/<%= JS_PATH %>/watched_indicator.js"></script>

src/invidious/views/components/player.ecr

@@ -86,4 +86,4 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/player.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/player.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/components/subscribe_widget.ecr

@@ -27,7 +27,7 @@
     }.to_pretty_json
     %>
     </script>
-    <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>
+    <script src="/<%= JS_PATH %>/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>
 <% else %>
         <a id="subscribe" class="pure-button pure-button-primary"
             href="/login?referer=<%= env.get("current_page") %>">

src/invidious/views/embed.ecr

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/embed.css?v=<%= ASSET_COMMIT %>">
     <title><%= HTML.escape(video.title) %> - Invidious</title>
-    <script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
+    <script src="/<%= JS_PATH %>/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
 </head>
 
 <body class="dark-theme">
@@ -32,6 +32,6 @@
 </script>
 
 <%= rendered "components/player" %>
-<script src="/js/embed.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/embed.js?v=<%= ASSET_COMMIT %>"></script>
 </body>
 </html>

src/invidious/views/feeds/history.ecr

@@ -25,7 +25,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/watched_widget.js"></script>
+<script src="/<%= JS_PATH %>/watched_widget.js"></script>
 
 <div class="pure-g">
     <% watched.each do |item| %>

src/invidious/views/feeds/playlists.ecr

@@ -40,4 +40,4 @@
 <% end %>
 </div>
 
-<script src="/js/watched_indicator.js"></script>
+<script src="/<%= JS_PATH %>/watched_indicator.js"></script>

src/invidious/views/feeds/popular.ecr

@@ -17,4 +17,4 @@
 <% end %>
 </div>
 
-<script src="/js/watched_indicator.js"></script>
+<script src="/<%= JS_PATH %>/watched_indicator.js"></script>

src/invidious/views/feeds/subscriptions.ecr

@@ -53,7 +53,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/watched_widget.js"></script>
+<script src="/<%= JS_PATH %>/watched_widget.js"></script>
 
 
 <div class="pure-g">
@@ -62,7 +62,7 @@
 <% end %>
 </div>
 
-<script src="/js/watched_indicator.js"></script>
+<script src="/<%= JS_PATH %>/watched_indicator.js"></script>
 
 <%=
   IV::Frontend::Pagination.nav_numeric(locale,

src/invidious/views/feeds/trending.ecr

@@ -46,4 +46,4 @@
 <% end %>
 </div>
 
-<script src="/js/watched_indicator.js"></script>
+<script src="/<%= JS_PATH %>/watched_indicator.js"></script>

src/invidious/views/playlist.ecr

@@ -118,7 +118,7 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/playlist_widget.js?v=<%= ASSET_COMMIT %>"></script>
 <% end %>
 
 

src/invidious/views/post.ecr

@@ -44,5 +44,5 @@
 }.to_pretty_json
 %>
 </script>
-<script src="/js/comments.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/comments.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/post.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/post.js?v=<%= ASSET_COMMIT %>"></script>

src/invidious/views/template.ecr

@@ -22,7 +22,7 @@
 		<link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
 		<link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
 		<link rel="stylesheet" href="/css/carousel.css?v=<%= ASSET_COMMIT %>">
-		<script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
+		<script src="/<%= JS_PATH %>/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
 	</head>
 
 	<body class="<%= dark_mode.blank? ? "no" : dark_mode %>-theme">
@@ -163,10 +163,10 @@
 
 		</div>
 	</div>
-	<script src="/js/handlers.js?v=<%= ASSET_COMMIT %>"></script>
+	<script src="/<%= JS_PATH %>/handlers.js?v=<%= ASSET_COMMIT %>"></script>
-	<script src="/js/themes.js?v=<%= ASSET_COMMIT %>"></script>
+	<script src="/<%= JS_PATH %>/themes.js?v=<%= ASSET_COMMIT %>"></script>
 	<% if env.get? "user" %>
-		<script src="/js/sse.js?v=<%= ASSET_COMMIT %>"></script>
+		<script src="/<%= JS_PATH %>/sse.js?v=<%= ASSET_COMMIT %>"></script>
 		<script id="notification_data" type="application/json">
 		<%=
 		{
@@ -176,7 +176,7 @@
 		%>
 		</script>
 		<% if CONFIG.enable_user_notifications %>
-		<script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
+		<script src="/<%= JS_PATH %>/notifications.js?v=<%= ASSET_COMMIT %>"></script>
 		<% end %>
 	<% end %>
 

src/invidious/views/watch.ecr

@@ -199,7 +199,7 @@ we're going to need to do it here in order to allow for translations.
                     }.to_pretty_json
                     %>
                     </script>
-                    <script src="/js/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script>
+                    <script src="/<%= JS_PATH %>/playlist_widget.js?v=<%= Time.utc.to_unix_ms %>"></script>
                 <% end %>
             <% end %>
 
@@ -391,5 +391,5 @@ we're going to need to do it here in order to allow for translations.
         </div>
     <% end %>
 </div>
-<script src="/js/comments.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/comments.js?v=<%= ASSET_COMMIT %>"></script>
-<script src="/js/watch.js?v=<%= ASSET_COMMIT %>"></script>
+<script src="/<%= JS_PATH %>/watch.js?v=<%= ASSET_COMMIT %>"></script>