Refactoring: move some loading logic into svelte element

scripts/generateLayouts.ts

@@ -22,6 +22,7 @@ import { QuestionableTagRenderingConfigJson } from "../src/Models/ThemeConfig/Js
 import Script from "./Script"
 import crypto from "crypto"
 import { RasterLayerProperties } from "../src/Models/RasterLayerProperties"
+
 const sharp = require("sharp")
 
 class GenerateLayouts extends Script {
@@ -172,7 +173,7 @@ class GenerateLayouts extends Script {
         const icons = []
 
         const whiteIcons: string[] = []
-        let icon = layout.icon
+        const icon = layout.icon
         if (icon.endsWith(".svg") || icon.startsWith("<svg") || icon.startsWith("<?xml")) {
             // This is an svg. Lets create the needed pngs and do some checkes!
 
@@ -582,7 +583,7 @@ class GenerateLayouts extends Script {
         const filename = "index_" + theme.id + ".ts"
 
         const imports = [
-            `import layout from "./public/assets/generated/themes/${theme.id}.json"`,
+            `import theme from "./public/assets/generated/themes/${theme.id}.json"`,
             `import { ThemeMetaTagging } from "./src/assets/generated/metatagging/${theme.id}"`,
         ]
         for (const layerName of Constants.added_by_default) {
@@ -595,10 +596,10 @@ class GenerateLayouts extends Script {
         const addLayers = []
 
         for (const layerName of Constants.added_by_default) {
-            addLayers.push(`    layout.layers.push(<any> ${layerName})`)
+            addLayers.push(`    theme.layers.push(<any> ${layerName})`)
         }
 
-        let codeTemplate = this.codeTemplate.replace(
+        const codeTemplate = this.codeTemplate.replace(
             "    // LAYOUT.ADD_LAYERS",
             addLayers.join("\n")
         )

src/UI/SingleThemeGui.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">/**
+ * Wrapper around 'ThemeViewGui', which is responsible for some boiler plate things, such as:
+ *
+ * - Checking for WebGL support
+ * - Loading the available layers
+ * - ...
+ */
+import ThemeViewGUI from "./ThemeViewGUI.svelte"
+import Constants from "../Models/Constants.js"
+import { Utils } from "../Utils.js"
+import { UIEventSource } from "../Logic/UIEventSource"
+import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
+import { ThemeConfigJson } from "../Models/ThemeConfig/Json/ThemeConfigJson"
+import ThemeConfig from "../Models/ThemeConfig/ThemeConfig"
+
+function webgl_support() {
+  try {
+    const canvas = document.createElement("canvas")
+    if (
+      !!window.WebGLRenderingContext &&
+      (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+    ) {
+      return true
+    }
+  } catch (e) {
+    return false
+  }
+}
+
+
+async function getAvailableLayers(): Promise<Set<string>> {
+  if (!Constants.SummaryServer) {
+    return new Set<string>()
+  }
+  try {
+    const host = new URL(Constants.SummaryServer).host
+    const status: { layers: string[] } = await Promise.any([
+      Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"),
+      Utils.waitFor(2500, { layers: [] })
+    ])
+    return new Set<string>(status.layers)
+  } catch (e) {
+    console.error("Could not get MVT available layers due to", e)
+    return new Set<string>()
+  }
+}
+
+export let theme: ThemeConfig
+
+let webgl_supported = webgl_support()
+
+let availableLayers = UIEventSource.FromPromise(getAvailableLayers())
+const state = new WithSearchState(theme, availableLayers)
+
+</script>
+
+{#if !webgl_supported}
+  <div class="alert w-full h-full justify-center items-center m-8">WebGL is not supported or not enabled. This is
+    essential
+    for MapComplete to function, please enable this.
+  </div>
+{:else}
+  <ThemeViewGUI {state} />
+{/if}

src/Utils.ts

@@ -1125,9 +1125,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         element.click()
     }
 
-    public static async waitFor(timeMillis: number): Promise<void> {
+    public static async waitFor(timeMillis: number): Promise<void>;
+    public static async waitFor<T>(timeMillis: number, t: T): Promise<T>;
+
+    public static async waitFor<T = void>(timeMillis: number, t: T): Promise<T> {
         return new Promise((resolve) => {
-            window.setTimeout(resolve, timeMillis)
+            window.setTimeout(() => {
+                resolve(t)
+            }, timeMillis)
         })
     }
 

src/index.ts

@@ -1,65 +1,22 @@
 import DetermineTheme from "./Logic/DetermineTheme"
 import SvelteUIElement from "./UI/Base/SvelteUIElement"
-import ThemeViewGUI from "./UI/ThemeViewGUI.svelte"
 import { FixedUiElement } from "./UI/Base/FixedUiElement"
 import Combine from "./UI/Base/Combine"
 import { SubtleButton } from "./UI/Base/SubtleButton"
 import { Utils } from "./Utils"
-import Constants from "./Models/Constants"
 import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
-import { WithSearchState } from "./Models/ThemeViewState/WithSearchState"
+import SingleThemeGui from "./UI/SingleThemeGui.svelte"
-import { UIEventSource } from "./Logic/UIEventSource"
 
-function webgl_support() {
-    try {
-        const canvas = document.createElement("canvas")
-        return (
-            !!window.WebGLRenderingContext &&
-            (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
-        )
-    } catch (e) {
-        return false
-    }
-}
-
-async function timeout(timeMS: number): Promise<{ layers: string[] }> {
-    await Utils.waitFor(timeMS)
-    return { layers: [] }
-}
-
-async function getAvailableLayers(): Promise<Set<string>> {
-    if (!Constants.SummaryServer) {
-        return new Set<string>()
-    }
-    try {
-        const host = new URL(Constants.SummaryServer).host
-        const status: { layers: string[] } = await Promise.any([
-            Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"),
-            timeout(2500),
-        ])
-        return new Set<string>(status.layers)
-    } catch (e) {
-        console.error("Could not get MVT available layers due to", e)
-        return new Set<string>()
-    }
-}
 
 async function main() {
     try {
-        if (!webgl_support()) {
+
-            throw "WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this."
-        }
-        const availableLayers = UIEventSource.FromPromise(getAvailableLayers())
         const theme = await DetermineTheme.getTheme()
-        availableLayers.addCallbackAndRunD(availableLayers => {
-            console.log("The available layers on server are", Array.from(availableLayers))
-        })
-        const state = new WithSearchState(theme, availableLayers)
         const target = document.getElementById("maindiv")
         const childs = Array.from(target.children)
-        new ThemeViewGUI({
+        new SingleThemeGui({
             target,
-            props: { state },
+            props: { theme }
         })
         childs.forEach((ch) => target.removeChild(ch))
         Array.from(document.getElementsByClassName("delete-on-load")).forEach((el) => {

src/index_theme.ts.template

@@ -1,65 +1,20 @@
-import ThemeViewState from "./src/Models/ThemeViewState"
+import MetaTagging from "./src/Logic/MetaTagging"
-import ThemeViewGUI from "./src/UI/ThemeViewGUI.svelte"
+import SingleThemeGui from "./UI/SingleThemeGui.svelte"
-import ThemeConfig from "./src/Models/ThemeConfig/ThemeConfig";
-import MetaTagging from "./src/Logic/MetaTagging";
-import { FixedUiElement } from "./src/UI/Base/FixedUiElement";
-import { Utils } from "./src/Utils"
-import Constants from "./src/Models/Constants"
 
-function webgl_support() {
-    try {
-        var canvas = document.createElement("canvas")
-        return (
-            !!window.WebGLRenderingContext &&
-            (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
-        )
-    } catch (e) {
-        return false
-    }
-}
-
-async function timeout(timeMS: number): Promise<{ layers: string[] }> {
-    await Utils.waitFor(timeMS)
-    return { layers: [] }
-}
-
-
-async function getAvailableLayers(): Promise<Set<string>> {
-    if(!Constants.SummaryServer){
-        return new Set<string>()
-    }
-    try {
-        const host = new URL(Constants.SummaryServer).host
-        const status = await Promise.any([
-                                   Utils.downloadJson("https://" + host + "/summary/status.json"),
-                                   timeout(0)
-                               ])
-        return new Set<string>(status.layers)
-    } catch (e) {
-        console.error("Could not get MVT available layers due to", e)
-        return new Set<string>()
-    }
-}
 
 async function main() {
-    if (!webgl_support()) {
-         new FixedUiElement("WebGL is not supported or not enabled. This is essential for MapComplete to function, please enable this.").SetClass("block alert").AttachTo("maindiv")
-    }else{
-        const availableLayers = await getAvailableLayers()
         MetaTagging.setThemeMetatagging(new ThemeMetaTagging())
         // LAYOUT.ADD_LAYERS
         // LAYOUT.ADD_CONFIG
-        const state = new WithSearchState(new ThemeConfig(<any> layout), availableLayers)
         const target =  document.getElementById("maindiv")
         const childs = Array.from(target.children)
-        new ThemeViewGUI({
+        new SingleThemeGui({
             target,
-            props: { state },
+            props: { theme },
         })
         childs.forEach(ch => target.removeChild(ch))
         Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => {
                     el.parentElement.removeChild(el)
                 })
-    }
 }
 main()