Skip to content

Commit 3d571b7

Browse files
mickael-kerjeanmickael-kerjean
committed
feature (boot): optimisation for faster boot
1 parent 45bc001 commit 3d571b7

File tree

6 files changed

+65
-53
lines changed

6 files changed

+65
-53
lines changed

‎public/assets/boot/bundler_complete.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
document.head.appendChild(Object.assign(document.createElement("script"), {
2+
type: "importmap",
3+
textContent: JSON.stringify({
4+
imports: window.bundler.esModules,
5+
}, null, 4),
6+
}));

public/assets/boot/warmup.js renamed to public/assets/boot/bundler_init.js

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
if (!HTMLScriptElement.supports?.("importmap")) throw new Error("fastboot is not supported on this platform");
21
window.bundler = (function(origin) {
32
const esModules = {};
43
return {
@@ -32,17 +31,3 @@ window.bundler = (function(origin) {
3231
esModules,
3332
};
3433
})(new URL(import.meta.url).origin);
35-
await new Promise((resolve, reject) => {
36-
document.head.appendChild(Object.assign(document.createElement("script"), {
37-
type: "module",
38-
src: `./assets/bundle.js?version=${window.VERSION}`,
39-
onload: resolve,
40-
onerror: reject,
41-
}));
42-
});
43-
document.head.appendChild(Object.assign(document.createElement("script"), {
44-
type: "importmap",
45-
textContent: JSON.stringify({
46-
imports: window.bundler.esModules,
47-
}, null, 4),
48-
}));

‎public/assets/embed/filestash-table.js‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
import { init as initConfig, getVersion, get } from "../model/config.js";
2-
3-
const DEBOUNCETIME = 100;
4-
5-
await initConfig();
6-
71
class FilestashTable extends HTMLElement {
82
constructor() {
93
super();
@@ -30,7 +24,7 @@ class FilestashTable extends HTMLElement {
3024
type: "refresh",
3125
payload: { name: this.getAttribute("name"), src: this.getAttribute("src") },
3226
}, "*");
33-
}, DEBOUNCETIME);
27+
}, 100);
3428
}
3529
}
3630

