refactor: use the fetch API (#33)

* refactor: swap out xmlhttprequest for fetch

Resolves: #32

* perf: drop unnecessary async modifier

Should drop a single microtask.
Doesn't really make a difference in practice, but it doesn't hurt either.

* refactor: use async-await to load the data

* style: remove random spaces

* refactor: don't use nested functions

* fix: use strict mode, not sloppy mode

This could theoretically change behavior for `{{flutter_js}}`, but I think it's fine.

Author: lishaduck

__brick__/web/flutter_bootstrap.js

@@ -1,3 +1,4 @@
+"use strict";
 {{=<% %>=}}{{flutter_js}}<%={{ }}=%>
 {{=<% %>=}}{{flutter_build_config}}<%={{ }}=%>
 
@@ -31,48 +32,44 @@ async function beginPreloading() {
   progressIndicator.style.width = '0%';
   progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
 
-  async function reportProgress() {
-    loadedAssets++;
-
-    const value = Math.floor((loadedAssets / totalAssets) * 100) + '%';
-    progressIndicator.style.width = value;
-
-    progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
+  for (let i = 0; i < assets.length; i += batchSize) {
+    const batch = assets.slice(i, i + batchSize);
+    await loadBatch(batch);
   }
+}
 
-  async function load(url) {
-    return new Promise((resolve, reject) => {
-        const req = new XMLHttpRequest();
-
-        req.onload = function() {
-            if (req.status >= 200 && req.status < 300) {
-                resolve(req.response);
-            } else {
-                reject(new Error(`Failed to load: ${req.status} ${req.statusText}`));
-            }
-        };
+function reportProgress() {
+  loadedAssets++;
 
-        req.onerror = function() {
-            reject(new Error('Network error'));
-        };
+  const value = Math.floor((loadedAssets / totalAssets) * 100) + '%';
+  progressIndicator.style.width = value;
 
-        req.open('GET', url);
-        req.send();
-    });
-  }
+  progressText.textContent = `Loaded ${loadedAssets} of ${totalAssets} assets`;
+}
 
-  async function loadBatch(urls) {
-    const loadPromises = urls.map(url => load(url).then(reportProgress()));
-    try {
-        return await Promise.all(loadPromises);
-    } catch (error) {
-        console.error('Error loading one or more asset:', error);
+async function load(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to load: ${response.status} ${response.statusText}`,
+      );
     }
+    return await response.text();
+  } catch (error) {
+    throw new Error("Network error");
   }
+}
 
-  for (let i = 0; i < assets.length; i += batchSize) {
-    const batch = assets.slice(i, i + batchSize);
-    await loadBatch(batch);
+async function loadBatch(urls) {
+  const loadPromises = urls.map(async (url) => {
+    await load(url);
+    reportProgress();
+  });
+  try {
+    return await Promise.all(loadPromises);
+  } catch (error) {
+    console.error('Error loading one or more asset:', error);
   }
 }