Optimizations (#14)

* feat: use `const`

* feat: use `getElementById`

* fix: `getElementById`

* feat: async load javascript (wow!)

* feat: local Chart.js

* feat: minifier + `loader.js`

* feat: use `exists` instead of `try_exists`

.gitignore

@@ -2,4 +2,5 @@
 **/*.rs.bk
 **/*.env
 **/*.db3
-**/config.toml
+**/config.toml
+**/www_mini

crates/fpt_web/Cargo.toml

@@ -17,4 +17,7 @@ static-files = { version = "0.2", features = [] }
 actix-cors = { version = "0.6", features = [] }
 
 [build-dependencies]
+anyhow = { version = "1.0", features = [] }
 static-files = { version = "0.2", features = [] }
+minify-html-onepass = { version = "0.10", features = [] }
+minifier = { version = "0.2", features = [] }

crates/fpt_web/build.rs

@@ -1,5 +1,57 @@
+use anyhow::{anyhow, Result};
+use minify_html_onepass as mini;
 use static_files::resource_dir;
+use std::{fs, path::Path};
 
-fn main() -> std::io::Result<()> {
-    resource_dir("www").build()
+fn minify_files(
+    from_directory: &str,
+    to_directory: &str,
+    current_path: Option<&str>,
+) -> Result<()> {
+    let current_path = current_path.unwrap_or(from_directory);
+
+    if !Path::new(to_directory).exists() {
+        fs::create_dir_all(to_directory)?;
+    }
+
+    if Path::new(current_path).is_dir() {
+        // Recursivly call `minify_files` on directory content.
+        for entry in fs::read_dir(current_path)? {
+            let entry = entry?.path();
+            let new_current_path = entry
+                .to_str()
+                .ok_or_else(|| anyhow!("failed reading path"))?;
+            minify_files(from_directory, to_directory, Some(new_current_path))?;
+        }
+    } else {
+        let new_path = current_path.replacen(from_directory, to_directory, 1);
+        let new_path = Path::new(&new_path);
+
+        // Create subdirectories if needed.
+        if let Some(parent) = new_path.parent() {
+            if !parent.exists() {
+                fs::create_dir_all(parent)?;
+            }
+        }
+
+        // Minify.
+        let out = match new_path.extension().and_then(|x| x.to_str()) {
+            Some("html") | Some("css") => {
+                let data = fs::read(current_path)?;
+                mini::copy(&data, &mini::Cfg::new()).map_err(|e| anyhow!("{:?}", e))?
+            }
+            _ => fs::read(current_path)?,
+        };
+
+        fs::write(new_path, out)?;
+    }
+
+    Ok(())
+}
+
+fn main() -> Result<()> {
+    minify_files("www", "www_mini", None)?;
+    resource_dir("www_mini").build()?;
+
+    Ok(())
 }

crates/fpt_web/www/index.html

@@ -6,11 +6,8 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <link rel='stylesheet' href='style.css'>
-    <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
-    <script src='scripts/common.js'></script>
-    <script src='scripts/bindings.js'></script>
-    <script src='scripts/charts.js'></script>
-    <script src='scripts/main.js'></script>
+    <!--<script async src='https://cdn.jsdelivr.net/npm/chart.js'></script>-->
+    <script async src='scripts/loader.js'></script>
     <title>fpt</title>
 </head>
 

crates/fpt_web/www/scripts/charts.js

@@ -5,12 +5,12 @@
  * @returns {Promise<void>} nothing.
  */
 async function fill_allocation_chart(data, currency) {
-    let allocation_chart_el = document.querySelector("#allocation-chart");
+    const allocation_chart_el = document.getElementById("allocation-chart");
     if (allocation_chart_el === null) {
         throw Error("failed finding #allocation-chart");
     }
 
-    let tempObject = {}
+    const tempObject = {}
     data.forEach((x) => {
         if (tempObject.hasOwnProperty(x.category)) {
             tempObject[x.category] += x.value_in_currency;
@@ -19,10 +19,10 @@ async function fill_allocation_chart(data, currency) {
         }
     });
 
-    let data_values = Object.entries(tempObject).map((x) => x[1]);
-    let data_labels = Object.entries(tempObject).map((x) => x[0]);
+    const data_values = Object.entries(tempObject).map((x) => x[1]);
+    const data_labels = Object.entries(tempObject).map((x) => x[0]);
 
-    let tempChart = Chart.getChart("allocation-chart");
+    const tempChart = Chart.getChart("allocation-chart");
     if (tempChart) {
         tempChart.destroy()
     }
@@ -47,16 +47,16 @@ async function fill_allocation_chart(data, currency) {
  * @returns {Promise<void>} nothing.
  */
 async function fill_pit_chart(data, currency) {
-    let pit_chart_el = document.querySelector("#pit-chart");
+    const pit_chart_el = document.querySelector("#pit-chart");
     if (pit_chart_el === null) {
         throw Error("failed finding #pit-chart");
     }
 
     data.sort((a, b) => a - b);
-    let data_values = data.map((x) => x.total_value_in_currency);
-    let data_labels = data.map((x) => parse_date(new Date(x.time * 1000)));
+    const data_values = data.map((x) => x.total_value_in_currency);
+    const data_labels = data.map((x) => parse_date(new Date(x.time * 1000)));
 
-    let tempChart = Chart.getChart("pit-chart");
+    const tempChart = Chart.getChart("pit-chart");
     if (tempChart) {
         tempChart.destroy()
     }

crates/fpt_web/www/scripts/loader.js

@@ -0,0 +1,35 @@
+window.onload = () => {
+    load_scripts(
+        "scripts/main.js",
+        "scripts/common.js",
+        "scripts/bindings.js",
+        "scripts/charts.js",
+        "scripts/vendored/Chart.js.4.1.1.js"
+    ).then(() => {
+        load(true);
+    }).catch((error) => {
+        console.error(error);
+    });
+}
+
+/**
+ * Load everything.
+ * @param {String} sources - source to a javascript file.
+ * @param {bool} async - whether to load script async.
+ * @returns {Promise<void>} nothing.
+ */
+function load_scripts(...sources) {
+    let promises = [];
+
+    sources.forEach((source) => {
+        promises.push(new Promise((resolve, reject) => {
+            const temp = document.createElement("script");
+            temp.src = source;
+            temp.onload = resolve;
+            temp.onerror = reject;
+            document.head.appendChild(temp);
+        }));
+    });
+
+    return Promise.all(promises).catch((error) => console.error(error));
+}