feat(standalone/setup): dedicated setup page with React

apps/client/src/index.ts

@@ -112,6 +112,8 @@ function loadIcons() {
 }
 
 function setBodyAttributes() {
+    if (!glob.isDbInitialized) return;
+
     const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
     const classesToSet = [
         device,
@@ -132,6 +134,11 @@ function setBodyAttributes() {
 }
 
 async function loadScripts() {
+    if (!glob.dbInitialized) {
+        await import("./setup.js");
+        return;
+    }
+
     switch (glob.device) {
         case "mobile":
             await import("./mobile.js");

apps/client/src/setup.tsx

@@ -0,0 +1,13 @@
+import { render } from "preact";
+
+async function main() {
+    const bodyWrapper = document.createElement("div");
+    render(<App />, bodyWrapper);
+    document.body.appendChild(bodyWrapper);
+}
+
+function App() {
+    return <p>Loading...</p>;
+}
+
+main();

apps/client/src/types.d.ts

@@ -16,6 +16,7 @@ interface ElectronProcess {
 }
 
 interface CustomGlobals extends BootstrapDefinition {
+    isDbInitialized: boolean;
     isDesktop: typeof utils.isDesktop;
     isMobile: typeof utils.isMobile;
     getComponentByEl: typeof appContext.getComponentByEl;