@@ -42,7 +36,6 @@ class FilestashTable extends HTMLElement {
4236
connectedCallback() {
4337
const src = this.getAttribute("src") || "";
4438
const name = this.getAttribute("name") || "main.dat";
45-
const mime = get("mime", {})[name.split(".").pop().toLowerCase()];
4639

4740
this.style.display = "inline-block";
4841
this.iframe.srcdoc = `<!DOCTYPE html>
@@ -81,31 +74,33 @@ class FilestashTable extends HTMLElement {
8174
}
8275
});
8376
</script>
84-
8577
<script type="module" defer>
86-
import { render } from "${import.meta.url}/../../${getVersion()}/index.js";
87-
import * as Application from "${import.meta.url}/../../${getVersion()}/pages/viewerpage/application_table.js";
78+
import { init as initConfig, getVersion, get } from "${import.meta.url}/../../model/config.js";
8879
89-
const $app = document.querySelector("#app");
90-
render(Application, $app, {
91-
mime: "${mime}",
92-
hasMenubar: true,
93-
getFilename: () => "${name}",
94-
getDownloadUrl: () => "${src}",
95-
});
96-
window.addEventListener("message", (event) => {
97-
if(event.data.type === "refresh") {
98-
render(Application, $app, {
99-
mime: "${mime}",
100-
hasMenubar: true,
101-
getFilename: () => event.data.payload.name,
102-
getDownloadUrl: () => event.data.payload.src,
103-
});
104-
}
105-
});
80+
await initConfig();
81+
const { render } = await import("${import.meta.url}/../../"+ getVersion() +"/index.js");
82+
const Application = await import("${import.meta.url}/../../"+ getVersion() +"/pages/viewerpage/application_table.js");
83+
84+
const $app = document.querySelector("#app");
85+
const mime = get("mime", {})["${name}".split(".").pop().toLowerCase()];
86+
render(Application, $app, {
87+
mime: mime,
88+
hasMenubar: true,
89+
getFilename: () => "${name}",
90+
getDownloadUrl: () => "${src}",
91+
});
92+
window.addEventListener("message", (event) => {
93+
if(event.data.type === "refresh") {
94+
render(Application, $app, {
95+
mime: mime,
96+
hasMenubar: true,
97+
getFilename: () => event.data.payload.name,
98+
getDownloadUrl: () => event.data.payload.src,
99+
});
100+
}
101+
});
106102
</script>
107103
108-
<script type="module" src="${import.meta.url}/../../${getVersion()}/components/modal.js"></script>
109104
<component-modal></component-modal>
110105
</body>
111106
</html>`;

‎public/assets/model/plugin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@ export async function load(mime) {
2323
const specs = plugins[mime];
2424
if (!specs) return null;
2525
const [, url] = specs;
26-
const module = await import(url);
26+
const module = await import(new URL(url, import.meta.url).href);
2727
return module.default;
2828
}

‎public/index.frontoffice.html‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,20 @@
3333
</template>
3434

3535
<script type="module">
36-
function liftoff() {
37-
document.head.appendChild(document.querySelector("template#head").content);
38-
document.body.appendChild(document.querySelector("template#body").content);
39-
}
4036
async function ignitionSequence() {
4137
window.VERSION = "{{ slice .version 0 7 }}::{{ .hash }}";
4238

43-
try { await import("./assets/boot/warmup.js"); }
44-
catch (err) { console.error(err); }
39+
try {
40+
if (!HTMLScriptElement.supports?.("importmap")) throw new Error("fastboot is not supported on this platform");
41+
{{ load_asset "assets/boot/bundler_init.js" }}
42+
await new Promise((resolve, reject) => document.head.appendChild(Object.assign(document.createElement("script"), {
43+
type: "module",
44+
src: `./assets/bundle.js?version=${window.VERSION}`,
45+
onload: resolve,
46+
onerror: reject,
47+
})))
48+
{{ load_asset "assets/boot/bundler_complete.js" }}
49+
} catch (err) { console.error(err); }
4550

4651
await Promise.all([
4752
import("./assets/{{ .version }}/components/loader.js"),
@@ -52,6 +57,11 @@
5257
}),
5358
]);
5459
}
60+
61+
function liftoff() {
62+
document.head.appendChild(document.querySelector("template#head").content);
63+
document.body.appendChild(document.querySelector("template#body").content);
64+
}
5565
//
5666
//
5767
//

‎server/ctrl/static.go‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import (
1212
"net/http"
1313
"os"
1414
"path/filepath"
15+
"regexp"
1516
"strings"
1617
"text/template"
1718

@@ -209,7 +210,22 @@ func ServeIndex(indexPath string) func(*App, http.ResponseWriter, *http.Request)
209210
SendErrorResult(res, err)
210211
}
211212
}
212-
tmpl := template.Must(template.New(indexPath).Parse(string(b)))
213+
tmpl := template.Must(template.New(indexPath).Funcs(template.FuncMap{
214+
"load_asset": func(path string) (string, error) {
215+
file, err := WWWPublic.Open(path)
216+
if err != nil {
217+
return "", err
218+
}
219+
out := "/* LOAD " + path + " */ "
220+
f, err := io.ReadAll(file)
221+
file.Close()
222+
out += regexp.MustCompile(`\s+`).ReplaceAllString(
223+
strings.ReplaceAll(string(f), "\n", ""),
224+
" ",
225+
)
226+
return out, err
227+
},
228+
}).Parse(string(b)))
213229
tmpl = template.Must(tmpl.Parse(string(TmplLoader)))
214230

215231
return func(ctx *App, res http.ResponseWriter, req *http.Request) {
@@ -389,7 +405,7 @@ func ServeBundle() func(*App, http.ResponseWriter, *http.Request) {
389405
Log.Warning("static::bundle msg=marshal_failed path=%s err=%s", path, err.Error())
390406
continue
391407
}
392-
fmt.Fprintf(&buf, "bundler.register(%q, %s);\n", path, code)
408+
fmt.Fprintf(&buf, "bundler.register(%q, %s);\n", WithBase(path), code)
393409
}
394410
etag = QuickHash(string(bundlePlain), 10)
395411
bundlePlain = buf.Bytes()

0 commit comments

Comments
 (0)