From 11c4a74f972696e9ac7068e599b2ee03c0400925 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Tue, 2 Sep 2025 22:36:19 +1000
Subject: [PATCH] fix (embed): migrate embed to fastboot

---
 public/assets/boot/bundler_init.js            |  2 +-
 public/assets/css/designsystem.css            | 29 ---------
 public/assets/embed/filestash-image.js        | 56 +++++++++--------
 public/assets/embed/filestash-map.js          | 61 ++++++++++---------
 public/assets/embed/filestash-table.js        | 39 ++++++++----
 public/assets/pages/filespage/cache.js        |  1 +
 .../pages/viewerpage/application_editor.css   | 28 +++++++++
 public/index.frontoffice.html                 |  2 +-
 server/ctrl/static.go                         |  1 +
 9 files changed, 122 insertions(+), 97 deletions(-)

diff --git a/public/assets/boot/bundler_init.js b/public/assets/boot/bundler_init.js
index 2433e664..64dd5583 100644
--- a/public/assets/boot/bundler_init.js
+++ b/public/assets/boot/bundler_init.js
@@ -11,7 +11,7 @@ window.bundler = (function(origin) {
                 );
                 code = code.replace(/(?<!["])\bimport\.meta\.url\b(?!["])/g, `"${origin + path}"`);
                 code += `\n//# sourceURL=${path}`;
-                esModules[path] = "data:text/javascript," + encodeURIComponent(code);
+                esModules[origin + path] = "data:text/javascript," + encodeURIComponent(code);
             } else if (path.endsWith(".css")) {
                 code = code.replace(/@import url\("([^"]+)"\);/g, (m, rel) => {
                     const $style = document.head.querySelector(`style[id="${new URL(rel, origin + path).href}"]`);
diff --git a/public/assets/css/designsystem.css b/public/assets/css/designsystem.css
index 23f2a589..3f97cb1a 100644
--- a/public/assets/css/designsystem.css
+++ b/public/assets/css/designsystem.css
@@ -143,35 +143,6 @@ select:-moz-focusring {
     scrollbar-track-color: rgba(0, 0, 0, .1);
 }
 
-@font-face {
-    font-family: "Source Code Pro";
-    font-style: normal;
-    font-weight: 400;
-    src: local("Source Code Pro"), local("SourceCodePro-Regular"), url(../fonts/SourceCodePro-Regular-400-latin-ext.woff2) format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-    font-family: "Source Code Pro";
-    font-style: normal;
-    font-weight: 400;
-    src: local("Source Code Pro"), local("SourceCodePro-Regular"), url(../fonts/SourceCodePro-Regular-400-latin.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-    font-family: "Source Code Pro";
-    font-style: normal;
-    font-weight: 600;
-    src: local('Source Code Pro Semibold'), local('SourceCodePro-Semibold'), url(../fonts/SourceCodePro-Semibold-600-latin-ext.woff2) format("woff2");
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-    font-family: "Source Code Pro";
-    font-style: normal;
-    font-weight: 600;
-    src: local("Source Code Pro Semibold"), local("SourceCodePro-Semibold"), url(../fonts/SourceCodePro-Semibold-600-latin.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 /* skip link */
 body > a[aria-role="navigation"] {
     position: absolute;
diff --git a/public/assets/embed/filestash-image.js b/public/assets/embed/filestash-image.js
index 4ade0798..d042a40b 100644
--- a/public/assets/embed/filestash-image.js
+++ b/public/assets/embed/filestash-image.js
@@ -1,9 +1,3 @@
-import { init as initConfig, getVersion, get } from "../model/config.js";
-
-const DEBOUNCETIME = 100;
-
-await initConfig();
-
 class FilestashImage extends HTMLElement {
     constructor() {
         super();
@@ -31,7 +25,7 @@ class FilestashImage extends HTMLElement {
                     type: "refresh",
                     payload: { name: this.getAttribute("name"), src: this.getAttribute("src") },
                 }, "*");
-            }, DEBOUNCETIME);
+            }, 100);
         }
     }
 
