cha0s/flecks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify

Browse Source
This commit is contained in:
cha0s 2022-02-25 21:39:51 -06:00
parent 5a5a209028
commit 79e25276cf
2 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/http/src/entry.js
View File

@ -1,29 +1,13 @@
import D from 'debug';
import {Flecks} from '@flecks/core';
import Progress from './progress';
/* global __non_webpack_import__ */
const {version} = require('../package.json');
let finished = 0;
const $progress = window.document.createElement('div');
const {style} = $progress;
style.backgroundColor = '#004488';
style.border = 0;
style.display = 'none';
style.height = '0.17em';
style.left = 0;
style.margin = 0;
style.padding = 0;
style.position = 'absolute';
style.top = 0;
style.transition = '1s width, 0.5s opacity';
setTimeout(() => {
style.display = 'block';
}, 250);
$progress.style.width = '0%';
$progress.value = 0;
window.document.body.prepend($progress);
const progress = new Progress(window);
(async () => {
// eslint-disable-next-line no-console
@ -35,12 +19,8 @@ window.document.body.prepend($progress);
/* @preserve webpackChunkName: "flecks-runtime" */
'@flecks/http/runtime',
);
const runtime = await loader((total, path) => {
finished += 1;
debug('loaded %s (%d/%d)', path, finished, total);
$progress.style.width = `${100 * (finished / total)}%`;
});
$progress.style.opacity = 0;
const runtime = await loader(progress.update.bind(progress));
progress.finish();
debug('starting client...');
const flecks = new Flecks(runtime);
window.flecks = flecks;

39
packages/http/src/progress.js Normal file
View File

@ -0,0 +1,39 @@
import D from 'debug';
const debug = D('@flecks/http/progress');
export default class Progress {
constructor(window) {
this.finished = 0;
this.progress = window.document.createElement('div');
const {style} = this.progress;
style.backgroundColor = '#004488';
style.border = 0;
style.display = 'none';
style.height = '0.17em';
style.left = 0;
style.margin = 0;
style.padding = 0;
style.position = 'absolute';
style.top = 0;
style.transition = '1s width, 0.5s opacity';
setTimeout(() => {
style.display = 'block';
}, 250);
this.progress.style.width = '0%';
this.progress.value = 0;
window.document.body.prepend(this.progress);
}
update(total, path) {
this.finished += 1;
debug('loaded %s (%d/%d)', path, this.finished, total);
this.progress.style.width = `${100 * (this.finished / total)}%`;
}
finish() {
this.progress.style.opacity = 0;
}
}