Refactoring: use proper way to initialize the main svelte components

src/StylesheetTestGui.ts

@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import StylesheetTestGui from "./UI/StylesheetTestGui.svelte"
 
-new SvelteUIElement(StylesheetTestGui, {}).AttachTo("main")
+new StylesheetTestGui({
+    target: document.getElementById("maindiv")
+})

src/UI/AllThemesGui.svelte

@@ -65,6 +65,7 @@
   }
 </script>
 
+<main>
 <div class="m-4 flex flex-col">
   <LanguagePicker
     clss="self-end max-w-full"
@@ -165,3 +166,4 @@
     v{Constants.vNumber}
   </div>
 </div>
+</main>

src/UI/Leaderboard.svelte

@@ -30,7 +30,7 @@
       }
   > = UIEventSource.FromPromise(Utils.downloadJsonCached(source))
 </script>
-
+<main>
 <h1>Contributed images with MapComplete: leaderboard</h1>
 
 {#if $data}
@@ -67,3 +67,4 @@
 <div>
   Logged in as {$loggedInContributor}
 </div>
+</main>

src/UI/NotFound.svelte

@@ -5,6 +5,7 @@
   console.log("???")
 </script>
 
+<main>
 <div class="flex flex-col">
   <Tr t={Translations.t.general["404"]} />
   <BackButton
@@ -18,3 +19,4 @@
     </div>
   </BackButton>
 </div>
+</main>

src/UI/PrivacyGui.svelte

@@ -16,7 +16,7 @@
     userRelatedState: new UserRelatedState(osmConnection)
   }
 </script>
-
+<main>
 <div class="flex h-screen flex-col overflow-hidden px-4">
   <div class="flex justify-between">
     <h2 class="flex items-center">
@@ -33,3 +33,4 @@
     <Tr t={Translations.t.general.backToIndex} />
   </a>
 </div>
+</main>

src/UI/StylesheetTestGui.svelte

@@ -6,6 +6,7 @@
   import { UIEventSource } from "../Logic/UIEventSource"
 </script>
 
+<main>
 <div>
   <h1>Stylesheet testing grounds</h1>
 
@@ -167,3 +168,4 @@
     </select>
   </div>
 </div>
+</main>

src/UI/Test.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">
-  import { Translation } from "./i18n/Translation"
-  import LanguagePicker from "./InputElement/LanguagePicker.svelte"
-  import Tr from "./Base/Tr.svelte"
-  import ToSvelte from "./Base/ToSvelte.svelte"
-
-  const m = new Map<string, string>()
-  m.set("nl", "Nederlands")
-  const tr = Translation.fromMap(m, true)
+  import { Button, Search } from "flowbite-svelte"
 </script>
 
-<LanguagePicker/>
-<h1>Svelte native</h1>
-<Tr t={tr}/>
-<h1>ToSvelte</h1>
-<ToSvelte construct={tr}/>
+<main>
+<Search size="md">
+</Search>
+</main>

src/UI/ThemeViewGUI.svelte

@@ -203,6 +203,7 @@
 
 </script>
 
+<main>
 <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
   <MaplibreMap map={maplibremap} mapProperties={mapproperties} />
 </div>
@@ -688,3 +689,4 @@
 <CloseAnimation isOpened={selectedElement.map(sl => sl !== undefined && sl?.properties?.id === LastClickFeatureSource.newPointElementId)} moveTo={openNewElementButton} debug="newElement"/>
 <CloseAnimation isOpened={state.guistate.filtersPanelIsOpened} moveTo={openFilterButton} debug="filter"/>
 <CloseAnimation isOpened={state.guistate.backgroundLayerSelectionIsOpened} moveTo={openBackgroundButton} debug="bg"/>
+</main>

src/all_themes_index.ts

@@ -28,4 +28,6 @@ if (layout !== "") {
     )
 }
 
-new SvelteUIElement(AllThemesGui, {}).AttachTo("main")
+new AllThemesGui({
+    target: document.getElementById("main")
+})

src/index.ts

@@ -52,8 +52,10 @@ async function main() {
         ])
         console.log("The available layers on server are", Array.from(availableLayers))
         const state = new ThemeViewState(layout, availableLayers)
-        const main = new SvelteUIElement(ThemeViewGUI, { state })
-        main.AttachTo("maindiv")
+        new ThemeViewGUI({
+            target: document.getElementById("maindiv"),
+            props: {state}
+        })
         Array.from(document.getElementsByClassName("delete-on-load")).forEach((el) => {
             el.parentElement.removeChild(el)
         })

src/index_theme.ts.template

@@ -1,5 +1,4 @@
 import ThemeViewState from "./src/Models/ThemeViewState"
-import SvelteUIElement from "./src/UI/Base/SvelteUIElement"
 import ThemeViewGUI from "./src/UI/ThemeViewGUI.svelte"
 import LayoutConfig from "./src/Models/ThemeConfig/LayoutConfig";
 import MetaTagging from "./src/Logic/MetaTagging";
@@ -47,8 +46,10 @@ async function main() {
         MetaTagging.setThemeMetatagging(new ThemeMetaTagging())
         // LAYOUT.ADD_LAYERS
         const state = new ThemeViewState(new LayoutConfig(<any> layout), availableLayers)
-        const main = new SvelteUIElement(ThemeViewGUI, { state })
-        main.AttachTo("maindiv")
+        new ThemeViewGUI({
+            target: document.getElementById("maindiv"),
+            props: {state}
+        })
         Array.from(document.getElementsByClassName("delete-on-load")).forEach(el => {
                     el.parentElement.removeChild(el)
                 })

src/leaderboard.ts

@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import Leaderboard from "./UI/Leaderboard.svelte"
 
-new SvelteUIElement(Leaderboard, {}).AttachTo("main")
+new Leaderboard({
+    target: document.getElementById("main")
+})

src/notfound.ts

@@ -1,4 +1,5 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import NotFound from "./UI/NotFound.svelte"
 
-new SvelteUIElement(NotFound, {}).AttachTo("maindiv")
+new NotFound({
+    target: document.getElementById("maindiv")
+})

src/privacy_index.ts

@@ -1,3 +1,4 @@
-import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import PrivacyGui from "./UI/PrivacyGui.svelte"
-new SvelteUIElement(PrivacyGui, {}).AttachTo("main")
+new PrivacyGui({
+    target: document.getElementById("main")
+})

src/test.ts

@@ -1,4 +1,6 @@
 import SvelteUIElement from "./UI/Base/SvelteUIElement"
 import Test from "./UI/Test.svelte"
 
-new SvelteUIElement(Test).AttachTo("maindiv")
+new Test({
+    target: document.getElementById("maindiv")
+})