@@ -43,7 +37,6 @@ class FilestashImage extends HTMLElement {
     connectedCallback() {
         const src = this.getAttribute("src") || "";
         const name = this.getAttribute("name") || "main.dat";
-        const mime = get("mime", {})[name.split(".").pop().toLowerCase()];
 
         this.style.display = "inline-block";
         this.iframe.srcdoc = `<!DOCTYPE html>
@@ -84,32 +77,45 @@ class FilestashImage extends HTMLElement {
                 </script>
 
                 <script type="module" defer>
-                import { render } from "${import.meta.url}/../../${getVersion()}/index.js";
-                import * as Application from "${import.meta.url}/../../${getVersion()}/pages/viewerpage/application_image.js";
-                import { init as initCache } from "${import.meta.url}/../../${getVersion()}/pages/filespage/cache.js";
+                    const [{ version, mimes }] = await Promise.all([
+                        fetch("${import.meta.url}/../../../api/config").then(async (resp) => {
+                            if (!resp.ok) return "na";
+                            const { result } = await resp.json();
+                            return { version: result.version, mimes: result.mime };
+                        }),
+                        import("${import.meta.url}/../../boot/bundler_init.js").then(async () => {
+                            await new Promise((resolve, reject) => document.head.appendChild(Object.assign(document.createElement("script"), {
+                                type: "module",
+                                src: new URL("../bundle.js", "${import.meta.url}"),
+                                onload: resolve,
+                                onerror: reject,
+                            })));
+                            await import("${import.meta.url}/../../boot/bundler_complete.js");
+                        }),
+                    ]);
 
-                await initCache();
+                    const { render } = await import("${import.meta.url}/../../"+ version +"/index.js");
+                    const Application = await import("${import.meta.url}/../../"+ version +"/pages/viewerpage/application_image.js");
 
-                const $app = document.querySelector("#app");
-                render(Application, $app, {
-                    mime: "${mime}",
-                    hasMenubar: true,
-                    getFilename: () => "${name}",
-                    getDownloadUrl: () => "${src}",
-                });
-                window.addEventListener("message", (event) => {
-                    if(event.data.type === "refresh") {
+                    const $app = document.querySelector("#app");
+                    const mime = mimes["${name}".split(".").pop().toLowerCase()];
+                    render(Application, $app, {
+                        mime: mime,
+                        hasMenubar: true,
+                        getFilename: () => "${name}",
+                        getDownloadUrl: () => "${src}",
+                    });
+                    window.addEventListener("message", (event) => {
+                        if(event.data.type !== "refresh") return;
                         render(Application, $app, {
-                            mime: "${mime}",
+                            mime: mime,
                             hasMenubar: true,
                             getFilename: () => event.data.payload.name,
                             getDownloadUrl: () => event.data.payload.src,
                         });
-                    }
-                });
+                    });
                 </script>
 
-                <script type="module" src="${import.meta.url}/../../${getVersion()}/components/modal.js"></script>
                 <component-modal></component-modal>
             </body>
         </html>`;
diff --git a/public/assets/embed/filestash-map.js b/public/assets/embed/filestash-map.js
index 2334f6df..f8587547 100644
--- a/public/assets/embed/filestash-map.js
+++ b/public/assets/embed/filestash-map.js
@@ -1,9 +1,3 @@
-import { init as initConfig, getVersion } from "../model/config.js";
-
-const DEBOUNCETIME = 100;
-
-await initConfig();
-
 class FilestashMap extends HTMLElement {
     constructor() {
         super();
@@ -30,7 +24,7 @@ class FilestashMap extends HTMLElement {
                     type: "refresh",
                     payload: { name: this.getAttribute("name"), src: this.getAttribute("src") },
                 }, "*");
-            }, DEBOUNCETIME);
+            }, 100);
         }
     }
 
