Skip to content

Commit

Permalink
refactor: use the fetch API (#33)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
lishaduck authored Oct 15, 2024
1 parent f9b9125 commit 3ed49e5
Showing 1 changed file with 31 additions and 34 deletions.
65 changes: 31 additions & 34 deletions __brick__/web/flutter_bootstrap.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
"use strict";
{{=<% %>=}}{{flutter_js}}<%={{ }}=%>
{{=<% %>=}}{{flutter_build_config}}<%={{ }}=%>

Expand Down Expand Up @@ -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);
}
}

Expand Down

0 comments on commit 3ed49e5

Please sign in to comment.