@@ -41,12 +35,7 @@ class FilestashMap extends HTMLElement {
 
     connectedCallback() {
         const src = this.getAttribute("src") || "";
-        const name = this.getAttribute("name") || "main.dbf";
-        const mime = {
-            "geojson": "application/geo+json",
-            "shp": "application/vnd.shp",
-            "wms": "application/vnd.ogc.wms_xml",
-        }[name.split(".").pop().toLowerCase()];
+        const name = this.getAttribute("name") || "main.dat";
 
         this.style.display = "inline-block";
         this.iframe.srcdoc = `<!DOCTYPE html>
@@ -87,29 +76,45 @@ class FilestashMap extends HTMLElement {
                 </script>
 
                 <script type="module" defer>
-                import { render } from "${import.meta.url}/../../${getVersion()}/index.js";
-                import * as Application from "${import.meta.url}/../../${getVersion()}/pages/viewerpage/application_map.js";
+                    const [{ version, mimes }] = await Promise.all([
+                        fetch("${import.meta.url}/../../../api/config").then(async (resp) => {
+                            if (!resp.ok) return "na";
+                            const { result } = await resp.json();
+                            return { version: result.version, mimes: result.mime };
+                        }),
+                        import("${import.meta.url}/../../boot/bundler_init.js").then(async () => {
+                            await new Promise((resolve, reject) => document.head.appendChild(Object.assign(document.createElement("script"), {
+                                type: "module",
+                                src: new URL("../bundle.js", "${import.meta.url}"),
+                                onload: resolve,
+                                onerror: reject,
+                            })));
+                            await import("${import.meta.url}/../../boot/bundler_complete.js");
+                        }),
+                    ]);
 
-                const $app = document.querySelector("#app");
-                render(Application, $app, {
-                    mime: "${mime}",
-                    hasMenubar: true,
-                    getFilename: () => "${name}",
-                    getDownloadUrl: () => "${src}",
-                });
-                window.addEventListener("message", (event) => {
-                    if(event.data.type === "refresh") {
+                    const { render } = await import("${import.meta.url}/../../"+ version +"/index.js");
+                    const Application = await import("${import.meta.url}/../../"+ version +"/pages/viewerpage/application_map.js");
+
+                    const $app = document.querySelector("#app");
+                    const mime = mimes["${name}".split(".").pop().toLowerCase()];
+                    render(Application, $app, {
+                        mime: mime,
+                        hasMenubar: true,
+                        getFilename: () => "${name}",
+                        getDownloadUrl: () => "${src}",
+                    });
+                    window.addEventListener("message", (event) => {
+                        if(event.data.type !== "refresh") return;
                         render(Application, $app, {
-                            mime: "${mime}",
+                            mime: mime,
                             hasMenubar: true,
                             getFilename: () => event.data.payload.name,
                             getDownloadUrl: () => event.data.payload.src,
                         });
-                    }
-                });
+                    });
                 </script>
 
-                <script type="module" src="${import.meta.url}/../../${getVersion()}/components/modal.js"></script>
                 <component-modal></component-modal>
             </body>
         </html>`;
diff --git a/public/assets/embed/filestash-table.js b/public/assets/embed/filestash-table.js
index 3011a6b8..4d8ea56a 100644
--- a/public/assets/embed/filestash-table.js
+++ b/public/assets/embed/filestash-table.js
@@ -75,14 +75,28 @@ class FilestashTable extends HTMLElement {
                 });
                 </script>
                 <script type="module" defer>
-                    import { init as initConfig, getVersion, get } from "${import.meta.url}/../../model/config.js";
+                    const [{ version, mimes }] = await Promise.all([
+                        fetch("${import.meta.url}/../../../api/config").then(async (resp) => {
+                            if (!resp.ok) return "na";
+                            const { result } = await resp.json();
+                            return { version: result.version, mimes: result.mime };
+                        }),
+                        import("${import.meta.url}/../../boot/bundler_init.js").then(async () => {
+                            await new Promise((resolve, reject) => document.head.appendChild(Object.assign(document.createElement("script"), {
+                                type: "module",
+                                src: new URL("../bundle.js", "${import.meta.url}"),
+                                onload: resolve,
+                                onerror: reject,
+                            })));
+                            await import("${import.meta.url}/../../boot/bundler_complete.js");
+                        }),
+                    ]);
 
-                    await initConfig();
-                    const { render } = await import("${import.meta.url}/../../"+ getVersion() +"/index.js");
-                    const Application = await import("${import.meta.url}/../../"+ getVersion() +"/pages/viewerpage/application_table.js");
+                    const { render } = await import("${import.meta.url}/../../"+ version +"/index.js");
+                    const Application = await import("${import.meta.url}/../../"+ version +"/pages/viewerpage/application_table.js");
 
                     const $app = document.querySelector("#app");
-                    const mime = get("mime", {})["${name}".split(".").pop().toLowerCase()];
+                    const mime = mimes["${name}".split(".").pop().toLowerCase()];
                     render(Application, $app, {
                         mime: mime,
                         hasMenubar: true,
@@ -90,14 +104,13 @@ class FilestashTable extends HTMLElement {
                         getDownloadUrl: () => "${src}",
                     });
                     window.addEventListener("message", (event) => {
-                        if(event.data.type === "refresh") {
-                            render(Application, $app, {
-                                mime: mime,
-                                hasMenubar: true,
-                                getFilename: () => event.data.payload.name,
-                                getDownloadUrl: () => event.data.payload.src,
-                            });
-                        }
+                        if(event.data.type !== "refresh") return;
+                        render(Application, $app, {
+                            mime: mime,
+                            hasMenubar: true,
+                            getFilename: () => event.data.payload.name,
+                            getDownloadUrl: () => event.data.payload.src,
+                        });
                     });
                 </script>
 
diff --git a/public/assets/pages/filespage/cache.js b/public/assets/pages/filespage/cache.js
index 22eb72b4..7bd58bec 100644
--- a/public/assets/pages/filespage/cache.js
+++ b/public/assets/pages/filespage/cache.js
@@ -221,6 +221,7 @@ export async function init() {
     const setup_cache = () => {
         cache = new InMemoryCache();
         if (!("indexedDB" in window)) return;
+        else if (window.self !== window.top) return;
 
         cache = assert.truthy(new IndexDBCache());
         return cache.db.catch((err) => {
diff --git a/public/assets/pages/viewerpage/application_editor.css b/public/assets/pages/viewerpage/application_editor.css
index fd1d937c..e5678407 100644
--- a/public/assets/pages/viewerpage/application_editor.css
+++ b/public/assets/pages/viewerpage/application_editor.css
@@ -98,6 +98,34 @@
     font-size: 16px;
     font-family: "Source Code Pro", monospace;
 }
+@font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Source Code Pro"), local("SourceCodePro-Regular"), url(../../fonts/SourceCodePro-Regular-400-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Source Code Pro"), local("SourceCodePro-Regular"), url(../../fonts/SourceCodePro-Regular-400-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 600;
+    src: local('Source Code Pro Semibold'), local('SourceCodePro-Semibold'), url(../../fonts/SourceCodePro-Semibold-600-latin-ext.woff2) format("woff2");
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 600;
+    src: local("Source Code Pro Semibold"), local("SourceCodePro-Semibold"), url(../../fonts/SourceCodePro-Semibold-600-latin.woff2) format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 .cm-s-default .cm-header {
     font-size: 18px;
diff --git a/public/index.frontoffice.html b/public/index.frontoffice.html
index 6a8548a7..f6565c52 100644
--- a/public/index.frontoffice.html
+++ b/public/index.frontoffice.html
@@ -44,7 +44,7 @@
                      src: `./assets/bundle.js?version=${window.VERSION}`,
                      onload: resolve,
                      onerror: reject,
-                 })))
+                 })));
                  {{ load_asset "assets/boot/bundler_complete.js" }}
              } catch (err) { console.error(err); }
 
diff --git a/server/ctrl/static.go b/server/ctrl/static.go
index 4d373aa2..d7fc4fe5 100644
--- a/server/ctrl/static.go
+++ b/server/ctrl/static.go
@@ -376,6 +376,7 @@ func ServeBundle() func(*App, http.ResponseWriter, *http.Request) {
 		"/assets/" + BUILD_REF + "/pages/viewerpage/model_files.js",
 		"/assets/" + BUILD_REF + "/pages/viewerpage/common.js",
 		"/assets/" + BUILD_REF + "/pages/viewerpage/application_downloader.js",
+		"/assets/" + BUILD_REF + "/pages/viewerpage/application_downloader.css",
 		"/assets/" + BUILD_REF + "/pages/viewerpage/component_menubar.js",
 		"/assets/" + BUILD_REF + "/pages/viewerpage/component_menubar.css",
 	}